@charset "UTF-8";
/* ==========================================================================
   The Sunbed Studio
   Built to the approved Figma design (frame "Home", 1728 x 9960).

   Scaling model
   -------------
   Every measurement below is taken straight from the Figma file. The layout is
   reproduced exactly at a 1728px viewport and scales proportionally either side
   of that:
     - the content column is 1334px inside 197px gutters (= 199px origin), and
       both shrink on the same ratio, so column widths stay true to the design;
     - display type uses clamp() whose preferred vw value resolves to the exact
       Figma pixel size at 1728px, and caps there so it never overgrows;
     - body type has comfortable floors so it stays readable on laptops.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONT SWAP
   The Figma file uses two licensed display faces plus Satoshi. Until those
   files are supplied, the closest free equivalents are loaded from Google
   Fonts (see functions.php) and used through the stacks below.

   To switch to the real fonts: drop the web font files into assets/fonts/ as
     viagram.woff2, saint-bartogenia.woff2, satoshi.woff2
   and nothing else needs to change — the @font-face rules below already point
   at those paths and take priority over the substitutes automatically. If a
   file is absent the browser simply falls through to the next family.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Viagram";
	src: url("../fonts/viagram.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Saint Bartogenia";
	src: url("../fonts/saint-bartogenia.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/satoshi.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
	/* Palette — sampled from the Figma file */
	--cream: #f1ebdf;
	--ink: #2b1a0c;
	--brown: #795247;
	--brown-alt: #795244;
	--tan: #ac917c;
	--green: #385146;
	--dark: #543023;
	--white: #fff;

	/* Type stacks — licensed face first, free substitute second */
	--font-display: "Viagram", "Playfair Display", "Cormorant Garamond", Georgia, serif;
	--font-script: "Saint Bartogenia", "Great Vibes", "Snell Roundhand", cursive;
	--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-ui: "Satoshi", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-num: "Instrument Sans", var(--font-body);

	/* Layout — 199px origin, 1334px column, inside a 1728px frame */
	--gutter: clamp(20px, 11.516vw, 197px);
	/* Deliberately viewport-based rather than a percentage: a percentage inside
	   a custom property is re-resolved against whatever box uses it, which made
	   flex-basis on the carousel cards shrink against the track instead of the
	   content column. A vw length resolves identically everywhere. */
	--container: min(1334px, calc(100vw - (var(--gutter) * 2)));

	/* Script optical scale.
	   Great Vibes (the stand-in) renders noticeably larger on the body than
	   Saint Bartogenia does at the same point size, so the script sizes are
	   multiplied by this to match the drawn proportions. When the licensed
	   font is dropped into assets/fonts/, set this to 1 and the script words
	   return to their exact Figma sizes. */
	--script-scale: 0.82;

	/* Display sizes — vw value resolves to the Figma px at 1728px wide */
	--fs-hero: clamp(38px, 6.032vw, 104.242px);
	--fs-hero-script: clamp(54px, 8.148vw, 140.8px);
	--fs-display: clamp(30px, 3.718vw, 64.24px);
	--fs-script: clamp(52px, 7.636vw, 131.951px);
	--fs-script-lg: clamp(56px, 8.214vw, 141.95px);
	--fs-heading: clamp(28px, 2.894vw, 50px);
	--fs-lead: clamp(17px, 1.273vw, 22px);
	--fs-body: clamp(15px, 1.042vw, 18px);

	/* Motion — long, soft, no bounce */
	--ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 1.5s;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

body.ss-body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, p, figure, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	border: 0;
	background: none;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--tan);
	outline-offset: 3px;
}

.ss-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ss-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 22px;
	background: var(--cream);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
}
.ss-skip:focus {
	left: 12px;
	top: 12px;
}

.ss-hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

/* Shared container */
.ss-container,
.ss-boutique__inner,
.ss-reviews__inner,
.ss-social__inner,
.ss-milestones__inner,
.ss-footer__inner {
	width: var(--container);
	margin-inline: auto;
}

/* ==========================================================================
   3. Shared elements
   ========================================================================== */

/* Buttons — 319 x 55, 3px radius (Figma "Rectangle 2") */
.ss-btn {
	--btn-bg: var(--cream);
	--btn-fg: var(--tan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(240px, 18.46vw, 319px);
	min-height: clamp(48px, 3.183vw, 55px);
	padding: 0 24px;
	border-radius: 3px;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: clamp(12px, 0.81vw, 14px);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-align: center;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
	transition: transform 0.6s var(--ease-glide), background-color 0.6s var(--ease-soft),
		color 0.6s var(--ease-soft), box-shadow 0.6s var(--ease-soft);
}
.ss-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(43, 26, 12, 0.18), inset 0 -2px 2px rgba(0, 0, 0, 0.06);
}
.ss-btn:active {
	transform: translateY(0);
}

.ss-btn--cream {
	--btn-bg: var(--cream);
	--btn-fg: var(--tan);
}
.ss-btn--cream:hover {
	--btn-bg: #fff;
	--btn-fg: var(--dark);
}

.ss-btn--dark {
	--btn-bg: var(--dark);
	--btn-fg: var(--white);
}
.ss-btn--dark:hover {
	--btn-bg: #6b3f2e;
}

.ss-btn--block {
	width: 100%;
	min-width: 0;
}

/* Hairline rules — Figma "Line 21", 427px wide */
.ss-rule {
	display: block;
	width: min(427px, 100%);
	height: 1px;
	background: rgba(43, 26, 12, 0.25);
	transform-origin: left center;
}
.ss-rule--light {
	background: rgba(255, 255, 255, 0.45);
}

/* Script word — the calligraphic accent used across the page */
.ss-script {
	font-family: var(--font-script);
	font-size: calc(var(--fs-script) * var(--script-scale));
	font-weight: 400;
	line-height: 0.563;
	letter-spacing: -0.02em;
	color: var(--brown);
}
.ss-script--light {
	color: var(--white);
}

/* ==========================================================================
   4. Header
   ========================================================================== */
.ss-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	padding-block: clamp(14px, 2.14vw, 37px) clamp(10px, 1.2vw, 20px);
	transition: background-color 0.9s var(--ease-soft), backdrop-filter 0.9s var(--ease-soft),
		box-shadow 0.9s var(--ease-soft), padding 0.9s var(--ease-soft);
}
.ss-header.is-stuck {
	background: rgba(43, 26, 12, 0.72);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 1px 0 rgba(241, 235, 223, 0.12);
	padding-block: clamp(10px, 1.1vw, 16px);
}

.ss-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 34px);
	padding-inline: clamp(16px, 1.22vw, 21px) clamp(16px, 2.43vw, 42px);
}

/* Logo — 173px circle at 21,23 in the design */
.ss-header__logo {
	flex: none;
	width: clamp(64px, 10.01vw, 173px);
	transition: width 0.9s var(--ease-soft), opacity 0.6s var(--ease-soft);
}
.ss-header.is-stuck .ss-header__logo {
	width: clamp(54px, 5.2vw, 90px);
}
.ss-header__logo img {
	width: 100%;
	height: auto;
	/* The mark is a circular badge with text set around it, so a slow
	   continuous rotation reads as intentional rather than restless. */
	animation: ss-spin 28s linear infinite;
	transform-origin: 50% 50%;
	will-change: transform;
}

@keyframes ss-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.ss-nav {
	margin-left: auto;
}
.ss-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.66vw, 46px);
}
.ss-nav__link {
	position: relative;
	display: inline-block;
	color: var(--cream);
	font-size: clamp(11px, 0.868vw, 15px);
	font-weight: 600;
	letter-spacing: 0.1em;
	white-space: nowrap;
	transition: color 0.6s var(--ease-soft);
}
/* Figma "Line 7" — the 60px underline under the active item */
.ss-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.7s var(--ease-glide);
}
.ss-nav__link:hover::after,
.ss-nav__link.is-active::after {
	transform: scaleX(1);
}

/* Two-line contact block: caption above the number, with a ringed icon */
.ss-header__phone {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.64vw, 11px);
	color: var(--cream);
	white-space: nowrap;
}
.ss-header__phone-icon {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(30px, 2.14vw, 37px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(241, 235, 223, 0.32);
	transition: background-color 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft),
		transform 0.7s var(--ease-glide);
}
/* A ring breathing outward from the circle's edge — slow enough to read as a
   soft invitation rather than a notification badge. */
.ss-header__phone-icon::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1px solid rgba(241, 235, 223, 0.55);
	pointer-events: none;
	animation: ss-ring 3.2s var(--ease-soft) infinite;
}
@keyframes ss-ring {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	70% {
		transform: scale(1.45);
		opacity: 0;
	}
	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}
.ss-header__phone-icon svg {
	width: 46%;
	height: auto;
	display: block;
}
.ss-header__phone-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ss-header__phone-label {
	font-size: clamp(9px, 0.578vw, 10px);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	opacity: 0.68;
}
.ss-header__phone-number {
	font-family: var(--font-num);
	font-size: clamp(13px, 0.926vw, 16px);
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.1;
}
.ss-header__phone:hover .ss-header__phone-icon {
	background: rgba(241, 235, 223, 0.14);
	border-color: rgba(241, 235, 223, 0.6);
	transform: scale(1.06);
}
.ss-header__phone:hover .ss-header__phone-label {
	opacity: 0.9;
}

/* Header CTA — sized to the shorter "Enquire Now" label */
.ss-header__cta {
	flex: none;
	min-width: clamp(150px, 12.15vw, 210px);
}

.ss-burger {
	display: none;
	flex: none;
	width: 46px;
	height: 46px;
	padding: 11px;
	margin-left: auto;
}
.ss-burger span {
	display: block;
	height: 1.5px;
	background: var(--cream);
	border-radius: 2px;
	transition: transform 0.6s var(--ease-glide), opacity 0.4s var(--ease-soft);
}
.ss-burger span + span {
	margin-top: 6px;
}
.ss-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}
.ss-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.ss-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile drawer */
.ss-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: grid;
	place-items: center;
	background: rgba(43, 26, 12, 0.96);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	opacity: 0;
	transition: opacity 0.8s var(--ease-soft);
}
.ss-mobile-nav[hidden] {
	display: none;
}
.ss-mobile-nav.is-open {
	opacity: 1;
}
.ss-mobile-nav__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	text-align: center;
	padding: 32px;
}
.ss-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ss-mobile-nav__list a {
	color: var(--cream);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.12em;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-glide);
}
.ss-mobile-nav.is-open .ss-mobile-nav__list a {
	opacity: 1;
	transform: none;
	transition-delay: calc(0.08s * var(--i, 0) + 0.12s);
}
.ss-mobile-nav__phone {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--cream);
}
.ss-mobile-nav__phone .ss-header__phone-text {
	text-align: left;
}

/* ==========================================================================
   5. Hero — 1728 x 1124
   ========================================================================== */
/* Height only — never aspect-ratio together with min-height, which resolves
   the ratio from the height and inflates the element's WIDTH past the viewport. */
.ss-hero {
	position: relative;
	min-height: min(100svh, 1124px);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ink);
}

.ss-hero__media {
	position: absolute;
	inset: 0;
}
.ss-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	animation: ss-hero-settle 2.6s var(--ease-glide) forwards;
}
@keyframes ss-hero-settle {
	to {
		transform: scale(1);
	}
}
/* Figma: black at 28% over the photo */
.ss-hero__tint {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.28;
}
/* Figma: 177.8deg gradient, black .6 -> transparent at 23% */
.ss-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(177.82deg, rgba(0, 0, 0, 0.6) 9.78%, rgba(0, 0, 0, 0) 22.95%);
}

.ss-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-inline: var(--gutter);
	/* The design centres the block a touch below the optical middle */
	padding-top: clamp(60px, 7.6vw, 132px);
}

.ss-hero__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-weight: 400;
}
.ss-hero__title-main {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	line-height: 1;
	color: var(--white);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
}
/* "Reimagined." overlaps upward into the headline, as in the design */
.ss-hero__title-script {
	display: block;
	font-family: var(--font-script);
	font-size: calc(var(--fs-hero-script) * var(--script-scale));
	line-height: 0.5;
	letter-spacing: -0.02em;
	color: var(--white);
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.08);
	margin-top: clamp(4px, 1.1vw, 20px);
}

.ss-hero__subtitle {
	max-width: 559px;
	/* Absorbs the space the separator rule used to occupy */
	margin-top: clamp(26px, 3.24vw, 56px);
	color: var(--white);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.364;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
}
.ss-hero__subtitle strong {
	font-weight: 700;
}

.ss-hero__content > div:last-child {
	margin-top: clamp(22px, 2.55vw, 44px);
}

/* ==========================================================================
   6. About — "More than just a sun-bed studio"
   ========================================================================== */
.ss-about {
	position: relative;
	background: var(--white);
	padding-block: clamp(64px, 7.4vw, 128px) clamp(64px, 7.4vw, 128px);
	overflow: hidden;
}
/* The photograph runs to the right edge of the viewport (Figma: 858 -> 1728),
   so the row is full width and only the text column takes the gutter. */
.ss-about__inner {
	display: grid;
	grid-template-columns: minmax(0, 858fr) minmax(0, 870fr);
	align-items: center;
	width: 100%;
}
.ss-about__text {
	padding-left: var(--gutter);
	padding-right: clamp(16px, 1.6vw, 28px);
}

.ss-about__title {
	position: relative;
	display: block;
	font-weight: 400;
}
/* Script word and the first heading line share a baseline and overlap */
.ss-about__row {
	display: flex;
	align-items: baseline;
	/* The script starts left of the text column (Figma: 117 vs 199) */
	margin-left: clamp(-82px, -4.745vw, -24px);
}
.ss-about__script {
	font-family: var(--font-script);
	font-size: calc(var(--fs-script) * var(--script-scale));
	line-height: 0.563;
	letter-spacing: -0.02em;
	color: var(--brown);
	white-space: nowrap;
	position: relative;
	z-index: 2;
}
.ss-about__line {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 1.09;
	color: var(--ink);
	white-space: nowrap;
}
/* Clears the swash on the final glyph of the script word */
.ss-about__line--first {
	margin-left: clamp(4px, 0.752vw, 13px);
}

.ss-about .ss-rule {
	margin-top: clamp(18px, 2.2vw, 38px);
}

.ss-about__lead {
	max-width: 419px;
	margin-top: clamp(14px, 1.6vw, 28px);
	color: var(--brown-alt);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.364;
}
.ss-about__body {
	max-width: 431px;
	margin-top: clamp(14px, 1.4vw, 24px);
	font-size: var(--fs-body);
	line-height: 1.444;
}
.ss-about__text > div:last-child {
	margin-top: clamp(22px, 2.3vw, 40px);
}

/* Photo with the cream panel offset behind it (Figma "Rectangle 81") */
.ss-about__media {
	position: relative;
	width: 100%;
}
.ss-about__panel {
	position: absolute;
	/* 442 x 705 cream panel, offset up and right of the 870 x 660 photo */
	top: clamp(-22px, -1.273vw, -8px);
	right: clamp(-195px, -11.29vw, -30px);
	width: clamp(160px, 25.58vw, 442px);
	height: calc(100% + clamp(18px, 2.6vw, 45px));
	background: var(--cream);
	border-radius: 4px;
}
.ss-about__img {
	position: relative;
	width: 100%;
	aspect-ratio: 870 / 660;
	object-fit: cover;
	border-radius: 5px;
}

/* ==========================================================================
   7. Treatments
   ========================================================================== */
.ss-treatments {
	background: var(--cream);
	padding-block: clamp(56px, 8.68vw, 150px) clamp(56px, 7.5vw, 130px);
	overflow: hidden;
}

.ss-treatments__head {
	width: var(--container);
	margin-inline: auto;
	text-align: center;
}
.ss-treatments__title {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 0.12em;
	font-weight: 400;
}
.ss-treatments__title .ss-script {
	font-size: calc(var(--fs-script-lg) * var(--script-scale));
	/* Clears the swash on the final glyph of the script word */
	margin-right: clamp(4px, 0.752vw, 13px);
}
.ss-treatments__title-main {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 1.09;
	color: var(--ink);
}
.ss-treatments__intro {
	margin-top: clamp(14px, 1.85vw, 32px);
	color: var(--brown-alt);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.364;
}

/* ---- Tabbed categories ---------------------------------------------------
   Replaces the sliding cards: every category is visible as a tab, and the
   selected one gets the full content width for a two-column price list. */
.ss-treatments__inner {
	width: var(--container);
	margin-inline: auto;
}

.ss-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(2px, 0.7vw, 12px);
	margin-top: clamp(28px, 3.3vw, 57px);
}
.ss-tab {
	position: relative;
	padding: clamp(10px, 0.87vw, 15px) clamp(14px, 1.62vw, 28px);
	color: rgba(121, 82, 71, 0.62);
	font-family: var(--font-body);
	font-size: clamp(11px, 0.81vw, 14px);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.6s var(--ease-soft);
}
.ss-tab::after {
	content: "";
	position: absolute;
	left: clamp(14px, 1.62vw, 28px);
	right: clamp(14px, 1.62vw, 28px);
	bottom: 0;
	height: 2px;
	background: var(--tan);
	border-radius: 1px;
	transform: scaleX(0);
	transition: transform 0.8s var(--ease-glide);
}
.ss-tab:hover {
	color: var(--ink);
}
.ss-tab[aria-selected="true"] {
	color: var(--ink);
}
.ss-tab[aria-selected="true"]::after {
	transform: scaleX(1);
}

.ss-tabpanel {
	margin-top: clamp(18px, 2.2vw, 38px);
}
.ss-tabpanel[hidden] {
	display: none;
}
/* Soft cross-fade when switching category */
.ss-tabpanel.is-entering .ss-tpanel {
	animation: ss-panel-in 0.9s var(--ease-soft) both;
}
@keyframes ss-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.ss-tpanel {
	background: var(--white);
	border-radius: 5px;
	overflow: hidden;
}
.ss-tpanel__media {
	position: relative;
	height: clamp(150px, 17.36vw, 300px);
}
.ss-tpanel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-tpanel__veil {
	position: absolute;
	inset: auto 0 0 0;
	height: 70%;
	background: linear-gradient(to top, rgba(23, 13, 6, 0.78), rgba(23, 13, 6, 0));
}
.ss-tpanel__label {
	position: absolute;
	left: clamp(20px, 2.31vw, 40px);
	bottom: clamp(14px, 1.5vw, 26px);
	color: var(--white);
	font-size: var(--fs-body);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.667;
}

/* Two-column price list. Multi-column flow reads down one column then the
   next, which is how a printed treatment menu scans. */
.ss-plist {
	columns: 2;
	column-gap: clamp(28px, 3.59vw, 62px);
	column-rule: 1px solid rgba(121, 82, 71, 0.18);
	padding: clamp(24px, 2.31vw, 40px) clamp(20px, 2.31vw, 40px);
}
.ss-plist__row {
	break-inside: avoid;
	display: flex;
	align-items: baseline;
	gap: clamp(10px, 1.04vw, 18px);
	padding: clamp(8px, 0.75vw, 13px) 0;
	font-size: var(--fs-body);
	line-height: 1.5;
}
.ss-plist__name {
	flex: 0 1 auto;
	color: var(--ink);
}
.ss-plist__leader {
	flex: 1 1 auto;
	min-width: 18px;
	height: 1px;
	background: rgba(121, 82, 71, 0.38);
	transform: translateY(-4px);
}
.ss-plist__price {
	flex: none;
	color: var(--ink);
	font-weight: 600;
	white-space: nowrap;
}

/* The next step once the menu has been read — same treatment as the reviews
   button so the two sections sit consistently. */
.ss-treatments__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(26px, 2.55vw, 44px);
}

/* Carousel — used by the milestones gallery */
.ss-carousel {
	--card-w: calc((var(--container) - 16px) / 2);
	margin-top: clamp(32px, 3.3vw, 57px);
	padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
}
.ss-carousel__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}
.ss-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Progress bar — 1334 x 7, cream track, tan fill */
.ss-carousel__bar {
	position: relative;
	width: var(--container);
	height: 7px;
	margin-top: clamp(28px, 3.76vw, 65px);
	background: var(--white);
	border-radius: 1px;
	overflow: hidden;
}
.ss-carousel__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 33.333%;
	background: var(--tan);
	border-radius: 1px;
	transition: width 0.8s var(--ease-glide), transform 0.8s var(--ease-glide);
}

/* ==========================================================================
   8. Boutique
   ========================================================================== */
.ss-boutique {
	background: var(--white);
	padding-block: clamp(56px, 6.6vw, 114px) clamp(56px, 5.2vw, 90px);
}
.ss-boutique__head {
	position: relative;
	display: grid;
	/* The heading sizes to its own text and the rule fills what is left */
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(16px, 0.81vw, 14px);
}
.ss-boutique__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading);
	font-weight: 400;
	line-height: 1.1;
	color: var(--ink);
	white-space: nowrap;
}
/* Figma "Line 10" — 885px rule beside the heading */
.ss-boutique__rule {
	display: block;
	height: 1px;
	background: rgba(43, 26, 12, 0.22);
	transform-origin: left center;
}

.ss-boutique__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 0.81vw, 14px);
	column-gap: clamp(20px, 0.81vw, 14px);
	margin-top: clamp(28px, 3vw, 52px);
}
.ss-bcard__media {
	aspect-ratio: 436 / 374;
	border-radius: 5px;
	overflow: hidden;
}
.ss-bcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease-glide);
}
.ss-bcard:hover .ss-bcard__media img {
	transform: scale(1.04);
}
.ss-bcard__title {
	margin-top: clamp(18px, 2.9vw, 50px);
	color: var(--brown-alt);
	font-size: var(--fs-body);
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.667;
}
.ss-bcard__text {
	margin-top: clamp(8px, 0.7vw, 12px);
	font-size: var(--fs-body);
	line-height: 1.444;
}

/* ==========================================================================
   9. Coming soon — full-bleed band
   ========================================================================== */
/* A cream shelf sits behind the band and shows 24px above it, content-column
   wide (Figma "Rectangle 80" at 195 -> 1533, 24px proud of the tan band). */
.ss-coming {
	position: relative;
	background: var(--white);
	padding-top: clamp(8px, 1.389vw, 24px);
	overflow: hidden;
}
.ss-coming::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: var(--container);
	height: clamp(8px, 1.389vw, 24px);
	background: var(--cream);
	border-radius: 4px 4px 0 0;
}
.ss-coming__row {
	position: relative;
	background: var(--tan);
}
.ss-coming__row {
	display: grid;
	grid-template-columns: 459fr 810fr 459fr;
	min-height: clamp(520px, 44.16vw, 763px);
}
.ss-coming__side {
	position: relative;
	overflow: hidden;
}
.ss-coming__side img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ss-coming__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(40px, 5.6vw, 97px) clamp(20px, 3.7vw, 64px);
}
.ss-coming__title {
	font-weight: 400;
}
.ss-coming__line {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 1.09;
	color: var(--white);
}
.ss-coming__line2 {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.06em;
	margin-top: clamp(-6px, -0.5vw, -9px);
}
.ss-coming__small {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 1.09;
	color: var(--white);
}
.ss-coming .ss-rule {
	margin-top: clamp(14px, 1.62vw, 28px);
	width: min(427px, 100%);
}
.ss-coming__lead {
	max-width: 419px;
	margin-top: clamp(14px, 1.62vw, 28px);
	color: var(--white);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.364;
}
.ss-coming__body {
	max-width: 431px;
	margin-top: clamp(12px, 1.56vw, 27px);
	color: var(--cream);
	font-size: var(--fs-body);
	line-height: 1.444;
}
.ss-coming__panel > div:last-child {
	margin-top: clamp(20px, 2.3vw, 40px);
}

/* ==========================================================================
   10. Video band
   ========================================================================== */
.ss-video {
	position: relative;
	width: 100%;
	/* No min-height here: with aspect-ratio it would widen the section beyond
	   the viewport. Narrow screens get a taller ratio instead, further down. */
	aspect-ratio: 1728 / 1005;
	background: var(--ink);
	overflow: hidden;
}
.ss-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 135px circle, centred */
.ss-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: clamp(84px, 7.81vw, 135px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(241, 235, 223, 0.22);
	border: 1px solid rgba(241, 235, 223, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--white);
	transition: background-color 0.8s var(--ease-soft), transform 0.9s var(--ease-glide);
}
.ss-video__play::after {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 50%;
	border: 1px solid rgba(241, 235, 223, 0.35);
	animation: ss-pulse 3.4s var(--ease-soft) infinite;
}
@keyframes ss-pulse {
	0% { transform: scale(0.94); opacity: 0.7; }
	70% { transform: scale(1.12); opacity: 0; }
	100% { transform: scale(1.12); opacity: 0; }
}
.ss-video__play:hover {
	background: rgba(241, 235, 223, 0.34);
	transform: translate(-50%, -50%) scale(1.06);
}
.ss-video__play-label {
	font-family: var(--font-display);
	font-size: clamp(15px, 1.157vw, 20px);
	letter-spacing: 0.02em;
}
.ss-video__frame {
	position: absolute;
	inset: 0;
	background: #000;
}
.ss-video__frame iframe,
.ss-video__frame video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	object-fit: cover;
}

/* ==========================================================================
   11. Milestones
   ========================================================================== */
.ss-milestones {
	background: var(--white);
	padding-block: clamp(56px, 5.3vw, 92px) clamp(56px, 6.4vw, 110px);
	overflow: hidden;
}
/* Text column at 218; the cream media panel runs off the right edge
   (Figma: text 218 -> 649, panel 857 -> 1735) */
.ss-milestones__inner {
	display: grid;
	grid-template-columns: minmax(0, 857fr) minmax(0, 871fr);
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ss-milestones__text {
	padding-left: clamp(20px, 12.616vw, 218px);
	padding-right: clamp(16px, 1.6vw, 28px);
}
.ss-milestones__title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	font-weight: 400;
}
.ss-milestones__main {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	line-height: 1.09;
	color: var(--ink);
}
.ss-milestones__title .ss-script {
	margin-left: clamp(4px, 0.752vw, 13px);
	white-space: nowrap;
}
.ss-milestones .ss-rule {
	margin-top: clamp(16px, 1.9vw, 33px);
}
.ss-milestones__subtitle {
	max-width: 419px;
	margin-top: clamp(12px, 1.6vw, 28px);
	color: var(--brown-alt);
	font-size: var(--fs-lead);
	font-weight: 500;
	line-height: 1.364;
}
.ss-milestones__body {
	max-width: 431px;
	margin-top: clamp(10px, 0.7vw, 12px);
	font-size: var(--fs-body);
	line-height: 1.333;
}

/* The media column sits on a cream panel and bleeds off the right edge */
.ss-milestones__media {
	position: relative;
	padding: clamp(12px, 0.93vw, 16px);
	background: var(--cream);
	border-radius: 8px;
}
.ss-carousel--milestones {
	--card-w: min(659px, 100%);
	margin-top: 0;
	padding-left: 0;
}
.ss-carousel--milestones .ss-carousel__track {
	gap: 16px;
}
.ss-mslide {
	flex: 0 0 var(--card-w);
	scroll-snap-align: start;
	border-radius: 5px;
	overflow: hidden;
}
.ss-mslide img {
	width: 100%;
	aspect-ratio: 659 / 497;
	object-fit: cover;
}
.ss-carousel--milestones .ss-carousel__bar {
	width: 100%;
	margin-top: clamp(16px, 1.6vw, 28px);
	background: var(--white);
}

/* ==========================================================================
   12. Reviews
   ========================================================================== */
.ss-reviews {
	background: var(--cream);
	padding-block: clamp(56px, 5.9vw, 102px) clamp(56px, 6.3vw, 109px);
}
.ss-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ss-reviews__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
}
.ss-reviews__badge {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(120px, 9.84vw, 170px);
	height: clamp(86px, 7.06vw, 122px);
	background: var(--white);
	border-radius: 5px;
}
.ss-reviews__badge img {
	width: 64%;
	height: auto;
}

.ss-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 0.81vw, 14px);
	margin-top: clamp(24px, 2.2vw, 38px);
}
.ss-review {
	position: relative;
	padding: clamp(20px, 1.85vw, 32px);
	background: var(--white);
	border-radius: 5px;
	transition: transform 0.9s var(--ease-glide), box-shadow 0.9s var(--ease-soft);
}
.ss-review:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(43, 26, 12, 0.08);
}
.ss-review__google {
	position: absolute;
	top: clamp(14px, 0.93vw, 16px);
	right: clamp(14px, 1.56vw, 27px);
	width: clamp(24px, 1.85vw, 32px);
	height: auto;
}
.ss-review__google svg {
	width: 100%;
	height: auto;
	display: block;
}
.ss-review__head {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.64vw, 11px);
}
.ss-review__avatar {
	flex: none;
	width: clamp(52px, 4.11vw, 71px);
	aspect-ratio: 1;
	border-radius: 50%;
	object-fit: cover;
}
.ss-review__name {
	font-family: var(--font-ui);
	font-size: clamp(17px, 1.273vw, 22px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--green);
}
.ss-review__date {
	margin-top: 2px;
	font-family: var(--font-ui);
	font-size: clamp(13px, 0.868vw, 15px);
	font-weight: 500;
	color: rgba(0, 0, 0, 0.5);
}
.ss-stars {
	display: flex;
	gap: 3px;
	margin-top: clamp(12px, 1vw, 17px);
}
.ss-star svg {
	width: clamp(14px, 1.1vw, 19px);
	height: auto;
	display: block;
	fill: rgba(0, 0, 0, 0.16);
}
.ss-star.is-on svg {
	fill: #fbbc05;
}
.ss-review__text {
	margin-top: clamp(12px, 0.93vw, 16px);
	font-family: var(--font-ui);
	font-size: clamp(13px, 0.868vw, 15px);
	font-weight: 500;
	line-height: 1.467;
	color: var(--green);
	opacity: 0.6;
}

.ss-reviews__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(26px, 2.55vw, 44px);
}
.ss-reviews__cta .ss-btn {
	min-width: clamp(220px, 15.57vw, 269px);
}

/* ==========================================================================
   13. Booking
   ========================================================================== */
.ss-booking {
	background: var(--white);
	padding-block: clamp(48px, 4.4vw, 76px);
	overflow: hidden;
}
.ss-booking__row {
	display: grid;
	/* photo bleeds off the left edge, form column sits on the content grid */
	grid-template-columns: minmax(0, 870fr) minmax(0, 644fr);
	align-items: center;
	gap: clamp(16px, 1.1vw, 19px);
	/* Runs from the left viewport edge to the content column's right edge
	   (Figma: photo 0 -> 870, panel 889 -> 1533) */
	width: calc(100% - var(--gutter));
	margin-right: auto;
	margin-left: 0;
}
.ss-booking__media {
	position: relative;
}
/* Figma "Rectangle 83" — cream panel peeking behind the photo */
.ss-booking__panel {
	position: absolute;
	top: clamp(-14px, -1.5vw, -26px);
	left: clamp(-20px, -2.9vw, -50px);
	width: clamp(140px, 25.58vw, 442px);
	height: calc(100% + clamp(28px, 3.2vw, 55px));
	background: var(--cream);
	border-radius: 6px;
}
.ss-booking__media img {
	position: relative;
	width: 100%;
	aspect-ratio: 870 / 660;
	object-fit: cover;
	border-radius: 5px;
}

.ss-booking__panel-form {
	/* The photograph is position:relative, so the panel needs its own stacking
	   position or the image paints over it where the two overlap on mobile. */
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 4.69vw, 81px) clamp(20px, 4.28vw, 74px);
	background: var(--cream);
	border-radius: 5px;
}
.ss-booking__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading);
	font-weight: 400;
	line-height: 0.7;
	letter-spacing: -0.02em;
	color: var(--green);
}
.ss-booking__intro {
	margin-top: clamp(14px, 1.5vw, 26px);
	color: var(--tan);
	font-size: var(--fs-body);
	line-height: 1.333;
}
.ss-form {
	margin-top: clamp(16px, 1.6vw, 28px);
}
.ss-form__field + .ss-form__field {
	margin-top: clamp(10px, 0.8vw, 14px);
}
.ss-input {
	width: 100%;
	height: clamp(48px, 3.23vw, 55.75px);
	padding: 0 clamp(16px, 1.33vw, 23px);
	border: 1px solid transparent;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.8);
	color: var(--green);
	font-family: var(--font-ui);
	font-size: clamp(12px, 0.752vw, 13px);
	font-weight: 500;
	transition: background-color 0.6s var(--ease-soft), border-color 0.6s var(--ease-soft);
	appearance: none;
	-webkit-appearance: none;
}
.ss-input::placeholder {
	color: var(--green);
	opacity: 1;
}
.ss-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--tan);
}
select.ss-input {
	background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%),
		linear-gradient(135deg, var(--green) 50%, transparent 50%);
	background-position: calc(100% - 22px) center, calc(100% - 17px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 44px;
}
/* Validation — the field is outlined in the same tone the form already uses
   for its error message, with the reason set directly beneath it. */
/* background-color only — the shorthand would drop the select's arrow. */
.ss-input.is-invalid {
	border-color: #a3402c;
	background-color: #fff;
}
.ss-form__error {
	margin-top: 6px;
	color: #a3402c;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.4;
}
.ss-form__error:empty {
	display: none;
}
.ss-form > div:last-of-type {
	margin-top: clamp(14px, 1.36vw, 24px);
}
.ss-form__message {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--green);
	min-height: 0;
}
.ss-form__message:empty {
	margin-top: 0;
}
.ss-form__message.is-error {
	color: #a3402c;
}
.ss-btn.is-sending {
	opacity: 0.65;
	pointer-events: none;
}

/* ==========================================================================
   14. Socials
   ========================================================================== */
.ss-social {
	background: var(--white);
	padding-block: clamp(48px, 4.6vw, 80px) clamp(40px, 3.5vw, 60px);
}
.ss-social__head {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	align-items: center;
	gap: clamp(16px, 1.3vw, 22px);
}
.ss-social__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ink);
}
.ss-social__subtitle {
	margin-top: clamp(4px, 0.4vw, 7px);
	font-family: var(--font-display);
	font-size: clamp(19px, 1.736vw, 30px);
	color: var(--ink);
}
.ss-social__rule {
	height: 1px;
	background: rgba(43, 26, 12, 0.22);
	transform-origin: left center;
	align-self: center;
	margin-top: clamp(10px, 1.1vw, 19px);
}
.ss-social__links {
	display: flex;
	gap: clamp(8px, 0.69vw, 12px);
}
.ss-social__icon {
	display: grid;
	place-items: center;
	width: clamp(36px, 2.59vw, 44.8px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ink);
	color: var(--cream);
	transition: transform 0.7s var(--ease-glide), background-color 0.6s var(--ease-soft);
}
.ss-social__icon:hover {
	transform: translateY(-3px);
	background: var(--tan);
}
.ss-social__icon svg {
	width: 54%;
	height: auto;
	display: block;
}

/* The grid straddles the footer: its lower portion sits on the tan band
   (Figma: grid 9026 -> 9337, footer band starts at 9182). */
.ss-social__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(12px, 0.9vw, 15px);
	margin-top: clamp(24px, 3.36vw, 58px);
	margin-bottom: clamp(-156px, -9.028vw, -48px);
}
.ss-social__cell {
	display: block;
	aspect-ratio: 323 / 312;
	border-radius: 5px;
	overflow: hidden;
}
.ss-social__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease-glide);
}
.ss-social__cell:hover img {
	transform: scale(1.06);
}

/* ==========================================================================
   15. Thank You page & generic pages
   ========================================================================== */
.ss-thank-you {
	position: relative;
	min-height: min(70svh, 720px);
	display: grid;
	place-items: center;
	background: var(--dark);
	text-align: center;
}
.ss-thank-you__inner {
	max-width: 640px;
	padding-inline: var(--gutter);
	padding-block: clamp(140px, 14vw, 240px) clamp(48px, 5vw, 88px);
}
.ss-thank-you__title {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 400;
	line-height: 1.1;
	color: var(--white);
}
.ss-thank-you__subtext {
	max-width: 46ch;
	margin: clamp(16px, 1.8vw, 28px) auto 0;
	color: var(--cream);
	font-size: var(--fs-lead);
}
.ss-thank-you__action {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 2.6vw, 44px);
}

.ss-page-header {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--dark);
	text-align: center;
	padding-block: clamp(120px, 12vw, 200px) clamp(32px, 3.5vw, 56px);
}
.ss-page-header__inner {
	padding-inline: var(--gutter);
}
.ss-page-header__title {
	font-family: var(--font-display);
	font-size: var(--fs-heading);
	font-weight: 400;
	color: var(--white);
}
.ss-page {
	background: var(--white);
	padding-block: clamp(48px, 5.5vw, 96px);
}
.ss-page__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--gutter);
	color: var(--ink);
	font-size: var(--fs-body);
	line-height: 1.7;
}
.ss-page__inner > * + * {
	margin-top: 1.2em;
}
.ss-page__inner h2,
.ss-page__inner h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.2;
}

/* ==========================================================================
   16. Footer
   ========================================================================== */
.ss-footer {
	background: var(--tan);
	color: var(--cream);
	/* Top padding clears the part of the photo grid overlapping the band */
	padding-block: clamp(60px, 12.15vw, 210px) clamp(20px, 1.8vw, 31px);
	position: relative;
	z-index: 1;
}
.ss-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 342fr) minmax(0, 408fr) minmax(0, 584fr);
	gap: clamp(28px, 3.3vw, 57px);
	align-items: start;
}
.ss-footer__col {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3.9vw, 68px);
	min-height: 100%;
}
/* The vertical hairline between column one and two (Figma "Line 15") */
.ss-footer__col--hours {
	position: relative;
	padding-left: clamp(20px, 3.36vw, 58px);
}
.ss-footer__col--hours::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(241, 235, 223, 0.4);
}
.ss-footer__col--brand {
	justify-content: space-between;
}
.ss-footer__logo {
	width: clamp(140px, 13.02vw, 225px);
	height: auto;
	animation: ss-spin 28s linear infinite;
	transform-origin: 50% 50%;
	will-change: transform;
}
.ss-footer__heading {
	font-size: clamp(15px, 1.041vw, 18px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.333;
	color: var(--white);
}
.ss-footer__label {
	margin-top: 2px;
	font-size: clamp(15px, 1.041vw, 18px);
	letter-spacing: -0.02em;
	line-height: 1.333;
}
.ss-footer__number {
	display: inline-block;
	margin-top: clamp(4px, 0.4vw, 7px);
	font-family: var(--font-num);
	font-size: clamp(18px, 1.273vw, 22px);
	font-weight: 500;
	color: var(--white);
	transition: opacity 0.6s var(--ease-soft);
}
.ss-footer__number:hover {
	opacity: 0.8;
}
.ss-footer__hours,
.ss-footer__links {
	margin-top: clamp(8px, 0.75vw, 13px);
}
.ss-footer__hours li,
.ss-footer__links li {
	font-size: clamp(15px, 1.041vw, 18px);
	letter-spacing: -0.02em;
	line-height: 1.333;
}
.ss-footer__links a {
	transition: opacity 0.6s var(--ease-soft);
}
.ss-footer__links a:hover {
	opacity: 0.75;
}
.ss-footer__map {
	display: block;
	margin-top: clamp(12px, 1.33vw, 23px);
	border-radius: 5px;
	overflow: hidden;
}
.ss-footer__map img {
	width: 100%;
	aspect-ratio: 584 / 341;
	object-fit: cover;
	transition: transform 1.6s var(--ease-glide);
}
.ss-footer__map:hover img {
	transform: scale(1.04);
}

.ss-footer__bar {
	width: var(--container);
	margin: clamp(28px, 3.47vw, 60px) auto 0;
	padding-top: clamp(14px, 1.5vw, 26px);
	border-top: 1px solid rgba(241, 235, 223, 0.4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.ss-footer__copy,
.ss-footer__top {
	font-size: clamp(12px, 0.868vw, 15px);
	font-weight: 500;
}
.ss-footer__top {
	transition: opacity 0.6s var(--ease-soft);
}
.ss-footer__top:hover {
	opacity: 0.75;
}

/* ==========================================================================
   17. Entrance animations — long, soft, no bounce
   ========================================================================== */
[data-reveal] {
	will-change: opacity, transform, clip-path;
}

.ss-anim [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--dur) var(--ease-soft) var(--d, 0s),
		transform var(--dur) var(--ease-glide) var(--d, 0s),
		filter var(--dur) var(--ease-soft) var(--d, 0s);
}

.ss-anim [data-reveal="fade"] {
	transform: translateY(18px);
}
.ss-anim [data-reveal="rise"] {
	transform: translateY(34px);
	filter: blur(6px);
}
.ss-anim [data-reveal="script"] {
	transform: translateY(26px) scale(0.985);
	filter: blur(9px);
}
.ss-anim [data-reveal="media"] {
	transform: translateY(42px) scale(1.02);
	filter: blur(4px);
}
.ss-anim [data-reveal="rule"] {
	transform: scaleX(0);
}

.ss-anim [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}
.ss-anim [data-reveal="rule"].is-in {
	transform: scaleX(1);
}
.ss-anim [data-reveal="rule"] {
	transition-duration: 1.8s;
}
.ss-anim [data-reveal="media"] {
	transition-duration: 1.8s;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.ss-anim [data-reveal],
	.ss-anim [data-reveal].is-in {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
	.ss-hero__img {
		animation: none;
		transform: none;
	}
	.ss-video__play::after,
	.ss-header__phone-icon::after,
	.ss-header__logo img,
	.ss-footer__logo {
		animation: none;
	}
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		/* Without this an infinite animation restarts forever and flickers */
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   18. Responsive
   ========================================================================== */

/* --- Laptop --------------------------------------------------------------- */
@media (max-width: 1200px) {
	.ss-header__phone {
		display: none;
	}
	.ss-nav__list {
		gap: clamp(14px, 2vw, 26px);
	}
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--gutter: clamp(20px, 5vw, 48px);
	}

	.ss-nav,
	.ss-header__phone,
	.ss-header__cta {
		display: none;
	}
	.ss-burger {
		display: block;
	}
	.ss-header__inner {
		justify-content: space-between;
	}
	.ss-header__logo {
		width: clamp(64px, 11vw, 96px);
	}

	.ss-hero {
		min-height: 88svh;
		padding-block: 140px 72px;
	}
	.ss-video {
		aspect-ratio: 16 / 10;
	}
	.ss-hero__content {
		padding-top: 0;
	}

	.ss-about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}
	.ss-about__text {
		padding-right: var(--gutter);
		order: 2;
	}
	.ss-about__media {
		order: 1;
	}
	.ss-about__panel {
		right: -24px;
		width: 140px;
	}
	.ss-about__row {
		margin-left: clamp(-40px, -3.4vw, -12px);
	}

	.ss-carousel {
		--card-w: min(560px, calc(100% - var(--gutter)));
	}

	.ss-boutique__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.ss-coming__row {
		grid-template-columns: minmax(0, 1fr);
	}
	.ss-coming__side {
		min-height: 240px;
		max-height: 320px;
	}
	.ss-coming__side--right {
		display: none;
	}

	.ss-milestones__inner {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		padding-inline: var(--gutter);
		gap: 36px;
	}
	.ss-milestones__text {
		padding-left: 0;
		padding-right: 0;
	}
	.ss-carousel--milestones {
		--card-w: 100%;
	}

	.ss-social__grid {
		margin-bottom: 0;
	}
	.ss-footer {
		padding-block: clamp(44px, 5vw, 70px) 24px;
	}

	.ss-reviews__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ss-booking__row {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		padding-inline: var(--gutter);
		gap: 0;
	}
	.ss-booking__media {
		max-width: 100%;
	}
	.ss-booking__panel {
		display: none;
	}
	.ss-booking__panel-form {
		margin-top: -40px;
		width: calc(100% - 40px);
		margin-inline: auto;
		padding: 36px 28px;
	}

	.ss-social__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		row-gap: 18px;
	}
	.ss-social__rule {
		display: none;
	}
	.ss-social__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ss-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
	.ss-footer__col--map {
		grid-column: 1 / -1;
	}
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 680px) {
	:root {
		--fs-hero: clamp(34px, 10.4vw, 56px);
		--fs-hero-script: clamp(46px, 14.4vw, 76px);
		--fs-display: clamp(26px, 7.4vw, 38px);
		--fs-script: clamp(44px, 13.2vw, 66px);
		--fs-script-lg: clamp(46px, 14vw, 72px);
		--fs-heading: clamp(24px, 6.6vw, 34px);
		--fs-lead: 17px;
		--fs-body: 15px;
	}

	.ss-hero {
		min-height: 92svh;
		padding-block: 120px 56px;
	}
	.ss-hero__subtitle {
		max-width: 30ch;
	}

	.ss-btn {
		min-width: min(300px, 100%);
		font-size: 12px;
		letter-spacing: 0.09em;
	}

	.ss-about {
		padding-block: 52px;
	}
	/* Let the heading wrap naturally once the column is narrow */
	.ss-about__row {
		display: block;
		margin-left: 0;
	}
	.ss-about__script {
		display: block;
		margin-bottom: -0.24em;
	}
	.ss-about__line,
	.ss-about__line--first {
		margin-left: 0;
		white-space: normal;
	}
	.ss-about__panel {
		display: none;
	}

	.ss-treatments {
		padding-block: 52px;
	}
	.ss-treatments__title {
		flex-direction: column;
		gap: 0;
	}
	.ss-treatments__title .ss-script {
		margin-right: 0;
		margin-bottom: -6px;
	}
	.ss-carousel {
		--card-w: calc(100% - var(--gutter));
	}
	/* A single column of prices, and the tabs become a swipeable strip */
	.ss-plist {
		columns: 1;
		column-rule: none;
	}
	.ss-tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.ss-tabs::-webkit-scrollbar {
		display: none;
	}

	.ss-boutique {
		padding-block: 52px;
	}
	.ss-boutique__head {
		grid-template-columns: minmax(0, 1fr);
	}
	.ss-boutique__rule {
		display: none;
	}
	.ss-boutique__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.ss-coming__panel {
		padding: 46px 22px;
	}

	.ss-video {
		aspect-ratio: 4 / 3;
	}

	.ss-milestones {
		padding-block: 52px;
	}
	.ss-milestones__title {
		display: block;
	}
	.ss-milestones__title .ss-script {
		display: block;
		margin-left: 26px;
		margin-top: -0.18em;
	}

	.ss-reviews {
		padding-block: 52px;
	}
	.ss-reviews__head {
		flex-direction: row;
		align-items: flex-start;
	}
	.ss-reviews__badge {
		width: 104px;
		height: 74px;
	}

	.ss-booking {
		padding-block: 40px 52px;
	}
	.ss-booking__panel-form {
		width: calc(100% - 24px);
		padding: 30px 22px;
	}

	.ss-social {
		padding-block: 46px 40px;
	}
	.ss-social__head {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.ss-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}
	.ss-footer__col {
		gap: 26px;
	}
	.ss-footer__col--hours {
		padding-left: 0;
	}
	.ss-footer__col--hours::before {
		display: none;
	}
	.ss-footer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}