/* ============================================================
   MILLIE & CO — Nova
   Recreation of the Bellissima salon layout: olive + sage + gold on cream.
   Type: Playfair Display (display) · DM Sans (UI) · Dancing Script (accent)
   Palette values are sampled from the reference raster.
   No SVG anywhere — every icon is a generated raster used as a CSS mask.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-i.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dmsans.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dancing Script';
  src: url('fonts/script.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- palette, sampled from the reference ---- */
  --green:      #4D523C;   /* utility bar, feature bar, nav pill */
  --green-btn:  #45542F;   /* solid buttons on light grounds */
  --green-hov:  #354224;   /* button hover */
  --green-deep: #323A2D;   /* footer ground */
  --sage:       #8A9163;   /* eyebrows / overlines on light */
  --sage-pale:  #B3B985;   /* italic accent line in the hero */
  --sage-soft:  #C3CBA0;   /* footer accents, light pill */
  --gold:       #C7B183;   /* hero script line, small icons */
  --star:       #E8B33E;

  --cream:  #FAF9F7;       /* page ground */
  --band:   #EDEBE2;       /* offer band */
  --card:   #FFFFFF;
  --line:   #E7E4DA;
  --ink:    #161614;
  --body:   #5C5C55;
  --muted:  #8B8B83;

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:   'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script: 'Dancing Script', 'Snell Roundhand', cursive;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 56px; --s9: 72px; --s10: 96px; --s11: 128px;

  --r-btn: 10px; --r-card: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --sh-1: 0 4px 16px -10px rgba(30, 32, 24, .20);
  --sh-2: 0 16px 38px -22px rgba(30, 32, 24, .26);
  --sh-3: 0 34px 70px -34px rgba(30, 32, 24, .34);

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --bar-h: 44px;   /* utility bar */
  --nav-h: 82px;   /* white nav */
}

/* ============================================================
   BASE — generous throughout; never condensed, never negative tracking
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  font-stretch: 100%;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: clamp(40px, 5.4vw, 74px); line-height: 1.12; }
h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.35; }

/* the reference sets its third headline line in coloured italic serif */
h1 em { font-style: italic; color: var(--sage-pale); }
h2 em, h3 em { font-style: italic; color: var(--sage); }

.wrap { width: min(100% - 48px, 1240px); margin-inline: auto; }

.skip {
  position: fixed; z-index: 400; top: var(--s3); left: var(--s3);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  background: var(--green); color: #fff; font-size: 15px;
  transform: translateY(-500%); transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

:focus-visible { outline: 2px solid var(--green-btn); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .footer :focus-visible, .featurebar :focus-visible { outline-color: var(--sage-soft); }
::selection { background: var(--sage-pale); color: var(--ink); }

/* ============================================================
   ICONS — generated rasters driven as masks so they take currentColor.
   The element only paints where an icon URL has actually been supplied.
   ============================================================ */

.i {
  display: inline-block;
  width: 1em; height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
.i { display: none; }              /* nothing paints until an icon class supplies a mask */
.i[class*="i--"] { display: inline-block; }

/* every icon below is a generated raster; the URL resolves against this stylesheet */
.i--pin { --ic: url('img/iconL-pin.png'); }
.i--calendar { --ic: url('img/iconL-calendar.png'); }
.i--stylist { --ic: url('img/iconL-stylist.png'); }
.i--product { --ic: url('img/iconL-product.png'); }
.i--late { --ic: url('img/iconL-late.png'); }
.i--parking { --ic: url('img/iconL-parking.png'); }
.i--phone { --ic: url('img/icn-phone.png'); }
.i--mail { --ic: url('img/icn-mail.png'); }
.i--clock { --ic: url('img/icn-clock.png'); }
.i--sparkle { --ic: url('img/icn-sparkle.png'); }
.i--star { --ic: url('img/icn-star.png'); }
.i--check { --ic: url('img/icn-check.png'); }
.i--arrow { --ic: url('img/icn-arrow.png'); }
.i--instagram { --ic: url('img/icn-instagram.png'); }
.i--facebook { --ic: url('img/icn-facebook.png'); }
.i--leaf { --ic: url('img/icn-leaf.png'); }

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

.overline {
  margin: 0 0 var(--s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
}

.script {
  font-family: var(--script);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--gold);
  letter-spacing: .01em;
}

.head { max-width: 760px; }
.head--center { margin-inline: auto; text-align: center; }
.head__sub { margin-top: var(--s4); color: var(--body); }

/* the small leaf ornament the reference sets beneath each centred heading */
.leaf {
  display: block;
  width: 30px; height: 22px;
  margin: var(--s4) auto 0;
  background: var(--sage);
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
.leaf { display: none; }
.leaf[class*="i--"] { display: block; }

.section { padding: clamp(64px, 8vw, 118px) 0; }
.section--band { background: var(--band); }

/* ============================================================
   BUTTONS — rounded rectangles on the page, a full pill in the nav
   ============================================================ */

.btn {
  --mx: 50%; --my: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease),
              box-shadow .3s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(160px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .i { font-size: 19px; }

.btn--primary { background: var(--green-btn); color: #fff; box-shadow: var(--sh-1); }
.btn--primary:hover { background: var(--green-hov); box-shadow: var(--sh-2); }

.btn--pill { border-radius: var(--r-pill); padding-inline: 30px; }

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

/* hero secondary: translucent dark with a light hairline, as in the reference */
.btn--glass {
  background: rgba(18, 20, 15, .42);
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--glass:hover { background: rgba(18, 20, 15, .62); border-color: #fff; }

/* the reference pairs the secondary label with a filled round icon chip */
.btn__chip {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-btn);
  flex: none;
}
.btn__chip .i { font-size: 13px; }

.btn--light { background: var(--sage-soft); color: var(--green-deep); }
.btn--light:hover { background: #d3daaf; }

.btn--wide { width: 100%; }

/* ============================================================
   UTILITY BAR
   ============================================================ */

.topbar {
  background: var(--green);
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  line-height: 1.5;
}
.topbar__row {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.topbar__item { display: inline-flex; align-items: center; gap: 9px; padding-block: 12px; }
.topbar__item .i { font-size: 15px; color: var(--gold); }
.topbar__tel { font-weight: 700; color: #fff; transition: color .25s var(--ease); }
.topbar__tel:hover { color: var(--sage-soft); }

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

.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--cream);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line), var(--sh-1); background: rgba(250, 249, 247, .94); backdrop-filter: blur(10px); }

.nav__row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.brand { display: block; padding-block: 6px; }
.brand__logo { height: 46px; width: auto; }
.brand__fallback {
  display: none;
  font-family: var(--script);
  font-size: 38px;
  line-height: 1.1;
  color: var(--sage);
}
.brand.no-logo .brand__logo { display: none; }
.brand.no-logo .brand__fallback { display: block; }
.brand__sub {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  position: relative;
  padding: 12px 2px;
  font-size: 16px;
  color: var(--ink);
  transition: color .25s var(--ease);
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px;
  background: var(--green-btn);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--green-btn); }
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { font-weight: 700; }

.nav__cta { min-height: 50px; }

.nav__burger {
  display: none;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mmenu {
  display: none;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) 24px var(--s6);
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.mmenu a {
  display: flex; align-items: center;
  min-height: 52px;
  font-size: 18px;
  color: var(--ink);
}
.mmenu .btn { margin-top: var(--s3); }
.mmenu.open { display: flex; }

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

.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(80px, 11vw, 150px);
  /* room for the feature bar, which straddles the hero's bottom edge */
  padding-bottom: clamp(150px, 15vw, 210px);
  overflow: hidden;
}
/* overscanned below the hero box so the parallax shift (max 80px) can never
   expose a bare strip at the bottom edge; .hero's overflow:hidden clips it back */
.hero__media { position: absolute; inset: 0 0 -110px 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  will-change: transform;
}
/* scrim: heavy under the copy column, clear over the photography */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(20, 22, 16, .86) 0%, rgba(20, 22, 16, .74) 26%,
                    rgba(20, 22, 16, .40) 52%, rgba(20, 22, 16, .12) 74%, rgba(20, 22, 16, .05) 100%),
    linear-gradient(to bottom, rgba(20, 22, 16, .34), rgba(20, 22, 16, 0) 32%, rgba(20, 22, 16, .30));
}

.hero__copy { max-width: 660px; color: #fff; }
.hero__copy .script { margin-bottom: var(--s4); }
.hero__copy h1 { color: #fff; text-shadow: 0 2px 26px rgba(12, 14, 9, .34); }
.hero__sub {
  max-width: 500px;
  margin-top: var(--s5);
  font-size: 18px;
  color: rgba(255, 255, 255, .90);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s7); }

.hero__leaf {
  position: absolute;
  right: -60px; top: 8%;
  width: min(38vw, 460px);
  z-index: -1;
  opacity: .16;
  pointer-events: none;
}

/* hero entrance */
.hero [data-hero] { opacity: 0; transform: translateY(22px); }
.hero.ready [data-hero] {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero.ready [data-hero="1"] { transition-delay: .06s; }
.hero.ready [data-hero="2"] { transition-delay: .18s; }
.hero.ready [data-hero="3"] { transition-delay: .30s; }
.hero.ready [data-hero="4"] { transition-delay: .42s; }

/* ============================================================
   FEATURE BAR — straddles the hero's bottom edge
   ============================================================ */

.featurebar-holder {
  position: relative;
  z-index: 5;
  margin-top: clamp(-110px, -9vw, -78px);
}
.featurebar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 44px);
  border-radius: var(--r-xl);
  background: rgba(77, 82, 60, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-3);
  color: #fff;
}
.feature { display: flex; align-items: center; gap: var(--s4); }
.feature__ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  flex: none;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.feature__ic .i { font-size: 24px; }
.feature:hover .feature__ic { background: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.feature strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; color: #fff; }
.feature small { display: block; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .76); }

/* ============================================================
   SERVICES — six cards across, all content centred
   ============================================================ */

.svc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: clamp(38px, 4.4vw, 60px);
}
.svc__card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc__card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: #dcd7c9; }
.svc__img { overflow: hidden; }
.svc__img img {
  width: 100%;
  aspect-ratio: 1 / 1.14;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.svc__card:hover .svc__img img { transform: scale(1.06); }
.svc__body { padding: 20px 16px 26px; text-align: center; }
.svc__body h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--ink); }
.svc__body p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--body); }

.svc__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  margin-top: clamp(34px, 4vw, 52px);
  text-align: center;
}
.svc__note { font-size: 15px; color: var(--muted); }
.svc__note a { color: var(--green-btn); font-weight: 700; border-bottom: 1px solid currentColor; }

/* ============================================================
   ABOUT
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 5vw, 84px);
}
.about__media { position: relative; }
.about__media img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
/* Corner plate. Solid olive so it always separates from the photograph, set
   FLUSH into the corner so nothing floats and it cannot read as applied. Its
   richness is typographic — an inset hairline keyline, a small tracked prefix,
   a large serif numeral, a short rule and a tracked label — rather than any
   drawn object, because this design system has no emblem vocabulary. */
.plate {
  position: absolute;
  left: 0; bottom: 0;
  width: 190px;
  padding: 26px 20px 24px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  background: var(--green);
  text-align: center;
}
.plate::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(195, 203, 160, .40);
  border-radius: 0 15px 0 15px;
  pointer-events: none;
}
.plate__pre {
  display: block;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--sage-soft);
}
.plate__num {
  display: block;
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: #F4F1E7;
}
.plate__rule {
  display: block;
  width: 30px;
  height: 1px;
  margin: 13px auto;
  background: rgba(244, 241, 231, .34);
}
.plate__lab {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .17em;
  text-indent: .17em;
  text-transform: uppercase;
  color: rgba(244, 241, 231, .80);
}

.about__copy h2 { margin-bottom: var(--s5); }
.about__copy > p { max-width: 520px; }

.ticks { margin: var(--s7) 0; display: grid; gap: 16px; }
.ticks li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: 16px;
  color: var(--ink);
}
.ticks .i { font-size: 23px; color: var(--sage); }

/* ============================================================
   OFFER BAND
   ============================================================ */

.offer {
  position: relative;
  background: var(--band);
  overflow: hidden;
}
.offer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 340px);
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  min-height: 300px;
  padding-block: clamp(40px, 4vw, 52px) 0;
}
.offer__copy { padding-bottom: clamp(40px, 4vw, 52px); }
.offer__copy h2 {
  font-size: clamp(28px, 4vw, 54px);
  color: var(--green-btn);
  margin-bottom: 6px;
}
.offer__sub {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.3;
  color: var(--ink);
}
.offer__act { padding-bottom: clamp(40px, 4vw, 52px); }
.offer__media { align-self: end; }
.offer__media img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 26px 40px rgba(40, 44, 30, .18));
}
.offer__leaf {
  position: absolute;
  right: -40px; top: -30px;
  width: min(34vw, 380px);
  opacity: .5;
  pointer-events: none;
}
.offer__leaf--l {
  right: auto; left: -110px; top: auto; bottom: -80px;
  width: min(24vw, 260px);
  opacity: .35;
  transform: scaleX(-1);
}

/* ============================================================
   REVIEWS
   ============================================================ */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(38px, 4.4vw, 58px);
}
.review {
  margin: 0;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.review:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.review__stars { display: flex; gap: 5px; margin-bottom: var(--s4); color: var(--star); }
.review__stars .i { font-size: 19px; }
.review blockquote { margin: 0; font-size: 16px; line-height: 1.8; color: var(--body); }
.review figcaption { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.review figcaption img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.review figcaption b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.review figcaption small { display: block; font-size: 13px; color: var(--muted); }

.dots { display: flex; justify-content: center; gap: 9px; margin-top: var(--s6); }
[data-review-dots] { display: none; }
.dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--sage);
  opacity: .5;
  transition: background-color .3s var(--ease), opacity .3s var(--ease);
}
.dots i.on { background: var(--sage); opacity: 1; }

/* ============================================================
   GALLERY RAIL
   A real section, not a loose strip. The rail is full-bleed but its first card
   starts exactly on the page's content grid — the padding below resolves its
   percentages against the section box, which excludes the scrollbar, so it
   tracks .wrap precisely without the 100vw scrollbar discrepancy. Cards bleed
   off the right edge, which is what tells you there is more to see.
   ============================================================ */

.gallery { position: relative; overflow: hidden; }
.gallery__leaf {
  position: absolute;
  right: -80px; top: -40px;
  width: min(30vw, 380px);
  opacity: .42;
  pointer-events: none;
}
.gallery .wrap { position: relative; }

.rail {
  --gap: clamp(14px, 1.5vw, 22px);
  display: flex;
  gap: var(--gap);
  margin-top: clamp(34px, 4vw, 54px);
  padding-inline: calc((100% - min(100% - 48px, 1240px)) / 2);
  padding-bottom: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;          /* proximity, not mandatory: nothing is
                                             force-parked mid-rail on load */
  scroll-padding-inline-start: calc((100% - min(100% - 48px, 1240px)) / 2);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.shot {
  position: relative;
  margin: 0;
  /* The five cards divide the content grid exactly, so on a wide screen the
     track fills the column and is centred with the rest of the page and there
     is nothing to scroll. Once the grid drops below the 230px floor the cards
     stop shrinking, the track overflows, and it becomes a slider. */
  flex: 0 0 max(230px, calc((100% - 4 * var(--gap)) / 5));
  scroll-snap-align: start;               /* aligns to the grid, never centres */
  border-radius: var(--r-card);
  overflow: hidden;
  background: #ded9cc;
  box-shadow: var(--sh-1);
  transition: box-shadow .45s var(--ease), transform .45s var(--ease);
}
.shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.shot::after {                            /* scrim: always present, so the label
                                             is legible without needing hover */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to top, rgba(28, 32, 22, .86), rgba(28, 32, 22, .42) 42%, rgba(28, 32, 22, 0));
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.shot figcaption {
  position: absolute;
  z-index: 1;
  left: 0; right: 0; bottom: 0;
  padding: 20px 20px 18px;
  text-align: left;
}
.shot__k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: #F4F1E7;
}
.shot__d {                                /* revealed on hover without any layout
                                             shift — the row grows from 0fr to 1fr */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(244, 241, 231, .82);
  transition: grid-template-rows .45s var(--ease), opacity .35s var(--ease), margin-top .45s var(--ease);
}
.shot__d > span { overflow: hidden; }

@media (hover: hover) {
  .shot:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
  .shot:hover img { transform: scale(1.07); }
  .shot:hover::after { opacity: 1; }
  .shot:hover .shot__d,
  .shot:focus-within .shot__d { grid-template-rows: 1fr; opacity: 1; margin-top: 7px; }
}
/* touch devices never hover, so the descriptor is simply always shown */
@media (hover: none) {
  .shot__d { grid-template-rows: 1fr; opacity: 1; margin-top: 7px; }
}

/* the controls are only meaningful while the rail overflows; JS sets this flag */
.gallery.is-static .rail__foot { display: none; }

/* three columns so the dots sit on the section's true centre line — a flex row
   would push them left by half the nav's width */
.rail__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  margin-top: clamp(24px, 2.6vw, 34px);
}
.rail__foot .dots { grid-column: 2; margin-top: 0; }
.rail__nav { grid-column: 3; display: flex; gap: 10px; justify-self: end; }

.rnav {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--green-btn);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.rnav .i { font-size: 19px; }
.rnav--prev .i { transform: scaleX(-1); }   /* one generated arrow, mirrored */
.rnav:hover:not(:disabled) { background: var(--green-btn); border-color: var(--green-btn); color: #fff; transform: translateY(-2px); }
.rnav:disabled { opacity: .34; cursor: default; }

/* ============================================================
   VISIT + BOOKING
   ============================================================ */

.visit {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
  margin-top: clamp(38px, 4.4vw, 56px);
}
.visit__card {
  padding: clamp(26px, 2.8vw, 36px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.visit__card h3 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 18px; font-weight: 700; color: var(--ink);
}
.visit__card h3 .i { font-size: 21px; color: var(--sage); }
.visit__addr { margin-top: var(--s4); font-size: 16px; line-height: 1.7; color: var(--body); }
.visit__meta { margin-top: var(--s3); font-size: 14px; color: var(--muted); }
.visit__card .btn { margin-top: var(--s5); }

.hours { margin-top: var(--s4); }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.hours li:last-child { border-bottom: 0; }
.hours li.is-late span:last-child { color: var(--green-btn); font-weight: 700; }
.hours__closed { color: var(--muted); }

.book { display: grid; gap: var(--s5); }
.book__contact { display: grid; gap: 2px; margin-top: var(--s5); }
.book__contact li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.book__contact li:last-child { border-bottom: 0; }
.book__contact .i { font-size: 18px; color: var(--sage); }
.book__contact a { display: inline-block; padding-block: 12px; color: var(--ink); transition: color .25s var(--ease); }
.book__contact a:hover { color: var(--green-btn); }

.form { display: grid; gap: var(--s4); }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--card);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder { color: #b3b1a7; }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--green-btn);
  box-shadow: 0 0 0 3px rgba(69, 84, 47, .13);
}
.field input.is-error { border-color: #b4553f; box-shadow: 0 0 0 3px rgba(180, 85, 63, .12); }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.form__success {
  scroll-margin-block: 120px calc(120px + env(safe-area-inset-bottom));
  padding: 14px 16px;
  border: 1px solid var(--sage);
  border-radius: var(--r-btn);
  background: #f1f4e6;
  font-size: 15px;
  color: var(--green-hov);
}
.form__note { font-size: 13px; color: var(--muted); text-align: center; }

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

.footer {
  position: relative;
  background: var(--green-deep);
  color: rgba(255, 255, 255, .80);
  overflow: hidden;
}
.footer__leaf {
  position: absolute;
  right: -70px; top: -40px;
  width: min(32vw, 400px);
  opacity: .10;
  pointer-events: none;
}
.footer__top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  gap: clamp(30px, 4vw, 66px);
  padding: clamp(52px, 6vw, 84px) 0 clamp(40px, 4.4vw, 56px);
}
.footer__cta h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); }
.footer__cta p { margin-top: var(--s4); max-width: 330px; font-size: 16px; }
.footer__cta .btn { margin-top: var(--s5); }

.footer__contact { display: grid; gap: 6px; align-content: start; padding-left: clamp(0px, 3vw, 44px); border-left: 1px solid rgba(255,255,255,.14); }
.footer__contact li { display: flex; align-items: flex-start; gap: var(--s3); padding-block: 4px; font-size: 16px; line-height: 1.6; }
.footer__contact .i { font-size: 19px; color: var(--gold); margin-top: 3px; }
.footer__contact a { display: inline-block; padding-block: 10px; transition: color .25s var(--ease); }
.footer__contact a:hover { color: #fff; }

.footer__follow h4 { font-family: var(--sans); font-size: 16px; font-weight: 700; color: #fff; }
.footer__social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.footer__social a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .3s var(--ease);
}
.footer__social a:hover { background: var(--sage-soft); border-color: var(--sage-soft); color: var(--green-deep); transform: translateY(-3px); }
.footer__social .i { font-size: 21px; }

.footer__mid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(36px, 4vw, 52px) 0 clamp(30px, 3.4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer__logo { height: 52px; width: auto; }
.footer__brand .brand__sub { color: rgba(255, 255, 255, .55); }
.footer__brand .brand__fallback { color: var(--sage-soft); }
.footer__brand p { margin-top: var(--s4); font-size: 14px; max-width: 300px; }

.footer__col h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-soft);
  margin-bottom: var(--s3);
}
.footer__col a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer__col a:hover { color: #fff; padding-left: 5px; }

.footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5) 0 var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  color: rgba(255, 255, 255, .58);
}

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

.bookbar {
  position: fixed; z-index: 180;
  left: 0; right: 0; bottom: 0;
  display: none;
  gap: var(--s3);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 249, 247, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.bookbar.show { transform: none; }
.bookbar .btn { flex: 1; min-height: 50px; font-size: 15px; padding-inline: 14px; }
.bookbar .btn--ghost { flex: 0 0 34%; background: var(--card); }

/* ============================================================
   SCROLL REVEALS
   ============================================================ */

.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  .svc { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__follow { grid-column: 1 / -1; }
  .footer__mid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: block; }
  .featurebar { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 560px; }
  .reviews {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 min(86%, 460px); scroll-snap-align: center; }
  [data-review-dots] { display: flex; }
  .visit { grid-template-columns: 1fr; }
  .offer__row { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
  .offer__act { grid-column: 1; grid-row: 2; padding-bottom: clamp(40px, 4vw, 52px); padding-top: 0; }
  .offer__copy { padding-bottom: var(--s5); }
  .offer__media { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 40px, 1240px); }
  .rail { padding-inline: calc((100% - min(100% - 40px, 1240px)) / 2); scroll-padding-inline-start: calc((100% - min(100% - 40px, 1240px)) / 2); }
  .topbar { font-size: 13px; }
  .topbar__row { justify-content: center; flex-wrap: wrap; gap: var(--s2) var(--s5); }
  .topbar__mid { display: none; }
  .hero { padding-top: 66px; padding-bottom: 130px; }
  .hero__sub { font-size: 17px; }
  .hero__actions { gap: var(--s3); }
  .hero__actions .btn { flex: 1 1 auto; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .svc__body { padding: 16px 12px 22px; }
  .svc__body h3 { font-size: 16px; }
  .svc__body p { font-size: 13.5px; }
  /* a taller crop on a phone gives the plate room without it dominating */
  .about__media img { aspect-ratio: 4 / 4.2; }
  .plate { width: 140px; padding: 20px 14px 18px; }
  .plate::before { inset: 7px; }
  .plate__pre { font-size: 8px; letter-spacing: .26em; text-indent: .26em; }
  .plate__num { margin-top: 6px; font-size: 34px; }
  .plate__rule { width: 24px; margin: 10px auto; }
  .plate__lab { font-size: 8px; letter-spacing: .14em; text-indent: .14em; line-height: 1.65; }
  .field__row { grid-template-columns: 1fr; }
  .bookbar { display: flex; }
  body { padding-bottom: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__contact { padding-left: 0; border-left: 0; padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.14); }
  .footer__mid { grid-template-columns: 1fr 1fr; }
  .footer__bottom { padding-bottom: 92px; }
}

@media (max-width: 560px) {
  .featurebar-holder { margin-top: -70px; }
  .featurebar { grid-template-columns: 1fr; gap: var(--s4); padding: 22px 20px; border-radius: var(--r-lg); }
  .offer__row { grid-template-columns: 1fr; min-height: 0; }
  .offer__media { grid-column: 1; grid-row: 3; justify-self: center; max-width: 300px; }
  .offer__act { grid-row: 2; }
  .offer__leaf { right: -80px; top: -20px; width: 260px; }
  .shot { flex: 0 0 68vw; }
}

@media (max-width: 420px) {
  .wrap { width: min(100% - 32px, 1240px); }
  .rail { padding-inline: calc((100% - min(100% - 32px, 1240px)) / 2); scroll-padding-inline-start: calc((100% - min(100% - 32px, 1240px)) / 2); }
  .brand__logo { height: 38px; }
  .brand__fallback { font-size: 31px; }
  .hero__copy .script { font-size: 24px; }
  .svc { gap: 12px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .hero [data-hero] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .svc__card:hover, .review:hover, .feature:hover .feature__ic,
  .footer__social a:hover { transform: none !important; }
  .svc__card:hover .svc__img img, .shot:hover img { transform: none !important; }
  .shot:hover { transform: none !important; }
  .hero__media img { transform: none !important; }
}