@charset "UTF-8";
/* ==========================================================================
   Omnia Wellness Center — design system
   1440px content container, warm-noir / ivory / gold palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
/* Palette */
/* Readable gold. #c1a37b only reaches 2.2:1 on the ivory surfaces, so small accent text uses the deeper tone (5.2:1) and reverts to the light gold on dark bands. Decorative rules keep the original --gold. */
/* Large display accents only need 3:1, so they keep more of the gold. */
/* Typography */
/* Layout */
/* Motion */
/* Elevation */
:root { --ink: #111418; --noir: #403027; --noir-90: rgba(64, 48, 39, 0.9); --noir-70: rgba(64, 48, 39, 0.7); --noir-55: rgba(64, 48, 39, 0.55); --noir-10: rgba(64, 48, 39, 0.1); --brown: #7e614e; --gold: #c1a37b; --gold-deep: #a68a5b; --gold-soft: #d8c6a8; --gold-ink: #7e614e; --gold-display: #9d7f4d; --accent-text: var(--gold-ink); --accent-display: var(--gold-display); --stone: #d0c5b6; --ivory: #f4efe6; --cream: #f7f4f0; --muted: #ece6df; --line: #ddd6cc; --text: #403027; --text-soft: #6b594e; --white: #fff; --font-sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --step--1: 0.8125rem; --step-0: 1rem; --step-1: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); --step-2: clamp(1.375rem, 0.7vw + 1.2rem, 1.75rem); --step-3: clamp(1.75rem, 1.2vw + 1.45rem, 2.375rem); --step-4: clamp(2.125rem, 2vw + 1.6rem, 3.25rem); --step-5: clamp(2.5rem, 3.4vw + 1.65rem, 4.5rem); --tracking-eyebrow: 0.28em; --tracking-btn: 0.26em; --container: 1440px; --gutter: 3rem; --section-y: clamp(3.75rem, 4.6vw, 6rem); --section-y-lg: clamp(4.5rem, 6vw, 8rem); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.45s; --shadow-sm: 0 12px 30px -20px rgba(17, 20, 24, 0.45); --shadow-md: 0 30px 60px -35px rgba(17, 20, 24, 0.5); --shadow-lg: 0 40px 90px -45px rgba(17, 20, 24, 0.55); --header-h: 6.5rem; }

/* Dark bands flip the accent tokens back to the light golds. */
.section--noir,
.section--ink,
.hero,
.quote-band,
.drawer,
.megamenu,
.announce,
.reviews,
.card--accent { --accent-text: var(--gold-soft); --accent-display: var(--gold-soft); }

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

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

body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

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

/* <picture> is only an art-direction wrapper — never a layout box, so height
   and object-fit rules land on the <img> itself. `display: contents` promotes
   every child to the parent's layout, so <source> must be taken out of flow
   explicitly or it claims a grid/flex slot of its own. */
picture { display: contents; }
picture > source { display: none; }

/* The logo artwork is white; invert it on the light nav pill and footer. */
.logo--invert { filter: invert(1); }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* `.screen-reader-text` is the WordPress/Gravity Forms name for this; both are
   listed so hidden labels behave the same here and in the WP build. */
.visually-hidden,
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; top: 0; left: 50%; z-index: 200; padding: 0.75rem 1.5rem; background: var(--noir); color: var(--ivory); font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; transform: translate(-50%, -120%); transition: transform 0.25s var(--ease-out-quint); }
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.container--narrow { max-width: 1080px; }
.container--prose { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--flush-top { padding-top: 0; }

.section--cream { background: var(--cream); }
.section--ivory { background: var(--ivory); }
.section--muted { background: var(--muted); }
.section--noir { background: var(--noir); color: var(--ivory); }
.section--ink { background: var(--ink); color: var(--ivory); }

.section--noir .section-head__title,
.section--ink .section-head__title { color: var(--ivory); }

.section--hemmed { border-block: 1px solid var(--line); }

/* Section heading block */
/* Wider than its lede on purpose: a lede reads best around 46rem, but a
   display heading held to that width breaks onto a third line. */
.section-head { max-width: 64rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head__title { margin-top: 1.25rem; font-size: calc(var(--step-4) * var(--hd-fit, 1)); text-wrap: pretty; }
.section-head__lede { margin-top: 1.5rem; max-width: 46rem; color: var(--text-soft); }
.section-head--center .section-head__lede { margin-inline: auto; }

.section--noir .section-head__lede,
.section--ink .section-head__lede { color: rgba(244, 239, 230, 0.72); }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.eyebrow--soft { color: var(--gold-soft); }

.eyebrow-tag { display: inline-block; padding: 0.6rem 1.1rem; background: var(--gold-deep); color: var(--ivory); font-size: 0.62rem; font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

.rule { width: 3.5rem; height: 1px; margin-block: 2rem; background: var(--gold); border: 0; }
.rule--center { margin-inline: auto; }

.display { font-size: var(--step-5); line-height: 1.04; }
.accent { font-family: var(--font-display); font-style: italic; color: var(--accent-display); }

.prose p + p { margin-top: 1.35rem; }
.prose > * + h2 { margin-top: 3rem; }
.prose h2 { font-size: var(--step-2); }
.prose h2 + * { margin-top: 1.25rem; }
.prose ul { margin-top: 1.25rem; display: grid; gap: 0.65rem; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.9rem; border: 1px solid transparent; font-size: 0.7rem; font-weight: 500; letter-spacing: var(--tracking-btn); text-transform: uppercase; transition: background-color var(--dur) var(--ease-out-quint),
              color var(--dur) var(--ease-out-quint),
              border-color var(--dur) var(--ease-out-quint); }

.btn--solid { background: var(--noir); border-color: var(--noir); color: var(--ivory); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }

.btn--outline { border-color: var(--gold); color: var(--text); }
.btn--outline:hover { background: var(--gold); color: var(--noir); }

.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--noir); }
.btn--gold:hover { background: var(--ivory); border-color: var(--ivory); }

.btn--on-dark { border-color: rgba(244, 239, 230, 0.55); color: var(--ivory); }
.btn--on-dark:hover { background: var(--ivory); border-color: var(--ivory); color: var(--noir); }

.btn--light { background: var(--ivory); border-color: var(--ivory); color: var(--noir); }
.btn--light:hover { background: var(--gold); border-color: var(--gold); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.btn-row--center { justify-content: center; }

.link-gold { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.3em; }
.link-gold:hover { color: var(--noir); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; }

.announce { background: var(--noir); color: rgba(244, 239, 230, 0.72); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; overflow: hidden; max-height: 4rem; transition: max-height 0.5s var(--ease-out-quint), opacity 0.4s; }
.site-header.is-stuck .announce { max-height: 0; opacity: 0; }

.announce__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0.7rem; }
.announce__meta { display: flex; align-items: center; gap: 1.25rem; }
.announce a:hover { color: var(--gold); }
.announce__sep { color: rgba(244, 239, 230, 0.3); }

.nav-shell { padding-top: 1.5rem; position: relative; }

.nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 2rem; background: rgba(244, 239, 230, 0.96); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; box-shadow: 0 20px 50px -20px rgba(17, 20, 24, 0.35); backdrop-filter: blur(12px); }

.nav__logo { flex: none; margin-right: 1.5rem; }
.nav__logo img { height: 2.1rem; width: auto; }

.nav__list { display: flex; flex: 1; align-items: center; justify-content: center; gap: 2rem; }

/* Desktop nav runs 1px larger than the site's other 0.72rem micro-labels. */
.nav__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: calc(0.72rem + 1px); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--noir-70); transition: color 0.3s; }
.nav__link:hover,
.nav__link[aria-expanded="true"],
.nav__item.is-current > .nav__link { color: var(--noir); }

.nav__chev { width: 0.7rem; height: 0.7rem; transition: transform 0.3s; }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }

.nav .btn { border-radius: 999px; padding: 0.95rem 1.6rem; }

.nav__burger { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; color: var(--noir); }
.nav__burger:hover { background: rgba(64, 48, 39, 0.06); }

/* Mega menu */
.megamenu { position: absolute; inset: calc(100% + 0.75rem) var(--gutter) auto; z-index: 20; background: var(--noir); color: var(--ivory); border-radius: 1.25rem; box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity 0.3s var(--ease-out-quint),
              transform 0.3s var(--ease-out-quint),
              visibility 0.3s; }
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.megamenu--services { display: grid; grid-template-columns: 15rem 1fr; }

.megamenu__rail { padding: 1.75rem 0; border-right: 1px solid rgba(244, 239, 230, 0.1); background: rgba(0, 0, 0, 0.12); }
.megamenu__tab { display: block; width: 100%; padding: 0.85rem 2rem; text-align: left; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 239, 230, 0.65); border-left: 2px solid transparent; transition: color 0.25s, border-color 0.25s, background-color 0.25s; }
.megamenu__tab:hover { color: var(--ivory); }
.megamenu__tab.is-active { color: var(--gold); border-left-color: var(--gold); background: rgba(244, 239, 230, 0.05); }

.megamenu__panels { padding: 1.75rem 2.5rem; }
.megamenu__panel { display: none; }
.megamenu__panel.is-active { display: block; }
.megamenu__panel-title { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1rem; }
.megamenu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.megamenu__links a,
.megamenu__links span { display: block; padding: 0.5rem 0; font-size: 0.9rem; color: rgba(244, 239, 230, 0.8); transition: color 0.25s; }
.megamenu__links a:hover { color: var(--gold); }
.megamenu__links span { opacity: 0.5; cursor: default; }

.megamenu__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; grid-column: 1 / -1; padding: 1rem 2.5rem; border-top: 1px solid rgba(244, 239, 230, 0.1); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 230, 0.55); }
.megamenu__foot a { color: var(--gold); }
.megamenu__foot a:hover { color: var(--ivory); }

.megamenu--simple { inset-inline: auto; min-width: 17rem; }
.megamenu--simple .megamenu__links { grid-template-columns: 1fr; padding: 1.5rem 2rem; }
.megamenu--simple .megamenu__links a { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }

/* Mobile drawer */
/* The panel waits off-screen at translateX(100%); without this it widens the document and the page scrolls sideways by a few pixels. */
.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; opacity: 0; overflow: hidden; transition: opacity 0.3s, visibility 0.3s; }
.drawer.is-open { visibility: visible; opacity: 1; }

.drawer__scrim { position: absolute; inset: 0; background: rgba(64, 48, 39, 0.7); }

.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(88%, 24rem); display: flex; flex-direction: column; background: var(--noir); color: var(--ivory); transform: translateX(100%); transition: transform 0.35s var(--ease-out-quint); overflow-y: auto; }
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(244, 239, 230, 0.1); }
.drawer__head img { height: 1.3rem; width: auto; }
.drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; color: var(--ivory); }
.drawer__close:hover { background: rgba(244, 239, 230, 0.1); }

.drawer__nav { padding: 1.5rem; }
.drawer__link { display: block; padding: 0.85rem 0; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 230, 0.85); }
.drawer__link:hover { color: var(--gold); }

.drawer__group { border-bottom: 1px solid rgba(244, 239, 230, 0.1); }
.drawer__group:last-child { border-bottom: 0; }
.drawer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.85rem 0; font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(244, 239, 230, 0.85); }
.drawer__toggle svg { width: 0.85rem; height: 0.85rem; transition: transform 0.3s; }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__sub { display: none; padding: 0 0 0.75rem 0.75rem; }
.drawer__sub.is-open { display: block; }
.drawer__sub a { display: block; padding: 0.5rem 0; font-size: 0.82rem; text-transform: none; letter-spacing: 0.02em; color: rgba(244, 239, 230, 0.7); }
.drawer__sub a:hover { color: var(--gold); }

/* Levels three and deeper. A nested group keeps the toggle affordance but is
   set at the same size as the links around it, and steps in a little so the
   hierarchy is legible without the indents eating the panel width. */
.drawer__sub .drawer__group { border-bottom: 0; border-top: 1px solid rgba(244, 239, 230, 0.08); }
.drawer__sub .drawer__toggle { padding: 0.5rem 0; font-size: 0.82rem; text-transform: none; letter-spacing: 0.02em; color: rgba(244, 239, 230, 0.7); }
.drawer__sub .drawer__sub { padding-left: 0.75rem; }

/* "All <parent>" — the parent's own page, kept reachable once its row became
   a toggle. */
.drawer__link--parent { padding: 0.5rem 0; font-size: 0.82rem; text-transform: none; letter-spacing: 0.02em; color: rgba(244, 239, 230, 0.55); }

/* Deep levels stop indenting so the text never runs out of room. */
.drawer__group--d3 .drawer__sub { padding-left: 0.5rem; }

.drawer__foot { margin-top: auto; padding: 1.5rem; display: grid; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   7. Heroes
   -------------------------------------------------------------------------- */
.hero { position: relative; display: flex; align-items: center; min-height: min(100vh, 60rem); padding-top: var(--header-h); overflow: hidden; color: var(--ivory); isolation: isolate; }

.hero__media,
.hero__media img,
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media { z-index: -2; }

.hero__scrim { position: absolute; inset: 0; z-index: -1; background:
    linear-gradient(to bottom, rgba(64, 48, 39, 0.8), rgba(64, 48, 39, 0.55) 45%, rgba(64, 48, 39, 0.92)); }

.hero__inner { padding-block: clamp(5rem, 10vw, 9rem); width: 100%; }

.hero--center { text-align: center; }
.hero--center .hero__inner { display: grid; justify-items: center; }
.hero--center .rule { margin-inline: auto; }

/* 30ch: the homepage headline is the longest line of type on the site, and
   a tighter measure put it on four lines. */
.hero__title { margin-top: 2.25rem; font-size: calc(var(--step-5) * var(--hd-fit, 1)); max-width: 30ch; }
.hero--center .hero__title { max-width: 30ch; }
.hero__lede { margin-top: 2rem; max-width: 54rem; color: rgba(244, 239, 230, 0.82); font-size: var(--step-1); text-wrap: pretty; }

.hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(244, 239, 230, 0.6); }

/* Rotating word — ghost and live word share one grid cell so the line keeps
   the width of the longest option without any absolute positioning. */
.rotator { display: inline-grid; vertical-align: baseline; }
.rotator__ghost,
.rotator__word { grid-area: 1 / 1; font-family: var(--font-display); font-style: italic; text-align: center; }
.rotator__ghost { visibility: hidden; }
.rotator__word { color: var(--gold-soft); transition: opacity 0.6s var(--ease-out-quint), transform 0.6s var(--ease-out-quint); }
.rotator__word.is-out { opacity: 0; transform: translateY(0.35em); }

/* Page hero (interior pages, no full-bleed image) */
.page-hero { padding-top: calc(var(--header-h) + clamp(3rem, 5vw, 5rem)); padding-bottom: var(--section-y); }
.page-hero__title { margin-top: 1.5rem; font-size: calc(var(--step-5) * var(--hd-fit, 1)); max-width: 26ch; text-wrap: pretty; }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__title { margin-inline: auto; }
.page-hero__lede { margin-top: 2rem; max-width: 46rem; color: var(--text-soft); font-size: var(--step-1); }
.page-hero--center .page-hero__lede { margin-inline: auto; }

/* Image hero used by service and area pages */
.hero--framed { min-height: min(85vh, 46rem); align-items: flex-end; }
.hero--framed .hero__inner { padding-bottom: clamp(4rem, 7vw, 7rem); }

/* --------------------------------------------------------------------------
   8. Marquee strip
   -------------------------------------------------------------------------- */
.marquee { border-block: 1px solid var(--line); background: var(--cream); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 2.5rem; padding: 1.1rem 1.25rem; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; }
.marquee__dot { color: var(--gold); }

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

/* --------------------------------------------------------------------------
   9. Split / feature layouts
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.split--wide-text { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--wide-media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }
.split__media-first .split__media { order: -1; }

.stack-photos { position: relative; padding-bottom: 4.5rem; padding-right: 3rem; }
.stack-photos__main { width: 100%; box-shadow: var(--shadow-md); }
.stack-photos__inset { position: absolute; right: 0; bottom: 0; width: 47%; border: 6px solid var(--cream); box-shadow: var(--shadow-md); }

.framed-photo { position: relative; }
.framed-photo::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; background: var(--muted); }
.framed-photo img { position: relative; width: 100%; }

.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 2rem; margin-top: 2.25rem; }
.checklist li { position: relative; padding-left: 1.35rem; font-size: 0.95rem; color: var(--text-soft); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* --------------------------------------------------------------------------
   10. Cards and grids
   -------------------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1px; margin-top: 3.5rem; background: var(--line); border: 1px solid var(--line); }

/* Cards keep their own light surface even inside a dark band, so they must also reset the inherited ivory text colour. */
.card { padding: clamp(1.75rem, 2.5vw, 2.5rem); background: var(--cream); color: var(--text); transition: background-color var(--dur) var(--ease-out-quint); }
.card:hover { background: var(--ivory); }
.card__title { font-size: var(--step-1); font-weight: 500; line-height: 1.35; }
.card__rule { width: 2.5rem; height: 1px; margin-block: 1.25rem; background: var(--gold); transition: width 0.5s var(--ease-out-quint); }
.card:hover .card__rule { width: 5rem; }
.card__text { font-size: 0.925rem; color: var(--text-soft); }

.card--alt { background: var(--muted); }
.card--alt:hover { background: var(--cream); }

.card--accent { display: grid; place-content: center; gap: 0.9rem; text-align: center; background: var(--brown); color: var(--ivory); }
.card--accent:hover { background: var(--brown); }
.card--accent .card__label { font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(244, 239, 230, 0.7); }
.card--accent .card__headline { font-size: var(--step-2); font-family: var(--font-display); font-style: italic; }
.card__dots { display: flex; justify-content: center; gap: 0.3rem; }
.card__dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* Link cards (services / areas / blog) */
/* min() lets the track shrink below its ideal width on a narrow phone, instead of forcing the row wider than the screen. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1.5rem; margin-top: 3.5rem; }

.tile { display: flex; flex-direction: column; padding: 2rem; background: var(--cream); border: 1px solid var(--line); transition: border-color var(--dur), transform var(--dur) var(--ease-out-quint),
              box-shadow var(--dur) var(--ease-out-quint); }
.tile:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tile__eyebrow { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); }
.tile__title { margin-top: 0.9rem; font-size: var(--step-1); font-weight: 500; line-height: 1.35; }
.tile__title--lead { margin-top: 0; }
.tile__text { margin-top: 0.9rem; font-size: 0.925rem; color: var(--text-soft); }
.tile__more { margin-top: auto; padding-top: 1.5rem; font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }

.tile--media { padding: 0; overflow: hidden; }
.tile--media .tile__body { padding: 1.75rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.tile__thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--muted); }
.tile__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-quint); }
.tile:hover .tile__thumb img { transform: scale(1.05); }

/* Value / step columns */
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); margin-top: 4rem; }
.step__num { font-size: 0.8rem; letter-spacing: 0.3em; color: var(--accent-text); }
.step__title { margin-top: 1rem; font-size: var(--step-2); }
.step__rule { width: 2.5rem; height: 1px; margin-block: 1.25rem; background: var(--gold); }
.step__text { color: rgba(244, 239, 230, 0.72); }
.section--cream .step__text,
.section--ivory .step__text { color: var(--text-soft); }

/* --------------------------------------------------------------------------
   11. Quote band
   -------------------------------------------------------------------------- */
.quote-band { position: relative; display: grid; place-items: center; min-height: 24rem; padding: var(--section-y) 0; overflow: hidden; isolation: isolate; }
.quote-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.quote-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(64, 48, 39, 0.55); }
.quote-band__text { max-width: 46rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.35; text-align: center; color: var(--ivory); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: 3.5rem; border-block: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }

.faq__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 1.65rem 0; cursor: pointer; list-style: none; }
.faq__summary::-webkit-details-marker { display: none; }
.faq__question { font-size: var(--step-1); font-weight: 500; line-height: 1.4; }
.faq__icon { flex: none; font-size: 1.5rem; line-height: 1; color: var(--gold); transition: transform 0.3s var(--ease-out-quint); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer { padding-bottom: 1.75rem; color: var(--text-soft); max-width: 60rem; }

.section--noir .faq,
.section--ink .faq { border-color: rgba(244, 239, 230, 0.15); }
.section--noir .faq__item,
.section--ink .faq__item { border-color: rgba(244, 239, 230, 0.15); }
.section--noir .faq__answer,
.section--ink .faq__answer { color: rgba(244, 239, 230, 0.72); }

/* --------------------------------------------------------------------------
   13. Testimonial marquee
   -------------------------------------------------------------------------- */
.reviews { margin-top: 4rem; overflow: hidden; }
.reviews__track { display: flex; gap: 2rem; width: max-content; animation: marquee 90s linear infinite; }
.reviews:hover .reviews__track { animation-play-state: paused; }

.review { width: min(27rem, 80vw); flex: none; padding: 2.5rem; border: 1px solid rgba(244, 239, 230, 0.12); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); }
.review__stars { display: flex; justify-content: center; gap: 0.25rem; color: var(--gold); margin-bottom: 1.5rem; }
.review__stars svg { width: 1rem; height: 1rem; }
.review__text { text-align: center; color: rgba(244, 239, 230, 0.85); }
.review__name { margin-top: 2rem; text-align: center; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* --------------------------------------------------------------------------
   14. Signature treatment slider
   -------------------------------------------------------------------------- */
.showcase { margin-top: 3.5rem; }
.showcase__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--muted); }
.showcase__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s var(--ease-out-quint), visibility 0.8s; }
.showcase__slide.is-active { opacity: 1; visibility: visible; }
.showcase__slide img { width: 100%; height: 100%; object-fit: cover; }

.showcase__caption { position: absolute; left: clamp(1.25rem, 3vw, 3rem); bottom: clamp(1.25rem, 3vw, 3rem); width: min(24rem, 70%); padding: clamp(1.5rem, 2.5vw, 2.5rem); background: var(--cream); }
.showcase__title { font-size: var(--step-2); }
.showcase__rule { width: 2.5rem; height: 1px; margin-block: 1.1rem; background: var(--gold); }
.showcase__text { font-size: 0.925rem; color: var(--text-soft); }
.showcase__caption .btn { margin-top: 1.5rem; }

.showcase__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-top: 0; border-bottom: 1px solid var(--line); }
.showcase__tab { flex: 1 1 12rem; padding: 1.35rem 1rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.3s, border-color 0.3s; }
.showcase__tab:hover { color: var(--noir); }
.showcase__tab.is-active { color: var(--noir); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   15. Before / after comparison
   -------------------------------------------------------------------------- */
.compare { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--muted); cursor: ew-resize; user-select: none; touch-action: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--compare-pos, 50%)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--compare-pos, 50%); width: 2px; background: var(--ivory); transform: translateX(-50%); pointer-events: none; }
.compare__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ivory); color: var(--noir); font-size: 0.7rem; box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   16. Forms — Gravity Forms markup
   These selectors are Gravity Forms' own ("gravity-theme" output from GF 2.5+),
   so the same stylesheet dresses the real forms once the site moves to
   WordPress. Nothing here depends on GF's own CSS being loaded.
   -------------------------------------------------------------------------- */
.gform_wrapper { margin-top: 0; }

.gform_required_legend { margin-bottom: 1.5rem; font-size: 0.78rem; color: var(--text-soft); }
.gfield_required_asterisk { color: var(--accent-text); margin-left: 0.2em; }

.gform_fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }

.gfield { display: grid; gap: 0.5rem; grid-column: 1 / -1; min-width: 0; }
.gfield--width-half { grid-column: span 1; }
.gfield--width-full { grid-column: 1 / -1; }

.gfield_label { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-soft); }

.ginput_container input,
.ginput_container select,
.ginput_container textarea { width: 100%; padding: 0.9rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); transition: border-color 0.3s; -webkit-appearance: none; appearance: none; }
.ginput_container select { padding-right: 1.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
                    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%); background-position: calc(100% - 10px) 1.35rem, calc(100% - 5px) 1.35rem; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.ginput_container textarea { resize: vertical; min-height: 7rem; }

.ginput_container input:focus,
.ginput_container select:focus,
.ginput_container textarea:focus { border-bottom-color: var(--gold); outline: none; }
.ginput_container input::placeholder,
.ginput_container textarea::placeholder { color: rgba(64, 48, 39, 0.4); }

.gfield_validation_message { font-size: 0.8rem; color: #9d3b2f; }
.gfield_error .ginput_container input,
.gfield_error .ginput_container select,
.gfield_error .ginput_container textarea { border-bottom-color: #9d3b2f; }

.gform_footer { margin-top: 2.5rem; }
.gform_button { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.9rem; background: var(--noir); border: 1px solid var(--noir); border-radius: 0; color: var(--ivory); font-family: inherit; font-size: 0.7rem; font-weight: 500; letter-spacing: var(--tracking-btn); text-transform: uppercase; cursor: pointer; transition: background-color var(--dur) var(--ease-out-quint),
              border-color var(--dur) var(--ease-out-quint),
              color var(--dur) var(--ease-out-quint); }
.gform_button:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }

.gform_confirmation_message { padding: 1.25rem 1.5rem; border-left: 2px solid var(--gold); background: var(--muted); color: var(--text); font-size: 0.95rem; }

/* Per-form "CSS Class Name" in GF: the single-field inline signup. */
.omnia-form--inline { margin-top: 1.5rem; }
.omnia-form--inline .gform_fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
.omnia-form--inline .gfield { grid-column: 1 / -1; }
.omnia-form--inline form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.omnia-form--inline .gform-body { flex: 1 1 14rem; min-width: 0; }
.omnia-form--inline .ginput_container input { padding: 0.9rem 1rem; border: 1px solid var(--noir-10); }
.omnia-form--inline .ginput_container input:focus { border-color: var(--gold); }
.omnia-form--inline .gform_footer { margin-top: 0; }
.omnia-form--inline .gform_button { padding: 0.95rem 1.6rem; }

.form__note { font-size: 0.875rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   17. Info cards (contact / financing)
   -------------------------------------------------------------------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.info__label { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); }
.info__lines { margin-top: 1.25rem; display: grid; gap: 0.35rem; color: var(--text-soft); }
.info__cta { display: inline-block; margin-top: 1.5rem; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--noir); border-bottom: 1px solid var(--gold); padding-bottom: 0.35rem; }
.info__cta:hover { color: var(--accent-text); }

.plan-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); margin-top: 3.5rem; }
.plan { display: flex; flex-direction: column; padding: clamp(2rem, 3vw, 2.75rem); background: var(--cream); border: 1px solid var(--line); }
.plan__logo { height: 2rem; width: auto; object-fit: contain; margin-bottom: 1.75rem; }
.plan__title { margin-top: 0.75rem; font-size: var(--step-2); }
.plan__text { margin-top: 1.25rem; color: var(--text-soft); font-size: 0.95rem; }
.plan__points { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.plan__points li { position: relative; padding-left: 1.35rem; font-size: 0.9rem; color: var(--text-soft); }
.plan__points li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan__points + .btn { margin-top: 2rem; }

/* Membership panel */
.membership { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(2rem, 4vw, 4rem); border: 1px solid var(--line); background: var(--cream); }
.membership__price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1.5rem; }
.membership__amount { font-size: var(--step-5); line-height: 1; }
.membership__period { font-size: 0.9rem; color: var(--text-soft); }
.membership__group + .membership__group { margin-top: 2.5rem; }
.membership__group h3 { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }
.membership__group ul { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.membership__group li { position: relative; padding-left: 1.5rem; color: var(--text-soft); }
.membership__group li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Product / drip detail */
.spec-list { display: grid; gap: 0.9rem; margin-top: 2rem; }
.spec-list li { position: relative; padding-left: 1.5rem; color: var(--text-soft); }
.spec-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.section--noir .spec-list li,
.section--ink .spec-list li { color: rgba(244, 239, 230, 0.75); }

.study { padding: 2rem 0; border-top: 1px solid rgba(244, 239, 230, 0.15); }
.study:first-child { border-top: 0; }
.study__title { font-size: var(--step-1); font-weight: 500; }
.study__cite { margin-top: 0.5rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.study__finding { margin-top: 1rem; color: rgba(244, 239, 230, 0.75); }

.pricebar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.pricebar__price { font-size: var(--step-3); }
.pricebar__size { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   18. Team
   -------------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: 3.5rem; align-items: start; }
.team__tabs { display: grid; gap: 0.5rem; }
.team__tab { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.25rem; text-align: left; border: 1px solid rgba(244, 239, 230, 0.15); color: rgba(244, 239, 230, 0.75); transition: border-color 0.3s, color 0.3s, background-color 0.3s; }
.team__tab:hover { color: var(--ivory); }
.team__tab.is-active { border-color: var(--gold); color: var(--ivory); background: rgba(244, 239, 230, 0.05); }
.team__tab img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: top center; }
.team__tab-name { font-size: 0.9rem; }
.team__tab-role { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); }

.team__panel { display: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.team__panel.is-active { display: grid; }
.team__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; }
.team__role { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }
.team__name { margin-top: 1rem; font-size: var(--step-3); }
.team__bio { margin-top: 1.5rem; color: rgba(244, 239, 230, 0.75); }

/* --------------------------------------------------------------------------
   19. Media embed
   -------------------------------------------------------------------------- */
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.75rem; background: var(--muted); box-shadow: var(--shadow-md); }
.video-frame--portrait { aspect-ratio: 9 / 16; max-width: 22rem; margin-inline: auto; border-radius: 1rem; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.map-embed { width: 100%; height: clamp(20rem, 40vw, 30rem); border: 0; filter: grayscale(0.3); }

/* --------------------------------------------------------------------------
   20. Quiz modal
   -------------------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }
.modal.is-open { visibility: visible; opacity: 1; }
.modal__scrim { position: absolute; inset: 0; background: rgba(17, 20, 24, 0.75); }

.modal__panel { position: relative; width: min(46rem, 100%); max-height: min(90vh, 46rem); overflow-y: auto; padding: clamp(2rem, 4vw, 3rem); background: var(--cream); box-shadow: var(--shadow-lg); transform: translateY(1rem); transition: transform 0.35s var(--ease-out-quint); }
.modal.is-open .modal__panel { transform: translateY(0); }

.modal__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--text-soft); }
.modal__close:hover { background: var(--muted); color: var(--noir); }

.quiz__progress { display: flex; gap: 0.4rem; margin-bottom: 2rem; }
.quiz__progress span { flex: 1; height: 2px; background: var(--line); }
.quiz__progress span.is-done { background: var(--gold); }

.quiz__prompt { font-size: var(--step-3); }
.quiz__options { display: grid; gap: 0.75rem; margin-top: 2rem; }
.quiz__option { padding: 1rem 1.25rem; text-align: left; border: 1px solid var(--line); transition: border-color 0.25s, background-color 0.25s; }
.quiz__option:hover { border-color: var(--gold); }
.quiz__option.is-picked { border-color: var(--gold); background: var(--muted); }

.quiz__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

.quiz__results { display: grid; gap: 1rem; margin-top: 2rem; }
.quiz__result { padding: 1.5rem; border: 1px solid var(--line); background: var(--white); }
.quiz__result-cat { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }
.quiz__result-name { margin-top: 0.5rem; font-size: var(--step-1); font-weight: 500; }
.quiz__result-desc { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ivory); color: var(--text); padding-top: 4.5rem; padding-bottom: 2.5rem; }

/* Quick Links sits beside Service Areas and is set identically: same size,
   tracking, colour and centred wrap. Eleven items wrap onto a second line
   rather than being squeezed onto one. */
.footer__nav-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; gap: 0.5rem 1.5rem; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--noir-70); }
.footer__nav-list a { white-space: nowrap; }
.footer__nav-list li { list-style: none; min-width: 0; }
.footer__nav-list a:hover { color: var(--accent-text); }

.footer__main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 4rem; }
.footer__title { font-size: var(--step-1); margin-bottom: 1.5rem; }
.footer__col p { font-size: 0.9rem; color: var(--noir-70); }
.footer__col a:hover { color: var(--accent-text); }
.footer__hours { margin-top: 1.5rem; display: grid; gap: 0.25rem; }
.footer__brand { display: grid; place-items: center; }
.footer__brand img { height: 5.5rem; width: auto; }
.footer__contact { text-align: right; }
.footer__contact .footer__lines { display: grid; gap: 0.75rem; }

.socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; justify-content: flex-end; }
.socials a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--gold-deep); color: var(--white); transition: background-color 0.3s; }
.socials a:hover { background: var(--noir); }
.socials svg { width: 0.875rem; height: 0.875rem; }

.footer__block { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--noir-10); }
.footer__block-title { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; color: var(--noir-55); margin-bottom: 1.5rem; }
.footer__areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--noir-70); }
.footer__areas a:hover { color: var(--accent-text); }

.footer__pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; }
.footer__pay img { height: 1.75rem; width: auto; object-fit: contain; opacity: 0.8; }
.footer__pay-note { margin-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--noir-55); }

.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--noir-10); text-align: center; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(64, 48, 39, 0.5); }

/* --------------------------------------------------------------------------
   21b. Editorial and detail components
   -------------------------------------------------------------------------- */

/* Gold rail used for the "in detail" copy on service pages */
.detail-rail { position: relative; padding-left: 2rem; }
.detail-rail::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--gold); }
.detail-rail::after,
.detail-rail .eyebrow::after { content: none; }
.detail-rail__text { margin-top: 1rem; }

@media (min-width: 900px) {
  .detail-rail__text { columns: 2; column-gap: 2.5rem; }
}

.pillars { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pillar { display: flex; align-items: flex-start; gap: 0.85rem; }
.pillar__num { font-size: 0.66rem; letter-spacing: 0.3em; color: var(--accent-text); padding-top: 0.15rem; }
.pillar__title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.pillar__text { font-size: 0.9rem; color: var(--text-soft); }

/* Card variant whose accent rule sits above the heading */
.card__rule--top { margin-top: 0; margin-bottom: 1.5rem; }
.card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

/* Photo-backed dark section */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section--photo .section__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0.1; }

/* Location fact panel */
.fact-card { padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line); background: var(--cream); }
.fact-card__title { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-text); }
.fact-card__title + .fact-card__line { margin-top: 0.75rem; }
.fact-card__line { color: var(--text-soft); }
.fact-card__line + .fact-card__title { margin-top: 1.75rem; }

/* Pull quote */
.pull-quote { margin-top: 2rem; padding-left: 1.75rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.45; }
.prose .pull-quote { margin-block: 2.5rem; }

/* Research list */
.studies { margin-top: 3rem; }

/* Article */
.article__meta { margin-top: 1.5rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); }
/* The banner ends where this image begins, so the image needs breathing room
   above it or the two read as one block. */
.article__hero { margin-top: clamp(2rem, 3.5vw, 3.5rem); margin-bottom: calc(var(--section-y) * -0.35); position: relative; z-index: 1; }
.article__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow-md); }
.prose > p:first-child { font-size: var(--step-1); color: var(--text); }

/* Featured blog post */
.feature-post { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border: 1px solid var(--line); background: var(--cream); transition: border-color var(--dur), box-shadow var(--dur) var(--ease-out-quint); }
.feature-post:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
/* A portrait source would otherwise drive the whole row's height. */
.feature-post__media { overflow: hidden; aspect-ratio: 4 / 3; }
.feature-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out-quint); }
.feature-post:hover .feature-post__media img { transform: scale(1.04); }
.feature-post__body { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 3.5vw, 3rem); }
.feature-post__title { font-size: var(--step-3); }
.feature-post__body .tile__more { margin-top: auto; }

/* --------------------------------------------------------------------------
   22. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--accent-text); }
.breadcrumbs a:hover { color: var(--accent-text); }
.breadcrumbs--on-dark { color: rgba(244, 239, 230, 0.6); }

/* Breadcrumbs always sit above an eyebrow — keep them from colliding. */
.hero__inner nav,
.page-hero nav { margin-bottom: 2rem; }
.page-hero--center nav .breadcrumbs { justify-content: center; }

/* --------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.9s var(--ease-out-quint), transform 0.9s var(--ease-out-quint); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger steps, so markup never needs an inline transition-delay. */
.reveal--d1 { transition-delay: 90ms; }
.reveal--d2 { transition-delay: 180ms; }
.reveal--d3 { transition-delay: 270ms; }
.reveal--d4 { transition-delay: 360ms; }
.reveal--d5 { transition-delay: 450ms; }
.reveal--d6 { transition-delay: 540ms; }

.ken-burns { animation: kenBurns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.5%, -1%); }
}

.float-y { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -10px); }
}

.img-zoom { overflow: hidden; }
.img-zoom > img { transition: transform 1.6s var(--ease-out-quint); }
.img-zoom:hover > img { transform: scale(1.06); }

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

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root { --gutter: 2.5rem; }
  .nav__list { gap: 1.25rem; }
  .nav { padding-left: 1.5rem; }
}

@media (max-width: 1024px) {
  :root { --gutter: 2rem; --header-h: 5.5rem; }
  .nav__list { display: none; }
  .nav__burger { display: inline-flex; }
  .megamenu { display: none; }
  .split,
  .split--wide-text,
  .split--wide-media { grid-template-columns: minmax(0, 1fr); }
  .split__media { order: -1; }
  .team { grid-template-columns: minmax(0, 1fr); }
  .team__panel.is-active { grid-template-columns: minmax(0, 1fr); }
  .membership { grid-template-columns: minmax(0, 1fr); }
  .footer__nav { flex-wrap: wrap; }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; order: -1; }
  .footer__contact { text-align: left; }
  .socials { justify-content: flex-start; }
}

@media (max-width: 720px) {
  :root { --gutter: 1.25rem; }
  .announce__meta { display: none; }
  .announce__inner { justify-content: center; }
  .nav { padding: 0.5rem 0.5rem 0.5rem 1.25rem; }
  .nav .btn { padding: 0.85rem 1.15rem; letter-spacing: 0.18em; font-size: 0.62rem; }
  .nav__hide-sm { display: none; }
  .hero { min-height: 34rem; }
  .hero--framed { min-height: 30rem; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .showcase__stage { aspect-ratio: 4 / 5; }
  .showcase__caption { position: static; width: auto; }
  .showcase__tab { flex-basis: 50%; }
  .stack-photos { padding-right: 1.5rem; padding-bottom: 3rem; }
  .stack-photos__inset { width: 52%; }
  .footer__main { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .footer__contact { text-align: center; }
  .socials { justify-content: center; }
  .footer__nav { flex-wrap: wrap; gap: 0.75rem 1.5rem; letter-spacing: 0.18em; font-size: 0.68rem; }
  .review { padding: 1.75rem; }
  .pull-quote { padding-left: 1.25rem; }
  .detail-rail { padding-left: 1.25rem; }
}

@media (max-width: 1024px) {
  .card-grid--two { grid-template-columns: minmax(0, 1fr); }
  .feature-post { grid-template-columns: minmax(0, 1fr); }
  .feature-post__media { aspect-ratio: 16 / 10; }
  .article__hero { margin-top: 1.75rem; margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   25. Gravity Forms integration tweaks
   GF's own stylesheets are disabled (Forms -> Settings -> Output Default CSS),
   so these rules finish the job for markup GF adds that the static build did not.
   -------------------------------------------------------------------------- */
.omnia-form--inline .gform_required_legend { display: none; }
.omnia-form--inline .gform_wrapper { width: 100%; }

/* GF hides labels with a class rather than markup; with GF's CSS off the theme
   has to supply the visually-hidden treatment itself. */
.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .hidden_sub_label,
.gform_wrapper .gform_hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.gform_wrapper .gform_validation_errors { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-left: 2px solid #9d3b2f; background: var(--muted); font-size: 0.9rem; }
.gform_wrapper .gform_validation_errors h2 { font-size: var(--step-0); font-weight: 500; }
.gform_wrapper .gform_validation_errors ol { margin-top: 0.5rem; display: grid; gap: 0.25rem; }

.gform_wrapper .gfield_description { font-size: 0.85rem; color: var(--text-soft); }
.gform_wrapper .ginput_container_phone input,
.gform_wrapper .ginput_container_name input { width: 100%; }
.gform_wrapper .gform_ajax_spinner { margin-left: 0.75rem; }
.gform_wrapper .gform_fields { grid-column-gap: 1.5rem; grid-row-gap: 1.5rem; }

/* Rich-text output (ACF wysiwyg) inside a lede block: the global reset zeroes
   paragraph margins, so restore the rhythm where an editor can add paragraphs. */
.section-head__lede > p + p,
.section-head__lede > ul,
.section-head__lede > ol { margin-top: 1.25rem; }
.section-head__lede > ul { display: grid; gap: 0.6rem; }
.section-head__lede > ul li { position: relative; padding-left: 1.4rem; }
.section-head__lede > ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Quiz item in the desktop navigation */
.nav__quiz { font-size: calc(0.72rem + 1px); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--noir-70); transition: color 0.3s; }
.nav__quiz:hover { color: var(--noir); }
@media (max-width: 1024px) { .nav__quiz { display: none; } }

/* Optional logo inside a ticker item */
.marquee__logo { height: 1.5rem; width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   26. Thank you page
   -------------------------------------------------------------------------- */
/* First section on the page, so it must clear the fixed header. */
.thanks { padding-top: calc(var(--header-h) + var(--section-y)); text-align: center; }
.thanks__inner { display: grid; justify-items: center; }

.thanks__tick { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin-bottom: 2rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-deep); animation: tickIn 0.7s var(--ease-out-quint) both; }
.thanks__tick svg { width: 1.75rem; height: 1.75rem; }

@keyframes tickIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.thanks__title { margin-top: 1.25rem; font-size: var(--step-5); max-width: 18ch; }
.thanks .section-head__lede { max-width: 44rem; }
.thanks__note { margin-top: 2rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); }

/* Contact / booking cards */
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin-top: 3.5rem; }

.action-card { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; padding: clamp(1.75rem, 3vw, 2.5rem); text-align: left; background: var(--cream); border: 1px solid var(--line); color: var(--text); transition: border-color var(--dur), transform var(--dur) var(--ease-out-quint),
              box-shadow var(--dur) var(--ease-out-quint); }
.action-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: var(--shadow-md); }
.action-card__label { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-text); }
.action-card__value { font-size: var(--step-2); line-height: 1.2; }
.action-card .tile__more { margin-top: auto; padding-top: 1.25rem; }

@media (max-width: 720px) {
  .thanks__title { max-width: none; }
  .action-card { text-align: center; align-items: center; }
}

/* --------------------------------------------------------------------------
   27. Legal / policy pages
   These use the full 1440 container. Long prose at that width is unreadable in
   a single column, so the body is set in two columns on wide screens: the page
   fills its container while the line length stays comfortable.
   -------------------------------------------------------------------------- */
.legal-updated { margin-top: 2rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); }

.legal-part + .legal-part { margin-top: 3rem; }
.legal-part__title { font-size: var(--step-2); }
.legal-part__num { color: var(--accent-text); margin-right: 0.35rem; }
.legal-part__body { margin-top: 1.25rem; color: var(--text-soft); }
.legal-part__body p + p { margin-top: 1.25rem; }
.legal-part__body ul { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.legal-part__body ul li { position: relative; padding-left: 1.4rem; }
.legal-part__body ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

@media (min-width: 1100px) {
  .legal-body--columns { columns: 2; column-gap: clamp(3rem, 5vw, 5.5rem); }
  /* A section must never be split across the column break. */
  .legal-body--columns .legal-part { break-inside: avoid; page-break-inside: avoid; }
  .legal-body--columns .legal-part:first-child { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   28. Membership plans
   -------------------------------------------------------------------------- */
.membership-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .membership-grid:has(> .membership + .membership) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-grid:has(> .membership + .membership) .membership { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   29. Blog: pagination, tags, prev/next, search
   -------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 3.5rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: 0.75rem 1rem; border: 1px solid var(--line); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); transition: border-color 0.3s, color 0.3s, background-color 0.3s; }
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--noir); }
.pagination .page-numbers.current { background: var(--noir); border-color: var(--noir); color: var(--ivory); }
.pagination .page-numbers.dots { border-color: transparent; }

.article__tags { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.article__tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.article__tag-list a { padding: 0.55rem 1.1rem; border: 1px solid var(--line); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); transition: border-color 0.3s, color 0.3s; }
.article__tag-list a:hover { border-color: var(--gold); color: var(--noir); }

.article__nav { display: grid; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .article__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article__nav-link { display: grid; gap: 0.6rem; }
.article__nav-link--next { text-align: right; }
.article__nav-title { font-size: var(--step-1); line-height: 1.35; transition: color 0.3s; }
.article__nav-link:hover .article__nav-title { color: var(--accent-text); }

.search-form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }
.search-form input { flex: 1 1 18rem; max-width: 24rem; padding: 0.9rem 1rem; background: var(--white); border: 1px solid var(--line); color: var(--text); }
.search-form input:focus { border-color: var(--gold); outline: none; }

/* --------------------------------------------------------------------------
   30. Editor content — `.default-css`
   Applied to every block of WordPress editor output (single posts, default
   pages, legal sections). Anything the client writes or pastes lands here, so
   the core WordPress classes are all covered rather than left unstyled.
   -------------------------------------------------------------------------- */
.default-css > *:first-child { margin-top: 0; }
.default-css > *:last-child { margin-bottom: 0; }

.default-css p { margin-bottom: 1.35rem; }
.default-css h2 { margin-top: 3rem; margin-bottom: 1.25rem; font-size: var(--step-3); }
.default-css h3 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: var(--step-2); }
.default-css h4 { margin-top: 2rem; margin-bottom: 0.85rem; font-size: var(--step-1); font-weight: 500; }
.default-css h5,
.default-css h6 { margin-top: 1.75rem; margin-bottom: 0.75rem; font-size: var(--step-0); font-weight: 600; }

.default-css a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.25em; }
.default-css a:hover { color: var(--noir); }

.default-css strong,
.default-css b { font-weight: 600; color: var(--text); }
.default-css em { font-style: italic; }

.default-css ul,
.default-css ol { margin: 1.5rem 0; display: grid; gap: 0.65rem; }
.default-css ol { counter-reset: dcs; }
.default-css li { position: relative; padding-left: 1.6rem; }
.default-css ul > li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.default-css ol > li { counter-increment: dcs; }
.default-css ol > li::before { content: counter(dcs) "."; position: absolute; left: 0; top: 0; font-size: 0.85em; color: var(--accent-text); }
.default-css li > ul,
.default-css li > ol { margin: 0.65rem 0 0; }

.default-css blockquote { margin: 2.5rem 0; padding-left: 1.75rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.45; color: var(--text); }
.default-css blockquote p { margin-bottom: 1rem; }
.default-css blockquote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); }

.default-css img,
.default-css figure { margin: 2.5rem 0; }
.default-css img { height: auto; }
.default-css figcaption { margin-top: 0.85rem; font-size: 0.85rem; color: var(--text-soft); text-align: center; }

.default-css hr { margin: 3rem 0; height: 1px; background: var(--line); border: 0; }

.default-css table { width: 100%; margin: 2.5rem 0; border-collapse: collapse; font-size: 0.95rem; }
.default-css th,
.default-css td { padding: 0.85rem 1rem; border: 1px solid var(--line); text-align: left; }
.default-css th { background: var(--muted); font-weight: 600; }

.default-css code { padding: 0.15em 0.4em; background: var(--muted); font-size: 0.9em; }
.default-css pre { margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--muted); overflow-x: auto; }
.default-css pre code { padding: 0; background: none; }

/* WordPress core alignment and caption classes */
.default-css .alignleft { float: left; margin: 0.5rem 2rem 1.5rem 0; max-width: 50%; }
.default-css .alignright { float: right; margin: 0.5rem 0 1.5rem 2rem; max-width: 50%; }
.default-css .aligncenter { display: block; margin-inline: auto; }
.default-css .alignwide,
.default-css .alignfull { margin-inline: 0; max-width: 100%; }
.default-css .wp-caption { max-width: 100%; }
.default-css .wp-caption-text { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-soft); }
.default-css .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.default-css embed,
.default-css iframe,
.default-css object { max-width: 100%; }
.default-css .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

@media (max-width: 600px) {
  .default-css .alignleft,
  .default-css .alignright { float: none; margin-inline: 0; max-width: 100%; }
  .default-css table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   31. 404
   -------------------------------------------------------------------------- */
.error-404 { padding-top: calc(var(--header-h) + var(--section-y)); background: var(--cream); text-align: center; }
.error-404__inner { display: grid; justify-items: center; }
.error-404__code { font-family: var(--font-display); font-style: italic; font-size: clamp(5rem, 14vw, 11rem); line-height: 0.9; color: var(--gold); opacity: 0.35; margin-bottom: 1rem; }
.error-404__title { margin-top: 1.25rem; font-size: var(--step-5); max-width: 16ch; }
.error-404 .section-head__lede { max-width: 44rem; }

/* --------------------------------------------------------------------------
   32. Inner-page banner wrapper — `.inn-banner-css`
   Every inner page (and the archive, single, 404 and thank-you screens) wraps
   its banner section in this div. It carries no styling of its own, so it is
   a clean hook for per-project banner CSS without touching the templates.
   -------------------------------------------------------------------------- */
.inn-banner-css { position: relative; }

/* --------------------------------------------------------------------------
   33. Sticky header
   At the top of the page the navigation is a floating pill. Once the page is
   scrolled it settles into a full-width bar: the pill loses its radius, shadow
   and inset, and spans the viewport with the contents still held to the
   container. `.is-stuck` is toggled by main.js past 20px of scroll.
   -------------------------------------------------------------------------- */
/* Break out of the container so the bar reaches both edges, while the nav itself keeps the container's own gutters. */
.site-header.is-stuck .nav-shell { padding-top: 0; max-width: none; padding-inline: 0; position: relative; isolation: isolate; }

/* The bar's ground and bottom rule come from .nav-shell::before, so the pill
   drops its own border, radius and shadow entirely — otherwise its rounded
   corners show through at the ends of a full-width bar. */
.site-header.is-stuck .nav { max-width: var(--container); margin-inline: auto; padding: 0.65rem var(--gutter); border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }

/* The bar's own full-bleed ground, so the ends are filled at any width. */
.site-header.is-stuck .nav-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(247, 244, 240, 0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -24px rgba(17, 20, 24, 0.45); }


/* The mega menus are positioned against .nav-shell; once it is full width they
   need the container's gutters back or they would touch the viewport edges. */
.site-header.is-stuck .megamenu--services { left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }

.site-header .nav,
.site-header .nav-shell { transition: padding 0.35s var(--ease-out-quint), border-radius 0.35s var(--ease-out-quint), background-color 0.35s, box-shadow 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .site-header .nav,
  .site-header .nav-shell { transition: none; }
}


/* --------------------------------------------------------------------------
   34. Two-line headings
   Display headings are held to a measure that keeps them to two lines at most,
   and `text-wrap: balance` splits those two lines evenly instead of leaving a
   single orphaned word underneath. The measure is widened step by step on
   narrower screens, where the type is smaller and a longer line still reads
   comfortably.
   -------------------------------------------------------------------------- */
/* `text-wrap: balance` re-flows a heading every time its type size changes,
   which fights the auto-fit below and makes the result depend on which frame
   you look at. `pretty` only cleans up the last line, so the fit converges. */
.page-hero__title,
.section-head__title,
.hero__title { text-wrap: pretty; }

@media (max-width: 1024px) {
  .page-hero__title { max-width: 30ch; }
  .hero__title,
  .hero--center .hero__title { max-width: 26ch; }
}

@media (max-width: 700px) {
  .page-hero__title { max-width: none; }
  .hero__title,
  .hero--center .hero__title { max-width: none; }
  .section-head__title { text-wrap: pretty; }
}

/* --------------------------------------------------------------------------
   35. Heading auto-fit
   A measure alone cannot hold every heading to two lines: the split sections
   put a 52px display heading in a ~530px column, where a long line runs to
   four. main.js measures each display heading and, only when it overflows two
   lines, adds the next step of this scale until it fits. Short headings keep
   their full size, so the type scale is unchanged everywhere it already works.
   The size is a multiplier on the heading's own step, applied through a custom
   property, so nothing is written inline.
   -------------------------------------------------------------------------- */
.hd-fit-1 { --hd-fit: 0.88; }
.hd-fit-2 { --hd-fit: 0.78; }
.hd-fit-3 { --hd-fit: 0.68; }
.hd-fit-4 { --hd-fit: 0.6; }
.hd-fit-5 { --hd-fit: 0.52; }

/* --------------------------------------------------------------------------
   36. WordPress admin bar
   The header is fixed to the top of the viewport, and so is the admin bar, so
   for a logged-in user the two overlap. These rules only ever match when
   WordPress has actually printed the bar (it adds `.admin-bar` to <body>), so
   they are inert for visitors. The heights are WordPress's own: 32px on the
   desktop bar, 46px on the taller mobile one, and below 600px the bar stops
   being fixed and scrolls away with the page, so no offset is wanted there.
   -------------------------------------------------------------------------- */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 46px); }
}

@media screen and (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
}

/* --------------------------------------------------------------------------
   37. Single post measure
   The article column is set wider than the default prose measure.
   -------------------------------------------------------------------------- */
.container.container--prose.single-post__content-inner:has(> .prose.entry-content.default-css.single-post__body) { max-width: 1000px; }

/* --------------------------------------------------------------------------
   38. Checked bullets
   Editor and template body copy uses the brand check mark in place of a dot.
   The icon is a mask rather than a background image, so it takes its colour
   from `currentColor` and stays legible on the dark sections too. Browsers
   without mask support fall back to the gold dot defined earlier.
   -------------------------------------------------------------------------- */
@supports (mask-image: url("../img/checked-bullet.png")) or (-webkit-mask-image: url("../img/checked-bullet.png")) {
  .prose ul li::before,
  .default-css ul > li::before,
  .legal-part__body ul li::before,
  .section-head__lede > ul li::before { top: 0.2em; width: 1.05em; height: 1.05em; border-radius: 0; background: var(--accent-text); -webkit-mask: url("../img/checked-bullet.png") no-repeat center / contain; mask: url("../img/checked-bullet.png") no-repeat center / contain; }

  /* Room for the wider marker. */
  .prose ul li,
  .legal-part__body ul li,
  .section-head__lede > ul li { padding-left: 1.85rem; }
  .default-css li { padding-left: 1.95rem; }

  /* On the dark sections the ink-coloured accent disappears. */
  .section--noir .prose ul li::before,
  .section--ink .prose ul li::before,
  .section--noir .default-css ul > li::before,
  .section--ink .default-css ul > li::before,
  .section--noir .section-head__lede > ul li::before,
  .section--ink .section-head__lede > ul li::before { background: var(--gold); }
}

/* --------------------------------------------------------------------------
   39. Grouped sections
   Two places stack several blocks inside one coloured section: the treatment
   menu and the service area pages. In the reference these were bare containers
   with nothing between them, so a block's eyebrow landed on the tile grid
   above it. Each block now has its own wrapper with its own rhythm, and a
   hairline rule marks where one ends and the next begins.
   -------------------------------------------------------------------------- */
.menu-groups { padding-block: 0; }

.menu-group { padding-block: clamp(3.25rem, 5vw, 5rem); }

.menu-group + .menu-group { border-top: 1px solid var(--line); }

/* The first and last blocks keep the section's own outer spacing. */
.menu-groups > .menu-group:first-child { padding-top: var(--section-y); }
.menu-groups > .menu-group:last-child { padding-bottom: var(--section-y); }

/* Each service area section is wrapped so the page reads as separate blocks
   rather than one long scroll. Consecutive blocks on the same ground get the
   hairline; where the background changes, the colour is separation enough. */
.area-section + .area-section > .section--cream { border-top: 1px solid var(--line); }
.area-section + .area-section > .section--ivory { border-top: 1px solid var(--line); }
.area-section + .area-section > .section--noir,
.area-section + .area-section > .section--ink { border-top: 0; }

@media (max-width: 700px) {
  .menu-group { padding-block: clamp(2.5rem, 8vw, 3.25rem); }
}

/* --------------------------------------------------------------------------
   40. Form details
   The message box arrived at roughly ten rows, which left a large empty panel
   in the middle of the contact page. Six rows is enough to write in and still
   resizes if someone needs more room.
   -------------------------------------------------------------------------- */
/* Gravity Forms writes rows="10" on the message box, which left a tall empty
   panel mid-page. The theme styles these through .ginput_container, so that is
   what the height belongs on. It still drags taller if someone needs the room. */
.ginput_container textarea,
.ginput_container textarea.medium,
.ginput_container textarea.large { min-height: 7.5rem; height: 7.5rem; resize: vertical; }

/* A search box that has been submitted empty says so, rather than looking
   like nothing happened. */
.search-form input[type="search"]:invalid:not(:placeholder-shown) { border-bottom-color: var(--accent-text); }

/* --------------------------------------------------------------------------
   41. Short grids sit centred
   `auto-fill` keeps the empty column at the end of a row, so three tiles in a
   four-column grid hug the left with a gap beside them. Below four items the
   tracks are capped and the row is centred, which keeps each tile the size it
   would have been rather than stretching it to fill the space.
   -------------------------------------------------------------------------- */
.tile-grid:not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 23rem)); justify-content: center; }

.card-grid:not(.card-grid--two):not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 23rem)); justify-content: center; }

/* On a phone everything is one column already, so nothing to centre. */
@media (max-width: 640px) {
  .tile-grid:not(:has(> :nth-child(4))),
  .card-grid:not(.card-grid--two):not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   42. Stacked buttons match each other
   Where two buttons sit one above the other — the membership card, the drawer
   footer — they shrink to their own label and end up different widths. A
   single-column grid sized to the widest label makes both the same width
   without stretching them across the whole column.
   -------------------------------------------------------------------------- */
.membership .btn-row { display: grid; grid-template-columns: minmax(0, max-content); justify-content: start; gap: 0.75rem; }

.membership .btn-row .btn { width: 100%; justify-content: center; text-align: center; }

@media (max-width: 640px) {
  /* On a phone the card is the full width, so the buttons take it. */
  .membership .btn-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   43. The narrowest phones
   At 320px the logo, the booking button and the burger together come to a few
   pixels more than the row can hold, and the actions push past the edge. The
   row is tightened just for those widths rather than dropping the booking
   button, which is the main call to action on the page.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .nav { padding: 0.5rem 0.4rem 0.5rem 0.9rem; }
  .nav__actions { gap: 0.35rem; }
  .nav__actions .btn { padding: 0.7rem 0.9rem; font-size: 0.58rem; letter-spacing: 0.14em; }
  .nav__burger { width: 2.25rem; height: 2.25rem; }
  .nav__logo img { max-width: 5rem; }
}

@media (max-width: 360px) {
  .nav { padding: 0.5rem 0.3rem 0.5rem 0.75rem; }
  .nav__actions .btn { padding: 0.65rem 0.75rem; font-size: 0.55rem; letter-spacing: 0.1em; }
  .nav__logo img { max-width: 4.5rem; }
}

/* --------------------------------------------------------------------------
   44. The rotating word keeps its own line
   Inline, the changing word wraps up beside the last words of the heading on a
   narrow screen, and the line above reflows every time the word changes. From
   tablet down it becomes its own block, so it always sits on the last line and
   the heading above it stays put.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .rotator { display: grid; justify-content: center; width: 100%; }

  .hero:not(.hero--center) .rotator { justify-content: start; }
}