/* Layout: one centred "wall" (max 1180px). Content sits in cut blocks separated by thin mortar joints, laid in offset courses like ashlar masonry. Dark-only brand world: gold, deep bordeaux and black. */
:root {
  --ink: #0D0A0B;            /* night: black with a slight wine tone */
  --ink-2: #171012;          /* blocks and cards */
  --ink-3: #22151A;          /* block hover, raised panels */
  --joint: rgba(212, 175, 55, 0.13);         /* gold mortar joints */
  --joint-strong: rgba(212, 175, 55, 0.26);
  --ivory: #F7EFDF;          /* bright text */
  --text: #DDD2BF;           /* body text */
  --muted: #B3A285;          /* secondary text (sand) */
  --gold: #D4AF37;
  --gold-hi: #F6DE8D;        /* light gold: numbers, highlights, hover */
  --gold-bright: #E9C664;    /* small gold text: links, eyebrows, ticks, focus */
  --gold-deep: #A67C1B;
  --wine: #4A1220;           /* deep bordeaux: keystone, badges, glows, panels */
  --wine-hi: #7A1F33;        /* only the light edge of bordeaux gradients */
  --wine-dark: #330B15;
  --on-gold: #1A1206;        /* text on gold */
  --warn: #FF9C8A;

  --grad-gold: linear-gradient(180deg, #FBE596 0%, #D4AF37 55%, #B88E25 100%);   /* gold buttons, pills, filled days */
  --grad-gold-line: linear-gradient(90deg, #F6DE8D 0%, #D4AF37 55%, #A67C1B 100%); /* thin gold lines */
  --grad-gold-text: linear-gradient(180deg, #FFF3C4 0%, #F0CD62 45%, #D4AF37 70%, #A67C1B 100%); /* gold headings */
  --grad-wine: linear-gradient(180deg, #6A1A2C 0%, #4A1220 55%, #330B15 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .75 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --f-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem);
  --step-4: clamp(2.1rem, 1.45rem + 2.8vw, 3.35rem);
  --step-5: clamp(2.7rem, 1.5rem + 5vw, 5.1rem);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 16px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --header-h: 68px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ink) var(--grain); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;   /* the page colour lives on html, so the ambient light can sit between it and the content */
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
  /* Short pages (Portfolio, 404) keep the footer at the bottom of the screen */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
body > main { flex: 1 0 auto; }

/* ---------- Ambient light ----------
   Two soft layers of brand-coloured light drift slowly behind every page, like light moving over stone.
   Only transform is animated (cheap for phones), and reduced-motion visitors get a still version. */
body::before, body::after {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
}
body::before {
  background:
    radial-gradient(36% 30% at 20% 24%, rgba(106, 26, 44, .42), transparent 70%),
    radial-gradient(30% 26% at 80% 30%, rgba(212, 175, 55, .06), transparent 70%),
    radial-gradient(34% 30% at 62% 80%, rgba(106, 26, 44, .3), transparent 70%);
  animation: ambientA 38s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(26% 24% at 34% 62%, rgba(212, 175, 55, .045), transparent 70%),
    radial-gradient(24% 22% at 76% 70%, rgba(122, 31, 51, .14), transparent 70%),
    radial-gradient(22% 20% at 50% 18%, rgba(246, 222, 141, .04), transparent 70%);
  animation: ambientB 52s ease-in-out infinite alternate;
}
@keyframes ambientA {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 4%, 0) rotate(7deg) scale(1.08); }
  100% { transform: translate3d(-2%, 6%, 0) rotate(-5deg) scale(1.03); }
}
/* Phones and tablets: no fixed light layers at all. A fixed layer behind the content makes the
   browser lift the whole page into extra graphics layers, which ran iPhones out of memory
   (blank buttons, then the page reloading). The same colours are painted straight into the page
   background instead: still, soft, and free to render. */
@media (max-width: 860px), (hover: none) {
  body::before, body::after { display: none; }
  html {
    background-color: var(--ink);
    background-image:
      radial-gradient(60% 420px at 12% 260px, rgba(106, 26, 44, .45), transparent 70%),
      radial-gradient(55% 380px at 92% 760px, rgba(212, 175, 55, .06), transparent 70%),
      radial-gradient(60% 400px at 30% 1180px, rgba(106, 26, 44, .32), transparent 70%),
      radial-gradient(50% 340px at 85% 1500px, rgba(212, 175, 55, .045), transparent 70%);
    background-size: 100% 1700px;
    background-repeat: repeat-y;
  }
}
@keyframes ambientB {
  0%   { transform: translate3d(4%, 3%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(-3%, -4%, 0) rotate(-8deg) scale(1); }
  100% { transform: translate3d(2%, -6%, 0) rotate(5deg) scale(1.1); }
}
img, svg { max-width: 100%; }
a { color: var(--gold-bright); text-underline-offset: 3px; }
a:hover { color: var(--ivory); }
p { margin: 0; }
h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--gold-hi);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h3, .h3 { font-size: var(--step-2); line-height: 1.2; }
/* Big headings are cast in gold: a metallic gradient clipped to the letters */
h1, h2 { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-col h2, .cal-head h2, .hero-title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-hi); }
/* The hero words move in one by one, so each word carries its own gold (a gradient on the h1 would not follow them) */
.hero-title span.w { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .12em; margin-bottom: -.12em; }
::selection { background: rgba(212, 175, 55, .38); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.odo-inner { display: inline-flex; align-items: flex-start; line-height: 1; }
.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold-bright); color: var(--on-gold); padding: .6rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Placeholders that still need real details */
.fill-me { color: var(--warn); font-style: normal; border-bottom: 1px dashed currentColor; white-space: normal; }

/* ---------- Buttons ---------- */
.btn {
  --lift: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 .95rem/1.1 var(--f-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transform: translateY(var(--lift));
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s, border-color .3s, color .3s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn-sm { padding: .62rem 1rem; font-size: .86rem; }
/* Long labels (e.g. Croatian) wrap on narrow screens instead of pushing the layout wider than the phone */
.btn { max-width: 100%; }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; } }
.btn-primary { background-color: #D4AF37; background-image: var(--grad-gold); color: var(--on-gold); box-shadow: 0 10px 26px -12px rgba(212, 175, 55, .7), inset 0 1px 0 rgba(255, 248, 220, .55); }
.btn-primary:hover { --lift: -2px; color: var(--on-gold); box-shadow: 0 16px 34px -12px rgba(212, 175, 55, .85), inset 0 1px 0 rgba(255, 248, 220, .6); }
.btn-ghost { color: var(--ivory); border-color: rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .03); }
.btn-ghost:hover { --lift: -2px; color: var(--gold-hi); border-color: var(--gold); background: rgba(212, 175, 55, .1); }
.linklike {
  background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--joint-strong); text-underline-offset: 3px; text-align: left;
}
.linklike:hover { color: var(--ivory); text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--grad-gold-line); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
/* Launch offer banner above the header (added by main.js while the offer runs) */
.offer-bar {
  position: relative; z-index: 51;
  background: linear-gradient(90deg, #330B15, #4A1220 50%, #330B15);
  border-bottom: 1px solid rgba(212, 175, 55, .45);
  color: var(--ivory);
}
.offer-inner { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 7px; }
.offer-tag {
  flex: none; padding: 3px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--gold-hi);
  background: var(--wine-dark); border: 1px solid rgba(212, 175, 55, .7); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8);
}
.offer-text { margin: 0; flex: 1; min-width: 0; font-size: .86rem; line-height: 1.4; }
a.offer-text { color: inherit; text-decoration: none; }
a.offer-text:hover { text-decoration: underline; text-decoration-color: rgba(212, 175, 55, .7); text-underline-offset: 3px; }
.offer-link {
  flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; text-decoration: none;
  color: var(--on-gold); background: var(--grad-gold); padding: 6px 14px; border-radius: 99px;
}
.offer-link svg { width: 14px; height: 14px; }
.offer-link:hover { filter: brightness(1.08); }
.offer-close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -6px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.offer-close:hover { color: var(--ivory); background: rgba(255, 255, 255, .06); }
.offer-close svg { width: 16px; height: 16px; }
@media (max-width: 620px) {
  .offer-inner { gap: 10px; }
  .offer-text { font-size: .8rem; }
  a.offer-text { text-decoration: underline; text-decoration-color: rgba(212, 175, 55, .7); text-underline-offset: 3px; }
  .offer-link { display: none; }   /* on phones the text itself is the link */
}

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(13, 10, 11, .55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.site-header.scrolled { border-bottom-color: var(--joint); background: rgba(13, 10, 11, .78); }
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand .mark { width: 36px; height: auto; filter: drop-shadow(0 0 10px rgba(212, 175, 55, .3)); transition: transform .5s var(--ease-spring); }
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.brand-word { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.bw-maval {
  font-family: var(--f-display); font-weight: 700; font-size: 1.42rem; letter-spacing: .01em;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bw-digital {
  font-size: .56rem; font-weight: 600; letter-spacing: .49em; color: var(--gold);
}
.nav { display: flex; gap: clamp(16px, 2vw, 26px); margin-left: auto; }
.nav a { position: relative; color: var(--text); text-decoration: none; font-size: .92rem; padding-block: 6px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad-gold-line);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out);
}
.nav a:hover { color: var(--ivory); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }
.nav a.active { color: var(--ivory); }
.menu-btn { display: none; }

/* Language switch */
.lang {
  position: relative; flex: none; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 999px; border: 1px solid var(--joint-strong); background: var(--ink-2);
}
.lang a {
  position: relative; z-index: 1; display: grid; place-items: center; min-width: 40px; min-height: 34px; padding: .42rem .65rem;
  font: 600 .74rem/1 var(--f-body); letter-spacing: .1em; color: var(--muted); text-decoration: none; border-radius: 999px;
  transition: color .35s;
}
.lang a:hover { color: var(--ivory); }
.lang a[aria-current="true"] { color: var(--on-gold); }
.lang-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--grad-gold); box-shadow: 0 4px 14px -4px rgba(212, 175, 55, .6);
  transition: transform .55s var(--ease-spring);
}
html[lang="en"] .lang-pill { transform: translateX(100%); }
body.lang-fade main:not([hidden]), body.lang-fade .nav, body.lang-fade .site-footer { animation: langFade .55s var(--ease-out); }
@keyframes langFade { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Croatian money format: amount first, then € */
html[lang="hr"] .price .cur, html[lang="hr"] .sum-total .cur, html[lang="hr"] .care-price .cur { order: 1; margin-left: .15em; }
html[lang="hr"] .price .per, html[lang="hr"] .care-price .per { order: 2; }
html[lang="hr"] .care-price small { order: 3; }
.mobile-menu { border-top: 1px solid var(--joint); background: rgba(13, 10, 11, .96); }
.mobile-menu nav { display: grid; gap: 4px; padding-block: 12px 22px; }
.mobile-menu a:not(.btn) { color: var(--ivory); text-decoration: none; font-family: var(--f-display); font-size: 1.5rem; padding: 10px 0; border-bottom: 1px solid var(--joint); }
.mobile-menu .btn { margin-top: 14px; }
.mobile-menu a.active:not(.btn) { color: var(--gold-bright); }
.mobile-menu:not([hidden]) a { animation: rise .5s var(--ease-out) both; }
.mobile-menu:not([hidden]) a:nth-child(2) { animation-delay: .04s; }
.mobile-menu:not([hidden]) a:nth-child(3) { animation-delay: .08s; }
.mobile-menu:not([hidden]) a:nth-child(4) { animation-delay: .12s; }
.mobile-menu:not([hidden]) a:nth-child(5) { animation-delay: .16s; }
.mobile-menu:not([hidden]) a:nth-child(6) { animation-delay: .2s; }

@media (max-width: 920px) {
  .nav, .header-cta { display: none; }
  .lang { margin-left: auto; }
  .menu-btn {
    display: inline-grid; place-content: center; gap: 6px;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--joint-strong); background: transparent; cursor: pointer;
  }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--ivory); transition: transform .35s var(--ease-out); }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

/* ---------- Load + scroll motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.anim { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 85ms + 80ms); }
.reveal { transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.pending { opacity: 0; translate: 0 28px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(40px, 8vw, 110px) clamp(64px, 9vw, 120px); overflow: hidden; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.g1 { width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; left: 52%; top: -6%; background: radial-gradient(circle, rgba(106, 26, 44, .95), transparent 65%); }
.g2 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; right: -6%; bottom: -12%; background: radial-gradient(circle, rgba(212, 175, 55, .26), transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.g3 { width: 26vw; height: 26vw; max-width: 360px; max-height: 360px; left: -8%; top: 30%; background: radial-gradient(circle, rgba(106, 26, 44, .7), transparent 65%); animation-duration: 26s; animation-delay: -12s; }
/* Desktop: anchor the glows in px so they don't move (layout shift) when the web fonts swap in and the hero height changes */
@media (min-width: 861px) {
  .g1 { top: -48px; }
  .g2 { bottom: auto; top: 460px; }
  .g3 { top: 235px; }
}
@keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-6%, 8%, 0) scale(1.12); } }
.hero-sky::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--joint) 1px, transparent 1px), linear-gradient(90deg, var(--joint) 1px, transparent 1px);
  background-size: 72px 36px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 70%);
  opacity: .5;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(24px, 5vw, 64px); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.hero-title { font-size: var(--step-5); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.hero-title .w { display: inline-block; }
.hero-title em {
  font-style: italic; font-weight: 500;
  /* The gradient only paints inside the box, so give the slanted letters and the tails of j, p, g room
     (the negative margins keep the line where it was) */
  padding: .04em .1em .22em .08em; margin: -.04em -.04em -.22em -.08em;
  background: linear-gradient(100deg, #FFF6D6 0%, #F6DE8D 28%, #D4AF37 55%, #A67C1B 75%, #F6DE8D 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .9s var(--ease-out) both, sheen 9s ease-in-out 1.6s infinite;
  animation-delay: calc(var(--d, 0) * 85ms + 80ms), 1.6s;
}
@keyframes sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.lead { font-size: var(--step-1); max-width: 34rem; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: .88rem; color: var(--muted); }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--grad-gold); transform: rotate(45deg); }
.hero-facts strong { color: var(--ivory); font-weight: 600; }

.hero-art {
  position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: center; display: grid; place-items: center;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .9s var(--ease-out);
}
.orbit { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid var(--joint-strong); animation: spin360 60s linear infinite; }
.orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 16px 2px rgba(212, 175, 55, .75); }
.orbit-2 { inset: 18%; border-style: dashed; border-color: var(--joint); animation-duration: 90s; animation-direction: reverse; }
.orbit-2::before { background: var(--wine-hi); box-shadow: 0 0 0 1px rgba(212, 175, 55, .7), 0 0 14px 3px rgba(106, 26, 44, .9); top: auto; bottom: -4px; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.hero-mark { position: relative; width: 66%; }
.hero-mark .mark { width: 100%; height: auto; overflow: visible; animation: floaty 7s ease-in-out 3.4s infinite; filter: drop-shadow(0 0 38px rgba(212, 175, 55, .28)) drop-shadow(0 22px 22px rgba(0, 0, 0, .55)); }
/* The Stone M: five cut blocks. The joints between them are a stroke in the page colour, like mortar. */
.mark .pc { stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: miter; }
/* On every visit the M builds itself, block by block (about 3 s): the two pillars rise into place, the slanted
   blocks swing in from the top corners, the bordeaux keystone drops in last, the whole M settles with a small
   knock, and a light runs across the gold (again every 9 s). Only transform and opacity move. */
.hero-mark .pc, .hero-mark .m-all { transform-box: fill-box; transform-origin: center; }
.hero-mark .p1 { animation: mRise .8s cubic-bezier(.2, .9, .3, 1.12) .3s both; }
.hero-mark .p4 { animation: mRise .8s cubic-bezier(.2, .9, .3, 1.12) .48s both; }
.hero-mark .p2 { animation: mInL .8s cubic-bezier(.2, .9, .3, 1.1) .78s both; }
.hero-mark .p3 { animation: mInR .8s cubic-bezier(.2, .9, .3, 1.1) .95s both; }
.hero-mark .k  { animation: mKey .85s cubic-bezier(.3, 1.4, .4, 1) 1.45s both; }
.hero-mark .m-all { transform-origin: 50% 85%; animation: mThunk .4s ease-out 2.05s both; }
.hero-mark .m-shine { opacity: 0; transform-box: view-box; animation: mShine 9s ease-in-out 2.3s infinite; }
@keyframes mRise { from { transform: translateY(70%); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mInL { from { transform: translate(-90%, -80%) rotate(-28deg); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mInR { from { transform: translate(90%, -80%) rotate(28deg); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mKey { from { transform: translateY(-260%) rotate(-180deg) scale(.6); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mThunk { 0% { transform: scale(1); } 40% { transform: scale(.965, .95); } 100% { transform: scale(1); } }
@keyframes mShine { 0% { transform: translateX(-120px); opacity: 1; } 12% { opacity: 1; } 14% { transform: translateX(220px); opacity: 0; } 100% { transform: translateX(220px); opacity: 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.2deg); } }
.stone { position: absolute; width: 22px; height: 22px; border-radius: 3px; background: var(--grad-gold); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .22), 0 10px 24px -8px rgba(212, 175, 55, .55); animation: bob 8s ease-in-out infinite; }
.s1 { top: 14%; left: 10%; transform: rotate(14deg); }
.s2 { bottom: 16%; right: 6%; width: 16px; height: 16px; background: var(--grad-wine); box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .6), 0 10px 20px -8px rgba(106, 26, 44, .9); animation-delay: -3s; }
.s3 { top: 22%; right: 12%; width: 11px; height: 11px; opacity: .8; animation-delay: -5s; animation-duration: 10s; }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -14px; rotate: 18deg; } }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 260px; }
  .hero { padding-top: 28px; }
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(72px, 10vw, 128px); border-top: 1px solid var(--joint); }
.sec-head { display: grid; gap: 14px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head h2 { font-size: var(--step-4); }
.sec-head h1, .contact-copy h1 { font-size: var(--step-4); }
/* Sub-pages: the first section sits right under the header, so it needs no divider and less top space */
main > .section:first-child { border-top: 0; padding-top: clamp(40px, 6vw, 88px); }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: var(--step-1); max-width: 40rem; }

/* Spotlight that follows the pointer */
[data-spot] { position: relative; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(212, 175, 55, .14), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
[data-spot]:hover::after { opacity: 1; }

/* ---------- Services: coursed masonry ---------- */
.courses {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--joint-strong); border: 1px solid var(--joint-strong); border-radius: 22px; overflow: hidden;
}
.block { background: var(--ink-2); padding: clamp(24px, 3vw, 36px); display: grid; align-content: start; gap: 10px; min-width: 0; transition: background-color .4s, opacity .9s var(--ease-out), translate .9s var(--ease-out); }
.block:hover { background: var(--ink-3); }
.block p { color: var(--muted); font-size: .95rem; }
.block-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px;
  background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .3); color: var(--gold-bright);
  transition: transform .5s var(--ease-spring), background-color .3s;
}
.block-icon svg { width: 22px; height: 22px; }
.block:hover .block-icon { transform: translateY(-3px) rotate(-6deg); background: rgba(212, 175, 55, .14); }
.span-4 { grid-column: span 4; }
.span-4 h3 { font-size: var(--step-3); }
.span-4 p { font-size: var(--step-1); max-width: 36rem; }
.span-3 { grid-column: span 3; }
.span-2 { grid-column: span 2; }
@media (max-width: 900px) {
  .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-4 { grid-column: span 2; }
  .span-3, .span-2 { grid-column: span 1; }
}
@media (max-width: 560px) {
  .courses { grid-template-columns: 1fr; }
  .span-4, .span-3, .span-2 { grid-column: auto; }
}

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 960px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; } }
.work-card {
  border: 1px solid var(--joint); border-radius: 20px; background: var(--ink-2); overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .4s, box-shadow .5s var(--ease-out), opacity .9s var(--ease-out), translate .9s var(--ease-out), transform .5s var(--ease-out);
}
.work-card:hover, .work-card:focus-within, .work-card:focus { border-color: rgba(212, 175, 55, .45); box-shadow: 0 30px 60px -30px rgba(106, 26, 44, .99); transform: translateY(-4px); outline: none; }
.work-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.browser { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: #120D0F; border-bottom: 1px solid var(--joint); overflow: hidden; }
.browser-bar { position: absolute; inset: 0 0 auto 0; height: 30px; display: flex; align-items: center; gap: 6px; padding-inline: 12px; background: #1C1316; border-bottom: 1px solid var(--joint); z-index: 2; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--joint-strong); }
.browser-bar span { margin-left: 10px; font-size: .68rem; color: var(--muted); background: rgba(255, 255, 255, .04); padding: 2px 10px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewport { position: absolute; inset: 30px 0 0 0; overflow: hidden; }
/* The example sites inside the browser frames. Everything is sized in em from one font size tied to the
   frame's width (container units), so each mini site keeps its proportions at any card size, like a screenshot. */
.viewport { container-type: size; }
.mock {
  --m-bg: #fff; --m-fg: #111; --m-muted: #666; --m-soft: #eee; --m-line: rgba(0, 0, 0, .1); --m-accent: #333; --m-on: #fff;
  --m-head: var(--f-display);
  background: var(--m-bg); color: var(--m-fg); display: flex; flex-direction: column;
  font-family: var(--f-body); font-size: 10px; font-size: 2.9cqw; line-height: 1.35; text-align: left;
  transition: transform 9s cubic-bezier(.45, 0, .25, 1);
}
.work-card:hover .mock, .work-card:focus .mock, .work-card:focus-within .mock, .work-card.peek .mock { transform: translateY(calc(-100% + 100cqh)); }
@supports not (container-type: size) {
  .work-card:hover .mock, .work-card:focus .mock, .work-card:focus-within .mock, .work-card.peek .mock { transform: translateY(-70%); }
}
.ms small { font-size: .78em; color: var(--m-muted); display: block; }
.ms p { margin: 0; }
.ms b { font-weight: 600; }
.ms-nav { display: flex; align-items: center; gap: 1em; padding: .9em 1.2em; border-bottom: 1px solid var(--m-line); background: var(--m-bg); }
.ms-logo { font-family: var(--m-head); font-size: 1.45em; line-height: 1; margin-right: auto; display: grid; }
.ms-logo small { font-family: var(--f-body); font-size: .44em; letter-spacing: .14em; text-transform: uppercase; margin-top: .25em; }
.ms-links { display: flex; gap: 1em; font-size: .86em; }
.ms-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--m-accent); color: var(--m-on); padding: .65em 1.15em; border-radius: 99px; font-weight: 600; font-size: .9em; white-space: nowrap; }
.ms-btn-sm { padding: .5em .9em; font-size: .78em; }
.ms-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ms-wide { width: 100%; }
.ms-row { display: flex; flex-wrap: wrap; gap: .6em; }
.ms-img { display: block; background-size: cover; background-position: center; border-radius: .6em; aspect-ratio: 4 / 3; }
.ms-hero {
  display: grid; gap: .6em; justify-items: start; align-content: end; min-height: 19em; padding: 1.4em 1.4em 1.4em;
  background-size: cover; background-position: center; color: #fff;
}
.ms-hero small, .ms-hero b, .ms-hero p { text-shadow: 0 1px 14px rgba(8, 16, 28, .55), 0 0 2px rgba(8, 16, 28, .35); }
.ms-hero small { color: rgba(255, 255, 255, .85); letter-spacing: .14em; text-transform: uppercase; font-size: .72em; }
.ms-hero b { font-family: var(--m-head); font-size: 2.5em; line-height: 1.04; font-weight: 600; max-width: 12em; text-wrap: balance; }
.ms-hero p { font-size: 1.02em; max-width: 26em; color: rgba(255, 255, 255, .9); }
.ms-rating { font-size: .82em; color: rgba(255, 255, 255, .92); }
.ms-rating em, .ms-quote em { font-style: normal; color: #F5B83D; letter-spacing: .08em; }
.ms-sec { display: grid; gap: .8em; padding: 1.8em 1.4em; }
.ms-k { letter-spacing: .14em; text-transform: uppercase; color: var(--m-accent) !important; font-weight: 600; }
.ms-h { font-family: var(--m-head); font-size: 1.6em; line-height: 1.1; }
.ms-note { text-align: center; }
.ms-panel { margin: 0 1.2em; border-radius: 1em; background: var(--m-soft); padding: 1.4em; }
.ms-field { display: grid; gap: .15em; background: var(--m-bg); border: 1px solid var(--m-line); border-radius: .55em; padding: .55em .8em; font-weight: 600; font-size: .95em; }
.ms-field small { font-weight: 400; font-size: .74em; }
.ms-fields { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: .5em; }
.ms-quote { display: grid; gap: .5em; padding: 1.8em 1.6em; text-align: center; justify-items: center; }
.ms-quote p { font-family: var(--m-head); font-size: 1.35em; line-height: 1.25; font-style: italic; max-width: 18em; }
.ms-foot { margin-top: auto; padding: 1.4em; font-size: .8em; background: var(--m-fg); color: rgba(255, 255, 255, .78); }
.ms-map { aspect-ratio: 16 / 9; }

/* Konoba Pjat: whitewashed stone, Adriatic blue and terracotta */
.ms-konoba { --m-bg: #F7F2E9; --m-fg: #14263B; --m-muted: #5E6878; --m-soft: #EDE4D3; --m-line: rgba(20, 38, 59, .12); --m-accent: #B04B24; --m-on: #fff; }
.ms-konoba .ms-hero .ms-btn:first-child { background: #fff; color: var(--m-fg); }
.ms-info { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--m-fg); color: #fff; }
.ms-info span { padding: .9em 1em; font-weight: 600; font-size: .9em; border-right: 1px solid rgba(255, 255, 255, .12); }
.ms-info small { color: rgba(255, 255, 255, .6); font-weight: 400; }
.ms-dishes { display: grid; gap: .8em; }
.ms-dish { display: grid; grid-template-columns: 5.2em 1fr auto; gap: .9em; align-items: center; padding-bottom: .8em; border-bottom: 1px dashed var(--m-line); }
.ms-dish .ms-img { border-radius: .5em; }
.ms-dish b { display: block; font-size: 1.05em; }
.ms-dish em { font-style: normal; font-weight: 700; color: var(--m-accent); font-variant-numeric: tabular-nums; }

/* Kuća Mendula: limestone, lavender and sea */
.ms-mendula { --m-bg: #FCFAF7; --m-fg: #22304A; --m-muted: #6A7387; --m-soft: #F1ECF6; --m-line: rgba(34, 48, 74, .12); --m-accent: #6D55A0; --m-on: #fff; --m-head: Georgia, "Times New Roman", serif; }
.ms-mendula .ms-logo { font-style: italic; }
.ms-mendula .ms-hero b { font-weight: 400; }
.ms-mendula .ms-hero { padding-bottom: 3.4em; }
.ms-search { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin: -2.2em 1.2em 0; padding: .8em; background: #fff; border-radius: 1em; box-shadow: 0 1em 2em -1em rgba(34, 48, 74, .35); position: relative; }
.ms-search .ms-btn { grid-column: 1 / -1; }
.ms-ribbon { margin: 1.2em 1.2em 0; padding: .7em 1em; border-radius: .6em; background: #E7F3EE; color: #24694F; font-weight: 600; font-size: .86em; text-align: center; }
.ms-apts { display: grid; gap: 1em; }
.ms-apt { display: grid; grid-template-columns: 9em 1fr; grid-template-rows: auto auto 1fr; column-gap: 1em; row-gap: .2em; }
.ms-apt .ms-img { grid-row: 1 / 4; }
.ms-apt b { font-family: var(--m-head); font-size: 1.15em; font-weight: 400; }
.ms-apt span { align-self: end; font-size: .85em; color: var(--m-muted); }
.ms-apt em { font-style: normal; font-weight: 700; font-size: 1.2em; color: var(--m-fg); }
.ms-cal-m { font-weight: 600; color: var(--m-fg) !important; }
.ms-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25em; text-align: center; font-size: .9em; }
.ms-cal i { font-style: normal; font-size: .78em; color: var(--m-muted); }
.ms-cal span { padding: .35em 0; border-radius: .4em; font-weight: 600; }
.ms-cal .ok { background: #fff; color: var(--m-fg); }
.ms-cal .x { color: #B3AFC0; text-decoration: line-through; }
.ms small.ms-key { display: flex; align-items: center; gap: .5em; }
.ms-key span { width: .9em; height: .9em; border-radius: .2em; background: #fff; border: 1px solid var(--m-line); }
.ms-key span.x { background: #DDD7E8; margin-left: .8em; }
.ms-score { display: inline-flex; align-items: center; gap: .6em; font-size: .86em; color: var(--m-muted); }
.ms-score b { background: #24694F; color: #fff; padding: .35em .5em; border-radius: .4em .4em .4em 0; font-size: 1.1em; }
.ms-amen { display: flex; flex-wrap: wrap; gap: .5em; padding: 0 1.4em; }
.ms-amen span { padding: .45em .9em; border-radius: 99px; border: 1px solid var(--m-line); font-size: .86em; }
.ms-split { grid-template-columns: 11em 1fr; align-items: center; gap: 1.2em; }

/* Radionica Jasen: oak, linen and forest green */
.ms-jasen { --m-bg: #F4EFE7; --m-fg: #22180F; --m-muted: #6E6253; --m-soft: #E9E0D2; --m-line: rgba(34, 24, 15, .14); --m-accent: #2F5A3C; --m-on: #fff; --m-head: var(--f-body); }
.ms-jasen .ms-logo { font-weight: 800; letter-spacing: .12em; font-size: 1.3em; }
.ms-jasen .ms-hero { min-height: 19em; }
.ms-jasen .ms-hero b { font-weight: 700; letter-spacing: -.02em; font-size: 2.3em; }
.ms-jasen .ms-h { font-weight: 700; letter-spacing: -.01em; }
.ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--m-accent); color: #fff; }
.ms-stats span { padding: 1em; font-size: .8em; color: rgba(255, 255, 255, .78); }
.ms-stats b { display: block; font-size: 1.7em; color: #fff; font-weight: 700; }
.ms-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 1em .8em; }
.ms-gal b { display: block; margin-top: .45em; }
.ms-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8em; counter-reset: st; }
.ms-steps li { display: grid; grid-template-columns: 2.2em 1fr; column-gap: .8em; counter-increment: st; }
.ms-steps li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--m-accent); color: #fff; font-weight: 700; }
.ms-jasen .ms-panel { display: grid; gap: .6em; }
.ms-drop { padding: 1em; border: 1px dashed rgba(34, 24, 15, .35); border-radius: .55em; text-align: center; font-size: .86em; color: var(--m-muted); background: var(--m-bg); }
.work-body { padding: 22px 22px 26px; display: grid; gap: 8px; }
.work-body > p:not(.chip):not(.work-meta) { color: var(--muted); font-size: .93rem; }
.chip { justify-self: start; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(212, 175, 55, .35); padding: 3px 9px; border-radius: 99px; }
.work-meta { color: var(--text); font-size: .85rem; }
.tags { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: .75rem; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--joint); padding: 3px 9px; border-radius: 7px; }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.steps::before, .steps::after { content: ""; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; }
.steps::before { background: var(--joint-strong); }
.steps::after { background: var(--grad-gold-line); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform 1.8s var(--ease-out) .2s; }
.steps.lit { --fill: 1; }
.step { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; }
.step-dot {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; z-index: 1;
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--gold-hi);
  background: var(--ink-2); border: 1px solid var(--joint-strong);
  transition: background .6s, border-color .6s, color .6s, box-shadow .6s;
  transition-delay: calc(var(--i, 0) * 380ms + 300ms);
}
.steps.lit .step-dot { background: var(--grad-gold); border-color: transparent; color: var(--on-gold); box-shadow: 0 0 0 6px rgba(212, 175, 55, .09), 0 10px 24px -10px rgba(212, 175, 55, .7); }
.step h3, .step .h3 { margin-top: 8px; }
.step p { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 30px; padding-left: 66px; }
  .steps::before, .steps::after { top: 22px; bottom: 22px; left: 22px; right: auto; width: 1px; height: auto; }
  .steps::after { transform: scaleY(var(--fill, 0)); transform-origin: top; }
  .step-dot { position: absolute; left: -66px; top: 0; }
  .step h3, .step .h3 { margin-top: 8px; }
}

/* ---------- Pricing ---------- */
.pricing { overflow: hidden; isolation: isolate; }
.pricing-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 380px at 15% 10%, rgba(106, 26, 44, .5), transparent 70%),
    radial-gradient(520px 320px at 90% 60%, rgba(212, 175, 55, .07), transparent 70%); }
.pricing-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 4vw, 44px); }
.pricing-head .sec-head { margin-bottom: 0; }

.seg { position: relative; display: inline-grid; grid-auto-flow: column; padding: 5px; border-radius: 999px; border: 1px solid var(--joint-strong); background: var(--ink-2); }
.seg button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: .62rem 1.15rem; border-radius: 999px; font: 600 .88rem/1 var(--f-body); color: var(--muted); transition: color .35s;
}
.seg button[aria-pressed="true"] { color: var(--on-gold); }
.seg button:not([aria-pressed="true"]):hover { color: var(--ivory); }
.seg-pill {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 50%);
  border-radius: 999px; background: var(--grad-gold); box-shadow: 0 6px 18px -6px rgba(212, 175, 55, .6);
  transform: translateX(var(--x, 5px)); transition: transform .55s var(--ease-spring), width .55s var(--ease-spring);
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; perspective: 1400px; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
.plan {
  --rx: 0deg; --ry: 0deg;
  position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: 30px 24px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) , var(--ink-2);
  border: 1px solid var(--joint-strong);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease-out), border-color .4s, box-shadow .6s var(--ease-out), opacity .9s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms);
}
.plan.tilting { transition-duration: .15s, .4s, .6s, .9s, .9s; }
.plan:hover { border-color: rgba(212, 175, 55, .55); box-shadow: 0 34px 70px -34px rgba(106, 26, 44, .95); }
.plan.featured {
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, #2A131B, #170F12) padding-box,
    conic-gradient(from var(--angle), #FFF0B8, #D4AF37, #7A1F33, #A67C1B, #F6DE8D, #D4AF37, #7A1F33, #FFF0B8) border-box;
  box-shadow: 0 30px 80px -36px rgba(106, 26, 44, .95), 0 0 0 1px rgba(212, 175, 55, .08);
  animation: spinBorder 8s linear infinite;
}
.plan.featured::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--angle), #7A1F33, #4A1220, #8A2A3E, #4A1220, #7A1F33);
  filter: blur(22px); opacity: .55; animation: spinBorder 8s linear infinite;
}
@keyframes spinBorder { to { --angle: 360deg; } }
/* Phones: blurred glows (featured plan, hero) are costly to move every frame, so they stay still there */
@media (max-width: 860px), (hover: none) { .plan.featured::before, .glow { animation: none; } }
.plan-badge {
  position: absolute; top: -12px; left: 22px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi);
  padding: 5px 11px; border-radius: 99px; border: 1px solid rgba(212, 175, 55, .7);
  background: linear-gradient(110deg, #4A1220 0%, #4A1220 38%, #7A1F33 50%, #4A1220 62%, #4A1220 100%);
  background-size: 250% 100%; animation: badgeShine 4s ease-in-out infinite;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .9);
}
@keyframes badgeShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
/* Launch offer: "-20%" corner badge on each package, standard price under the payments line */
.plan-off {
  position: absolute; top: -15px; right: 18px; z-index: 2;   /* sits on the card's top edge, like the "Recommended" badge */
  display: grid; place-items: center; min-width: 58px; height: 32px; padding: 0 12px; border-radius: 99px;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: var(--gold-hi); white-space: nowrap;
  background: var(--grad-wine); border: 1px solid rgba(212, 175, 55, .75);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 220, 200, .15);
}
.price-std { margin: 4px 0 0; font-size: .8rem; color: var(--text); }
.offer-note { margin-top: 18px; max-width: 72ch; }
.plan-head { display: grid; gap: 6px; }
.plan-name { font-size: var(--step-2); }
.plan-tag { color: var(--muted); font-size: .88rem; min-height: 3.3em; }   /* two lines, so a one-line tagline keeps its price level with the others */
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.price .from { width: 100%; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.price .cur { font-size: 1.5rem; font-weight: 500; align-self: flex-start; margin-top: .3em; color: var(--gold); }
.price .amount { font-size: 3.1rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.price .per { font-size: .85rem; color: var(--muted); }
@media (min-width: 621px) { .plan .price .per { width: 100%; margin-top: 4px; } }   /* cards side by side: own line in every card, so the prices line up */
.price-sub { font-size: .8rem; color: var(--muted); min-height: 1.4em; transition: opacity .4s; }
.plan.featured .price .amount { color: #FFF0B8; }

/* Rolling digits */
.odo { display: inline-flex; line-height: 1; font-variant-numeric: tabular-nums; }
/* clip-path + contain keep the hidden digits clipped in every browser, including Safari with the 3D card tilt */
.odo-d { position: relative; display: inline-block; height: 1em; line-height: 1; overflow: hidden; clip-path: inset(0); contain: paint; }
.odo-s { display: flex; flex-direction: column; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k, 0) * 55ms); }
.odo-s > span { height: 1em; line-height: 1; display: block; }
.odo-sep { display: inline-block; line-height: 1; }

.checks { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--joint); }
.checks li { display: flex; gap: 10px; font-size: .9rem; line-height: 1.45; color: var(--text); opacity: 1; translate: 0 0; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); transition-delay: calc(var(--j, 0) * 60ms + var(--i, 0) * 110ms + 350ms); }
.checks svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.checks path { stroke: var(--gold-bright); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(var(--j, 0) * 60ms + var(--i, 0) * 110ms + 450ms); }
.plan.pending .checks li { opacity: 0; translate: -8px 0; }
.plan.pending .checks path { stroke-dashoffset: 16; }
.plan .btn { margin-top: auto; width: 100%; }

.care {
  margin-top: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 36px;
  padding: 24px 28px; border-radius: 20px; border: 1px dashed rgba(212, 175, 55, .4); background: rgba(74, 18, 32, .22);
}
.care-title { display: grid; gap: 4px; }
.care-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text); font-size: .9rem; }
.care-list li { display: flex; align-items: center; gap: 8px; }
.care-list li::before { content: ""; width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--grad-gold); }
.care-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 6px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.care-price .cur { color: var(--gold); font-size: 1.1rem; }
.care-price .odo { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.care-price .per { color: var(--muted); font-size: .85rem; }
.care-price small { flex: 0 0 100%; color: var(--muted); font-size: .75rem; text-align: right; }
@media (max-width: 860px) {
  .care { grid-template-columns: 1fr; }
  .care-price { justify-content: flex-start; }
  .care-price small { text-align: left; }
}

/* Estimator */
.estimator {
  margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  border: 1px solid var(--joint-strong); border-radius: 26px; overflow: hidden; background: var(--ink-2);
}
@media (max-width: 900px) { .estimator { grid-template-columns: 1fr; } }
.est-controls { padding: clamp(24px, 4vw, 40px); display: grid; gap: 26px; min-width: 0; }
.est-controls h3, .est-controls .h3 { font-size: var(--step-3); margin-top: 8px; }
.est-group { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.est-group legend, .legend-like { font-weight: 600; color: var(--ivory); font-size: .95rem; padding: 0; margin-bottom: 12px; }
.est-pages { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.est-pages .legend-like { margin-bottom: 2px; }
.hint { color: var(--muted); font-size: .82rem; }
.chips, .addons { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex; align-items: center; gap: 8px; padding: .62rem .95rem; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--joint-strong); background: rgba(255, 255, 255, .02); color: var(--text); font-size: .88rem;
  transition: border-color .3s, background-color .3s, color .3s, transform .35s var(--ease-spring);
}
.chip-opt span small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.chip-opt input:hover + span { border-color: rgba(212, 175, 55, .5); }
.chip-opt input:checked + span { border-color: var(--gold-bright); background: rgba(212, 175, 55, .09); color: var(--ivory); }
.chip-opt input:checked + span small { color: var(--gold-bright); }
.chip-opt input:active + span { transform: scale(.96); }
.chip-opt input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.addons .chip-opt span::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--joint-strong); flex: none;
  transition: background .3s, border-color .3s;
}
.addons .chip-opt input:checked + span::before { background: var(--grad-gold) ; border-color: transparent; box-shadow: inset 0 0 0 3px var(--ink-2); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--joint-strong); border-radius: 12px; overflow: hidden; }
.stepper button { width: 42px; height: 42px; border: 0; background: rgba(255, 255, 255, .03); color: var(--ivory); font-size: 1.2rem; cursor: pointer; transition: background .25s; }
.stepper button:hover { background: rgba(212, 175, 55, .15); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 44px; text-align: center; font-weight: 600; color: var(--ivory); font-variant-numeric: tabular-nums; }
.stepper output.bump { animation: bump .35s var(--ease-spring); }
@keyframes bump { 50% { transform: scale(1.3); color: var(--gold-bright); } }

.switch-row { display: flex; align-items: center; gap: 14px; cursor: pointer; position: relative; }
.switch-row > span:first-child { display: grid; gap: 2px; margin-right: auto; }
.switch-row strong { color: var(--ivory); font-weight: 600; font-size: .92rem; }
.switch-row small { color: var(--muted); font-size: .8rem; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 46px; height: 26px; flex: none; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid var(--joint-strong); position: relative; transition: background .35s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); transition: transform .45s var(--ease-spring); }
.switch-row input:checked + .switch { background: var(--grad-gold); border-color: transparent; }
.switch-row input:checked + .switch::after { transform: translateX(20px); background: #fff; }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.switch-row input:disabled + .switch { opacity: .6; }
.care-toggle { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--joint); background: rgba(255, 255, 255, .02); }

.est-summary {
  position: relative; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; min-width: 0;
  background: radial-gradient(420px 300px at 80% 0%, rgba(106, 26, 44, .7), transparent 70%), #120C0E;
  border-left: 1px solid var(--joint);
}
@media (max-width: 900px) { .est-summary { border-left: 0; border-top: 1px solid var(--joint); } }
.sum-label { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sum-total { display: flex; align-items: flex-start; gap: 4px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.sum-total .cur { font-size: 1.6rem; color: var(--gold); margin-top: .35em; }
.sum-total .odo { font-size: clamp(3rem, 2rem + 3vw, 4.2rem); font-weight: 600; letter-spacing: -0.03em; }
.sum-split, .sum-care { color: var(--text); font-size: .92rem; font-variant-numeric: tabular-nums; }
.sum-split strong { color: var(--ivory); }
.sum-care { color: var(--gold-bright); }
.sum-lines { list-style: none; margin: 8px 0 6px; padding: 14px 0 0; border-top: 1px solid var(--joint); display: grid; gap: 8px; font-size: .86rem; }
.sum-lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--text); }
.sum-lines li span:last-child { color: var(--ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-lines li.enter { animation: lineIn .5s var(--ease-out) both; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-12px); } }
.est-summary .btn { margin-top: auto; }
.fine { color: var(--muted); font-size: .78rem; }
.flash { animation: flash .7s var(--ease-out); }
@keyframes flash { 0% { text-shadow: 0 0 0 rgba(212, 175, 55, 0); } 30% { text-shadow: 0 0 24px rgba(212, 175, 55, .65); } 100% { text-shadow: 0 0 0 rgba(212, 175, 55, 0); } }

/* ---------- Before / after ---------- */
.diff-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (max-width: 860px) { .diff-grid { grid-template-columns: 1fr; } .diff-visual { order: 2; } }
.diff-copy { display: grid; gap: 0; min-width: 0; }
.diff-copy .sec-head { margin-bottom: 28px; }
.diff-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
@media (max-width: 520px) { .diff-pts { grid-template-columns: 1fr; } }
.diff-pt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.diff-pt .block-icon { margin: 0; }
.diff-pt h3 { font-size: 1.15rem; margin-bottom: 4px; }
.diff-pt p { color: var(--muted); font-size: .92rem; }
.diff-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--joint); color: var(--text); font-size: .95rem; }
.diff-visual { margin: 0; display: grid; gap: 14px; justify-items: center; }
.diff-caption { color: var(--muted); font-size: .82rem; text-align: center; max-width: 22rem; }

/* The phone frame and its two screens. --pos is how much of the old site shows, from the left. */
.compare {
  --pos: 50%;
  position: relative; width: min(320px, 100%); aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden;
  border: 8px solid #1C1316; background: #fff; box-shadow: 0 0 0 1px var(--joint-strong), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 70px -20px rgba(106, 26, 44, .9);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; isolation: isolate;
}
.cmp-layer { position: absolute; inset: 0; overflow: hidden; }
.cmp-after { z-index: 0; }
.cmp-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.cmp-tag {
  position: absolute; top: 12px; z-index: 2; padding: 4px 10px; border-radius: 99px; font: 700 .64rem/1 var(--f-body);
  letter-spacing: .12em; text-transform: uppercase;
}
.cmp-tag-before { left: 12px; background: #3A3A3A; color: #F2F2F2; }
.cmp-tag-after { right: 12px; background: var(--grad-gold); color: var(--on-gold); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 0; pointer-events: none; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.cmp-handle span {
  position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: #1C1316; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease-spring);
}
.cmp-handle svg { width: 22px; height: 22px; }
.compare.dragging .cmp-handle span, .compare:hover .cmp-handle span { transform: scale(1.08); }
.cmp-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-range:focus-visible ~ .cmp-handle span { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

/* The two phone screens are sized from the frame's width (container units), so they keep their proportions
   like a screenshot at any frame size. */
.compare .cmp-layer { container-type: size; }

/* Old site: a real-looking 2014 desktop site that was never made for phones, so the phone shows it zoomed out.
   1em here is 10px of that 960px-wide desktop page. */
.old {
  position: relative; height: 100%; padding-top: 40px; background: #D8D2CB;
  font: 3.17px/1.45 Verdana, Geneva, Tahoma, sans-serif; font-size: calc(100cqw / 96); color: #444;
}
.old p, .old h4, .old h5, .old ul { margin: 0; }
.old-pg { width: 92em; margin: 0 auto; background: #fff; box-shadow: 0 0 1.2em rgba(0, 0, 0, .25); }
.old-top { display: flex; justify-content: space-between; padding: .7em 2em; background: #2B1236; color: #C9B8D0; font-size: 1.1em; }
.old-head { display: grid; padding: 2.2em 2em 1.8em; background: linear-gradient(#fff, #F3ECF5); }
.old-head b { font: italic 400 4.6em/1 Georgia, "Times New Roman", serif; color: #6B2C7E; text-shadow: .03em .03em 0 #D9C3E0; }
.old-head small { font-size: 1.25em; letter-spacing: .25em; text-transform: uppercase; color: #9A8AA0; margin-top: .5em; }
.old-nav { display: flex; list-style: none; padding: 0; background: linear-gradient(#8A4A9E, #4B1C63); border-top: .1em solid #B78AC6; }
.old-nav li { padding: 1.2em 2.1em; color: #fff; font-weight: 700; font-size: 1.2em; border-right: .1em solid rgba(255, 255, 255, .25); }
.old-nav li.on { background: linear-gradient(#E05C9E, #9C2C80); }
.old-ban { position: relative; height: 30em; background: #6E2A7A url("work/salon-banner.svg") center / cover; }
.old-ban span { position: absolute; left: 6%; top: 34%; font: italic 3.6em/1.1 Georgia, serif; color: #fff; text-shadow: .05em .05em .1em rgba(0, 0, 0, .6); max-width: 9em; }
.old-ban > i { position: absolute; top: 42%; font: 700 4em/1 Arial, sans-serif; color: rgba(255, 255, 255, .7); font-style: normal; }
.old-ban > i:nth-of-type(1) { left: 1.5%; }
.old-ban > i:nth-of-type(2) { right: 1.5%; }
.old-ban em { position: absolute; bottom: 1.5em; left: 0; right: 0; display: flex; justify-content: center; gap: .8em; }
.old-ban em i { width: 1.1em; height: 1.1em; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.old-ban em i:first-child { background: #fff; }
.old-cols { display: grid; grid-template-columns: 1fr 28em; gap: 3em; padding: 3em; }
.old-main { display: grid; gap: 1.2em; align-content: start; font-size: 1.3em; text-align: justify; }
.old-main h4 { font: italic 400 2.2em/1.2 Georgia, serif; color: #6B2C7E; border-bottom: .06em dotted #C9A7D3; padding-bottom: .3em; }
.old h5 { font: 700 1.25em/1.2 Georgia, serif; color: #6B2C7E; }
.old-a { color: #9C2C80; text-decoration: underline; }
.old-promo { padding: .8em 1em; border: .15em dashed #E0A800; background: #FFF6B0; color: #C00000; font-weight: 700; text-align: center; }
.old-news small { color: #767676; }
.old-side { display: grid; gap: 1.6em; align-content: start; }
.old-box { border: .1em solid #DCCFE0; background: #FAF6FB; padding: 1.2em; font-size: 1.2em; display: grid; gap: .8em; }
.old-box table { border-collapse: collapse; width: 100%; }
.old-box td { padding: .35em 0; border-bottom: .1em dotted #CCC; }
.old-box td + td { text-align: right; font-weight: 700; }
.old-fb h5 { background: #3B5998; color: #fff; font-family: Verdana, sans-serif; font-size: 1em; padding: .5em .7em; margin: -1em -1em 0; }
.old-fb p { display: flex; gap: .7em; align-items: center; }
.old-fb p i { width: 3.4em; height: 3.4em; background: #E05C9E url("work/salon-front.svg") center / cover; border: .1em solid #ccc; }
.old-like { justify-self: start; background: #EEF1F7; border: .1em solid #B7C1D6; color: #3B5998; font-weight: 700; padding: .25em .7em; border-radius: .2em; }
.old-pdf { padding: 1em; background: linear-gradient(#F05A5A, #B71C1C); color: #fff; font-weight: 700; font-size: 1.2em; text-align: center; border-radius: .3em; }
.old-gal { padding: 0 3em 3em; display: grid; gap: 1em; }
.old-gal h5 { font-size: 1.6em; }
.old-gal div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.old-gal i { aspect-ratio: 4 / 3; border: .4em solid #fff; box-shadow: 0 0 0 .1em #ccc; background: #ddd center / cover; }
.old-gal i:nth-child(1) { background-image: url("work/salon-interior.svg"); }
.old-gal i:nth-child(2) { background-image: url("work/salon-waves.svg"); }
.old-gal i:nth-child(3) { background-image: url("work/salon-tools.svg"); }
.old-gal i:nth-child(4) { background-image: url("work/salon-front.svg"); }
.old-foot { display: grid; gap: .4em; padding: 2em 3em; background: #2B1236; color: #A996B0; font-size: 1.15em; text-align: center; }
.old-cookie {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1.2em; padding: 1.6em 2.4em;
  background: rgba(0, 0, 0, .85); color: #eee; font-size: 1.5em;
}
.old-cookie span { flex: 1; }
.old-cookie b { background: #3F7A22; color: #fff; padding: .5em 1.4em; }
.old-cookie u { color: #ccc; }

/* New site: phone-first, the way we build. 1em is 12px on a 304px-wide screen. */
.nw {
  --ink: #231C22; --muted: #6F6470; --line: rgba(35, 28, 34, .1); --berry: #7A3B52; --soft: #F4ECEE;
  position: relative; height: 100%; padding-top: 40px; display: flex; flex-direction: column;
  background: #FAF7F3; color: var(--ink); font: 12px/1.35 var(--f-body); font-size: 3.95cqw;
}
.nw p, .nw ul { margin: 0; }
.nw-bar { display: flex; align-items: center; gap: .6em; padding: .2em 1.1em .8em; }
.nw-logo { margin-right: auto; display: grid; font: 600 1.55em/1 var(--f-display); letter-spacing: .01em; }
.nw-logo small { font: 600 .4em/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: .45em; }
.nw-pill { background: var(--berry); color: #fff; padding: .55em 1em; border-radius: 99px; font-size: .82em; font-weight: 700; }
.nw-menu { display: grid; gap: .3em; padding: .3em 0 .3em .2em; }
.nw-menu i { width: 1.25em; height: .14em; border-radius: 1em; background: var(--ink); }
.nw-hero {
  display: grid; gap: .6em; justify-items: start; align-content: end; min-height: 17.5em; padding: 1.2em 1.1em 1.2em;
  margin: 0 .7em; border-radius: 1.1em; color: #fff;
  background: linear-gradient(180deg, rgba(25, 17, 22, .12) 0%, rgba(25, 17, 22, .55) 38%, rgba(25, 17, 22, .88) 80%), #8C6A55 url("work/salon-interior.svg") 60% 40% / cover;
}
.nw-open { display: inline-flex; align-items: center; gap: .5em; background: #fff; color: #17604E; font-size: .78em; font-weight: 700; padding: .45em .8em; border-radius: 99px; margin-bottom: auto; }
.nw-open i { width: .6em; height: .6em; border-radius: 50%; background: #1BA37F; }
.nw-h { font: 600 1.7em/1.08 var(--f-display); max-width: 10em; text-wrap: balance; }
.nw-p { font-size: .88em; color: rgba(255, 255, 255, .88); max-width: 22em; }
.nw-ctas { display: flex; gap: .5em; margin-top: .2em; }
.nw-btn { background: #fff; color: var(--ink); padding: .65em 1.05em; border-radius: 99px; font-weight: 700; font-size: .85em; }
.nw-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 .09em rgba(255, 255, 255, .7); }
.nw-sec { display: grid; gap: .55em; padding: 1em 1.1em 0; }
.nw-k { font-size: .7em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.nw-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.nw-slots span { display: grid; gap: .1em; padding: .5em .6em; border-radius: .7em; background: #fff; border: .08em solid var(--line); font-weight: 700; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.nw-slots small { font-size: .66em; font-weight: 600; color: var(--muted); }
.nw-slots span:first-child { background: var(--soft); border-color: rgba(122, 59, 82, .35); }
.nw-svc { list-style: none; padding: 0; display: grid; background: #fff; border: .08em solid var(--line); border-radius: .9em; }
.nw-svc li { display: flex; justify-content: space-between; align-items: center; padding: .55em .85em; font-size: .92em; }
.nw-svc li + li { border-top: .08em solid var(--line); }
.nw-svc span { display: grid; font-weight: 600; }
.nw-svc small { font-size: .78em; font-weight: 400; color: var(--muted); }
.nw-svc b { font-variant-numeric: tabular-nums; }
.nw-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.nw-gal i { aspect-ratio: 1; border-radius: .7em; background: #ddd center / cover; }
.nw-gal i:nth-child(1) { background-image: url("work/salon-waves.svg"); }
.nw-gal i:nth-child(2) { background-image: url("work/salon-tools.svg"); }
.nw-gal i:nth-child(3) { background-image: url("work/salon-front.svg"); }
.nw-dock {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.6fr; gap: .5em;
  padding: .7em .9em .9em; background: #FAF7F3; border-top: .08em solid var(--line);
}
.nw-dock span { display: grid; place-items: center; padding: .75em; border-radius: 99px; font-weight: 700; font-size: .9em; background: #fff; box-shadow: inset 0 0 0 .09em var(--line); }
.nw-dock span + span { background: var(--berry); color: #fff; box-shadow: none; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--joint); }
.faq details { border-bottom: 1px solid var(--joint); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-weight: 600; color: var(--ivory); font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background: linear-gradient(var(--gold-bright), var(--gold-bright)) center / 12px 1.5px no-repeat, linear-gradient(var(--gold-bright), var(--gold-bright)) center / 1.5px 12px no-repeat;
  transition: transform .45s var(--ease-spring);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: #fff; }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 2px 22px; color: var(--muted); max-width: 42rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-copy { display: grid; gap: 18px; }
.contact-copy h2 { font-size: var(--step-4); }
.contact-copy > p:not(.eyebrow) { color: var(--muted); font-size: var(--step-1); }
.direct { display: grid; gap: 6px; margin-top: 12px; padding: 22px; border-radius: 18px; border: 1px solid var(--joint); background: var(--ink-2); }
.direct-label { color: var(--muted); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.direct-label:not(:first-child) { margin-top: 12px; }
.book-row { display: grid; gap: 10px; justify-items: start; padding-bottom: 6px; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.copy-row a { font-size: 1.1rem; font-weight: 600; word-break: break-all; padding-block: 6px; }
.direct > a { justify-self: start; padding-block: 6px; }
.contact-form { display: grid; gap: 18px; padding: clamp(22px, 4vw, 36px); border-radius: 24px; border: 1px solid var(--joint-strong); background: var(--ink-2); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: .86rem; font-weight: 600; color: var(--ivory); }
.opt { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ivory);
  background: var(--ink); border: 1px solid var(--joint-strong); border-radius: 12px; padding: .8rem .95rem;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%), linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.field input::placeholder, .field textarea::placeholder { color: #8C7C66; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(212, 175, 55, .45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, .16); background: #0A0708; }
.err-msg { display: none; color: var(--warn); font-size: .8rem; }
.field.invalid .err-msg { display: block; animation: rise .35s var(--ease-out); }
.field.invalid input, .field.invalid textarea { border-color: var(--warn); }
.field.invalid.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .86rem; color: var(--text); font-weight: 400 !important; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--gold-bright); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { justify-self: start; }
.btn-submit.loading { pointer-events: none; opacity: .8; }
.btn-submit.loading svg { animation: spin360 .9s linear infinite; }
.form-status { padding: 16px 18px; border-radius: 14px; font-size: .92rem; animation: rise .5s var(--ease-out); }
.form-status.ok { background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .45); color: var(--ivory); }
.form-status.info { background: rgba(74, 18, 32, .45); border: 1px solid rgba(212, 175, 55, .3); color: var(--ivory); }
.form-status.bad { background: rgba(255, 120, 100, .08); border: 1px solid rgba(255, 140, 120, .5); color: var(--ivory); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--joint-strong); padding-block: 56px 28px; background: linear-gradient(180deg, transparent, rgba(74, 18, 32, .35)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand p { color: var(--muted); font-size: .9rem; }
.footer-col { display: grid; gap: 1px; align-content: start; font-size: .9rem; }
.footer-col h2 { font-family: var(--f-body); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.footer-col a { color: var(--text); text-decoration: none; word-break: break-word; justify-self: start; padding-block: 5px; }
.footer-col a:hover { color: var(--ivory); }
.footer-col .linklike { justify-self: start; padding-block: 5px; }
.footer-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--joint); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--muted); font-size: .8rem; }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; z-index: 80; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(430px, calc(100% - 32px));
  padding: 22px; border-radius: 20px; border: 1px solid var(--joint-strong);
  background: rgba(23, 16, 18, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 175, 55, .06);
  font-size: .88rem; color: var(--text);
  transition: opacity .5s var(--ease-out), translate .6s var(--ease-spring);
}
.cookie.offstage { opacity: 0; translate: 0 24px; }
.cookie > div { display: grid; gap: 12px; }
.cookie-title { font-family: var(--f-display); font-size: 1.2rem; color: var(--ivory); font-weight: 600; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.cookie-actions .linklike { margin-left: 6px; font-size: .86rem; }
/* "Only necessary" and "Accept all" get equal weight, as EU guidance expects */
.cookie-actions [data-cookie="reject"], .cookie-actions [data-cookie="accept"] { flex: 1 1 0; min-width: 0; }
.cookie-consent p a { color: var(--ivory); text-underline-offset: 3px; white-space: nowrap; }
.cookie-prefs { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--joint); background: rgba(255, 255, 255, .02); }
.noscript-note { padding: 14px 18px; border: 1px solid var(--joint-strong); border-radius: 14px; color: var(--text); background: var(--ink-2); }

/* No-analytics notice: one slim line, as small as it can be */
.cookie.is-notice { width: auto; max-width: min(590px, calc(100% - 32px)); padding: 10px 10px 10px 18px; border-radius: 999px; font-size: .84rem; }
.cookie .cookie-notice { display: flex; align-items: center; gap: 14px; }
.cookie-notice p { margin: 0; line-height: 1.4; }
.cookie-notice a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 239, 223, .4); white-space: nowrap; }
.cookie-notice a:hover { text-decoration-color: currentColor; }
.cookie-notice .btn { flex: none; }
@media (max-width: 600px) {
  .cookie { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; padding: 16px; }
  .cookie.is-notice { padding: 8px 8px 8px 14px; border-radius: 16px; font-size: .78rem; }
  .cookie-notice { gap: 10px; }
  .cookie-notice .btn { padding: .5rem .85rem; font-size: .8rem; }
  .cookie-title { font-size: 1.05rem; }
  .cookie > div { gap: 8px; }
}

/* ---------- Legal pages ---------- */
.legal-main { padding-block: clamp(40px, 7vw, 80px) clamp(72px, 10vw, 120px); }
.legal { max-width: 48rem; margin-inline: auto; display: grid; gap: 16px; animation: rise .7s var(--ease-out) both; }
.legal h1 { font-size: var(--step-4); }
.legal h2 { font-size: var(--step-2); margin-top: 22px; }
.legal p, .legal li { color: var(--text); }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }
.legal-meta { color: var(--muted) !important; font-size: .9rem; }
.address-block { padding: 16px 18px; border-left: 2px solid var(--gold); background: var(--ink-2); border-radius: 0 12px 12px 0; }
.facts { margin: 8px 0 0; display: grid; border: 1px solid var(--joint-strong); border-radius: 16px; overflow: hidden; }
.facts > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--joint); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); font-size: .85rem; }
.facts dd { margin: 0; color: var(--ivory); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .facts > div { grid-template-columns: 1fr; gap: 2px; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--joint-strong); border-radius: 14px; }
.legal table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .86rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--joint); }
/* Phones: each row becomes a small card with its column names, so nothing is cut off at the edge */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; }
  .legal table { min-width: 0; }
  .legal table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; }
  .legal tbody tr { padding: 6px 0; border-bottom: 1px solid var(--joint-strong); }
  .legal tbody tr:last-child { border-bottom: 0; }
  .legal td { border-bottom: 0; padding: 6px 16px; }
  .legal td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}
.legal th { color: var(--gold-hi); font-weight: 600; background: var(--ink-2); }
.legal tr:last-child td { border-bottom: 0; }
.legal code { font-size: .85em; color: var(--gold-bright); background: rgba(212, 175, 55, .08); padding: 2px 6px; border-radius: 5px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; text-decoration: none; margin-bottom: 8px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .reveal.pending, .plan.pending .checks li { opacity: 1; translate: none; }
  .plan.pending .checks path { stroke-dashoffset: 0; }
}

/* ---------- Phones and tablets: light mode for the graphics chip ----------
   iPhones (and the in-app preview especially) have little graphics memory. Blur filters, frosted glass,
   masks, 3D perspective and effects that redraw every frame each need their own off-screen layers, and
   together they crashed the page. On touch screens they are swapped for flat equivalents that look
   almost the same. Kept: the logo's jump and roll, the floating logo and stones, the orbits, and the
   fade-ins as you scroll (all cheap moves of small things). */
@media (max-width: 860px), (hover: none) {
  .site-header, .cookie { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header, .site-header.scrolled { background: var(--ink); }
  .cookie { background: #171012; }
  .glow { filter: none; animation: none; opacity: .4; }
  .hero-sky::after { display: none; }
  .hero-title em { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 85ms + 80ms); }
  .brand .mark, .hero-mark .mark { filter: none; }
  .hero-art { transform: none; transition: none; }
  .plans { perspective: none; }
  .plan.featured::before { display: none; }
  .plan.featured, .plan-badge { animation: none; }
}

/* ---------- Closing call to action (end of Home, Work and Process pages) ---------- */
.cta-card {
  display: grid; justify-items: center; text-align: center; gap: 16px;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px);
  border-radius: 28px; border: 1px solid var(--joint-strong);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(106, 26, 44, .75), transparent 70%),
    radial-gradient(60% 90% at 90% 100%, rgba(212, 175, 55, .08), transparent 70%),
    linear-gradient(180deg, #1E1216, #140E10);
}
.cta-card h2 { font-size: var(--step-4); max-width: 22ch; text-wrap: balance; }
.cta-card p:not(.eyebrow) { color: var(--muted); font-size: var(--step-1); max-width: 40rem; }
.cta-card .hero-actions { justify-content: center; margin-top: 8px; }

/* ---------- Booking calendar popup ----------
   Our own calendar over the page. The days are laid like cut blocks with thin mortar joints, the same
   ashlar coursing as the rest of the site. Free days carry a gold dot; the chosen day is filled with gold. */
html.cal-open { overflow: hidden; }
.cal {
  width: min(940px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px);
  padding: 0; border: 1px solid var(--joint-strong); border-radius: 26px;
  background: var(--ink-2); color: var(--text); overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 175, 55, .06);
}
.cal::backdrop { background: rgba(8, 5, 6, .74); }
.cal[open] .cal-shell { animation: calIn .4s var(--ease-out); }
@keyframes calIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cal-shell {
  display: grid; gap: 22px; padding: clamp(20px, 3.4vw, 34px);
  max-height: calc(100dvh - 50px); overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(70% 60% at 0% 0%, rgba(106, 26, 44, .45), transparent 70%), radial-gradient(50% 50% at 100% 100%, rgba(212, 175, 55, .06), transparent 70%);
}
.cal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cal-head-text { display: grid; gap: 6px; min-width: 0; }
.cal-head h2 { font-family: var(--f-display); font-size: var(--step-3); color: var(--gold-hi); line-height: 1.15; margin: 0; text-wrap: balance; }
.cal-head h2:focus { outline: none; }
.cal-sub { color: var(--muted); margin: 0; max-width: 56ch; }
.cal-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--joint-strong); background: rgba(255, 255, 255, .02); color: var(--ivory); cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
.cal-x svg { width: 20px; height: 20px; }
.cal-x:hover { border-color: rgba(212, 175, 55, .6); background: rgba(212, 175, 55, .1); }
.cal-note { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: .86rem; color: var(--ivory); background: rgba(212, 175, 55, .08); border: 1px dashed rgba(212, 175, 55, .4); }

.cal-pick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--joint); border-radius: 20px; background: rgba(13, 10, 11, .55); }
.cal-month { display: grid; gap: 12px; padding: clamp(16px, 2.4vw, 24px); align-content: start; min-width: 0; }
.cal-times { display: grid; gap: 14px; align-content: start; padding: clamp(16px, 2.4vw, 24px); border-left: 1px solid var(--joint); min-width: 0; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-nav h3 { font-family: var(--f-display); font-size: var(--step-2); color: var(--gold-hi); margin: 0; text-align: center; }
.cal-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--joint-strong); background: transparent; color: var(--ivory); cursor: pointer; transition: border-color .3s, background-color .3s, opacity .3s; }
.cal-arrow svg { width: 18px; height: 18px; }
.cal-arrow:hover:not(:disabled) { border-color: rgba(212, 175, 55, .6); background: rgba(212, 175, 55, .1); }
.cal-arrow:disabled { opacity: .3; cursor: default; }
.cal-wd, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wd span { text-align: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 2px; }
/* The joints: 1px gaps over a lighter ground, like mortar between blocks */
.cal-days { gap: 1px; background: var(--joint); border: 1px solid var(--joint); border-radius: 14px; overflow: hidden; }
.cal-days > * { aspect-ratio: 1 / .86; min-width: 0; background: var(--ink-2); }
.cal-days button {
  position: relative; border: 0; padding: 0; font: 600 .95rem/1 var(--f-body); color: #6E5D50; cursor: default;
  font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s;
}
.cal-days button.has { color: var(--ivory); cursor: pointer; background: #201418; }
.cal-days button.has::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-bright); }
.cal-days button.has:hover { background: rgba(212, 175, 55, .16); }
.cal-days button.full { color: #5E4F46; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-days button.is-today { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .55); }
.cal-days button.sel, .cal-days button.sel:hover { background-color: #D4AF37; background-image: var(--grad-gold); color: var(--on-gold); }
.cal-days button.sel::after { background: var(--on-gold); }
.cal-days button:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; z-index: 1; }
.cal-days[aria-busy] button { color: #4A3D36; }
.cal-tz { margin: 0; font-size: .8rem; color: var(--muted); }
.cal-day { font-family: var(--f-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; }
.cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; margin: -2px; }
.cal-slots button {
  display: grid; place-content: center; gap: 4px; min-height: 50px;
  border: 1px solid var(--joint-strong); border-radius: 12px; padding: .4rem .5rem; background: rgba(255, 255, 255, .02);
  color: var(--ivory); font: 600 .95rem/1 var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}
.cal-slots button:hover, .cal-slots button:focus-visible { border-color: var(--gold-bright); background: rgba(212, 175, 55, .08); color: #fff; outline: none; }
.cal-slots button.taken, .cal-slots button.taken:hover {
  cursor: not-allowed; border-style: dashed; border-color: var(--joint);
  background: transparent; color: #85766A;
}
.cal-slots button.taken span { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-slots button.taken small { font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cal-wait { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: .92rem; }
.cal-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--joint-strong); border-top-color: var(--gold-bright); animation: spin360 .9s linear infinite; }
.cal-empty { display: grid; gap: 14px; justify-items: start; }
.cal-empty p { margin: 0; color: var(--muted); }

.cal-form { display: grid; gap: 18px; }
.cal-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(212, 175, 55, .35); background: rgba(212, 175, 55, .06); }
.cal-chosen p { margin: 0; color: var(--ivory); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-chosen .linklike { font-size: .88rem; padding-block: 6px; }
.cal-form .field textarea { min-height: 96px; }
.cal-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cal-fine { margin: 0; flex: 1 1 260px; font-size: .8rem; color: var(--muted); }
.cal-fine a { color: var(--text); text-underline-offset: 3px; }
.cal .form-status a { color: var(--ivory); font-weight: 600; text-underline-offset: 3px; }
.cal .btn.loading { pointer-events: none; opacity: .8; }

.cal-done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 18px 0 8px; }
.cal-done h3 { font-family: var(--f-display); font-size: var(--step-3); color: var(--gold-hi); margin: 0; }
.cal-done h3:focus { outline: none; }
.cal-done p { margin: 0; max-width: 46ch; color: var(--text); }
.cal-done .btn { margin-top: 6px; }
.cal-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background-color: #D4AF37; background-image: var(--grad-gold); color: var(--on-gold); box-shadow: 0 14px 34px -12px rgba(212, 175, 55, .75); }
.cal-tick svg { width: 30px; height: 30px; }

@media (max-width: 720px) {
  .cal-pick { grid-template-columns: 1fr; }
  .cal-times { border-left: 0; border-top: 1px solid var(--joint); }
  .cal-slots { max-height: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
/* Phones: the calendar fills the screen, with no moving or blurred layers (see the phone notes above) */
@media (max-width: 640px) {
  .cal { width: 100%; height: 100%; max-height: none; max-width: none; margin: 0; border: 0; border-radius: 0; }
  .cal-shell { height: 100%; max-height: none; gap: 18px; align-content: start; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--ink-2); }
  .cal-days > * { aspect-ratio: 1 / .92; }
  .cal-form-foot .btn { width: 100%; }
}
@media (max-width: 860px), (hover: none) { .cal[open] .cal-shell { animation: none; } }
@media (prefers-reduced-motion: reduce) { .cal[open] .cal-shell { animation: none; } }

/* VAT note under the plans and care plan */
.price-vat { margin: 18px 0 0; text-align: center; }