/* ==========================================================================
   Studio Mila — one stylesheet for the Landing and the Website.
   Values are the mockup's (Claude Design exports it9 / ru1, 07.10.2026):
   ivory #F5F0EA, cream #FBF8F4, graphite #231F1C, wine #7B2D3B,
   Cormorant Garamond 500/600 for display, Manrope 400-600 for text.
   Desktop frame 1360 px with 64 px gutters; mobile frame 390 px with 20 px.
   ========================================================================== */

:root {
	--ivory: #F5F0EA;
	--cream: #FBF8F4;
	--white: #FFFFFF;
	--graphite: #231F1C;
	--wine: #7B2D3B;
	--wine-dark: #652432;
	--muted: #5E554E;
	--muted-2: #A89D93;
	--line: #E3DAD0;
	--line-2: #CFC4B8;
	--blush: #EFE3E1;
	--ph: #E6E0D9;
	--ph-line: #DAD1C7;
	--dark-2: #2E2926;
	--dark-line: #3A3430;
	--dark-line-2: #4A423D;
	--dark-line-3: #6A605A;
	--dark-text: #CFC6BD;
	--serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
	--sans: Manrope, 'Manrope Fallback', Arial, sans-serif;
	--wrap: 1232px;
	--gutter: 20px;
	--radius: 20px;
	--section: 112px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ivory);
	color: var(--graphite);
	font: 400 16px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: inherit; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
s { color: var(--muted); } /* mockup #A89D93 fails 4.5:1 on cream; muted reads 5.5:1 (case 7 finding 28) */
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* Type */
.kicker { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); }
.s__title { font: 500 64px/1 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
.s__lead { font: 400 16px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.s__note { font: 500 14px/1.5 var(--sans); color: var(--muted); max-width: 760px; }
.s__note--wine { color: var(--wine); font-size: 13px; }
.s__note--big { font: 400 15px/1.6 var(--sans); }
.s__note--big strong { font-weight: 600; color: var(--graphite); }
.s__cta { display: flex; justify-content: center; margin-top: 32px; }

/* Sections */
.s { padding: 0 0 var(--section); }
.s__head { margin-bottom: 40px; }
.s__head--lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; }
.s__head--lead .s__lead { padding-bottom: 4px; }
.s__head--row { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.s__leadbox { display: flex; flex-direction: column; gap: 12px; }
.s__head .link-chev { margin-left: 16px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: 600 15px/1 var(--sans); padding: 18px 32px; border-radius: 999px;
	border: 1px solid transparent; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.btn--primary:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.btn--outline { border-color: var(--graphite); color: var(--graphite); padding: 17px 31px; }
.btn--outline:hover { background: var(--graphite); color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--graphite); border-color: var(--ivory); }
.btn--small { font-size: 14px; padding: 14px 24px; }
.btn--outline.btn--small { padding: 13px 23px; }
.btn--block { width: 100%; }

.chip {
	display: inline-flex; align-items: center; font: 600 11px/1 var(--sans); letter-spacing: .06em;
	text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--blush); color: var(--wine);
}
.chip--level { font-size: 12px; letter-spacing: .04em; text-transform: none; padding: 8px 12px; }
.chip--pick {
	font: 600 13px/1 var(--sans); letter-spacing: 0; text-transform: none; padding: 11px 16px;
	background: transparent; color: var(--graphite); border: 1px solid var(--line-2); white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.chip--pick:hover { border-color: var(--graphite); }
.chip--pick.is-on { background: var(--graphite); color: var(--ivory); border-color: var(--graphite); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }

.plate { padding: 14px 18px; border-radius: 12px; background: var(--blush); color: var(--wine); font: 500 13px/1.55 var(--sans); text-wrap: pretty; }
.plate--ok { font-size: 14px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font: 600 13px/1 var(--sans); }
.field__hint { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.field__error { font: 500 12.5px/1.4 var(--sans); color: var(--wine); }
.field input, .field textarea, .field select, .search input, .select select {
	width: 100%; font: 500 15px/1.2 var(--sans); color: var(--graphite); padding: 15px 16px;
	border: 1px solid var(--line); border-radius: 12px; background: var(--cream); outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus, .search input:focus { border-color: var(--wine); }
.field textarea { border-radius: 14px; resize: vertical; line-height: 1.4; }
.field.is-error input { border-color: var(--wine); }
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select::after { content: ''; position: absolute; right: 18px; top: 18px; width: 8px; height: 8px; border-right: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(45deg); pointer-events: none; }
.search { position: relative; display: block; max-width: 560px; }
.search input { border-radius: 999px; padding-left: 48px; }
.search::before { content: ''; position: absolute; left: 19px; top: 17px; width: 13px; height: 13px; border: 1.5px solid var(--muted); border-radius: 50%; }
.search::after { content: ''; position: absolute; left: 31px; top: 30px; width: 7px; height: 1.5px; background: var(--muted); transform: rotate(45deg); }
.check { display: flex; align-items: flex-start; gap: 12px; font: 400 14px/1.5 var(--sans); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--cream); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
/* The service rows of the booking (label.bk__item) share the box: a selected row shows a checked box, not only its background (Freelance 11.10). */
.check input:checked + .check__box, .bk__item input:checked + .check__box { background: var(--wine); border-color: var(--wine); }
.check input:checked + .check__box::after, .bk__item input:checked + .check__box::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--cream); border-bottom: 2px solid var(--cream); transform: rotate(-45deg); margin-top: -3px; }
.check input:focus-visible + .check__box, .bk__item input:focus-visible + .check__box { outline: 2px solid var(--wine); outline-offset: 2px; }

.seg { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
.seg__btn { flex: 1; text-align: center; font: 600 14px/1 var(--sans); padding: 12px; border-radius: 999px; color: var(--graphite); }
.seg__btn.is-on { background: var(--graphite); color: var(--ivory); }

.round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--graphite); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.round:disabled { opacity: .3; }
.arrow { display: block; width: 10px; height: 10px; }
.arrow--l { margin-left: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.arrow--r { margin-right: 4px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.x { position: relative; display: inline-block; width: 12px; height: 12px; }
.x span { position: absolute; left: 0; top: 5.5px; width: 12px; height: 1.5px; background: currentColor; }
.x span:first-child { transform: rotate(45deg); }
.x span:last-child { transform: rotate(-45deg); }
.link-plain { font: 600 14px/1 var(--sans); color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }

/* Dotted chevron link (handoff §6, variant A) */
.link-chev { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); color: var(--wine); }
.link-chev .chev { fill: currentColor; flex: none; }
.link-chev .chev circle { opacity: .35; }
.link-chev .chev circle:nth-child(1) { opacity: 1; }
.link-chev .chev circle:nth-child(2) { opacity: .85; }
.link-chev .chev circle:nth-child(3) { opacity: .7; }
.link-chev .chev circle:nth-child(4) { opacity: .5; }
@keyframes chev-run { 0% { transform: translateX(0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translateX(6px); opacity: .3; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.link-chev:hover .chev circle { animation: chev-run .9s linear infinite; }
	.link-chev:hover .chev circle:nth-child(2) { animation-delay: .12s; }
	.link-chev:hover .chev circle:nth-child(3) { animation-delay: .24s; }
	.link-chev:hover .chev circle:nth-child(4) { animation-delay: .36s; }
	.link-chev:hover .chev circle:nth-child(5) { animation-delay: .48s; }
}

/* Placeholders for photos that are not in the pack yet */
.ph { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--ph); border: 1px solid var(--ph-line); border-radius: 16px; font: 500 11px/1 ui-monospace, Menlo, monospace; color: var(--muted); text-transform: lowercase; }
.ph--2-3 { aspect-ratio: 2 / 3; }
.ph--3-4 { aspect-ratio: 3 / 4; border-radius: 8px; }
.ph--4-5 { aspect-ratio: 4 / 5; border-radius: 24px; }
.ph--4-3 { aspect-ratio: 4 / 3; }
.ph--3-2 { aspect-ratio: 3 / 2; border-radius: 24px; }
.ph--1-1 { aspect-ratio: 1 / 1; border-radius: 10px; font-size: 10px; }
.ph--16-10 { aspect-ratio: 16 / 10; }
.ph--map { height: 420px; border-radius: 20px; border: 0; font-size: 13px; }

/* --------------------------------------------------------------------------
   Mode bar
   -------------------------------------------------------------------------- */

.bar { background: var(--graphite); color: var(--ivory); }
.bar__row { display: flex; align-items: center; gap: 14px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--dark-line); }
.bar__label { font: 500 13px/1 var(--sans); color: var(--dark-text); }
.bar__switch { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--dark-line-2); border-radius: 999px; }
.bar__pill { font: 500 13px/1 var(--sans); padding: 8px 16px; border-radius: 999px; color: var(--line); white-space: nowrap; }
.bar__pill.is-on { background: var(--ivory); color: var(--graphite); font-weight: 600; }
.bar__info { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.bar__info-i { display: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--dark-line-3); align-items: center; justify-content: center; font: 600 14px/1 var(--serif); }
.bar__made { margin-left: auto; font: 400 12px/1 var(--sans); color: var(--muted-2); }
.bar__plate { background: var(--dark-2); }
.bar__plate[hidden] { display: none; }
.bar__plate-row { display: flex; align-items: center; gap: 24px; padding-top: 11px; padding-bottom: 11px; }
.bar__plate p { flex: 1; font: 400 13px/1.5 var(--sans); color: var(--dark-text); text-wrap: pretty; }
.bar__hide { flex: none; font: 600 12px/1 var(--sans); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--dark-line-3); color: var(--ivory); }
.bar { position: relative; }
.bar__tip { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 8px; z-index: 40; max-width: 320px; padding: 12px 16px; border-radius: 12px; background: var(--cream); color: var(--graphite); font: 500 13px/1.45 var(--sans); box-shadow: 0 12px 32px rgba(35, 31, 28, .18); }
.bar__tip[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hdr { position: sticky; top: 0; z-index: 30; background: var(--ivory); border-bottom: 1px solid var(--line); }
.hdr__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.hdr__brand { display: flex; flex-direction: column; gap: 5px; }
.hdr__logo { font: 600 30px/1 var(--serif); letter-spacing: .01em; }
.hdr__tag { font: 500 11px/1 var(--sans); letter-spacing: .08em; color: var(--muted); }
.hdr__nav { display: flex; gap: 36px; font: 500 14px/1 var(--sans); }
.hdr__nav a[aria-current] { color: var(--wine); font-weight: 600; }
.hdr__tools { display: flex; align-items: center; gap: 24px; }
.hdr__my { font: 500 13px/1 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hdr__cta { font-size: 14px; padding: 14px 24px; }
.hdr__burger { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--graphite); background: var(--cream); font: 600 13px/1 var(--sans); }
.hdr__burger-lines { display: flex; flex-direction: column; gap: 4px; }
.hdr__burger-lines span { width: 14px; height: 1.5px; background: var(--graphite); }
.hdr__burger[aria-expanded="true"] .hdr__burger-lines { position: relative; width: 12px; height: 12px; gap: 0; }
.hdr__burger[aria-expanded="true"] .hdr__burger-lines span { position: absolute; left: 0; top: 5.5px; width: 12px; }
.hdr__burger[aria-expanded="true"] .hdr__burger-lines span:first-child { transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"] .hdr__burger-lines span:last-child { transform: rotate(-45deg); }

.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font: 600 13px/1 var(--sans); }
.lang__btn[aria-expanded="true"] { border-color: var(--graphite); }
.lang__chev { width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(45deg); }
.lang__btn[aria-expanded="true"] .lang__chev { transform: rotate(-135deg); margin-top: 3px; }
.lang__list { position: absolute; right: 0; top: 48px; width: 200px; display: flex; flex-direction: column; padding: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(35, 31, 28, .12); z-index: 40; }
.lang__list[hidden] { display: none; }
.lang__list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; font: 500 14px/1 var(--sans); }
.lang__list a span { font: 600 11px/1 var(--sans); color: var(--muted); }
.lang__list a:hover { background: var(--ivory); }
.lang__list a.is-on { background: var(--blush); color: var(--wine); font-weight: 600; }
.lang__list a.is-on span { color: inherit; }

.menu { border-top: 1px solid var(--line); background: var(--ivory); }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; padding-top: 8px; }
.menu__nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font: 500 26px/1 var(--serif); }
.menu__nav a.menu__my { font: 500 14px/1 var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; min-height: 48px; border: 0; }
.menu__foot { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; padding-bottom: 24px; }
.menu__foot .seg__btn { padding: 13px 0; font-size: 13px; color: var(--muted); }
.menu__foot .seg__btn.is-on { color: var(--ivory); }

/* --------------------------------------------------------------------------
   Hero, intro
   -------------------------------------------------------------------------- */

.s--hero { padding: 56px 0 80px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 72px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.hero__title { font: 500 72px/1.02 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.hero__lead { max-width: 520px; font: 400 19px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.hero__offer { padding: 12px 18px; border-radius: 12px; background: var(--blush); color: var(--wine); font: 600 14px/1.4 var(--sans); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__trust { font: 600 14px/1 var(--sans); }
.hero__photo img, .hero__photo .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }

.s--intro { padding: 56px 0 40px; }
.intro__title { font: 500 72px/1.02 var(--serif); letter-spacing: -.01em; text-wrap: pretty; }
.intro__copy { display: flex; flex-direction: column; gap: 20px; }
.intro__lead { max-width: 720px; font: 400 18px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.intro--split { padding-bottom: 96px; }
.intro--split .intro { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.intro--split .intro__title { font-size: 64px; line-height: 1.05; }
.intro--split .intro__lead { max-width: 520px; font-size: 19px; }
.intro__photo img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; width: 100%; }

/* --------------------------------------------------------------------------
   List sections: perks (cards), hygiene (steps), materials (bullets)
   -------------------------------------------------------------------------- */

.list__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.list--n6 .list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.list__item { display: flex; flex-direction: column; gap: 14px; }
.list__n { font: 600 15px/1 var(--serif); color: var(--wine); }
.list__title { font: 600 26px/1.1 var(--serif); }
.list__text { font: 400 14px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.list__text strong { font-weight: 600; color: var(--graphite); }
.list--cards .list__item { padding: 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.list--steps .list__item { gap: 16px; padding: 28px 0 8px; border-top: 1px solid var(--graphite); }
.list--steps .list__n { font: 500 56px/1 var(--serif); }
.list--steps .list__title { font-size: 24px; }
.list--steps .list__text { font-size: 15px; line-height: 1.6; }
.list--steps .s__note { margin-top: 28px; }
.list--n6.list--steps .s__note { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); max-width: none; line-height: 1.6; }
.list--bullets .s__head, .list--bullets .bullets, .list--bullets .s__note { max-width: 760px; }
.list--bullets .s__head { margin-bottom: 24px; }
.list--bullets .s__title { font-size: 44px; }
.list--bullets .s__note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 400; font-size: 13px; }
.bullets { display: flex; flex-direction: column; gap: 10px; }
.bullets li { position: relative; padding-left: 14px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }

/* --------------------------------------------------------------------------
   Price list (Landing accordion) and service cards
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 160px 40px; align-items: center; gap: 16px; padding: 24px 0; }
.acc__name { font: 500 34px/1 var(--serif); }
.acc__count { font: 500 14px/1 var(--sans); color: var(--muted); }
.acc__from { font: 600 15px/1 var(--sans); text-align: right; }
.acc__chev { display: block; width: 14px; height: 14px; justify-self: end; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23231F1C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .2s; }
details[open] > summary .acc__chev, [aria-expanded="true"] > .acc__chev { transform: rotate(180deg); }
.acc__body { display: flex; flex-direction: column; gap: 8px; padding: 0 0 32px; }
.acc__intro { margin-bottom: 12px; font: 400 15px/1.6 var(--sans); color: var(--muted); }
.acc__cta { padding-top: 16px; }
.svc-list { display: flex; flex-direction: column; gap: 8px; }

.svc { background: var(--cream); border: 1px solid var(--line); border-radius: 16px; }
.svc--row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 250px 130px; gap: 24px; align-items: start; padding: 22px 24px; }
.svc__main { display: flex; flex-direction: column; gap: 8px; }
.svc__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc__name h3 { font: 600 16px/1.35 var(--sans); }
.svc__desc { font: 400 14px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.svc__dur { font: 500 14px/1.4 var(--sans); color: var(--muted); }
.svc__prices, .svc__rows { display: flex; flex-direction: column; gap: 6px; }
.svc__price { display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.4 var(--sans); }
.svc__level { color: var(--muted); }
.svc__amount { font-weight: 600; white-space: nowrap; }
.svc__amount s { font-weight: 400; margin-right: 6px; }
.svc__value { font-weight: 500; text-align: right; }
.svc__masters { font: 500 13px/1.4 var(--sans); color: var(--muted); text-align: right; }

.svc--card { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 24px; border-radius: 20px; }
.svc--card .chip--badge { align-self: flex-start; }
.svc__title { font: 600 24px/1.1 var(--serif); text-wrap: pretty; }
.svc--card .svc__desc { flex: 1; }
.svc__rows { padding-top: 14px; border-top: 1px solid var(--line); }
.svc__works { display: flex; flex-direction: column; gap: 10px; }
.svc__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.svc__thumb img, .svc__thumb .ph { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; width: 100%; }
.svc__works .link-chev { font-size: 13px; }
.svc__cta { margin-top: 4px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.price-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 760px; }
.price-notes li { position: relative; padding-left: 20px; font: 400 13px/1.55 var(--sans); color: var(--muted); }
.price-notes li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }

/* Catalogue (Website services) */
.catalog__top { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.catalog__bar { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 14px var(--gutter); background: var(--ivory); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.catalog__cat { padding: 56px 0 24px; }
.catalog__head { display: flex; align-items: end; gap: 32px; margin-bottom: 32px; }
.catalog__title { font: 500 52px/1 var(--serif); }
.catalog__intro { padding-bottom: 6px; font: 400 15px/1.5 var(--sans); color: var(--muted); text-wrap: pretty; }
.catalog__empty { padding: 56px 0 40px; font: 500 21px/1.4 var(--serif); color: var(--muted); }
.catalog__foot { padding-top: 40px; }
.catalog__foot .s__note--big { margin-bottom: 28px; }
.catalog__foot .price-notes { margin-top: 0; }
.catalog__cat.is-hidden, .svc.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Works
   -------------------------------------------------------------------------- */

.work-grid { display: grid; gap: 16px; }
.work-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.work-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work { display: flex; flex-direction: column; gap: 10px; text-align: left; color: var(--muted); }
.work.is-hidden { display: none; }
.work__photo img, .work__photo .ph { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; }
.work__cap { font: 500 13px/1.3 var(--sans); }

.gallery__filters { display: flex; flex-direction: column; gap: 0; margin-bottom: 40px; }
.filter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.filter__label { font: 600 13px/1 var(--sans); color: var(--muted); }
.gallery__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.gallery__count { font: 600 14px/1 var(--sans); }
.gallery__empty { padding: 24px 0 8px; font: 500 21px/1.4 var(--serif); }
.gallery .s__cta { margin-top: 40px; }
.gallery .s__cta[hidden] { display: none; }

.ba { padding-top: 96px; }
.ba .s__title { margin-bottom: 14px; }
.ba .s__note { font-size: 16px; font-weight: 400; margin-bottom: 40px; }
.ba__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ba__pair { position: relative; aspect-ratio: 2 / 3; border-radius: 20px; overflow: hidden; background: var(--ph); border: 1px solid var(--ph-line); user-select: none; --pos: 50%; }
.ba__before, .ba__after { position: absolute; inset: 0; }
.ba__before img, .ba__after img, .ba__before .ph, .ba__after .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; border: 0; }
.ba__before { width: var(--pos); overflow: hidden; border-right: 2px solid var(--cream); z-index: 1; }
.ba__before img, .ba__before .ph { width: calc(100% / (var(--pos-ratio, .5))); max-width: none; }
.ba__tag { position: absolute; left: 12px; top: 12px; z-index: 2; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--cream); color: var(--graphite); }
.ba__tag--r { left: auto; right: 12px; background: var(--graphite); color: var(--ivory); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ba__handle { position: absolute; left: var(--pos); top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--cream); box-shadow: 0 4px 14px rgba(35, 31, 28, .18); display: flex; align-items: center; justify-content: center; gap: 5px; z-index: 2; pointer-events: none; }
.ba__handle::before, .ba__handle::after { content: ''; width: 6px; height: 6px; border-left: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(45deg); }
.ba__handle::after { transform: rotate(-135deg); }

/* Lightbox */
.lb { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: var(--graphite); color: var(--ivory); }
.lb::backdrop { background: rgba(35, 31, 28, .96); }
.lb__top { position: absolute; left: 48px; right: 48px; top: 36px; display: flex; justify-content: space-between; align-items: center; }
.lb__count { font: 500 13px/44px var(--sans); letter-spacing: .06em; color: var(--dark-text); }
.lb__close { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--dark-line-3); font: 600 13px/1 var(--sans); color: var(--ivory); }
/* Lightbox: the photo is always whole (object-fit: contain, the box takes the
   picture's own ratio). Layout A (column: photo, caption, "I want this") is
   the default; layout B (row: photo left, caption column right) applies on
   wide, short windows; admin frames (.lb--wide) always use A with the arrow
   labels hidden (Freelance, 10.10.2026). */
.lb__nav { position: fixed; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1 var(--sans); color: var(--ivory); }
.lb__nav .round { border-color: var(--dark-line-3); }
.lb__nav--prev { left: 64px; }
.lb__nav--next { right: 64px; }
.lb__fig { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; margin: 0; padding: 96px 0 24px; pointer-events: none; } /* No transform here: the arrows are position: fixed and a transformed ancestor would capture them. */
.lb__fig > * { pointer-events: auto; }
.lb__stage, .lb__cap { max-width: min(90vw, 800px); }
.lb__stage { display: flex; align-items: center; justify-content: center; }
.lb__frame img, .lb__frame .ph { display: block; width: auto; height: auto; max-width: min(80vw, 400px); max-height: calc(100vh - 300px); object-fit: contain; border-radius: 16px; background: var(--dark-line); border: 0; color: var(--dark-text); }
.lb__frame .ph { width: 400px; aspect-ratio: 2 / 3; }
.lb__frame .ph--3-4 { aspect-ratio: 3 / 4; width: 450px; }
.lb--wide .lb__fig { max-width: none; }
.lb--wide .lb__frame img { max-width: min(100vw - 250px, 1200px); max-height: calc(100vh - 200px); background: var(--cream); }
.lb--wide .lb__nav-text { display: none; }
.lb__cap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; font: 500 15px/1.4 var(--sans); color: var(--line); text-align: center; }
.lb__gen { width: 100%; font-size: 12.5px; color: var(--muted-2); }
.lb__gen[hidden] { display: none; }
.lb__cap .btn[hidden] { display: none; }
/* Layout B: wide and short (a laptop with docked DevTools, a tablet in landscape). Below 900 px of height the photo in B is never smaller than in A at 900. */
@media (min-width: 900px) and (max-height: 899px) {
	.lb:not(.lb--wide) .lb__fig { flex-direction: row; align-items: center; gap: 32px; }
	.lb:not(.lb--wide) .lb__frame img, .lb:not(.lb--wide) .lb__frame .ph { max-height: min(calc(100vh - 160px), 600px); max-width: 400px; }
	.lb:not(.lb--wide) .lb__cap { width: 320px; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 12px; }
}
/* Layout B on a narrow desktop (900-1099): no room for the arrow labels beside a 320 px caption column (dom-check at 900x640, 10.10). */
@media (min-width: 900px) and (max-width: 1099px) and (max-height: 899px) {
	.lb__nav-text { display: none; }
	.lb:not(.lb--wide) .lb__cap { width: 280px; }
}

/* --------------------------------------------------------------------------
   Masters, profiles, interior
   -------------------------------------------------------------------------- */

.master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.master { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 20px; background: var(--cream); border: 1px solid var(--line); border-radius: 24px; }
.master__photo img, .master__photo .ph { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; }
.master__body { display: flex; flex-direction: column; gap: 14px; padding: 8px 8px 4px 0; }
.master__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.master__name { font: 500 48px/1 var(--serif); }
.master__skills { font: 500 15px/1.5 var(--sans); }
.master__facts { display: flex; flex-direction: column; gap: 8px; }
.master__facts li { position: relative; padding-left: 20px; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.master__facts li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--wine); }
.master .certs { margin-top: auto; }
.masters .s__note--big { margin-top: 28px; }
.certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cert { display: block; width: 100%; }
.cert img, .cert .ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; font-size: 9px; }
.cert:hover .ph { border-color: var(--wine); }
.certs--captioned { gap: 12px; }
.cert-wrap { display: flex; flex-direction: column; gap: 8px; }
.cert-wrap .cert img, .cert-wrap .cert .ph { border-radius: 10px; font-size: 11px; }
.cert__cap { font: 400 12px/1.4 var(--sans); color: var(--muted); }

.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.profile { display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--cream); border: 1px solid var(--line); border-radius: 24px; }
.profile__photo img, .profile__photo .ph { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; }
.profile__body { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.profile__body .kicker { letter-spacing: .14em; margin-bottom: -14px; }
.profile__name { font: 500 52px/1 var(--serif); }
.profile__rows { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 14px/1.5 var(--sans); }
.profile__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.profile__row span:first-child { color: var(--muted); }
.profile__row span:last-child { font-weight: 500; }
.profile__about { font: 400 15px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.profile__h { font: 600 24px/1.1 var(--serif); margin-bottom: -12px; }
.profile__facts { display: flex; flex-direction: column; gap: 8px; counter-reset: fact; width: 100%; }
.profile__facts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font: 400 14px/1.55 var(--sans); color: var(--muted); counter-increment: fact; }
.profile__facts li::before { content: counter(fact); font: 600 16px/1.3 var(--serif); color: var(--wine); }
.profile .certs { width: 100%; }

.interior { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.interior__item { display: flex; flex-direction: column; gap: 12px; }
.interior__item img, .interior__item .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.interior__item figcaption { font: 400 14px/1.5 var(--sans); color: var(--muted); }

/* --------------------------------------------------------------------------
   Promos, gift, reviews, CTA
   -------------------------------------------------------------------------- */

.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.promo { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--cream); border: 1px solid var(--line); border-radius: 24px; }
.promo .chip { align-self: flex-start; padding: 7px 11px; }
.promo__title { font: 500 36px/1.05 var(--serif); }
.promo__text { font: 400 15px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.promos .s__note { margin-top: 24px; font-size: 13px; }

.gift { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding: 56px; background: var(--cream); border: 1px solid var(--line); border-radius: 24px; }
.gift__main { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.gift__main .s__lead { max-width: 540px; }
.gift__main .chip--pick { font-size: 14px; padding: 12px 18px; }
.gift__aside { display: flex; flex-direction: column; gap: 20px; padding-left: 40px; border-left: 1px solid var(--line); }
.gift__how { font: 600 26px/1.1 var(--serif); }
.gift__step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.gift__n { font: 600 18px/1.3 var(--serif); color: var(--wine); }
.gift__terms { padding-top: 20px; border-top: 1px solid var(--line); font: 400 14px/1.6 var(--sans); color: var(--muted); }
.gift__terms strong { font-weight: 600; color: var(--graphite); }
.gift__note { font: 500 13px/1.5 var(--sans); color: var(--wine); }

.modal { width: 480px; max-width: calc(100vw - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--cream); color: var(--graphite); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.modal::backdrop { background: rgba(35, 31, 28, .72); }
.modal__box { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.modal__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.modal__title { font: 500 34px/1 var(--serif); }
.modal__close { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); }
.modal__close span { position: absolute; left: 14px; top: 20.5px; width: 15px; height: 1.5px; background: var(--graphite); }
.modal__close span:first-child { transform: rotate(45deg); }
.modal__close span:last-child { transform: rotate(-45deg); }
.modal__demo { font: 400 12px/1.4 var(--sans); color: var(--muted); text-align: center; }
.modal .field input, .modal .select select { background: var(--ivory); }
.modal .plate[hidden], .modal .field__error[hidden] { display: none; }

.review { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.review__name { font: 600 16px/1 var(--sans); }
.review__stars { font: 400 14px/1 var(--sans); letter-spacing: 2px; color: var(--wine); }
.review__text { flex: 1; font: 500 21px/1.4 var(--serif); text-wrap: pretty; }
.review__meta { padding-top: 14px; border-top: 1px solid var(--line); font: 500 13px/1.5 var(--sans); color: var(--muted); }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review-grid__cell[hidden] { display: none; }
.carousel { overflow: hidden; }
.carousel__track { display: flex; gap: 20px; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .carousel__track { transition: none; } }
.carousel__cell { flex: 0 0 calc((100% - 40px) / 3); }
.carousel__nav { display: flex; gap: 10px; }
.carousel__dots { display: none; justify-content: center; gap: 8px; padding-top: 18px; }
.carousel__dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line-2); transition: width .3s; }
.carousel__dots span.is-on { width: 20px; background: var(--wine); }

.cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 64px; background: var(--wine); border-radius: 24px; color: var(--cream); }
.cta .s__title { color: var(--cream); }
.cta .s__lead { max-width: 560px; font-size: 17px; color: var(--blush); }
.cta .btn { justify-self: end; background: var(--ivory); color: var(--graphite); border-color: var(--ivory); }

/* --------------------------------------------------------------------------
   Landing widget, FAQ, rules, contacts, admin block
   -------------------------------------------------------------------------- */

.s--widget .wrap { display: flex; justify-content: center; }
.widget { width: 640px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.widget__card { display: flex; flex-direction: column; gap: 22px; padding: 36px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.widget__title { font: 500 36px/1 var(--serif); }
.widget__note { font: 400 12px/1.5 var(--sans); color: var(--muted); text-align: center; }
.widget .plate[hidden] { display: none; }
.cal { padding: 18px; border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.cal__head { display: flex; justify-content: space-between; align-items: center; }
.cal__month { font: 600 14px/1 var(--sans); }
.cal__nav { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cal__nav .arrow { width: 8px; height: 8px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__wd { text-align: center; font: 600 11px/1 var(--sans); color: var(--muted); padding: 6px 0; }
.cal__day { height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font: 500 14px/1 var(--sans); }
.cal__day.is-busy { background: #ECE6DF; color: var(--muted-2); cursor: not-allowed; }
.cal__day.is-on { background: var(--wine); color: var(--cream); }
.cal__day.is-pad { visibility: hidden; }
.slots { display: grid; gap: 8px; }
.slots--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.slot { text-align: center; font: 600 14px/1 var(--sans); padding: 13px 0; border-radius: 999px; border: 1px solid var(--line); color: var(--graphite); }
.slot.is-busy { color: var(--muted-2); text-decoration: line-through; cursor: not-allowed; }
.slot.is-on { background: var(--wine); color: var(--cream); border-color: var(--wine); }

.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font: 600 17px/1.4 var(--sans); }
.faq__q .acc__chev { flex: none; }
.faq__a { padding: 0 48px 24px 0; font: 400 15px/1.65 var(--sans); color: var(--muted); text-wrap: pretty; }
.mode-website .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mode-website .faq__q { font: 600 22px/1.2 var(--serif); }

.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rule { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.rule__text { font: 400 15px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.rule__text strong { font-weight: 600; color: var(--graphite); }
.rules .s__cta { justify-content: flex-start; }

.contacts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.contacts__rows { border-top: 1px solid var(--line); }
.contacts__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contacts__k { font: 600 13px/1.5 var(--sans); color: var(--muted); }
.contacts__v { display: flex; flex-direction: column; gap: 4px; font: 500 15px/1.5 var(--sans); text-wrap: pretty; }
.contacts__rows .s__note { margin-top: 20px; font-size: 14px; }
.contacts__map { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contacts__map img { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.shot { display: flex; flex-direction: column; gap: 14px; }
.shot img, .shot .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; font-size: 13px; }
.shot figcaption { font: 400 14px/1.5 var(--sans); color: var(--muted); }
.shot figcaption strong { font-weight: 600; color: var(--graphite); }
.s--admin { padding-bottom: 120px; }

/* Text sections */
.text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.text__body { display: flex; flex-direction: column; gap: 20px; font: 400 17px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.text--box .text { padding: 56px; background: var(--cream); border: 1px solid var(--line); border-radius: 24px; }
.s--text h1.s__title { font-size: 64px; }
.main > .s--text:first-child { padding-top: 56px; }

/* --------------------------------------------------------------------------
   Booking (Website), markup built by assets/js/booking.js
   -------------------------------------------------------------------------- */

.s--booking { padding-bottom: 96px; }
.booking { display: flex; flex-direction: column; gap: 32px; }
.steps { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps__item { flex: 1; display: flex; align-items: center; gap: 10px; padding: 16px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); } /* --muted: 6.4:1 on the ivory page background; --muted-2 gave 2.3:1 (Lighthouse, 11.10). The active step keeps the wine number and underline, a done step the graphite number. */
.steps__n { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--sans); border: 1px solid var(--line-2); }
.steps__label { font: 600 14px/1 var(--sans); }
.steps__item.is-done { color: var(--graphite); }
.steps__item.is-done .steps__n { background: var(--graphite); color: var(--ivory); border-color: var(--graphite); }
.steps__item.is-on { color: var(--graphite); border-bottom-color: var(--wine); }
.steps__item.is-on .steps__n { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.bk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.bk__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 100%; } /* min-width 0: the scrollable day strip must not widen the step (round 2 §1). */
.bk__title { font: 500 44px/1 var(--serif); }
.bk__hint { font: 400 15px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.bk__nav { display: flex; gap: 10px; padding-top: 8px; }
.bk__demo { font: 500 12.5px/1.5 var(--sans); color: var(--muted); }
.sum__bar { display: none; }
.bk__aside { position: sticky; top: 100px; display: flex; flex-direction: column; padding: 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.sum__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.45 var(--sans); }
.sum__k { color: var(--muted); }
.sum__v { font-weight: 600; }
.sum__v.is-empty { color: var(--muted-2); font-weight: 400; }
.sum__edit { font: 500 13px/1.45 var(--sans); color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.bk__title:focus, .done__title:focus, .my__title:focus { outline: none; } /* Headings take the focus after a step change (tabindex -1), no ring (Freelance 11.10 §1.4). */
.bk__cats { border-top: 1px solid var(--line); }
.bk__cat { border-bottom: 1px solid var(--line); }
.bk__cat-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; width: 100%; text-align: left; font: 600 24px/1.1 var(--serif); }
/* Name, counter, chevron: the name gives way, the counter and the chevron never wrap (Freelance 11.10 §2.5). The chevron is the common 14 px one, turned when open. */
.bk__cat-row .acc__chev { width: 8px; height: 8px; } /* 8 px as in the mockup; it turns 180° when open like every other accordion (the former -135° turn drew a diagonal corner). */
.bk__cat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk__cat-right { display: flex; align-items: center; gap: 12px; flex: none; }
.bk__cat-n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--wine); color: var(--cream); font: 600 13px/24px var(--sans); text-align: center; }
.bk__items { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; }
.bk__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px; border-radius: 12px; cursor: pointer; }
.bk__item:hover { background: var(--cream); }
.bk__item.is-on { background: var(--cream); }
.bk__item.is-hidden { display: none; }
.bk__item-name { font: 500 15px/1.35 var(--sans); text-wrap: pretty; }
.bk__item-dur { font: 400 14px/1 var(--sans); color: var(--muted); white-space: nowrap; }
.bk__item-price { text-align: right; font: 600 14px/1 var(--sans); white-space: nowrap; }
.bk__opts { display: flex; flex-direction: column; gap: 10px; }
.bk__error { font: 500 13px/1.4 var(--sans); color: var(--wine); }
.bk__error[hidden] { display: none; }
.master-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mp { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--cream); text-align: left; }
.mp.is-on { border-color: var(--wine); }
.mp.is-blocked { opacity: .55; cursor: default; }
.mp__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mp__name { font: 600 26px/1.1 var(--serif); }
.mp__role { display: block; margin-top: 4px; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wine); }
.mp__radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.mp.is-on .mp__radio { border-color: var(--wine); }
.mp.is-on .mp__radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--wine); }
.mp__desc { font: 400 14px/1.5 var(--sans); color: var(--muted); text-wrap: pretty; }
.mp__exp { font: 600 13px/1 var(--sans); }
.mp__block { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 13px/1.45 var(--sans); color: var(--graphite); }
.mp__block .link-plain { font-size: 13px; }
.days { display: flex; gap: 8px; flex-wrap: wrap; }
.day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 86px; padding: 14px 10px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--cream); color: var(--graphite); }
.day__wd { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.day__date { font: 600 20px/1 var(--serif); }
.day__slots { font: 500 11px/1 var(--sans); white-space: nowrap; opacity: .85; }
.day.is-off { background: transparent; color: var(--muted-2); border-color: var(--line); cursor: not-allowed; }
.day.is-on { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.day.is-full { background: #ECE6DF; color: var(--muted); }
.full-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border-radius: 14px; background: var(--blush); color: var(--wine); font: 500 14px/1.45 var(--sans); }
.slot-groups { display: flex; flex-direction: column; gap: 22px; }
.slot-group { display: flex; flex-direction: column; gap: 12px; }
.slot-group__head { display: flex; align-items: center; gap: 12px; }
.slot-group__name { font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slot-group__tag { font: 600 11px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--blush); color: var(--wine); white-space: nowrap; letter-spacing: 0; text-transform: none; }
.slot-group .slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-group .slot { min-width: 72px; padding: 13px 10px; border-width: 1.5px; }
.slot__who { display: block; font: 500 10.5px/1 var(--sans); margin-top: 4px; color: var(--muted); }
.slot.is-on .slot__who { color: var(--blush); }
.bk__form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.bk__form .field input, .bk__form .field textarea { border-radius: 999px; }
.bk__form .field textarea { border-radius: 14px; }
.bk__form .seg { align-self: flex-start; }
.bk__form .seg__btn { padding: 11px 18px; font-size: 13px; white-space: nowrap; }
.upload { display: flex; align-items: center; justify-content: center; padding: 26px 20px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--cream); font: 500 14px/1.5 var(--sans); color: var(--muted); text-align: center; cursor: pointer; }
.upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.field__error[hidden], .field__hint[hidden] { display: none; }
.deposit-plate { padding: 14px 18px; border: 1.5px solid var(--wine); border-radius: 14px; font: 600 14px/1.45 var(--sans); color: var(--wine); text-wrap: pretty; }
.deposit { max-width: 560px; border-top: 1px solid var(--line); }
.deposit__row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.4 var(--sans); }
.deposit__row span:first-child { color: var(--muted); }
.deposit__row span:last-child { font-weight: 600; white-space: nowrap; }
.deposit__row--big span:last-child { font: 700 17px/1.4 var(--sans); } /* Same face as the neighbouring sums (round 2 §3). */
.done { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.done__main { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.done__title { font: 500 56px/1 var(--serif); }
.card-lines { display: flex; flex-direction: column; width: 100%; padding: 8px 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 20px; }
.card-lines > div { padding: 14px 0; border-top: 1px solid var(--line); font: 500 15px/1.45 var(--sans); text-wrap: pretty; }
.card-lines > div:first-child { border-top: 0; font: 600 22px/1.2 var(--serif); }
.done__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.next { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 28px; background: var(--blush); border-radius: 20px; width: 100%; }
.next h3 { font: 600 26px/1.1 var(--serif); }
.next p { font: 400 15px/1.55 var(--sans); text-wrap: pretty; }
.phone { width: 320px; padding: 14px; border-radius: 44px; background: var(--graphite); box-shadow: 0 20px 50px rgba(35, 31, 28, .18); justify-self: center; }
.phone__screen { border-radius: 32px; background: var(--cream); overflow: hidden; display: flex; flex-direction: column; min-height: 608px; }
.phone__notch { display: flex; justify-content: center; padding: 12px 0 6px; }
.phone__notch span { width: 90px; height: 26px; border-radius: 999px; background: var(--graphite); }
.phone__head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.phone__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--serif); color: var(--wine); }
.phone__name { font: 600 13px/1 var(--sans); }
.phone__body { display: flex; flex-direction: column; gap: 18px; padding: 18px 14px 24px; }
.sms { display: flex; flex-direction: column; gap: 6px; }
.sms__when { align-self: center; font: 500 11px/1 var(--sans); color: var(--muted-2); }
.sms__bubble { padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: #EDE8E1; font: 400 13px/1.45 var(--sans); text-wrap: pretty; }
.booking-my { display: flex; flex-direction: column; gap: 28px; padding-top: 96px; }
.booking-my:empty { display: none; }
.my__title { font: 500 64px/1.02 var(--serif); letter-spacing: -.01em; }
.my__lead { font: 400 17px/1.55 var(--sans); color: var(--muted); }
.my__find { display: flex; align-items: flex-end; gap: 10px; max-width: 560px; }
.my__find .field { flex: 1; }
.my__find .field input { border-radius: 999px; }
.my__result { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.my__actions { display: flex; gap: 10px; }
.confirm { width: 480px; max-width: calc(100vw - 32px); padding: 36px 32px 32px; border: 0; border-radius: 24px; background: var(--cream); color: var(--graphite); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.confirm::backdrop { background: rgba(35, 31, 28, .72); }
.confirm__box { position: relative; display: flex; flex-direction: column; gap: 18px; }
.confirm__close { position: absolute; right: -12px; top: -16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.confirm h3 { padding-right: 48px; font: 600 32px/1.1 var(--serif); }
.confirm p { font: 400 15px/1.55 var(--sans); color: var(--muted); text-wrap: pretty; }
.confirm__actions { display: flex; gap: 10px; padding-top: 8px; }
.confirm__actions .btn { flex: 1; font-size: 14px; padding: 15px 18px; }

/* --------------------------------------------------------------------------
   Footer, sticky CTA
   -------------------------------------------------------------------------- */

.ftr { background: var(--graphite); color: var(--line); padding: 72px 0 32px; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--dark-line); }
.ftr__col { display: flex; flex-direction: column; gap: 12px; }
.ftr__col--brand { gap: 14px; }
.ftr__col--brand p { max-width: 300px; font: 400 14px/1.6 var(--sans); color: var(--dark-text); }
.ftr__logo { font: 600 32px/1 var(--serif); color: var(--ivory); }
.ftr__h { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.ftr__col ul { display: flex; flex-direction: column; gap: 12px; }
.ftr__col li, .ftr__col li a { font: 500 14px/1.4 var(--sans); color: var(--ivory); }
.ftr__col li a { display: inline-block; min-height: 24px; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 24px; font: 400 12.5px/1.5 var(--sans); color: var(--muted-2); }
.ftr__legal a { color: var(--dark-text); display: inline-block; min-height: 24px; }
.ftr__site { margin-left: auto; }
.ftr__site a { color: var(--ivory); }

.sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px 16px; background: var(--ivory); border-top: 1px solid var(--line); }
.sticky__btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px; border-radius: 999px; background: var(--wine); color: var(--cream); font: 600 15px/1 var(--sans); }
.sticky__sub { font: 500 11px/1 var(--sans); color: var(--blush); }
.sticky__sub:empty { display: none; }
body.menu-open .sticky { display: none; }

.e404 { padding-top: 96px; padding-bottom: 160px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	:root { --section: 88px; }
	.s__title { font-size: 52px; }
	.hero { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
	.hero__title { font-size: 56px; }
	.list__grid, .list--n6 .list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.work-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.work-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.master-grid, .profiles, .promo-grid, .rule-grid, .svc-grid, .review-grid, .shots, .interior, .ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.carousel__cell { flex-basis: calc((100% - 20px) / 2); }
	.svc--row { grid-template-columns: minmax(0, 1fr) 90px 200px 110px; gap: 16px; }
	.hdr__nav { gap: 22px; }
	.bk, .done { grid-template-columns: 1fr; }
	.bk__aside { position: static; }
	.phone { justify-self: start; }
	/* Tablet (dom-check at 900, 10.10): a master card at half width left 142 px for four certificate thumbnails; the photo goes above the text. */
	.master { grid-template-columns: 1fr; gap: 20px; }
	.master__photo img, .master__photo .ph { aspect-ratio: 4 / 3; }
	.contacts__v { overflow-wrap: anywhere; }
}

/* --------------------------------------------------------------------------
   Mobile (mockup 390)
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	:root { --section: 64px; }
	.has-sticky .ftr, .has-booking .ftr { padding-bottom: 120px; } /* Room under the sticky CTA / the fixed booking summary bar, in the footer colour (round 1 §11). */
	.s__title { font-size: 42px; line-height: 1; }
	.s__head, .s__head--lead { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
	.s__head--lead .s__lead { padding: 0; font-size: 14px; }
	.s__head--row { align-items: flex-start; }
	.s__head .link-chev { margin: 0; }
	.s__lead { font-size: 14px; }
	.s__note { font-size: 13px; }
	.btn { font-size: 15px; padding: 17px 24px; }
	.btn--outline { padding: 16px 23px; }

	/* bar */
	.bar__row { gap: 6px; padding-top: 10px; padding-bottom: 10px; border-bottom: 0; }
	.bar__label, .bar__info-text, .bar__made { display: none; }
	.bar__switch { padding: 0; border: 0; gap: 6px; }
	.bar__pill { font-size: 12px; padding: 8px 13px; border: 1px solid var(--dark-line-2); }
	.bar__pill.is-on { border-color: var(--ivory); padding: 9px 14px; }
	.bar__info { margin-left: auto; text-decoration: none; }
	.bar__info-i { display: flex; }
	.bar__plate-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
	.bar__plate p { font-size: 12.5px; }
	.bar__hide { align-self: flex-end; }
	.bar__tip { left: 16px; right: 16px; transform: none; max-width: none; }

	/* header */
	.hdr__row { padding-top: 14px; padding-bottom: 14px; }
	.hdr__logo { font-size: 24px; }
	.hdr__tag, .hdr__nav, .hdr__cta, .hdr__my, .lang { display: none; }
	.hdr__burger { display: inline-flex; }
	.hdr__tools { gap: 14px; }

	/* hero */
	.s--hero { padding: 0 0 48px; }
	.s--hero .wrap { padding: 0; }
	.hero { display: flex; flex-direction: column-reverse; gap: 28px; }
	.hero__copy { padding: 0 var(--gutter); gap: 18px; align-items: stretch; }
	.kicker { font-size: 11px; letter-spacing: .14em; line-height: 1.3; }
	.hero__title { font-size: 40px; line-height: 1.05; }
	.hero__lead { font-size: 16px; }
	.hero__offer { font-size: 13px; padding: 12px 14px; }
	.hero__actions { flex-direction: column; gap: 10px; margin: 0; }
	.hero__actions .btn { width: 100%; }
	.hero__photo { width: 100%; }
	.hero__photo img, .hero__photo .ph { height: 420px; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
	.s--intro { padding: 28px 0 20px; }
	.intro__title { font-size: 40px; line-height: 1.05; }
	.intro__lead { font-size: 15px; }
	.intro--split .intro { display: flex; flex-direction: column; gap: 24px; }
	.intro--split .intro__title { font-size: 40px; }
	.intro--split .intro__lead { font-size: 16px; }
	.intro__photo { width: 100%; }
	.main > .s--text:first-child { padding-top: 28px; }

	/* lists */
	.list__grid, .list--n6 .list__grid { grid-template-columns: 1fr; gap: 10px; }
	.list--cards .list__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 12px; padding: 20px; border-radius: 16px; }
	.list--cards .list__n { grid-row: 1 / span 2; font-size: 14px; line-height: 1.6; }
	.list--cards .list__title { font-size: 22px; }
	.list--steps .list__grid { gap: 0; }
	.list--steps .list__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); }
	.list--steps .list__n { grid-row: 1 / span 2; font-size: 40px; }
	.list--steps .list__title { font-size: 20px; }
	.list--steps .list__text { font-size: 14px; }
	.list--steps .s__note { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
	.list--bullets .s__title { font-size: 34px; }

	/* pricelist */
	.acc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 18px 0; min-height: 44px; }
	.acc__name { grid-column: 1; grid-row: 1; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.acc__count { grid-column: 1 / 3; grid-row: 2; font-size: 12.5px; }
	.acc__from { grid-column: 2; grid-row: 1; font-size: 14px; white-space: nowrap; }
	.acc__chev { grid-column: 3; grid-row: 1; }
	.acc__body { padding-bottom: 24px; }
	.acc__intro { font-size: 14px; margin-bottom: 6px; }
	.svc--row { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
	.svc--row .svc__name { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
	.svc--row .svc__name h3 { font-size: 15px; }
	.svc__desc { font-size: 13.5px; }
	.svc--row .svc__prices { padding-top: 10px; border-top: 1px solid var(--line); }
	.svc--row .svc__dur { order: 5; display: flex; justify-content: space-between; font-size: 12.5px; }
	.svc--row .svc__masters { order: 6; text-align: left; font-size: 12.5px; }
	.svc-grid { grid-template-columns: 1fr; gap: 10px; }
	.svc--card { padding: 20px; border-radius: 16px; }
	.svc__title { font-size: 22px; }
	.price-notes li { font-size: 12.5px; }
	.catalog__cat { padding: 36px 0 12px; }
	.catalog__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
	.catalog__title { font-size: 38px; }
	.catalog__bar { padding: 12px var(--gutter); }
	.catalog__empty { padding: 36px 0 24px; font-size: 19px; }

	/* works */
	.work-grid--6, .work-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
	.work__photo img, .work__photo .ph { border-radius: 14px; }
	.work__cap { font-size: 12px; }
	.filter { grid-template-columns: 1fr; gap: 8px; }
	.filter .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
	.ba__grid { grid-template-columns: 1fr; gap: 14px; }
	.ba { padding-top: 64px; }

	/* lightbox */
	.lb__top { left: 20px; right: 20px; top: 20px; }
	/* Phone: the figure fills the band under the top row; the arrows sit beside the photo at its middle (no row of their own), "I want this" spans the width. */
	.lb__fig { padding: 80px 0 16px; gap: 16px; }
	.lb__stage, .lb__cap { max-width: none; }
	.lb__stage { width: 100%; gap: 8px; padding: 0 8px; }
	.lb__nav { position: static; transform: none; flex: none; }
	.lb__nav .round { width: 40px; height: 40px; }
	.lb__nav-text { display: none; }
	.lb__frame img, .lb__frame .ph { max-width: calc(100vw - 112px); max-height: calc(100vh - 250px); }
	.lb__frame .ph { width: calc(100vw - 112px); }
	/* Admin frame on a phone: the frame spans the width, the arrows go under it (Freelance 10.10 §3). */
	.lb--wide .lb__stage { flex-wrap: wrap; gap: 12px 32px; padding: 0 20px; }
	.lb--wide .lb__frame { order: -1; flex: 0 0 100%; display: flex; justify-content: center; }
	.lb--wide .lb__frame img { max-width: calc(100vw - 40px); max-height: calc(100vh - 290px); }
	.lb__cap { font-size: 14px; padding: 0 20px; width: 100%; gap: 10px 16px; }
	.lb__cap .btn { width: 100%; }

	/* masters */
	.master-grid, .profiles { grid-template-columns: 1fr; gap: 14px; }
	.master { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 20px; border-radius: 20px; }
	.master__photo img, .master__photo .ph { aspect-ratio: 4 / 3; border-radius: 12px; }
	.master__body { padding: 0 4px; }
	.master__name { font-size: 38px; }
	.master__skills { font-size: 14px; }
	.master__facts li { font-size: 13.5px; }
	.profile { padding: 20px; }
	.profile__name { font-size: 40px; }
	.certs--captioned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.interior { grid-template-columns: 1fr; gap: 14px; }

	/* promos, gift, reviews, cta */
	.promo-grid { grid-template-columns: 1fr; gap: 10px; }
	.promo { padding: 22px; border-radius: 18px; }
	.promo__title { font-size: 30px; }
	.promo__text { font-size: 14px; }
	.gift { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; border-radius: 20px; }
	.gift__main { gap: 18px; }
	.gift__main .s__title { font-size: 38px; line-height: 1.02; }
	.gift__main .s__lead { font-size: 14px; }
	.gift__main .btn { width: 100%; }
	.gift__aside { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 14px; }
	.gift__how { font-size: 22px; }
	.gift__step { font-size: 13.5px; }
	.modal { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; margin: 0; border-radius: 24px 24px 0 0; }
	.review-grid { grid-template-columns: 1fr; gap: 10px; }
	.review { padding: 22px; border-radius: 18px; }
	.review__text { font-size: 19px; }
	.carousel__nav { display: none; }
	.carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
	.carousel::-webkit-scrollbar { display: none; }
	.carousel__track { gap: 12px; transform: none !important; }
	.carousel__cell { flex: 0 0 350px; max-width: calc(100vw - 60px); scroll-snap-align: start; }
	.carousel__dots { display: flex; }
	.cta { display: flex; flex-direction: column; gap: 16px; padding: 32px 24px; border-radius: 20px; }
	.cta .s__lead { font-size: 15px; }
	.cta .btn { width: 100%; margin-top: 6px; }

	/* widget, faq, rules, contacts, admin */
	.widget__card { padding: 22px 18px; gap: 20px; border-radius: 18px; }
	.widget__title { font-size: 30px; line-height: 1.05; }
	.slots--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cal { padding: 12px; }
	.cal__day { height: 40px; font-size: 13.5px; }
	.faq { display: flex; flex-direction: column; gap: 20px; }
	.faq__q { padding: 18px 0; gap: 16px; font-size: 15px; min-height: 44px; }
	.mode-website .faq__q { font-size: 19px; }
	.faq__a { padding: 0 0 20px; font-size: 14px; }
	.rule-grid { grid-template-columns: 1fr; gap: 10px; }
	.rule { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 18px; border-radius: 16px; }
	.rule .list__n { font-size: 14px; line-height: 1.6; }
	.rule__text { font-size: 14px; }
	.contacts { display: flex; flex-direction: column; gap: 20px; }
	.contacts__row { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; }
	.contacts__k { font-size: 12px; }
	.contacts__v { font-size: 14.5px; }
	.contacts__map img, .ph--map { height: 220px; border-radius: 16px; }
	.shots { grid-template-columns: 1fr; gap: 20px; }
	.text { display: flex; flex-direction: column; gap: 16px; }
	.text__body { font-size: 15px; }
	.text--box .text { padding: 24px 20px; }
	.s--text h1.s__title { font-size: 40px; }

	/* booking */
	.steps { overflow-x: auto; scrollbar-width: none; }
	.steps__item { flex: none; padding: 14px 10px 14px 0; }
	.steps__label { font-size: 13px; }
	.bk__title { font-size: 34px; }
	.s--booking { padding-bottom: 120px; }
	.bk__aside { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 25; padding: 0; border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(35, 31, 28, .14); }
	.sum__bar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 20px; font: 500 14px/1 var(--sans); text-align: left; }
	.sum__bar-v { margin-left: auto; font-weight: 600; }
	.sum__rows { display: none; padding: 0 20px 12px; max-height: 60vh; overflow: auto; }
	.bk__aside.is-open .sum__rows { display: block; }
	.sum__row { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr) auto; font-size: 13.5px; }
	.sum__row--price { display: none; } /* The bar itself shows the price (round 2 §4). */
	.e404 { padding-top: 56px; padding-bottom: 96px; }
	.bk__item { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 12px; }
	.bk__item-dur, .bk__item-price { grid-column: 2; text-align: left; }
	.master-pick { grid-template-columns: 1fr; }
	.days { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
	.done__title { font-size: 44px; }
	.phone { width: 100%; max-width: 320px; }
	.my__title { font-size: 40px; }
	.my__find { flex-direction: column; align-items: stretch; }
	.confirm { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; margin: 0; border-radius: 24px 24px 0 0; }
	.confirm__actions { flex-direction: column; }

	/* footer, sticky */
	.ftr { padding: 44px 0 28px; }
	.ftr__grid { display: flex; flex-direction: column; gap: 32px; padding-bottom: 0; border: 0; }
	.ftr__logo { font-size: 30px; }
	.ftr__h { font-size: 11px; }
	.ftr__col li, .ftr__col li a { font-size: 15px; }
	.ftr__legal { flex-direction: column; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-size: 12px; }
	.ftr__site { margin-left: 0; }
	.sticky { display: block; }
}

@media (max-width: 420px) {
	.hdr__burger-text { display: none; }
	.hdr__burger { width: 44px; padding: 0; justify-content: center; border-color: var(--line); }
}

/* Print: no chrome */
/* Phone on its side (844×390, 667×375): layout A would leave the photo under
   200 px, so layout B applies whenever the window is wider than tall and
   under 500 px tall (Freelance 10.10 §4). Arrows at the edges without labels,
   caption column 240 px. */
@media (orientation: landscape) and (max-height: 499px) and (min-width: 560px) {
	.lb__top { left: 20px; right: 20px; top: 14px; }
	.lb__fig { padding: 66px 0 10px; gap: 16px; }
	.lb:not(.lb--wide) .lb__fig { flex-direction: row; align-items: center; gap: 24px; }
	.lb__stage { width: auto; padding: 0; gap: 0; }
	.lb__nav { position: fixed; top: 50%; transform: translateY(-50%); }
	.lb__nav .round { width: 44px; height: 44px; }
	.lb__nav--prev { left: 24px; }
	.lb__nav--next { right: 24px; }
	.lb__nav-text { display: none; }
	.lb:not(.lb--wide) .lb__frame img, .lb:not(.lb--wide) .lb__frame .ph { max-height: calc(100vh - 90px); max-width: calc(100vw - 440px); }
	.lb:not(.lb--wide) .lb__cap { width: 240px; padding: 0; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 10px; font-size: 13.5px; }
	.lb:not(.lb--wide) .lb__cap .btn { width: auto; }
	.lb--wide .lb__stage { flex-wrap: nowrap; padding: 0; }
	.lb--wide .lb__frame { flex: 0 1 auto; }
	.lb--wide .lb__frame img { max-width: calc(100vw - 160px); max-height: calc(100vh - 140px); }
	.lb--wide .lb__cap { padding: 0 80px; }
}

@media print {
	.bar, .hdr, .sticky, .lb, .modal { display: none !important; }
}