/* Editorial storefront. Asul, Cabin and Covered By Your Grace are Latin.
   Greek glyphs fall through to Noto Serif / Noto Sans. Greek script text
   will not look handwritten until a Greek script face is licensed. */

.salon-editorial {
	--salon-bg: #f7f5f6;
	--salon-text: #1a0910;
	--salon-accent: #f05497;
	--salon-muted: rgba(26, 9, 16, 0.6);
	--salon-line: rgba(26, 9, 16, 0.1);
	--salon-panel: rgba(26, 9, 16, 0.05);
	--salon-header-h: 52px;
	--salon-pad: 24px;
	--salon-max: 1968px;
	--salon-display: "Asul", "Noto Serif", "Times New Roman", serif;
	--salon-body: "Cabin", "Noto Sans", sans-serif;
	--salon-script: "Covered By Your Grace", "Noto Serif", cursive;
	margin: 0;
	background: var(--salon-bg);
	color: var(--salon-text);
	font-family: var(--salon-body);
	font-size: clamp(16px, 1.05vw, 21px);
	line-height: 1.5;
}

.salon-editorial *,
.salon-editorial *::before,
.salon-editorial *::after { box-sizing: border-box; }

.salon-editorial main { display: block; }

.salon-editorial main > * { max-width: var(--salon-max); margin-inline: auto; }

.salon-skip {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 80;
	background: #fff;
	color: var(--salon-text);
	padding: 8px 12px;
}

.salon-skip:focus { top: 8px; }

.salon-editorial :focus-visible {
	outline: 2px solid var(--salon-accent);
	outline-offset: 3px;
}

.salon-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--salon-accent);
	color: var(--salon-text);
}

.salon-pink-bar { display: none; }

.salon-header-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 52px;
	padding: 0 var(--salon-pad);
}

.salon-logo {
	justify-self: start;
	color: inherit;
	font-family: var(--salon-display);
	font-size: 22px;
	letter-spacing: 0.12em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.salon-nav { display: flex; gap: 22px; justify-content: center; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }

.salon-nav a,
.salon-footer a,
.salon-mobile-nav a {
	color: var(--salon-text);
	text-decoration: none;
}

.salon-nav a:hover,
.salon-nav a:focus-visible { color: var(--salon-muted); }

.salon-header-cta { justify-self: end; }

.salon-menu-toggle {
	display: none;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.salon-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 16px 24px;
	background: var(--salon-bg);
}

.salon-mobile-nav[hidden] {
	display: none;
}

.salon-mobile-nav a { min-height: 44px; display: flex; align-items: center; }

.salon-scroll-lock,
.salon-scroll-lock body { overflow: hidden; }

.salon-display {
	margin: 0;
	font-family: var(--salon-display);
	font-size: clamp(72px, 14vw, 128px);
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 0.82;
}

.salon-display-small { font-size: clamp(48px, 7vw, 92px); }

.salon-section-title {
	margin: 0 0 24px;
	font-family: var(--salon-display);
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 400;
	line-height: 0.95;
}

.salon-handwritten {
	margin: 0;
	color: var(--salon-accent);
	font-family: var(--salon-script);
	font-size: clamp(32px, 4vw, 64px);
	line-height: 0.9;
}

.salon-kicker {
	margin: 0 0 8px;
	color: var(--salon-muted);
	font-size: clamp(12px, 0.9vw, 14px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.salon-hero {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 120px;
	align-items: center;
	gap: 12px;
	min-height: 0;
	padding: 28px var(--salon-pad) 8px;
}

.salon-hero-side p {
	margin: 0 0 28px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.salon-hero-side span {
	display: block;
	margin-bottom: 4px;
	color: var(--salon-muted);
	font-size: 11px;
}

.salon-hero-side.is-right { text-align: right; }

.salon-hero-mark { position: relative; text-align: center; }

.salon-hero .salon-display {
	font-size: clamp(84px, 14vw, 188px);
	line-height: 0.78;
	letter-spacing: -0.06em;
	text-transform: uppercase;
}

.salon-hero-script {
	position: absolute;
	left: 46%;
	top: 34%;
	z-index: 2;
	margin: 0;
	font-size: clamp(42px, 5.4vw, 88px);
	transform: rotate(-8deg);
}

.salon-hero-float {
	position: absolute;
	z-index: 2;
	color: var(--salon-accent);
	font-size: clamp(22px, 2vw, 34px);
}

.salon-hero-float.is-city { left: 7%; top: 46%; transform: rotate(-90deg); transform-origin: left center; }
.salon-hero-float.is-new { left: 28%; top: -8%; transform: rotate(-18deg); }
.salon-hero-float.is-copy,
.salon-hero-float.is-year { color: var(--salon-text); font-family: var(--salon-body); font-size: 14px; letter-spacing: 0.14em; }
.salon-hero-float.is-copy { right: 18%; bottom: 18%; }
.salon-hero-float.is-year { right: 11%; bottom: 8%; }

.salon-hero-meta { margin: 24px 0 0; }

.salon-hero-meta div,
.salon-meta-rows div,
.salon-side-notes div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--salon-line);
}

.salon-hero-meta dt,
.salon-meta-rows dt,
.salon-side-notes dt { color: var(--salon-muted); font-size: 13px; }

.salon-hero-meta dd,
.salon-meta-rows dd,
.salon-side-notes dd { margin: 0; }

.salon-ticker { position: relative; z-index: 2; overflow: hidden; background: var(--salon-bg); border-block: 1px solid var(--salon-line); }

.salon-ticker-shift { overflow: hidden; }

.salon-ticker-track {
	display: flex;
	width: max-content;
	animation: salon-ticker 22s linear infinite;
}

.salon-ticker-track p { display: flex; gap: 32px; margin: 0; padding: 14px 16px; }

.salon-ticker-track span { white-space: nowrap; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }

.salon-ticker-track span::before {
	content: "";
	display: inline-block;
	width: 42px;
	height: 1px;
	margin-right: 14px;
	background: var(--salon-line);
	vertical-align: middle;
}

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

.salon-hero-grid {
	position: relative;
	min-height: 68vh;
	margin: 0 var(--salon-pad);
	background: #d5cfd2;
	overflow: hidden;
}

.salon-hero-grid::before,
.salon-hero-grid::after { content: none; }

.salon-hero-grid-photo { position: absolute; inset: 0; overflow: hidden; }

.salon-hero-grid-photo .salon-media-scroll {
	position: absolute;
	left: 0;
	right: 0;
	top: -12%;
	height: 130%;
}

.salon-hero-grid-photo .salon-media-appear,
.salon-hero-grid-photo .salon-frame,
.salon-hero-grid-photo .salon-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.salon-hero-grid-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.92) 2px, transparent 2px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 2px, transparent 2px);
	background-size: 12.5% 33.333%;
}

.salon-book-bar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 18px var(--salon-pad) 0;
	padding: 22px 16px;
	background: var(--salon-text);
	color: var(--salon-bg);
	font-family: var(--salon-display);
	font-size: clamp(34px, 4vw, 64px);
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.salon-hero-grid-note,
.salon-hero-grid-cta { position: relative; z-index: 3; }

.salon-hero-grid-cta { position: absolute; left: 24px; bottom: 24px; }

.salon-hero-cell {
	position: absolute;
	z-index: 3;
	overflow: hidden;
	width: 12.5%;
	height: 33.33%;
}

.salon-hero-cell.is-a { left: 12.5%; top: 33.33%; }
.salon-hero-cell.is-b { right: 0; bottom: 0; }

.salon-hero-cell .salon-image,
.salon-hero-cell .salon-frame { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }

.salon-frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background:
		linear-gradient(145deg, rgba(26, 9, 16, 0.08), transparent 42%),
		linear-gradient(320deg, rgba(240, 84, 151, 0.18), transparent 40%),
		#e4dee1;
}

.salon-image { width: 100%; height: 100%; object-fit: cover; }

.salon-intro,
.salon-selected,
.salon-home-services,
.salon-talk,
.salon-contact-hero,
.salon-services-hero,
.salon-missing { padding: 72px var(--salon-pad); }

.salon-intro { position: relative; min-height: 70vh; }

.salon-intro-kicker { position: absolute; top: 48px; right: 8vw; }

.salon-lede {
	max-width: 12rem;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.salon-statement {
	max-width: 16ch;
	margin: 12vh auto 0;
	font-family: var(--salon-display);
	font-size: clamp(48px, 6.4vw, 92px);
	line-height: 0.9;
	text-align: center;
	text-transform: uppercase;
}

.salon-rolling-link {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
	min-height: 44px;
	align-items: center;
}

.salon-rolling-viewport { display: block; height: 1.25em; overflow: hidden; }

.salon-rolling-line {
	display: flex;
	gap: 8px;
	align-items: center;
	height: 1.25em;
	line-height: 1.25;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.salon-rolling-link:hover .salon-rolling-line,
.salon-rolling-link:focus-visible .salon-rolling-line { transform: translateY(-100%); }

.salon-book-unconfigured { margin: 0; color: var(--salon-muted); font-size: 13px; }

.salon-story { padding-bottom: 48px; }

.salon-story-copy,
.salon-story-stage { min-height: 240px; }

.salon-story-panel { margin-bottom: 32px; padding-inline: var(--salon-pad); }

.salon-story-figure { margin: 0 0 16px; padding-inline: var(--salon-pad); }

.salon-story-figure .salon-frame,
.salon-story-figure .salon-image { aspect-ratio: 4 / 5; }

.salon-process {
	display: grid;
	gap: 24px;
	padding: 48px var(--salon-pad) 72px;
}

.salon-process-phase { padding-top: 16px; border-top: 1px solid var(--salon-line); }

.salon-process-stage { display: none; }

.salon-works-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 88px 28px;
	padding: 12px var(--salon-pad) 72px;
}

.salon-work-card[data-span="3"] { grid-column: span 3; }
.salon-work-card[data-span="4"] { grid-column: span 4; }
.salon-work-card[data-span="5"] { grid-column: span 5; }
.salon-work-card[data-span="6"] { grid-column: span 6; }

.salon-work-card-link { color: inherit; text-decoration: none; display: block; }

.salon-work-card-frame { position: relative; display: block; overflow: hidden; background: #e7e1e3; }

.salon-work-card[data-ratio="3-4"] .salon-work-card-frame { aspect-ratio: 3 / 4; }
.salon-work-card[data-ratio="4-3"] .salon-work-card-frame { aspect-ratio: 4 / 3; }
.salon-work-card[data-ratio="1-1"] .salon-work-card-frame { aspect-ratio: 1 / 1; }

.salon-media-zoom,
.salon-media-zoom .salon-frame,
.salon-media-zoom .salon-image { display: block; width: 100%; height: 100%; }

.salon-media-zoom { transition: transform 0.6s ease; }

.salon-work-card-link:hover .salon-media-zoom,
.salon-work-card-link:focus-visible .salon-media-zoom { transform: scale(1.05); }

.salon-work-card-bw,
.salon-work-card-accent {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.salon-work-card-bw { background: #8d8688; mix-blend-mode: color; }
.salon-work-card-accent { background: rgba(240, 84, 151, 0.45); mix-blend-mode: multiply; }

.salon-work-card-link:hover .salon-work-card-bw,
.salon-work-card-link:hover .salon-work-card-accent,
.salon-work-card-link:focus-visible .salon-work-card-bw,
.salon-work-card-link:focus-visible .salon-work-card-accent { opacity: 1; }

.salon-work-card-caption {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-top: 10px;
	font-size: 14px;
}

.salon-works-intro { padding: 48px var(--salon-pad) 12px; text-align: center; }

.salon-works-index {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding: 8px var(--salon-pad) 48px;
}

.salon-works-index a { color: inherit; }

.salon-works-scroller {
	height: calc(100dvh - var(--salon-header-h));
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	overflow-anchor: none;
}

.salon-works-scroller::-webkit-scrollbar { width: 0; height: 0; }

.salon-works-loop.is-looping .salon-works-static {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.salon-service-names,
.salon-partners,
.salon-philosophy ul,
.salon-about-story ul { padding: 0; list-style: none; }

.salon-service-names { display: grid; gap: 28px; }

.salon-service-names a { color: inherit; font-family: var(--salon-display); font-size: clamp(32px, 3vw, 48px); text-decoration: none; text-transform: uppercase; }

.salon-service-names a span { display: block; max-width: 28ch; margin-top: 8px; font-family: var(--salon-body); font-size: 15px; letter-spacing: 0; text-transform: none; }

.salon-services-title span { display: block; }
.salon-services-title span:nth-child(2) { margin-left: 8vw; }
.salon-services-title span:nth-child(3) { margin-left: 3vw; }
.salon-services-title span:nth-child(4) { margin-left: 14vw; }

.salon-collage { position: relative; height: 560px; margin: 28px 0 12px; overflow: hidden; }

.salon-collage-wrap { position: absolute; width: min(280px, 32vw); }

.salon-collage-wrap:nth-child(1) { left: 6%; top: 48px; }
.salon-collage-wrap:nth-child(2) { left: 34%; top: 110px; z-index: 2; }
.salon-collage-wrap:nth-child(3) { left: 58%; top: 24px; }

.salon-collage-card {
	padding: 10px;
	background: #fff;
	transform: rotate(var(--salon-tilt));
}

.salon-collage-card .salon-frame { aspect-ratio: 3 / 4; min-height: 0; }

.salon-prices { padding: 12px var(--salon-pad) 48px; }

.salon-price-group { margin-bottom: 36px; }

.salon-price-group h2 { margin: 0 0 8px; font-family: var(--salon-display); font-size: clamp(32px, 4vw, 48px); font-weight: 400; }

.salon-price-group ul { margin: 0; padding: 0; list-style: none; }

.salon-price-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--salon-line);
}

.salon-price-row small { display: block; color: var(--salon-muted); font-size: 13px; }

.salon-price-row > span:last-child { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }

.salon-about { padding: 12px var(--salon-pad) 64px; }

.salon-profile-heading {
	position: relative;
	width: min(520px, 100%);
	margin: 4px auto 8px;
	padding-top: 36px;
	text-align: center;
}

.salon-about-kicker {
	position: absolute;
	left: 46%;
	top: 0;
	margin: 0;
	color: var(--salon-accent);
	font-size: clamp(28px, 2.4vw, 40px);
	transform: rotate(-8deg);
}

.salon-profile-title {
	margin: 0;
	font-family: var(--salon-display);
	font-size: clamp(52px, 4.6vw, 76px);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}

.salon-profile-title span { display: block; }

.salon-about-note {
	margin: 6px 0 0;
	color: var(--salon-accent);
	font-size: clamp(26px, 2vw, 34px);
}

.salon-profile-photos {
	position: relative;
	width: min(420px, 100%);
	height: 280px;
	margin: 36px auto 28px;
}

.salon-polaroid {
	position: absolute;
	width: 54%;
	display: block;
}

.salon-polaroid:first-child { left: 4%; top: 28px; z-index: 1; }
.salon-polaroid:last-child { right: 2%; top: 0; z-index: 2; }

.salon-polaroid-card {
	display: block;
	padding: 8px 8px 18px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(26, 9, 16, 0.12);
}

.salon-polaroid:first-child .salon-polaroid-card { transform: rotate(-8deg); }
.salon-polaroid:last-child .salon-polaroid-card { transform: rotate(7deg); }

.salon-polaroid-card .salon-image,
.salon-polaroid-card .salon-frame {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	height: auto;
}

.salon-profile-bio {
	max-width: 34ch;
	margin: 0 auto 22px;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
}

.salon-profile-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	background: var(--salon-text);
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-decoration: none;
	text-transform: uppercase;
}

.salon-about-chapter { padding: 8px 0 56px; }

.salon-about-chapter-copy {
	display: grid;
	grid-template-columns: minmax(0, 34ch) 1fr auto;
	gap: 12px 24px;
	align-items: start;
}

.salon-about-chapter-copy .salon-kicker { grid-column: 1; grid-row: 1; }
.salon-about-chapter-copy > p:not(.salon-kicker) { grid-column: 1; margin: 0; line-height: 1.5; }
.salon-about-chapter-copy .salon-rolling-link { grid-column: 3; grid-row: 1 / span 2; align-self: end; justify-self: end; }

.salon-about-chapter.is-layout-1 .salon-about-chapter-copy { grid-template-columns: 160px minmax(0, 36ch); }
.salon-about-chapter.is-layout-1 .salon-about-chapter-copy > p:not(.salon-kicker) { grid-column: 2; grid-row: 1; }

.salon-about-chapter-media {
	display: grid;
	grid-template-columns: 210px 1fr 210px;
	gap: 24px;
	align-items: end;
	margin-top: 36px;
}

.salon-about-chapter-media .salon-media-appear {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.salon-about-chapter-media .is-square { aspect-ratio: 1; margin-bottom: 8px; }

.salon-about-chapter.is-layout-1 .salon-about-chapter-media { grid-template-columns: 12% minmax(0, 340px); }
.salon-about-chapter.is-layout-1 .salon-media-appear { aspect-ratio: 3 / 4; }
.salon-about-chapter.is-layout-2 .salon-about-chapter-media { grid-template-columns: minmax(0, 280px); }

.salon-about-chapter-media .salon-image,
.salon-about-chapter-media .salon-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.salon-about-story section { padding: 12px 0 36px; }

.salon-philosophy ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 36px;
	margin: 18px 0 0;
}

.salon-philosophy h3 {
	margin: 0 0 6px;
	font-family: var(--salon-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.salon-philosophy p { margin: 0; max-width: 28ch; font-size: 15px; line-height: 1.45; }

.salon-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.salon-counter { margin: 0; padding: 16px; background: var(--salon-panel); }

.salon-counter-value { display: block; font-family: var(--salon-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; }

.salon-counter-label { color: var(--salon-muted); font-size: 14px; }

.salon-contact-hero,
.salon-single { display: grid; gap: 24px; }

.salon-contact {
	display: grid;
	gap: 24px;
	padding: 48px var(--salon-pad);
	background: var(--salon-panel);
}

.salon-contact-visual .salon-frame,
.salon-contact-visual .salon-image { aspect-ratio: 4 / 5; min-height: 0; }

.salon-contact-list { margin: 24px 0 0; padding: 0; list-style: none; }

.salon-contact-list li {
	display: grid;
	grid-template-columns: 36px 110px 1fr;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid var(--salon-line);
}

.salon-contact-list a { color: inherit; }

.salon-talk { max-width: 760px; }

.salon-form { position: relative; display: grid; gap: 18px; }

.salon-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.salon-field { display: grid; gap: 6px; }

.salon-field input,
.salon-field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--salon-line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 12px 0;
}

.salon-field textarea { min-height: 140px; resize: vertical; }

.salon-field input:hover,
.salon-field textarea:hover,
.salon-field input:focus,
.salon-field textarea:focus { border-bottom-color: var(--salon-muted); }

.salon-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: start;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.salon-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 1px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
}

.salon-form[data-state="pending"] .salon-spinner { display: inline-block; animation: salon-spin 1s linear infinite; }

.salon-form[data-state="invalid"] .salon-form-status,
.salon-form[data-state="error"] .salon-form-status { color: #8c2348; }

@keyframes salon-spin { to { transform: rotate(360deg); } }

#form { scroll-margin-top: calc(var(--salon-header-h) + 16px); }

.salon-editorial main > .salon-testimonials {
	position: relative;
	max-width: none;
	padding: 72px var(--salon-pad) 88px;
	background: #e7e2e4;
	overflow: hidden;
}

.salon-testimonials-kicker {
	position: relative;
	z-index: 2;
	margin: 0 0 8px;
	text-align: center;
	font-size: clamp(40px, 4vw, 64px);
}

.salon-testimonial-stage {
	position: relative;
	height: 460px;
}

.salon-testimonial {
	position: absolute;
	left: 50%;
	top: 28px;
	display: flex;
	flex-direction: column;
	width: min(340px, 70vw);
	min-height: 380px;
	margin: 0;
	padding: 28px 26px 22px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(26, 9, 16, 0.08);
	transform: translateX(-50%);
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.salon-testimonial.is-current { z-index: 3; transform: translateX(-50%) rotate(0deg); }
.salon-testimonial.is-prev { z-index: 1; background: #f4f1f2; transform: translateX(calc(-50% - 250px)) rotate(-8deg) scale(0.96); }
.salon-testimonial.is-next { z-index: 2; background: #f4f1f2; transform: translateX(calc(-50% + 250px)) rotate(8deg) scale(0.96); }
.salon-testimonial.is-hidden { opacity: 0; pointer-events: none; }

.salon-testimonial time {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--salon-muted);
}

.salon-testimonial p {
	margin: 14px 0 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

.salon-testimonial footer {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	margin-top: auto;
	padding-top: 22px;
}

.salon-testimonial-avatar {
	display: grid;
	width: 52px;
	height: 52px;
	place-items: center;
	background: #efe8ea;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.salon-testimonial cite { display: block; font-style: normal; font-size: 15px; font-weight: 600; }

.salon-testimonial-person span {
	display: block;
	color: var(--salon-muted);
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.salon-testimonial-rating { font-size: 13px; letter-spacing: 0.04em; }

.salon-testimonial-controls {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 58%;
	z-index: 4;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.salon-testimonial-controls button {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--salon-text);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}

.salon-single { padding: 32px var(--salon-pad) 48px; align-items: start; }

.salon-single-media { display: grid; gap: 36px; }

.salon-single-media .salon-frame,
.salon-single-media .salon-image { aspect-ratio: 3 / 4; width: 100%; min-height: 0; object-fit: cover; display: block; }

.salon-back {
	margin-bottom: 18px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.salon-single .salon-display {
	max-width: 100%;
	margin-bottom: 28px;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.salon-single .salon-word { white-space: nowrap; }

.salon-single .salon-meta-rows div { grid-template-columns: 148px 1fr; }

.salon-single .salon-meta-rows dt {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 11px;
	line-height: 1.35;
}

.salon-meta-rows .is-prose dd {
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1.5;
	text-transform: none;
}

.salon-meta-rows dd p { margin: 0 0 16px; max-width: 38ch; }

.salon-tech-list { margin: 0; padding: 0; list-style: none; }

.salon-tech-list li { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; line-height: 1.45; }

.salon-meta-rows dd { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }

.salon-approach-photo {
	display: block;
	position: relative;
	width: min(280px, 100%);
	aspect-ratio: 4 / 5;
	margin: 8px 0 18px;
	overflow: hidden;
}

.salon-approach-photo .salon-image,
.salon-approach-photo .salon-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.salon-footer { padding: 48px var(--salon-pad) 32px; border-top: 1px solid var(--salon-line); }

.salon-footer-grid { display: grid; gap: 18px; }

.salon-footer-contact,
.salon-footer nav { display: flex; flex-wrap: wrap; gap: 12px 18px; }

.salon-empty { color: var(--salon-muted); }

.salon-specimen {
	margin: 0;
	padding: 10px var(--salon-pad);
	background: var(--salon-accent);
	color: #fff;
	font-size: 13px;
}

.elementor-widget-salon-hero-grid.elementor-invisible,
.elementor-widget-salon-works-gallery.elementor-invisible,
.elementor-widget-salon-sticky-story.elementor-invisible,
.elementor-widget-salon-price-list.elementor-invisible,
.elementor-widget-salon-counters.elementor-invisible,
.elementor-widget-salon-contact-form.elementor-invisible {
	visibility: visible;
	opacity: 1;
}

@media (min-width: 768px) and (max-width: 1159.98px) {
	.salon-works-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 48px 16px; }
	.salon-work-card[data-span="6"],
	.salon-work-card[data-span="5"],
	.salon-work-card[data-span="4"] { grid-column: span 6; }
	.salon-work-card[data-span="3"] { grid-column: span 3; }
	.salon-services-title span:nth-child(n) { margin-left: 0; }
	.salon-collage { height: 460px; }
}

@media (min-width: 1160px) {
	.salon-hero { grid-template-columns: 150px minmax(0, 1fr) 150px; align-items: center; min-height: 0; padding-top: 36px; }
	.salon-service-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.salon-works-grid-home .salon-work-card:nth-child(1) { margin-top: 72px; }
	.salon-works-grid-home .salon-work-card:nth-child(3) { margin-top: 120px; }
	.salon-hero-meta { margin: 0; }
	.salon-story { min-height: 220vh; }
	.salon-story-sticky {
		position: sticky;
		top: var(--salon-header-h);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		height: calc(100dvh - var(--salon-header-h));
		align-items: center;
	}
	.salon-story-copy { max-height: 100%; overflow: auto; }
	.salon-story-stage { position: relative; height: 100%; overflow: hidden; }
	.salon-story-figure { position: absolute; inset: 8% 10%; margin: 0; padding: 0; opacity: 0; transition: opacity 0.45s ease; }
	html:not(.salon-motion) .salon-story-figure,
	.salon-story-figure.is-active.is-shown { opacity: 1; }
	.salon-story-figure .salon-media-appear { display: block; height: 100%; transform-origin: 50% 60%; }
	.salon-motion .salon-story-panel { display: none; }
	.salon-motion .salon-story-panel.is-active { display: block; }
	.salon-process { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
	.salon-process-stage {
		display: block;
		position: relative;
		min-height: 680px;
		overflow: hidden;
	}
	.salon-process-layer { position: absolute; display: block; }
	.salon-process-layer-small { width: 28%; height: 34%; }
	.salon-process-layer-large { width: 46%; height: 58%; }
	.salon-process-layer:nth-child(1) { left: 8%; top: 12%; }
	.salon-process-layer:nth-child(2) { right: 6%; top: 20%; }
	.salon-process-layer:nth-child(3) { left: 30%; bottom: 8%; }
	.salon-process-layer .salon-media-scroll,
	.salon-process-layer .salon-media-appear { display: block; width: 100%; height: 100%; }
	.salon-process-layer .salon-frame,
	.salon-process-layer .salon-image { min-height: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
	.salon-contact { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 680px; }
	.salon-about { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
	.salon-profile {
		position: sticky;
		top: var(--salon-header-h);
		max-height: calc(100dvh - var(--salon-header-h));
		overflow: auto;
		padding: 64px 0 24px;
	}
	.salon-single { grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr); gap: 48px; align-items: start; }
	.salon-contact-hero { grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.7fr); align-items: end; }
	.salon-footer-grid { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}

@media (max-width: 767.98px) {
	.salon-editorial { --salon-pad: 18px; }
	.salon-hero { grid-template-columns: 1fr; }
	.salon-hero-side,
	.salon-hero-float { position: static; display: block; text-align: left; transform: none; }
	.salon-hero-script { position: static; transform: none; margin-top: 8px; }
	.salon-header-row { grid-template-columns: 1fr auto; padding-inline: 16px; }
	.salon-nav,
	.salon-header-cta { display: none; }
	.salon-menu-toggle { display: inline-flex; justify-self: end; }
	.salon-display { font-size: clamp(56px, 18vw, 84px); }
	.salon-works-grid { grid-template-columns: 1fr; gap: 28px; padding-inline: 16px; }
	.salon-work-card { grid-column: 1 / -1 !important; }
	.salon-collage { height: auto; display: grid; gap: 16px; overflow: visible; }
	.salon-collage-wrap { position: static; width: auto; }
	.salon-collage-card { transform: none; }
	.salon-services-title span { margin-left: 0 !important; }
	.salon-counters,
	.salon-contact-list li,
	.salon-hero-meta div,
	.salon-meta-rows div { grid-template-columns: 1fr; }
	.salon-hero-grid { margin-inline: 16px; min-height: 58vh; }
	.salon-story-figure { position: static; opacity: 1; }
	.salon-profile { position: static; max-height: none; overflow: visible; padding-top: 28px; }
	.salon-about-chapter-copy,
	.salon-about-chapter.is-layout-1 .salon-about-chapter-copy,
	.salon-about-chapter-media,
	.salon-about-chapter.is-layout-1 .salon-about-chapter-media,
	.salon-about-chapter.is-layout-2 .salon-about-chapter-media,
	.salon-philosophy ul { grid-template-columns: 1fr; }
	.salon-about-chapter-copy .salon-kicker,
	.salon-about-chapter-copy > p:not(.salon-kicker),
	.salon-about-chapter-copy .salon-rolling-link,
	.salon-about-chapter.is-layout-1 .salon-about-chapter-copy > p:not(.salon-kicker) { grid-column: 1; grid-row: auto; }
	.salon-profile-photos { height: 240px; }
	.salon-testimonials { margin-inline: 0; padding-inline: 18px; }
	.salon-testimonial-stage { height: auto; min-height: 420px; }
	.salon-testimonial.is-prev,
	.salon-testimonial.is-next,
	.salon-testimonial.is-hidden { opacity: 0; pointer-events: none; }
	.salon-testimonial.is-current { transform: translateX(-50%); }
	.salon-testimonial-controls { top: auto; bottom: 18px; }
}

@media (max-height: 760px) and (min-width: 1160px) {
	.salon-profile { padding-top: 24px; }
	.salon-hero { min-height: auto; padding-top: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
	html.salon-motion-pending .salon-header,
	html.salon-motion-pending .salon-hero .salon-display,
	html.salon-motion-pending .salon-hero-side,
	html.salon-motion-pending .salon-hero-float,
	html.salon-motion-pending .salon-hero-script,
	html.salon-motion-pending .salon-hero-cell { opacity: 0; }
	html.salon-motion-pending .salon-hero-grid-overlay { transform: translateY(-100%); }
	html.salon-motion-pending .salon-hero-grid-photo .salon-media-appear { transform: scale(0.2); opacity: 0.001; }
}

@media (prefers-reduced-motion: reduce) {
	.salon-ticker-track,
	.salon-rolling-line,
	.salon-media-zoom,
	.salon-spinner,
	.salon-work-card-bw,
	.salon-work-card-accent {
		animation: none !important;
		transition: none !important;
	}
	.salon-story { min-height: 0; }
	.salon-story-sticky { position: static; height: auto; display: block; }
	.salon-story-panel { display: block !important; }
	.salon-story-figure { position: static !important; opacity: 1 !important; }
}
