/* ===================================================================
   VIVID NAILS — main stylesheet
   Preset: warm-luxe, retuned to the client's own brand kit.
   Palette from her "Brand Colors" sheet; type pairs Cormorant Garamond
   (echoes the art-deco wordmark) with Inter for menus, prices, policies.
   =================================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* ── The client's six, exactly as supplied. Nothing shifted. ── */
  --vv-greige:     #C4B9B3;   /* warm neutral — the page's parent colour */
  --vv-plum:       #69555D;   /* muted plum                              */
  --vv-butter:     #F3EAA2;   /* pale butter                             */
  --vv-tan:        #AE7D5D;   /* tan / caramel                           */
  --vv-olive:      #585C41;   /* dark olive — anchor, dark grounds       */
  --vv-moss:       #95904F;   /* moss gold — primary accent              */

  /* ── Grounds. Every one is a tint or shade of a colour above. There is no
        cream in her palette, so none is invented: paper is greige lightened,
        surface is greige at a whisper, ink is plum taken down. ── */
  --vv-paper:      #EDE8E5;   /* greige ~28% */
  --vv-paper-2:    #DED5D0;   /* greige ~62% */
  --vv-surface:    #F8F5F3;   /* greige ~10% */
  --vv-ink:        #2C262A;   /* plum, shaded */
  --vv-ink-soft:   #574B51;   /* plum, lifted */
  /* Darkened from #857A7B (3.41:1 on paper — failed AA for the small text it
     carries: service-group notes, durations, "from" labels, form notes).
     #655A5C keeps the plum x greige character and clears 4.5:1 on all three
     light grounds, paper-2 being the binding constraint at 4.58:1. */
  --vv-mute:       #655A5C;

  /* Accent variants that clear 4.5:1 on paper — plain moss is ~3.2:1, fine at
     display sizes but not for body copy or links. */
  --vv-moss-deep:  #63602F;
  --vv-plum-deep:  #54434A;
  --vv-tan-deep:   #8A5B3C;

  --vv-line:       rgba(44, 38, 42, .16);
  --vv-line-soft:  rgba(44, 38, 42, .08);
  --vv-on-dark:    #F1ECE8;   /* greige, near-white */
  --vv-on-dark-mute: rgba(241, 236, 232, .68);

  /* Type */
  --vv-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --vv-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Heading sizes multiply through --vv-scale, so the Customizer can resize
     the whole hierarchy with one number while every size stays fluid. Only the
     rem terms scale; the vw term is left alone so the slope doesn't compound. */
  --vv-scale: 1;
  --vv-weight-head: 500;
  --vv-weight-body: 400;

  --vv-h1:    clamp(calc(2.85rem * var(--vv-scale)), calc((1.9rem + 4.3vw) * var(--vv-scale)), calc(5.75rem * var(--vv-scale)));
  --vv-h2:    clamp(calc(2.1rem  * var(--vv-scale)), calc((1.45rem + 2.8vw) * var(--vv-scale)), calc(3.75rem * var(--vv-scale)));
  --vv-h3:    clamp(calc(1.55rem * var(--vv-scale)), calc((1.2rem + 1.4vw) * var(--vv-scale)), calc(2.35rem * var(--vv-scale)));
  --vv-h4:    clamp(calc(1.2rem  * var(--vv-scale)), calc((1.08rem + .65vw) * var(--vv-scale)), calc(1.65rem * var(--vv-scale)));
  --vv-h5:    calc(1.15rem * var(--vv-scale));
  --vv-h6:    calc(1rem    * var(--vv-scale));
  --vv-lead:  clamp(1.1rem, 1rem + .38vw, 1.35rem);
  --vv-fs:    1.0625rem;
  --vv-small: .875rem;
  --vv-tiny:  .78rem;

  --vv-lh-tight: 1.06;
  --vv-lh-snug:  1.26;
  --vv-lh-body:  1.68;
  --vv-ls-head:  -.014em;
  --vv-ls-body:  0;
  --vv-ls-wide:  .155em;   /* eyebrows */
  --vv-ls-tight: .02em;    /* buttons, nav */

  /* Space */
  --vv-sp-1: .25rem;  --vv-sp-2: .5rem;   --vv-sp-3: .75rem;  --vv-sp-4: 1rem;
  --vv-sp-5: 1.25rem; --vv-sp-6: 1.5rem;  --vv-sp-8: 2rem;    --vv-sp-10: 2.5rem;
  --vv-sp-12: 3rem;   --vv-sp-16: 4rem;   --vv-sp-20: 5rem;   --vv-sp-24: 6rem;

  --vv-section-y: clamp(4rem, 6.5vw + 1rem, 8.5rem);
  --vv-container: 1340px;
  --vv-narrow:    760px;
  --vv-gutter:    clamp(1.25rem, 4vw, 3rem);

  /* Radius — gentle, never pill-heavy; the wordmark is sharp */
  --vv-r-sm: .25rem;  --vv-r-md: .5rem;  --vv-r-lg: .875rem;  --vv-r-xl: 1.35rem;
  --vv-r-full: 999px;

  /* Shadow — warm, olive-tinted */
  --vv-sh-sm: 0 1px 2px rgba(44,38,42,.06);
  --vv-sh-md: 0 6px 18px rgba(44,38,42,.08);
  --vv-sh-lg: 0 18px 44px rgba(44,38,42,.10);
  --vv-sh-xl: 0 32px 72px rgba(44,38,42,.14);

  /* Motion */
  --vv-fast: 180ms;  --vv-normal: 320ms;  --vv-slow: 560ms;
  --vv-ease: cubic-bezier(.16, .68, .2, 1);

  --vv-header-h: 76px;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

body {
  background: var(--vv-paper);
  color: var(--vv-ink);
  font-family: var(--vv-body);
  font-size: var(--vv-fs);
  font-weight: var(--vv-weight-body);
  line-height: var(--vv-lh-body);
  letter-spacing: var(--vv-ls-body);
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--vv-moss-deep);
  outline-offset: 3px;
  border-radius: var(--vv-r-sm);
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--vv-ink); color: var(--vv-on-dark);
  padding: var(--vv-sp-3) var(--vv-sp-5);
}
.skip-link:focus { left: var(--vv-sp-4); top: var(--vv-sp-4); }

/* ---------- TYPE ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vv-display);
  font-weight: var(--vv-weight-head);
  line-height: var(--vv-lh-tight);
  letter-spacing: var(--vv-ls-head);
  color: var(--vv-ink);
  margin: 0 0 var(--vv-sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--vv-h1); }
h2 { font-size: var(--vv-h2); }
h3 { font-size: var(--vv-h3); line-height: var(--vv-lh-snug); }
h4 { font-size: var(--vv-h4); line-height: var(--vv-lh-snug); }
h5 { font-size: var(--vv-h5); line-height: var(--vv-lh-snug); }
h6 { font-size: var(--vv-h6); line-height: var(--vv-lh-snug); }

p { margin: 0 0 var(--vv-sp-4); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--vv-lead);
  line-height: var(--vv-lh-snug);
  color: var(--vv-ink-soft);
}

/* The wordmark's own flavour: italic Cormorant for emphasis. */
.italic { font-style: italic; color: var(--vv-moss-deep); }

.eyebrow {
  display: inline-block;
  font-family: var(--vv-body);
  font-size: var(--vv-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
  color: var(--vv-moss-deep);
  margin: 0 0 var(--vv-sp-4);
}

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--vv-container);
  margin-inline: auto;
  padding-inline: var(--vv-gutter);
}
.container--narrow { max-width: var(--vv-narrow); }

.section { padding-block: var(--vv-section-y); }
.section--paper2 { background: var(--vv-paper-2); }
.section--surface { background: var(--vv-surface); }

/* Dark sections carry a soft moss glow so they never read as flat bands. */
.section--dark {
  position: relative;
  background: var(--vv-olive);
  color: var(--vv-on-dark);
  overflow: hidden;
}
/*
 * The glow layer must cover the WHOLE section. An earlier version used
 * `inset: -30% -10% auto -10%; height: 90%`, so the pseudo-element's box
 * stopped partway down while its gradients were still opaque at that
 * boundary — which painted a hard horizontal seam across the section and
 * made it read as two different colours.
 *
 * Rule: with a radial glow, either the element spans the full box and the
 * gradient fades to transparent inside it, or you get a visible edge.
 */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 65% at 50% -5%,  rgba(149, 144, 79, .34), transparent 72%),
    radial-gradient(ellipse 65% 55% at 6% 108%,  rgba(174, 125, 93, .22), transparent 70%);
  pointer-events: none;
}
.section--dark > * { position: relative; }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--vv-on-dark); }
.section--dark .lead { color: var(--vv-on-dark-mute); }
.section--dark .eyebrow { color: var(--vv-butter); }
.section--dark .italic { color: var(--vv-butter); }

.section-head { max-width: 42rem; margin-bottom: var(--vv-sp-12); }
.section-head--center { margin-inline: auto; text-align: center; }

.stack   { display: flex; flex-direction: column; gap: var(--vv-sp-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--vv-sp-6); }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  overflow: hidden;                 /* clips the travelling arrows */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--vv-sp-2);
  font-family: var(--vv-body);
  font-size: var(--vv-small);
  font-weight: 600;
  letter-spacing: var(--vv-ls-tight);
  text-transform: uppercase;
  padding: .95rem var(--vv-btn-arrow-pad, 3.05rem) .95rem 1.7rem;
  border-radius: var(--vv-r-full);
  border: 1px solid transparent;
  transition: background var(--vv-fast) var(--vv-ease),
              color var(--vv-fast) var(--vv-ease),
              border-color var(--vv-fast) var(--vv-ease),
              transform var(--vv-fast) var(--vv-ease),
              box-shadow var(--vv-fast) var(--vv-ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--vv-olive);
  color: var(--vv-on-dark);
  box-shadow: var(--vv-sh-sm);
}
.btn--primary:hover { background: var(--vv-ink); box-shadow: var(--vv-sh-md); }

.btn--accent {
  background: var(--vv-moss);
  color: var(--vv-ink);
  box-shadow: var(--vv-sh-sm);
}
.btn--accent:hover { background: var(--vv-butter); box-shadow: var(--vv-sh-md); }

.btn--ghost {
  border-color: var(--vv-line);
  color: var(--vv-ink);
}
.btn--ghost:hover { border-color: var(--vv-ink); background: var(--vv-ink); color: var(--vv-on-dark); }

.btn--on-dark {
  border-color: rgba(242,239,227,.42);
  color: var(--vv-on-dark);
}
.btn--on-dark:hover { background: var(--vv-butter); border-color: var(--vv-butter); color: var(--vv-ink); }

.btn--sm { padding: .65rem 1.15rem; font-size: var(--vv-tiny); }

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--vv-paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--vv-line-soft);
  transition: box-shadow var(--vv-normal) var(--vv-ease),
              background var(--vv-normal) var(--vv-ease);
}
.site-header.is-stuck { box-shadow: var(--vv-sh-md); background: var(--vv-paper); }

.header-inner {
  min-height: var(--vv-header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* brand | nav (centred) | CTA */
  align-items: center;
  gap: var(--vv-sp-6);
}
.header-inner > .brand      { justify-self: start; }
.header-inner > .nav        { justify-self: center; }
.header-inner > .header-cta { justify-self: end; }
.header-inner > .burger     { justify-self: end; grid-column: 3; }

.brand { display: flex; align-items: center; gap: var(--vv-sp-3); flex: none; color: var(--vv-ink); }
.brand__wordmark { display: block; height: 46px; width: auto; color: var(--vv-ink); }
.brand__wordmark svg { height: 100%; width: auto; display: block; }
/* .brand__tagline retired from the header lockup — the tagline still leads
   the hero and the footer, where it has room to read. */

.nav { min-width: 0; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  font-size: var(--vv-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vv-ink-soft);
  padding-block: var(--vv-sp-2);
  position: relative;
  transition: color var(--vv-fast) var(--vv-ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--vv-moss);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--vv-normal) var(--vv-ease), opacity var(--vv-normal) var(--vv-ease);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--vv-ink); }
.nav a:hover::after, .nav .current-menu-item > a::after { transform: scaleX(1); }

.header-cta { flex: none; }

.burger {
  display: none; flex: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--vv-line); border-radius: var(--vv-r-full);
}
.burger span {
  display: block; width: 16px; height: 1.5px; background: var(--vv-ink);
  position: relative;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--vv-ink);
}
.burger span::before { top: -5px; }
.burger span::after  { top: 5px; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--vv-paper);
  padding: var(--vv-sp-6) var(--vv-gutter);
  display: flex; flex-direction: column; gap: var(--vv-sp-8);
  transform: translateX(100%);
  transition: transform var(--vv-normal) var(--vv-ease), opacity var(--vv-normal) var(--vv-ease);
  overflow-y: auto;
}
/* `display: flex` above out-specifies the UA's `[hidden] { display: none }`,
   so without this the closed drawer still lays out one full viewport to the
   right — real horizontal overflow, merely hidden by overflow-x on body. */
.drawer[hidden] { display: none; }
.drawer.is-open { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__close { font-size: 1.6rem; line-height: 1; padding: var(--vv-sp-2); }
.drawer nav ul { display: flex; flex-direction: column; gap: var(--vv-sp-5); }
.drawer nav a { font-family: var(--vv-display); font-size: 1.7rem; }

@media (max-width: 980px) {
  .nav, .header-cta { display: none; }
  .burger { display: flex; }
  .brand__tagline { display: none; }
}

/* ---------- FEATURES 3-UP ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--vv-sp-6);
}
.card {
  background: var(--vv-surface);
  border: 1px solid var(--vv-line-soft);
  border-radius: var(--vv-r-lg);
  padding: var(--vv-sp-8);
  transition: transform var(--vv-normal) var(--vv-ease),
              box-shadow var(--vv-normal) var(--vv-ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--vv-sh-lg); }
.card__num {
  font-family: var(--vv-display);
  font-size: 1.5rem; font-style: italic;
  color: var(--vv-tan-deep); margin-bottom: var(--vv-sp-4);
}
.card h3 { font-size: var(--vv-h4); margin-bottom: var(--vv-sp-3); }
.card p { color: var(--vv-ink-soft); font-size: var(--vv-small); line-height: var(--vv-lh-body); }

/* ---------- STATS STRIP ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--vv-sp-8);
  text-align: center;
}
.stat__num {
  font-family: var(--vv-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  line-height: 1;
  color: var(--vv-butter);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--vv-tiny); text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide); color: var(--vv-on-dark-mute);
  margin-top: var(--vv-sp-3);
}

/* ---------- PROCESS STEPS ---------- */
.steps { display: grid; gap: var(--vv-sp-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.step { position: relative; padding-top: var(--vv-sp-6); border-top: 2px solid var(--vv-line); }
.step__n {
  font-family: var(--vv-body); font-size: var(--vv-tiny); font-weight: 700;
  letter-spacing: var(--vv-ls-wide); color: var(--vv-moss-deep);
  margin-bottom: var(--vv-sp-3);
}
.step h3 { font-size: var(--vv-h5); font-family: var(--vv-body); font-weight: 600; letter-spacing: 0; }
.step p { font-size: var(--vv-small); color: var(--vv-ink-soft); }

/* ---------- FAQ ACCORDION ---------- */
.faq { display: grid; gap: var(--vv-sp-10); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

.faq-list { border-top: 1px solid var(--vv-line); }
.faq-item { border-bottom: 1px solid var(--vv-line); }
.faq-item__q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vv-sp-4);
  padding: var(--vv-sp-5) 0;
  font-family: var(--vv-body); font-size: var(--vv-fs); font-weight: 600;
}
.faq-item__icon { flex: none; width: 14px; height: 14px; position: relative; }
.faq-item__icon::before, .faq-item__icon::after {
  content: ""; position: absolute; background: var(--vv-moss-deep);
  transition: transform var(--vv-normal) var(--vv-ease), opacity var(--vv-fast) var(--vv-ease);
}
.faq-item__icon::before { inset: 6px 0 auto 0; height: 1.5px; }
.faq-item__icon::after  { inset: 0 6px 0 auto; width: 1.5px; }
.faq-item[open] .faq-item__icon::after { transform: scaleY(0); opacity: 0; }
.faq-item__a { padding-bottom: var(--vv-sp-6); color: var(--vv-ink-soft); font-size: var(--vv-small); }
.faq-item__a > :last-child { margin-bottom: 0; }

/* ---------- CTA BANNER ---------- */
.cta-banner { text-align: center; }
.cta-banner .container { max-width: 46rem; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--vv-sp-3); justify-content: center; margin-top: var(--vv-sp-8); }

/* ---------- CONTENT RICH ---------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
}
.split__media {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--vv-r-lg); overflow: hidden; background: var(--vv-paper-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.prose > * + * { margin-top: var(--vv-sp-4); }
.prose h2, .prose h3 { margin-top: var(--vv-sp-8); }
.prose ul { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--vv-sp-2); }
.prose a { color: var(--vv-moss-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--vv-olive); color: var(--vv-on-dark); padding-block: var(--vv-sp-20) var(--vv-sp-8); }
.footer-grid {
  display: grid; gap: var(--vv-sp-10);
  grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin-bottom: var(--vv-sp-16);
}
.site-footer .brand__wordmark { color: var(--vv-on-dark); display: block; height: 44px; width: auto; }
.site-footer .brand__wordmark svg { height: 100%; width: auto; display: block; }
.footer-col h4 {
  font-family: var(--vv-body); font-size: var(--vv-tiny); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--vv-ls-wide);
  color: var(--vv-butter); margin-bottom: var(--vv-sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--vv-sp-3); }
.footer-col a, .footer-col p { color: var(--vv-on-dark-mute); font-size: var(--vv-small); }
.footer-col a:hover { color: var(--vv-butter); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--vv-sp-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--vv-sp-6); border-top: 1px solid rgba(242,239,227,.16);
  font-size: var(--vv-tiny); color: var(--vv-on-dark-mute);
}
.footer-bottom a:hover { color: var(--vv-butter); }

/* ---------- PAGE HERO ---------- */
.page-hero { padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--vv-line-soft); }
.page-hero .lead { max-width: 44rem; }

/* ---------- FORMS ---------- */
.field { display: flex; flex-direction: column; gap: var(--vv-sp-2); }
.field label { font-size: var(--vv-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--vv-ls-wide); color: var(--vv-ink-soft); }
.field input, .field textarea, .field select {
  font: inherit; font-size: var(--vv-small);
  color: var(--vv-ink); background: var(--vv-surface);
  border: 1px solid var(--vv-line); border-radius: var(--vv-r-md);
  padding: .8rem 1rem; width: 100%;
  transition: border-color var(--vv-fast) var(--vv-ease), box-shadow var(--vv-fast) var(--vv-ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--vv-moss);
  box-shadow: 0 0 0 3px rgba(149,144,79,.18);
}
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: var(--vv-tiny); color: var(--vv-mute); }
.form-msg { padding: var(--vv-sp-4); border-radius: var(--vv-r-md); font-size: var(--vv-small); }
.form-msg--ok  { background: rgba(88,92,65,.10);  color: var(--vv-olive); }
.form-msg--err { background: rgba(162,58,44,.10); color: #8E3325; }
.hp-field { position: absolute; left: -9999px; }

/* ---------- UTILITIES ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.notice-dev {
  background: var(--vv-butter); color: var(--vv-ink);
  padding: var(--vv-sp-3) var(--vv-gutter);
  font-size: var(--vv-tiny); text-align: center;
  letter-spacing: var(--vv-ls-tight);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- DETAILS/SUMMARY ---------- */
.faq-item__q { list-style: none; cursor: pointer; }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

/* ===================================================================
   PRICE TABLE
   One table, category bands, filter chips. Replaces the earlier
   multi-column dotted lists — those read as a printed takeaway menu.
   =================================================================== */

.menu-section { background: var(--vv-paper-2); }

.menu-top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-sp-8);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--vv-sp-10);
}
.menu-top__copy { max-width: 34rem; }
.menu-top__copy h2 { margin-bottom: var(--vv-sp-3); }

/* ---- Filter chips ---- */
.menu-filter { display: flex; flex-wrap: wrap; gap: var(--vv-sp-2); }
.chip {
  font-family: var(--vv-body);
  font-size: var(--vv-tiny);
  font-weight: 600;
  letter-spacing: var(--vv-ls-tight);
  text-transform: uppercase;
  padding: .55rem 1rem;
  border-radius: var(--vv-r-full);
  border: 1px solid var(--vv-line);
  color: var(--vv-ink-soft);
  background: transparent;
  transition: background var(--vv-fast) var(--vv-ease),
              color var(--vv-fast) var(--vv-ease),
              border-color var(--vv-fast) var(--vv-ease);
}
.chip:hover { border-color: var(--vv-ink); color: var(--vv-ink); }
.chip.is-active {
  background: var(--vv-olive);
  border-color: var(--vv-olive);
  color: var(--vv-on-dark);
}

/* ---- The table ---- */
.pricing {
  background: var(--vv-surface);
  border-radius: var(--vv-r-xl);
  box-shadow: var(--vv-sh-lg);
  overflow: hidden;
}

/* Shared column geometry — head, category band and rows must agree. */
.pricing__head,
.pricing__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem 7rem;
  align-items: center;
  gap: var(--vv-sp-4);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.pricing__head {
  background: var(--vv-olive);
  color: var(--vv-butter);
  padding-block: var(--vv-sp-4);
  font-size: var(--vv-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
}
.pricing__head span:nth-child(2) { text-align: right; }
.pricing__head span:nth-child(3) { text-align: right; }

/* Category band */
.pricing__cat {
  padding: var(--vv-sp-8) clamp(1.25rem, 3vw, 2.5rem) var(--vv-sp-4);
  border-top: 1px solid var(--vv-line-soft);
  background: linear-gradient(to bottom, var(--vv-paper-2), transparent);
}
.pricing__group:first-of-type .pricing__cat { border-top: 0; }
.pricing__cat-name {
  font-size: var(--vv-h4);
  margin: 0;
  color: var(--vv-ink);
}
.pricing__cat-note {
  margin: var(--vv-sp-2) 0 0;
  font-size: var(--vv-small);
  font-style: italic;
  color: var(--vv-mute);
  max-width: 46ch;
}

/* Rows */
.pricing__row {
  padding-block: var(--vv-sp-4);
  border-top: 1px solid var(--vv-line-soft);
  transition: background var(--vv-fast) var(--vv-ease);
}
.pricing__cat + .pricing__row { border-top: 0; }
.pricing__row:hover { background: color-mix(in srgb, var(--vv-butter) 26%, transparent); }

.pricing__name { font-weight: 500; }

.pricing__time {
  text-align: right;
  font-size: var(--vv-tiny);
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
  color: var(--vv-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pricing__price {
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .35rem;
}
.pricing__from {
  font-size: var(--vv-tiny);
  font-style: italic;
  color: var(--vv-mute);
}
.pricing__amount {
  font-family: var(--vv-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  color: var(--vv-moss-deep);
  font-variant-numeric: tabular-nums lining-nums;
}
.pricing__onreq { font-size: var(--vv-small); color: var(--vv-mute); font-style: italic; }

/* Filtering */
.pricing__group[hidden] { display: none; }

/* ---- Foot ---- */
.menu-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-sp-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--vv-sp-8);
}
.menu-foot__note {
  margin: 0;
  max-width: 46rem;
  font-size: var(--vv-small);
  color: var(--vv-ink-soft);
}

/* ---- Mobile: time drops under the service name, price stays aligned ---- */
@media (max-width: 620px) {
  .pricing__head { display: none; }
  .pricing__row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--vv-sp-1);
    padding-block: var(--vv-sp-4);
  }
  .pricing__name  { grid-column: 1; grid-row: 1; }
  .pricing__price { grid-column: 2; grid-row: 1 / span 2; align-items: center; }
  .pricing__time  { grid-column: 1; grid-row: 2; text-align: left; }
  .menu-foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- TRUST STRIP ---------- */
.trust {
  border-block: 1px solid var(--vv-line-soft);
  background: var(--vv-surface);
  padding-block: var(--vv-sp-8);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--vv-sp-6) var(--vv-sp-8);
}
.trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--vv-sp-1);
  padding-left: var(--vv-sp-5);
  border-left: 2px solid var(--vv-moss);
}
.trust__label {
  font-size: var(--vv-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
  color: var(--vv-moss-deep);
}
.trust__value {
  font-family: var(--vv-display);
  font-size: 1.2rem;
  line-height: var(--vv-lh-snug);
  color: var(--vv-ink);
}

/* ---------- CTA CARD ---------- */
.cta-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--vv-sp-8);
  background: var(--vv-plum);
  color: var(--vv-on-dark);
  border-radius: var(--vv-r-xl);
  padding: clamp(2.25rem, 4vw, 3.75rem);
  box-shadow: var(--vv-sh-lg);
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: auto -12% -55% auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(243,234,162,.30), transparent 65%);
  pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card__body { max-width: 40rem; display: flex; flex-direction: column; gap: var(--vv-sp-4); align-items: flex-start; }
.cta-card h2 { color: var(--vv-on-dark); margin: 0; font-size: var(--vv-h3); }
.cta-card p { color: var(--vv-on-dark-mute); margin: 0; }
.cta-card .eyebrow { color: var(--vv-butter); margin: 0; }
.cta-card .btn--ghost { border-color: rgba(242,239,227,.45); color: var(--vv-on-dark); }
.cta-card .btn--ghost:hover { background: var(--vv-butter); border-color: var(--vv-butter); color: var(--vv-ink); }
.cta-card__mark { width: clamp(90px, 10vw, 130px); color: var(--vv-butter); opacity: .9; flex: none; }
.cta-card__mark svg { width: 100%; height: auto; }

@media (max-width: 760px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-card__mark { display: none; }
}

/* ===================================================================
   HERO — full-bleed, dark, viewport-height.
   The earlier cream hero read small and timid against the reference
   build, which runs min-height:100vh over a full-bleed image.
   =================================================================== */
.hero {
  position: relative;
  min-height: clamp(600px, calc(100vh - var(--vv-header-h)), 900px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(4rem, 10vh, 8rem) clamp(3rem, 7vh, 5rem);
  background: var(--vv-olive);
  color: var(--vv-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Until a photo lands, the ground is a layered olive field rather than a
   grey placeholder box — it should look deliberate, not unfinished. */
.hero:not(.has-photo) .hero__bg {
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%, rgba(149,144,79,.55), transparent 62%),
    radial-gradient(ellipse 60% 55% at 12% 82%, rgba(105,85,93,.55), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(243,234,162,.16), transparent 62%),
    var(--vv-olive);
}
/*
 * Two stacked scrims, not one:
 *  1. a 135deg wash anchored top-left, clearing toward the bottom-right so the
 *     photograph keeps its light side and the copy column keeps its contrast;
 *  2. a shallow bottom lift so the buttons and the facts rail stay legible
 *     wherever the image happens to be bright down there.
 */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(30,25,29,.55) 0%, transparent 38%),
    linear-gradient(135deg,
      rgba(30,25,29,.90) 0%,
      rgba(30,25,29,.72) 26%,
      rgba(30,25,29,.42) 52%,
      rgba(30,25,29,.16) 76%,
      rgba(30,25,29,.04) 100%);
}
.hero.has-photo .hero__veil {
  background:
    linear-gradient(to top, rgba(30,25,29,.62) 0%, transparent 40%),
    linear-gradient(135deg,
      rgba(30,25,29,.94) 0%,
      rgba(30,25,29,.80) 28%,
      rgba(30,25,29,.50) 55%,
      rgba(30,25,29,.20) 78%,
      rgba(30,25,29,.06) 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: flex-end;
  width: 100%;
}

.hero__mark { width: 62px; color: var(--vv-butter); margin-bottom: var(--vv-sp-6); }
.hero__mark svg { width: 100%; height: auto; }

.hero .eyebrow { color: var(--vv-butter); }
.hero h1 {
  color: var(--vv-on-dark);
  margin-bottom: var(--vv-sp-5);
  max-width: 14ch;
}
.hero h1 .italic { color: var(--vv-butter); }
.hero__lead { color: var(--vv-on-dark-mute); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--vv-sp-3); margin-top: var(--vv-sp-8); }

/* Right-hand facts rail — gives the hero a second column without needing art. */
.hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 17rem;
  padding: var(--vv-sp-6) var(--vv-sp-7, 1.75rem);
  border: 1px solid rgba(241,236,232,.22);
  border-radius: var(--vv-r-lg);
  background: rgba(30,25,29,.42);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--vv-sh-lg);
}
.hero__meta-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-block: var(--vv-sp-4);
  border-top: 1px solid rgba(241,236,232,.16);
}
.hero__meta-row:first-child { border-top: 0; padding-top: 0; }
.hero__meta-row:last-child  { padding-bottom: 0; }
.hero__meta-k {
  font-size: var(--vv-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
  color: rgba(241,236,232,.70);
}
.hero__meta-v {
  font-family: var(--vv-display);
  font-size: clamp(1.65rem, 1.3rem + .9vw, 2.15rem);
  line-height: 1.05;
  color: var(--vv-butter);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: clamp(3rem, 8vh, 5rem); align-items: center; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__meta { margin-top: var(--vv-sp-8); min-width: 0; }
  .hero__meta-v { font-size: 1.2rem; }
}

/* ---------- MARQUEE ---------- */
.marquee {
  background: var(--vv-ink);
  color: var(--vv-butter);
  padding-block: var(--vv-sp-4);
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-sp-6);
  animation: vv-marquee 42s linear infinite;
  will-change: transform;
}
.marquee__item {
  font-family: var(--vv-display);
  font-size: 1.35rem;
  font-style: italic;
  letter-spacing: .01em;
}
.marquee__dot { color: var(--vv-moss); font-size: .7rem; }
@keyframes vv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- DARK CARDS (pillars) ---------- */
.card--dark {
  background: rgba(30,25,29,.34);
  border: 1px solid rgba(242,239,227,.16);
  backdrop-filter: blur(2px);
}
.card--dark:hover { background: rgba(30,25,29,.46); box-shadow: var(--vv-sh-xl); }
.card--dark h3 { color: var(--vv-on-dark); }
.card--dark p  { color: var(--vv-on-dark-mute); }
.card--dark .card__num { color: var(--vv-butter); }
.pillars .grid-3 { gap: var(--vv-sp-5); }

/* ---------- FULL-BLEED DIVIDER ---------- */
.photo-strip {
  position: relative;
  min-height: clamp(220px, 26vw, 380px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--vv-plum);
  isolation: isolate;
}
.photo-strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-strip:not(.has-photo) {
  background:
    radial-gradient(ellipse 60% 80% at 20% 30%, rgba(149,144,79,.5), transparent 62%),
    radial-gradient(ellipse 70% 90% at 82% 74%, rgba(174,125,93,.45), transparent 60%),
    var(--vv-plum);
}
.photo-strip__veil { position: absolute; inset: 0; z-index: -1; background: rgba(30,25,29,.30); }
.photo-strip__mark { width: clamp(190px, 26vw, 360px); color: var(--vv-on-dark); opacity: .92; }
.photo-strip__mark svg { width: 100%; height: auto; }

/* Without a photo the top third of a 100vh hero is just empty ground, which
   reads unfinished. Hold it shorter until she supplies one; `.has-photo`
   keeps the full viewport treatment. */
.hero:not(.has-photo) {
  min-height: clamp(520px, 74vh, 700px);
}

/* ---------- PALETTE COVERAGE ----------
   All six of the client's colours appear on the page: greige carries every
   ground, olive the dark sections, moss the accents, plum the CTA card and
   divider, butter the highlights, tan the warm passages below. */
.photo-strip:not(.has-photo) {
  background:
    radial-gradient(ellipse 60% 80% at 18% 26%, rgba(149,144,79,.52), transparent 62%),
    radial-gradient(ellipse 66% 86% at 84% 78%, rgba(174,125,93,.62), transparent 60%),
    linear-gradient(115deg, var(--vv-plum) 0%, var(--vv-tan) 130%);
}
.trust__item:nth-child(2n) { border-left-color: var(--vv-tan); }
.trust__item:nth-child(3n) { border-left-color: var(--vv-plum); }
.card__num { color: var(--vv-tan-deep); }
.card--dark .card__num { color: var(--vv-butter); }
.pricing__cat { background: linear-gradient(to bottom, var(--vv-paper-2), transparent); }
.menu-item__price, .pricing__amount { color: var(--vv-moss-deep); }

/* ---------- UPPERCASE BUTTON SWEEP ----------
   .btn, .chip and the WooCommerce buttons already uppercase individually.
   This catches the stragglers — core form submits, comment/search buttons and
   anything a plugin drops in — so no control is set in sentence case. */
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-tight);
}
/* Controls that are glyphs, not words — uppercasing them is meaningless and
   the drawer close would render a stretched multiplication sign. */
.drawer__close,
.burger,
.faq-item__q,
.pricing__row,
.menu-filter .chip { letter-spacing: inherit; }
.drawer__close, .burger { text-transform: none; }
.faq-item__q { text-transform: none; letter-spacing: var(--vv-ls-body); }

/* ---------- ORIGIN BAND ----------
   Deliberately quiet: a short acknowledgement, not a sales section. Tan ground
   so it reads as an aside between two louder bands. */
.origin {
  padding-block: clamp(3.5rem, 6vw, 6rem);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(174,125,93,.16), transparent 70%),
    var(--vv-paper-2);
  border-block: 1px solid var(--vv-line-soft);
}
.origin__mark { width: 44px; margin: 0 auto var(--vv-sp-5); color: var(--vv-tan-deep); }
.origin__mark svg { width: 100%; height: auto; }
.origin h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); margin-bottom: var(--vv-sp-5); }
.origin__body {
  font-family: var(--vv-display);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--vv-ink-soft);
  max-width: 46ch;
  margin-inline: auto;
}

/* ---------- MEDIA PLACEHOLDER ----------
   Restored: these rules sat between the old hero markers and were deleted as
   collateral when that block was sliced out. Nothing showed it until a section
   appeared with a genuinely empty image slot, because every other slot had an
   image in it — the SVG then rendered at container size with the label adrift.
   Any empty slot degrades here, so it must not regress again. */
.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  justify-items: center;
  gap: var(--vv-sp-4);
  padding: var(--vv-sp-8);
  text-align: center;
  color: var(--vv-mute);
  background:
    radial-gradient(circle at 30% 25%, rgba(149,144,79,.20), transparent 60%),
    radial-gradient(circle at 75% 78%, rgba(105,85,93,.20), transparent 62%),
    var(--vv-paper-2);
}
.media-placeholder__mark { width: 84px; max-width: 40%; color: var(--vv-greige); }
.media-placeholder__mark svg { width: 100%; height: auto; display: block; }
.media-placeholder__label {
  font-size: var(--vv-tiny);
  text-transform: uppercase;
  letter-spacing: var(--vv-ls-wide);
  line-height: 1.4;
}

/* Long unbreakable strings — the contact email is 182px and overflowed a
   375px viewport by 2px. Addresses and URLs must be allowed to break. */
.footer-col a,
.footer-col p,
.drawer .form-note,
.prose a { overflow-wrap: anywhere; }


/* ===================================================================
   BUTTON ARROW
   Two arrows share one slot: ::after sits at rest, ::before waits one
   diagonal step down-left. On hover both travel up-right by the same
   amount, so the resting arrow exits and the waiting one lands exactly
   where it was — a continuous loop in a single direction rather than a
   nudge. Done with pseudo-elements so no template needs an arrow span.
   =================================================================== */
.btn::before,
.btn::after {
  content: "\2197";                 /* ↗ */
  position: absolute;
  top: 0; bottom: 0;
  right: 1.25rem;
  display: grid;
  place-items: center;
  font-size: 1.05em;
  line-height: 1;
  pointer-events: none;
  transition: transform var(--vv-normal) var(--vv-ease), opacity var(--vv-normal) var(--vv-ease);
}
.btn::after  { transform: translate3d(0, 0, 0); }
.btn::before { transform: translate3d(-1em, 1em, 0); }

.btn:hover::after,
.btn:focus-visible::after  { transform: translate3d(1em, -1em, 0); }
.btn:hover::before,
.btn:focus-visible::before { transform: translate3d(0, 0, 0); }

/* Small variant keeps the proportions. */
.btn--sm {
  --vv-btn-arrow-pad: 2.35rem;
  padding: .65rem var(--vv-btn-arrow-pad) .65rem 1.15rem;
}
.btn--sm::before, .btn--sm::after { right: 1.05rem; font-size: 1em; }

/* A button that is a bare glyph or a phone number takes no arrow. */
.btn--no-arrow { --vv-btn-arrow-pad: 1.7rem; }
.btn--no-arrow::before, .btn--no-arrow::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after { transition: none; }
  .btn:hover::after  { transform: translate3d(0, 0, 0); }
  .btn:hover::before { transform: translate3d(-1em, 1em, 0); }
}

/* Arrow swap carries opacity as well as travel.
   Clipping alone is not enough: the button is ~56px tall, so a waiting arrow
   offset one step below centre is still inside the pill and shows in the
   corner at rest. Pushing the travel far enough to clear the edge (~41px) made
   the arrow look like it was flying off. Fading is height-independent — the
   same rule works on a 56px hero button and a 38px .btn--sm. */
.btn::after,  .vn-button::after,  .vn-link::after  { opacity: 1; }
.btn::before, .vn-button::before, .vn-link::before { opacity: 0; }
.btn:hover::after,  .btn:focus-visible::after,
.vn-button:hover::after,  .vn-link:hover::after    { opacity: 0; }
.btn:hover::before, .btn:focus-visible::before,
.vn-button:hover::before, .vn-link:hover::before   { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .btn::after,
  .vn-button::before, .vn-button::after,
  .vn-link::before, .vn-link::after { transition: none; }
}

/* =========================================================================
   FOOTER — sitewide (moved out of home.css in 0.21.0)

   These rules were written while working on the homepage and lived in
   home.css, which is only enqueued on the front page. Every inner page was
   therefore still rendering the original olive footer with five columns, a
   single-column nav and an unstyled Instagram line — two different footers
   on one site. The footer is a sitewide component, so it belongs here.

   Rules that are genuinely homepage-only (suppressing the Visit and Hours
   columns, because the closing CTA prints that same information directly
   above) stay in home.css under their .home prefix.
   ====================================================================== */

.site-footer { background: var(--vv-ink); padding-block: 64px 0; }
.site-footer .footer-grid { padding-bottom: 34px; margin-bottom: 0; }

.footer-col--brand { max-width: 40ch; }
.footer-col--brand > p:first-of-type { margin-top: 20px; }

.footer-col h4 {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vv-butter);
  margin-bottom: 20px;
  position: relative;
  padding-top: 16px;
}
.footer-col h4::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 32px; height: 1px; background: currentColor; opacity: .5;
}

.footer-col a,
.footer-col p { font-size: 15px; line-height: 1.7; }

.footer-col--explore ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}
.footer-col--explore a {
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.footer-col--explore a:hover { border-bottom-color: var(--vv-butter); }

.footer-col--book p { max-width: 34ch; margin-bottom: 22px; }
.footer-col--book h4 { margin-bottom: 18px; }
.footer-col--book .btn { margin-top: 2px; }

/* Olive on ink is near-invisible; the footer's action takes the same butter
   treatment every other CTA on a dark ground uses. */
.site-footer .btn--primary {
  background: var(--vv-butter);
  border-color: var(--vv-butter);
  color: var(--vv-ink);
}
.site-footer .btn--primary:hover,
.site-footer .btn--primary:focus-visible {
  background: var(--vv-surface);
  border-color: var(--vv-surface);
  color: var(--vv-ink);
}

/* Instagram — the channel her work actually lives on. */
.footer-social {
  display: block;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(248, 245, 243, .16);
  width: fit-content;
}
.footer-social__label {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vv-on-dark-mute);
  margin-bottom: 8px;
}
.footer-social__handle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--vv-display);
  font-size: calc(30px * var(--vv-scale));
  line-height: 1.2;
  color: var(--vv-surface);
  transition: color var(--vv-fast) var(--vv-ease);
}
.footer-social__handle > span {
  font-family: var(--vv-body);
  font-size: .62em;
  transition: transform var(--vv-normal) var(--vv-ease);
}
.footer-social:hover .footer-social__handle { color: var(--vv-butter); }
.footer-social:hover .footer-social__handle > span { transform: translate(3px, -3px); }

.footer-bottom {
  margin-top: 0;
  border-top: 1px solid rgba(248, 245, 243, .13);
  padding-block: 26px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--vv-on-dark-mute);
}

@media (max-width: 900px) {
  .site-footer { padding-top: 54px; }
}
@media (max-width: 640px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .footer-col--explore ul { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================================
   CLOSING CTA — sitewide (moved out of home.css in 0.22.0)

   The olive band above the footer. It used to be rendered by front-page.php
   and styled in home.css, so inner pages ended on the footer alone. It is
   now a global template part, and the site closes the same way everywhere:
   booking prompt, then footer.
   ====================================================================== */

.vn-visit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: none;
  color: var(--vv-surface);
  padding-block: 86px;
}
.vn-visit__backdrop { position: absolute; inset: 0; z-index: -2; }
.vn-visit__backdrop img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 38%;
}
/* Directional, not a flat wash: the photograph reads through near the top
   where the headline sits, closing to solid olive at the base so the details
   row and the footer edge meet cleanly. Measured at 4.63:1 worst case. */
.vn-visit::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--vv-olive) 74%, transparent) 0%,
      color-mix(in srgb, var(--vv-olive) 80%, transparent) 38%,
      color-mix(in srgb, var(--vv-olive) 92%, transparent) 72%,
      var(--vv-olive) 100%),
    linear-gradient(180deg, rgba(20,17,11,.46) 0%, rgba(20,17,11,.56) 60%, rgba(20,17,11,.64) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .vn-visit::before { background: linear-gradient(180deg, rgba(74,78,46,.80), rgba(74,78,46,.97)); }
}

.vn-visit h2,
.vn-visit .vn-kicker,
.vn-visit__intro { color: var(--vv-surface); }
.vn-visit .vn-kicker { color: var(--vv-butter); }
.vn-visit__intro {
  font-size: 16px; line-height: 1.7;
  max-width: 46ch; margin: 0 auto 34px;
}
.vn-visit .vn-button {
  background: var(--vv-butter); color: var(--vv-ink); border-color: var(--vv-butter);
}
.vn-visit .vn-button:hover {
  background: var(--vv-on-dark); border-color: var(--vv-on-dark);
}

/* A transparent ghost button on a photograph is barely a button, and its
   contrast would depend on whichever pixel sat behind it. */
.vn-visit .vn-link {
  background: color-mix(in srgb, var(--vv-surface) 14%, transparent);
  border-color: color-mix(in srgb, var(--vv-surface) 55%, transparent);
  color: var(--vv-surface);
  backdrop-filter: blur(3px);
}
.vn-visit .vn-link:hover,
.vn-visit .vn-link:focus-visible {
  background: var(--vv-butter); border-color: var(--vv-butter); color: var(--vv-ink);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .vn-visit .vn-link { background: rgba(248,245,243,.14); border-color: rgba(248,245,243,.55); }
}

.vn-visit__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 62px;
  padding-top: 46px;
  border-top: 1px solid rgba(248, 245, 243, .22);
  text-align: left;
  align-items: start;
}
.vn-visit__details .vn-kicker { color: var(--vv-butter); margin-bottom: 13px; }
.vn-visit__details p { font-size: 15px; line-height: 1.8; color: var(--vv-on-dark); margin: 0; }
.vn-visit__details a:not(.vn-link) {
  display: block; font-size: 15px; line-height: 1.8; color: var(--vv-on-dark);
  border-bottom: 1px solid transparent; width: fit-content;
  transition: color var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-visit__details a:not(.vn-link):hover { color: var(--vv-butter); border-bottom-color: var(--vv-butter); }
.vn-visit__details .vn-link { margin-top: 16px; }

/* The CTA prints the address and hours, so the footer does not repeat them.
   This was .home-scoped while the CTA was homepage-only. */
.footer-col--visit,
.footer-col--hours { display: none; }
.footer-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr) minmax(0, 1.1fr);
  gap: 52px;
}

@media (max-width: 900px) {
  .vn-visit { padding-block: 58px; }
  .vn-visit__details { grid-template-columns: 1fr; gap: 23px; margin-top: 42px; padding-top: 34px; }
  .vn-visit__intro { font-size: 15px; }
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-col--brand { grid-column: auto; }
}

/* =========================================================================
   SHARED EDITORIAL PRIMITIVES — moved out of home.css in 0.22.0

   The kicker, the accent italic and the vn-button / vn-link pill system
   were written for the homepage and lived in home.css, which only loads
   on the front page. Once the closing CTA became sitewide, its buttons
   rendered as bare inline text on every inner page — no pill, no padding,
   no arrow. These are site-wide components; they belong here.
   ====================================================================== */

.vn-kicker { font-size:10px; font-weight:600; letter-spacing:.16em; line-height:1.5!important; text-transform:uppercase; color:var(--vv-plum-deep); margin:0 0 23px; }
.vn-button,.vn-link {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--vv-sp-2);
  font-family:var(--vv-body); font-size:var(--vv-small); font-weight:600;
  letter-spacing:var(--vv-ls-tight); text-transform:uppercase;
  padding:.95rem 3.05rem .95rem 1.7rem;
  border-radius:var(--vv-r-full); border:1px solid transparent;
  transition:background var(--vv-fast) var(--vv-ease),color var(--vv-fast) var(--vv-ease),
             border-color var(--vv-fast) var(--vv-ease),transform var(--vv-fast) var(--vv-ease),
             box-shadow var(--vv-fast) var(--vv-ease);
}
.vn-button:hover,.vn-link:hover { transform:translateY(-2px); }
.vn-button > span[aria-hidden],.vn-link > span[aria-hidden] { display:none; }

.vn-button { background:var(--vv-olive); color:var(--vv-on-dark); box-shadow:var(--vv-sh-sm); }
.vn-button:hover { background:var(--vv-ink); box-shadow:var(--vv-sh-md); }

/* Secondary: outlined, no fill, matching .btn--ghost. */
.vn-link { border-color:var(--vv-line); color:var(--vv-ink); background:transparent; }
.vn-link:hover { background:var(--vv-ink); border-color:var(--vv-ink); color:var(--vv-on-dark); }

.vn-button::before,.vn-button::after,.vn-link::before,.vn-link::after {
  content:"\2197"; position:absolute; top:0; bottom:0; right:1.25rem;
  display:grid; place-items:center; font-size:1.05em; line-height:1;
  pointer-events:none; transition:transform var(--vv-normal) var(--vv-ease),opacity var(--vv-normal) var(--vv-ease);
}
.vn-button::after,.vn-link::after   { transform:translate3d(0,0,0); }
.vn-button::before,.vn-link::before { transform:translate3d(-1em,1em,0); }
.vn-button:hover::after,.vn-link:hover::after   { transform:translate3d(1em,-1em,0); }
.vn-button:hover::before,.vn-link:hover::before { transform:translate3d(0,0,0); }
.vn-em {
  font-style: italic;
  color: var(--vv-tan-deep);
  font-synthesis-style: none;
}

/* Butter on every dark ground the accent appears over. */
.vn-hero .vn-em,
.section--dark .vn-em,
.vn-pillars .vn-em,
.vn-gallery .vn-em,
.vn-quotes .vn-em,
.vn-education .vn-em,
.vn-visit .vn-em { color: var(--vv-butter); }

/* The CTA heading is sized by .vn-home h2 on the front page; inner pages need
   the same figure so the band does not change size between pages. */
.vn-visit h2 {
  font-size: clamp(calc(38px * var(--vv-scale)), calc(4.4vw * var(--vv-scale)), calc(62px * var(--vv-scale)));
  line-height: 1.06;
  letter-spacing: -.035em;
  font-style: normal;
  font-weight: var(--vv-weight-head);
  margin: 0 0 20px;
}

/* =========================================================================
   INNER-PAGE HERO — breadcrumb, H1, description

   Lives here, not in home.css: the generic page template never loads the
   editorial stylesheet, so Gallery, Training, Contact and Booking Policies
   would otherwise get no hero at all.
   ====================================================================== */

.vn-page-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  background: var(--vv-surface);
  padding: 56px 0;
  border-bottom: 1px solid var(--vv-line);
}
.vn-page-hero > .container { width: 100%; }

.vn-page-hero h1 {
  font-size: clamp(calc(50px * var(--vv-scale)), calc(5.6vw * var(--vv-scale)), calc(82px * var(--vv-scale)));
  line-height: 1.02;
  letter-spacing: -.042em;
  font-style: normal;
  font-weight: var(--vv-weight-head);
  margin: 0 0 22px;
  max-width: 18ch;
  text-wrap: balance;
}
.vn-page-hero__intro {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--vv-ink-soft);
  margin: 0;
}
.vn-page-hero .vn-button { margin-top: 32px; }

/* Task pages — cart, checkout, account — opt out of the half-viewport
   entrance. Nobody trying to finish an order wants to scroll past a title
   first. */
.vn-page-hero--compact { min-height: 0; padding: 54px 0 44px; }
.vn-page-hero--compact h1 { max-width: 22ch; margin-bottom: 0; }

/* --- Breadcrumb ---------------------------------------------------------- */
.vn-crumbs { margin: 0 0 26px; }
.vn-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.vn-crumbs li { display: flex; align-items: center; gap: 8px; }
/* Separator drawn in CSS so it is never read out by a screen reader. */
.vn-crumbs li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--vv-line);
  flex: none;
}
.vn-crumbs a {
  color: var(--vv-mute);
  border-bottom: 1px solid transparent;
  transition: color var(--vv-fast) var(--vv-ease), border-color var(--vv-fast) var(--vv-ease);
}
.vn-crumbs a:hover { color: var(--vv-plum-deep); border-bottom-color: currentColor; }
.vn-crumbs [aria-current="page"] { color: var(--vv-ink); }

@media (max-width: 720px) {
  .vn-page-hero { min-height: 44vh; padding: 40px 0; }
  .vn-page-hero__intro { font-size: 15.5px; }
  .vn-crumbs ol { font-size: 10px; }
  .vn-crumbs { margin-bottom: 20px; }
}

/* --- Inner-page hero on photography --------------------------------------
   Same direction as the homepage hero: heavy shade on the left where the type
   sits, opening up to nearly clear on the right so the photograph is actually
   visible. Only applied when a backdrop exists — .vn-page-hero without an
   image keeps the light treatment above. */
.vn-page-hero--image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--vv-ink);
  border-bottom: 0;
  /* Lightened in 0.25.0 — the heroes were reading near-black. There was
     6.4:1 of headroom against a 4.5 requirement, so the shade could come
     down and let the photograph through. */
  --vn-page-shade: rgba(25, 22, 24, .89);
  --vn-page-mid:   rgba(25, 22, 24, .64);
  --vn-page-clear: rgba(25, 22, 24, .05);
}
.vn-page-hero__backdrop { position: absolute; inset: 0; z-index: -2; }
.vn-page-hero__backdrop img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 35%;
}
.vn-page-hero--image::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    var(--vn-page-shade) 0%,
    var(--vn-page-shade) 34%,
    var(--vn-page-mid)   60%,
    var(--vn-page-clear) 92%);
}

.vn-page-hero--image h1 { color: var(--vv-surface); }
.vn-page-hero--image .vn-kicker { color: var(--vv-butter); }
.vn-page-hero--image .vn-page-hero__intro { color: var(--vv-on-dark); }
/* The copy column stops before the bright side, so no line runs into the
   part of the gradient that cannot carry text. */
/* 16ch forced "Meet CiCi," onto a line by itself and left text-wrap:balance
   nothing to work with. Wider, with the shaded zone widened to match so the
   longer lines still sit on ground that can carry them. */
.vn-page-hero--image h1 { max-width: 21ch; }
.vn-page-hero--image .vn-page-hero__intro { max-width: 52ch; }

.vn-page-hero--image .vn-crumbs a { color: var(--vv-on-dark-mute); }
.vn-page-hero--image .vn-crumbs a:hover { color: var(--vv-butter); }
.vn-page-hero--image .vn-crumbs [aria-current="page"] { color: var(--vv-surface); }
.vn-page-hero--image .vn-crumbs li + li::before { background: rgba(248, 245, 243, .35); }

.vn-page-hero--image .vn-button {
  background: var(--vv-butter); border-color: var(--vv-butter); color: var(--vv-ink);
}
.vn-page-hero--image .vn-button:hover {
  background: var(--vv-on-dark); border-color: var(--vv-on-dark);
}

/* On a phone the copy spans the full width, so a left-to-right shade would
   leave the right-hand words on bare photograph. Runs bottom-to-top instead. */
@media (max-width: 860px) {
  .vn-page-hero--image::after {
    background: linear-gradient(180deg,
      var(--vn-page-mid) 0%,
      var(--vn-page-shade) 45%,
      var(--vn-page-shade) 100%);
  }
  .vn-page-hero--image h1,
  .vn-page-hero--image .vn-page-hero__intro { max-width: 100%; }
}

/* Block children stretch the full container width. Over a horizontal gradient
   that is a hazard: the box reaches into the bright side even when the text
   does not, and any later background or outline would too. Shrink them to
   their text. */
.vn-page-hero--image .vn-kicker,
.vn-page-hero--image .vn-crumbs { width: fit-content; max-width: 100%; }

/* `.vn-home h1` sets text-wrap:nowrap for the homepage's single-line hero
   headline. Inner pages share that wrapper class, so their longer H1s were
   overflowing the box instead of wrapping — About's ran 1137px wide out of a
   592px box, straight past the shaded side of the gradient and onto bare
   photograph. Higher specificity than .vn-home h1, which main.css loads before. */
.vn-page-hero h1,
.vn-page .vn-page-hero h1 {
  text-wrap: balance;
  white-space: normal;
  overflow-wrap: break-word;
}

/* The accent was breaking mid-phrase — "nail" ending one line and "artist"
   starting the next, which reads as two separate italics. Held together in
   page headlines, released on narrow screens where the space isn't there. */
.vn-page-hero h1 .vn-em { white-space: nowrap; }
@media (max-width: 640px) {
  .vn-page-hero h1 .vn-em { white-space: normal; }
}

/* --- Hero accent colour (0.27.0) -----------------------------------------
   `.vn-page-hero--image` was never added to the list of dark grounds that
   flip .vn-em to butter, so the accent fell through to tan-deep (#8A5B3C) —
   a dark brown sitting on a photograph. My contrast harness missed it
   because it tested the colours I assumed were in use, not the ones the
   page actually computed. */
.vn-page-hero--image .vn-em { color: var(--vv-butter); }

/* --- Active nav item ------------------------------------------------------
   aria-current="page" was being set correctly on every page, but the styling
   that responds to it was scoped to `.home`, so only the homepage ever showed
   an active item. */
.nav a[aria-current] { color: var(--vv-plum); }
.nav a[aria-current]::after { transform: scaleX(1); }
.drawer a[aria-current] { color: var(--vv-plum); }

/* =========================================================================
   SCROLL REVEAL

   The hidden state is gated on `.vivid-reveal`, which a synchronous script in
   the head adds. With JavaScript off the class never lands and every element
   stays visible — the failure mode scroll-reveals usually get wrong is content
   that never appears.

   The hero and inner-page heroes are excluded in JS: they carry the H1 and the
   LCP image.
   ====================================================================== */

.vivid-reveal [data-reveal] {
  opacity: 0;
  /* --vn-r-dir is +1 when the element left by the bottom and -1 when it left by
     the top, so it always moves with the scroll rather than against it. */
  transform: translate3d(0, calc(20px * var(--vn-r-dir, 1)), 0);
  transition:
    opacity .7s var(--vv-ease) calc(var(--vn-r-i, 0) * 70ms),
    transform .7s var(--vv-ease) calc(var(--vn-r-i, 0) * 70ms);
  will-change: opacity, transform;
}
.vivid-reveal [data-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* A reveal must never trap keyboard focus in an invisible element. */
.vivid-reveal [data-reveal]:focus-within {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .vivid-reveal [data-reveal],
  .vivid-reveal [data-reveal="in"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   SERVICE GROUPS on the Services page

   Each group is a deep-link target from the homepage cards, carries its own
   Book button, and shows the photographs the matching card already uses — one
   source, so a photo swapped on the homepage swaps here too.
   ====================================================================== */

.vn-price-group[id] { scroll-margin-top: calc(var(--vv-header-h) + 28px); }

/* The head is back to a simple stack — the button that needed it aligned to a
   baseline now lives under the table. */
.vn-price-group__head h3 { margin-bottom: 10px; }
.vn-price-group__head > p { margin: 0; }

/* The group holds exactly two grid children now — aside and main — so the
   photographs sit immediately under the title and the Book button under the
   table. Placing head/media/table as separate grid items pushed the media down
   to whichever row height the taller table set. */
.vn-price-group__aside { min-width: 0; }
.vn-price-group__main { min-width: 0; }

.vn-price-group__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
}

.vn-price-group__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 22px 0 0;
}
/* An odd count leaves the last photo alone in a two-column grid, which reads as
   a gap rather than a row. The last one spans instead, in a wider frame — which
   also covers the single-photo case. */
.vn-price-group__media > .vn-photo:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.vn-price-group__media .vn-photo {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--vv-paper);
}
.vn-price-group__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Her photos are 3:4 portrait with the hands in the upper half; a centred
     crop into a square frame cut the nails off. */
  object-position: center 38%;
  display: block;
}

@media (max-width: 620px) {
  /* On one column the button reads better under the table on the left, in the
     reading direction, than pushed out to an edge. */
  .vn-price-group__foot { justify-content: flex-start; }
}


/* =========================================================================
   INSTAGRAM STRIP — moved out of home.css in 0.45.0

   home.css is enqueued on the front page and the five editorial templates
   only. Once the strip became part of the footer it rendered on cart,
   checkout, the shop archive and product pages too, with none of its own CSS
   — so the grid fell back to a plain <ul>: one image per row, top to bottom.
   The same mistake the footer rules made in 0.21.0. These live in main.css
   now, which loads everywhere.
   ====================================================================== */
/* --- Instagram strip (0.37.0) ---------------------------------------------
   Square tiles, because that is the shape Instagram returns and forcing any
   other ratio would crop live posts unpredictably.

   ⚠ The fallback images need MORE than object-position can give. A 1:1 tile
   from a 710x690 source shows ~97% of its height, which puts the Instagram
   badge (0-7%) and the watermark (77%+) back on screen — an earlier comment
   here claimed it used the gallery's 9-72% window, and it could not. Only
   `.is-fallback` tiles are therefore zoomed to show roughly the middle 70%,
   which crops the sides too; acceptable at this size, and never applied to
   live posts, which are clean. */
.vn-ig { background: var(--vv-paper); padding-block: 66px 72px; }
.vn-ig__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; margin-bottom: 30px;
}
.vn-ig__head h2 { margin: 0; font-size: calc(38px * var(--vv-scale)); letter-spacing: -.03em; }

.vn-ig__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.vn-ig__grid a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--vv-paper-2);
}
.vn-ig__grid img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: center 24%;
  transition: transform var(--vv-slow) var(--vv-ease);
}
.vn-ig__grid a:hover img { transform: scale(1.06); }

/* Fallback only — zoom past the Instagram furniture. */
.vn-ig.is-fallback .vn-ig__grid img {
  /* The ceiling is 72%, not 77%. 77% came from measuring nail-02 alone; the
     gallery render proved 72% is the figure that holds across all nine files.
     A 1:1 tile therefore needs a 1.6x zoom to fit a clean window at all —
     visible band runs t/160 to (t+100)/160, and t=13 gives 8.1%-70.6%, clear
     of the badge (0-7%) and every watermark. Tighter than ideal, but these are
     thumbnails and it is the only crop that is clean on every file. */
  width: 160%; height: 160%;
  position: absolute; inset: auto;
  top: -13%; left: -30%;
  object-position: center;
}
.vn-ig.is-fallback .vn-ig__grid a:hover img { transform: scale(1.04); }
.vn-ig__overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(25, 22, 24, .42);
  color: var(--vv-surface);
  opacity: 0;
  transition: opacity var(--vv-normal) var(--vv-ease);
}
.vn-ig__grid a:hover .vn-ig__overlay,
.vn-ig__grid a:focus-visible .vn-ig__overlay { opacity: 1; }

@media (max-width: 1040px) { .vn-ig__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .vn-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .vn-ig__grid img, .vn-ig__grid a:hover img { transition: none; transform: none; }
}

/* =========================================================================
   SEARCH RESULTS
   ====================================================================== */

.vn-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vn-result { margin: 0; }
.vn-result__link {
  position: relative;
  display: block;
  padding: 24px 64px 26px 26px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  background: var(--vv-surface);
  text-decoration: none;
  transition: border-color var(--vv-fast) var(--vv-ease), box-shadow var(--vv-normal) var(--vv-ease), transform var(--vv-fast) var(--vv-ease);
}
.vn-result__link:hover {
  border-color: var(--vv-moss-deep);
  box-shadow: 0 12px 26px rgba(44, 38, 42, .07);
  transform: translateY(-1px);
}
.vn-result__kind {
  display: block;
  margin-bottom: 8px;
  font-family: var(--vv-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--vv-mute);
}
.vn-result__title { margin: 0 0 8px; font-size: calc(30px * var(--vv-scale)); letter-spacing: -.02em; }
.vn-result__excerpt { margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: var(--vv-ink-soft); }
.vn-result__go {
  position: absolute; top: 50%; right: 26px;
  transform: translateY(-50%);
  font-size: 17px; color: var(--vv-mute);
  transition: color var(--vv-fast) var(--vv-ease), transform var(--vv-fast) var(--vv-ease);
}
.vn-result__link:hover .vn-result__go { color: var(--vv-moss-deep); transform: translateY(-50%) translate(2px, -2px); }

.vn-results__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.vn-results__form input[type="search"] {
  min-width: 240px;
  padding: 12px 16px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-full);
  background: var(--vv-surface);
  font-family: var(--vv-body); font-size: 14.5px; color: var(--vv-ink);
}
.vn-results__form input[type="search"]:focus-visible { outline: 2px solid var(--vv-moss-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vn-result__link, .vn-result__link:hover, .vn-result__go { transition: none; transform: none; }
  .vn-result__go, .vn-result__link:hover .vn-result__go { transform: translateY(-50%); }
}

/* =========================================================================
   NAIL COURSE — application section

   The form is a Tally embed, so the page owns the frame around it and Tally
   owns what is inside. Kept on a light ground because the embed's own
   background is transparent and its text is dark.
   ====================================================================== */

.vn-apply { background: var(--vv-surface); }
.vn-apply__intro { max-width: 56ch; margin: 16px auto 0; }

.vn-apply__form {
  max-width: 720px;
  margin: 34px auto 0;
  padding: 10px 22px 6px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  background: var(--vv-paper);
}
.vn-apply__form iframe { display: block; width: 100%; border: 0; }

.vn-apply__pending {
  max-width: 560px;
  margin: 30px auto 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--vv-line);
  border-radius: var(--vv-r-md);
  background: var(--vv-paper);
  text-align: center;
}
.vn-apply__pending p { margin: 0 0 20px; font-size: 15px; color: var(--vv-ink-soft); }
.vn-apply__note { margin: 14px 0 4px; text-align: center; }

@media (max-width: 620px) {
  .vn-apply__form { padding: 8px 12px 4px; }
  .vn-apply__pending { padding: 24px 20px 26px; }
}

/* =========================================================================
   BOOKING RAIL
   Was the header button; it scrolled away with the masthead on exactly the
   long pages (Services, Gallery) where someone decides to book. Now a vertical
   tab pinned to the right edge, vertically centred, on every page.

   Vertical so it costs almost no horizontal room — it hugs the gutter instead
   of sitting on top of the content column.

   The "illumination" is two shadows: a soft moss halo that reads as a glow on
   the pale grounds, plus a real drop shadow so the tab sits above the page
   rather than printing on it. Both grow on hover.
   ========================================================================= */
.vn-book-rail {
  position: fixed;
  top: 50%;
  /* Clear of the edge so the pill reads as a pill on both sides, rather than
     as a tab welded to the viewport. */
  right: 16px;
  z-index: 150;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 13px;
  /* Fully round, like every other button on the site. */
  border-radius: 999px;
  /* Same butter-on-ink as the closing CTA it replaced. */
  background: var(--vv-butter);
  color: var(--vv-ink);
  font-family: var(--vv-font-body, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow:
    0 0 0 1px rgba(243, 234, 162, 0.5),
    0 0 28px -4px rgba(243, 234, 162, 0.65),
    0 14px 30px -12px rgba(35, 36, 28, 0.45);
  transition:
    box-shadow var(--vv-slow, 0.4s) var(--vv-ease, ease),
    background var(--vv-fast, 0.2s) var(--vv-ease, ease),
    transform var(--vv-fast, 0.2s) var(--vv-ease, ease);
}
/* Reads bottom-to-top, the usual direction for a right-edge tab. */
.vn-book-rail__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.vn-book-rail__mark {
  font-size: 14px;
  line-height: 1;
  transition: transform var(--vv-fast, 0.2s) var(--vv-ease, ease);
}

/* Hover matches the CTA's: butter goes to the light ground, text stays ink. */
.vn-book-rail:hover,
.vn-book-rail:focus-visible {
  background: var(--vv-on-dark);
  color: var(--vv-ink);
  transform: translateY(-50%) translateX(-3px);
  box-shadow:
    0 0 0 1px rgba(243, 234, 162, 0.85),
    0 0 44px -2px rgba(243, 234, 162, 0.9),
    0 18px 38px -12px rgba(35, 36, 28, 0.5);
}
.vn-book-rail:hover .vn-book-rail__mark { transform: translate(2px, -2px); }

.vn-book-rail:focus-visible {
  outline: 2px solid var(--vv-ink);
  outline-offset: 3px;
}

/* Out of the way while a panel owns the screen. The menu drawer sets
   `vn-menu-open` on <body>; the cart, search and filter drawers all set
   `vn-scroll-locked` on <html>. */
body.vn-menu-open .vn-book-rail,
html.vn-scroll-locked .vn-book-rail {
  opacity: 0;
  pointer-events: none;
}

/* Phones: a tall tab crowds a short viewport, so it becomes a compact pill in
   the bottom-right corner. */
@media (max-width: 760px) {
  .vn-book-rail {
    top: auto;
    bottom: 18px;
    right: 14px;
    flex-direction: row;
    gap: 7px;
    /* Tighter than the desktop tab: at 12px with wide tracking this label ran
       to 242px, two thirds of a 375px screen, and sat on top of whatever
       button happened to be under it. */
    /* 13px vertical keeps the tap target at 44px; trimming it to 11px to save
       width took the pill to 40px, under the minimum. Width comes off the
       sides and the tracking instead. */
    padding: 13px 15px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.05em;
    transform: none;
  }
  .vn-book-rail__mark { font-size: 12px; }
  .vn-book-rail__label { writing-mode: horizontal-tb; transform: none; }
  .vn-book-rail:hover,
  .vn-book-rail:focus-visible { transform: translateX(-2px); }
}

@media print {
  .vn-book-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-book-rail,
  .vn-book-rail__mark { transition: none; }
  .vn-book-rail:hover,
  .vn-book-rail:focus-visible { transform: translateY(-50%); }
  .vn-book-rail:hover .vn-book-rail__mark { transform: none; }
  @media (max-width: 760px) {
    .vn-book-rail:hover,
    .vn-book-rail:focus-visible { transform: none; }
  }
}