/* =========================================================================
   AMORE MIO NAIL STUDIO
   Design system + page styles
   Palette: warm ink / cream / porcelain / gold
   Type:    Bodoni Moda (display, Didone) + Montserrat (UI / body)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colour ------------------------------------------------------------- */
  --ink:          #17120d;   /* warm near-black, brown cast (not blue) */
  --ink-soft:     #241d15;   /* raised surfaces on dark bands           */
  --ink-line:     #3a3025;   /* hairlines on dark                       */
  --cream:        #f4eee2;   /* page ground for light bands             */
  --porcelain:    #fbf8f2;   /* cards / surfaces on cream               */
  --gold:         #a9781f;   /* large gold text + rules on cream (3:1+) */
  --gold-deep:    #6e5018;   /* small gold text (eyebrows) on cream 6:1 */
  --gold-bright:  #d9b65c;   /* hairlines / seal / accents on ink       */
  --gold-press:   #8a6520;   /* pressed / active                        */

  --text-cream:   #f4eee2;   /* body text on ink                        */
  --text-cream-2: rgba(244, 238, 226, 0.66);
  --text-ink:     #2b2118;   /* body text on cream                      */
  --text-ink-2:   rgba(43, 33, 24, 0.64);

  /* Type ------------------------------------------------------------- */
  --f-display: "Bodoni Moda", "Times New Roman", serif;
  --f-ui:      "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.42rem);
  --step-2:  clamp(1.55rem, 1.30rem + 1.2vw, 2.35rem);
  --step-3:  clamp(2.1rem, 1.55rem + 2.7vw, 3.9rem);
  --step-4:  clamp(2.9rem, 1.7rem + 5.6vw, 6.4rem);

  /* Space (8pt rhythm) --------------------------------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --band-y:    clamp(5rem, 3.2rem + 8vw, 9.5rem);

  --wrap:      1140px;
  --wrap-tight:880px;
  --radius:    2px;          /* near-square: editorial, not soft */

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.55s;

  --z-nav: 100;
  --z-panel: 200;
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--f-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.012em;
}

::selection { background: var(--gold-bright); color: var(--ink); }

/* Focus ring: deep gold on cream (6:1), bright gold on dark (9:1) */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.band--ink :focus-visible,
.hero :focus-visible,
.foot :focus-visible,
.nav-panel :focus-visible,
.masthead:not(.is-scrolled):not(.is-solid) :focus-visible { outline-color: var(--gold-bright); }

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--tight { --wrap: var(--wrap-tight); }

#main { position: relative; }        /* containing block for the spine */

.band {
  position: relative;
  padding-block: var(--band-y);
}
.band--ink   { background: var(--ink);   color: var(--text-cream); }
.band--cream { background: var(--cream);  color: var(--text-ink); }
.band--flush-top    { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

.stack > * + * { margin-top: var(--flow, 1.1em); }

/* -------------------------------------------------------------------------
   4. Type helpers
   ------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.band--ink .eyebrow,
.hero .eyebrow { color: var(--gold-bright); }   /* dark backgrounds need the bright gold (9:1), not the deep gold (2.6:1) */

.display-xl { font-size: var(--step-4); }
.display-l  { font-size: var(--step-3); }
.display-m  { font-size: var(--step-2); }

.script {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
.band--ink .script { color: var(--gold-bright); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-ink-2);
  max-width: 46ch;
}
.band--ink .lede { color: var(--text-cream-2); }

.fine {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--text-ink-2);
}
.band--ink .fine { color: var(--text-cream-2); }

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  --bd: var(--ink);
  --fg: var(--ink);
  --bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.7rem;
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform 0.35s var(--ease-out);
}
.btn .arw { transition: transform 0.35s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.btn--solid { --bg: var(--ink); --fg: var(--cream); --bd: var(--ink); }
.btn--solid:hover { --bg: var(--gold-press); --bd: var(--gold-press); --fg: #fff; }

.btn--gold  { --bg: var(--gold-bright); --fg: var(--ink); --bd: var(--gold-bright); }
.btn--gold:hover { --bg: #e6c983; --bd: #e6c983; }

.btn--ghost-light { --fg: var(--cream); --bd: rgba(244,238,226,0.4); }
.btn--ghost-light:hover { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }

.btn--lg { padding: 1.15rem 2.1rem; }

/* -------------------------------------------------------------------------
   6. Header / nav
   ------------------------------------------------------------------------- */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
  color: var(--cream);
  transition: background 0.4s var(--ease-out),
              color 0.4s var(--ease-out),
              padding 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}
.masthead.is-scrolled {
  background: var(--cream);
  color: var(--ink);
  padding-block: 0.7rem;
  box-shadow: 0 1px 0 rgba(23,18,13,0.12), 0 12px 34px -24px rgba(23,18,13,0.5);
}
/* pages with a light hero start solid */
.masthead.is-solid {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(23,18,13,0.12);
}

.brand { display: flex; flex-direction: column; line-height: 1; letter-spacing: normal; }
.brand__name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 500;
}
.brand__kicker {
  font-family: var(--f-ui);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 0.32rem;
  opacity: 0.8;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav__link {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold-bright); }
.masthead.is-scrolled .nav__link[aria-current="page"],
.masthead.is-solid .nav__link[aria-current="page"] { color: var(--gold-deep); }

/* Header Book Now: outlined cream over the dark hero, solid ink once the bar turns cream */
.nav__cta {
  margin-left: 0.6rem;
  --fg: var(--cream);
  --bg: transparent;
  --bd: rgba(244, 238, 226, 0.6);
}
.nav__cta:hover { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.masthead.is-scrolled .nav__cta,
.masthead.is-solid .nav__cta { --fg: var(--cream); --bg: var(--ink); --bd: var(--ink); }
.masthead.is-scrolled .nav__cta:hover,
.masthead.is-solid .nav__cta:hover { --bg: var(--gold-press); --bd: var(--gold-press); --fg: #fff; }

.nav-toggle { display: none; }

/* mobile panel */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  background: var(--ink);
  color: var(--cream);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.4rem;
  padding: clamp(2rem, 12vw, 6rem);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.nav-panel.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.nav-panel__link {
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.25;
}
.nav-panel__link[aria-current="page"] { color: var(--gold-bright); font-style: italic; }
.nav-panel__meta { margin-top: var(--space-l); font-size: var(--step--1); letter-spacing: 0.14em; color: var(--text-cream-2); }
.nav-panel__close {
  position: absolute;
  top: 1.6rem; right: clamp(1.25rem, 5vw, 3rem);
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  font-size: 1.6rem;
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;                 /* comfortable thumb target */
    padding-inline: 0.25rem;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .nav-toggle__bars { width: 26px; height: 9px; position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
    background: currentColor;
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars::after { bottom: 0; }
}

/* -------------------------------------------------------------------------
   7. Signature spine  (a single gold hairline that "paints" down the page)
   ------------------------------------------------------------------------- */
.spine {
  position: absolute;
  top: 0; bottom: 0;
  left: max(0.9rem, calc(50% - var(--wrap) / 2 - 1.9rem));
  width: 1px;
  background: rgba(23,18,13,0.14);
  pointer-events: none;
  z-index: 3;
}
/* The header is fixed to the screen and the line scrolls with the page, so the line passes behind the "Amore Mio"
   wordmark at every scroll position. While the header is transparent (over the dark hero) nothing covers it, so the line
   stays hidden until the bar turns solid cream, which sits on top of it. (JS adds .is-past-hero with the same trigger.) */
.spine { transition: opacity 0.5s var(--ease-out); }
body[data-dark-hero]:not(.is-past-hero) .spine { opacity: 0; }
@media (max-width: 1200px) { .spine { display: none; } }
.spine__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--gold-bright), var(--gold));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  will-change: transform;
}
.spine__node {
  position: absolute;
  left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid rgba(23,18,13,0.3);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.spine__node.is-lit {
  background: var(--gold-bright);
  border-color: var(--gold);
  transform: scale(1.25);
}
@media (max-width: 700px) {
  .spine { left: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spine__fill { transform: scaleY(1); }
}

/* -------------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--ink);
  color: var(--text-cream);
  isolation: isolate;
}
.hero--short { min-height: 74svh; }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .ph {
  position: absolute;
  left: 0; right: 0; top: -9%;
  height: 118%;                 /* headroom for parallax drift */
  will-change: transform;
  background: linear-gradient(155deg, #241a10, #120d08 78%);
}
.hero__media .ph__frame { inset: 1.5rem; border-color: rgba(217, 182, 92, 0.16); }
.hero__media .ph__label {         /* discreet corner note, not a centred caption */
  position: absolute;
  left: 1.9rem; bottom: 1.6rem;
  max-width: 30ch;
  text-align: left;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.8;
  color: rgba(244, 238, 226, 0.42);
}
.hero__media .ph__label b {
  display: inline;
  margin: 0;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(217, 182, 92, 0.6);
}
.hero__media .ph__label b::after { content: " — "; color: rgba(244, 238, 226, 0.3); }
@media (prefers-reduced-motion: reduce) {
  .hero__media .ph { top: 0; height: 100%; transform: none !important; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23,18,13,0.62) 0%, rgba(23,18,13,0.22) 38%, rgba(23,18,13,0.85) 100%),
    linear-gradient(90deg, rgba(23,18,13,0.6) 0%, rgba(23,18,13,0) 60%);
}

.hero__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(6rem, 18vh, 12rem) clamp(3.5rem, 10vh, 6rem);
}
.hero__title {
  font-size: var(--step-4);
  margin-top: 1.4rem;
  max-width: 16ch;
}
.hero__sub { margin-top: 1.6rem; color: var(--text-cream-2); }
.hero__actions { margin-top: 2.3rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__scroll {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-cream-2);
}
.hero__scroll span.line {
  width: 46px; height: 1px; background: var(--gold-bright);
  transform-origin: left;
  animation: scrollpulse 2.6s var(--ease-out) infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll span.line { animation: none; transform: scaleX(1); }
}

/* Seal ------------------------------------------------------------------- */
.seal {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  width: clamp(88px, 11vw, 130px);
  aspect-ratio: 1;
  z-index: 2;
}
.seal svg { width: 100%; height: 100%; overflow: hidden; }
.seal text { fill: var(--gold-bright); }
.seal .seal__mono {
  font-family: var(--f-display);
  font-style: italic;
  fill: var(--text-cream);
}
.seal .seal__ring { fill: none; stroke: var(--gold-bright); stroke-width: 0.6; opacity: 0.6; }
@media (max-width: 640px) { .seal { display: none; } }

/* -------------------------------------------------------------------------
   9. Placeholder image blocks  (swap for real photography)
   ------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(217,182,92,0.16), transparent 55%),
    radial-gradient(120% 120% at 85% 90%, rgba(110,80,24,0.22), transparent 60%),
    linear-gradient(155deg, #221a12, #14100b 70%);
  color: var(--text-cream-2);
  aspect-ratio: 4 / 5;
}
.ph::after {                      /* fine grain so it doesn't read as flat */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: screen;
}
.ph__frame {
  position: absolute; inset: 0.9rem;
  border: 1px solid rgba(217,182,92,0.35);
}
.ph__label {
  position: relative;
  z-index: 1;
  max-width: 80%;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(244,238,226,0.72);
}
.ph__label b {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gold-bright);
  margin-bottom: 0.5rem;
}
.ph--wide  { aspect-ratio: 16 / 10; }
.ph--tall  { aspect-ratio: 3 / 4; }
.ph--full  { aspect-ratio: auto; }
.ph--light {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(169,120,31,0.14), transparent 55%),
    linear-gradient(155deg, #efe7d6, #e5dbc6);
  color: var(--text-ink-2);
}
.ph--light .ph__frame { border-color: rgba(110,80,24,0.35); }
.ph--light .ph__label { color: rgba(43,33,24,0.6); }
.ph--light .ph__label b { color: var(--gold-deep); }

/* -------------------------------------------------------------------------
   10. Reusable sections
   ------------------------------------------------------------------------- */

/* Two-column intro */
.split {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.95fr 1.05fr; }
  .split--media-first > .split__media { order: -1; }
}
.split__title { font-size: var(--step-3); }
.split__body { margin-top: var(--space-m); }
.split__body p + p { margin-top: 1em; }

/* Long bio: keep the portrait in view while the text scrolls past */
@media (min-width: 900px) {
  #story .split__media { position: sticky; top: 6.5rem; align-self: start; }
}
.story__close {
  margin-top: 1.4em;
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--gold-deep);
}

/* Service cards */
.services-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  margin-top: var(--space-xl);
}
.svc {
  display: flex;
  flex-direction: column;
}
.svc__media { overflow: hidden; }
.svc__media .ph { transition: transform 0.7s var(--ease-out); }
.svc:hover .svc__media .ph { transform: scale(1.045); }
.svc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(23,18,13,0.16);
}
.band--ink .svc__head { border-color: var(--ink-line); }
.svc__name { font-size: var(--step-1); }
.svc__price {
  font-family: var(--f-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  white-space: nowrap;
}
.band--ink .svc__price { color: var(--gold-bright); }
.svc__desc { margin-top: 0.9rem; color: var(--text-ink-2); font-size: var(--step-0); }
.band--ink .svc__desc { color: var(--text-cream-2); }

/* Feature row */
.marks {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: var(--space-xl);
  border-top: 1px solid var(--ink-line);
  padding-top: var(--space-l);
}
.mark__k {
  font-family: var(--f-display);
  font-size: var(--step-2);
  font-style: italic;
  color: var(--gold-bright);
}
.mark__t { margin-top: 0.5rem; font-size: var(--step--1); letter-spacing: 0.06em; color: var(--text-cream-2); }
/* inside a two-column split the three marks read better as a short list than a 2+1 grid */
.split .marks { grid-template-columns: 1fr; gap: 1.25rem; }
.split .mark { display: grid; grid-template-columns: 3.4rem 1fr; align-items: baseline; gap: 0.5rem; }
.split .mark__t { margin-top: 0; }

/* Gallery */
.gallery {
  columns: 2;                         /* two columns on phones (browse like Instagram), three from tablet width up */
  column-gap: clamp(0.6rem, 2vw, 1.5rem);
  margin-top: var(--space-xl);
}
@media (min-width: 900px) { .gallery { columns: 3; } }
.gallery > * {
  display: block;                    /* <a> is inline by default, which ignores margin-bottom and glued the tiles together */
  break-inside: avoid;
  margin-bottom: clamp(0.6rem, 2vw, 1.5rem);
}
.gallery .ph { transition: filter 0.6s var(--ease-out); }
.gallery a:hover .ph { filter: brightness(1.12) saturate(1.05); }

/* Testimonials */
.quotes { position: relative; text-align: center; min-height: 12rem; }
.quote {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--space-m);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  pointer-events: none;
}
.quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote__text {
  font-family: var(--f-display);
  font-size: var(--step-2);
  line-height: 1.34;
  max-width: 24ch;
  margin-inline: auto;
}
.quote__by { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-bright); }
.quotes__controls { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: var(--space-m); position: relative; }
.quotes__dots { display: flex; justify-content: center; }
.quotes__dots button {                /* 28x44 hit area around an 8px dot */
  position: relative;
  width: 28px; height: 44px;
}
.quotes__dots button::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(244,238,226,0.34);
  transition: background 0.3s, transform 0.3s;
}
.quotes__dots button[aria-current="true"]::before { background: var(--gold-bright); transform: scale(1.4); }
.quotes__pause {
  min-height: 44px; padding: 0 0.9rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-cream-2);
}
.quotes__pause:hover { color: var(--text-cream); }
@media (prefers-reduced-motion: reduce) {
  .quote { transition: opacity 0.3s linear; transform: none; }
}

/* Info / hours */
.info {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .info { grid-template-columns: 1fr 1fr; } }
.info dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.6rem; margin-top: var(--space-m); }
.info dt {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-deep); padding-top: 0.35rem;
}
.band--ink .info dt { color: var(--gold-bright); }
.info dd { font-size: var(--step-0); }
.info dd + dt { border-top: 1px solid rgba(23,18,13,0.14); }
.band--ink .info dd + dt { border-color: var(--ink-line); }
.info dd + dt, .info dd:has(+ dt) { padding-top: 0.85rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(23,18,13,0.12); }
.band--ink .hours-row { border-color: var(--ink-line); }
.hours-row.is-today { color: var(--gold-deep); font-weight: 600; }
.band--ink .hours-row.is-today { color: var(--gold-bright); }

/* Form */
.form { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-ink-2);
}
.band--ink .field label { color: var(--text-cream-2); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--step-0);
  padding: 0.9rem 1rem;
  color: inherit;
  background: var(--porcelain);
  border: 1px solid rgba(23,18,13,0.2);
  border-radius: var(--radius);
  transition: border-color 0.3s;
}
.band--ink .field input, .band--ink .field textarea, .band--ink .field select {
  background: var(--ink-soft); border-color: var(--ink-line);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 2px; border-color: var(--gold-deep);
}
.band--ink .field input:focus-visible, .band--ink .field textarea:focus-visible, .band--ink .field select:focus-visible {
  outline-color: var(--gold-bright); border-color: var(--gold-bright);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */
.form__note { min-height: 1.5em; }
.form__note.is-error { color: #e0a39a; }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }

/* CTA strip */
.cta-strip { text-align: center; }
.cta-strip .display-l { margin: var(--space-s) auto var(--space-l); max-width: 18ch; }

/* Interior-page hero (short, dark, no full-bleed photo) */
.hero--page {
  min-height: 52svh;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(217,182,92,0.16), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(110,80,24,0.28), transparent 60%),
    var(--ink);
}
.hero--page .hero__inner { padding-block: clamp(7rem, 18vh, 10rem) clamp(2.5rem, 7vh, 4.5rem); }
.page-title { font-size: var(--step-3); margin-top: 1rem; max-width: 20ch; }
.page-intro { margin-top: 1.4rem; }
.hero .lede { color: var(--text-cream-2); }   /* ledes sit on the dark hero */

/* Services menu */
.menu { margin-top: var(--space-xl); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.menu__group h3 {
  font-size: var(--step-2);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--gold);
}
.band--ink .menu__group h3 { border-color: var(--gold-bright); }
.menu__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(23,18,13,0.12);
}
.band--ink .menu__row { border-color: var(--ink-line); }
.menu__name { font-family: var(--f-display); font-size: var(--step-1); }
.menu__price {
  font-family: var(--f-ui); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.1em; color: var(--gold-deep); white-space: nowrap; align-self: center;
}
.band--ink .menu__price { color: var(--gold-bright); }
.menu__desc { grid-column: 1 / -1; color: var(--text-ink-2); font-size: var(--step-0); max-width: 62ch; }
.band--ink .menu__desc { color: var(--text-cream-2); }

/* Image row (about / space) */
.img-row {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin-top: var(--space-xl);
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.foot {
  background: var(--ink);
  color: var(--text-cream-2);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
}
.foot__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot__brand .brand__name { font-size: 2rem; color: var(--text-cream); }
.foot__brand p { margin-top: var(--space-s); max-width: 34ch; font-size: var(--step--1); }
.foot__title {                         /* a <p>, not a heading: keeps the document outline h1 > h2 clean */
  font-family: var(--f-ui); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright);
  margin-bottom: var(--space-s);
}
.foot ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.foot li > a { display: inline-block; padding-block: 0.4rem; }   /* ~32px+ tap height without changing the look */
.foot a:hover { color: var(--text-cream); }
.foot__base {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   12. Scroll reveal
   ------------------------------------------------------------------------- */
/* Hidden-until-revealed ONLY when JavaScript is running (.js is added by main.js).
   Without JS, or if the script fails, everything simply stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-reveal="children"] { opacity: 1; transform: none; }   /* the container itself stays put; its children animate */
.js .reveal[data-reveal="children"] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.js .reveal[data-reveal="children"].is-visible > * { opacity: 1; transform: none; }
.js .reveal[data-reveal="children"].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal[data-reveal="children"].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal[data-reveal="children"].is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.js .reveal[data-reveal="children"].is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.js .reveal[data-reveal="children"].is-visible > *:nth-child(6) { transition-delay: 0.4s; }

/* Reduced motion: no travel, just a soft fade. (Windows "Animation effects: off" and many
   phones' low-power modes trigger this, so it must still feel finished, not static.) */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal[data-reveal="children"] > * { transform: none; transition: opacity 0.7s ease; }
  .js .reveal[data-reveal="children"].is-visible > * { transition-delay: 0s; }
}

/* -------------------------------------------------------------------------
   13. Hero load choreography
   ------------------------------------------------------------------------- */
.js .hero__anim { opacity: 0; transform: translateY(28px); }
.hero.is-in .hero__anim {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.hero.is-in .hero__anim:nth-child(1) { transition-delay: 0.05s; }
.hero.is-in .hero__anim:nth-child(2) { transition-delay: 0.18s; }
.hero.is-in .hero__anim:nth-child(3) { transition-delay: 0.32s; }
.hero.is-in .hero__anim:nth-child(4) { transition-delay: 0.46s; }
.hero.is-in .hero__anim:nth-child(5) { transition-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__anim { transform: none; }
  .hero.is-in .hero__anim { transition: opacity 0.9s ease; }
}

/* -------------------------------------------------------------------------
   14. Utilities
   ------------------------------------------------------------------------- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.maxw-prose { max-width: 60ch; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: 0.5rem; z-index: 999;
  background: var(--ink); color: var(--cream);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform 0.3s;
}
.skip-link:focus { transform: none; }

/* -------------------------------------------------------------------------
   15. Small-screen refinements
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --step-4: clamp(2.6rem, 1.6rem + 5vw, 3.4rem); }

  .hero__inner { padding-block: clamp(4.5rem, 11vh, 6.5rem) clamp(3rem, 8vh, 4.5rem); }
  .hero__media .ph__label { display: none; }          /* no caption clutter on the mobile hero */
  .hero__title { max-width: 20ch; }

  .eyebrow { letter-spacing: 0.24em; gap: 0.7rem; }
  .eyebrow::before { width: 1.6rem; }

  .btn { padding: 0.9rem 1.25rem; letter-spacing: 0.13em; }
  .btn--lg { padding: 1rem 1.4rem; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__actions .btn { justify-content: center; }

  .masthead { padding-inline: 1.25rem; }
  .brand__name { font-size: 1.35rem; }

  .marks { padding-top: var(--space-m); gap: 1.25rem; }
  .quote__text { font-size: var(--step-1); }
  .quotes { min-height: 15rem; }
  .foot__base { font-size: 0.75rem; }
}

@media (max-width: 400px) {
  .wrap { width: min(100% - 1.75rem, var(--wrap)); }
}

/* -------------------------------------------------------------------------
   16. Photography + lightbox
   ------------------------------------------------------------------------- */
.photo { display: block; width: 100%; height: auto; background: var(--ink-soft); }
.gallery a { cursor: zoom-in; }
.gallery .photo { transition: filter 0.6s var(--ease-out); }
.gallery a:hover .photo, .gallery a:focus-visible .photo { filter: brightness(1.06) saturate(1.05); }

.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  background: rgb(14, 10, 7); color: var(--cream);          /* opaque: the page behind never shows through the viewer */
}
.lightbox::backdrop { background: rgba(14, 10, 7, 0.95); }
.lightbox[open] {
  display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  padding: clamp(0.75rem, 2.5vw, 2rem); gap: 1rem;
  animation: lb-in 0.35s var(--ease-out);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { min-height: 0; width: 100%; display: grid; place-items: center; }
/* Height is capped against the real screen (a % of an auto-height grid cell does not resolve and let tall photos overflow).
   11rem = padding + the caption/controls bar. dvh keeps phone browser toolbars from covering the bar. */
.lightbox__img {
  max-width: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 80px -30px #000;
  max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem);
}
@media (max-width: 640px) { .lightbox__img { max-height: calc(100vh - 14.5rem); max-height: calc(100dvh - 14.5rem); } }
.lightbox__bar { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 2rem); width: 100%; padding-top: 0.5rem; }
.lightbox__meta { display: grid; gap: 0.5rem; justify-items: center; text-align: center; max-width: 52ch; }
.lightbox__count { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); }
.lightbox__cap { font-size: var(--step--1); color: var(--text-cream-2); }
.lightbox__btn {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 1.7rem; line-height: 1; color: var(--cream);
  border: 1px solid rgba(244, 238, 226, 0.3); border-radius: 50%; background: rgba(23, 18, 13, 0.55);
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.lightbox__btn:hover { background: var(--cream); color: var(--ink); }
.lightbox__close { position: absolute; top: clamp(0.6rem, 2vw, 1.4rem); right: clamp(0.6rem, 2vw, 1.4rem); z-index: 2; }
.lightbox :focus-visible { outline-color: var(--gold-bright); }
@media (max-width: 640px) { .lightbox__bar { gap: 0.5rem; } .lightbox__btn { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* -------------------------------------------------------------------------
   17. Photo hero (home): one full-bleed photograph behind the text, with a gentle parallax drift
   ------------------------------------------------------------------------- */
.hero--photo .hero__media .photo {
  position: absolute; left: 0; right: 0; top: -9%;
  width: 100%; height: 118%; aspect-ratio: auto;          /* extra height is the headroom for the parallax drift */
  object-fit: cover; object-position: 72% 50%;
  will-change: transform;
}
@media (max-width: 640px) {
  .hero--photo .hero__media .photo { object-position: 76% 40%; }
  /* darker overlay on phones so every line of text sits on dark, not on the photo */
  .hero--photo .hero__scrim { background: linear-gradient(180deg, rgba(23, 18, 13, 0.58) 0%, rgba(23, 18, 13, 0.46) 30%, rgba(23, 18, 13, 0.8) 60%, rgba(23, 18, 13, 0.93) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hero--photo .hero__media .photo { top: 0; height: 100%; transform: none !important; } }

/* -------------------------------------------------------------------------
   18. Service pages: linked service names and the small photo row
   ------------------------------------------------------------------------- */
.menu__name a, .svc__name a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.menu__name a:hover, .svc__name a:hover { text-decoration-color: currentColor; }
.hero .eyebrow a { color: inherit; text-underline-offset: 0.2em; }
.svc-photos .photo { aspect-ratio: 3 / 4; object-fit: cover; }
.cta-strip p a:not(.btn) { color: var(--gold-deep); text-underline-offset: 0.2em; }
/* Checkbox row in forms (waitlist consent) */
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.85rem; }
.field--check input { width: 1.35rem; height: 1.35rem; margin: 0.1rem 0 0; padding: 0; accent-color: var(--gold-bright); }
.field--check label { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: var(--step--1); }
/* =========================================================================
   19. IVORY THEME (Oct 2026)
   The studio's new look: warm ivory and linen, champagne gold, soft charcoal text,
   rounded corners, Cormorant Garamond headings with Jost text. Black and gold are the
   accent colours: announcement bar, main buttons, icons and footer. Overrides the original dark theme above; the dark version is
   backed up in ../backup-dark-design-2026-10-19/.
   ========================================================================= */
:root {
  --ivory:      #fbf8f3;   /* page ground                                  */
  --linen:      #f3ece2;   /* alternate bands (replaces the old black bands) */
  --sand:       #e9dfd1;   /* photo placeholders, soft fills               */
  --champagne:  #c7a774;   /* decorative lines and icons (not small text)  */
  --cream:      #fbf8f3;
  --porcelain:  #ffffff;
  --gold:       #a17a3a;   /* large script text on ivory (3.4:1)            */
  --gold-deep:  #6b4f1f;   /* small gold text on ivory and linen (6:1+)     */
  --gold-bright:#d6b77f;   /* gold buttons, accents on the dark footer      */
  --line:       rgba(43, 33, 24, 0.12);

  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-ui:      "Jost", "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;
  --radius-lg: 18px;
  --bar-h: 2.4rem;
}
html { scroll-padding-top: calc(6rem + var(--bar-h)); }
body { background: var(--ivory); }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.005em; line-height: 1.08; }
.script { font-weight: 500; }

/* bands */
.band--cream { background: var(--ivory); }
.band--linen { background: var(--linen); color: var(--text-ink); }

/* announcement bar (NAH-style) */
.announce {
  position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-nav) + 1);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: center; gap: 2.5rem;
  padding-inline: 1rem;
  background: var(--ink); color: var(--gold-bright);
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden;
}
.announce a { text-decoration: underline; text-underline-offset: 0.2em; }
.announce :focus-visible { outline-color: var(--gold-bright); }
@media (max-width: 760px) { .announce__more { display: none; } }

/* header: always solid ivory, sitting under the announcement bar */
.masthead, .masthead.is-scrolled, .masthead.is-solid {
  top: var(--bar-h);
  background: rgba(251, 248, 243, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text-ink);
  padding-block: 0.85rem;
  box-shadow: 0 1px 0 var(--line);
}
.brand__name { font-size: 1.75rem; color: var(--gold-deep); }
.brand__kicker { color: var(--text-ink); }
.nav__link[aria-current="page"],
.masthead.is-scrolled .nav__link[aria-current="page"],
.masthead.is-solid .nav__link[aria-current="page"] { color: var(--gold-deep); }
.masthead :focus-visible, .masthead:not(.is-scrolled):not(.is-solid) :focus-visible { outline-color: var(--gold-deep); }
.nav__cta, .masthead.is-scrolled .nav__cta, .masthead.is-solid .nav__cta { --fg: #fff; --bg: var(--ink); --bd: var(--ink); }
.nav__cta:hover, .masthead.is-scrolled .nav__cta:hover, .masthead.is-solid .nav__cta:hover { --bg: var(--gold-deep); --bd: var(--gold-deep); --fg: #fff; }

/* mobile menu panel */
.nav-panel { background: var(--ivory); color: var(--text-ink); }
.nav-panel__link[aria-current="page"] { color: var(--gold-deep); }
.nav-panel__meta { color: var(--text-ink-2); }
.nav-panel :focus-visible { outline-color: var(--gold-deep); }

/* buttons */
.btn { border-radius: var(--radius); letter-spacing: 0.16em; }
.btn--solid:hover { --bg: var(--gold-deep); --bd: var(--gold-deep); }
.btn--gold { --bg: var(--gold-bright); --bd: var(--gold-bright); --fg: var(--ink); }
.btn--gold:hover { --bg: #e4cc9e; --bd: #e4cc9e; }

/* interior page hero: soft champagne light instead of black */
.hero--page {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(214, 183, 127, 0.28), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(233, 223, 209, 0.9), transparent 60%),
    var(--linen);
  color: var(--text-ink);
  min-height: 0;
}
.hero--page .hero__inner { padding-block: calc(var(--bar-h) + clamp(7rem, 16vh, 9rem)) clamp(3rem, 8vh, 5rem); }
.hero--page .eyebrow, .hero--split .eyebrow { color: var(--gold-deep); }
.hero--page .lede, .hero--split .lede { color: var(--text-ink-2); }
.hero--page :focus-visible, .hero--split :focus-visible { outline-color: var(--gold-deep); }

/* home hero: light split, text left, rounded photo right */
.hero--split {
  min-height: 0; display: block; overflow: visible;
  background:
    radial-gradient(70% 90% at 0% 20%, rgba(214, 183, 127, 0.22), transparent 60%),
    var(--ivory);
  color: var(--text-ink);
}
.hero--split .hero__grid {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: calc(var(--bar-h) + clamp(6.5rem, 14vh, 8.5rem)) clamp(3rem, 8vh, 5.5rem);
}
@media (min-width: 900px) { .hero--split .hero__grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero--split .hero__inner { width: auto; padding: 0; }
.hero--split .hero__title { max-width: 14ch; }
.hero__figure { position: relative; }
.hero__figure .photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.hero__figure::before {           /* thin champagne frame offset behind the photo */
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--champagne); border-radius: var(--radius-lg); z-index: -1;
}
@media (max-width: 899px) { .hero__figure { max-width: 30rem; } .hero__figure::before { display: none; } }

/* photo placeholders: soft sand instead of black */
.ph, .hero__media .ph {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(199, 167, 116, 0.22), transparent 55%),
    linear-gradient(155deg, #efe6d9, #e4d8c6);
  color: var(--text-ink-2);
  border-radius: var(--radius-lg);
}
.ph::after { mix-blend-mode: multiply; opacity: 0.05; }
.ph__frame { border-color: rgba(107, 79, 31, 0.28); border-radius: calc(var(--radius-lg) - 6px); }
.ph__label { color: rgba(43, 33, 24, 0.62); }
.ph__label b { color: var(--gold-deep); }
.photo { background: var(--sand); }
.svc-photos .photo, .gallery .photo, .svc__media { border-radius: var(--radius-lg); }
.gallery .photo { border-radius: 12px; }

/* sections that used to sit on black */
.marks { border-top-color: var(--line); }
.mark__k { color: var(--gold); }
.mark__t { color: var(--text-ink-2); }
.quote__by { color: var(--gold-deep); }
.quotes__dots button::before { background: rgba(43, 33, 24, 0.22); }
.quotes__dots button[aria-current="true"]::before { background: var(--gold); }
.quotes__pause { color: var(--text-ink-2); }
.quotes__pause:hover { color: var(--text-ink); }
.form__note.is-error { color: #9b3b2c; }
.field input, .field textarea, .field select { border-radius: var(--radius); background: #fff; }
.field--check input { accent-color: var(--gold-deep); }

/* "The Amore Mio difference" icon row (NAH-style features) */
.features {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin-top: var(--space-xl);
}
.feature { text-align: center; padding: 2rem 1.25rem; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(43, 33, 24, 0.4); }
.feature__icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold-bright); }
.feature__icon svg { width: 1.5rem; height: 1.5rem; }
.feature__t { font-family: var(--f-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.feature__d { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-ink-2); }

/* footer stays dark espresso as the one deep anchor; soften it slightly */
.foot { background: var(--ink); }
.foot__brand .brand__name { color: var(--gold-bright); }
/* -------------------------------------------------------------------------
   20. Booking shortcuts: floating Book Now, phone header Book, inline Book links
   ------------------------------------------------------------------------- */
.book-fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: calc(var(--z-nav) - 1);
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem; min-height: 44px;
  background: var(--ink); color: var(--gold-bright);
  border-radius: 999px; border: 1px solid var(--gold-bright);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 14px 34px -14px rgba(23, 18, 13, 0.55);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.3s;
}
.book-fab:hover { background: var(--gold-deep); color: #fff; }
.book-fab:focus-visible { outline-color: var(--gold-deep); }
.js .book-fab { opacity: 0; transform: translateY(12px); pointer-events: none; }
.js .book-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 640px) {
  .book-fab { left: 1rem; right: 1rem; justify-content: center; }
  body { padding-bottom: 4.5rem; }            /* so the button never hides the end of the page */
}
.nav-panel.is-open ~ .book-fab { display: none; }

.masthead__book { display: none; }
@media (max-width: 900px) {
  .masthead__book { display: inline-flex; margin-left: auto; margin-right: 0.75rem; padding: 0.6rem 1rem; min-height: 40px;
    --bg: var(--ink); --fg: var(--gold-bright); --bd: var(--ink); font-size: 0.72rem; }
}

.menu__book, .svc__book {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); border-bottom: 1px solid var(--champagne); padding-bottom: 0.2rem;
}
.menu__book { grid-column: 1 / -1; }
.svc__book { align-self: flex-start; margin-top: 1rem; }
.menu__book:hover, .svc__book:hover { color: var(--text-ink); border-color: currentColor; }.brand__name { white-space: nowrap; }
@media (max-width: 400px) {
  .masthead { gap: 0.5rem; }
  .masthead__book { margin-right: 0.25rem; padding-inline: 0.8rem; }
  .nav-toggle > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* icon only on very small phones; "Menu" stays readable to screen readers */
}
/* Contact page map */
.map-embed { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: var(--radius-lg); background: var(--sand); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 640px) { .map-embed { aspect-ratio: 4 / 5; } }

/* Service cards without photos: soft white cards (photos can be added back inside .svc__media later) */
.svc { background: #fff; padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--radius-lg); box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(43, 33, 24, 0.4); }
.svc > .svc__head:first-child { margin-top: 0; }
.mark__t a, .split__body a, .lede a { text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 0.2em; }

/* -------------------------------------------------------------------------
   21. Review fixes (Oct 2026): banner text, credentials, service facts, policy, reviews
   ------------------------------------------------------------------------- */
.announce__short { display: none; }
@media (max-width: 760px) { .announce__long { display: none; } .announce__short { display: inline; } }

.stars { color: var(--gold); letter-spacing: 0.12em; }
.hero__trust { margin-top: 1.4rem; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-ink-2); }
.hero__trust a { text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 0.2em; }

.creds { background: var(--ink); color: var(--text-cream); border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); }
.creds__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); }
.creds__list { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; gap: 1.1rem; }
.creds__list li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 1rem; align-items: baseline; padding-top: 1.1rem; border-top: 1px solid var(--ink-line); }
.creds__list li:first-child { border-top: 0; padding-top: 0; }
.creds__k { font-family: var(--f-display); font-size: 1.6rem; font-style: italic; color: var(--gold-bright); line-height: 1; }
.creds :focus-visible { outline-color: var(--gold-bright); }

.svc__facts { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0.45rem; font-size: var(--step--1); color: var(--text-ink); }
.svc__facts li { padding-left: 1.1rem; position: relative; }
.svc__facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.svc__more { display: inline-flex; gap: 0.4rem; margin-top: 1.1rem; margin-right: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--champagne); padding-bottom: 0.2rem; }
.svc__more:hover { color: var(--text-ink); border-color: currentColor; }
.svc { display: flex; flex-direction: column; }
.svc > .svc__more:first-of-type { margin-top: auto; padding-top: 1.1rem; }

.policy-note { margin-top: var(--space-l); padding: 1rem 1.25rem; border-left: 2px solid var(--gold); background: rgba(255,255,255,0.6); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--step--1); color: var(--text-ink); max-width: 70ch; }

.menu__meta { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--gold-deep); }

.rating-line { font-size: var(--step-0); color: var(--text-ink-2); }
.reviews { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: var(--space-xl); }
.review { margin: 0; background: #fff; border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: 0 1px 0 var(--line), 0 18px 40px -32px rgba(43, 33, 24, 0.4); display: flex; flex-direction: column; gap: 1rem; }
.review blockquote { margin: 0; }
.review__text p { font-family: var(--f-display); font-size: var(--step-1); line-height: 1.45; }
.review__by { margin-top: auto; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.review__by span { font-weight: 400; letter-spacing: 0.04em; text-transform: none; color: var(--text-ink-2); }