/* ============================================
   Wonderlong — Aventura, FL
   Modern editorial design system
   ============================================ */

:root {
  /* Palette derived from the salon's real botanical wallpaper (leaf sage/olive)
     and oak wood — bright, airy, no beige grounds. */
  --bg: #fbf9f5;           /* page — warm white, like the salon walls */
  --bg-alt: #f1e9dc;       /* light oak — the salon wood */
  --ink: #1c2a1f;          /* deep leaf, near black */
  --ink-soft: #2b3a2e;
  --ink-mute: #5f5a4e;     /* ≥4.5:1 on --bg and --bg-alt */
  --line: #e0d4c2;
  /* Sage accent — the wallpaper's leaf greens */
  --accent: #a8c098;
  --green: #7f9a6e;
  --green-deep: #4f6b45;   /* buttons / links — ≥5:1 with white */
  --green-soft: #e4ead9;
  --oak: #c9b79f;          /* salon oak — small warm touches only */
  --star: #e8a317;         /* review stars — honey yellow, sits with the oak */
  --white: #ffffff;
  --header-bg: rgba(251, 249, 245, .92);
  --wood-scrim: rgba(251, 247, 240, .78);
  --wall-scrim: rgba(251, 249, 245, .90);   /* wallpaper ~30% lighter */
  --book-bar-h: 64px;

  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --logo: "Antonio", "Tenor Sans", "Forum", "Trajan Pro", sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 2px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  font-weight: 400;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

a:hover { color: var(--green-deep); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 .6em;
  color: var(--ink);
}

h1 { font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 400; }
h3 { font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 500; }
h4 { font-size: 1.2rem; font-weight: 500; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1.25rem;
  display: inline-block;
}

.lede {
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.55vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: .005em;
}

/* ============= LAYOUT ============= */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* Alternating text sections carry the real wood, tiled small (50%), behind a
   light scrim so the copy stays readable. (Sections that also set their own
   texture, e.g. .section--ridges, override this.) */
/* Light oak sections — the real salon wood, softened */
.section--alt {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--wood-scrim), var(--wood-scrim)),
    url("../images/wood.jpg");
  background-size: auto, 450px auto;
  background-repeat: repeat, repeat;
}
/* Former wood-textured sections — now the pale sage ground of the new palette. */
.wallpaper,
.section--dark {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--wood-scrim), var(--wood-scrim)),
    url("../images/wood.jpg");
  background-size: auto, 450px auto;
  background-repeat: repeat, repeat;
}

.section--dark {
  color: var(--ink-soft);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--ink); }
.section--dark .eyebrow { color: var(--green-deep); }
.section--dark .lede { color: var(--ink-soft) !important; }

/* Salon botanical wallpaper — the real product panel (70x100cm, straight-match),
   used as the true seamless repeat unit => tiles as a wall. Light scrim keeps the
   address/hours text readable while letting the vivid pattern show through. */
.section--mural {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--wall-scrim), var(--wall-scrim)),
    url("../images/wallpaper.jpg");
  background-size: auto, 640px auto;
  background-repeat: repeat, repeat;
  background-position: center, center;
}

/* White halo behind the intro text so it stays readable over the busy wallpaper */
.section--mural .text-center .eyebrow,
.section--mural .text-center h2,
.section--mural .text-center .lede {
  text-shadow:
    0 0 8px #fff, 0 0 8px #fff,
    0 0 18px rgba(255,255,255,.9),
    0 0 34px rgba(255,255,255,.7);
}
/* Eyebrow was green + tiny and disappeared on the wallpaper — make it black & a touch larger */
.section--mural .text-center .eyebrow {
  color: var(--ink);
  font-size: 1.2rem;
  letter-spacing: .22em;
}

/* Salon white wavy relief tiles — recreated as a soft seamless 'wave wall'.
   Kept subtle (light scrim) so it reads as tactile texture behind content. */
.section--ridges {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)),
    url("../images/ridges.jpg");
  background-size: auto, 620px auto;
  background-repeat: repeat, repeat;
  background-position: center, center;
}

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--split { grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .grid--split { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/* ============= HEADER / NAV ============= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}

.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 0;
}

.brand {
  font-family: var(--logo);
  font-size: 1.3rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .85rem;
}

.brand .brand-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  color: var(--ink);
  display: block;
}

.brand .brand-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  align-items: stretch;
}

.brand-wonderlong {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  font-family: var(--logo);
  font-size: 1.3rem;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 500;
}

.brand-wonderlong > span { text-align: center; }

.brand small {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 600;
  display: block;
  text-align: justify;
  text-align-last: justify;
  /* -webkit fallback for Safari */
  -webkit-text-align-last: justify;
}

.footer-brand .brand .brand-mark { color: var(--white); }

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
}

.nav-links a {
  font-family: var(--logo);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 6px;
  transition: color .3s var(--ease);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--green-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s var(--ease);
}

.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-actions { display: flex; gap: .9rem; align-items: center; }

.nav-phone {
  display: none;
  align-items: center;
  gap: .5rem;
  font-family: var(--logo);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav-phone svg { color: var(--green-deep); flex-shrink: 0; }
.nav-phone:hover { color: var(--green-deep); }

@media (min-width: 960px) { .nav-phone { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3px) rotate(-45deg); }

.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  padding: 1.5rem var(--gutter) 2rem;
  background: var(--bg);
}

.nav-mobile.is-open { display: block; }

.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.nav-mobile a {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
}

/* ============= BUTTONS ============= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .95rem 1.75rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  white-space: nowrap;
}

.btn--primary {
  background: var(--green-deep);
  color: var(--bg);
  border-color: var(--green-deep);
}

.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn--gold {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
}

.btn--gold:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.btn--sm { padding: .65rem 1.25rem; font-size: .72rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--green);
  padding-bottom: 4px;
}

.link-arrow:hover { color: var(--green-deep); border-color: var(--green-deep); }

/* ============= HERO ============= */

.hero {
  position: relative;
  min-height: clamp(640px, 90vh, 880px);
  display: grid;
  align-items: end;
  padding-top: clamp(5rem, 12vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--bg-alt);
}

.hero__bg {
  position: absolute; inset: 0;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

/* Same white halo as the Visit wallpaper so hero copy reads over the botanical bg */
.hero__inner {
  text-shadow:
    0 0 8px #fff, 0 0 8px #fff,
    0 0 18px rgba(255,255,255,.9),
    0 0 34px rgba(255,255,255,.7);
}
.hero__inner .btn { text-shadow: none; }

.hero h1 {
  font-style: italic;
  font-weight: 400;
}

.hero h1 em {
  font-style: normal;
  display: block;
  color: var(--green-deep);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.hero__meta-item {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.hero__meta-item strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: none;
  font-weight: 500;
  margin-top: .25rem;
}

/* Full-size model PNG, edge-faded into the hero so text reads on top */
.hero__model {
  position: absolute;
  right: -8%;
  bottom: 0;
  height: 130%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  /* Soft fade on the left side so words sit cleanly over the image */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.65) 45%, #000 65%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.65) 45%, #000 65%, #000 100%);
  filter: drop-shadow(0 25px 50px rgba(40, 30, 20, .15));
}

@media (max-width: 899px) {
  .hero__model {
    right: -22%;
    height: 110%;
    opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 70%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 30%, #000 70%, #000 100%);
  }
}

/* ============= SECTION HEADER ============= */

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.section-head--left { text-align: left; margin-left: 0; margin-right: 0; }

/* ============= SERVICE CARDS ============= */

.service {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.service:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 24px 60px -30px rgba(40, 60, 40, .22);
}

.service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1.5px solid var(--green);
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
}

.service h3 { margin: 0; }
.service p { color: var(--ink-soft); margin: 0; }

.service__cta {
  margin-top: auto;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-deep);
  font-weight: 600;
}

/* ============= METHOD / FEATURE STRIP ============= */

.feature-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .feature-strip { grid-template-columns: repeat(4, 1fr); }
}

.feature {
  background: var(--bg);
  padding: 2rem 1.75rem;
  text-align: center;
}

.feature__num {
  font-family: var(--serif);
  font-size: 2.5rem;
  color: var(--green-deep);
  font-weight: 400;
  display: block;
  margin-bottom: .5rem;
}

.feature h4 {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .35rem;
}

.feature p { font-size: .9rem; color: var(--ink-mute); margin: 0; }

/* ============= EDITORIAL / SPLIT ============= */

.editorial {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--green-soft);
  border-radius: 6px;
  overflow: hidden;
}

.editorial img { width: 100%; height: 100%; object-fit: cover; }

/* ============= QUOTE ============= */

.quote {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.25;
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-weight: 400;
}

.quote blockquote::before {
  content: "“";
  font-size: 4rem;
  display: block;
  line-height: 1;
  color: var(--green);
  margin-bottom: -1rem;
}

.quote cite {
  font-style: normal;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============= BLOG / ARTICLES ============= */

.article-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-card__media {
  aspect-ratio: 4 / 5;
  background: var(--green-soft);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.article-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.article-card:hover .article-card__media img { transform: scale(1.04); }

.article-card__meta {
  display: flex;
  gap: 1rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.article-card h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0;
}

.article-card p { color: var(--ink-soft); margin: 0; }

.article-card__link {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green-deep);
  margin-top: auto;
}

/* ============= ARTICLE PAGE ============= */

.article {
  max-width: 760px;
  margin: 0 auto;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.article__hero {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.article__hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 .6em;
}

.article__hero .lede {
  font-size: clamp(.98rem, 1.3vw, 1.1rem);
  margin-top: .75rem !important;
}

.article__meta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}

.article__cover {
  aspect-ratio: 16 / 9;
  background: var(--green-soft);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.article__cover img { width: 100%; height: 100%; object-fit: cover; }

.article__body {
  font-size: 1.1rem;
  line-height: 1.78;
  color: var(--ink-soft);
}

.article__body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  margin-top: 2.5em;
  margin-bottom: .6em;
  color: var(--ink);
}

.article__body h3 {
  font-size: 1.35rem;
  margin-top: 2em;
  margin-bottom: .4em;
  color: var(--ink);
}

.article__body p { margin-bottom: 1.4em; }
.article__body strong { color: var(--ink); font-weight: 600; }

.article__body blockquote {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--green);
  padding: .35em 0 .35em 1.25em;
  margin: 2em 0;
  font-weight: 400;
}

.article__body ul, .article__body ol {
  padding-left: 1.25em;
  margin: 1em 0 1.5em;
}

.article__body li { margin-bottom: .5em; }

.article__back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============= VISIT BLOCK ============= */

.visit-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(95, 122, 82, .25);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 800px) {
  .visit-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}

.visit-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .visit-layout { grid-template-columns: 1fr 1.05fr; align-items: stretch; }
}

.visit-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(31, 42, 34, .12);
  border-radius: 6px;
  box-shadow: 0 18px 50px -25px rgba(40, 30, 20, .25);
  align-content: space-between;
}

@media (min-width: 560px) {
  .visit-info {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "address hours"
      "reservations hours";
    column-gap: 2.5rem;
    row-gap: 1.5rem;
  }
  .visit-info .visit-block:nth-child(1) { grid-area: address; }
  .visit-info .visit-block:nth-child(2) { grid-area: hours; }
  .visit-info .visit-block:nth-child(3) { grid-area: reservations; align-self: end; }
}

.visit-map {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-height: 0;
}

.visit-map iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 20px 50px -25px rgba(40, 60, 40, .3);
  filter: saturate(.85) contrast(1.02);
}

@media (max-width: 899px) {
  .visit-map iframe { aspect-ratio: 4 / 3; min-height: 0; }
}

.visit-map__cta {
  align-self: flex-start;
}

.visit-block h4 {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 1.25rem;
}

.visit-block p {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 .5rem;
  font-weight: 400;
}

.visit-block p a { color: var(--ink) !important; }
.visit-block p a:hover { color: var(--green-deep) !important; }

.visit-block a:hover { color: var(--accent); }

.hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.hours li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: .92rem;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(31, 42, 34, .22);
  padding-bottom: .55rem;
}

.hours li span:first-child {
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.hours li span:last-child {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
}

/* ============= STORY HERO (smaller portrait) ============= */

.story-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 800px) {
  .story-hero {
    grid-template-columns: 280px 1fr;
    gap: clamp(2.5rem, 4vw, 4rem);
  }
}

@media (min-width: 1100px) {
  .story-hero { grid-template-columns: 320px 1fr; }
}

.story-hero__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--green-soft);
  box-shadow: 0 25px 60px -25px rgba(40, 30, 20, .35);
  max-width: 320px;
  margin: 0 auto;
}

.story-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.story-hero__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, transparent 0%, rgba(31,42,34,.75) 100%);
  color: var(--bg);
  font-family: var(--logo);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.story-hero__caption small {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .25em;
  font-weight: 500;
  color: var(--accent);
  margin-top: .35rem;
  text-transform: uppercase;
}

/* ============= LETTER + TIMELINE (2-column split) ============= */

.letter-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 980px) {
  .letter-timeline { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
}

.letter-timeline__letter {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: clamp(2rem, 3.5vw, 3rem);
  border-radius: 6px;
  box-shadow: 0 25px 60px -25px rgba(40, 30, 20, .30),
              0 2px 6px rgba(40, 30, 20, .06);
  border: 1px solid rgba(255, 255, 255, .6);
  position: relative;
}

.letter-timeline__letter::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-deep), var(--green), var(--accent));
  border-radius: 6px 6px 0 0;
}

.letter-timeline__history {
  padding-top: .5rem;
}

/* ============= PERSONAL LETTER (Our Story, in his own words) ============= */

.letter-body {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.55vw, 1.25rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.letter-body p {
  margin: 0 0 1.4em;
}

.letter-body strong {
  color: var(--ink);
  font-weight: 500;
}

.letter-body em {
  font-style: italic;
  color: var(--ink);
}

.letter-closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22em;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--green);
  padding: .25em 0 .25em 1.25em;
  margin: 2em 0 2.5em;
}

.letter-sign {
  font-family: var(--logo);
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-top: 2em !important;
}

.letter-sign span {
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .22em;
  color: var(--ink-mute);
  margin-top: .5em;
  font-weight: 500;
}

/* ============= METHOD STEPS (4 numbered cards) ============= */

.method-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 2.5vw, 2rem);
}

@media (min-width: 800px) {
  .method-steps { grid-template-columns: 1fr 1fr; }
}

.method-step {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  box-shadow: 0 2px 6px rgba(40, 30, 20, .05);
}

.method-step:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 28px 60px -30px rgba(40, 30, 20, .35);
}

.method-step__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green-soft);
}

.method-step__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
  filter: saturate(1.02);
}

.method-step:hover .method-step__image img { transform: scale(1.06); }

.method-step__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31,42,34,.15) 0%, transparent 40%, rgba(31,42,34,.55) 100%);
  pointer-events: none;
}

.method-step__num {
  position: absolute;
  top: 1rem; left: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -.02em;
  z-index: 2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.method-step__body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.method-step__body h3 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin: 0 0 .85rem;
  font-weight: 500;
  color: var(--ink);
}

.method-step__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1em;
}
.method-step__body p:last-child { margin-bottom: 0; }
.method-step__body em { font-style: italic; color: var(--ink); }

/* ============= TIMELINE ============= */

.timeline {
  /* Single source of truth: pad = left padding, line = where the vertical line sits */
  --tl-pad: clamp(4.5rem, 14vw, 8rem);
  --tl-line: clamp(3.3rem, 11vw, 6rem);
  --tl-dot: 11px;

  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 0 1rem var(--tl-pad);
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: var(--tl-line);
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--green) 10%, var(--green) 90%, transparent 100%);
}

.timeline__item {
  position: relative;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  /* Put the dot centred on the vertical line */
  left: calc(var(--tl-line) - var(--tl-pad) - (var(--tl-dot) / 2));
  top: .7rem;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--green-deep);
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform .35s var(--ease), background .35s var(--ease);
}

.timeline__item:hover::before {
  transform: scale(1.25);
  background: var(--ink);
}

.timeline__year {
  position: absolute;
  left: calc(-1 * var(--tl-pad));
  top: 0;
  width: calc(var(--tl-line) - var(--tl-pad) - (var(--tl-dot) / 2) - .75rem);
  text-align: right;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--green-deep);
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.timeline__title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 .7rem;
  color: var(--ink);
  font-weight: 500;
}

.timeline__body {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.72;
  margin: 0;
}

.timeline__body + .timeline__body { margin-top: 1rem; }

.timeline__body strong { color: var(--ink); font-weight: 600; }

.timeline__body em {
  font-style: italic;
  color: var(--ink);
}

/* ============= INSTAGRAM CAROUSEL ============= */

.ig-section {
  padding: clamp(4rem, 8vw, 6rem) 0;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ig-head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.ig-head a {
  font-family: var(--logo);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-bottom: 1px solid var(--green);
  padding-bottom: 4px;
}

.ig-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.ig-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: ig-scroll 50s linear infinite;
}

.ig-section:hover .ig-track { animation-play-state: paused; }

.ig-card {
  position: relative;
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--green-soft);
  display: block;
  transition: transform .4s var(--ease);
}

.ig-card:hover { transform: scale(1.02); }

.ig-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ig-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(31,42,34,.35) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.ig-card:hover::after { opacity: 1; }

.ig-card__icon {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 26px; height: 26px;
  color: var(--white);
  opacity: .85;
}

@keyframes ig-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ig-track { animation: none; }
  .ig-viewport { overflow-x: auto; }
}

/* ============= FOOTER ============= */

.site-footer {
  background-color: var(--green-deep);
  background-image: linear-gradient(180deg, rgba(75, 100, 65, 0) 0%, rgba(40, 55, 35, .25) 100%);
  color: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
  border-top: 1px solid rgba(255,255,255,.10);
}

.site-footer h4 {
  color: #ffffff;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer a:hover { color: #ffffff; }

.footer-brand .brand { color: #ffffff; }
.footer-brand .brand small { color: #ffffff; }
.footer-brand .brand .brand-mark { color: #ffffff; }
.footer-brand p { color: rgba(255, 255, 255, .8); max-width: 32ch; }
.footer-brand p a { color: #ffffff; }

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .75rem;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .06em;
}

/* ============= UTILITIES ============= */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* Row of buttons / inline links (replaces repeated inline flex styles) */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--green-deep);
  color: var(--white);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: top .25s var(--ease);
}

.skip-link:focus {
  top: 1rem;
  color: var(--white);
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: clamp(2rem, 4vw, 3rem) 0;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============= ANIMATIONS ============= */

@media (prefers-reduced-motion: no-preference) {

  /* 1. Reveal base with variants + stagger */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
    will-change: opacity, transform;
  }
  .reveal-left { transform: translateX(-32px); }
  .reveal-right { transform: translateX(32px); }
  .reveal-scale { transform: scale(.96); }

  .reveal.is-visible,
  .reveal-left.is-visible,
  .reveal-right.is-visible,
  .reveal-scale.is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  /* Stagger children inside a .reveal-stagger container */
  .reveal-stagger.is-visible > * {
    animation: stagger-in 1.1s var(--ease) backwards;
  }
  .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0s; }
  .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: .1s; }
  .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: .2s; }
  .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: .3s; }
  .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: .4s; }
  .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: .5s; }

  @keyframes stagger-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 2. Logo — animated arc + flowing wave, looping */
  .brand-mark path:nth-child(1) {
    /* Open arc (circle): a single traveling dash chases around continuously */
    stroke-dasharray: 70 330;
    animation: logo-arc-chase 7s linear infinite;
  }

  .brand-mark path:nth-child(2) {
    /* The W — static, no animation */
  }

  .brand-mark path:nth-child(3) {
    /* Green horizontal wave — solid & static (no dissolve, no dashes) */
  }

  @keyframes logo-arc-chase {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -400; }
  }

  /* 3. Ken Burns on hero / editorial photos */
  .ken-burns {
    overflow: hidden;
  }
  .ken-burns > img,
  .ken-burns::before {
    animation: ken-burns 18s ease-in-out infinite alternate;
    transform-origin: center center;
  }

  @keyframes ken-burns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.12) translate(-1%, 1%); }
  }

  /* Wood grain is static — no drift (wood doesn't flow) */

  /* 5. Hero title word-by-word reveal */
  .word-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
  }
  .word-reveal > span {
    display: inline-block;
    transform: translateY(110%);
    animation: word-up 1.2s var(--ease) forwards;
  }
  .word-reveal:nth-child(1) > span { animation-delay: .1s; }
  .word-reveal:nth-child(2) > span { animation-delay: .22s; }
  .word-reveal:nth-child(3) > span { animation-delay: .34s; }
  .word-reveal:nth-child(4) > span { animation-delay: .46s; }
  .word-reveal:nth-child(5) > span { animation-delay: .58s; }
  .word-reveal:nth-child(6) > span { animation-delay: .70s; }

  @keyframes word-up {
    to { transform: translateY(0); }
  }

  /* 6. Eyebrow fade-in */
  .hero .eyebrow {
    animation: fade-in 1.4s var(--ease) .05s backwards;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 7. Underline link animated */
  .link-arrow { position: relative; }
  .link-arrow::after {
    content: "→";
    display: inline-block;
    margin-left: .15em;
    transition: transform .4s var(--ease);
  }
  .link-arrow:hover::after { transform: translateX(6px); }

  /* 8. Button shine on hover */
  .btn {
    position: relative;
    overflow: hidden;
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s var(--ease);
    pointer-events: none;
  }
  .btn:hover::before { transform: translateX(120%); }

  /* 9. Floating feature numbers */
  .feature:hover .feature__num {
    transform: translateY(-4px);
    transition: transform .5s var(--ease);
  }

  /* 10. Service card image subtle float */
  .service { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
  .service:hover .service__icon { transform: rotate(-8deg) scale(1.08); transition: transform .5s var(--ease); }
  .service__icon { transition: transform .5s var(--ease); }
}

/* Marquee strip */
.marquee {
  background: var(--green-deep);
  color: var(--bg);
  padding: .85rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  font-family: var(--logo);
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
}

.marquee__track span { display: inline-flex; align-items: center; gap: 3rem; }
.marquee__track span::after {
  content: "·";
  color: var(--green-soft);
  font-size: 1.5rem;
  line-height: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .brand-mark path, .brand-mark circle {
    stroke-dasharray: 0 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ============= FOOTER — bright version (wallpaper palette) ============= */

.site-footer {
  background-color: var(--bg-alt);
  background-image:
    linear-gradient(var(--wood-scrim), var(--wood-scrim)),
    url("../images/wood.jpg");
  background-size: auto, 450px auto;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.site-footer h4 { color: var(--ink); }
.site-footer a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.site-footer a:hover { color: var(--green-deep); text-decoration-color: currentColor; }
.site-footer a:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.site-footer ul a { display: inline-block; padding: .25rem 0; }
.footer-brand .brand,
.footer-brand .brand small,
.footer-brand .brand .brand-mark { color: var(--ink); }
.footer-brand p { color: var(--ink-soft); }
.footer-brand p a { color: var(--ink); }
.footer-bottom { color: var(--ink-mute); border-top-color: var(--line); }

.footer-grid { gap: 2.5rem 2rem; }
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1.1fr 1fr 1fr 1fr; }
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}
.site-footer .footer-cta .btn { text-decoration: none; }
.site-footer .footer-cta .btn--primary,
.site-footer .footer-cta .btn--primary:hover { color: var(--white); }
.site-footer .footer-cta .btn--ghost { color: var(--ink); }
.site-footer .footer-cta .btn--ghost:hover { color: var(--white); }

.footer-hours { font-size: .9rem; }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .4rem;
}
.footer-hours li span:last-child { white-space: nowrap; }

/* ============= MOBILE BOOK BAR ============= */

.book-bar { display: none; }

@media (max-width: 899px) {
  body { padding-bottom: calc(var(--book-bar-h) + env(safe-area-inset-bottom, 0px)); }

  .book-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--header-bg);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-top: 1px solid var(--line);
  }
  .book-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .book-bar__call {
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--ink);
  }
  .book-bar__book {
    background: var(--green-deep);
    color: var(--white);
    border: 1px solid var(--green-deep);
  }
  .book-bar__call:hover, .book-bar__call:focus-visible { background: var(--ink); color: var(--white); }
  .book-bar__book:hover, .book-bar__book:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); }
  .book-bar a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .book-bar svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Larger, comfortable tap targets in the mobile menu */
  .nav-mobile ul { gap: .25rem; }
  .nav-mobile a { display: block; padding: .6rem 0; min-height: 44px; }
  .nav-mobile .btn { display: flex; margin-top: .75rem; font-size: .85rem; min-height: 52px; }
  .nav-mobile { max-height: calc(100vh - 72px); overflow-y: auto; }
}

/* On phones the bottom book bar is the single primary booking action */
@media (max-width: 899px) {
  .nav-actions > .btn { display: none; }
}


/* In-article photos — full frame, natural ratio */
.article__figure {
  margin: 1.5rem 0 2rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-alt);
}
.article__figure img { width: 100%; height: auto; }

/* ============= HERO — text + real Wonderlong photo ============= */
.hero {
  min-height: 0;
  align-items: center;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__inner { text-shadow: none; max-width: none; }
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__photo {
  margin: 0;
  justify-self: center;
  width: min(100%, 460px);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(28, 42, 31, .35);
}
.hero__photo img { width: 100%; height: auto; }

@media (max-width: 899px) {
  /* Phone: photo first, smaller, then the headline and booking buttons */
  .hero__photo { order: -1; width: min(100%, 340px); }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hero__photo { justify-self: end; }
}

/* Real photo of the Aventura salon, shown full frame in the Visit section */
.visit-photo {
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 1100px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 30px 60px -30px rgba(28, 42, 31, .35);
}
.visit-photo img { width: 100%; height: auto; }

/* ============= BOOK PAGE ============= */
.book-page { padding-top: clamp(2rem, 5vw, 4rem); }
.book-head { max-width: 720px; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.book-head h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
.book-help { color: var(--ink-mute); font-size: .95rem; }
.book-help a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
.book-frame {
  max-width: 980px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(28, 42, 31, .25);
}
.book-frame:not(.book-frame--widget) iframe { display: block; width: 100%; height: min(1400px, 160vh); border: 0; }
.book-fallback { text-align: center; margin-top: 1rem; font-size: .9rem; }
.book-fallback a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .book-page .container { padding-left: 8px; padding-right: 8px; }
  .book-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .book-frame:not(.book-frame--widget) iframe { height: 1500px; }
}

/* ============= GREEN HEADER & FOOTER — brand green with a whisper of the salon wallpaper ============= */
:root {
  --brand-green: #4f6b45;
  --brand-green-veil: rgba(79, 107, 69, .93);   /* wallpaper shows through at ~7% */
  --on-green: #ffffff;
  --on-green-soft: rgba(255, 255, 255, .86);
}
.site-header,
.site-footer {
  background-color: var(--brand-green);
  background-image:
    linear-gradient(var(--brand-green-veil), var(--brand-green-veil)),
    url("../images/wallpaper.jpg");
  background-size: auto, 520px auto;
  background-repeat: repeat, repeat;
  color: var(--on-green);
}
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.site-header.is-scrolled { border-bottom-color: rgba(255,255,255,.15); box-shadow: 0 6px 20px -12px rgba(0,0,0,.35); }

/* Header text & logo */
.site-header .brand,
.site-header .brand .brand-mark,
.site-header .brand small { color: var(--on-green); }
.site-header .brand-mark path:nth-child(3),
.site-footer .brand-mark path:nth-child(3) { stroke: var(--accent); }
.site-header .nav-links a { color: var(--on-green-soft); }
.site-header .nav-links a:hover,
.site-header .nav-links a.is-active { color: var(--on-green); }
.site-header .nav-links a::after { background: var(--on-green); }
.site-header .nav-phone,
.site-header .nav-phone svg { color: var(--on-green); }
.site-header .nav-phone:hover { color: var(--accent); }
.site-header .nav-toggle span { background: var(--on-green); }
.site-header a:focus-visible,
.site-header button:focus-visible { outline: 2px solid var(--on-green); outline-offset: 3px; }
/* Header Book button: white on green so it stays the clear primary action */
.site-header .nav-actions .btn--primary {
  background: var(--on-green);
  color: var(--brand-green);
  border-color: var(--on-green);
}
.site-header .nav-actions .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* Mobile menu panel */
.site-header .nav-mobile { background: var(--brand-green); border-top-color: rgba(255,255,255,.15); }
.site-header .nav-mobile a { color: var(--on-green); }
.site-header .nav-mobile .btn--gold { background: var(--on-green); color: var(--brand-green); border-color: var(--on-green); }

/* Footer text, links, buttons */
.site-footer h4,
.site-footer .footer-brand .brand,
.site-footer .footer-brand .brand small,
.site-footer .footer-brand .brand .brand-mark { color: var(--on-green); }
.site-footer,
.site-footer p,
.site-footer .footer-brand p { color: var(--on-green-soft); }
.site-footer a,
.site-footer .footer-brand p a { color: var(--on-green); }
.site-footer a:hover { color: var(--accent); }
.site-footer a:focus-visible { outline-color: var(--on-green); }
.site-footer .footer-hours li { border-bottom-color: rgba(255,255,255,.18); }
.site-footer .footer-bottom { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.18); }
.site-footer .footer-cta .btn--primary,
.site-footer .footer-cta .btn--primary:hover { background: var(--on-green); color: var(--brand-green); border-color: var(--on-green); }
.site-footer .footer-cta .btn--ghost { color: var(--on-green); border-color: var(--on-green); background: transparent; }
.site-footer .footer-cta .btn--ghost:hover { background: var(--on-green); color: var(--brand-green); }

/* ============= REVIEWS ============= */
.review-summary { color: var(--ink-soft); max-width: 60ch; margin: 0 auto; }
.review-stars { color: var(--star); letter-spacing: .12em; font-size: 1.05rem; }
.review-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.review-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-card blockquote { margin: 0; flex: 1; }
.review-card blockquote p { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
.review-card figcaption { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.review-card figcaption strong { color: var(--ink); font-weight: 600; }
.review-card figcaption span { color: var(--ink-mute); }
.review-note { text-align: center; margin-top: clamp(1.5rem, 3vw, 2rem); font-size: .9rem; color: var(--ink-mute); }
.review-note a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) {
  /* Phone: swipe through reviews instead of a very long stack */
  .review-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
  }
  .review-card { scroll-snap-align: start; }
}

/* Equal-width button pairs (footer CTA, hero, booking) */
.site-footer .footer-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  max-width: 320px;
}
.site-footer .footer-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 599px) {
  .btn-row { display: grid; grid-template-columns: 1fr; gap: .75rem; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .site-footer .footer-cta { max-width: none; }
}

/* ============= HOURS ZEBRA ============= */
/* Light zebra striping: translucent dark grey on alternate days. */
:root {
  --zebra-light: rgba(40, 40, 40, .07);   /* Visit section, light ground */
  --zebra-dark: rgba(20, 20, 20, .16);    /* footer, green ground */
}
.hours { gap: 0; }
.hours li,
.footer-hours li {
  border-bottom: 0;
  padding: .55rem .75rem;
  border-radius: 4px;
}
.hours li:nth-child(odd) { background: var(--zebra-light); }
.site-footer .footer-hours li { border-bottom: 0; }
.footer-hours li:nth-child(odd) { background: var(--zebra-dark); }

/* ============= HEADER LOGO DISC ============= */
/* Soft dark-green disc behind the logo circle — highlights the mark without
   competing with the animated arc. */
:root { --logo-disc: rgba(28, 42, 31, .32); }
.site-header .brand .brand-mark {
  border-radius: 50%;
  background: var(--logo-disc);
  box-shadow: 0 0 0 4px var(--logo-disc), 0 0 14px 2px rgba(28, 42, 31, .18);
}

/* ============= HEADER PHONE — larger, tap-to-call on every screen ============= */
.nav-phone {
  display: inline-flex;
  font-size: 1.08rem;
  gap: .55rem;
  min-height: 44px;
}
.nav-phone svg { width: 18px; height: 18px; }
/* Phones: the number becomes a round 44px call button so the header still fits. */
@media (max-width: 599px) {
  .nav-phone {
    width: 44px;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
  }
  .nav-phone svg { width: 20px; height: 20px; }
  .nav-phone__num {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ============= FOOTER TYPE — slightly larger for readability ============= */
.site-footer h4 { font-size: .84rem; }
.site-footer p,
.site-footer ul:not(.footer-hours) li { font-size: 1.05rem; line-height: 1.6; }
.footer-hours { font-size: 1rem; }
.footer-bottom { font-size: .86rem; }

/* ============= FOOTER PHONE — centred with the CTA buttons ============= */
.site-footer .footer-cta .footer-phone {
  display: block;
  text-align: center;
  font-family: var(--logo);
  font-size: 1.3rem;
  letter-spacing: .12em;
  white-space: nowrap;
  padding: .25rem 0;
}

/* ============= DISPLAY SERIF — Instrument Serif ships one weight; never fake bold ============= */
h1, h2, h3, h4, .hero h1 { font-synthesis: none; }
h1, h2 { letter-spacing: -0.01em; }

/* ============= HERO — salon photo as full background ============= */
:root {
  --hero-veil-strong: rgba(251, 249, 245, .92);
  --hero-veil-soft: rgba(251, 249, 245, .25);
}
.hero {
  min-height: clamp(560px, 82vh, 820px);
  background: var(--bg);
}
.hero__bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, var(--hero-veil-strong) 0%, var(--hero-veil-strong) 38%, var(--hero-veil-soft) 72%, rgba(251,249,245,0) 100%),
    url("../images/salon/salon-aventura-interior.jpg");
  background-size: cover, cover;
  background-position: center, 70% center;
}
.hero__grid { grid-template-columns: 1fr; }
.hero__inner { max-width: 640px; }
/* Phones: the photo sits behind a uniform veil so the copy stays readable */
@media (max-width: 767px) {
  .hero__bg {
    background-image:
      linear-gradient(180deg, rgba(251,249,245,.80) 0%, rgba(251,249,245,.90) 100%),
      url("../images/salon/salon-aventura-interior.jpg");
    background-position: center, 60% center;
  }
}

/* ============= HERO — let the salon's character show (no white wash) ============= */
:root { --hero-panel: rgba(251, 249, 245, .9); }
.hero__bg {
  background-image: url("../images/salon/salon-aventura-interior.jpg");
  background-size: cover;
  background-position: 70% center;
}
.hero__inner {
  background: var(--hero-panel);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgba(28, 42, 31, .45);
}
@media (max-width: 767px) {
  .hero__bg {
    background-image: url("../images/salon/salon-aventura-interior.jpg");
    background-position: 30% center;
  }
}

/* ============= HERO — green-chair styling floor (WhatsApp 07.51.52 (2)) ============= */
.hero__bg {
  background-image: url("../images/salon/salon-hero-green-chairs.jpg");
  background-position: right 60%;
}
@media (max-width: 767px) {
  .hero__bg {
    background-image: url("../images/salon/salon-hero-green-chairs.jpg");
    background-position: 75% center;
  }
}

/* ============= HERO — green chairs + Wonderlong product wall ============= */
.hero__bg {
  background-image: url("../images/salon/salon-hero-shelf.jpg?v=4");
  background-position: center 60%;
}
@media (max-width: 767px) {
  .hero__bg {
    background-image: url("../images/salon/salon-hero-shelf.jpg?v=4");
    background-position: 35% center;
  }
}

/* ============= HERO — panel further left (covers the back door), photo zoomed, less window on the right ============= */
.hero__bg {
  background-position: 30% 60%;
  transform: scale(1.2);
  transform-origin: 25% 55%;
}
@media (min-width: 768px) {
  .hero .hero__grid {
    max-width: none;
    margin-left: 0;
    padding-left: clamp(1.5rem, 4vw, 4rem);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bg { will-change: auto; }
}

/* ============= HERO — show chairs & mirrors: panel moves right over the product shelf ============= */
.hero__bg {
  background-position: 50% 60%;
  transform: scale(1.3);
  transform-origin: 85% 60%;   /* crops the back door on the left, keeps chairs + mirrors */
}
@media (min-width: 768px) {
  .hero .hero__grid {
    max-width: none;
    margin: 0;
    padding-left: var(--gutter);
    padding-right: clamp(1.5rem, 4vw, 4rem);
    justify-items: end;
  }
  .hero__inner { max-width: 560px; }
}
@media (max-width: 767px) {
  .hero__bg { transform: none; background-position: 25% center; }
}

/* Hero: zoom out ~20% (1.3 → 1.08) to show more chairs */
@media (min-width: 768px) {
  .hero__bg { transform: scale(1.08); }
}

/* ============= HERO — compact panel in the space above the mirrors (top-left) ============= */
@media (min-width: 768px) {
  .hero { align-items: start; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
  .hero .hero__grid {
    justify-items: start;
    align-items: start;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    padding-right: var(--gutter);
  }
  .hero__inner {
    max-width: 600px;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
    background: rgba(251, 249, 245, .86);
  }
  .hero h1 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); margin-bottom: .4em; }
  .hero .lede { font-size: 1.02rem; margin-bottom: 1.25rem; }
  .hero__meta { display: none; }
}
@media (min-width: 768px) {
  .hero { min-height: clamp(680px, 92vh, 920px); }
}
/* Desktop framing: mirrors + chairs on the left, shelf to the right, window cropped out */
@media (min-width: 768px) {
  .hero__bg {
    transform: none;
    background-size: 150% auto;
    background-position: 8% 38%;
  }
}

/* ============= BOOK — official Vagaro embedded widget ============= */
.book-frame--widget { min-height: 640px; padding: 0 0 1rem; }
.book-frame--widget iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }
.book-frame--widget .embedded-widget-title:empty { display: none; }
/* Hero panel a bit wider to the right */
@media (min-width: 768px) {
  .hero__inner { max-width: 860px; width: min(860px, 100%); }
}
@media (min-width: 768px) {
  .hero .lede { max-width: 60ch !important; }
}

/* ============= REVIEWS — larger, easier to read ============= */
.review-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.review-card blockquote p { font-size: 1.45rem; line-height: 1.45; }
.review-card figcaption { font-size: 1.05rem; }
.review-stars { font-size: 1.25rem; }
.review-summary, .review-note { font-size: 1.05rem; }
@media (max-width: 699px) {
  .review-card blockquote p { font-size: 1.3rem; }
  .review-grid { grid-template-columns: none; }
}
/* Reviews: clear sans text for easy reading; 8 cards = 2 even rows */
.review-card blockquote p { font-family: var(--sans); font-size: 1.2rem; line-height: 1.6; font-weight: 400; }
@media (min-width: 700px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .review-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px) { .review-card blockquote p { font-size: 1.15rem; } }

/* ============= SEE YOU SOON (post-booking thank-you page, not in navigation) ============= */
.seeyou-hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .seeyou-hero__grid { grid-template-columns: 5fr 7fr; } }
.seeyou-portrait {
  margin: 0;
  max-width: 420px;
  width: 100%;
  justify-self: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(28, 42, 31, .4);
}
.seeyou-portrait img { display: block; width: 100%; height: auto; }
.seeyou-note h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin-bottom: .5em; }
.seeyou-note h1 em { color: var(--green-deep); }
.seeyou-note p { font-size: 1.15rem; line-height: 1.7; max-width: 60ch; color: var(--ink-soft); }
.seeyou-sign { margin-top: 1.5rem; }
.seeyou-sign__name { display: block; font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--ink); }
.seeyou-sign__role { display: block; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

.seeyou-steps {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 900px) { .seeyou-steps { grid-template-columns: repeat(3, 1fr); } }
.seeyou-steps li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.seeyou-steps__num { display: block; font-family: var(--logo); letter-spacing: .14em; color: var(--green-deep); font-size: 1.1rem; margin-bottom: .75rem; }
.seeyou-steps h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.seeyou-steps p { font-size: 1.1rem; line-height: 1.65; margin: 0; color: var(--ink-soft); }
.seeyou-steps a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.seeyou-find__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
}
@media (min-width: 900px) { .seeyou-find__grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.seeyou-map {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
}
.seeyou-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.seeyou-info address { font-style: normal; font-size: 1.25rem; line-height: 1.6; color: var(--ink); }
.seeyou-actions { display: grid; gap: .75rem; margin: 1.5rem 0 2rem; max-width: 360px; }
.seeyou-actions .btn { width: 100%; justify-content: center; }
.seeyou-actions--center { margin-left: auto; margin-right: auto; }
.seeyou-hours-title { font-size: 1.4rem; margin-bottom: .75rem; }
.seeyou-salon { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.seeyou-salon img { display: block; width: 100%; height: auto; border-radius: 8px; }
.seeyou-salon figcaption { margin-top: .75rem; font-size: 1rem; color: var(--ink-mute); text-align: center; }

.seeyou-back__inner { text-align: center; max-width: 640px; margin: 0 auto; }
.seeyou-back__inner p { font-size: 1.15rem; color: var(--ink-soft); }
/* See you soon: photo at the top of each step card */
.seeyou-steps li { padding-top: 0; overflow: hidden; }
.seeyou-steps__img {
  margin: 0 calc(-1 * clamp(1.5rem, 3vw, 2rem)) 1.25rem;
  aspect-ratio: 1400 / 952;
  background: var(--bg-alt);
}
.seeyou-steps__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============= BOOK — white, borderless, compact top so the Vagaro booking feels native ============= */
.page-book { background: var(--white); }
.page-book .book-page { padding-top: clamp(1rem, 2.5vw, 1.75rem); padding-bottom: 2rem; background: var(--white); }
.page-book .book-head { margin-bottom: .5rem; }
.page-book .book-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 .35rem; }
.page-book .book-help { margin: 0; font-size: 1rem; }
.page-book .book-frame,
.page-book .book-frame--widget {
  max-width: 1000px;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 899px) {
  .page-book .book-page .container { padding-left: 0; padding-right: 0; }
  .page-book .book-head { padding: 0 1rem; }
}

/* ============= VAGARO CHAT BUTTON — on phones, sit above the Call / Book now bar ============= */
@media (max-width: 899px) {
  #vcw-launcher {
    position: fixed;
    top: 0; left: 0; right: 0;
    bottom: calc(var(--book-bar-h) + env(safe-area-inset-bottom, 0px));
    transform: translateZ(0);   /* makes the button's fixed position relative to this box */
    pointer-events: none;       /* the box itself never blocks taps; the button stays clickable */
    z-index: 2147483000;
  }
}

/* ============= LOGO — the circle line draws itself, holds, then erases, and repeats ============= */
/* Open circle with a small gap at upper-left, like the Wonderlong mark */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark path:nth-child(1) {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    animation: logo-ring 6s cubic-bezier(.65, 0, .35, 1) infinite;
  }
}
@keyframes logo-ring {
  0%   { stroke-dashoffset: 100; }   /* nothing drawn */
  40%  { stroke-dashoffset: 0; }     /* circle complete */
  65%  { stroke-dashoffset: 0; }     /* hold */
  100% { stroke-dashoffset: -100; }  /* erased, same direction */
}
/* Vagaro widget: let it grow to its full height — no fixed height, no clipping */
.page-book .book-frame--widget { overflow: visible; min-height: 0; }
.page-book .book-frame--widget .vagaro-iframe,
.page-book .book-frame--widget .vagaro-container { overflow: visible; max-height: none; }
/* Never shorter than the screen, so the booking always fills the view while Vagaro sizes it */
.page-book .book-frame--widget iframe { min-height: calc(100vh - 90px); }

/* ============= ARTICLE CARDS — elegant card, green title, category pill ============= */
.article-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  gap: .9rem;
  padding-bottom: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 18px 40px -28px rgba(28, 42, 31, .35);
  transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}
.article-card__media { border-radius: 0; margin-bottom: .35rem; }
.article-card__meta,
.article-card h3,
.article-card p,
.article-card__link { padding: 0 1.4rem; }
.article-card__meta { align-items: center; gap: .75rem; font-size: .74rem; }
.article-card__meta span:first-child {
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-weight: 600;
}
.article-card h3 {
  color: var(--green-deep);
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  line-height: 1.15;
}
.article-card p { font-size: 1.02rem; line-height: 1.6; }
.article-card__link { color: var(--ink); }
@media (hover: hover) {
  .article-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(28, 42, 31, .45); }
  .article-card:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .article-card:hover .article-card__link { color: var(--green-deep); }
}
.article-card:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .article-card, .article-card:hover { transform: none; } }

/* ============= HERO — 10 hairstyles dissolving inside the light panel ============= */
.hero-hair { margin: 1.5rem auto 0; width: min(260px, 70%); }
.hero-hair__stage { position: relative; aspect-ratio: 636 / 900; }
.hero-hair__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 1600ms ease-in-out;
}
.hero-hair__stage img.is-active { opacity: 1; }
.hero-hair figcaption { margin-top: .5rem; text-align: center; font-family: var(--logo); letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--green-deep); }
.hero-hair figcaption small { display: block; font-family: var(--sans); letter-spacing: .08em; text-transform: none; font-size: .78rem; color: var(--ink-mute); margin-top: .15rem; }
@media (min-width: 768px) {
  .hero__inner { display: grid; grid-template-columns: 1fr minmax(220px, 290px); gap: clamp(1rem, 2.5vw, 2rem); align-items: end; }
  .hero-hair { margin: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hero-hair__stage img { transition-duration: 1ms; } }
/* soft fade at the bottom so the cut-out melts into the panel */
.hero-hair__stage { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }

/* ============= SERVICE PAGES ============= */
.svc-hero { padding-top: clamp(2rem, 5vw, 4rem); }
.svc-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .svc-hero__grid { grid-template-columns: 7fr 5fr; } }
.svc-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); margin: .5rem 0 1rem; }
.svc-hero h1 em, .svc-how h2 em { color: var(--green-deep); }
.svc-hero .lede { font-size: 1.15rem; line-height: 1.7; max-width: 58ch; color: var(--ink-soft); }
.svc-hero__img { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(28,42,31,.4); max-height: 640px; }
.svc-hero__img img { display: block; width: 100%; height: auto; }
.svc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.svc-fact { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: .85rem 1rem; }
.svc-fact span { display: block; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.svc-fact strong { display: block; margin-top: .25rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.svc-benefits { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 700px) { .svc-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-benefits { grid-template-columns: repeat(4, 1fr); } }
.svc-benefits li { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 1.5rem; }
.svc-benefits h3 { color: var(--green-deep); font-size: 1.5rem; margin-bottom: .5rem; }
.svc-benefits p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }

.svc-how { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .svc-how { grid-template-columns: 7fr 5fr; } }
.svc-steps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.svc-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.svc-steps__num { font-family: var(--logo); font-size: 1.4rem; letter-spacing: .1em; color: var(--green-deep); line-height: 1.2; }
.svc-steps h3 { font-size: 1.45rem; margin: 0 0 .25rem; }
.svc-steps p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.svc-how__img { margin: 0; border-radius: 10px; overflow: hidden; max-width: 460px; justify-self: center; }
.svc-how__img img { display: block; width: 100%; height: auto; }

.svc-faq { max-width: 820px; }
.svc-faq__item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; margin-top: .75rem; }
.svc-faq__item summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; font-size: 1.15rem; font-weight: 600; color: var(--ink); position: relative; min-height: 44px; }
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--green-deep); }
.svc-faq__item[open] summary::after { content: "–"; }
.svc-faq__item summary:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 2px; }
.svc-faq__item p { margin: 0; padding: 0 1.25rem 1.2rem; font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); }

.svc-cta__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.svc-cta__inner > p { font-size: 1.15rem; color: var(--ink-soft); }
.svc-cta__btns { justify-content: center; }
.svc-more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.svc-more h3 { font-size: 1.3rem; }
.svc-more ul { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; }
.svc-more a { color: var(--green-deep); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.svc-more a:hover { text-decoration-color: currentColor; }

/* Home: service cards with photos, each linking to its page */
.svc-cards { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-cards { grid-template-columns: repeat(5, 1fr); } }
.svc-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; box-shadow: 0 18px 40px -28px rgba(28,42,31,.35); transition: transform 250ms ease-out, box-shadow 250ms ease-out; }
.svc-card__img { display: block; aspect-ratio: 4 / 3; background: var(--green-soft); }
.svc-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.svc-card__title { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--green-deep); }
.svc-card__text { display: block; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.svc-card__link { display: block; margin-top: auto; padding-top: .5rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
@media (hover: hover) { .svc-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(28,42,31,.45); } .svc-card:hover .svc-card__link { color: var(--green-deep); } }
.svc-card:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
/* Show the full photo (no crop); tall photos are limited in height instead */
.svc-hero__img { max-height: none; justify-self: center; width: fit-content; max-width: 100%; }
.svc-hero__img img { width: auto; max-width: 100%; max-height: 620px; }

/* See you soon: clearer step titles, aligned short texts */
.seeyou-steps h3 { font-family: var(--sans); font-weight: 600; font-size: 1.3rem; line-height: 1.3; letter-spacing: 0; color: var(--green-deep); margin: 0 0 .6rem; }
.seeyou-steps p { font-size: 1.12rem; line-height: 1.6; }
@media (min-width: 900px) {
  .seeyou-steps li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
  .seeyou-steps { grid-auto-flow: column; grid-template-rows: auto auto auto 1fr; }
}

/* Hero hair: larger cut-outs on a clean light halo, morph-style crossfade */
.hero-hair__stage { -webkit-mask-image: none; mask-image: none; isolation: isolate; }
.hero-hair__stage::before {
  content: ""; position: absolute; inset: 4% -8% -2%; z-index: -1; border-radius: 50% 50% 46% 46% / 40% 40% 30% 30%;
  background: radial-gradient(ellipse at 50% 45%, rgba(250,248,243,.97) 0%, rgba(250,248,243,.9) 55%, rgba(250,248,243,0) 72%);
}
.hero-hair__stage img {
  filter: blur(10px) drop-shadow(0 12px 18px rgba(28,42,31,.12)); transform: scale(1.03);
  transition: opacity 1800ms ease-in-out, filter 1800ms ease-in-out, transform 1800ms ease-in-out;
}
.hero-hair__stage img.is-active { filter: blur(0) drop-shadow(0 12px 18px rgba(28,42,31,.12)); transform: scale(1); }
.hero-hair { width: min(300px, 78%); }
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1fr minmax(240px, 330px); }
  .hero-hair { width: 100%; }
}
.hero-hair__stage img { -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
@media (min-width: 768px) { .hero__inner { grid-template-columns: 1fr minmax(240px, 310px); } }
/* Seamless loop: steady base layer underneath, pure crossfade with no zoom so nothing jumps */
.hero-hair__stage img { transform: none; filter: drop-shadow(0 12px 18px rgba(28,42,31,.12)); transition: opacity 2200ms cubic-bezier(.45,0,.55,1); }
.hero-hair__stage img.is-active { transform: none; filter: drop-shadow(0 12px 18px rgba(28,42,31,.12)); }
.hero-hair__stage img.hero-hair__base { opacity: 1; filter: none; }

/* ============= "Powered by digitalMaker" credit (same lockup and card as genio.shop) ============= */
.foot-made { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 2px; cursor: pointer; font: inherit; color: var(--ink); opacity: .85; transition: opacity .18s; }
.foot-made:hover, .foot-made:focus-visible { opacity: 1; }
.foot-made-label { font-family: Inter, system-ui, sans-serif; font-size: 11px; letter-spacing: .01em; color: var(--ink-soft); }
.foot-made-lockup { display: inline-flex; align-items: center; gap: 4px; }
.foot-made-lockup svg { width: 14px; height: 14px; display: block; }
.wordmark { font-size: 13px; line-height: 1; letter-spacing: 0; }
.dm-digi, .dm-tal, .dm-maker { font-family: Inter, system-ui, sans-serif; letter-spacing: -.085em; }
.dm-digi, .dm-tal { font-weight: 400; color: #081E20; }
.dm-tal { margin-left: .03em; }
.dm-maker { font-weight: 700; color: #49A2D4; letter-spacing: -.03em; margin-left: .06em; }
.footer-bottom { align-items: center; }

.dm-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 60; width: min(440px, 100%); height: 210px;
  transform: translateX(-50%); overflow: hidden; pointer-events: none; border-radius: 6px 6px 0 0;
  font-family: Inter, system-ui, sans-serif; color: #081E20;
}
.dm-sheet__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 16px 22px; text-align: center;
  background-color: #fff;
  background-image:
    linear-gradient(rgba(56,169,230,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,169,230,.10) 1px, transparent 1px),
    linear-gradient(rgba(56,169,230,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,169,230,.05) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  box-shadow: inset 2px 0 0 #fff, inset -2px 0 0 #fff, inset 0 2px 0 #fff, 0 -10px 30px rgba(8,30,32,.12);
  transform: translateY(100%); transition: transform .9s cubic-bezier(.65,0,.35,1);
}
.dm-open .dm-sheet { pointer-events: auto; }
.dm-open .dm-sheet__body { transform: translateY(0); }
.dm-sheet__brand { display: inline-flex; align-items: center; gap: 6px; }
.dm-sheet__brand svg { width: 26px; height: 26px; border-radius: 6px; }
.dm-sheet__brand .wordmark { font-size: 22px; }
.dm-sheet__lead { margin: 0; font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #081E20; }
.dm-sheet__lead b { color: #5d9bd3; font-weight: 700; }
.dm-sheet__slog { font-size: 8px; letter-spacing: .14em; font-weight: 600; color: rgba(8,30,32,.75); white-space: nowrap; }
.dm-sheet__slog b { color: #5d9bd3; font-weight: 600; }
.dm-sheet__cta { display: inline-flex; padding: 6px 15px; border-radius: 6px; background: #5d9bd3; color: #fff !important; text-decoration: none !important; font-size: 11px; font-weight: 600; letter-spacing: .04em; transition: filter .15s; }
.dm-sheet__cta:hover { filter: brightness(1.1); }
.dm-sheet__x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dm-sheet__x svg { width: 18px; height: 18px; fill: #5d9bd3; }
@media (max-width: 767px) { .dm-sheet { bottom: var(--book-bar-h, 64px); } }
@media (prefers-reduced-motion: reduce) { .dm-sheet__body { transition-duration: 1ms; } }
/* credit on the green footer: light lockup */
.site-footer .foot-made-label { color: rgba(255,255,255,.75); }
.site-footer .dm-digi, .site-footer .dm-tal { color: #fff; }
.site-footer .dm-maker { color: #8fd0f0; }
.site-footer .foot-made { text-decoration: none; }
.dm-sheet__body { box-shadow: inset 2px 0 0 #fff, inset -2px 0 0 #fff, inset 0 2px 0 #fff; }
.dm-open .dm-sheet { box-shadow: 0 -10px 30px rgba(8,30,32,.14); }
/* Service facts: label and value on aligned columns, labels in brand green */
.svc-facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .6rem; margin: 1.5rem 0; }
.svc-fact { display: contents; }
.svc-fact span { color: var(--green-deep); font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; align-self: baseline; }
.svc-fact strong { color: var(--ink); font-weight: 500; font-size: 1.1rem; align-self: baseline; }

/* ============= LONG HAIR LOOKS (grid of style inspirations) ============= */
.looks-hero { padding-bottom: 0; }
.looks-hero h1 { margin: .4rem 0 1rem; }
.looks-hero h1 em { color: var(--green-deep); }
.looks-hero .lede { max-width: 640px; }
.looks-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 768px) { .looks-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .looks-grid { grid-template-columns: repeat(4, 1fr); } }
.look { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.look:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,42,31,.10); }
.look__img { margin: 0; aspect-ratio: 636 / 760; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #fbf9f5 0%, #efe9df 75%); }
.look__img img { display: block; width: 100%; height: auto; transform: translateY(-2%); }
.look__tag { margin: .9rem 1rem 0; font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.look__name { margin: .25rem 1rem .35rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.15; color: var(--green-deep); }
.look__desc { margin: 0 1rem; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); flex: 1; }
.look__link { margin: .75rem 1rem 1rem; font-family: var(--sans); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); text-decoration: none; }
.look__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 480px) { .look__desc { font-size: .88rem; } .look__name { font-size: 1.15rem; } }
.looks-note { margin-top: 1.5rem; font-size: .85rem; color: var(--ink-mute); text-align: center; }
.look__img { aspect-ratio: 636 / 900; }
.look__img img { transform: none; }
/* Service cards: smaller photos — side-by-side rows on phones, 3 columns on tablets */
@media (max-width: 639px) {
  .svc-card { flex-direction: row; align-items: stretch; }
  .svc-card__img { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
  .svc-card__body { padding: .9rem 1rem 1rem; }
  .svc-card__title { font-size: 1.3rem; }
  .svc-card__text { font-size: .92rem; }
}
@media (min-width: 640px) and (max-width: 1099px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } .svc-card__img { aspect-ratio: 3 / 2; } }
@media (min-width: 1100px) { .svc-card__img { aspect-ratio: 1 / 1; } }
/* six menu items: keep them on one line; between 900 and 1180px use the mobile menu */
.nav-links a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1179px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
.svc-card__img { position: relative; overflow: hidden; }
.svc-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Article titles always in brand green, wherever the cards appear */
a.article-card h3, .article-card h3, .grid .article-card h3 { color: var(--green-deep) !important; }

/* ============= FACTS FOR AI ASSISTANTS ============= */
.ai-wrap { max-width: 820px; }
.ai-wrap h1 em { color: var(--green-deep); }
.ai-wrap h2 { margin: 2.5rem 0 1rem; color: var(--green-deep); }
.ai-facts { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ai-facts th, .ai-facts td { text-align: left; vertical-align: top; padding: .7rem .75rem; border-bottom: 1px solid var(--line); }
.ai-facts th { width: 32%; font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.ai-facts tr:nth-child(odd) { background: rgba(79,107,69,.05); }
.ai-facts a, .ai-list a { color: var(--green-deep); }
.ai-list { padding-left: 1.1rem; line-height: 1.6; }
.ai-list li { margin-bottom: .6rem; }
.ai-faq h3 { font-size: 1.25rem; margin: 1.25rem 0 .35rem; color: var(--ink); }
.ai-faq p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.ai-note { margin-top: 2.5rem; font-size: .9rem; color: var(--ink-mute); }
@media (max-width: 560px) { .ai-facts th, .ai-facts td { display: block; width: auto; border: 0; padding: .2rem .5rem; } .ai-facts td { padding-bottom: .8rem; border-bottom: 1px solid var(--line); } }
.footer-ai { font-size: .75rem; letter-spacing: .06em; }
/* digitalMaker credit: its own centered row, larger, like genio.shop */
.footer-bottom .foot-made { flex-basis: 100%; justify-content: center; margin-top: .9rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14); opacity: .95; }
.footer-bottom .foot-made-label { font-size: 13px; }
.footer-bottom .foot-made-lockup svg { width: 20px; height: 20px; }
.footer-bottom .wordmark { font-size: 18px; }
/* Same-size cards everywhere: every row in a card grid takes the height of the tallest card */
.review-grid, .grid--3, .looks-grid, .svc-cards, .seeyou-steps, .svc-benefits, .method-steps { grid-auto-rows: 1fr; }
.review-card, .article-card, .look, .svc-card { height: 100%; }

/* ============= LIVE GOOGLE REVIEWS ============= */
.greviews__summary { display: inline-flex; align-items: center; gap: .6rem; margin-top: .75rem; font-size: 1.05rem; color: var(--ink-soft); }
.greviews__g { width: 26px; height: 26px; }
.greviews__rating { font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--ink); line-height: 1; }
.greviews__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }
.greviews__note { text-align: center; font-size: .8rem; color: var(--ink-mute); margin-top: 1rem; }

/* Header logo + name: 10px further from the left edge */
.site-header .brand { margin-left: 10px; }
.site-header .brand small { white-space: nowrap; }   /* keep "Aventura · Miami" on one line on phones */

/* ============= MOBILE (<768px) — header: menu · logo centred · phone, aligned to the hero panel;
   hairstyle photos first in the hero ============= */
@media (max-width: 767px) {
  .site-header .nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    justify-content: normal;
    column-gap: 8px;
    align-items: center;
    padding-left: 20px;              /* same 20px edges as the hero panel below */
    padding-right: 20px;
  }
  .site-header .nav > nav { display: none; }
  .site-header .nav-actions { display: contents; }
  .site-header .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  .site-header .nav-phone { grid-column: 3; grid-row: 1; justify-self: end; }
  .site-header .brand .brand-mark { width: 44px; height: 44px; }   /* same size as the phone circle */
  .site-header .brand { grid-column: 2; grid-row: 1; justify-self: center; margin-left: 0; gap: .6rem; }

  /* photos first, then the two booking buttons, then the headline and text */
  .hero__inner { display: flex; flex-direction: column; }
  .hero__inner > .reveal { display: contents; }
  .hero__inner .hero-hair { order: -2; margin: 0 auto .75rem; width: min(200px, 56%); }
  .hero__inner .btn-row { order: -1; margin: 0 0 1.5rem; }
  .hero__inner .btn-row .btn--primary { display: none; }   /* BOOK NOW is already in the fixed bottom bar */
}
/* very narrow phones (iPhone SE): slightly smaller logo so the three items fit */
@media (max-width: 374px) {
  .site-header .brand { gap: .45rem; }
  .site-header .brand-wonderlong { font-size: 1.1rem; }
  .site-header .brand small { font-size: .62rem; letter-spacing: .22em; }
}

/* Elements sliding in from the right (.reveal-right) must not widen the page on phones */
html, body { overflow-x: clip; }
/* Bottom booking bar: same 20px side edges as the header and the hero panel */
@media (max-width: 767px) {
  .book-bar { padding-left: 20px; padding-right: 20px; }
}

/* See you soon: map + its three buttons on the left, address and hours top-right */
.seeyou-mapcol { display: flex; flex-direction: column; gap: 1rem; }
.seeyou-actions--map { margin: 0; max-width: none; }
.seeyou-info address { margin-bottom: 1.75rem; }
/* buttons in a row only when the map column is wide enough; otherwise stacked under the map */
.seeyou-mapcol { container-type: inline-size; }
@container (min-width: 560px) {
  .seeyou-actions--map { grid-template-columns: repeat(3, 1fr); }
  .seeyou-actions--map .btn { padding-left: .4rem; padding-right: .4rem; font-size: .72rem; letter-spacing: .08em; }
}

/* Map buttons with their icons */
.btn .btn-ico { width: 1.15em; height: 1.15em; flex-shrink: 0; margin-right: .55em; }
.seeyou-actions--map .btn { display: inline-flex; align-items: center; justify-content: center; }

/* Google map: crop the top strip where Google draws its white address card
   (the buttons below already open Google / Apple Maps). Logo and terms at the bottom stay visible. */
.seeyou-map { position: relative; overflow: hidden; }
.seeyou-map iframe { position: relative; top: -150px; height: calc(100% + 150px) !important; }
/* home: the iframe sits in a crop box that takes over size, corners and shadow */
.visit-map .map-crop {
  position: relative; overflow: hidden; flex: 1 1 auto; min-height: 480px;
  border-radius: 8px; box-shadow: 0 20px 50px -25px rgba(40, 60, 40, .3);
}
.visit-map .map-crop iframe {
  position: absolute; left: 0; top: -150px; width: 100%; height: calc(100% + 150px);
  min-height: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto;
}
@media (max-width: 899px) { .visit-map .map-crop { aspect-ratio: 4 / 3; min-height: 0; } }

/* Opening hours: larger, airier times (am/pm in lowercase in the markup) */
.hours li span:last-child,
.footer-hours li span:last-child { font-size: 1.2rem; letter-spacing: .02em; word-spacing: .08em; }
/* the three map buttons share the map width: tighter tracking so the labels always fit */
.seeyou-actions--map .btn { letter-spacing: .1em; white-space: nowrap; }
.seeyou-actions--map .btn .btn-ico { margin-right: .45em; }

/* See you soon: no address block (the title above the map already says it) — hours start at the top */
.seeyou-info .seeyou-hours-title { margin-top: 0; }

/* ============= BUTTONS — softer corners, green gradient (logo green → lighter), icons ============= */
.btn { border-radius: 8px; }
.btn--primary {
  background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%);
  border-color: #46603e;
}
.btn--primary:hover { background: linear-gradient(135deg, #5d7a52 0%, #3f5838 100%); border-color: #3f5838; }
.btn .btn-ico { margin-right: 0; }   /* .btn already spaces icon and label with its gap */

/* HERO — hairstyle name above the photo, nothing below it */
.hero-hair { display: flex; flex-direction: column; }
.hero-hair figcaption { order: -1; margin: 0 0 .6rem; }
/* hero: keep the two buttons side by side now that they carry icons */
.hero .btn-row { gap: .65rem; }
.hero .btn-row .btn { padding-left: 1.1rem; padding-right: 1.1rem; }
/* bottom booking bar: same rounded corners and green gradient as the other buttons */
.book-bar a { border-radius: 8px; }
.book-bar__book { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%); border-color: #46603e; }

/* ============= LANGUAGE SWITCHER (EN · ES · PT · IT) ============= */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
.lang-switch a {
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  padding: .32rem .55rem; border-radius: 999px; color: var(--on-green, #fff); text-decoration: none; line-height: 1;
  opacity: .78; transition: background .2s, opacity .2s;
}
.lang-switch a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.lang-switch a.is-active { opacity: 1; background: var(--on-green, #fff); color: var(--brand-green, #4f6b45); }
.lang-switch a[aria-disabled="true"] { cursor: default; }
/* header: desktop only — on phones it lives in the menu */
.lang-switch--header { display: none; }
@media (min-width: 900px) { .lang-switch--header { display: inline-flex; } }
.lang-switch-item { list-style: none; padding-bottom: .5rem; }
.lang-switch--menu a { font-size: .85rem; padding: .5rem .85rem; }
/* inside the mobile menu the menu-link styles must not reach the language pills */
.site-header .nav-mobile .lang-switch a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem;
  font-family: var(--sans); font-size: .85rem; font-weight: 600; letter-spacing: .12em;
  line-height: 1; padding: .55rem .8rem; border: 0;
}
.site-header .nav-mobile .lang-switch a.is-active { color: var(--brand-green, #4f6b45); }
.site-header .nav-mobile .lang-switch a::after { display: none; }
/* round flags in the language switcher */
.lang-switch a { display: inline-flex; align-items: center; gap: .35rem; }
.lang-flag { width: 18px; height: 18px; border-radius: 50%; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.lang-switch a.is-active .lang-flag { box-shadow: 0 0 0 2px var(--brand-green, #4f6b45); }
.site-header .nav-mobile .lang-switch .lang-flag { width: 22px; height: 22px; }

/* Buttons without the darker outline; "Discover the Method" & co. on solid white so the photo doesn't show through */
.btn--primary, .btn--primary:hover, .book-bar__book { border-color: transparent; }
.hero .btn--ghost {
  background: #fff; border-color: transparent; color: var(--ink);
  box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 6px 18px -8px rgba(31, 42, 34, .25);
}
.hero .btn--ghost:hover { background: var(--ink); color: var(--bg); }
/* header Book Now: icon + label */
.site-header .nav-actions > .btn .btn-ico { width: 1.05em; height: 1.05em; }

/* White buttons: same pattern as the green ones — soft gradient white → warm light grey, no dark outline */
:root { --btn-white-grad: linear-gradient(135deg, #ffffff 0%, #f6f5f1 55%, #e9e7e1 100%); }
.hero .btn--ghost,
.site-header .nav-actions .btn--primary,
.site-header .nav-mobile .btn--gold,
.book-bar__call {
  background: var(--btn-white-grad);
  border-color: transparent;
}
.book-bar__call { box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 6px 18px -8px rgba(31, 42, 34, .25); }
.site-header .nav-actions .btn--primary:hover { background: var(--accent); border-color: transparent; }
.hero .btn--ghost:hover { background: var(--ink); color: var(--bg); }
.book-bar .book-bar__ico { width: 18px; height: 18px; flex-shrink: 0; }

/* ============= MADE IN ITALY — tricolour bar between "Aventura" and "Miami" in the logo ============= */
.it-tricolore {
  display: inline-block; width: 1.9em; height: .26em; margin: 0 .3em; vertical-align: .22em;
  border-radius: 1px;
  background: linear-gradient(90deg, #009246 0 33.34%, #ffffff 33.34% 66.67%, #ce2b37 66.67% 100%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12);
}
.site-header .it-tricolore, .site-footer .it-tricolore { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .35); }
/* hero (desktop): smaller hairstyle photo so it matches the text height — no empty space above the eyebrow */
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: 1fr minmax(170px, 205px); align-items: center; }
}
/* hero (desktop): text starts at the top of the panel; more air between the paragraph and the buttons */
@media (min-width: 768px) {
  .hero__inner > .reveal { align-self: start; }
  .hero .lede { margin-bottom: 2.25rem; }
}
.it-tricolore { width: 2.3em; height: .34em; vertical-align: .18em; }

/* ============= BRANDS WE CARRY ============= */
.brands__lede { margin: 0 auto; max-width: 56ch; }
.brands__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.brands__card {
  background: #fff; border-radius: 8px; padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(31, 42, 34, .06), 0 14px 34px -22px rgba(31, 42, 34, .35);
  display: flex; flex-direction: column; gap: .75rem; text-align: center; align-items: center;
}
.brands__logo { height: 84px; display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: .25rem; }
.brands__logo img { max-height: 64px; width: auto; }
.brands__mark { width: 56px; height: 56px; color: var(--ink); }
.brands__wl { display: inline-flex; flex-direction: column; align-items: stretch; text-align: left; line-height: 1; gap: 6px; }
.brands__wl-name { font-family: var(--logo); font-size: 1.55rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.brands__wl-sub { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--green-deep); display: inline-flex; align-items: center; justify-content: space-between; }
.brands__wl-sub .it-tricolore { margin: 0; }
.brands__logo--tbd { font-family: var(--sans); color: var(--ink-mute); font-size: .9rem; border: 1px dashed var(--line); border-radius: 8px; padding: 0 1.25rem; }
.brands__card h3 { font-size: 1.35rem; margin: 0; }
.brands__card p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

/* marquee: no white line over the photo; brand logos travel with the words */
.marquee { border-top: 0; }
.marquee__logo { display: inline-flex; align-items: center; }
.marquee__logo img { height: 1.45em; width: auto; filter: brightness(0) invert(1); opacity: .95; }
.marquee__logo--wl { font-family: var(--logo); letter-spacing: .22em; text-transform: uppercase; gap: .6em; }
.marquee__logo--wl small { font-family: var(--sans); font-size: .62em; font-weight: 600; letter-spacing: .32em; display: inline-flex; align-items: center; gap: .5em; }
.marquee__logo--wl .it-tricolore { margin: 0; box-shadow: 0 0 0 .5px rgba(255,255,255,.4); }

/* brand card: the flag sits right after "ITALIA", inside the wordmark width */
.brands__wl-sub { justify-content: flex-start; gap: .55em; }
.marquee__logo img { height: 1.9em; }

/* hero (desktop): text column no wider than the button row → narrower panel, photo moves left */
@media (min-width: 768px) {
  .hero__inner { width: fit-content; max-width: 100%; grid-template-columns: auto minmax(170px, 205px); }
  .hero__inner > .reveal { width: min-content; min-width: 0; }
  .hero__inner > .reveal .btn-row { width: max-content; flex-wrap: nowrap; }
  .hero h1, .hero .lede { max-width: none !important; }
}

/* ============= BRANDS STRIP under the marquee (clickable → products) ============= */
.brandstrip { background: var(--bg); border-bottom: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem) 0; }
.brandstrip__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.brandstrip__label { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-mute); }
.brandstrip__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); }
.brandstrip__item { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; opacity: .85; transition: opacity .2s, transform .2s; }
.brandstrip__item:hover { opacity: 1; transform: translateY(-2px); }
.brandstrip__item img { height: clamp(40px, 5vw, 54px); width: auto; }
.brandstrip__mark { width: clamp(42px, 5vw, 52px); height: clamp(42px, 5vw, 52px); color: var(--ink); }
.brandstrip__wl { display: inline-flex; flex-direction: column; gap: 6px; line-height: 1; }
.brandstrip__wl > span { font-family: var(--logo); font-size: clamp(1.2rem, 2.2vw, 1.55rem); letter-spacing: .22em; text-transform: uppercase; }
.brandstrip__wl small { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: var(--green-deep); display: inline-flex; align-items: center; gap: .55em; }
.brandstrip__wl .it-tricolore { margin: 0; }
.brandstrip__item--tbd { font-family: var(--sans); font-size: .9rem; color: var(--ink-mute); border: 1px dashed var(--line); border-radius: 8px; padding: .9rem 1.25rem; }

/* hero (desktop): buttons stacked — Discover the Method first, Book Online below — taller panel, bigger photo */
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: auto minmax(220px, 290px); }
  .hero__inner > .reveal { width: 26rem; }
  .hero__inner > .reveal .btn-row { width: 100%; flex-direction: column; align-items: stretch; gap: .75rem; }
  .hero__inner > .reveal .btn-row .btn--ghost { order: -1; }
  .hero__inner > .reveal .btn-row .btn { justify-content: center; }
}
/* hero (desktop): both buttons as wide as "Discover the Method", aligned left */
@media (min-width: 768px) {
  .hero__inner > .reveal .btn-row { display: grid; grid-template-columns: max-content; justify-content: start; width: auto; }
  .hero__inner > .reveal .btn-row .btn { width: 100%; padding-left: 1.6rem; padding-right: 1.6rem; }
}
/* brand logos with the same visual height (Kérastase = Wonderlong wordmark block) */
.brandstrip__item img { height: 42px; }
.brands__logo img { max-height: 46px; }
/* two brands for now: centre them nicely */
.brands__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 420px)); justify-content: center; }

/* Header logo: "Aventura ▬ Milano", and a small light "Miami" under Aventura */
.site-header .brand .brand-city {
  display: block; font-family: var(--sans); font-size: .5rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; line-height: 1;
  color: rgba(255, 255, 255, .55); margin-top: 1px;
}
@media (max-width: 374px) { .site-header .brand small { letter-spacing: .14em; } }
@media (max-width: 374px) {
  .site-header .brand small { font-size: .56rem; letter-spacing: .12em; }
  .site-header .brand .it-tricolore { width: 1.6em; margin: 0 .2em; }
  .site-header .brand-wonderlong { font-size: 1rem; }
}
@media (max-width: 359px) { .site-header .brand .brand-mark { width: 38px; height: 38px; } }
.brands__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Wonderlong Italia wordmark: "ITALIA ▬ MILANO" spread to the width of WONDERLONG */
.brandstrip__wl small, .brands__wl-sub { justify-content: space-between; letter-spacing: .3em; gap: .4em; }
/* brand cards: names in bold, texts kept to the same three lines */
.brands__card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; }

/* Italian reviews: tucked behind a small button under the Google reviews (US first) */
.it-reviews { padding: 0 0 clamp(2.5rem, 6vw, 4rem); text-align: center; }
.it-reviews__details > summary { list-style: none; cursor: pointer; display: inline-flex; font-size: .72rem; padding: .7rem 1.2rem; }
.it-reviews__details > summary::-webkit-details-marker { display: none; }
.it-reviews__details > summary::after { content: "▾"; margin-left: .6em; transition: transform .2s; }
.it-reviews__details[open] > summary::after { transform: rotate(180deg); }
.it-reviews__body { text-align: left; margin-top: clamp(2rem, 4vw, 3rem); }
.it-reviews__body .section-head { text-align: center; }

/* Visit us: the salon photo spans exactly the same width as the two boxes below (info + map) */
.visit-photo { max-width: none; width: 100%; }

/* ============= OUR WORK — "Some examples" checkerboard ============= */
.work-hero { padding-bottom: 0; }
.work-lede { max-width: 58ch; margin: 0 auto 1.75rem; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
@media (min-width: 700px)  { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .work-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (min-width: 1400px) { .work-grid { grid-template-columns: repeat(5, 1fr); } }
.work-card { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-alt); border-radius: 4px; }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.work-card:hover img { transform: scale(1.04); }
.work-lightbox { padding: 0; border: 0; background: transparent; max-width: min(92vw, 900px); max-height: 92vh; }
.work-lightbox::backdrop { background: rgba(20, 28, 22, .88); }
.work-lightbox img { display: block; max-width: 100%; max-height: 92vh; border-radius: 6px; }
.work-lightbox__close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ig-head .ig-all { margin-left: auto; margin-right: 1.5rem; font-weight: 600; color: var(--green-deep); }
.svc-how__video { max-width: 340px; }
.svc-how__video video { display: block; width: 100%; height: auto; background: #111; }

/* All page buttons match the hero: green gradient + scissors / white gradient + icon, no outline */
main .btn--ghost {
  background: var(--btn-white-grad); border-color: transparent; color: var(--ink);
  box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 6px 18px -8px rgba(31, 42, 34, .25);
}
main .btn--ghost:hover { background: var(--ink); color: var(--bg); }
main .btn--primary { box-shadow: 0 1px 2px rgba(31, 42, 34, .1), 0 8px 20px -10px rgba(64, 90, 56, .55); }
main .btn-row { gap: .65rem; }
main .btn-row .btn { padding-left: 1.1rem; padding-right: 1.1rem; }

/* "Other services": white pill buttons, same family as the hero buttons */
.svc-more { margin-top: 3rem; padding-top: 2rem; }
.svc-more h3 { font-size: 1.5rem; margin-bottom: 0; }
.svc-more ul { gap: .65rem; margin-top: 1.1rem; }
.svc-more a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem 1.15rem; border-radius: 8px;
  background: var(--btn-white-grad); color: var(--green-deep);
  font-family: var(--sans); font-size: .95rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 6px 18px -8px rgba(31, 42, 34, .25);
  transition: background .2s, color .2s;
}
.svc-more a:hover { background: var(--brand-green, #4f6b45); color: #fff; }
.site-footer .footer-cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.site-footer .footer-cta .btn .btn-ico { width: 1.05em; height: 1.05em; }
/* service pages: every section title plays with one italic green word, like the page title */
main .section h2 em { font-style: italic; color: var(--green-deep); }
/* Visit: address, hours and map first, salon photo below */
#visit-section .visit-photo { margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: 0; }

/* Instagram: icon buttons instead of the @handle text */
.ig-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; color: var(--ink); text-decoration: none;
  background: var(--btn-white-grad);
  box-shadow: 0 1px 2px rgba(31, 42, 34, .08), 0 6px 18px -8px rgba(31, 42, 34, .25);
  transition: background .2s, color .2s;
}
.ig-btn:hover { background: var(--brand-green, #4f6b45); color: #fff; }
.ig-btn .ig-icon { width: 22px; height: 22px; }
.ig-head .ig-btn::after, .ig-head .ig-btn { border-bottom: 0; }
.footer-ig { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid currentColor; opacity: .9; }
.footer-ig:hover { opacity: 1; background: rgba(255,255,255,.12); }
.footer-ig .ig-icon { width: 20px; height: 20px; }
/* carousel header: "See all styles" is a real button, like the hero ones */
.ig-head a.btn {
  font-family: var(--sans); letter-spacing: .14em; color: #fff;
  border-bottom: 0; padding: .85rem 1.2rem; gap: .5em;
}
.ig-head a.ig-btn { border-bottom: 0; padding: 0; }
.ig-head .ig-all { margin-left: auto; margin-right: .65rem; }
.ig-head a.btn .btn-ico { width: 1.05em; height: 1.05em; }
.ig-card { cursor: pointer; }
/* Instagram square = same height as "See all styles", same outline and shadow, aligned */
.ig-head .ig-btn { width: 50px; height: 50px; border: 1px solid #46603e; color: var(--green-deep);
  box-shadow: 0 1px 2px rgba(31, 42, 34, .1), 0 8px 20px -10px rgba(64, 90, 56, .55); }
.ig-head .ig-btn .ig-icon { width: 24px; height: 24px; }
.ig-head .ig-all { align-self: flex-end; }
.ig-head .ig-btn { align-self: flex-end; }
.work-hero h1 em { font-style: italic; color: var(--green-deep); }

/* ============= VIDEOS — page + cards (same family as the service cards) ============= */
.vcards { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, 1fr); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .vcards { grid-template-columns: repeat(4, 1fr); } }
.vcard .svc-card__img { position: relative; aspect-ratio: 4 / 5; }
.vcard .svc-card__img img { object-position: center 30%; }
.vcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--brand-green, #4f6b45);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.45); transition: transform .2s;
}
.vcard__play svg { width: 22px; height: 22px; margin-left: 3px; }
.vcard:hover .vcard__play { transform: translate(-50%, -50%) scale(1.08); }
.vcard.is-active { outline: 2px solid var(--brand-green, #4f6b45); outline-offset: 2px; }
.vcards--mini { gap: .55rem; margin-top: .75rem; grid-template-columns: repeat(4, 1fr); }
.vcard--mini .svc-card__body { padding: .55rem .6rem .65rem; gap: .25rem; }
.vcard--mini .svc-card__title { font-size: .95rem; line-height: 1.15; }
.vcard--mini .svc-card__link { font-size: .62rem; }
.vcard--mini .vcard__play { width: 34px; height: 34px; }
.vcard--mini .vcard__play svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .vcards--mini { grid-template-columns: repeat(2, 1fr); } }
.story-videos { margin-top: 1.75rem; }
.story-videos__label { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); text-decoration: none; }
.story-videos__label svg { width: 24px; height: 24px; }

.videos-hero__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.videos-hero__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 3px #fff, 0 10px 24px -12px rgba(28,42,31,.5); flex-shrink: 0; }
.videos-hero h1 { margin: .35rem 0 0; }
.videos-hero h1 em { font-style: italic; color: var(--green-deep); }
.vplayer { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .vplayer { grid-template-columns: minmax(280px, 400px) 1fr; } }
.vplayer__screen { border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 30px 60px -30px rgba(28,42,31,.5); max-width: 400px; width: 100%; justify-self: center; }
.vplayer__screen video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; background: #111; }
.vplayer__info h2 { margin: .4rem 0 1rem; }
.vplayer__note { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.journal-videos { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.journal-videos .vcards { margin-top: 1rem; }

/* Cards: on hover only the photo zooms inside its frame — the card itself stays still */
@media (hover: hover) {
  .svc-card:hover, .article-card:hover { transform: none; }
  .article-card:hover h3 { text-decoration: none; }
}
.svc-card__img { overflow: hidden; }
.svc-card__img img, .article-card__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-card__img img, .article-card:hover .article-card__media img { transform: scale(1.06); }
.article-card__media { overflow: hidden; }
/* video cards: tag + duration like the articles */
.vcard__meta { display: flex; margin-bottom: .2rem; }
/* video player: frame follows the real video shape — no black side bars */
.vplayer__screen { background: transparent; }
.vplayer__screen video { aspect-ratio: auto; object-fit: initial; background: transparent; }
.home-pl-videos { margin-top: 2rem; }
/* card meta: tag pill on the left edge, read time / duration on the right edge */
.article-card__meta { justify-content: space-between; }
.vcard__meta { padding: 0 !important; justify-content: space-between; align-items: center; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.vcard__meta span:first-child { margin-left: 0; }
.article__video { margin: 2rem auto; max-width: 340px; text-align: center; }
.article__video video { width: 100%; height: auto; border-radius: 10px; display: block; box-shadow: 0 20px 40px -24px rgba(28,42,31,.5); }
.article__video figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-mute); }
/* Home Visit v2: hours full width, Call under the hours, address + reservations below; map buttons side by side */
.visit-info.visit-info--v2 { display: block; }
.visit-info--v2 .hours { width: 100%; }
.visit-call { margin: 1.25rem 0 1.75rem; }
.visit-call .btn { padding-left: 1.2rem; padding-right: 1.2rem; }
.visit-info__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.visit-info__row .visit-block p { font-size: 1.05rem; }
@media (max-width: 520px) { .visit-info__row { grid-template-columns: 1fr; } }
#visit-section .visit-map__btns { display: flex !important; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
#visit-section .visit-map__btns .btn { width: auto; flex: 1 1 0; min-width: 0; padding-left: .9rem; padding-right: .9rem; font-size: .7rem; }
.visit-info--v2 .visit-block { grid-area: auto !important; align-self: start !important; }
.visit-info__row { grid-template-areas: none !important; }
/* Home Journal header: title on one line left, text + button right */
.journal-head { display: grid; gap: 1.25rem 3rem; align-items: end; max-width: none; text-align: left; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 960px) { .journal-head { grid-template-columns: auto minmax(0, 1fr); } }
.journal-head h2 { margin: .4rem 0 0; white-space: nowrap; font-size: clamp(1.8rem, 3.4vw, 3rem); }
@media (max-width: 600px) { .journal-head h2 { white-space: normal; } }
.journal-head h2 em { font-style: italic; color: var(--green-deep); }
.journal-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.journal-head__side .lede { margin: 0; font-size: 1.02rem; }
/* Visit: Call has exactly the same size/style as the two map buttons; address as large as the phone number */
#visit-section .visit-call .btn, #visit-section .visit-map__btns .btn { font-size: .7rem; padding: .95rem .9rem; border-radius: 8px; gap: .6rem; }
#visit-section .visit-call .btn { width: calc(50% - .3rem); }
.visit-info__row .visit-block p, .visit-info__row .visit-block p a { font-family: var(--serif); font-size: 1.35rem !important; line-height: 1.35; }
.visit-info__row .visit-block p + p { font-family: var(--serif); font-size: .95rem !important; }
.look { scroll-margin-top: 110px; }
.look:target { outline: 2px solid var(--brand-green, #4f6b45); outline-offset: 4px; border-radius: 10px; }
.vcards--mini { grid-template-columns: repeat(2, minmax(0, 170px)); }
/* Journal: 3 video cards, same size as the article cards below */
.vcards--journal { grid-template-columns: 1fr; }
@media (min-width: 640px) { .vcards--journal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .vcards--journal { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap, 2rem); } }
.videos-page .vcards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vcards--journal { gap: clamp(1.5rem, 3vw, 2.5rem) !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
.vcards--journal .vcard .svc-card__img { aspect-ratio: 4 / 5; }
/* Reviews: one row — Google (left) · Leave a review with 5 stars (centre) · Italy (right) */
.greviews__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .65rem; }
.greviews__write { flex-direction: column; gap: .2rem; padding-top: .7rem; padding-bottom: .75rem; }
.greviews__write-stars { color: #f5c542; letter-spacing: .12em; font-size: .95rem; line-height: 1; }
#it-reviews-open .it-tricolore { margin: 0 .1em 0 0; }
/* the old Italy toggle is driven by the button above */
.it-reviews__details > summary { display: none !important; }
.it-reviews { padding-top: 0; }
/* Home Pierluigi: Story + Journal buttons stacked on the left, his videos larger on the right */
.pl-actions { display: grid; gap: 1.25rem; align-items: start; margin-top: 1.75rem; }
@media (min-width: 760px) { .pl-actions { grid-template-columns: auto 1fr; gap: 1.75rem; } }
.pl-actions__btns { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; }
.pl-actions__btns .btn { justify-content: flex-start; }
.pl-actions .home-pl-videos { margin-top: 0; }
.pl-actions .vcards--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
.pl-actions .vcard--mini .svc-card__title { font-size: 1.05rem; }
.pl-actions .vcard--mini .vcard__play { width: 44px; height: 44px; }
@media (min-width: 760px) { .pl-actions { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); } }
.pl-actions .vcards--mini { max-width: none; gap: .8rem; }
.pl-actions__btns .btn { width: 100%; }
@media (min-width: 760px) { .pl-actions { grid-template-columns: max-content minmax(0, 1fr); gap: 1.25rem; } }
.pl-actions__btns .btn { padding-left: 1rem; padding-right: 1rem; letter-spacing: .14em; }
/* Reviews row: Miami at the left edge, Leave a review centred, Italy at the right edge, same height */
@media (min-width: 760px) {
  .greviews__actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; }
  .greviews__actions > :first-child { justify-self: start; }
  .greviews__actions > :last-child { justify-self: end; }
  .greviews__actions .btn { min-width: 260px; }
}
.pl-btns { margin-top: 1.75rem; gap: .65rem; flex-wrap: wrap; }
/* Instagram square: full, visible outline on every side */
.ig-head .ig-btn { border: 1.5px solid #4f6b45 !important; background: #fff; box-shadow: 0 6px 16px -10px rgba(64, 90, 56, .5); }

/* ============= SERVICE MENU ============= */
.menu-hero { padding-bottom: 0; }
.menu-hero h1 em { font-style: italic; color: var(--green-deep); }
.menu-lede { max-width: 56ch; margin: 0 auto 1.75rem; }
.menu-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
.menu-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(28,42,31,.35); }
.menu-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-soft); }
.menu-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.menu-card:hover .menu-card__img img { transform: scale(1.05); }
.menu-card__body { padding: 1.25rem 1.4rem 1.4rem; }
.menu-card h2 { font-size: 1.6rem; margin: 0 0 .75rem; color: var(--green-deep); }
.menu-card__title { color: inherit; text-decoration: none; }
a.menu-card__title:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.menu-rows { list-style: none; margin: 0; padding: 0; }
.menu-rows a { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.04); font-size: .98rem; }
.menu-rows li:last-child a { border-bottom: 0; }
.menu-row__dots { flex: 1; border-bottom: 1px dotted rgba(31,42,34,.25); transform: translateY(-.25em); }
.menu-row__price { font-family: var(--serif); font-size: 1.1rem; color: var(--green-deep); white-space: nowrap; }
.menu-rows a:hover .menu-row__name { color: var(--green-deep); text-decoration: underline; text-underline-offset: 4px; }
.menu-note { text-align: center; color: var(--ink-mute); font-size: .9rem; margin-top: 2rem; }
.book-embed { margin: 2.5rem auto 0; text-align: center; }
.book-embed > summary { list-style: none; cursor: pointer; display: inline-flex; }
.book-embed > summary::-webkit-details-marker { display: none; }
.book-embed[open] > summary { margin-bottom: .5rem; }
.menu-rows a.menu-row { display: block; padding: .55rem 0; }
.menu-row__line { display: flex; align-items: baseline; gap: .5rem; }
.menu-row__desc { display: block; font-size: .84rem; line-height: 1.45; color: var(--ink-mute); margin-top: .2rem; padding-right: 3.5rem; }
.menu-card__intro { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); margin: -.25rem 0 .75rem; }
/* menu card titles in the same lettering as the navigation menu */
.menu-card h2 { font-family: var(--logo); font-size: 1.25rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--green-deep); line-height: 1.3; }
.menu-row__price { font-size: 1.35rem; }

/* Book page: every service row = name · dots · price · Book (straight to Vagaro on that service) */
.menu-rows div.menu-row { padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.menu-rows li:last-child div.menu-row { border-bottom: 0; }
.menu-row__line { align-items: center; }
.menu-rows a.menu-row__book {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: .45rem .85rem; margin-left: .35rem; border: 1px solid #46603e; border-bottom: 1px solid #46603e;
  border-radius: 8px; background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%);
  color: #fff; font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(64,90,56,.18); transition: transform .15s ease, box-shadow .15s ease;
}
.menu-rows a.menu-row__book:hover { background: linear-gradient(135deg, #5d7a52 0%, #3f5838 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(64,90,56,.28); }
.menu-row__desc { padding-right: 5.5rem; }
@media (max-width: 480px) { .menu-row__desc { padding-right: 0; } .menu-rows a.menu-row__book { padding: .45rem .7rem; } }

/* Home, Pierluigi: the three buttons stacked, same width */
.pl-btns { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
.pl-btns .btn { justify-content: flex-start; }
.pl-btns .btn-ico { width: 18px; height: 18px; flex: none; }

/* Book page: zebra rows, easier to follow from one service to the next; Book always visible (phones too) */
.menu-rows div.menu-row { padding: .7rem .75rem; margin: 0 -.75rem; border-bottom: 0; border-radius: 8px; transition: background .15s ease; }
.menu-rows li:nth-child(even) div.menu-row { background: rgba(79,107,69,.06); }
.menu-rows div.menu-row:hover { background: rgba(79,107,69,.12); }
.menu-rows div.menu-row:hover .menu-row__name { color: var(--green-deep); }
/* Book first in each row */
.menu-rows a.menu-row__book { margin-left: 0; margin-right: .5rem; }
div.menu-row .menu-row__desc { padding-left: calc(3.6rem + .5rem); padding-right: 0; }
@media (max-width: 480px) { div.menu-row .menu-row__desc { padding-left: 0; } }
/* Book = tap icon */
.menu-rows a.menu-row__book { width: 44px; height: 36px; padding: 0; }
.menu-rows a.menu-row__book svg { display: block; }
div.menu-row .menu-row__desc { padding-left: calc(44px + .5rem); }
@media (max-width: 480px) { div.menu-row .menu-row__desc { padding-left: 0; } }
/* Videos page: "Tap for sound" when the browser starts the video muted */
.vplayer__screen { position: relative; }
.vplayer__sound { position: absolute; left: 50%; bottom: 4.5rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border: 0; border-radius: 999px; background: rgba(31,42,34,.82); color: #fff; font: 500 .72rem/1 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
/* Book rows v3: narrow tap button, name + text on one column, dotted line under each service */
.menu-rows a.menu-row__book { width: 34px; height: 34px; margin-right: .65rem; }
.menu-rows a.menu-row__book svg { width: 20px; height: 20px; }
div.menu-row .menu-row__dots { display: none; }
div.menu-row .menu-row__price { margin-left: auto; padding-left: .75rem; }
div.menu-row .menu-row__desc { padding-left: calc(34px + .65rem); }
@media (max-width: 480px) { div.menu-row .menu-row__desc { padding-left: calc(34px + .65rem); } }
.menu-rows div.menu-row { border-bottom: 1px dotted rgba(31,42,34,.28); border-radius: 8px 8px 0 0; }
.menu-rows li:last-child div.menu-row { border-bottom: 0; border-radius: 8px; }
div.menu-row .menu-row__desc, .menu-rows div.menu-row .menu-row__desc { padding-left: calc(34px + 1.15rem); }
/* Book rows v4: real 3-column grid — tap button | name + text | price. Text never runs under the price. */
.menu-rows div.menu-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; column-gap: .9rem; row-gap: .2rem; align-items: center; }
div.menu-row .menu-row__line { display: contents; }
.menu-rows div.menu-row a.menu-row__book { grid-column: 1; grid-row: 1; margin: 0; }
div.menu-row .menu-row__name { grid-column: 2; grid-row: 1; }
div.menu-row .menu-row__price { grid-column: 3; grid-row: 1; margin: 0; padding: 0; }
div.menu-row .menu-row__desc, .menu-rows div.menu-row .menu-row__desc { grid-column: 2; grid-row: 2; padding: 0; margin: 0; }
@media (max-width: 480px) { .menu-rows div.menu-row { column-gap: .7rem; } }
/* Book prices: number in the title font, small raised $ in front; service names dark green */
div.menu-row .menu-row__price { font-family: var(--logo); font-size: 1.45rem; letter-spacing: .04em; color: var(--green-deep); line-height: 1; }
.menu-row__price .cur { font-size: .5em; vertical-align: .75em; margin-right: .12em; letter-spacing: 0; }
div.menu-row .menu-row__name { color: var(--green-deep); }
.menu-row__price .cur { vertical-align: text-top; margin-right: calc(.12em + 5px); position: relative; top: .08em; }
/* $ after the number, low and to the right: all $ line up in one column */
div.menu-row .menu-row__price { display: inline-flex; align-items: flex-end; justify-self: end; }
.menu-row__price .cur { order: 1; vertical-align: baseline; position: static; top: auto; margin: 0 0 .12em .2em; }
div.menu-row .menu-row__name { font-weight: 600; }
/* No dotted lines at all (zebra is enough); tap square at 50% transparency */
.menu-rows div.menu-row, .menu-rows li:last-child div.menu-row { border-bottom: 0; border-radius: 8px; }
.menu-rows a.menu-row__book { background: rgba(79,107,69,.5); border-color: rgba(70,96,62,.5); box-shadow: none; }
.menu-rows a.menu-row__book:hover { background: rgba(79,107,69,.85); }
div.menu-row .menu-row__price--text { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-align: right; max-width: 6.5rem; line-height: 1.2; align-self: center; display: block; }
.menu-row__price .from { font-size: .5em; letter-spacing: .08em; text-transform: uppercase; margin: 0 .3em .15em 0; }
/* Looks page: real salon photos in the same grid and size as the style cards */
.looks-real .ig-head { margin-bottom: 2rem; }
.look--real .work-card.look__img { display: block; aspect-ratio: 636 / 900; border-radius: 0; }
.look--real .work-card img { width: 100%; height: 100%; object-fit: cover; transform: none; }
/* "On consultation": small, bottom right under the text; name + text take the full width */
div.menu-row:has(.menu-row__price--text) .menu-row__name,
div.menu-row:has(.menu-row__price--text) .menu-row__desc { grid-column: 2 / 4; }
div.menu-row .menu-row__price--text { grid-column: 2 / 4; grid-row: 3; justify-self: end; max-width: none; font-size: .66rem; letter-spacing: .14em; margin-top: .2rem; opacity: .9; }
/* Book: illustrated icons on a cream tile */
.menu-rows div.menu-row { grid-template-columns: 42px minmax(0,1fr) auto; }
.menu-rows a.menu-row__book { width: 42px; height: 42px; background: #fbf8f2; border: 1px solid rgba(79,107,69,.22); box-shadow: 0 1px 4px rgba(31,42,34,.06); }
.menu-rows a.menu-row__book svg { width: 30px; height: 30px; }
.menu-rows a.menu-row__book:hover { background: #fff; border-color: rgba(79,107,69,.55); transform: translateY(-1px) rotate(-3deg); box-shadow: 0 4px 12px rgba(31,42,34,.12); }
/* Book v5: illustration next to the category title; each row has a tall green tile: BOOK + tap hand */
.menu-card__body h2 { display: flex; align-items: center; gap: .6rem; }
.menu-card__ico { flex: none; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: #f3efe6; border: 1px solid rgba(79,107,69,.18); }
.menu-card__ico svg { width: 32px; height: 32px; }
.menu-rows div.menu-row { grid-template-columns: 44px minmax(0,1fr) auto; }
.menu-rows a.menu-row__book { grid-row: 1 / 3; align-self: start; flex-direction: column; gap: .3rem; width: 44px; height: 56px; padding: 0;
  background: rgba(79,107,69,.55); border: 1px solid rgba(70,96,62,.5); color: #fff; font-size: .56rem; letter-spacing: .14em; box-shadow: none; transform: none; }
.menu-rows a.menu-row__book span { line-height: 1; padding-left: .14em; }
.menu-rows a.menu-row__book svg { width: 18px; height: 18px; }
.menu-rows a.menu-row__book:hover { background: rgba(79,107,69,.9); border-color: #46603e; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(64,90,56,.25); }

/* ===== Cards, whole site: the card stays still; the photo zooms gently inside; the card's button lights up ===== */
.look:hover, .svc-card:hover, .article-card:hover, .vcard:hover, .ig-card:hover { transform: none !important; }
.look__img, .svc-card__img, .article-card__media { overflow: hidden; }
.look__img img, .svc-card__img img, .article-card__media img, .ig-card img { transition: transform .6s var(--ease, ease); }
@media (hover: hover) {
  .look:hover .look__img img, .svc-card:hover .svc-card__img img, .article-card:hover .article-card__media img, .ig-card:hover img { transform: scale(1.06); }
}
.look__link, .svc-card__link, .article-card__link {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; width: auto;
  padding: .55rem .95rem; border: 1px solid rgba(79,107,69,.45); border-radius: 8px;
  color: var(--green-deep); background: transparent; text-decoration: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.svc-card__link { margin-top: auto; }
.article-card__link { margin-left: 1.4rem; margin-right: 1.4rem; }
.look:hover .look__link, .svc-card:hover .svc-card__link, .article-card:hover .article-card__link,
.look__link:focus-visible, .svc-card__link:focus-visible, .article-card__link:focus-visible {
  background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%);
  border-color: #46603e; color: #fff; box-shadow: 0 6px 16px -6px rgba(64,90,56,.55);
}
/* Book tile v6: as tall as the price, squarer corners, BOOK + hand side by side */
.menu-rows div.menu-row { grid-template-columns: 76px minmax(0,1fr) auto; }
.menu-rows a.menu-row__book { grid-row: 1; align-self: center; flex-direction: row; gap: .35rem; width: 76px; height: 30px; border-radius: 4px; font-size: .6rem; }
.menu-rows a.menu-row__book svg { width: 16px; height: 16px; }
@media (max-width: 480px) { .menu-rows div.menu-row { grid-template-columns: 70px minmax(0,1fr) auto; } .menu-rows a.menu-row__book { width: 70px; } }
/* A card with a single service still shows its row band; tighter two-line names */
.menu-rows li:only-child div.menu-row { background: rgba(79,107,69,.06); }
div.menu-row .menu-row__name { line-height: 1.3; }
/* Category illustration: no circle, no background */
.menu-card__ico { width: auto; height: auto; border: 0; background: none; border-radius: 0; }
.menu-card__ico svg { width: 38px; height: 38px; }
/* Book v7: cards in a row share the same height; narrow tile with BOOK on top and the hand below */
.menu-grid { align-items: stretch; }
.menu-grid > .menu-card { height: 100%; }
.menu-rows div.menu-row { grid-template-columns: 46px minmax(0,1fr) auto; column-gap: .8rem; }
.menu-rows a.menu-row__book { grid-row: 1 / 3; align-self: start; flex-direction: column; gap: .25rem; width: 46px; height: 46px; border-radius: 4px; font-size: .55rem; }
.menu-rows a.menu-row__book svg { width: 17px; height: 17px; }
@media (max-width: 480px) { .menu-rows div.menu-row { grid-template-columns: 46px minmax(0,1fr) auto; } .menu-rows a.menu-row__book { width: 46px; } }
/* Hover anywhere on the row: its BOOK tile turns dark green; the whole row is clickable */
.menu-rows div.menu-row { cursor: pointer; }
.menu-rows div.menu-row:hover a.menu-row__book { background: linear-gradient(135deg, #5d7a52 0%, #3f5838 100%); border-color: #3f5838; box-shadow: 0 4px 12px rgba(64,90,56,.28); }
/* BOOK tile never moves: only the color changes */
.menu-rows a.menu-row__book, .menu-rows a.menu-row__book:hover, .menu-rows div.menu-row:hover a.menu-row__book { transform: none !important; box-shadow: none !important; transition: background .2s ease, border-color .2s ease; }
/* Zebra in the warm oak tones of the Method section; hover = deeper oak */
.menu-rows li:nth-child(even) div.menu-row, .menu-rows li:only-child div.menu-row { background: #f7f1e8; }
.menu-rows div.menu-row:hover { background: #efe5d6 !important; }
/* Book: Diagnosis + Extensions stacked in one column; divider title before the beauty services */
.menu-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
.menu-grid > .menu-stack > .menu-card { height: auto; }
.menu-stack > .menu-card:last-child { flex: 1; }
.menu-divider { text-align: center; margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.menu-divider h2 { margin: .4rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
.menu-divider h2 em { color: var(--green-deep); }
/* Diagnosis photo: taller frame centred on the micro-camera, the strand and the iPad */
.menu-card__img--diag { aspect-ratio: 4 / 3; }
.menu-card__img--diag img { object-position: center 56%; }
.menu-card__img--diag { aspect-ratio: 16 / 9; }
.menu-card__img--diag img { object-position: center 50%; }

/* Book: category tabs — Hair first, then Nails, Brows & waxing, Face & body */
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); }
.menu-tab { appearance: none; cursor: pointer; padding: .8rem 1.4rem; border-radius: 8px; border: 1px solid rgba(79,107,69,.35);
  background: linear-gradient(180deg, #fff 0%, #f6f3ee 100%); color: var(--green-deep);
  font: 500 .75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.menu-tab:hover { border-color: #46603e; background: #efe5d6; }
.menu-tab.is-active { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%); border-color: #46603e; color: #fff; }
.menu-panel[hidden] { display: none; }
.menu-grid--one { grid-template-columns: minmax(0, 760px) !important; justify-content: center; }
@media (min-width: 900px) {
  .menu-grid--one .menu-card { display: grid; grid-template-columns: 300px minmax(0,1fr); }
  .menu-grid--one .menu-card__img { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .menu-grid--one .menu-card__img img { height: 100%; }
}
@media (max-width: 560px) { .menu-tab { flex: 1 1 calc(50% - .5rem); padding: .8rem .6rem; letter-spacing: .12em; } }
@media (min-width: 900px) {
  .menu-grid--one .menu-card__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; align-self: start; margin: 1.25rem 0 1.25rem 1.25rem; border-radius: 8px; }
  .menu-grid--one .menu-card__img img { height: 100%; object-position: center; }
}
/* Booking calendar page: the chosen service */
.book-chosen { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 0 auto 1rem; padding: 1rem 1.25rem; max-width: 520px; background: #f7f1e8; border: 1px solid var(--line); border-radius: 10px; }
.book-chosen strong { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: var(--green-deep); line-height: 1.15; }
.book-chosen__hint { font-size: .9rem; color: var(--ink-soft); }
/* Tabs v2: hair sub-tabs too; a single hair card shows like the beauty panels; one swipeable row on phones */
.menu-tabs__sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .25rem; }
.menu-panel.is-single > .menu-grid { grid-template-columns: minmax(0, 760px) !important; justify-content: center; }
.menu-panel.is-single .menu-stack { display: contents; }
.menu-panel [hidden] { display: none !important; }
@media (min-width: 900px) {
  .menu-panel.is-single .menu-card { display: grid; grid-template-columns: 300px minmax(0,1fr); }
  .menu-panel.is-single .menu-card__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; align-self: start; margin: 1.25rem 0 1.25rem 1.25rem; border-radius: 8px; }
  .menu-panel.is-single .menu-card__img img { height: 100%; }
}
@media (max-width: 899px) {
  .menu-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    margin-left: -16px; margin-right: -16px; padding: 0 16px .35rem; scrollbar-width: none; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { flex: none !important; white-space: nowrap; scroll-snap-align: center; padding: .75rem 1.05rem; letter-spacing: .12em; }
}
/* The last row's tile keeps its bottom border (an old rule removed it) */
.menu-rows li a.menu-row__book, .menu-rows li:last-child a.menu-row__book { border-bottom: 1px solid rgba(70,96,62,.5); }
.menu-rows li:last-child div.menu-row:hover a.menu-row__book, .menu-rows li a.menu-row__book:hover { border-bottom-color: #3f5838; }
/* Nav: a small house before Story, so the way back home is obvious */
.nav-links a.nav-home { display: inline-flex; align-items: center; gap: .4rem; }
.nav-links a.nav-home svg { width: 15px; height: 15px; margin-top: -2px; }
.nav-home__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Tabs v3: main row + a smaller hair row underneath (only under Hair) */
.menu-tabs--sub { margin-top: -1rem; gap: .4rem; }
.menu-tabs--sub[hidden] { display: none; }
.menu-tab--sub { padding: .55rem .95rem; font-size: .66rem; letter-spacing: .14em; border-radius: 999px; background: #fff; }
.menu-tab--sub.is-active { background: #efe5d6; color: var(--green-deep); border-color: #46603e; }
@media (min-width: 900px) { .menu-tabs:not(.menu-tabs--sub) .menu-tab { min-width: 150px; } }
@media (max-width: 899px) { .menu-tabs--sub { margin-top: -1.1rem; } }
/* Booking calendar page: lighter header — one slim line with the chosen service */
.book-chosen { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem .6rem; padding: .55rem 1.1rem; margin: 1rem auto 0; max-width: max-content; border-radius: 999px; }
.book-chosen strong { font-size: 1.15rem; }
.book-chosen__hint { font-size: .85rem; }
.book-chosen__hint::before { content: "·"; margin-right: .5rem; color: var(--ink-mute); }
/* Home service cards: photo + title open the service page; the button books that category */
.svc-card--split .svc-card__title { color: inherit; text-decoration: none; }
.svc-card--split .svc-card__title:hover { text-decoration: underline; text-underline-offset: 4px; }
.svc-card--split .svc-card__img { display: block; }
/* Tabs v4: both rows share the same width; icons in every tab; "All" sits outside on the left */
.menu-tab { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.menu-tab__ico { flex: none; }
.menu-tab--sub .menu-tab__ico { width: 15px; height: 15px; }
@media (min-width: 900px) {
  .menu-tabs-wrap { width: min(100%, 1040px); margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); }
  .menu-tabs-wrap .menu-tabs { display: grid; gap: .6rem; margin: 0; }
  .menu-tabs-wrap .menu-tabs:not(.menu-tabs--sub) { grid-template-columns: repeat(4, 1fr); }
  .menu-tabs-wrap .menu-tab { min-width: 0; padding-left: .6rem; padding-right: .6rem; }
  .menu-tabs-wrap .menu-tabs--sub { grid-template-columns: repeat(6, 1fr); margin-top: .75rem; position: relative; }
  .menu-tabs-wrap .menu-tabs--sub[hidden] { display: none; }
  .menu-tabs-wrap .menu-tab--sub[data-sub] { position: absolute; right: calc(100% + .6rem); top: 0; bottom: 0; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .menu-tabs-wrap .menu-tabs--sub { grid-template-columns: auto repeat(6, 1fr); }
  .menu-tabs-wrap .menu-tab--sub[data-sub] { position: static; }
}
@media (max-width: 899px) { .menu-tabs-wrap { margin-bottom: 1.5rem; } .menu-tabs-wrap .menu-tabs--sub { margin-top: .5rem; } }
/* Tabs v5: narrower, centred; hair row with soft corners instead of pills */
@media (min-width: 900px) { .menu-tabs-wrap { width: min(100%, 880px); } }
.menu-tab--sub { border-radius: 8px; letter-spacing: .1em; }
.menu-tabs-wrap .menu-tab--sub { padding-left: .4rem; padding-right: .4rem; gap: .4rem; }
.nav-links a.nav-home svg { width: 18px; height: 18px; margin-top: -3px; }
/* Book tabs: the tab bar never makes the page jump */
.menu-tabs-wrap { overflow-anchor: none; }
.menu-panel { overflow-anchor: none; }

/* Footer logo = header logo (dark disc behind the W) */
.site-footer .footer-brand .brand .brand-mark { border-radius: 50%; background: var(--logo-disc); box-shadow: 0 0 0 4px var(--logo-disc), 0 0 14px 2px rgba(28,42,31,.18); }
/* Footer Instagram: icon centred in its square (a generic footer-link rule was overriding it) */
.site-footer ul a.footer-ig { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; line-height: 0; }
/* Hero: small Google rating that jumps to the reviews */
.hero-rating { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1rem; padding: .4rem .75rem; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .82rem; line-height: 1; transition: background .2s ease, border-color .2s ease; }
.hero-rating:hover { background: #fff; border-color: rgba(79,107,69,.45); }
.hero-rating__g { width: 16px; height: 16px; flex: none; }
.hero-rating strong { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.hero-rating__stars { color: #e8a317; letter-spacing: .05em; font-size: .85rem; }
/* Google Maps button: the coloured pin sits on a white chip so its colours show on the green */
.btn-ico--gmaps { background: #fff; border-radius: 50%; padding: 2px; width: 20px; height: 20px; }
/* Product brands in dark green (logos recoloured to match) */
.brands__mark, .brands__wl-name, .brands__wl-sub { color: #3f5838 !important; }
.brandstrip__item img { opacity: 1; }
.brandstrip__item { opacity: 1; }
.brandstrip__item .brand-mark, .brandstrip__item .brands__wl-name, .brandstrip__item { color: #3f5838; }
/* Marquee under the hero: bigger words */
.marquee__track { font-size: 1.05rem; letter-spacing: .24em; }
@media (max-width: 600px) { .marquee__track { font-size: .95rem; } }

/* ===== Reviews page ===== */
.reviews-hero { text-align: center; padding-bottom: 1rem; }
.rv-summary { display: inline-flex; align-items: center; gap: .6rem; margin: .5rem 0 1.5rem; color: var(--ink-soft); }
.rv-summary strong { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; color: var(--ink); line-height: 1; }
.rv-summary__stars { color: #e8a317; font-size: 1.25rem; letter-spacing: .06em; }
.rv-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 auto 2rem; }
.rv-filter { appearance: none; cursor: pointer; padding: .6rem 1rem; border-radius: 8px; border: 1px solid rgba(79,107,69,.35); background: #fff; color: var(--green-deep); font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.rv-filter span { opacity: .6; margin-left: .25rem; }
.rv-filter:hover { background: #efe5d6; }
.rv-filter.is-active { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%); border-color: #46603e; color: #fff; }
.rv-grid { list-style: none; margin: 0; padding: 0; columns: 3 320px; column-gap: 1.25rem; }
.rv { break-inside: avoid; margin: 0 0 1.25rem; padding: 1.25rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px -26px rgba(28,42,31,.35); }
.rv[hidden] { display: none; }
.rv__head { display: grid; grid-template-columns: 40px 1fr auto; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.rv__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #efe5d6; color: var(--green-deep); font: 600 .85rem/1 var(--sans); }
.rv__who { display: flex; flex-direction: column; line-height: 1.25; }
.rv__who strong { font-weight: 600; color: var(--ink); }
.rv__date { font-size: .8rem; color: var(--ink-mute); }
.rv__stars { color: #e8a317; letter-spacing: .04em; white-space: nowrap; }
.rv__off { color: #ddd5c7; }
.rv__text { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.rv__text--none { font-style: italic; color: var(--ink-mute); font-size: .88rem; }
.rv__orig { margin-top: .6rem; font-size: .82rem; color: var(--ink-mute); }
.rv__orig summary { cursor: pointer; }
.rv__orig p { margin: .4rem 0 0; }
.rv__reply { margin-top: .9rem; padding: .75rem .9rem; background: #f7f1e8; border-radius: 8px; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
.rv__reply strong { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); margin-bottom: .3rem; }
.rv__reply p { margin: 0; }
.greviews__all { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Reviews page v2: Google header, score + circle with the count, yellow "Leave a review" with stars lighting up 1→5 */
.rv-title { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-weight: 500; font-size: clamp(2rem, 4.5vw, 2.9rem); color: #5f6368; letter-spacing: -.01em; margin: .4rem 0 1rem; }
.rv-g { width: 1.05em; height: 1.05em; }
.rv-gword { font-weight: 500; }
.rv-score { display: inline-flex; align-items: center; gap: 1.5rem; margin: 0 0 1.6rem; }
.rv-score__main { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.rv-score__main strong { font-family: var(--serif); font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--ink); }
.rv-score__stars { color: #f4b400; font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.rv-score__count { width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid #f4b400; background: #fff; box-shadow: 0 10px 24px -14px rgba(28,42,31,.4); }
.rv-score__count strong { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--ink); }
.rv-score__count span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-top: .15rem; }
.btn.rv-write { background: linear-gradient(135deg, #ffd45c 0%, #f4b400 55%, #e09a00 100%); border: 1px solid #d69300; color: #3a2a00; box-shadow: 0 10px 22px -12px rgba(224,154,0,.8); }
.btn.rv-write:hover { background: linear-gradient(135deg, #ffcb3d 0%, #eaa800 60%, #d48f00 100%); color: #2a1e00; }
.rv-write__stars { display: inline-flex; gap: .08em; }
.rv-write__stars i { font-style: normal; color: #fff; opacity: .3; text-shadow: 0 1px 2px rgba(120,80,0,.35); animation: rv-star 3.2s infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes rv-star { 0%, 8% { opacity: .3; transform: scale(.85); } 14%, 62% { opacity: 1; transform: scale(1.1); } 70%, 100% { opacity: .3; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .rv-write__stars i { animation: none; opacity: 1; } }
/* newest first, row by row: JS deals the cards into columns */
.rv-grid { columns: auto; display: flex; gap: 1.25rem; align-items: flex-start; }
.rv-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.rv-grid.no-js { display: block; columns: 3 320px; }
/* reply with the Wonderlong mark, same size as the reviewer's initials */
.rv__reply { display: grid; grid-template-columns: 40px 1fr; gap: .75rem; align-items: start; }
.rv__avatar--wl { background: var(--green-deep); color: #fff; }
.rv__avatar--wl svg { width: 30px; height: 30px; }
.reviews-hero .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.reviews-hero .eyebrow { margin-bottom: .25rem; }
/* Review card alignment: initials + reply logo in one column; name, text and reply text in the second; stars top-right */
.rv__head { grid-template-columns: 40px 1fr auto; align-items: start; column-gap: .75rem; }
.rv__stars { align-self: start; line-height: 1.2; margin-top: .1rem; }
.rv__who { padding-top: .1rem; }
.rv__text, .rv__orig { margin-left: calc(40px + .75rem); }
.rv__reply { margin: .9rem -.9rem 0; padding: .8rem .9rem; column-gap: .75rem; }
@media (max-width: 420px) { .rv__text, .rv__orig { margin-left: 0; } }
/* Star filters: yellow stars, the active filter in the same yellow as "Leave a review" */
.rv-filter__star { color: #f4b400; font-weight: 400; }
.rv-filter.is-active { background: linear-gradient(135deg, #ffd45c 0%, #f4b400 55%, #e09a00 100%); border-color: #d69300; color: #3a2a00; }
.rv-filter.is-active .rv-filter__star { color: #fff; text-shadow: 0 1px 2px rgba(120,80,0,.35); }
.rv-filter:hover { background: #fff6dc; border-color: #e9b53a; }
.rv-filter.is-active:hover { background: linear-gradient(135deg, #ffcb3d 0%, #eaa800 60%, #d48f00 100%); }
.rv-filter__star { letter-spacing: .04em; }
/* Hero Google rating v2: squarer, bigger G + score + stars, small grey count underneath; opens the reviews page */
.hero-rating { flex-direction: column; align-items: flex-start; gap: .3rem; padding: .6rem .9rem .55rem; border-radius: 8px; }
.hero-rating__row { display: inline-flex; align-items: center; gap: .5rem; }
.hero-rating__g { width: 22px; height: 22px; }
.hero-rating strong { font-size: 1.55rem; line-height: 1; }
.hero-rating__stars { font-size: 1.2rem; letter-spacing: .06em; color: #f4b400; }
.hero-rating__count { font-size: .74rem; color: #8a8f8b; letter-spacing: .04em; padding-left: calc(22px + .5rem); }
/* Hero rating inside the button column: same width as the buttons, no extra gap */
.btn-row .hero-rating { order: -2; margin: 0; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; }
.btn-row .hero-rating .hero-rating__count { padding-left: 0; }
/* Hero rating v3: one line, same height as the buttons — G · 4.5 · stars · 122 reviews */
.btn-row .hero-rating { flex-direction: row; padding: 0 1rem; min-height: 0; height: var(--hero-btn-h, auto); }
.hero-rating__row { gap: .45rem; flex-wrap: nowrap; white-space: nowrap; }
.hero-rating__g { width: 18px; height: 18px; }
.hero-rating strong { font-size: 1.3rem; }
.hero-rating__stars { font-size: 1rem; }
.btn-row .hero-rating .hero-rating__count { font-size: .72rem; color: #8a8f8b; margin-left: .15rem; }
.btn-row .hero-rating .hero-rating__g { width: 20px; height: 20px; }
.btn-row .hero-rating strong { font-size: 1.45rem; }
.btn-row .hero-rating .hero-rating__stars { font-size: 1.15rem; }
/* hero (desktop): hairstyle photo a little bigger, its bottom level with the Book Online button */
@media (min-width: 768px) { .hero__inner { grid-template-columns: auto minmax(240px, 318px); } }
@media (min-width: 768px) { .hero__inner > .hero-hair { align-self: end; } }
/* Book page header: Google score, free-diagnosis highlight, Vagaro logo in the button */
.book-rating { margin: .25rem auto 1.25rem; border-radius: 8px; padding: .55rem 1rem; }
.book-free { display: flex; align-items: center; gap: 1rem; max-width: 560px; margin: 0 auto 1.25rem; padding: 1rem 1.25rem; text-align: left; background: #f7f1e8; border: 1px solid var(--line); border-left: 4px solid var(--green-deep); border-radius: 10px; }
.book-free__ico { flex: none; width: 40px; height: 40px; color: var(--green-deep); }
.book-free strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--green-deep); }
.book-free span { display: block; margin-top: .25rem; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.vagaro-logo { height: 1.35em; width: auto; margin-left: .15em; transform: translateY(.06em); }
/* Pierluigi buttons: narrower column */
.pl-btns { max-width: 290px; }
.pl-btns .btn { padding-left: 1.1rem; padding-right: 1.1rem; }
/* Pierluigi column: the Google score, styled like the hero one and as tall as the buttons */
.pl-btns .pl-rating { width: 100%; box-sizing: border-box; margin: 0; flex-direction: row; justify-content: flex-start; padding: 0 1.1rem; border-radius: 8px; }
.pl-btns .pl-rating .hero-rating__g { width: 20px; height: 20px; }
.pl-btns .pl-rating strong { font-size: 1.45rem; }
.pl-btns .pl-rating .hero-rating__stars { font-size: 1.15rem; }
.pl-btns .pl-rating { justify-content: space-between; }
.pl-rating__count { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; text-align: right; }
.pl-rating__count strong { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.pl-rating__count small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8f8b; margin-top: .2rem; }

/* Home: carousel of 5-star reviews, moving left → right, pauses on hover */
.rv-marquee { overflow: hidden; margin: 0 calc(50% - 50vw); padding: .5rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
.rv-marquee[hidden] { display: none; }
.rv-marquee__track { display: flex; gap: 1.25rem; width: max-content; animation: rv-slide 500s linear infinite; }
.rv-marquee:hover .rv-marquee__track { animation-play-state: paused; }
@keyframes rv-slide { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.rv--slide { width: 340px; flex: none; margin: 0; display: flex; flex-direction: column; }
.rv--slide .rv__text { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) { .rv--slide { width: 280px; } }
@media (prefers-reduced-motion: reduce) { .rv-marquee__track { animation: none; } .rv-marquee { overflow-x: auto; } }
/* reviews carousel: moves right → left */
@keyframes rv-slide-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rv-marquee__track { animation-name: rv-slide-rtl; }
/* Home reviews: clickable summary; Read Reviews under Leave a review, same width */
a.greviews__summary { color: inherit; text-decoration: none; border-radius: 8px; padding: .3rem .6rem; transition: background .2s ease; }
a.greviews__summary:hover { background: rgba(255,255,255,.7); }
.greviews__center { display: grid; grid-template-columns: 1fr; gap: .65rem; justify-items: stretch; }
.greviews__center .btn { width: 100%; justify-content: center; }
/* Light buttons: visible on light backgrounds everywhere (green hairline + clearer shadow) */
main .btn--ghost { border: 1px solid rgba(79,107,69,.38) !important; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -10px rgba(28,42,31,.35); }
main .btn--ghost:hover { border-color: #46603e !important; }
.greviews__actions { align-items: start; }
.greviews__actions > .btn { align-self: start; }
.greviews__readrow { display: flex; justify-content: center; margin-top: 1rem; }

/* Home: three backgrounds in a fixed rhythm — light · wavy ridges · wood — so every block reads apart.
   quote+brands: light · Follow the chair: ridges · Method: wood · Services: light · Pierluigi: ridges · Products: wood · Reviews: light · Journal: ridges · Visit keeps its wallpaper */
.home-bg-light { background: var(--bg) !important; }
.home-bg-ridges { background-color: var(--bg) !important; background-image: linear-gradient(rgba(255,255,255,.30), rgba(255,255,255,.30)), url("../images/ridges.jpg") !important; background-size: auto, 380px auto !important; background-repeat: repeat !important; }
.home-bg-wood { background-color: var(--bg-alt) !important; background-image: linear-gradient(var(--wood-scrim), var(--wood-scrim)), url("../images/wood.jpg") !important; background-size: auto, 450px auto !important; background-repeat: repeat !important; }
.home-bg-wood .brands__card, .home-bg-ridges .article-card, .home-bg-ridges .vcard, .home-bg-ridges .svc-card { background: #fff; }
/* Home reviews: Read Reviews and Leave a review exactly the same width */
.greviews__read, .greviews__actions .greviews__write { width: 280px !important; max-width: 100%; justify-content: center; box-sizing: border-box; }
.greviews__actions .greviews__write { justify-self: center; }

/* ===== Mobile check fixes ===== */
@media (max-width: 767px) {
  /* header: smaller logo disc and phone circle, more air between menu · logo · phone */
  .site-header .nav { grid-template-columns: 36px minmax(0, 1fr) 38px; column-gap: 14px; }
  .site-header .brand .brand-mark { width: 38px; height: 38px; }
  .site-header .nav-phone { width: 38px; height: 38px; min-width: 38px; }
  .site-header .nav-phone svg { width: 17px; height: 17px; }
  .site-header .brand { gap: .5rem; }
  .site-header .brand-wonderlong { font-size: 1rem; }
  .site-header .brand small { font-size: .58rem; letter-spacing: .2em; }
  /* Visit: map and call buttons full width so the label is never cut */
  .visit-map__btns, .visit-call { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .visit-map__btns .btn, .visit-call .btn, #visit-section .btn { width: 100%; letter-spacing: .1em; padding-left: .8rem; padding-right: .8rem; white-space: nowrap; }
  /* comfortable tap targets */
  .menu-tab--sub, .rv-filter { min-height: 42px; }
}
.dm-sheet__x { width: 40px; height: 40px; top: 4px; right: 4px; }
@media (max-width: 767px) {
  #visit-section .visit-map__btns { display: flex !important; flex-direction: column !important; gap: .6rem; }
  #visit-section .visit-call { display: block !important; }
  #visit-section .visit-call .btn, #visit-section .visit-map__btns .btn { width: 100% !important; max-width: none !important; flex: none !important; justify-content: center; }
}
@media (max-width: 899px) {
  .menu-tabs-wrap .menu-tabs:not(.menu-tabs--sub) { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; overflow: visible; margin: 0 0 .25rem; padding: 0; }
  .menu-tabs-wrap .menu-tabs:not(.menu-tabs--sub) .menu-tab { width: 100%; padding: .8rem .5rem; letter-spacing: .1em; font-size: .7rem; }
}
/* Book, phones: the hair categories wrap onto lines instead of a cut-off sliding row */
@media (max-width: 899px) {
  .menu-tabs-wrap .menu-tabs--sub { flex-wrap: wrap !important; overflow: visible !important; justify-content: center; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; gap: .4rem; }
  .menu-tabs-wrap .menu-tabs--sub .menu-tab { flex: 0 1 auto !important; padding: .6rem .75rem; font-size: .64rem; letter-spacing: .08em; }
}
/* Phones: no phone icon in the header (CALL is in the bottom bar); the logo stays centred and the same size */
@media (max-width: 767px) { .site-header .nav-phone { display: none !important; } }
/* Hero: "Style inspirations" on the same line as "Prevention beats cutting"; the hairstyle name under the photo */
.hero-hair__eyebrow { display: block; text-align: center; margin: 0 0 .75rem; }
.hero-hair figcaption { order: 2 !important; margin: .55rem 0 0 !important; }
@media (min-width: 768px) {
  .hero__inner > .hero-hair { align-self: stretch !important; justify-content: space-between; }
  .hero-hair__eyebrow { margin: 0; }
}
@media (min-width: 768px) { .hero-hair__eyebrow { margin-top: 5px; } }
/* Footer, Book & Follow: Instagram + Google Reviews buttons, styled and lined up like Book Online / Call the salon */
.footer-cta--follow { display: grid; gap: .65rem; margin-top: 1.25rem; max-width: 240px; }
.footer-cta--follow .btn { width: 100%; justify-content: center; }

/* ===== Header: language flags + phone (desktop: white handset, number slides out on hover, replacing the flags) ===== */
.nav-langs { display: none; align-items: center; gap: .45rem; transition: opacity .3s ease, transform .3s ease; }
.nav-langs a { display: inline-flex; border-radius: 50%; opacity: .55; text-decoration: none; transition: opacity .2s ease, transform .2s ease; }
.nav-langs a img { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.nav-langs a.is-current { opacity: 1; }
.nav-langs a:hover { opacity: 1; transform: scale(1.08); }
@media (min-width: 768px) {
  .nav-actions { position: relative; }
  .site-header .nav-langs { display: inline-flex; margin-right: .2rem; }
  .site-header .nav-phone { position: relative; display: inline-flex !important; width: 32px; height: 32px; padding: 0; justify-content: center; align-items: center; border: 0 !important; border-radius: 0 !important; background: none !important; color: #fff !important; }
  .site-header .nav-phone svg { width: 20px !important; height: 20px !important; color: #fff !important; }
  .site-header .nav-phone .nav-phone__num { position: absolute; right: calc(100% + .6rem); top: 50%; white-space: nowrap; color: #fff !important; font-size: 1.1rem; letter-spacing: .08em;
    opacity: 0; transform: translate(24px, -50%); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
  .site-header .nav-phone:hover .nav-phone__num, .site-header .nav-phone:focus-visible .nav-phone__num { opacity: 1; transform: translate(0, -50%); }
  .nav-actions:has(.nav-phone:hover) .nav-langs, .nav-actions:has(.nav-phone:focus-visible) .nav-langs { opacity: 0; transform: translateX(-12px); pointer-events: none; }
}
@media (max-width: 767px) {
  .nav-mobile .nav-langs { display: flex; justify-content: center; gap: .6rem; margin: 0 0 1rem; }
  .nav-mobile .nav-langs a img { border-color: var(--line); }
}
/* Language picker (desktop header) */
.lang-pick { position: relative; display: none; align-items: center; }
@media (min-width: 768px) { .site-header .lang-pick { display: inline-flex; } }
.lang-pick__toggle { appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; padding: .2rem; color: rgba(255,255,255,.8); font: 600 .6rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: opacity .25s ease; }
.lang-pick__toggle:hover { color: #fff; }
.lang-pick__cur img { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lang-pick__list { position: absolute; right: calc(100% + .35rem); top: 50%; display: flex; gap: .35rem; white-space: nowrap; opacity: 0; transform: translate(24px, -50%); pointer-events: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); z-index: 5; }
.lang-pick.is-open .lang-pick__list { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.lang-pick.is-open .lang-pick__hint { opacity: 0; }
.lang-pick__list a { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--ink); font: 600 .66rem/1 var(--sans); letter-spacing: .06em; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,.18); opacity: 1 !important; transition: background .2s ease, transform .2s ease; }
.lang-pick__list a:hover { background: #fff; transform: translateY(-1px); }
.lang-pick__list a.is-current { background: #efe5d6; }
.lang-pick__list a img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 0; box-shadow: none; }
.lang-pick__hint { transition: opacity .2s ease; }
.lang-pick__list { width: max-content; }
.lang-pick__list a span { flex: none; white-space: nowrap; }
/* Footer: Call the salon right under the number, Book online below it */
.site-footer .footer-brand .footer-cta { display: flex; flex-direction: column; }
.site-footer .footer-brand .footer-cta .footer-phone { order: 0; }
.site-footer .footer-brand .footer-cta .btn--ghost { order: 1; }
.site-footer .footer-brand .footer-cta .btn--primary { order: 2; }
/* Visit: handset in front of the reservations number (the Call button is gone) */
.visit-tel { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--serif); font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.visit-tel:hover { color: var(--green-deep); }
.visit-tel__ico { width: 18px; height: 18px; color: var(--green-deep); flex: none; }
/* Map buttons: bigger Google / Apple icons, narrower buttons */
.visit-map__btns { justify-content: center; gap: .6rem; }
.visit-map__btns .btn { flex: 0 1 auto !important; padding-left: 1rem !important; padding-right: 1.1rem !important; gap: .55rem; }
.visit-map__btns .btn .btn-ico { width: 24px !important; height: 24px !important; }
.visit-map__btns .btn .btn-ico--gmaps { width: 26px !important; height: 26px !important; padding: 2px; }
@media (max-width: 767px) { #visit-section .visit-map__btns .btn { width: auto !important; align-self: center; min-width: 240px; } }
/* Journal header: "All articles" green, on the right under the text */
.journal-head .journal-all { align-self: flex-end; margin-left: auto; }
.journal-head .journal-all { display: inline-flex; }
.journal-head__side { display: flex; flex-direction: column; }
/* Flags: perfect circles everywhere */
.lang-pick__cur img, .lang-pick__list a img, .nav-langs a img { flex: none; aspect-ratio: 1 / 1; box-sizing: border-box; object-fit: cover; object-position: center; }
.lang-pick__cur { display: inline-flex; flex: none; }
/* While the languages are open, the menu steps aside: only the home icon stays */
.site-header .nav-links li { transition: opacity .25s ease; }
.site-header.langs-open .nav-links li:not(:first-child) { opacity: 0; pointer-events: none; }
/* Header 1200–1439px: Videos added — tighten so Book Now stays inside */
@media (min-width: 900px) and (max-width: 1439px) {
  .site-header .nav-links { gap: 1.15rem !important; }
  .site-header .nav-links a { letter-spacing: .13em; }
  .lang-pick__hint { display: none; }
  .site-header .nav-actions { gap: .6rem; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .site-header .nav-links { gap: .85rem !important; }
  .site-header .nav-links a { letter-spacing: .1em; font-size: .68rem; }
}
/* Pills: flags the same size as the selected flag next to the phone */
.lang-pick__list a { padding: .2rem .75rem .2rem .2rem; gap: .45rem; }
.lang-pick__list a img { width: 28px !important; height: 28px !important; }
/* Phone (desktop): the number slides out to the RIGHT, in place of Book Now; the flags stay */
@media (min-width: 768px) {
  .site-header .nav-phone .nav-phone__num { left: calc(100% + .7rem); right: auto; transform: translate(-24px, -50%); }
  .site-header .nav-phone:hover .nav-phone__num, .site-header .nav-phone:focus-visible .nav-phone__num { transform: translate(0, -50%); }
  .site-header .nav-actions > .btn--primary { transition: opacity .25s ease, transform .3s ease; }
  .nav-actions:has(.nav-phone:hover) > .btn--primary, .nav-actions:has(.nav-phone:focus-visible) > .btn--primary { opacity: 0; transform: translateX(12px); pointer-events: none; }
  .nav-actions:has(.nav-phone:hover) .nav-langs, .nav-actions:has(.nav-phone:focus-visible) .nav-langs { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}
/* 768–1199px (menu button mode): only the flags in the pills, so they never cover the logo */
@media (max-width: 1199px) {
  .lang-pick__list a span { display: none; }
  .lang-pick__list a { padding: .2rem !important; }
}
/* Top menu: a little bigger, letters and words closer together */
@media (min-width: 900px) {
  .site-header .nav-links a { font-size: .82rem !important; letter-spacing: .06em !important; }
  .site-header .nav-links { gap: 1.35rem !important; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .site-header .nav-links a { font-size: .76rem !important; letter-spacing: .04em !important; }
  .site-header .nav-links { gap: .9rem !important; }
}
.marquee__track { letter-spacing: .12em !important; }
/* Hero hairstyle v3: "Style inspirations" (same small type as before) level with "Prevention beats cutting";
   the changing name just above the photo; the photo's bottom level with Book Online */
.hero-hair__eyebrow { display: block; order: 0; text-align: center; font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: none; color: var(--ink-mute); margin: 0 0 .5rem; }
.hero-hair figcaption { order: 1 !important; margin: 0 0 .6rem !important; }
.hero-hair__stage { order: 2; }
@media (min-width: 768px) {
  .hero__inner > .hero-hair { align-self: stretch !important; justify-content: flex-start; }
  .hero-hair__eyebrow { margin: 3px 0 0; }
  .hero-hair figcaption { margin-top: auto !important; }
}
@media (min-width: 768px) { .hero-hair__eyebrow { margin-top: 5px; } }
/* Top menu v3: bigger words; the home icon on its own, next to the logo */
@media (min-width: 1200px) {
  .site-header .nav > nav { flex: 1 1 auto; display: flex; }
  .site-header .nav-links { flex: 1 1 auto; justify-content: flex-end; }
  .site-header .nav-links > li:first-child { margin-right: auto; margin-left: -.6rem; }
  .site-header .nav-links a { font-size: .92rem !important; letter-spacing: .05em !important; }
  .site-header .nav-links { gap: 1.25rem !important; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-header .nav-links a { font-size: .86rem !important; letter-spacing: .03em !important; }
  .site-header .nav-links { gap: .9rem !important; }
}
/* Phone (desktop): no sliding number — hovering the handset turns the Book Now button into the phone number (tap to call) */
@media (min-width: 768px) {
  .site-header .nav-phone .nav-phone__num { display: none !important; }
  .nav-actions:has(.nav-phone:hover) > .btn--primary { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .site-header .nav-actions > .btn--primary { position: relative; }
  .site-header .nav-actions > .btn--primary .btn-call { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; opacity: 0; transition: opacity .25s ease; font-family: var(--logo); letter-spacing: .08em; font-size: .95rem; white-space: nowrap; }
  .site-header .nav-actions > .btn--primary > :not(.btn-call) { transition: opacity .2s ease; }
  .nav-actions.phone-mode > .btn--primary > :not(.btn-call) { opacity: 0; }
  .nav-actions.phone-mode > .btn--primary .btn-call { opacity: 1; }
}
/* Top menu v4: bigger words, more space between the words (letters stay close) */
@media (min-width: 1200px) {
  .site-header .nav-links a { font-size: 1.02rem !important; letter-spacing: .04em !important; }
  .site-header .nav-links { gap: 1.9rem !important; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-header .nav-links a { font-size: .95rem !important; letter-spacing: .03em !important; }
  .site-header .nav-links { gap: 1.2rem !important; }
}
@media (min-width: 1440px) { .site-header .nav-links > li:first-child { padding-right: 1.6rem; border-right: 1px solid rgba(255,255,255,.22); } }
/* Home icon back with the other words, next to Story */
.site-header .nav-links > li:first-child { margin-right: 0 !important; margin-left: 0 !important; padding-right: 0 !important; border-right: 0 !important; }
.lang-pick__hint { display: inline-flex; align-items: center; gap: .3rem; }
.lang-pick__chev { opacity: .85; transition: transform .25s ease; }
.lang-pick.is-open .lang-pick__chev { transform: rotate(180deg); }
/* Book page: short header so the service menu starts right away */
.menu-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem) !important; padding-bottom: .75rem !important; }
.menu-hero .book-rating { margin: 0 auto .9rem; }
.menu-hero h1 { margin: .35rem 0 1rem; }
.menu-hero .btn-row { margin-top: 0; }
.menu-hero + .menu-section { padding-top: clamp(1rem, 2vw, 1.5rem) !important; }
.menu-hero .book-rating { display: flex; width: fit-content; }
.menu-hero .eyebrow { display: block; }
/* Book header: Prefer to call · Google 4.5 · Open booking in Vagaro on one row, the title below */
.book-toprow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; max-width: 900px; margin: 0 auto .5rem; }
.book-toprow > .btn:first-child { justify-self: end; }
.book-toprow > .btn:last-child { justify-self: start; }
.book-toprow .book-rating { margin: 0 !important; }
.menu-hero h1 { margin: .9rem 0 .4rem !important; }
@media (max-width: 760px) {
  .book-toprow { grid-template-columns: 1fr 1fr; }
  .book-toprow .book-rating { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .book-toprow > .btn { justify-self: stretch !important; justify-content: center; font-size: .66rem; padding-left: .5rem; padding-right: .5rem; }
}
@media (max-width: 760px) {
  .book-toprow { grid-template-columns: 1fr; gap: .55rem; }
  .book-toprow .book-rating { grid-column: 1; }
  .book-toprow > .btn { font-size: .72rem; }
}
/* Tabs: same illustrations as the cards; on the green active tab the icon sits on a light disc */
.menu-tab__ico { width: 22px !important; height: 22px !important; border-radius: 50%; }
.menu-tab--sub .menu-tab__ico { width: 19px !important; height: 19px !important; }
.menu-tab.is-active:not(.menu-tab--sub) .menu-tab__ico { background: #fbf8f2; padding: 2px; box-sizing: content-box; }
/* Phones: the language flag sits in the header, right side (where the phone icon was); the list opens below */
@media (max-width: 767px) {
  .site-header .lang-pick { display: inline-flex !important; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  .site-header .lang-pick__hint { display: none; }
  .site-header .lang-pick__cur img { width: 30px; height: 30px; }
  .site-header .lang-pick__list { top: calc(100% + .6rem); right: 0; left: auto; flex-direction: column; align-items: stretch; transform: translateY(-8px); }
  .site-header .lang-pick.is-open .lang-pick__list { transform: translateY(0); }
  .site-header .lang-pick__list a span { display: inline !important; }
  .site-header .lang-pick__list a { padding: .3rem .9rem .3rem .3rem !important; }
}
/* Book: only the Google score on top; Open booking in Vagaro at the very end, as a fallback; less white before the footer */
.menu-hero .book-rating { margin: 0 auto .4rem !important; }
.menu-fallback { display: flex; justify-content: center; margin: 1.25rem 0 0; }
.menu-section { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.menu-note { margin-bottom: 0; }
/* Footer: a little smaller type; hours in proportion with the other columns */
.site-footer .footer-brand p { font-size: .92rem; line-height: 1.6; }
.site-footer ul a { font-size: .92rem; }
.site-footer h4 { font-size: .72rem; }
.site-footer .footer-hours { font-size: .82rem !important; }
.site-footer .footer-hours li span { font-size: .82rem !important; }
.site-footer .footer-hours li { padding-top: .45rem; padding-bottom: .45rem; }
.site-footer .footer-phone { font-size: 1.35rem; }
/* Language picker: a globe instead of a word (no translation needed), with the small arrow */
.lang-pick__globe { width: 17px; height: 17px; flex: none; }
.lang-pick__word[hidden] { display: none !important; }
@media (min-width: 900px) and (max-width: 1439px) { .lang-pick__hint { display: inline-flex !important; } }
@media (max-width: 767px) { .site-header .lang-pick__hint { display: none !important; } }
/* Language picker: "Change" styled exactly like "MIAMI" under the logo — small and quiet; the arrow stays */
.lang-pick__toggle { font-family: var(--sans); font-weight: 400; font-size: 8px; letter-spacing: 2.56px; color: rgba(255,255,255,.55); }
.lang-pick__toggle:hover { color: rgba(255,255,255,.85); }
.lang-pick__word { font-size: 8px; }
.lang-pick__chev { width: 8px; height: 8px; }
/* Top menu: hover/active = a rounded tile in the logo-disc green instead of the underline */
@media (min-width: 900px) {
  .site-header .nav-links a::after { display: none !important; }
  .site-header .nav-links a { padding: .45rem .7rem !important; border-radius: 8px; transition: background .2s ease, color .2s ease; }
  .site-header .nav-links a:hover { background: var(--logo-disc, rgba(28,42,31,.32)); color: #fff; }
  .site-header .nav-links a.is-active { background: rgba(28,42,31,.42); color: #fff; }
  .site-header .nav-links { gap: .55rem !important; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-header .nav-links { gap: .2rem !important; }
  .site-header .nav-links a { padding: .45rem .55rem !important; }
}
/* Language picker: "Change ▾" sits under the flag, on the same line as MIAMI under the logo */
@media (min-width: 768px) {
  .lang-pick__toggle { position: relative; }
  .site-header .lang-pick__hint { display: inline-flex !important; position: absolute; left: 50%; top: calc(100% + var(--lang-hint-dy, 2px)); transform: translateX(-50%); white-space: nowrap; line-height: 1; }
}
@media (min-width: 900px) {
  .site-header .nav-links a { display: inline-flex !important; align-items: center; justify-content: center; height: 36px; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; line-height: 1; }
}
/* Language picker v6: arrow on the left of a smaller flag; the word centred under the flag on the MIAMI line */
@media (min-width: 768px) {
  .lang-pick__toggle { gap: .35rem; }
  .lang-pick__cur { position: relative; }
  .lang-pick__cur img { width: 22px !important; height: 22px !important; border-width: 1.5px !important; }
  .site-header .lang-pick__hint { left: 50%; transform: translateX(-50%); }
  .lang-pick__chev { width: 9px; height: 9px; color: rgba(255,255,255,.7); }
}
/* Header: flag and phone get the same green hover tile as the menu words; "Change" only shows on hover */
@media (min-width: 768px) {
  .lang-pick__toggle { height: 36px; padding: 0 .55rem !important; border-radius: 8px; transition: background .2s ease; }
  .lang-pick__toggle:hover, .lang-pick.is-open .lang-pick__toggle { background: var(--logo-disc, rgba(28,42,31,.32)); }
  .site-header .lang-pick__hint { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
  .lang-pick__toggle:hover .lang-pick__hint, .lang-pick__toggle:focus-visible .lang-pick__hint, .lang-pick.is-open .lang-pick__hint { opacity: 1; }
  .site-header .nav-phone { width: 36px !important; height: 36px !important; border-radius: 8px !important; transition: background .2s ease; }
  .site-header .nav-phone:hover, .site-header .nav-phone:focus-visible, .nav-actions.phone-mode .nav-phone { background: var(--logo-disc, rgba(28,42,31,.32)) !important; }
}
/* Language toggle: the green tile is drawn behind flag + "Change", so the word sits inside it */
@media (min-width: 768px) {
  .lang-pick__toggle, .lang-pick__toggle:hover, .lang-pick.is-open .lang-pick__toggle { background: transparent !important; }
  .lang-pick__toggle::before { content: ""; position: absolute; left: -4px; right: -10px; top: -4px; bottom: -12px; border-radius: 8px; background: var(--logo-disc, rgba(28,42,31,.32)); opacity: 0; transition: opacity .2s ease; z-index: -1; pointer-events: none; }
  .lang-pick__toggle { z-index: 0; }
  .lang-pick__toggle:hover::before, .lang-pick__toggle:focus-visible::before, .lang-pick.is-open .lang-pick__toggle::before { opacity: 1; }
}
/* Phone: on hover the handset joins the white button, one single shape with the number */
@media (min-width: 768px) {
  .site-header .nav-actions.phone-mode .nav-phone { background: #fff !important; color: var(--green-deep, #3f5a36) !important; height: 42px !important; width: 44px !important; border-radius: 8px 0 0 8px !important; margin-right: -.9rem; position: relative; z-index: 1; }
  .site-header .nav-actions.phone-mode > .btn--primary { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
}
/* Home icon: a bit bigger, sitting on the same line as the menu words */
.site-header .nav-links a.nav-home svg { width: 21px; height: 21px; }
/* Logo: WONDERLONG + Aventura·Milano centred on the circle, Miami hanging just below */
@media (min-width: 768px) {
  .site-header .brand .brand-text { position: relative; }
  .site-header .brand .brand-city { position: absolute; left: 0; top: 100%; margin-top: 5px; }
}
/* Page intros: one style on every page — left-aligned and compact, like Services */
.menu-hero, .looks-hero, .reviews-hero, .page-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem) !important; padding-bottom: clamp(.75rem, 1.5vw, 1.25rem) !important; text-align: left !important; }
.videos-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem) !important; }
.menu-hero .container.text-center, .menu-hero h1 { text-align: left !important; }
.menu-hero .book-rating { margin: 0 0 .4rem !important; }
.page-hero .section-head { margin-left: 0 !important; max-width: 820px !important; text-align: left !important; }
.page-hero .section-head h1 { text-align: left !important; }
.reviews-hero .container { align-items: flex-start !important; text-align: left !important; }
.looks-hero + .looks-section { padding-top: clamp(1rem, 2vw, 1.5rem) !important; }
.rv-filters { justify-content: flex-start !important; margin-left: 0 !important; }
.page-hero + .section { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; }
/* Flag tile: only around arrow + flag; "Change" just below it, centred on the tile, never overlapping */
@media (min-width: 768px) {
  .lang-pick__toggle::before { top: 3px !important; bottom: 3px !important; left: 0 !important; right: 0 !important; }
  .site-header .lang-pick__cur { position: static !important; }
  .site-header .lang-pick__hint { left: 50% !important; top: calc(100% + 5px) !important; transform: translateX(-50%) !important; }
}
/* Phone (fix): keep the dark tile and the sizes; the tile just stretches right until it touches the white button — nothing moves */
@media (min-width: 768px) {
  .site-header .nav-actions.phone-mode .nav-phone { background: transparent !important; color: #fff !important; width: 36px !important; height: 44px !important; margin-right: 0 !important; border-radius: 8px !important; position: relative; z-index: 0; }
  .site-header .nav-actions.phone-mode .nav-phone::before { content: ""; position: absolute; top: 0; bottom: 1px; left: 0; right: -.9rem; border-radius: 8px 0 0 8px; background: var(--logo-disc, rgba(28,42,31,.32)); z-index: -1; }
}
/* Book Now + phone: on hover they turn dark with white text, like the active menu items */
@media (min-width: 768px) {
  .site-header .nav-actions > .btn--primary { transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .site-header .nav-actions > .btn--primary:hover,
  .site-header .nav-actions.phone-mode > .btn--primary { background: rgba(28,42,31,.42) !important; color: #fff !important; border-color: transparent !important; }
  .site-header .nav-actions > .btn--primary:hover *, .site-header .nav-actions.phone-mode > .btn--primary * { color: #fff !important; }
  .site-header .nav-actions > .btn--primary:hover svg, .site-header .nav-actions.phone-mode > .btn--primary svg { stroke: currentColor; }
  .site-header .nav-phone:hover, .site-header .nav-phone:focus-visible { background: rgba(28,42,31,.42) !important; }
  .site-header .nav-actions.phone-mode .nav-phone::before { background: rgba(28,42,31,.42) !important; }
}
/* Footer: the phone number lives in the call button; icons line up on the left, one under the other */
.site-footer .footer-cta .btn { justify-content: flex-start !important; padding-left: 1.5rem !important; padding-right: 1.25rem !important; }
.site-footer .footer-cta .btn .btn-ico { width: 1.05em; flex: 0 0 1.05em; }
.site-footer .footer-call-num { font-family: var(--logo); font-size: 1.15em; letter-spacing: .14em; }
@media (min-width: 768px) {
  .site-header .nav-actions.phone-mode .nav-phone::before { top: var(--ph-top, 0px) !important; bottom: auto !important; height: var(--ph-h, 42px) !important; }
}
/* Footer call/book buttons: lower, bigger number, more room between icon and text, content centred */
.site-footer .footer-brand .footer-cta .btn { justify-content: center !important; padding: .62rem 1.25rem !important; min-height: 0 !important; gap: 1.1rem !important; }
.site-footer .footer-brand .footer-cta .btn .btn-ico { width: 1.15em; height: 1.15em; flex: 0 0 1.15em; }
.site-footer .footer-brand .footer-call-num { font-size: 1.5em; letter-spacing: .1em; line-height: 1; }
.site-footer .footer-brand .footer-cta .btn { height: 44px !important; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important; }
.site-footer .footer-brand .footer-cta .btn--primary { gap: calc(1.1rem + 16px) !important; }
/* Footer: no see-through buttons — white ones stay white, the others take the dark green of the hours zebra */
.site-footer .footer-cta .btn--ghost { background: var(--zebra-dark) !important; border-color: transparent !important; color: #fff !important; }
.site-footer .footer-cta .btn--ghost:hover { background: var(--on-green) !important; color: var(--brand-green) !important; }
@media (min-width: 768px) { .site-header .nav-actions > .btn--primary .btn-call { font-size: 1.2rem; letter-spacing: .06em; } }
/* Videos: the title sits in the right column above "Now playing", so the player starts at the top */
.vplayer { grid-template-areas: "head" "screen" "info"; }
.vplayer > .videos-hero__head { grid-area: head; margin-bottom: 0; }
.vplayer > .vplayer__screen { grid-area: screen; }
.vplayer > .vplayer__info { grid-area: info; }
@media (min-width: 900px) {
  .vplayer { grid-template-areas: "screen head" "screen info"; grid-template-rows: auto 1fr; align-items: start; row-gap: clamp(1.25rem, 2.5vw, 2rem); }
  .vplayer > .videos-hero__head { align-self: end; }
  .vplayer > .vplayer__info { align-self: start; }
}
@media (min-width: 900px) {
  .vplayer > .videos-hero__head h1 { font-size: clamp(2.6rem, 4.2vw, 4.2rem); white-space: nowrap; }
  .vplayer > .videos-hero__head .videos-hero__avatar { width: 96px; height: 96px; }
}
@media (max-width: 899px) { .vplayer { grid-template-columns: minmax(0, 1fr); } .vplayer > * { min-width: 0; } .vplayer > .videos-hero__head h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } }
/* Services: title and Google rating centred again */
.menu-hero, .menu-hero .container.text-center, .menu-hero h1 { text-align: center !important; }
.menu-hero .book-rating { margin: 0 auto .4rem !important; }
/* Services tabs: hovering any tab turns it dark green, like the selected one */
@media (hover: hover) {
  .menu-tab:hover, .menu-tab--sub:hover { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%) !important; border-color: #46603e !important; color: #fff !important; }
  .menu-tab:hover .menu-tab__ico { background: #fbf8f2; padding: 2px; box-sizing: content-box; }
}
/* Story: four videos in a row next to the photo */
@media (min-width: 800px) { .story-videos .vcards--mini { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: none !important; } }
/* Story: the photo starts level with the second line of the title */
@media (min-width: 800px) { .story-hero { align-items: start !important; } .story-hero__media { margin-top: var(--story-photo-dy, 0px) !important; } }
@media (min-width: 900px) { .vplayer { align-items: stretch !important; } .vplayer > .videos-hero__head { align-self: start !important; } .vplayer > .vplayer__info { align-self: end !important; } .vplayer__info .btn-row { margin-bottom: 0; } .vplayer__info > :last-child { margin-bottom: 0 !important; } }
/* Our Guide: video cards on the same 4-column grid as the article cards (an empty slot stays empty) */
.vcards--journal { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
/* Story: Pierluigi's photo has the same size and column as the video player on the Videos page, top level with the title */
@media (min-width: 900px) {
  .story-hero { grid-template-columns: minmax(280px, 400px) 1fr !important; gap: clamp(1.5rem, 4vw, 3rem) !important; }
  .story-hero__media { max-width: 400px !important; width: 100%; aspect-ratio: 392 / 720 !important; border-radius: 10px !important; margin-left: 0 !important; justify-self: center; }
}
/* Story timeline: zebra bands (same soft green as the Services rows), easier to read */
.timeline__item { padding: clamp(1.1rem, 2.4vw, 1.6rem) 1rem clamp(1.1rem, 2.4vw, 1.6rem) 0 !important; z-index: 0; }
.timeline__item:last-child { padding-bottom: clamp(1.1rem, 2.4vw, 1.6rem) !important; }
.timeline__item::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--tl-pad) - .75rem); right: -.25rem; border-radius: 10px; background: transparent; pointer-events: none; }
.timeline__item:nth-child(odd)::after { background: rgba(79,107,69,.07); }
.timeline__item::before { top: calc(clamp(1.1rem, 2.4vw, 1.6rem) + .7rem) !important; }
.timeline__year { top: clamp(1.1rem, 2.4vw, 1.6rem) !important; }
/* Visit: Google 5-star button right above the hours and the map; Visit Us lands here */
.visit-anchor { display: flex; justify-content: center; margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); scroll-margin-top: 110px; }
.visit-anchor .hero-rating { display: inline-flex; width: auto; height: 44px; padding: 0 1.1rem; background: #fff; border-radius: 8px; }
/* Footer: the same Google button above the phone button, as wide as the buttons */
.site-footer .footer-cta .footer-rating { display: flex !important; align-items: center; justify-content: center; height: 44px; box-sizing: border-box; width: 100%; background: #fff; border-radius: 8px; text-decoration: none; order: -1; margin-bottom: 0; }
.site-footer .footer-cta .footer-rating strong { color: var(--ink, #1c2a1f); }
@media (min-width: 768px) { .site-header .nav-actions > .btn--primary .btn-call { transform: translateY(-2px); line-height: 1; } }
/* Services rows: on hover a light green band that floats inside the row (small gap above and below), instead of the beige fill */
.menu-rows div.menu-row { position: relative; z-index: 0; }
.menu-rows div.menu-row::before { content: ""; position: absolute; z-index: -1; inset: 5px 0; border-radius: 8px; background: #dfe8d6; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.menu-rows div.menu-row:hover { background: transparent !important; }
.menu-rows li:nth-child(even) div.menu-row:hover, .menu-rows li:only-child div.menu-row:hover { background: #f7f1e8 !important; }
.menu-rows div.menu-row:hover::before { opacity: 1; }
/* Home services: eight cards, one per department of the Services page, four per row */
@media (min-width: 1100px) { .svc-cards--8 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 640px) and (max-width: 1099px) { .svc-cards--8 { grid-template-columns: repeat(2, 1fr) !important; } }
.svc-cards--8 .svc-card__img { aspect-ratio: 4 / 3; }
/* Visit: a strip of the nail & pedicure area under hours and map */
.visit-gallery { margin-top: clamp(2rem, 4vw, 3rem); }
.visit-gallery .eyebrow { display: block; text-align: center; margin-bottom: 1rem; }
.visit-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.5vw, 1rem); }
@media (min-width: 900px) { .visit-gallery__grid { grid-template-columns: repeat(4, 1fr); } }
.visit-gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
/* Home Our Guide: articles on the same 4-column grid as the videos above */
.journal-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
/* Footer (desktop): last column ends on the same right edge as Book Now and the Chat button; a little more air between columns; left buttons 40px narrower */
@media (min-width: 1100px) {
  .site-footer .container.footer-grid { padding-right: var(--footer-right-gap, 40px); column-gap: 3rem !important; }
  .site-footer .footer-cta--follow { max-width: none !important; width: 100%; }
  .site-footer .footer-brand .footer-cta { max-width: calc(100% - 40px) !important; }
}
/* ============= KÉRASTASE CATALOG (preview of the shop) ============= */
.kp-hero { text-align: center !important; }
.kp-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: .02em; margin: .3rem 0 .8rem !important; }
.kp-hero .lede { max-width: 62ch; margin: 0 auto; }
.kp-body { padding-top: clamp(1rem, 2vw, 1.5rem) !important; }
.kp-fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kp-fam { display: flex; flex-direction: column; gap: .35rem; padding: .45rem .45rem .7rem; border: 1px solid #d9d2c4; border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); transition: background .2s ease, border-color .2s ease, color .2s ease; }
.kp-fam__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #f3efe7; }
.kp-fam__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-fam__name { font-family: var(--logo); font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; padding: 0 .2rem; }
.kp-fam__concern { font-size: .72rem; color: var(--ink-mute, #6b6b6b); line-height: 1.2; padding: 0 .2rem; }
.kp-fam:hover, .kp-fam.is-active { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%); border-color: #46603e; color: #fff; }
.kp-fam:hover .kp-fam__concern, .kp-fam.is-active .kp-fam__concern { color: rgba(255,255,255,.8); }
.kp-line { scroll-margin-top: 110px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kp-line__head { display: grid; gap: .3rem; margin-bottom: 1.25rem; }
.kp-line__head h2 { margin: 0; }
.kp-line__head p { margin: 0; max-width: 70ch; color: var(--ink-soft, #444); }
.kp-line__count { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); }
.kp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.kp-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e6dfd2; border-radius: 10px; overflow: hidden; }
.kp-card__img { display: block; aspect-ratio: 1 / 1; background: #fff; }
.kp-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6%; box-sizing: border-box; }
.kp-card__body { display: flex; flex-direction: column; gap: .3rem; padding: .8rem .9rem 1rem; border-top: 1px solid #f0ebe1; flex: 1; }
.kp-card__name { font-size: .9rem; line-height: 1.3; color: var(--ink); font-weight: 500; }
.kp-card__meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute, #777); }
.kp-card__price { margin-top: auto; font-family: var(--logo); font-size: 1.3rem; color: var(--green-deep); }
.kp-card__price .cur { font-size: .55em; margin-left: .15em; vertical-align: top; }
.kp-card__new { position: absolute; top: .6rem; left: .6rem; z-index: 1; background: var(--green-deep, #3f5838); color: #fff; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; }
.kp-note { font-size: .78rem; color: var(--ink-mute, #777); text-align: center; margin-top: 1rem; }
.kp-page .kp-line[hidden] { display: none !important; }
.brands__link { display: inline-block; margin-top: .75rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); text-decoration: none; font-weight: 600; }
.brands__link:hover { text-decoration: underline; }
a.brands__logo { display: flex; }
/* Looks — From our chairs: smaller photos with a little more air between them */
#from-our-chairs .looks-grid { gap: clamp(1.25rem, 2.8vw, 2.5rem); }
@media (min-width: 768px) { #from-our-chairs .looks-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { #from-our-chairs .looks-grid { grid-template-columns: repeat(5, 1fr); } }
/* Visit: salon photos sliding from right to left (pauses on hover) */
.visit-strip { overflow: hidden; margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.visit-strip__track { display: flex; gap: clamp(.6rem, 1.2vw, 1rem); width: max-content; animation: visit-strip 70s linear infinite; }
.visit-strip:hover .visit-strip__track { animation-play-state: paused; }
.visit-strip__track img { height: clamp(150px, 18vw, 230px); width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; flex: none; }
@keyframes visit-strip { from { transform: translateX(0); } to { transform: translateX(calc(-50% - clamp(.3rem, .6vw, .5rem))); } }
@media (prefers-reduced-motion: reduce) { .visit-strip__track { animation: none; } .visit-strip { overflow-x: auto; } }
/* Reviews page: centred again, less space between "Leave a review" and the star filters */
.reviews-hero { text-align: center !important; padding-bottom: .5rem !important; }
.reviews-hero .container { align-items: center !important; text-align: center !important; }
.rv-filters { justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
.reviews-hero + .reviews-list { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; }
.reviews-hero .btn-row { margin-top: 1.25rem !important; }
.visit-anchor .hero-rating, .site-footer .footer-cta .footer-rating { flex-direction: row !important; align-items: center !important; justify-content: center !important; }
/* Maps shown whole (no crop), so the pin and the area around the salon are fully visible */
.visit-map .map-crop iframe, .seeyou-map iframe { top: 0 !important; height: 100% !important; }
/* Our Guide (home and guide page): videos and articles always on the same columns — 4 on wide screens, 3 on medium, 2 on tablets */
.journal-videos .vcards--journal, .journal-videos ~ .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; }
@media (min-width: 900px) { .journal-videos .vcards--journal, .journal-videos ~ .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1100px) { .journal-videos .vcards--journal, .journal-videos ~ .grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 559px) { .journal-videos .vcards--journal, .journal-videos ~ .grid--3 { grid-template-columns: 1fr !important; } }
/* Services tabs: the icon always keeps the same size (only the colour changes on hover), so nothing jumps */
.menu-tab .menu-tab__ico { padding: 2px !important; box-sizing: content-box !important; background: transparent; transition: background .2s ease; }
.menu-tab.is-active:not(.menu-tab--sub) .menu-tab__ico { background: #fbf8f2; }
@media (hover: hover) { .menu-tab:hover .menu-tab__ico { background: #fbf8f2 !important; } }
.menu-tab { transition: background .2s ease, color .2s ease, border-color .2s ease !important; transform: none !important; }
/* Kérastase page: logo as the title; price on the right of the name, same type and format as the Services prices */
.kp-hero h1.kp-logo { margin: .6rem 0 1rem !important; line-height: 0; }
.kp-hero h1.kp-logo img { height: clamp(56px, 7vw, 84px); width: auto; display: inline-block; }
.kp-card__body { display: grid !important; grid-template-columns: 1fr auto; column-gap: .6rem; row-gap: .35rem; align-items: start; }
.kp-card__name { grid-column: 1; grid-row: 1; }
.kp-card__price { grid-column: 2; grid-row: 1; margin: 0 !important; display: inline-flex; align-items: flex-end; font-family: var(--logo); font-size: 1.45rem !important; letter-spacing: .04em; color: var(--green-deep); line-height: 1; white-space: nowrap; }
.kp-card__price .cur { order: 1; font-size: .5em !important; vertical-align: baseline; margin: 0 0 .12em .2em !important; letter-spacing: 0; }
.kp-card__meta { grid-column: 1 / -1; grid-row: 2; }
/* Home brand strip: logos no longer move on hover; Kérastase shows a small "View products" button underneath */
.brandstrip__item:hover { transform: none !important; }
.brandstrip__item { position: relative; }
.brandstrip__cta { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--green-deep, #3f5838); padding: .4rem .8rem; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.brandstrip__item:hover .brandstrip__cta, .brandstrip__item:focus-visible .brandstrip__cta { opacity: 1; }
@media (hover: none) { .brandstrip__cta { opacity: 1; } .brandstrip { padding-bottom: 2.6rem; } }
.brands__btn { margin-top: .5rem; }
/* Kérastase families: two rows of seven, each with its own colour */
@media (min-width: 1100px) { .kp-fams { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 1rem !important; } }
@media (min-width: 700px) and (max-width: 1099px) { .kp-fams { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
.kp-fam { position: relative; border-top: 4px solid var(--fam, #4f6b45) !important; padding-top: .55rem !important; }
.kp-fam__name { display: flex; align-items: center; gap: .45rem; }
.kp-fam__name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fam, #4f6b45); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--fam, #4f6b45); }
.kp-fam:hover, .kp-fam.is-active { background: color-mix(in srgb, var(--fam) 16%, #fff) !important; border-color: var(--fam) !important; color: var(--ink) !important; }
.kp-fam:hover .kp-fam__concern, .kp-fam.is-active .kp-fam__concern { color: var(--ink-soft, #555) !important; }
.kp-fam.is-active { box-shadow: 0 0 0 2px var(--fam) inset; }
/* Banner for each line, like the official site: text on the left, products on the right */
.kp-banner { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 1.5rem; background: #f4f3f1; min-height: clamp(170px, 20vw, 260px); display: flex; align-items: center; }
.kp-banner picture, .kp-banner img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kp-banner img { object-fit: cover; object-position: right center; }
.kp-banner__text { position: relative; z-index: 1; display: grid; gap: .35rem; padding: clamp(1.25rem, 3vw, 2.5rem); max-width: min(46%, 520px); }
.kp-banner__concern { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fam); }
.kp-banner h2 { margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.8rem); color: var(--ink); }
.kp-banner p { margin: 0; color: var(--ink-soft, #444); line-height: 1.5; }
.kp-banner .kp-line__count { color: var(--fam); }
.kp-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--fam); }
@media (max-width: 767px) { .kp-banner { min-height: 0; flex-direction: column; align-items: stretch; } .kp-banner picture, .kp-banner img { position: static; height: auto; } .kp-banner__text { max-width: none; } }
/* Home brand strip: Kérastase lines sliding from right to left under the logos (Wonderlong Italia and Mon Platin will join later) */
.brandlines { width: 100%; overflow: hidden; margin-top: 1.25rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.brandlines__track { display: flex; gap: 1rem; width: max-content; animation: visit-strip 134s linear infinite; }
.brandlines:hover .brandlines__track { animation-play-state: paused; }
.brandlines__card { position: relative; flex: none; width: clamp(240px, 26vw, 340px); aspect-ratio: 5 / 2; border-radius: 10px; overflow: hidden; background: #f4f3f1; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 0 1rem; border-bottom: 4px solid var(--fam); }
.brandlines__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 88% center; }
.brandlines__name, .brandlines__concern { position: relative; z-index: 1; max-width: 50%; }
.brandlines__name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.1; }
.brandlines__concern { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fam); margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) { .brandlines__track { animation: none; } .brandlines { overflow-x: auto; } }
.brandlines { margin-top: 2.6rem !important; }
.brandlines__card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(246,245,243,.97) 0%, rgba(246,245,243,.9) 40%, rgba(246,245,243,0) 62%); }
.brandlines__name, .brandlines__concern { z-index: 2; }
.brandlines__card img { object-position: right center !important; }
.brandlines__card { aspect-ratio: 3 / 1 !important; width: clamp(270px, 28vw, 380px) !important; }
.brandlines__card::before { background: linear-gradient(90deg, rgba(246,245,243,.95) 0%, rgba(246,245,243,.85) 30%, rgba(246,245,243,0) 50%) !important; }
.brandlines__name, .brandlines__concern { max-width: 42% !important; }
/* Mon Platin page: six families in one row; family buttons and banners use the clean pack shots */
@media (min-width: 900px) { .kp-fams--6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
.kp-fam__img--pack { background: #fff !important; }
.kp-fam__img--pack img { object-fit: contain !important; padding: 8%; box-sizing: border-box; }
.kp-banner--packs { background: linear-gradient(90deg, #f6f4f1 0%, #f6f4f1 45%, color-mix(in srgb, var(--fam) 14%, #fff) 100%); }
.kp-banner__packs { position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); display: flex; align-items: flex-end; gap: .25rem; height: 86%; }
.kp-banner__packs img { position: static !important; height: 100% !important; width: auto !important; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 767px) { .kp-banner__packs { position: static; transform: none; height: 140px; justify-content: center; order: -1; padding-top: 1rem; } }
.kp-banner__packs { transform: none !important; top: 7% !important; bottom: 7% !important; height: auto !important; max-width: 50%; justify-content: flex-end; overflow: hidden; }
.kp-banner__packs img:nth-child(n+4) { display: none; }
.kp-banner__packs img { height: 100% !important; mix-blend-mode: multiply; }
@media (max-width: 767px) { .kp-banner__packs { max-width: none; top: auto !important; bottom: auto !important; height: 140px !important; } }
/* Kérastase families: flatter cards — no coloured top line, bigger model on a grey-to-line-colour gradient */
.kp-fam { border-top: 1px solid #e3ddd1 !important; padding: .4rem .4rem .7rem !important; }
.kp-fam__img { aspect-ratio: 1 / 1 !important; background: linear-gradient(180deg, #ffffff 0%, #ffffff 25%, color-mix(in srgb, var(--fam) 60%, #fff) 100%) !important; }
.kp-fam__img img { object-fit: cover !important; object-position: center bottom !important; mix-blend-mode: multiply; }
.kp-fam__img--pack { background: linear-gradient(180deg, #fff 0%, #fff 30%, color-mix(in srgb, var(--fam) 35%, #fff) 100%) !important; }
.kp-fam__img--pack img { object-fit: contain !important; object-position: center !important; }
.kp-fam:hover, .kp-fam.is-active { background: #fff !important; border-color: var(--fam) !important; }
.kp-fam.is-active { box-shadow: 0 0 0 2px var(--fam) !important; }
/* Kérastase: gradient reversed (line colour at the top, white at the bottom) */
.kp-fam__img { background: linear-gradient(180deg, color-mix(in srgb, var(--fam) 60%, #fff) 0%, #ffffff 78%, #ffffff 100%) !important; }
/* Hair-concern tags above the families */
.kp-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .45rem; margin: 0 auto 1.25rem; }
.kp-tags__label { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute, #777); margin-right: .3rem; }
.kp-tag { font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .45rem .85rem; border-radius: 999px; border: 1px solid #d9d2c4; background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.kp-tag:hover { border-color: var(--green-deep, #3f5838); }
.kp-tag.is-active { background: var(--green-deep, #3f5838); border-color: var(--green-deep, #3f5838); color: #fff; }
.kp-fam.is-filtered-out { display: none !important; }
.kp-banner p { max-width: 60ch; }
/* Line banners: products bigger and further right, on the same colour-to-white gradient as the family photos */
.kp-banner:not(.kp-banner--packs) { background: linear-gradient(180deg, color-mix(in srgb, var(--fam) 45%, #fff) 0%, #ffffff 85%) !important; min-height: clamp(210px, 24vw, 320px) !important; }
.kp-banner:not(.kp-banner--packs) picture { left: auto !important; right: 0 !important; width: 72% !important; }
.kp-banner:not(.kp-banner--packs) img { object-fit: cover; object-position: right center !important; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%); mask-image: linear-gradient(90deg, transparent 0%, #000 22%); }
.kp-banner--packs { background: linear-gradient(180deg, color-mix(in srgb, var(--fam) 35%, #fff) 0%, #ffffff 85%) !important; }
.kp-banner::after { display: none !important; }
@media (max-width: 767px) { .kp-banner:not(.kp-banner--packs) picture { width: 100% !important; } .kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: none; mask-image: none; } }
@media (min-width: 768px) {
  .kp-banner:not(.kp-banner--packs) picture { width: 60% !important; }
  .kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%) !important; mask-image: linear-gradient(90deg, transparent 0%, #000 14%) !important; }
  .kp-banner__text { max-width: 40% !important; }
}
/* Family photos: softer colour, only above eye level */
.kp-fam__img { background: linear-gradient(180deg, color-mix(in srgb, var(--fam) 38%, #fff) 0%, color-mix(in srgb, var(--fam) 12%, #fff) 28%, #ffffff 42%, #ffffff 100%) !important; }
/* Kérastase: from the line title down, the whole page takes the colour of the chosen line (follows the selection) */
.kp-body { position: relative; isolation: isolate; }
.kp-body::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--line-top, 0px); height: clamp(520px, 60vw, 820px); background: linear-gradient(180deg, color-mix(in srgb, var(--line-color, transparent) 34%, var(--bg, #faf8f4)) 0%, color-mix(in srgb, var(--line-color, transparent) 12%, var(--bg, #faf8f4)) 45%, var(--bg, #faf8f4) 100%); transition: top .25s ease; pointer-events: none; }
.kp-banner, .kp-banner--packs, .kp-banner:not(.kp-banner--packs) { background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
.kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 92%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 92%, transparent 100%) !important; }
/* Family thumbnails: a small tube in the line colour instead of the dot */
.kp-fam__name::before { width: 10px !important; height: 18px !important; border-radius: 0 !important; box-shadow: none !important; background: var(--fam) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Crect x='3' y='0' width='4' height='3' rx='.6'/%3E%3Cpath d='M2 3.4h6l1 1.2V15l-1 3H2l-1-3V4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Crect x='3' y='0' width='4' height='3' rx='.6'/%3E%3Cpath d='M2 3.4h6l1 1.2V15l-1 3H2l-1-3V4.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: multiply !important; }
.kp-banner:not(.kp-banner--packs) picture { mix-blend-mode: multiply; }
/* Line banners: the photo keeps its own proportions, right-aligned and as tall as the banner — products never cut */
@media (min-width: 768px) {
  .kp-banner:not(.kp-banner--packs) { overflow: hidden !important; min-height: 250px !important; }
  .kp-banner:not(.kp-banner--packs) picture { left: auto !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: auto !important; height: 100% !important; }
  .kp-banner:not(.kp-banner--packs) img { position: static !important; width: auto !important; height: 100% !important; max-width: none !important; object-fit: contain !important; display: block; }
}
@media (min-width: 768px) {
  .kp-banner:not(.kp-banner--packs) picture { inset: 0 !important; width: 100% !important; display: flex !important; justify-content: flex-end; align-items: stretch; }
  .kp-banner:not(.kp-banner--packs) img { flex: none; }
}
@media (min-width: 768px) { .kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%) !important; mask-image: linear-gradient(90deg, transparent 0%, #000 30%) !important; } }
/* Banners: white background now melts into the page; no edge fade needed */
@media (min-width: 768px) { .kp-banner:not(.kp-banner--packs) img { -webkit-mask-image: none !important; mask-image: none !important; mix-blend-mode: multiply !important; } }
/* Prices in the colour of their line (a touch darker so they stay readable) */
.kp-line .kp-card__price { color: color-mix(in srgb, var(--fam) 82%, #000) !important; }
/* Line colour behind the page: fades in from the top and out at the bottom — no hard band edges */
.kp-body::before { top: calc(var(--line-top, 0px) - 160px) !important; height: clamp(760px, 80vw, 1100px) !important;
  background: linear-gradient(180deg, var(--bg, #faf8f4) 0%, color-mix(in srgb, var(--line-color, transparent) 26%, var(--bg, #faf8f4)) 22%, color-mix(in srgb, var(--line-color, transparent) 14%, var(--bg, #faf8f4)) 55%, var(--bg, #faf8f4) 100%) !important; }
/* Family cards: photo full-bleed at the top, left and right */
.kp-fam { padding: 0 0 .7rem !important; overflow: hidden; gap: .4rem !important; }
.kp-fam__img { border-radius: 0 !important; }
.kp-fam__name, .kp-fam__concern { padding-left: .6rem !important; padding-right: .5rem !important; }
/* Concern tags: label centred above, square-ish corners, a border in the colour of the line they point to */
.kp-tags__label { display: block; text-align: center; margin: 0 0 .7rem !important; }
.kp-tag { border-radius: 6px !important; border: 1.5px solid color-mix(in srgb, var(--tag, #3f5838) 70%, #fff) !important; }
.kp-tag:hover { background: color-mix(in srgb, var(--tag, #3f5838) 12%, #fff) !important; }
.kp-tag.is-active { background: var(--tag, #3f5838) !important; border-color: var(--tag, #3f5838) !important; color: #fff !important; }
.kp-tag--all { --tag: #1c2a1f; }
/* Kérastase logo at the top in black */
.kp-hero h1.kp-logo img[alt^="Kérastase"] { filter: brightness(0); }
.kp-fam__concern { font-size: .86rem !important; line-height: 1.25 !important; }
.kp-fam__name { font-size: 1rem !important; }
.kp-tag { font-size: .78rem !important; }
/* Product cards: line badge (tube in the line colour + line name) next to the type and size */
.kp-card__line { display: inline-flex; align-items: center; gap: .3rem; margin-right: .45rem; color: color-mix(in srgb, var(--fam) 82%, #000); font-weight: 600; }
.kp-card__line::before { content: ""; width: 7px; height: 13px; background: var(--fam);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Crect x='3' y='0' width='4' height='3' rx='.6'/%3E%3Cpath d='M2 3.4h6l1 1.2V15l-1 3H2l-1-3V4.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Crect x='3' y='0' width='4' height='3' rx='.6'/%3E%3Cpath d='M2 3.4h6l1 1.2V15l-1 3H2l-1-3V4.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.kp-card__meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: .2rem; }
/* Home brand strip: no logo row, no bottom line on the cards; the brand logo sits top-right inside each card */
.brandlines { margin-top: 1rem !important; }
.brandlines__card { border-bottom: 0 !important; }
.brandlines__card img.brandlines__logo { position: absolute !important; inset: auto !important; top: .55rem !important; right: .7rem !important; left: auto !important; width: auto !important; height: 14px !important; object-fit: contain !important; z-index: 3; filter: brightness(0); opacity: .75; }
/* Line cards in the home carousel: a thin border in the line colour all around */
.brandlines__card { border: 1.5px solid color-mix(in srgb, var(--fam) 60%, #fff) !important; box-sizing: border-box; }
.brandlines__card img.brandlines__logo { height: 21px !important; }
.brandstrip { background: #fff !important; }
.brandstrip__logos { gap: clamp(2.5rem, 8vw, 7rem) !important; }
/* Line banners: products-only crop, kept in the right-hand 58% so they never sit under the text */
@media (min-width: 768px) {
  .kp-banner:not(.kp-banner--packs) picture { left: auto !important; width: 58% !important; justify-content: flex-end; align-items: center; }
  .kp-banner:not(.kp-banner--packs) img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
}
.brandlines__card img.brandlines__logo { height: 17px !important; }
.kp-hero h1.kp-logo img { filter: brightness(0); }
/* Product pages: brand switcher at the top (Wonderlong · Kérastase · Mon Platin) */
.kp-brands { display: flex; justify-content: center; gap: .5rem; margin: 0 auto 1.6rem; flex-wrap: wrap; }
.kp-brands__item { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: .65rem 1.2rem; border: 1.5px solid #d9d2c4; border-radius: 8px; background: #fff; transition: background .2s, color .2s, border-color .2s; }
.kp-brands__item:hover { border-color: var(--green-deep, #3f5838); }
.kp-brands__item.is-active { background: #1c2a1f; border-color: #1c2a1f; color: #fff; }
/* Wonderlong page: wordmark as the title, "Ask in salon" instead of a price, short description */
.kp-logo--wl { line-height: 1 !important; }
.kp-logo--wl .brands__wl-name { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; color: #1c2a1f; }
.kp-logo--wl .brands__wl-sub { font-size: .9rem !important; }
.kp-card__price--ask { font-family: var(--sans) !important; font-size: .7rem !important; letter-spacing: .12em; text-transform: uppercase; align-self: center; white-space: nowrap; }
.kp-card__desc { grid-column: 1 / -1; font-size: .82rem; line-height: 1.45; color: var(--ink-soft, #555); }
/* Home line carousel: cards 25% taller and a little narrower */
.brandlines__card { width: clamp(250px, 25vw, 340px) !important; aspect-ratio: 2.15 / 1 !important; }
.brandlines__card img:not(.brandlines__logo) { object-fit: cover !important; object-position: right center !important; }
.brandlines__name { font-size: 1.4rem !important; }
.brandlines__concern { font-size: .68rem !important; }
/* Brand switcher with the logos */
.kp-brands { gap: clamp(.6rem, 2vw, 1.25rem) !important; align-items: stretch; }
.kp-brands__item { display: inline-flex !important; align-items: center; justify-content: center; padding: .7rem 1.4rem !important; min-height: 64px; background: #fff !important; color: var(--ink) !important; opacity: .55; }
.kp-brands__item:hover { opacity: 1; }
.kp-brands__item.is-active { opacity: 1; border-color: #1c2a1f !important; box-shadow: 0 0 0 1px #1c2a1f inset; }
.kp-brands__logo { height: 34px; width: auto; display: block; }
.kp-brands__logo--wl { display: inline-flex; align-items: center; gap: .55rem; height: auto; text-transform: uppercase; }
.kp-brands__logo--wl svg { width: 34px; height: 34px; }
.kp-brands__logo--wl .brandstrip__wl > span { font-size: 1.05rem; }
.kp-brands__logo--wl .brandstrip__wl small { font-size: .55rem; }
/* Wonderlong page title: the full logo, large and black */
.kp-title-wl { display: inline-flex; align-items: center; gap: 1rem; color: #1c2a1f; text-transform: uppercase; }
.kp-title-wl svg { width: clamp(56px, 7vw, 84px); height: clamp(56px, 7vw, 84px); color: #1c2a1f; }
.kp-title-wl svg path[stroke="#4f6b45"] { stroke: #1c2a1f; }
.kp-title-wl .brandstrip__wl > span { font-size: clamp(1.9rem, 4vw, 2.9rem); color: #1c2a1f; }
.kp-title-wl .brandstrip__wl small { font-size: clamp(.75rem, 1.2vw, .95rem); color: #1c2a1f; }
.kp-hero h1.kp-logo.kp-logo--wl { line-height: 1.2 !important; overflow: visible !important; }
.kp-title-wl .brandstrip__wl { display: inline-flex; flex-direction: column; gap: 8px; line-height: 1.1; }
.kp-title-wl .brandstrip__wl small { display: flex; justify-content: space-between; align-items: center; letter-spacing: .42em; font-weight: 600; }
/* Brand switcher = same as the home brands row: three logos, each with a View products button underneath */
.kp-brands { gap: clamp(2rem, 7vw, 6rem) !important; margin-bottom: 2.2rem !important; }
.kp-brands__item { flex-direction: column; gap: 1rem; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; opacity: 1 !important; text-decoration: none; }
.kp-brands__logo { height: 54px !important; }
.kp-brands__logo--wl { height: 54px !important; }
.kp-brands__logo--wl svg { width: 50px !important; height: 50px !important; }
.kp-brands__logo--wl .brandstrip__wl > span { font-size: 1.45rem !important; }
.kp-brands__logo--wl .brandstrip__wl small { font-size: .7rem !important; }
.kp-brands__item.is-active .kp-brands__btn { background: #1c2a1f !important; border-color: #1c2a1f !important; color: #fff !important; }
/* Home brand strip: black logos, bigger and stronger title */
.brandstrip__logos img { filter: brightness(0); }
.brandstrip__item--wl, .brandstrip__item--wl .brandstrip__mark, .brandstrip__item--wl .brandstrip__wl > span, .brandstrip__item--wl .brandstrip__wl small { color: #1c2a1f !important; }
.brandstrip__item--wl .brandstrip__mark path[stroke="#4f6b45"] { stroke: #1c2a1f; }
.brandstrip__item { opacity: 1 !important; }
.brandstrip__label { font-size: clamp(.95rem, 1.5vw, 1.2rem) !important; font-weight: 700 !important; letter-spacing: .26em !important; color: #1c2a1f !important; }
/* same black logos in the brand row of the product pages */
.kp-brands__logo:not(.kp-brands__logo--wl) { filter: brightness(0); }
.kp-brands__logo--wl, .kp-brands__logo--wl .brandstrip__wl > span, .kp-brands__logo--wl .brandstrip__wl small, .kp-brands__logo--wl svg { color: #1c2a1f !important; }
.kp-brands__logo--wl svg path[stroke="#4f6b45"] { stroke: #1c2a1f; }
/* Home quote: Pierluigi's portrait in a circle above his words */
.quote__portrait { display: block; width: clamp(110px, 12vw, 150px); height: clamp(110px, 12vw, 150px); border-radius: 50%; object-fit: cover; object-position: 50% 18%; margin: 0 auto 1.4rem; border: 4px solid #fff; box-shadow: 0 10px 28px -12px rgba(28,42,31,.45); }
/* Home method strip: bigger numbers, titles and texts */
.feature-strip .feature__num { font-size: clamp(3rem, 5vw, 4.2rem) !important; }
.feature-strip .feature h4 { font-size: clamp(1rem, 1.4vw, 1.2rem) !important; }
.feature-strip .feature p { font-size: clamp(1.05rem, 1.3vw, 1.2rem) !important; line-height: 1.55 !important; }
.feature-strip .feature { padding: clamp(2rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2rem) !important; }
/* Professional haircare title: a step back — middle weight and size */
.brandstrip__label { font-size: clamp(.85rem, 1.2vw, 1rem) !important; font-weight: 600 !important; letter-spacing: .24em !important; }
.quote:has(.quote__portrait) blockquote::before { display: none !important; content: none !important; }
.quote__by { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: 1.4rem; font-style: normal; }
.quote__name { font-family: var(--serif); font-size: 1.25rem; letter-spacing: .02em; text-transform: none; color: var(--ink); }
.quote__role { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-deep); }
/* Quote: small portrait between the words and the name, zoomed on the face */
.quote__by .quote__portrait { display: block; width: 76px !important; height: 76px !important; border-radius: 50%; overflow: hidden; margin: 0 auto .5rem !important; border: 3px solid #fff; box-shadow: 0 8px 22px -10px rgba(28,42,31,.45); padding: 0; }
.quote__by .quote__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transform: scale(1.9); transform-origin: 50% 22%; display: block; }
.quote:has(.quote__portrait) blockquote::before { display: none !important; content: none !important; }
.quote__by .quote__portrait img { transform: none !important; object-position: center !important; }
.kp-brands__item.is-active .kp-brands__btn { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%) !important; border-color: transparent !important; color: #fff !important; box-shadow: none !important; }
.kp-brands__item.is-active .kp-brands__btn { visibility: hidden !important; }
.kp-brands__item.is-active .kp-brands__btn { display: none !important; }
.kp-brands { align-items: flex-start !important; }
/* Home carousel: no fade over the products — the photo stays whole on white, text sits on the empty left side */
.brandlines__card::before { display: none !important; }
.brandlines__card { background: #fff !important; }
/* "N products" under each line: bigger */
.kp-line__count { font-size: .95rem !important; letter-spacing: .14em !important; font-weight: 600; margin-top: .3rem; }
.brandlines__logo--wl { position: absolute; top: .6rem; right: .7rem; z-index: 3; font-family: var(--logo); font-size: .78rem; letter-spacing: .28em; color: #1c2a1f; }
.brandlines__card img:not(.brandlines__logo) { object-position: right center !important; }
/* Carousel cards: brand logo top-left, aligned with the text */
.brandlines__card img.brandlines__logo, .brandlines__logo--wl { right: auto !important; left: 1rem !important; top: .8rem !important; }
.brandlines__name, .brandlines__concern { max-width: 34% !important; }
/* Carousel cards: real Wonderlong logo, bigger Mon Platin logo, title and text lower in the card */
.brandlines__logo--wl { display: inline-flex !important; align-items: center; gap: .35rem; font-size: inherit !important; letter-spacing: 0 !important; }
.brandlines__wlmark { width: 22px; height: 22px; color: #1c2a1f; flex: none; }
.brandlines__wlmark path[stroke="#4f6b45"] { stroke: #1c2a1f; }
.brandlines__wltext { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1; }
.brandlines__wltext > span { font-family: var(--logo); font-size: .7rem; letter-spacing: .26em; color: #1c2a1f; }
.brandlines__wltext small { font-size: .42rem; font-weight: 600; letter-spacing: .3em; color: #1c2a1f; display: inline-flex; align-items: center; gap: .3em; }
.brandlines__wltext .it-tricolore { width: 1.4em; height: .35em; }
.brandlines__card img.brandlines__logo[src*="mon-platin"] { height: 24px !important; }
.brandlines__card { justify-content: flex-end !important; padding-bottom: 1.1rem !important; }
/* Brand strip on wood, like the display shelves in the salon */
.brandstrip { background-color: var(--bg-alt) !important; background-image: linear-gradient(var(--wood-scrim), var(--wood-scrim)), url("../images/wood.jpg") !important; background-size: auto, 450px auto !important; background-repeat: repeat !important; }
/* Wonderlong page banner: the four bottles in a tidy row */
#line-wonderlong .kp-banner__packs { max-width: 56% !important; gap: .6rem !important; align-items: flex-end; top: 8% !important; bottom: 8% !important; }
#line-wonderlong .kp-banner__packs img { display: block !important; height: 100% !important; width: auto !important; mix-blend-mode: normal !important; }
#line-wonderlong .kp-banner__packs img:nth-child(2) { height: 62% !important; }
/* Line colour band never starts above its own section (it was covering the intro text on the Wonderlong page) */
.kp-body::before { top: max(0px, calc(var(--line-top, 160px) - 160px)) !important; }
/* View products buttons: no white highlight line on top */
.kp-brands__btn, .kp-brands__btn:hover, .brands__btn, .brands__btn:hover { box-shadow: none !important; }
.kp-brands__item:hover .kp-brands__btn { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%) !important; border-color: transparent !important; color: #fff !important; }
.kp-brands__item.is-active { display: none !important; }
/* Brand row: three equal columns, so Wonderlong sits exactly under the centred title */
@media (min-width: 700px) { .brandstrip__logos { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: center; width: min(100%, 1100px); gap: 2rem !important; } }
.brandstrip { border-top: 1px solid rgba(28,42,31,.18) !important; }
/* Brand strip = the products section: title, three brands with a short text and View products */
.brandstrip { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem) !important; }
.brandstrip__head { text-align: center; max-width: 760px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
.brandstrip__head h2 { margin: .4rem 0 .8rem; }
.brandstrip__head .lede { margin: 0 auto; }
.brandstrip__col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; max-width: 320px; }
.brandstrip__desc { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft, #444); min-height: 4.4em; }
.brandstrip__btn { box-shadow: none !important; }
.brandstrip__logos { align-items: start !important; }
.brandstrip__col .brandstrip__item { min-height: 64px; align-items: center; }

/* Products heading on one line, no subtitle */
.brandstrip__head { max-width: none; }
.brandstrip__head h2 { white-space: nowrap; margin-bottom: 0; }
@media (max-width: 900px) { .brandstrip__head h2 { white-space: normal; } }
/* View products: green on hover, like the product pages */
main .brandstrip__btn:hover { background: linear-gradient(135deg, #6c8b5f 0%, var(--brand-green, #4f6b45) 55%, #405a38 100%) !important; border-color: transparent !important; color: #fff !important; }

/* Review date in the same colour as the stars */
.rv__date { color: #e8a317 !important; font-weight: 500; }

/* Footer: white buttons so they read as buttons (call, Instagram, Google Reviews) */
.site-footer .footer-cta .btn--ghost { background: #fff !important; border-color: #fff !important; color: var(--brand-green, #4f6b45) !important; box-shadow: 0 6px 16px -10px rgba(0,0,0,.45) !important; }
.site-footer .footer-cta .btn--ghost:hover { background: var(--green-deep, #3f5838) !important; border-color: var(--green-deep, #3f5838) !important; color: #fff !important; }

/* Method steps under the founder quote: numbers and titles a bit smaller */
.feature-strip .feature__num { font-size: clamp(2.4rem, 3.6vw, 3.1rem) !important; }
.feature-strip .feature h4 { font-size: clamp(.9rem, 1.15vw, 1rem) !important; }
.feature-strip .feature p { font-size: clamp(.88rem, 1vw, .98rem) !important; line-height: 1.5 !important; }
.feature-strip .feature { padding: clamp(1.25rem, 2.2vw, 1.9rem) clamp(1rem, 2vw, 1.6rem) !important; }
.feature-strip { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; }

/* Kérastase banners: products are now cut out (transparent), so no blend: true colours */
.kp-banner:not(.kp-banner--packs) img, .kp-banner:not(.kp-banner--packs) picture { mix-blend-mode: normal !important; }

/* "All hair" on its own row, above the "Your hair" label */
.kp-tags--all { margin-bottom: .25rem !important; }

/* Product pages: brand switcher as a second flat-green bar right under the navbar, small white logos */
.kp-page .kp-brands { width: 100vw !important; max-width: none !important; margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) 0 clamp(1.25rem, 2.5vw, 2rem) calc(50% - 50vw) !important; padding: .45rem 16px !important; background: #3d5636 !important; gap: clamp(.4rem, 2vw, 1.5rem) !important; flex-wrap: nowrap !important; align-items: center !important; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,.12); }
.kp-page .kp-brands__item, .kp-page .kp-brands__item.is-active { display: inline-flex !important; flex-direction: row !important; visibility: visible !important; min-height: 0 !important; padding: .4rem 1rem !important; background: transparent !important; border: 1.5px solid transparent !important; border-radius: 8px !important; box-shadow: none !important; opacity: .72 !important; color: #fff !important; transition: opacity .2s, background .2s, border-color .2s; }
.kp-page .kp-brands__item:hover { opacity: 1 !important; background: rgba(255,255,255,.08) !important; }
.kp-page .kp-brands__item.is-active { opacity: 1 !important; background: #2c4027 !important; border-color: rgba(255,255,255,.55) !important; }
.kp-page .kp-brands__btn { display: none !important; }
.kp-page .kp-brands img.kp-brands__logo { height: 24px !important; width: auto; filter: brightness(0) invert(1) !important; }
.kp-page .kp-brands__logo--wl { color: #fff !important; gap: .4rem !important; }
.kp-page .kp-brands__logo--wl svg { width: 26px !important; height: 26px !important; color: #fff; }
.kp-page .kp-brands__logo--wl svg path[stroke="#4f6b45"] { stroke: #fff; }
.kp-page .kp-brands__logo--wl .brandstrip__wl, .kp-page .kp-brands__logo--wl .brandstrip__wl * { color: #fff !important; }
.kp-page .kp-brands__logo--wl .brandstrip__wl > span { font-size: .95rem !important; }
.kp-page .kp-brands__logo--wl .brandstrip__wl small { font-size: .5rem !important; }
@media (max-width: 600px) { .kp-page .kp-brands__item, .kp-page .kp-brands__item.is-active { padding: .35rem .5rem !important; } .kp-page .kp-brands img.kp-brands__logo { height: 18px !important; } .kp-page .kp-brands__logo--wl small { display: none; } }
.kp-page .kp-brands img.kp-brands__logo { height: 30px !important; }
.kp-page .kp-brands img.kp-brands__logo[alt^="Mon"] { height: 34px !important; }
.kp-page .kp-brands .brandstrip__mark, .kp-page .kp-brands .brandstrip__mark * { color: #fff !important; stroke: #fff !important; }
/* brand bar: three equal boxes, no white border */
.kp-page .kp-brands__item, .kp-page .kp-brands__item.is-active { flex: 0 0 clamp(96px, 26vw, 280px) !important; height: 64px !important; justify-content: center !important; border: 0 !important; }
.kp-page .kp-brands__item.is-active { background: #2a3d25 !important; }
@media (max-width: 600px) { .kp-page .kp-brands__item, .kp-page .kp-brands__item.is-active { height: 48px !important; } }

/* Mon Platin: 6 family cards exactly as wide as the 7 Kérastase ones, spread across the row */
@media (min-width: 1100px) { .kp-fams--6 { grid-template-columns: repeat(6, calc((100% - 6rem) / 7)) !important; justify-content: space-between !important; } }
@media (min-width: 900px) and (max-width: 1099px) { .kp-fams--6 { grid-template-columns: repeat(6, calc((100% - 4 * .75rem) / 5.3)) !important; justify-content: center !important; } }

.kp-card[hidden], .kp-line[hidden] { display: none !important; }

/* brand bar: fixed under the navbar while scrolling the product pages */
.kp-page > .kp-brands { position: sticky !important; top: var(--hdr-h, 72px); z-index: 90; width: 100% !important; margin: 0 !important; }
.kp-page > .kp-brands + .kp-hero { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; }

/* Landing pages: price list, related links, note */
.svc-prices { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 760px; }
.svc-price { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .6rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line, #e6dfd2); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.svc-price:hover { border-color: var(--brand-green, #4f6b45); box-shadow: 0 6px 18px -12px rgba(0,0,0,.35); }
.svc-price__name { font-weight: 600; }
.svc-price__dots { border-bottom: 1px dotted rgba(0,0,0,.25); transform: translateY(-.25em); }
.svc-price__val { font-weight: 600; color: var(--brand-green, #4f6b45); white-space: nowrap; }
.svc-price__desc { grid-column: 1 / -1; font-size: .92rem; color: var(--ink-mute, #666); }
.svc-note { margin-top: 1rem; font-size: .9rem; color: var(--ink-mute, #666); max-width: 760px; }
.svc-related { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-related a { display: inline-block; padding: .55rem 1rem; border: 1.5px solid var(--brand-green, #4f6b45); border-radius: 8px; background: #fff; color: var(--brand-green, #4f6b45); text-decoration: none; font-size: .9rem; font-weight: 600; letter-spacing: .02em; transition: background .2s, color .2s; }
.svc-related a:hover { background: var(--brand-green, #4f6b45); color: #fff; }
.svc-promo { background: var(--brand-green, #4f6b45); color: #fff; }
.svc-promo__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.svc-promo__tag { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: #fff; color: var(--brand-green, #4f6b45); padding: .35rem .7rem; border-radius: 6px; }
.svc-promo p { margin: 0; flex: 1 1 420px; color: #fff; }
.svc-promo__link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.svc-reviews { overflow: hidden; }
.svc-reviews__stars { color: #e8a317; letter-spacing: .08em; margin-right: .35rem; font-size: .8em; vertical-align: .1em; }
.svc-reviews__sum { margin: .4rem 0 1.25rem; color: var(--ink-mute, #666); }
.svc-reviews__sum strong { color: var(--ink); }
.svc-reviews__sum a { color: var(--brand-green, #4f6b45); font-weight: 600; }

/* Landing pages: the hero buttons stay at the bottom-left of the card whatever the text length, so only the text changes from page to page */
@media (min-width: 768px) {
  main.svc .hero__inner { align-items: stretch !important; }
  main.svc .hero__inner > .reveal { display: flex; flex-direction: column; justify-content: flex-start; }
  main.svc .hero__inner > .reveal > .btn-row { margin-top: auto !important; }
}
@media (min-width: 768px) { main.svc .hero__inner > .reveal { align-self: stretch !important; height: auto !important; } }
/* First-visit band with the micro-camera photo and the diagnosis video */
.svc-promo__inner { display: grid !important; grid-template-columns: 150px minmax(0, 1fr) 130px; align-items: center; gap: clamp(1rem, 3vw, 2.25rem) !important; padding-top: clamp(1.5rem, 3vw, 2.25rem) !important; padding-bottom: clamp(1.5rem, 3vw, 2.25rem) !important; }
.svc-promo__img img, .svc-promo__video img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.svc-promo__img img { aspect-ratio: 4 / 5; object-fit: cover; }
.svc-promo__video { position: relative; display: block; }
.svc-promo__video img { aspect-ratio: 9 / 14; object-fit: cover; }
.svc-promo__play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.svc-promo__play::after { content: ""; position: absolute; left: 18px; top: 14px; border-left: 14px solid var(--brand-green, #4f6b45); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.svc-promo__copy { min-width: 0; display: grid; gap: .55rem; justify-items: start; }
.svc-promo h2 { color: #fff; margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-wrap: balance; }
.svc-promo p { flex: none !important; max-width: 62ch; opacity: .92; }
.svc-promo__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: .2rem; }
.svc-promo__btn { background: #fff !important; color: var(--brand-green, #4f6b45) !important; border: 0 !important; }
.svc-promo__btn:hover { background: var(--green-deep, #3f5838) !important; color: #fff !important; }
@media (max-width: 760px) { .svc-promo__inner { grid-template-columns: 1fr 1fr; } .svc-promo__copy { grid-column: 1 / -1; grid-row: 1; } .svc-promo__img, .svc-promo__video { max-width: 160px; } }
.menu-row__name--link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.menu-row__name--link:hover { color: var(--brand-green, #4f6b45); border-bottom-color: currentColor; }
/* Landing pages: recommended products row */
.svc-prods { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.svc-prod { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem; background: #fff; border: 1px solid var(--line, #e6dfd2); border-radius: 10px; text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
.svc-prod:hover { border-color: var(--brand-green, #4f6b45); box-shadow: 0 10px 22px -14px rgba(0,0,0,.4); transform: translateY(-2px); }
.svc-prod__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: .5rem; }
.svc-prod__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.svc-prod__brand { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-green, #4f6b45); }
.svc-prod__name { font-weight: 600; }
@media (max-width: 760px) { .svc-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-prod__img { height: 190px; aspect-ratio: auto !important; }
.svc-prod__img img { width: auto; height: auto; max-height: 190px; }
@media (max-width: 760px) { .svc-prod__img { height: 140px; } .svc-prod__img img { max-height: 140px; } }
/* Privacy page */
.privacy { max-width: 760px; }
.privacy h1 { margin-bottom: 1.5rem; }
.privacy h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 1.75rem 0 .4rem; }
.privacy p { line-height: 1.65; color: var(--ink); }
.privacy__date { margin-top: 2rem; color: var(--ink-mute, #666); font-size: .9rem; }
.footer-bottom a.footer-privacy { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Service photo in the hero (instead of the changing models) */
.hero-hair--photo .hero-hair__stage::before { display: none; }
.hero-hair--photo .hero-hair__stage img { position: static; opacity: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; -webkit-mask-image: none !important; mask-image: none !important; filter: drop-shadow(0 14px 24px rgba(28,42,31,.22)) !important; }

/* Landing price list: centred like the FAQ, two columns on desktop, every card books that service */
.svc-menu { text-align: center; }
.svc-menu .svc-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; margin-left: auto; margin-right: auto; text-align: left; gap: .75rem; }
.svc-menu .svc-prices:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.svc-menu .svc-prices > li { display: flex; }
.svc-menu .svc-price { width: 100%; }
.svc-menu .svc-note { margin-left: auto; margin-right: auto; }
@media (max-width: 760px) { .svc-menu .svc-prices { grid-template-columns: minmax(0, 1fr); } }
/* Landing closing CTA: buttons centred under the title */
.svc-cta .btn-row { justify-content: center !important; }
/* Landing pages: the home brand carousel after the prices */
.svc-brands { overflow: hidden; }
.svc-brands__head { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.svc-brands__head h2 { text-wrap: balance; }