/* ==========================================================================
   Salon Tiara — the shade card
   The site reads like a colourist's swatch card: every section is one hair
   shade darker, platinum at the top to espresso at the foot, and every photo
   frame is an arch-tipped swatch.
   ========================================================================== */

:root {
	/* The seven shades, lightest to darkest. They are the only tones on the site;
	   lines and soft text are these shades at lower opacity. */
	--platinum: #f5efe6;
	--champagne: #ebe0cf;
	--honey: #d8bc97;
	--caramel: #a27756;
	--copper: #8a4e24;
	--chestnut: #3b2417;
	--espresso: #16100c;

	--ok: #2f6b45; /* form notices only */
	--error: #a3352a;

	/* Skinova when its licensed file is installed (see functions.php), Bodoni Moda until then */
	--display: "Tiara Skinova", "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

	--wrap: 1280px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(56px, 6.4vw, 96px);
	--head-h: 86px; /* the masthead: its 62px pill plus 12px above and below */
	--pill: 999px;
	--arch: 999px 999px 0 0;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--copper-fill: linear-gradient(172deg, var(--copper) 0%, var(--copper) 48%, var(--chestnut) 165%);
}

/* Each shade sets the colours that sit on it. */
.shade, .masthead { background: var(--bg); color: var(--fg); }
.shade--platinum, .masthead {
	--bg: var(--platinum); --fg: var(--espresso); --fg-2: rgba(22, 16, 12, 0.72);
	--line: rgba(22, 16, 12, 0.14); --line-2: rgba(22, 16, 12, 0.3);
	--tone: var(--copper); --link: var(--copper); --outline: var(--copper); --focus: var(--copper);
	--pill-bg: var(--copper); --pill-fg: var(--platinum);
}
.shade--champagne {
	--bg: var(--champagne); --fg: var(--espresso); --fg-2: rgba(22, 16, 12, 0.76);
	--line: rgba(22, 16, 12, 0.16); --line-2: rgba(22, 16, 12, 0.32);
	--tone: var(--copper); --link: var(--copper); --outline: var(--copper); --focus: var(--copper);
	--pill-bg: var(--copper); --pill-fg: var(--platinum);
}
.shade--caramel {
	--bg: var(--caramel); --fg: var(--espresso); --fg-2: var(--espresso);
	--line: rgba(22, 16, 12, 0.24); --line-2: rgba(22, 16, 12, 0.5);
	--tone: var(--platinum); --link: var(--espresso); --outline: rgba(22, 16, 12, 0.55); --focus: var(--espresso);
	--pill-bg: var(--espresso); --pill-fg: var(--platinum);
}
.shade--honey {
	--bg: var(--honey); --fg: var(--espresso); --fg-2: rgba(22, 16, 12, 0.8);
	--line: rgba(22, 16, 12, 0.2); --line-2: rgba(22, 16, 12, 0.4);
	--tone: var(--copper); --link: var(--espresso); --outline: var(--copper); --focus: var(--espresso);
	--pill-bg: var(--espresso); --pill-fg: var(--platinum);
}
.shade--chestnut {
	--bg: var(--chestnut); --fg: var(--platinum); --fg-2: rgba(245, 239, 230, 0.74);
	--line: rgba(245, 239, 230, 0.16); --line-2: rgba(245, 239, 230, 0.36);
	--tone: var(--honey); --link: var(--honey); --outline: rgba(216, 188, 151, 0.6); --focus: var(--honey);
	--pill-bg: var(--honey); --pill-fg: var(--espresso);
}
.shade--espresso {
	--bg: var(--espresso); --fg: var(--platinum); --fg-2: rgba(245, 239, 230, 0.7);
	--line: rgba(245, 239, 230, 0.14); --line-2: rgba(245, 239, 230, 0.34);
	--tone: var(--honey); --link: var(--honey); --outline: rgba(216, 188, 151, 0.6); --focus: var(--honey);
	--pill-bg: var(--honey); --pill-fg: var(--espresso);
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--head-h) + 24px);
	background: var(--platinum);
	scrollbar-color: var(--caramel) var(--champagne);
}
body {
	margin: 0;
	background: var(--platinum);
	color: var(--espresso);
	font: 400 1.0625rem/1.65 var(--sans);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	caret-color: var(--copper);
	accent-color: var(--copper);
}
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link, var(--copper)); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--fg, var(--espresso)); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--copper); color: var(--platinum); }
:focus-visible { outline: 2px solid var(--focus, var(--copper)); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 200;
	background: var(--espresso); color: var(--platinum); padding: 12px 18px; border-radius: var(--pill);
}
.skip-link:focus { top: 12px; color: var(--platinum); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Type ---------------------------------------------------------------------
   Headings run two lines: ink, then the shade's tone (copper on light shades). */
.title {
	font: 500 clamp(2.5rem, 5vw, 4.6rem)/0.98 var(--display);
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--fg);
}
.title__line { display: block; }
.title__tone { color: var(--tone); }
.title--page { font-size: clamp(3rem, 6.6vw, 5.75rem); line-height: 0.94; letter-spacing: -0.028em; }
.title--small { font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1; }
.lead { color: var(--fg-2); font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); max-width: 52ch; }

/* Buttons ------------------------------------------------------------------ */
.btn {
	--b: currentColor;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 28px;
	border: 1px solid var(--b); border-radius: var(--pill);
	background: transparent; color: var(--fg, var(--espresso));
	font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase;
	text-decoration: none; white-space: nowrap;
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease),
		box-shadow 0.45s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
/* Copper: every Book action. */
.btn--copper {
	--b: transparent;
	background: var(--copper-fill);
	color: var(--platinum);
	box-shadow: inset 0 1px 0 rgba(245, 239, 230, 0.22), 0 14px 24px -16px rgba(22, 16, 12, 0.6);
}
.btn--copper:hover {
	color: var(--platinum); filter: brightness(1.12); transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(245, 239, 230, 0.26), 0 20px 30px -18px rgba(22, 16, 12, 0.65);
}
.shade--chestnut .btn--copper, .shade--espresso .btn--copper { box-shadow: inset 0 1px 0 rgba(245, 239, 230, 0.22); }
.btn--ink { --b: var(--espresso); background: var(--espresso); color: var(--platinum); }
.btn--ink:hover { --b: var(--chestnut); background: var(--chestnut); color: var(--platinum); }
.btn--line { --b: var(--line-2); }
.btn--line:hover { --b: var(--fg); background: var(--fg); color: var(--bg); }
.btn--line-light { --b: rgba(245, 239, 230, 0.45); color: var(--platinum); }
.btn--line-light:hover { --b: var(--platinum); background: var(--platinum); color: var(--espresso); }
.btn--block { width: 100%; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--fg); text-decoration: underline; text-decoration-color: var(--tone);
	text-decoration-thickness: 1px; text-underline-offset: 9px;
}
.link-arrow:hover { color: var(--fg); }
.link-arrow .icon { width: 18px; height: 18px; transition: transform 0.4s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* The arch: a swatch tip. Round top, square base. An .arch-frame adds the
   offset hairline arch behind it. */
.arch { position: relative; overflow: hidden; border-radius: var(--arch); background: var(--honey); isolation: isolate; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch-frame { position: relative; isolation: isolate; }
.arch-frame::before {
	content: ""; position: absolute; inset: -14px 14px 14px -14px; z-index: -1;
	border: 1px solid var(--outline); border-radius: var(--arch); pointer-events: none;
}

/* Masthead -----------------------------------------------------------------
   A floating pill; once the page scrolls it docks into a frosted platinum band. */
.masthead {
	position: sticky; top: 0; z-index: 50;
	background: transparent;
	padding: 12px var(--gutter);
	transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.masthead.is-stuck {
	background: rgba(245, 239, 230, 0.78);
	-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 1px 0 rgba(22, 16, 12, 0.08);
}
.admin-bar .masthead { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .masthead { top: 0; } } /* the admin bar scrolls away here */

.masthead__bar {
	max-width: var(--wrap); margin-inline: auto;
	display: flex; align-items: center; gap: 24px;
	min-height: 60px; padding: 8px 8px 8px 28px;
	border-radius: var(--pill);
	background: rgba(245, 239, 230, 0.9);
	-webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
	border: 1px solid rgba(22, 16, 12, 0.1);
	box-shadow: 0 16px 36px -24px rgba(59, 36, 23, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.logo { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; }
.logo:hover { color: var(--fg); }
.logo__name { font: 500 1.5rem/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.logo__tone { color: var(--tone); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: clamp(16px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; }
.nav__link {
	position: relative; display: block; padding-block: 12px;
	font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--fg-2); text-decoration: none; transition: color 0.3s var(--ease);
}
/* A copper dot marks the current page and follows the pointer. */
.nav__link::after {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; border-radius: 50%;
	background: var(--copper); transform: translateX(-50%) scale(0); transition: transform 0.4s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.nav__drawer-extra { display: none; }
.masthead__actions { display: flex; align-items: center; gap: 8px; }
.masthead__book { min-height: 44px; padding: 0 24px; }
.menu-toggle {
	display: none; width: 44px; height: 44px; place-items: center;
	background: var(--espresso); color: var(--platinum); border: 0; border-radius: 50%;
}
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle__close { display: none; }

/* Home hero ----------------------------------------------------------------
   A full-screen slideshow that runs up under the floating masthead. A sweep of the next band's
   champagne cuts across its foot, so the banner curves straight into the services.
   Each photo keeps its own shape in the right of the banner and fades into a panel of its studio
   backdrop, so the whole face shows at any screen shape and the words stand on plain backdrop.
   Each slide sets the tone of its words: espresso on a light backdrop, platinum on a dark one;
   the banner takes the active slide's tone for its controls. */
.hero {
	position: relative; margin-top: calc(-1 * var(--head-h));
}
.hero__banner {
	--sweep: clamp(48px, 8vw, 124px);
	position: relative; isolation: isolate; overflow: hidden;
	height: clamp(560px, 100svh, 1000px);
	background: var(--chestnut);
	touch-action: pan-y;
}
.hero__banner[data-tone="light"], .hero__slide[data-tone="light"] {
	--h-fg: var(--espresso); --h-tone: var(--copper);
	--h-veil: linear-gradient(90deg, rgba(245, 239, 230, 0.66) 0%, rgba(245, 239, 230, 0.54) 34%, rgba(245, 239, 230, 0.26) 50%, rgba(245, 239, 230, 0) 66%);
}
.hero__banner[data-tone="dark"], .hero__slide[data-tone="dark"] {
	--h-fg: var(--platinum); --h-tone: var(--honey);
	--h-veil: linear-gradient(90deg, rgba(22, 16, 12, 0.84) 0%, rgba(22, 16, 12, 0.66) 36%, rgba(22, 16, 12, 0.32) 50%, rgba(22, 16, 12, 0) 64%);
}
.hero__banner, .hero__slide { --fg: var(--h-fg); --tone: var(--h-tone); --focus: var(--h-tone); }
.hero__slides { display: grid; height: 100%; }

/* The photo layer is the backdrop panel (--wall, from the slide data) with the photo in its right
   64%, faded in from the left. A new layer fades in over the one leaving, which holds still
   underneath until it has gone. */
.hero__slide { grid-area: 1 / 1; position: relative; visibility: hidden; }
.hero__slide.is-active, .hero__slide.is-leaving { visibility: visible; }
.hero__slide.is-active { z-index: 2; }
.hero__slide.is-leaving { z-index: 1; }
.hero__slide.is-leaving .hero__copy { visibility: hidden; }
.hero__photo { position: absolute; inset: 0; display: block; opacity: 0; background: var(--wall, var(--chestnut)); }
.hero__photo img {
	position: absolute; top: 0; right: 0; width: 64%; height: 100%;
	object-fit: cover; object-position: var(--pos, 75% 30%);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%);
	scale: 1.05;
}
.hero__photo::after { content: ""; position: absolute; inset: 0; background: var(--h-veil); }
.is-active .hero__photo { opacity: 1; transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1); }
.is-active .hero__photo img { scale: 1; transition: scale 2.4s var(--ease); }
.is-leaving .hero__photo { opacity: 1; }
.is-leaving .hero__photo img { scale: 1; }

.hero__copy {
	position: relative; z-index: 1; height: 100%;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding-top: calc(var(--head-h) + 8px); padding-bottom: calc(var(--sweep) + 92px); /* clear of the controls above the sweep */
}
.hero__heading { display: grid; gap: clamp(14px, 2.6svh, 24px); max-width: min(48rem, 54%); font-weight: inherit; }
.hero__title {
	font: 500 clamp(3.2rem, min(7.2vw, 11.5svh), 7.25rem)/0.88 var(--display);
	letter-spacing: -0.035em; text-transform: uppercase; color: var(--h-fg);
}
.hero__line { display: block; }
.hero__tone { color: var(--h-tone); }
.hero__tagline { max-width: 30ch; font: italic 400 clamp(1.15rem, 1.7vw, 1.55rem)/1.3 var(--display); color: var(--h-tone); text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(20px, 4.4svh, 44px); }

/* The week's hours read down the right edge. */
.hero__hours {
	position: absolute; z-index: 4; right: clamp(14px, 2vw, 32px);
	top: calc(var(--head-h) + 24px); bottom: 32px; /* clear of the masthead; the sweep runs out at the right edge */
	writing-mode: vertical-rl; text-align: center;
	font: 500 0.75rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap;
	color: var(--espresso); /* it stands on the light backdrop at each photo's right */
}

/* Controls: a line per slide that fills while it shows (main.js moves on when it is full),
   pause, and the two round arrows. They sit under the words, on plain backdrop, clear of the photo. */
.hero__controls {
	position: absolute; z-index: 4;
	left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); bottom: calc(var(--sweep) + 20px);
	display: flex; align-items: center; gap: 10px;
}
.hero__controls[hidden] { display: none; }
.hero__tabs {
	display: flex; height: 48px; padding-inline: 8px; margin-right: 4px; border-radius: var(--pill);
	background: rgba(245, 239, 230, 0.94); border: 1px solid rgba(22, 16, 12, 0.1);
	box-shadow: 0 12px 24px -16px rgba(22, 16, 12, 0.7);
}
.hero__tab { width: 40px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--espresso); }
.hero__tab span { position: relative; width: 28px; height: 2px; border-radius: 2px; background: rgba(22, 16, 12, 0.2); overflow: hidden; }
.hero__tab span::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; scale: 0 1; }
.hero__tab:hover span { background: currentColor; }
.hero__tab[aria-current="true"] span::after { scale: 1 1; }
.hero__banner.is-playing .hero__tab[aria-current="true"] span::after { animation: hero-progress var(--slide-time, 7s) linear both; }
.hero__banner.is-held .hero__tab span::after { animation-play-state: paused; }
@keyframes hero-progress { from { scale: 0 1; } to { scale: 1 1; } }
.hero__btn {
	width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
	border: 1px solid rgba(22, 16, 12, 0.1); border-radius: 50%;
	background: rgba(245, 239, 230, 0.94); color: var(--espresso);
	box-shadow: 0 12px 24px -16px rgba(22, 16, 12, 0.7);
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero__btn:hover { background: var(--copper); color: var(--platinum); transform: translateY(-1px); }
.hero__btn .icon { width: 20px; height: 20px; }
.hero__btn[hidden] { display: none; }
.hero__play-icon, .hero__banner.is-stopped .hero__pause-icon { display: none; }
.hero__banner.is-stopped .hero__play-icon { display: block; }

/* Short laptop screens: a smaller title leaves more room under the masthead than under the headline. */
@media (min-width: 901px) and (max-height: 800px) {
	.hero__title { font-size: clamp(3.2rem, min(7.2vw, 10svh), 7.25rem); }
}

.hero__sweep { position: absolute; left: 0; bottom: -1px; z-index: 3; width: 100%; height: var(--sweep); fill: var(--champagne); pointer-events: none; }


/* Fade Cascade: main.js wraps every heading word in a .cw span and springs it in. Until the script
   has split the headings they wait hidden; a timer in the page head shows them if it never runs. */
.cascade:not(.cascade-ready) :is(h1, h2, h3, h4, h5, h6) { opacity: 0; }

/* The offer seal: its ring of words turns slowly around the saving. */
.seal {
	position: relative; display: grid; place-items: center;
	width: 144px; aspect-ratio: 1; border-radius: 50%;
	background: var(--platinum); color: var(--copper); text-decoration: none;
	box-shadow: 0 20px 40px -20px rgba(22, 16, 12, 0.6), 0 0 0 1px rgba(22, 16, 12, 0.08);
	transition: transform 0.5s var(--ease);
}
.seal:hover { color: var(--copper); transform: scale(1.04); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-turn 32s linear infinite; }
.seal__ring text { font: 500 15px var(--sans); letter-spacing: 0; fill: currentColor; }
.seal:hover .seal__ring { animation-play-state: paused; }
.seal__core { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1; }
.seal__value { font: 500 2.5rem/0.85 var(--display); letter-spacing: -0.04em; color: var(--espresso); }
.seal__unit { font: italic 400 1.05rem/1 var(--display); color: var(--copper); margin-top: 4px; }
.seal--large { width: clamp(230px, 24vw, 310px); }
.seal--large .seal__ring text { font-size: 13px; }
.seal--large .seal__value { font-size: clamp(4.25rem, 7.4vw, 6rem); }
.seal--large .seal__unit { font-size: 1.6rem; }
@keyframes seal-turn { to { transform: rotate(1turn); } }

/* Services: the four discipline swatches ----------------------------------- */
.hero + .services { padding-top: clamp(24px, 3vw, 48px); } /* the banner's champagne sweep already opens this band */
.services__head { display: grid; justify-items: center; text-align: center; gap: 22px; margin-bottom: clamp(32px, 4vw, 56px); }
.services__head .lead { margin-inline: auto; }
.swatches { --gap: clamp(16px, 2vw, 28px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.swatch__link { display: grid; gap: 14px; color: var(--espresso); text-decoration: none; }
.swatch__link:hover { color: var(--espresso); }
.swatch__arch { position: relative; display: block; aspect-ratio: 3 / 4.3; border-radius: var(--arch); overflow: hidden; background: var(--chestnut); isolation: isolate; }
.swatch__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.swatch__arch::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(22, 16, 12, 0.74) 0%, rgba(22, 16, 12, 0.3) 24%, rgba(22, 16, 12, 0) 44%);
}
.swatch__name {
	position: absolute; left: 0; right: 0; bottom: clamp(18px, 2vw, 26px); z-index: 1;
	text-align: center; font: 500 clamp(1.6rem, 2.4vw, 2.25rem)/1 var(--display); letter-spacing: -0.01em; color: var(--platinum);
}
.swatch__badge {
	position: absolute; top: 17%; left: 50%; translate: -50% 0; z-index: 1;
	padding: 7px 12px; border-radius: var(--pill); background: var(--copper); color: var(--platinum);
	font: 500 0.6875rem/1.2 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap;
	box-shadow: 0 10px 20px -12px rgba(22, 16, 12, 0.7);
}
.swatch__line { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.5; text-align: center; padding-inline: 6px; }
.swatch__from {
	display: inline-flex; align-items: center; justify-self: center; gap: 8px;
	font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper);
	font-variant-numeric: lining-nums tabular-nums;
}
.swatch__from .icon { width: 16px; height: 16px; transition: transform 0.4s var(--ease); }
.swatch__link:hover .swatch__from .icon { transform: translateX(4px); }
.services__foot { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }

/* Hover: the photo leans in, a fine platinum arch draws inside the frame, the name lifts, and the
   other swatches step back. */
.swatch__arch::before {
	content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
	border: 1px solid rgba(245, 239, 230, 0.7); border-radius: var(--arch);
	opacity: 0; scale: 0.97; transition: opacity 0.5s var(--ease), scale 0.7s var(--ease);
}
.swatch, .swatch__name, .swatch__arch::after { transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), translate 0.6s var(--ease); }
.swatch__link:is(:hover, :focus-visible) img { transform: scale(1.07); }
.swatch__link:is(:hover, :focus-visible) .swatch__arch::before { opacity: 1; scale: 1; }
.swatch__link:is(:hover, :focus-visible) .swatch__name { translate: 0 -8px; }
@media (hover: hover) {
	.swatches:has(.swatch__link:hover) .swatch:not(:has(.swatch__link:hover)) { opacity: 0.62; filter: saturate(0.6); }
}

/* Entrance: as each swatch comes into view (main.js adds .is-open, and --d to stagger the ones that
   arrive together) its photo rises into the arch like a dome and settles from a slow zoom, then its
   name and line slide up. */
@media (prefers-reduced-motion: no-preference) {
	.js .swatches[data-reveal] .swatch__arch {
		clip-path: inset(100% 0 0 0 round 999px 999px 0 0);
		transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.15, 1) var(--d, 0s);
	}
	.js .swatches[data-reveal] .swatch__arch img { scale: 1.28; transition: scale 1.8s var(--ease) var(--d, 0s), transform 1.1s var(--ease); }
	.js .swatches[data-reveal] :is(.swatch__name, .swatch__badge, .swatch__line, .swatch__from) {
		opacity: 0; translate: 0 22px;
		transition: opacity 0.8s var(--ease) calc(var(--d, 0s) + 0.55s), translate 1s var(--ease) calc(var(--d, 0s) + 0.55s);
	}
	.js .swatches[data-reveal] .swatch__badge { translate: -50% 22px; }
	.js .swatches[data-reveal] :is(.swatch__line, .swatch__from) { transition-delay: calc(var(--d, 0s) + 0.75s); }
	.js .swatches[data-reveal] .swatch.is-open .swatch__arch { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
	.js .swatches[data-reveal] .swatch.is-open .swatch__arch img { scale: 1; }
	.js .swatches[data-reveal] .swatch.is-open :is(.swatch__name, .swatch__badge, .swatch__line, .swatch__from) { opacity: 1; translate: 0 0; }
	.js .swatches[data-reveal] .swatch.is-open .swatch__badge { translate: -50% 0; }
	/* Once in, hover moves quickly again. */
	.js .swatches[data-reveal] .swatch.is-done .swatch__name { transition: translate 0.6s var(--ease); }
	.js .swatches[data-reveal] .swatch.is-done .swatch__link:is(:hover, :focus-visible) .swatch__name { translate: 0 -8px; }
}

/* The team: one honey band between the services and About. Heading left, a short note right,
   then the three portraits as arches with their names under them, and the Book pill. */
.team__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.team__head .lead { max-width: 44ch; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.2vw, 48px); align-items: start; }
.member { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; }
.member__frame { margin-bottom: 14px; }
.member__arch { aspect-ratio: 4 / 5; background: var(--chestnut); }
.member__name { font: 500 clamp(1.5rem, 2.1vw, 1.875rem)/1.1 var(--display); letter-spacing: -0.012em; }
.member__role { font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.team__foot { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }

/* The values: four shade swatches under the portraits, lightest to darkest on the honey ground,
   each an arch with an icon well, its name and one line. A soft light follows the pointer across
   them (main.js sets --mx and --my). */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px); margin-top: clamp(36px, 4.4vw, 64px); }
.value { position: relative; display: grid; }
.value__card {
	--top: clamp(30px, 3vw, 44px); /* the icon well's centre sits at --top + half of --icon */
	--icon: 58px;
	--sheen: rgba(245, 239, 230, 0.34);
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; justify-items: center; align-content: start; gap: 12px;
	padding: var(--top) clamp(16px, 1.8vw, 28px) clamp(28px, 2.8vw, 40px);
	border-radius: var(--arch); text-align: center;
}
.value__card:is(.shade--platinum, .shade--champagne) { --sheen: rgba(216, 188, 151, 0.42); }
.value__card.shade--chestnut { --sheen: rgba(216, 188, 151, 0.18); }
.value__card::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), var(--sheen), transparent 72%);
	opacity: 0; transition: opacity 0.6s var(--ease);
}
@media (hover: hover) { .value__card:hover::after { opacity: 1; } }
.value__icon { width: var(--icon); height: var(--icon); display: grid; place-items: center; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--tone); }
.value__icon .icon { width: calc(var(--icon) * 0.45); height: calc(var(--icon) * 0.45); }
.value__title { font: 500 clamp(1.45rem, 2vw, 1.9rem)/1.05 var(--display); letter-spacing: -0.012em; text-wrap: balance; }
.value__text { max-width: 28ch; color: var(--fg-2); font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 1000px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.value__card { --top: 22px; --icon: 46px; padding-inline: 10px; padding-bottom: 22px; gap: 8px; }
	.value__icon { margin-bottom: 4px; }
	.value__title { font-size: 1.3rem; }
	.value__text { font-size: 0.8125rem; line-height: 1.5; }
}
@media (hover: hover) {
	.member__arch img { transition: transform 1.1s var(--ease); }
	.member:hover .member__arch img { transform: scale(1.04); }
}

/* Entrances (main.js adds .is-open as each item comes into view, and --d to stagger the ones that
   arrive together). The team comes into focus: each portrait clears from a soft blur and muted
   colour, the lead first, and the lead's outline arch slides into place. Each value starts as its
   hairline outline and fills with its shade from the icon outward, like a drop of dye spreading
   through paper (a feathered mask whose radius, --spread, transitions), while the icon draws itself
   in; its name then plays the Fade Cascade. Without @property support the fill simply appears. */
@property --spread { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (prefers-reduced-motion: no-preference) {
	.js .team__grid[data-reveal] .member__arch img {
		filter: blur(14px) saturate(0.2);
		transition: filter 1.6s var(--ease) var(--d, 0s), transform 1.1s var(--ease);
	}
	.js .team__grid[data-reveal] .member.is-open .member__arch img { filter: blur(0) saturate(1); }
	.js .team__grid[data-reveal] .member.is-done .member__arch img { filter: none; }
	.js .team__grid[data-reveal] .arch-frame::before {
		opacity: 0; translate: 14px 14px;
		transition: opacity 0.9s var(--ease) calc(var(--d, 0s) + 0.5s), translate 1.3s var(--ease) calc(var(--d, 0s) + 0.5s);
	}
	.js .team__grid[data-reveal] .member.is-open .arch-frame::before { opacity: 1; translate: 0 0; }

	.js .values[data-reveal] .value::before {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		border: 1px solid var(--line-2); border-radius: var(--arch);
		transition: opacity 0.6s var(--ease) calc(var(--d, 0s) + 0.9s);
	}
	.js .values[data-reveal] .value__card {
		--spread: 0px;
		-webkit-mask-image: radial-gradient(circle at 50% calc(var(--top) + var(--icon) / 2), #000 calc(var(--spread) - 56px), transparent var(--spread));
		mask-image: radial-gradient(circle at 50% calc(var(--top) + var(--icon) / 2), #000 calc(var(--spread) - 56px), transparent var(--spread));
		transition: --spread 1.7s cubic-bezier(0.3, 1, 0.3, 1) var(--d, 0s);
	}
	.js .values[data-reveal] .value__icon :is(path, circle) {
		stroke-dasharray: 1 2; stroke-dashoffset: 1.01;
		transition: stroke-dashoffset 1.3s var(--ease) calc(var(--d, 0s) + 0.25s);
	}
	.js .values[data-reveal] .value.is-open::before { opacity: 0; }
	.js .values[data-reveal] .value.is-open .value__card { --spread: 640px; }
	.js .values[data-reveal] .value.is-done .value__card { -webkit-mask-image: none; mask-image: none; }
	.js .values[data-reveal] .value.is-open .value__icon :is(path, circle) { stroke-dashoffset: 0; }
}

/* About: the caramel field, one short statement set in the middle -------------- */
.about { position: relative; overflow: clip; padding-block: clamp(52px, 5.6vw, 84px); }
.about__intro { display: grid; justify-items: center; gap: clamp(24px, 3vw, 36px); text-align: center; }
.about__copy { display: grid; justify-items: center; gap: clamp(24px, 3vw, 34px); max-width: 58ch; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; }
/* The week's hours on an espresso edge strip, read bottom to top (wide screens only). */
.about__strip {
	display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 52px;
	background: var(--espresso); color: var(--honey);
	place-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
	font: 500 0.75rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap;
}
@media (min-width: 1440px) { .about__strip { display: grid; } }

/* Step inside: the chestnut photo strip ------------------------------------
   main.js makes the photos glide past on their own; without it (or with reduced
   motion) the row is a plain swipeable strip. No scrollbar either way. */
.glimpse { padding-bottom: calc(var(--section) - 32px); } /* the track adds 32px below */
.glimpse__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.glimpse__track {
	--edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); /* the page content's left edge */
	overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
	padding: 24px var(--edge) 32px;
	scroll-padding-inline: var(--edge);
	scrollbar-width: none;
}
.glimpse__track::-webkit-scrollbar { display: none; }
.glimpse__track:focus-visible { outline-offset: -4px; }
.glimpse__rail { display: flex; width: max-content; }
/* A margin, not a flex gap, so every photo takes the same step and the loop has no seam */
.glimpse__item { flex: none; width: clamp(210px, 22vw, 300px); aspect-ratio: 3 / 4.2; margin-right: clamp(16px, 2vw, 28px); scroll-snap-align: start; background: var(--chestnut); }
.glimpse__track.is-gliding {
	--fade: clamp(16px, 5vw, 72px);
	overflow: hidden; padding-inline: 0; scroll-snap-type: none;
	cursor: grab; touch-action: pan-y; user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.glimpse__track.is-dragging { cursor: grabbing; }
.is-gliding .glimpse__rail { will-change: transform; }
.is-gliding .glimpse__item img { pointer-events: none; } /* no ghost image when dragging */

/* Opening hours ------------------------------------------------------------ */
.hours { display: grid; max-width: 420px; }
.hours__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums lining-nums; }
.hours dt { display: flex; align-items: center; gap: 10px; }
.hours dd { color: var(--fg-2); }
.hours__row.is-today dt, .hours__row.is-today dd { color: var(--fg); font-weight: 500; }
.hours__today {
	font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
	padding: 4px 8px; border-radius: var(--pill); background: var(--pill-bg); color: var(--pill-fg);
}

/* Price lists with dotted leaders */
.pricelist { border-top: 1px solid var(--line); }
.pricelist li { border-bottom: 1px solid var(--line); }
.pricelist__row { display: flex; align-items: baseline; gap: 14px; padding-block: 18px; }
.pricelist__name { font: 500 1.3rem/1.25 var(--display); }
.pricelist__dots { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--line-2); transform: translateY(-5px); }
.pricelist__price { font: 500 1.1875rem/1 var(--sans); font-variant-numeric: tabular-nums lining-nums; }

/* Inner page hero ---------------------------------------------------------- */
.page-hero { padding-block: clamp(24px, 3.4vw, 48px) clamp(40px, 5vw, 72px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.page-hero__lead { margin-top: clamp(18px, 2vw, 28px); color: var(--fg-2); max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.page-hero__media { width: clamp(220px, 25vw, 340px); margin: 14px 0 0 14px; }
.page-hero__media--seal { width: auto; margin: 0; }
.page-hero__arch { aspect-ratio: 3 / 4; }

/* Chips -------------------------------------------------------------------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
	flex: none; min-height: 44px; padding: 0 20px; border-radius: var(--pill);
	border: 1px solid var(--line-2); background: transparent; color: var(--fg);
	font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--platinum); }

/* Services & prices -------------------------------------------------------- */
.menu__bar {
	position: sticky; top: var(--head-h); z-index: 30;
	background: rgba(235, 224, 207, 0.86);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .menu__bar { top: calc(var(--head-h) + var(--wp-admin--admin-bar--height, 32px)); }
.menu__bar-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.search { position: relative; flex: 0 1 380px; display: flex; align-items: center; }
.search .icon { position: absolute; left: 18px; color: var(--copper); pointer-events: none; }
.search input {
	width: 100%; min-height: 48px; padding: 0 18px 0 48px;
	border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--platinum);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.search input::placeholder { color: rgba(22, 16, 12, 0.6); }
.search input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(138, 78, 36, 0.18); }

.menu__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); padding-block: clamp(48px, 6vw, 80px) var(--section); }
.menu__rail {
	position: sticky; top: calc(var(--head-h) + 108px); align-self: start;
	max-height: calc(100vh - var(--head-h) - 130px); overflow-y: auto; scrollbar-width: thin; padding-right: 8px;
}
.menu__rail-group { font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--copper); margin: 22px 0 10px; }
.menu__rail-group:first-child { margin-top: 0; }
.menu__rail ul { display: grid; border-left: 1px solid var(--line-2); }
.menu__rail ul a {
	position: relative; display: block; padding: 5px 0 5px 16px;
	color: var(--fg-2); text-decoration: none; font-size: 0.9375rem;
	transition: color 0.3s var(--ease);
}
.menu__rail ul a:hover { color: var(--fg); }
.menu__rail ul a.is-active { color: var(--fg); font-weight: 500; }
.menu__rail ul a.is-active::before {
	content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%;
	background: var(--copper); translate: 0 -50%;
}
.menu__rail-book { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; font-size: 0.875rem; }
.menu__rail-book a:not(.btn) { color: var(--fg-2); }

.menu__group + .menu__group { margin-top: clamp(48px, 6vw, 84px); }
.menu__group-title {
	font: 500 clamp(2.6rem, 5vw, 4.25rem)/1 var(--display); letter-spacing: -0.02em; color: var(--copper);
	padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--espresso);
}
.menu-cat { padding-top: 44px; }
.menu-cat:target .menu-cat__title { color: var(--copper); }
.menu-cat[hidden], .menu__group[hidden] { display: none; }
.menu-cat__title { font: 500 clamp(1.6rem, 2.6vw, 2.125rem)/1.1 var(--display); letter-spacing: -0.01em; transition: color 0.6s var(--ease); }
.menu-cat__intro { color: var(--fg-2); margin-top: 8px; max-width: 60ch; }
.menu-cat__foot { color: var(--fg-2); font-size: 0.9375rem; margin-top: 14px; font-style: italic; }

.menu-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-variant-numeric: tabular-nums lining-nums; }
.menu-table thead th {
	font: 500 0.6875rem/1.2 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-2);
	text-align: right; padding: 0 0 10px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.menu-table thead th:first-child { text-align: left; padding-left: 0; }
.menu-table tbody th { text-align: left; font-weight: 400; padding: 14px 16px 14px 0; line-height: 1.4; }
.menu-table tbody th small { display: block; color: var(--fg-2); font-size: 0.8438rem; margin-top: 2px; }
.menu-table td { text-align: right; padding: 14px 0 14px 16px; white-space: nowrap; font-weight: 500; width: 7.5rem; }
.menu-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color 0.25s var(--ease); }
.menu-table tbody tr:hover { background: rgba(245, 239, 230, 0.6); }
.menu-table tr[hidden] { display: none; }
.price-none { color: var(--fg-2); font-weight: 400; }
.menu__empty { padding: 48px 0; display: grid; gap: 14px; justify-items: start; }
.menu__empty-title { font: 500 1.75rem/1.2 var(--display); }
.menu__empty[hidden] { display: none; }
.menu__note { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 0.9375rem; max-width: 64ch; }

/* Offers ------------------------------------------------------------------- */
.feature__offer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.feature__frame { width: min(100%, 400px); margin: 14px 0 0 14px; }
.feature__arch { aspect-ratio: 3 / 4; }
.feature__value { display: flex; align-items: baseline; gap: 14px; color: var(--copper); }
.feature__num { font: 500 clamp(5rem, 11vw, 9.5rem)/0.8 var(--display); letter-spacing: -0.045em; }
.feature__unit { font: italic 400 clamp(1.6rem, 2.6vw, 2.25rem)/1 var(--display); }
.feature__title { margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1; }
.feature__body { margin-top: 20px; color: var(--fg-2); max-width: 50ch; }
.feature__terms { margin-top: 12px; color: var(--fg-2); font-size: 0.9375rem; font-style: italic; }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 32px; }

.areas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); align-items: start; margin-top: var(--section); }
.areas__head { display: grid; gap: 20px; }

.editor-note {
	margin-top: 24px; padding: 14px 18px; border: 1px dashed var(--espresso); border-radius: 14px;
	font-size: 0.9375rem; color: var(--espresso); max-width: 70ch; background: var(--platinum);
}
.editor-note code { font-size: 0.875em; }
.offer-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--espresso); }
.offer { position: relative; padding: 36px 32px 36px 0; display: grid; gap: 12px; align-content: start; }
.offer + .offer { padding-left: 32px; border-left: 1px solid var(--line); }
.offer__value { font: 500 2.5rem/1 var(--display); color: var(--tone); letter-spacing: -0.02em; }
.offer__title { font: 500 1.5rem/1.15 var(--display); }
.offer .offer__terms { font-size: 0.875rem; font-style: italic; }
.offer__tag {
	justify-self: start; font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
	padding: 5px 10px; border-radius: var(--pill); border: 1px dashed var(--espresso);
}

.claim__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 112px); }
.claim__steps { counter-reset: step; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.claim__steps li {
	counter-increment: step; display: grid; grid-template-columns: 64px 1fr; gap: 6px;
	padding-block: 24px; border-bottom: 1px solid var(--line); color: var(--fg-2);
}
.claim__steps li::before { content: counter(step); font: italic 400 2.4rem/1 var(--display); color: var(--tone); grid-row: span 2; }
.claim__steps strong { display: block; color: var(--fg); font-weight: 500; font-size: 1.125rem; }
.claim__steps span { grid-column: 2; }

/* Gallery ------------------------------------------------------------------ */
.gallery__filters { margin-bottom: clamp(32px, 4vw, 48px); }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(16px, 2.6vw, 36px); align-items: end; }
.gallery__item[hidden] { display: none; }
.gallery__item--wide { grid-column: span 2; align-self: stretch; }
.gallery__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: var(--arch); cursor: zoom-in; }
.gallery__arch { aspect-ratio: 3 / 4; }
.gallery__item--wide .gallery__arch { aspect-ratio: auto; height: 100%; border-radius: 50% 50% 0 0 / 36% 36% 0 0; }
.gallery__arch img { transition: transform 1s var(--ease); }
.gallery__open:hover .gallery__arch img { transform: scale(1.04); }

.insta__inner { display: grid; justify-items: center; text-align: center; gap: 22px; }
.insta__inner .title { text-align: center; }
.insta__inner .lead { margin-inline: auto; }
.btn--handle { margin-top: 8px; text-transform: none; letter-spacing: 0.04em; font-size: 0.9375rem; }

.lightbox {
	width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(22, 16, 12, 0.96); color: var(--platinum);
	--focus: var(--honey);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; animation: fade 0.4s var(--ease); }
.lightbox__figure { display: grid; justify-items: center; gap: 16px; padding: 64px 72px; max-width: 100%; }
.lightbox__figure img { max-height: calc(100dvh - 170px); width: auto; max-width: 100%; border-radius: 18px; }
.lightbox__figure figcaption { color: rgba(245, 239, 230, 0.74); font-size: 0.9375rem; text-align: center; max-width: 60ch; }
.lightbox__btn {
	position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
	border-radius: 50%; border: 1px solid rgba(245, 239, 230, 0.2); background: rgba(22, 16, 12, 0.6); color: var(--platinum);
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lightbox__btn:hover { border-color: var(--honey); color: var(--honey); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 16px; top: 50%; translate: 0 -50%; }
@keyframes fade { from { opacity: 0; } }

/* Contact ------------------------------------------------------------------ */
.contact__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.ways { border-top: 1px solid var(--line); }
.ways li { border-bottom: 1px solid var(--line); }
.way { display: flex; align-items: center; gap: 18px; padding-block: 18px; color: var(--fg); text-decoration: none; }
.way:hover { color: var(--fg); }
.way .icon {
	width: 46px; height: 46px; padding: 12px; border-radius: 50%;
	background: var(--platinum); border: 1px solid var(--line); color: var(--copper);
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.way span { display: grid; color: var(--fg-2); font-size: 0.9375rem; }
.way strong { font: 500 1.0625rem/1.35 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--fg); overflow-wrap: anywhere; transition: color 0.3s var(--ease); }
.way:hover .icon { background: var(--copper); border-color: var(--copper); color: var(--platinum); }
.way:hover strong { color: var(--copper); }
.contact__hours { margin-top: 48px; }
.contact__sub { font: 500 1.75rem/1.1 var(--display); margin-bottom: 14px; }

.contact__form-wrap { padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; background: var(--platinum); border: 1px solid var(--line); }
.contact__form-lead { color: var(--fg-2); margin-top: 14px; }
.form { display: grid; gap: 20px; margin-top: 30px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 8px; }
.field__label { font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg-2); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 52px; padding: 12px 18px;
	border: 1px solid rgba(22, 16, 12, 0.26); border-radius: 14px; background: var(--champagne);
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 150px; }
.field select {
	appearance: none; padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238a4e24' stroke-width='1.5'%3E%3Cpath d='m2 5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 18px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(22, 16, 12, 0.5); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--copper); background-color: var(--platinum); box-shadow: 0 0 0 3px rgba(138, 78, 36, 0.18); }
.field__error { display: none; color: var(--error); font-size: 0.875rem; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field input:user-invalid ~ .field__error, .field textarea:user-invalid ~ .field__error { display: block; }
.form .btn { justify-self: start; min-width: 210px; }
.form .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form__small { font-size: 0.8438rem; color: var(--fg-2); }
.notice { display: flex; gap: 12px; align-items: start; margin-top: 24px; padding: 16px 18px; border-radius: 14px; font-size: 0.9688rem; }
.notice .icon { margin-top: 3px; }
.notice--ok { background: #e7f0e8; color: var(--ok); }
.notice--ok a { color: var(--ok); }
.notice--error { background: #f6e4e1; color: var(--error); }
.contact-map { padding: clamp(10px, 1.4vw, 18px); }
.contact-map iframe { width: 100%; height: clamp(320px, 40vw, 480px); border: 0; border-radius: 22px; filter: sepia(0.3) saturate(0.85); }

/* Prose pages -------------------------------------------------------------- */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.2em; }
.prose .title { margin-bottom: 0.4em; }
.prose .btn { margin: 0 8px 8px 0; }

/* Footer: the darkest shade ------------------------------------------------ */
.footer { padding-top: clamp(44px, 5vw, 72px); }
.footer__cta {
	display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 28px 48px;
	padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line);
}
.footer__cta-title { font-size: clamp(2.4rem, 4.6vw, 4.25rem); }
.footer__cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1.2fr 1.2fr; gap: clamp(32px, 4vw, 56px); padding-block: clamp(40px, 5vw, 64px); }
.footer__brand p { color: var(--fg-2); margin-top: 16px; max-width: 30ch; font-size: 0.9375rem; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
	width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
	border: 1px solid var(--line-2); color: var(--fg);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.footer__social a:hover { background: var(--honey); border-color: var(--honey); color: var(--espresso); }
.footer__social .icon { width: 18px; height: 18px; }
.footer__head { font: 500 0.75rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--honey); margin-bottom: 18px; }
.footer__links, .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; }
.footer__links a, .footer__contact a { color: var(--fg); text-decoration: none; transition: color 0.3s var(--ease); }
.footer__links a { display: inline-block; padding-block: 5px; }
.footer__links a:hover, .footer__contact a:hover { color: var(--honey); }
.footer__contact { gap: 14px; }
.footer__contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; line-height: 1.45; }
.footer__contact .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--honey); }
.footer__contact a { overflow-wrap: anywhere; }
.footer__contact small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--fg-2); }
.footer .hours { font-size: 0.9375rem; max-width: none; }
.footer .hours__row { padding-block: 7px; }
.footer .hours__row:last-child { border-bottom: 0; }
.footer__base {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
	padding-block: 20px 28px; border-top: 1px solid var(--line); font-size: 0.8438rem; color: var(--fg-2);
}
.footer__base-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__base a { color: var(--fg-2); text-decoration: none; }
.footer__base a:hover { color: var(--fg); }
.footer__top { display: inline-flex; align-items: center; gap: 8px; }
.footer__top .icon { width: 16px; rotate: -90deg; }

/* Mobile dock -------------------------------------------------------------- */
.dock { display: none; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.menu__layout { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 900px) {
	:root { --head-h: 74px; } /* a 54px pill plus 10px above and below */
	.masthead { padding: 10px var(--gutter); }
	/* A backdrop filter would make the pill the drawer's containing block, so phones get solid fills */
	.masthead.is-stuck { background: rgba(245, 239, 230, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.masthead__bar { min-height: 52px; padding: 4px 4px 4px 20px; background: var(--platinum); -webkit-backdrop-filter: none; backdrop-filter: none; }
	.masthead__book { display: none; }
	.menu-toggle { display: grid; }
	.masthead__actions { margin-left: auto; }
	.logo__name { font-size: 1.25rem; }

	/* The drawer opens behind the pill, which stays on top with the close button */
	.nav {
		position: fixed; inset: 0; z-index: -1;
		background: var(--espresso); color: var(--platinum);
		padding: calc(var(--head-h) + 20px) var(--gutter) calc(104px + env(safe-area-inset-bottom));
		display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
		visibility: hidden; opacity: 0;
		transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
		--focus: var(--honey);
	}
	.nav.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list li { border-bottom: 1px solid rgba(245, 239, 230, 0.14); }
	.nav__link { font: 500 2.25rem/1.1 var(--display); letter-spacing: -0.01em; text-transform: none; color: var(--platinum); padding-block: 16px; }
	.nav__link:hover, .nav__link[aria-current="page"] { color: var(--honey); }
	.nav__link::after { display: none; }
	.nav__drawer-extra { display: grid; gap: 16px; margin-top: auto; }
	.nav__contact { display: flex; align-items: center; gap: 10px; color: rgba(245, 239, 230, 0.74); text-decoration: none; }
	.nav__contact .icon { color: var(--honey); }
	.menu-open .menu-toggle__open { display: none; }
	.menu-open .menu-toggle__close { display: block; }
	.menu-open { overflow: hidden; }

	.hero__actions .btn { display: none; } /* the dock carries Book now here, as it does for the masthead */
	.hero__hours { display: none; }

	.swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.team__head, .claim__inner, .contact__inner, .areas, .feature__offer { grid-template-columns: 1fr; }
	.team__head { gap: 20px; }
	.team__grid { gap: 16px; }
	.team__foot { display: none; } /* the dock carries Call here */
	.feature__frame { width: min(100%, 340px); }
	.glimpse__head { flex-direction: column; align-items: start; }

	.page-hero__grid { grid-template-columns: 1fr; gap: 36px; }
	.page-hero__media { width: min(64vw, 300px); }
	.page-hero__media--seal { width: auto; }

	.menu__layout { grid-template-columns: 1fr; padding-top: 24px; }
	.menu__rail { display: none; }
	.menu__bar-inner { flex-direction: column; align-items: stretch; gap: 12px; padding-block: 12px; min-height: 0; }
	.search { flex: none; }
	.chips { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.chip { min-height: 40px; padding: 0 16px; }
	html { scroll-padding-top: calc(var(--head-h) + 136px); }

	.offer-list { grid-template-columns: 1fr; }
	.offer, .offer + .offer { padding: 28px 0; border-left: 0; }
	.offer + .offer { border-top: 1px solid var(--line); }

	.gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gallery__item--wide { grid-column: 1 / -1; }
	.gallery__item--wide .gallery__arch { aspect-ratio: 4 / 3; height: auto; }
	.lightbox__figure { padding: 72px 16px 96px; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 24px; translate: none; }
	.lightbox__prev { left: calc(50% - 64px); }
	.lightbox__next { right: calc(50% - 64px); }

	.footer__cta { flex-direction: column; align-items: stretch; }

	/* A floating pill dock: Call, Directions and Book now always in reach */
	.dock {
		position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 70;
		display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 4px; padding: 5px;
		border-radius: var(--pill); background: rgba(22, 16, 12, 0.92);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		box-shadow: 0 18px 36px -16px rgba(22, 16, 12, 0.7);
		--focus: var(--honey);
	}
	.dock__item {
		display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: var(--pill);
		color: var(--platinum); text-decoration: none; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
	}
	.dock__item:hover { color: var(--platinum); background: rgba(245, 239, 230, 0.08); }
	.dock__item .icon { color: var(--honey); width: 18px; height: 18px; }
	.dock__item--book, .dock__item--book:hover { background: var(--copper-fill); }
	.dock__item--book .icon { color: var(--platinum); }
	body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* Portrait phones and tablets: the photo sits at the top on its 4:5 phone crop (the <picture> in
   front-page.php switches on the same query), framed on the face below the masthead, and fades into
   a panel in the slide's shade; the words and controls sit on that panel, never over the face.
   Landscape phones keep the wide layout, with the photo at the right. */
@media (max-width: 900px) and (orientation: portrait), (max-aspect-ratio: 4/5) {
	.hero { --photo-h: clamp(340px, min(62svh, 118vw), 900px); }
	.hero__banner { --sweep: 40px; height: auto; }
	.hero__slides { height: auto; }
	.hero__slide[data-tone="light"] .hero__photo { background: var(--platinum); }
	.hero__slide[data-tone="dark"] .hero__photo { background: var(--chestnut); }
	.hero__photo::after { display: none; }
	.hero__photo img {
		width: 100%; height: var(--photo-h); object-position: 50% 0; /* the crop's own backdrop gives the headroom */
		-webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent);
	}
	.hero__copy { height: auto; justify-content: flex-start; padding-top: calc(var(--photo-h) - 28px); padding-bottom: calc(var(--sweep) + 84px); }
	.hero__heading { max-width: none; gap: 16px; }
	.hero__title { font-size: clamp(2.9rem, 14.4vw, 5.5rem); }
	.hero__actions { margin-top: 26px; }
	.hero__controls { left: var(--gutter); right: var(--gutter); bottom: calc(var(--sweep) + 14px); }
	.hero__tabs { margin-right: auto; }
	.hero__hours { display: none; }
}
/* Short phones (browser toolbars showing): a shorter photo keeps the price link clear of the dock. */
@media (max-width: 600px) and (max-height: 700px) { .hero { --photo-h: clamp(340px, min(57svh, 118vw), 900px); } }
/* Tablets: a taller photo, so the chin clears the fade on the wider crop. */
@media (min-width: 601px) and (orientation: portrait) { .hero { --photo-h: min(80svh, 100vw); } }
/* Phones held sideways: the banner fits the screen, with smaller words, and the controls ride above the dock. */
@media (orientation: landscape) and (max-height: 500px) {
	.hero__banner { --sweep: 32px; height: max(100svh, 360px); }
	.hero__copy { padding-top: calc(var(--head-h) + 4px); padding-bottom: 136px; }
	.hero__heading { gap: 8px; }
	.hero__title { font-size: 2.4rem; }
	.hero__tagline { font-size: 1rem; }
	.hero__actions { margin-top: 14px; }
	.hero__controls { bottom: 80px; }
	.hero__tabs, .hero__btn { height: 40px; }
	.hero__btn { width: 40px; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; }
	.hero__actions .btn, .about__actions .btn, .feature__actions .btn, .footer__cta-actions .btn { flex: 1 1 100%; }
	.services__head { text-align: left; justify-items: start; }
	.services__foot .btn { width: 100%; }
	.swatches { --gap: 12px; row-gap: 28px; }
	.swatch__name { font-size: 1.5rem; bottom: 14px; }
	.swatch__badge { top: 22%; font-size: 0.6875rem; padding: 6px 9px; letter-spacing: 0.06em; }
	.swatch__line { font-size: 0.875rem; padding-inline: 0; }
	.swatch__from { font-size: 0.75rem; letter-spacing: 0.1em; }
	/* The team: a row to swipe, the lead first, the next portrait peeking in from the edge */
	.team__track {
		margin-inline: calc(-1 * var(--gutter)); padding-block: 12px 4px; margin-block: -12px -4px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
		overscroll-behavior-x: contain; scrollbar-width: none;
	}
	.team__track::-webkit-scrollbar { display: none; }
	.team__track .team__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); gap: 14px; width: max-content; padding-inline: var(--gutter); } /* beats the ul[role=list] reset */
	.member { scroll-snap-align: start; }
	.member--lead { order: -1; }
	.arch-frame::before { inset: -9px 9px 9px -9px; }
	.page-hero__media:not(.page-hero__media--seal) { display: none; }
	.page-hero__media--seal .seal--large { width: 200px; }
	.page-hero__media--seal .seal__value { font-size: 3.5rem; }
	.form__row { grid-template-columns: 1fr; }
	.form .btn { width: 100%; }
	.contact__form-wrap { padding: 22px 18px; border-radius: 22px; }
	.footer__grid { grid-template-columns: 1fr; gap: 36px; }
	.footer__col--links { order: 1; }
	.footer__links { grid-template-columns: 1fr 1fr; column-gap: 16px; }
	.footer__base { flex-direction: column; align-items: flex-start; }
	.pricelist__name { font-size: 1.15rem; }

	/* Multi-price rows: name on top, labelled prices underneath */
	.menu-table--2 thead, .menu-table--3 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.menu-table--2 tbody tr, .menu-table--3 tbody tr { display: grid; padding-block: 14px; column-gap: 8px; }
	.menu-table--2 tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.menu-table--3 tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.menu-table td { width: 5.5rem; }
	.menu-table--2 tbody th, .menu-table--3 tbody th { grid-column: 1 / -1; padding: 0 0 8px; }
	.menu-table--2 td, .menu-table--3 td { width: auto; text-align: left; padding: 0; display: grid; gap: 1px; }
	.menu-table--2 td::before, .menu-table--3 td::before {
		content: attr(data-label); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); font-weight: 400;
	}
	.menu-table tbody tr[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.seal__ring { animation: none; }
	html { scroll-behavior: auto; }
}

/* Display optical size -----------------------------------------------------
   At its largest optical sizes Bodoni Moda's hairlines all but vanish on screen and letters
   fall apart ("WH AT"); big type holds at 36. This sits last because every `font` shorthand
   resets font-variation-settings. A licensed Skinova ignores the setting. */
.title, .hero__title, .menu__group-title, .feature__num, .seal__value, .offer__value, .value__title { font-variation-settings: "opsz" 36; }
/* The phone drawer's 36px links need a sturdier cut still: at 36 the r and v of "Services" part. */
@media (max-width: 900px) { .nav__link { font-variation-settings: "opsz" 24; letter-spacing: 0; } }