/*
 * Luxe Spa & Co Tuggerah — landing page.
 *
 * Ported from the approved layout in demo/index.html. The design tokens,
 * section styles and breakpoints are the layout's own; additions for WordPress
 * (admin bar, skip link, booking request form, plain pages) are marked.
 * Fonts are self-hosted in fonts.css.
 */

:root {
  color-scheme: light;
  /* Palette sampled from the "How to Find Us" poster */
  --rose: #9A7775;          /* poster ground */
  --rose-soft: #A88A87;
  --rose-deep: #7A5B5A;
  --cocoa: #3B2E2D;         /* deep sections, body ink */
  --cocoa-2: #4A3A38;
  --porcelain: #F8F0EE;     /* light ground */
  --shell: #EEDFDD;         /* poster lower fade */
  --blush: #FCD7D8;         /* poster pill */
  --petal: #EDB3B9;         /* poster "Us" */
  --heart: #D9707C;         /* poster note title / heart */
  --white: #FFFDFC;
  --line-light: rgba(255, 253, 252, .28);
  --line-dark: rgba(59, 46, 45, .14);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 18px;
  --header-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--cocoa);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--heart); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
p { margin: 0; }
em.petal, .petal, h1 em, h2 em { color: var(--petal); font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.rule { width: 120px; height: 2px; background: var(--petal); border: 0; margin: 0; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding: 1em 1.8em; border-radius: 999px; border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-blush { background: var(--blush); color: var(--rose-deep); }
.btn-blush:hover { background: var(--white); }
.btn-line { border-color: var(--line-light); color: var(--white); }
.btn-line:hover { border-color: var(--white); }
.btn-cocoa { background: var(--cocoa); color: var(--white); }
.btn-cocoa:hover { background: var(--rose-deep); }
.btn-outline { border-color: var(--cocoa); color: var(--cocoa); background: transparent; }
.btn-outline:hover { background: var(--cocoa); color: var(--white); }

/* ---------- WordPress: skip link, screen-reader text ---------- */
.skip-link, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; clip-path: none; z-index: 100; top: 8px; left: 8px;
  background: var(--white); color: var(--cocoa); padding: .7em 1.2em; border-radius: 999px;
}

/* ---------- Announcement ribbon ---------- */
.ribbon {
  background: var(--cocoa); color: var(--blush);
  overflow: hidden; white-space: nowrap;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
}
.ribbon-track { display: inline-flex; gap: 3rem; padding-block: .7rem; animation: slide 38s linear infinite; }
.ribbon-track span { display: inline-flex; align-items: center; gap: 3rem; }
.ribbon-track span::after { content: "✦"; color: var(--petal); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: var(--header-top); z-index: 20;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--white);
}
/* WordPress: keep the sticky bar below the admin toolbar for logged-in users. */
.admin-bar { --header-top: 32px; }
@media (max-width: 782px) { .admin-bar { --header-top: 46px; } }
@media (max-width: 600px) { .admin-bar { --header-top: 0px; } }

.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; min-height: 76px;
}
.nav-links { display: flex; gap: 1.8rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 400; opacity: .9; }
.nav-links a:hover { opacity: 1; color: var(--blush); }
.brand img { width: 172px; height: auto; }
.nav-cta { justify-self: end; }
.nav-cta .btn { padding: .8em 1.4em; }

/* ---------- Hero (poster composition) ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-soft) 70%, #B79C99 100%);
  color: var(--white);
}
.hero-photo {
  position: absolute; inset: 0 0 0 auto; width: 64%;
  background-image: var(--hero-img);
  background-position: 30% 30%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 560px); align-content: center;
  gap: 1.8rem; padding-block: clamp(64px, 9vw, 120px) clamp(72px, 10vw, 128px);
}
.hero h1 {
  font-size: clamp(3.4rem, 8.4vw, 6.6rem);
  line-height: .96;
  position: relative;
}
.hero h1 .spark { position: absolute; top: -.1em; left: 4.1em; font-size: .32em; color: var(--blush); font-style: normal; }
.pill {
  justify-self: start;
  background: var(--blush); color: var(--rose-deep);
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem);
  padding: .45em 1.1em; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(59, 46, 45, .12);
}
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.facts li { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; align-items: center; line-height: 1.35; }
.facts b { font-weight: 500; display: block; }
.facts .ico {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--blush); display: grid; place-items: center; color: var(--blush);
}
.facts .ico svg { width: 18px; height: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }

.hero-note {
  position: absolute; right: var(--gutter); bottom: clamp(28px, 5vw, 56px);
  width: min(300px, 44%);
  background: rgba(248, 240, 238, .94); color: var(--cocoa);
  border-radius: var(--radius); padding: 2.2rem 1.4rem 1.3rem;
  box-shadow: 0 20px 50px rgba(59, 46, 45, .18);
}
.hero-note .heart {
  position: absolute; top: -20px; left: 22px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); display: grid; place-items: center; color: var(--heart);
  box-shadow: 0 6px 16px rgba(59, 46, 45, .12);
}
.hero-note .heart svg { width: 18px; height: 18px; }
.hero-note strong { color: var(--heart); font-weight: 500; display: block; margin-bottom: .2rem; }
.hero-note p { font-size: .95rem; line-height: 1.5; }
.hero-note .big { font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--rose-deep); }

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-inner > *:nth-child(2) { animation-delay: .08s; }
  .hero-inner > *:nth-child(3) { animation-delay: .16s; }
  .hero-inner > *:nth-child(4) { animation-delay: .24s; }
  .hero-inner > *:nth-child(5) { animation-delay: .32s; }
  .hero-inner > *:nth-child(6) { animation-delay: .4s; }
  @keyframes rise { from { transform: translateY(14px); opacity: .001; } }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 10vw, 128px); scroll-margin-top: 60px; }
.section-head { display: grid; gap: 1rem; max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head .eyebrow { color: var(--rose); }
.section-head p { color: var(--cocoa-2); max-width: 56ch; }
.center { text-align: center; margin-inline: auto; justify-items: center; }

/* Rituals grid */
.rituals { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3vw, 32px); }
.ritual { display: grid; gap: 1rem; align-content: start; text-decoration: none; }
.ritual figure { margin: 0; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: var(--shell); }
.ritual img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.ritual:hover img { transform: scale(1.04); }
.ritual .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line-dark); padding-bottom: .9rem; }
.ritual .meta span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); white-space: nowrap; }
.ritual p { color: var(--cocoa-2); font-size: .98rem; }
.ritual-feature figure { aspect-ratio: 4 / 5.2; }
.ritual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.ritual-grid .ritual figure { aspect-ratio: 4 / 4.4; }
.ritual-grid h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.ritual-grid p { font-size: .92rem; }

/* Difference band */
.difference { background: var(--rose); color: var(--white); }
.difference .section-head .eyebrow { color: var(--blush); }
.difference .section-head p { color: rgba(255,253,252,.85); }
.diff-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.diff-photo { position: relative; }
.diff-photo img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.diff-photo .tag {
  position: absolute; left: -12px; bottom: 28px;
  background: var(--blush); color: var(--rose-deep);
  padding: .6rem 1rem; border-radius: 10px; font-family: var(--display); font-style: italic; font-size: 1.1rem;
}
.pillars { display: grid; gap: 0; margin-top: 1.5rem; }
.pillar { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; padding-block: 1.6rem; border-top: 1px solid var(--line-light); }
.pillar:last-child { border-bottom: 1px solid var(--line-light); }
.pillar h3 { font-size: 1.6rem; }
.pillar p { color: rgba(255,253,252,.88); font-size: .98rem; }

/* Head spa */
.headspa { background: var(--cocoa); color: var(--white); position: relative; }
.headspa .section-head .eyebrow { color: var(--petal); }
.headspa .section-head p { color: rgba(255,253,252,.78); }
.hs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.hs-photo { position: sticky; top: 110px; }
.hs-photo img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 999px 999px var(--radius) var(--radius); }
.tiers { display: grid; gap: 1rem; }
.tier {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem;
  padding: 1.6rem 1.7rem; border-radius: var(--radius);
  border: 1px solid rgba(255,253,252,.14);
  background: rgba(255,253,252,.03);
}
.tier.signature { background: var(--blush); color: var(--cocoa); border-color: var(--blush); }
.tier h3 { font-size: 1.7rem; }
.tier .dur { font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--petal); }
.tier.signature .dur { color: var(--heart); }
.tier .price { font-family: var(--display); font-size: 2.2rem; line-height: 1; align-self: start; }
.tier > p { grid-column: 1 / -1; font-size: .95rem; color: rgba(255,253,252,.78); }
.tier.signature > p { color: var(--cocoa-2); }
.tier .badge { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; background: var(--cocoa); color: var(--blush); padding: .25em .8em; border-radius: 999px; margin-left: .6rem; vertical-align: middle; font-family: var(--sans); }
.hs-note { margin-top: 1.4rem; font-size: .9rem; color: rgba(255,253,252,.6); }

/* Price menu */
.menu-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.5rem; }
.menu-tabs button {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
  padding: .8em 1.5em; border-radius: 999px; border: 1px solid var(--line-dark);
  background: transparent; color: var(--cocoa); cursor: pointer;
}
.menu-tabs button[aria-selected="true"] { background: var(--rose); border-color: var(--rose); color: var(--white); }
.menu-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem clamp(32px, 6vw, 80px); }
.menu-group h3 { font-size: 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--cocoa); }
.menu-group h3 small { font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); white-space: nowrap; }
.menu-group h3 small i { font-style: normal; }
.menu-list { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: .6rem; padding-block: .7rem; border-bottom: 1px dashed var(--line-dark); font-size: .98rem; }
.menu-list .name { flex: 1 1 auto; }
.menu-list .amt { font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.menu-list .amt i { font-style: normal; color: var(--rose); padding-inline: .25em; }
.menu-foot { text-align: center; margin-top: 2.5rem; color: var(--cocoa-2); font-size: .92rem; }

/* Gallery */
.gallery-band { background: var(--shell); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; }
.gallery img:nth-child(odd) { transform: translateY(18px); }
.gallery-foot { display: flex; justify-content: center; margin-top: 3.2rem; }

/* Reviews */
.reviews-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.reviews-top .section-head { margin-bottom: 0; }
.score { display: flex; align-items: center; gap: 1.2rem; }
.score .num { font-family: var(--display); font-size: 4.2rem; line-height: 1; color: var(--rose-deep); }
.stars { color: var(--heart); letter-spacing: .15em; font-size: 1.05rem; }
.score small { display: block; font-size: .85rem; color: var(--cocoa-2); }
.score small a { text-decoration-color: var(--petal); text-underline-offset: 3px; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.review { margin: 0; background: var(--white); border-radius: var(--radius); padding: 2rem 1.8rem; display: grid; gap: 1.2rem; align-content: start; box-shadow: 0 1px 0 var(--line-dark); }
.review blockquote { margin: 0; font-family: var(--display); font-size: 1.22rem; line-height: 1.45; }
.review figcaption { font-size: .85rem; color: var(--cocoa-2); }
.review figcaption b { font-weight: 500; color: var(--cocoa); display: block; }

/* Offer */
.offer { background: linear-gradient(135deg, var(--rose-deep), var(--rose)); color: var(--white); }
.offer-inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(56px, 8vw, 88px); }
.offer .pct { font-family: var(--display); font-size: clamp(5rem, 13vw, 9.5rem); line-height: .8; color: var(--blush); }
.offer .pct sup { font-size: .4em; vertical-align: top; }
.offer h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.offer p { color: rgba(255,253,252,.85); margin-top: .8rem; max-width: 46ch; }

/* ---------- WordPress: booking request (not in the static layout) ---------- */
.book { background: var(--shell); }
.book-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.book-copy .section-head { margin-bottom: 2rem; }
.book-points { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .9rem; }
.book-points li { display: grid; grid-template-columns: 32px 1fr; gap: .9rem; align-items: center; line-height: 1.4; color: var(--cocoa-2); }
.book-points .ico { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--rose); color: var(--rose); display: grid; place-items: center; }
.book-points .ico svg { width: 15px; height: 15px; }

.book-card {
  background: var(--white); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 24px 60px rgba(59, 46, 45, .12);
  scroll-margin-top: 110px;
}
.book-note { margin-top: 1.2rem; font-size: .85rem; color: var(--cocoa-2); }

.lx-form { display: grid; gap: 1.1rem; }
.lx-form > form, .wpcf7 form.lx-form { display: grid; gap: 1.1rem; }
.lx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lx-field { display: grid; gap: .45rem; }
.lx-field__label { font-size: .72rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-deep); }
.lx-field__label small { letter-spacing: .08em; text-transform: none; font-size: .78rem; color: var(--cocoa-2); opacity: .8; }
.wpcf7-form-control-wrap { display: block; }
.lx-form input[type="text"],
.lx-form input[type="tel"],
.lx-form input[type="email"],
.lx-form input[type="date"],
.lx-form select,
.lx-form textarea {
  width: 100%; font: inherit; font-size: 1rem; font-weight: 300; color: var(--cocoa);
  background: var(--porcelain); border: 1px solid var(--line-dark); border-radius: 12px;
  padding: .8em 1em; min-height: 50px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lx-form textarea { min-height: 110px; resize: vertical; }
.lx-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239A7775' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center;
}
.lx-form input::placeholder, .lx-form textarea::placeholder { color: rgba(74, 58, 56, .5); }
.lx-form input:focus, .lx-form select:focus, .lx-form textarea:focus {
  outline: none; border-color: var(--rose); background: var(--white);
  box-shadow: 0 0 0 3px rgba(237, 179, 185, .45);
}
.lx-form .wpcf7-not-valid { border-color: var(--heart); }
.wpcf7-not-valid-tip { display: block; margin-top: .35rem; font-size: .82rem; color: #B4485A; }
.lx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-form__submit, .lx-form input[type="submit"] {
  justify-self: start;
  font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  padding: 1.1em 2.2em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--cocoa); color: var(--white);
  transition: background .25s ease, transform .25s ease;
}
.lx-form__submit:hover, .lx-form input[type="submit"]:hover { background: var(--rose-deep); transform: translateY(-1px); }
.lx-form .wpcf7-spinner { margin: 0 0 0 .8rem; vertical-align: middle; }
.wpcf7 form .wpcf7-response-output { margin: .4rem 0 0; padding: .8em 1em; border-radius: 12px; font-size: .92rem; border-width: 1px; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--heart); background: #FDF1F2; color: #8E3445; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--petal); background: var(--porcelain); color: var(--cocoa); }
.lx-form__fallback a { color: var(--rose-deep); }

.book-done { display: grid; gap: 1rem; justify-items: start; outline: none; }
.book-done h3 { font-size: 2rem; }
.book-done p { color: var(--cocoa-2); }
.book-tick { width: 52px; height: 52px; border-radius: 50%; background: var(--blush); color: var(--rose-deep); display: grid; place-items: center; }
.book-tick svg { width: 24px; height: 24px; }

/* Visit */
.visit-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.visit h2 { font-size: clamp(3rem, 7vw, 5.4rem); line-height: .95; }
.visit .eyebrow { color: var(--rose); }
.visit-copy { display: grid; gap: 1.6rem; }
.visit .facts .ico { border-color: var(--rose); color: var(--rose); }
.visit .facts a { text-decoration: none; border-bottom: 1px solid var(--petal); }
.visit .facts .hours-row { display: block; }
.visit-map { position: relative; }
.map-frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 4.6; max-width: 100%;
  border-radius: var(--radius);
  background: var(--shell);
  box-shadow: 0 24px 60px rgba(59, 46, 45, .14);
  border: 6px solid var(--white);
}
.map-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: saturate(.75) sepia(.12);
}
.map-fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 1rem; text-align: center; padding: 2rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(237,179,185,.45) 0 60px, transparent 61px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(154,119,117,.12) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(154,119,117,.12) 38px 39px),
    var(--shell);
}
.map-fallback .pin { width: 56px; height: 56px; border-radius: 50%; background: var(--rose); color: var(--white); display: grid; place-items: center; box-shadow: 0 10px 24px rgba(59,46,45,.2); }
.map-fallback .pin svg { width: 26px; height: 26px; }
.map-fallback p { font-family: var(--display); font-size: 1.4rem; line-height: 1.2; }
.visit-card {
  position: absolute; left: -24px; bottom: 32px; max-width: 280px; z-index: 2;
  background: var(--white); border-radius: var(--radius); padding: 1.3rem 1.4rem;
  box-shadow: 0 20px 50px rgba(59, 46, 45, .16); font-size: .92rem; line-height: 1.5;
}
.visit-card strong { color: var(--heart); font-weight: 500; display: block; }

/* Footer */
.site-footer { background: var(--cocoa); color: rgba(255,253,252,.78); padding-block: 64px 40px; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.foot-grid h4 { font-family: var(--sans); font-weight: 400; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--petal); margin: 0 0 1rem; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--blush); }
.site-footer .brand img { width: 170px; margin-bottom: 1rem; }
.copyright { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,253,252,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: rgba(255,253,252,.5); }

/* Mobile call bar */
.callbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(59, 46, 45, .96); gap: .6rem;
}
.callbar .btn { flex: 1; justify-content: center; padding: .9em .6em; letter-spacing: .14em; white-space: nowrap; }

/* ---------- WordPress: plain pages and 404 ---------- */
.page-wrap { max-width: 760px; }
.page h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-bottom: 2rem; }
.page-content { display: grid; gap: 1.1rem; }
.page-content h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1.4rem; }
.page-content a { color: var(--rose-deep); }
.page-404 { min-height: 60vh; display: grid; align-content: center; }
.page-404 .page-wrap { display: grid; gap: 1.4rem; }
.page-404 .eyebrow { color: var(--rose); }
.page-404 .hero-actions { justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .brand { justify-self: start; }
  .rituals, .diff-layout, .hs-layout, .visit-layout, .book-layout { grid-template-columns: 1fr; }
  .hs-photo { position: static; }
  .hs-photo img { aspect-ratio: 16 / 11; border-radius: var(--radius); }
  .reviews { grid-template-columns: 1fr; }
  .offer-inner { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery img:nth-child(odd) { transform: none; }
  .diff-photo { max-width: 520px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 72px; }
  .hero-photo {
    inset: 0 0 auto 0; width: 100%; height: 360px;
    background-position: 40% 25%;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  }
  .hero-inner { padding-block: 250px 48px; }
  .hero-note { position: relative; right: auto; bottom: auto; width: auto; margin: 0 0 40px; }
  .hero-note-wrap { padding-inline: var(--gutter); }
  .menu-panel { grid-template-columns: 1fr; }
  .ritual-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pillar { grid-template-columns: 1fr; gap: .5rem; }
  .visit-card { position: relative; left: auto; bottom: auto; margin: -48px 16px 0; }
  .diff-photo .tag { left: 12px; }
  .callbar { display: flex; }
  .nav-cta { display: none; }
  .nav { grid-template-columns: 1fr; justify-items: center; min-height: 64px; }
  .brand { justify-self: center; }
  .brand img { width: 128px; }
  .lx-form__row { grid-template-columns: 1fr; }
  .lx-form__submit, .lx-form input[type="submit"] { justify-self: stretch; }
}
@media (max-width: 440px) {
  .ritual-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}