/* ==========================================================================
   Aura - private in-residence massage, Da Nang
   Black & gold single-page design system
   ========================================================================== */

:root {
	/* Ground */
	--black:      #08080a;
	--surface:    #101013;
	--surface-2:  #16161a;
	--surface-3:  #1d1d22;

	/* Gold */
	--gold:       #d4af37;
	--gold-light: #e9d18b;
	--gold-pale:  #f2e3b6;
	--gold-deep:  #9c7c25;
	--gold-dim:   rgba(212, 175, 55, 0.14);
	--gold-faint: rgba(212, 175, 55, 0.07);

	/* Ink */
	--text:       #f4f1ea;
	--text-soft:  #b8b3a9;
	--text-mute:  #86817a;
	--text-faint: #5c5852;

	/* Lines */
	--line:       rgba(244, 241, 234, 0.09);
	--line-gold:  rgba(212, 175, 55, 0.22);

	/* Type */
	--display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Shape */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 14px;
	--r-full: 999px;

	/* Layout */
	--wrap: 1240px;
	--gutter: 22px;
	--header-h: 76px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ----------------------------------------------------------- reset/base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
	margin: 0;
	-webkit-tap-highlight-color: transparent;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text-soft);
	background: var(--black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--display);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--text);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
	outline: 1px solid var(--gold);
	outline-offset: 3px;
}

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

/* --------------------------------------------------------------- layout */

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

.section { padding-block: 110px; }
.section--tight { padding-block: 76px; }

/* the roster sits directly under the hero, so it leads with less air than the
   sections further down; its heading has to be visible on landing */
#therapists { padding-top: 76px; }

/* hairline divider between sections */
.rule {
	height: 1px;
	background: var(--line-gold);
}

/* ------------------------------------------------------------- headings */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
}

.eyebrow::before {
	content: "";
	width: 30px; height: 1px;
	background: var(--gold);
	opacity: .55;
}

.eyebrow--center::after {
	content: "";
	width: 30px; height: 1px;
	background: var(--gold);
	opacity: .55;
}

.section-head { max-width: 660px; margin-bottom: 56px; }

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }

.section-title {
	font-size: clamp(32px, 4.4vw, 52px);
}

.section-title em {
	font-style: italic;
	color: var(--gold-light);
}

.section-sub {
	margin-top: 20px;
	font-size: 16.5px;
	color: var(--text-mute);
	line-height: 1.75;
}

/* --------------------------------------------------------------- buttons */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: var(--r-full);
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: all .35s var(--ease);
}

.btn--gold {
	background: var(--gold);
	color: #0b0b0c;
	box-shadow: 0 0 0 rgba(212, 175, 55, 0);
}

.btn--gold:hover {
	box-shadow: 0 6px 28px rgba(212, 175, 55, 0.26);
	transform: translateY(-2px);
}

.btn--outline {
	background: transparent;
	border-color: var(--line-gold);
	color: var(--gold-light);
}

.btn--outline:hover {
	border-color: var(--gold);
	background: var(--gold-faint);
	transform: translateY(-2px);
}

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--text-soft);
}

.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.btn--sm { padding: 10px 20px; font-size: 11px; letter-spacing: 0.12em; }
.btn--lg { padding: 17px 40px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- header */

.header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	transition: background-color .4s var(--ease), border-color .4s var(--ease),
		backdrop-filter .4s var(--ease);
	border-bottom: 1px solid transparent;
}

.header[data-stuck="true"] {
	background: rgba(8, 8, 10, 0.86);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border-bottom-color: var(--line-gold);
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: var(--header-h);
}

/* logo */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex-shrink: 0;
}

.logo__mark {
	position: relative;
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-gold);
	border-radius: 50%;
	color: var(--gold);
	transition: border-color .35s var(--ease), transform .5s var(--ease);
}

.logo:hover .logo__mark {
	border-color: var(--gold);
	transform: rotate(8deg);
}

.logo__text { display: flex; flex-direction: column; line-height: 1; }

.logo__name {
	font-family: var(--display);
	font-size: 25px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--text);
}

.logo__tag {
	margin-top: 4px;
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--gold);
	opacity: .85;
}

/* nav */
.nav {
	display: flex;
	align-items: center;
	gap: 38px;
	margin-left: auto;
}

.nav__link {
	position: relative;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-mute);
	transition: color .3s var(--ease);
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: -7px;
	width: 0; height: 1px;
	background: var(--gold);
	transition: width .35s var(--ease);
}

.nav__link:hover { color: var(--gold-light); }
.nav__link:hover::after { width: 100%; }

.header__cta { flex-shrink: 0; }

/* only shown inside the mobile drawer */
.nav__cta { display: none; }

/* ------------------------------------------------------ language switch */

.lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
}

.lang__opt {
	padding: 6px 10px;
	border-radius: var(--r-full);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--text-mute);
	transition: color .3s var(--ease), background-color .3s var(--ease);
}

.lang__opt:hover { color: var(--gold-light); }

.lang__opt[aria-current="page"] {
	background: var(--gold);
	color: #0b0b0c;
}

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
	place-items: center;
	transition: border-color .3s var(--ease);
}

.nav-toggle:hover { border-color: var(--gold); }

/* ------------------------------------------------------------------ hero */

.hero {
	position: relative;
	/* deliberately under a full screen so the roster below shows on landing */
	min-height: 78svh;
	display: flex;
	align-items: center;
	padding-top: var(--header-h);
	overflow: hidden;
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	padding-block: 36px 44px;
}

.hero__copy {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.hero__title {
	font-size: clamp(33px, 4vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

.hero__title em {
	display: block;
	font-style: italic;
	color: var(--gold-light);
}

.hero__lede {
	margin-top: 18px;
	margin-inline: auto;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-mute);
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

.hero__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
	font-size: 12.5px;
	color: var(--text-faint);
}

.dot-live {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
	animation: breathe 2.6s ease-in-out infinite;
}

@keyframes breathe {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16); }
	50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.04); }
}

/* hero stat rail */
.hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	max-width: 540px;
	margin: 28px auto 0;
	background: var(--line);
	border-block: 1px solid var(--line);
}

.hstat {
	padding: 16px 6px 14px;
	background: var(--black);
}

.hstat__num {
	font-family: var(--display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: var(--gold-light);
}

.hstat__label {
	margin-top: 8px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* --------------------------------------------------------------- monogram */

.mono {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--surface-3);
	border: 1px solid var(--line-gold);
	font-family: var(--display);
	font-weight: 500;
	color: var(--gold-light);
	letter-spacing: 0.02em;
}

.mono--sm { width: 46px; height: 46px; font-size: 17px; }

/* ------------------------------------------------------------- therapists */

.roster-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 34px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--line);
}

/* height filter: two native range inputs sharing one rail */
.range {
	flex: 1 1 280px;
	max-width: 360px;
	min-width: 0;
}

.range__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 9px;
}

.range__label {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.range__value {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--gold-light);
}

.range__track { position: relative; height: 26px; }

.range__rail, .range__fill {
	position: absolute;
	top: 50%;
	height: 3px;
	margin-top: -2px;
	border-radius: 2px;
	pointer-events: none;
}

.range__rail { left: 0; right: 0; background: var(--surface-3); }
.range__fill { background: var(--gold); }

/* the inputs are invisible hit layers; only their thumbs are grabbable, so
   the one underneath is still reachable */
.range__input {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.range__input::-webkit-slider-runnable-track { background: transparent; border: 0; }
.range__input::-moz-range-track { background: transparent; border: 0; }

.range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--gold);
	border: 2px solid var(--black);
	cursor: pointer;
	pointer-events: auto;
}

.range__input::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--gold);
	border: 2px solid var(--black);
	cursor: pointer;
	pointer-events: auto;
}

.range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--gold-light); outline-offset: 2px; }

[data-range-min] { z-index: 2; }
[data-range-max] { z-index: 3; }

.bar-spacer { margin-left: auto; }

.count-line {
	font-size: 12.5px;
	letter-spacing: 0.08em;
	color: var(--text-faint);
}

.count-line b {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 500;
	color: var(--gold-light);
	letter-spacing: 0;
}

.select {
	padding: 10px 38px 10px 16px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-soft);
	appearance: none;
	cursor: pointer;
	transition: border-color .3s var(--ease);
}

.select:hover { border-color: var(--line-gold); }
.select option { background: var(--surface-2); color: var(--text); }

/* grid */
.roster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 22px;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color .4s var(--ease), transform .4s var(--ease),
		box-shadow .4s var(--ease);
}

.card:hover {
	border-color: var(--line-gold);
	transform: translateY(-5px);
	box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}

.card__top {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--surface-3);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

/* the source photos vary between 3:4 and 9:16, so crop rather than letterbox */
.card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	transition: transform .6s var(--ease);
}

.card:hover .card__photo { transform: scale(1.04); }

.card__flag {
	position: absolute;
	top: 12px; left: 12px;
	padding: 5px 11px;
	border: 1px solid var(--line-gold);
	border-radius: var(--r-full);
	background: rgba(8, 8, 10, 0.72);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--gold-light);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px 18px;
	flex: 1;
}

/* the roster carries no names, so the reference is the heading */
.card__ref {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold);
}

.card__size {
	font-family: var(--display);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--text);
}

.card__size span { color: var(--text-faint); }

.card__born {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--text-mute);
}

.card__foot {
	display: flex;
	margin-top: auto;
	padding-top: 15px;
}

.card__book {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 18px;
	border: 1px solid var(--line-gold);
	border-radius: var(--r-full);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--gold-light);
	white-space: nowrap;
	transition: all .3s var(--ease);
}

.card__book:hover {
	background: var(--gold);
	border-color: var(--gold);
	color: #0b0b0c;
}

/* empty + load more */
.empty {
	grid-column: 1 / -1;
	padding: 80px 24px;
	text-align: center;
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
}

.empty__title {
	font-family: var(--display);
	font-size: 26px;
	color: var(--text);
	margin-bottom: 10px;
}

.empty__text { color: var(--text-mute); margin-bottom: 26px; }

/* ------------------------------------------------------------------ steps */

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.step {
	position: relative;
	padding: 46px 38px 44px;
	background: var(--surface);
	transition: background-color .4s var(--ease);
}

.step + .step { border-left: 1px solid var(--line); }
.step:hover { background: var(--surface-2); }

.step__num {
	font-family: var(--display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--gold);
	margin-bottom: 22px;
}

.step__title {
	font-size: 27px;
	margin-bottom: 12px;
}

.step__text {
	font-size: 15px;
	color: var(--text-mute);
	line-height: 1.75;
}

/* ------------------------------------------------------------- assurances */

.assure {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 44px 34px;
}

.assure__item { }

.assure__icon {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	border: 1px solid var(--line-gold);
	border-radius: 50%;
	color: var(--gold);
}

.assure__title {
	font-size: 21px;
	margin-bottom: 9px;
}

.assure__text {
	font-size: 14.5px;
	color: var(--text-mute);
	line-height: 1.75;
}

/* ---------------------------------------------------------------- quotes */

.quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.quote {
	display: flex;
	flex-direction: column;
	padding: 36px 32px 30px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: border-color .4s var(--ease);
}

.quote:hover { border-color: var(--line-gold); }

.quote__mark {
	font-family: var(--display);
	font-size: 56px;
	line-height: .7;
	color: var(--gold);
	opacity: .4;
	margin-bottom: 18px;
}

.quote__text {
	font-family: var(--display);
	font-size: 20px;
	font-style: italic;
	line-height: 1.55;
	color: var(--text);
	margin-bottom: 26px;
}

.quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.quote__name { font-size: 13.5px; font-weight: 600; color: var(--text-soft); }
.quote__meta { font-size: 11.5px; color: var(--text-faint); }

/* -------------------------------------------------------------- telegram */

.tg-panel {
	position: relative;
	overflow: hidden;
	padding: 72px 64px;
	border: 1px solid var(--line-gold);
	border-radius: var(--r-lg);
	background: var(--surface);
}

.tg-panel::after {
	content: "";
	position: absolute;
	top: -46%; right: -8%;
	width: 440px; height: 440px;
	border: 1px solid var(--gold-dim);
	border-radius: 50%;
	pointer-events: none;
}

.tg-panel__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 52px;
	align-items: center;
}

.tg-panel__title { font-size: clamp(30px, 3.6vw, 44px); }

.tg-panel__text {
	margin-top: 20px;
	max-width: 46ch;
	font-size: 16px;
	color: var(--text-mute);
	line-height: 1.8;
}

.tg-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tg-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	background: rgba(8, 8, 10, 0.5);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	transition: all .35s var(--ease);
}

.tg-card:hover {
	border-color: var(--gold);
	background: var(--gold-faint);
	transform: translateX(5px);
}

.tg-card__icon {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--gold);
	color: #0b0b0c;
}

.tg-card__label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.tg-card__value {
	display: block;
	font-family: var(--display);
	font-size: 21px;
	color: var(--text);
	line-height: 1.25;
}

.tg-card__arrow { margin-left: auto; color: var(--text-faint); transition: color .3s var(--ease); }
.tg-card:hover .tg-card__arrow { color: var(--gold); }

/* -------------------------------------------------------------------- faq */

.faq { max-width: 840px; margin-inline: auto; }

.faq__item {
	border-bottom: 1px solid var(--line);
	transition: border-color .3s var(--ease);
}

.faq__item[data-open="true"] { border-bottom-color: var(--line-gold); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 26px 4px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--display);
	font-size: 23px;
	font-weight: 400;
	color: var(--text);
	cursor: pointer;
	transition: color .3s var(--ease);
}

.faq__q:hover { color: var(--gold-light); }

.faq__icon {
	flex-shrink: 0;
	width: 30px; height: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-gold);
	border-radius: 50%;
	color: var(--gold);
	transition: transform .4s var(--ease), background-color .3s var(--ease);
}

.faq__q[aria-expanded="true"] .faq__icon {
	transform: rotate(135deg);
	background: var(--gold-faint);
}

.faq__a {
	display: none;
	padding: 0 60px 30px 4px;
	font-size: 15.5px;
	color: var(--text-mute);
	line-height: 1.8;
}

.faq__item[data-open="true"] .faq__a { display: block; }

/* ----------------------------------------------------------------- footer */

.footer {
	padding-block: 64px 34px;
	border-top: 1px solid var(--line-gold);
	background: var(--surface);
}

.footer__top {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr;
	gap: 56px;
	padding-bottom: 48px;
}

.footer__about {
	margin-top: 22px;
	max-width: 40ch;
	font-size: 14.5px;
	color: var(--text-mute);
	line-height: 1.8;
}

.footer__col-title {
	margin-bottom: 22px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}

.footer__list { display: grid; gap: 13px; font-size: 14.5px; }
.footer__list a { color: var(--text-mute); transition: color .3s var(--ease); }
.footer__list a:hover { color: var(--gold-light); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: space-between;
	align-items: center;
	padding-top: 30px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--text-faint);
}

/* ---------------------------------------------------------- photo viewer */

.lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 8, 0.985);
	padding: 62px 12px calc(18px + env(safe-area-inset-bottom, 0px));
}

.lb[data-open="true"] { display: flex; }

/* the viewer locks the page at every width, unlike the drawer */
body.lb-open { overflow: hidden; }

.lb__bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px var(--gutter);
}

.lb__count {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold);
}

.lb__btn, .lb__nav {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text-soft);
	cursor: pointer;
	transition: border-color .3s var(--ease), color .3s var(--ease);
}

.lb__btn:hover, .lb__nav:hover { border-color: var(--gold); color: var(--gold-light); }

.lb__nav { flex: none; }

/* the stage keeps its own click target so only the backdrop closes */
.lb__stage {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 0;
	max-width: min(100%, 760px);
	margin-inline: 10px;
}

/* A percentage max-height would resolve against an indefinite parent and be
   ignored, letting a 1280px-tall photo run off screen. Bound it to the
   viewport instead, minus the bar above and the padding below. */
.lb__media {
	max-width: 100%;
	max-height: calc(100svh - 92px);
	width: auto;
	height: auto;
	border-radius: var(--r-md);
	object-fit: contain;
}

@media (max-width: 780px) {
	/* arrows would crowd a phone; the counter plus swiping carries it */
	.lb__nav { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
	.lb__nav--prev { left: var(--gutter); }
	.lb__nav--next { right: var(--gutter); }
	.lb { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
	.lb__stage { margin-inline: 0; }
	/* the arrows sit along the bottom on a phone, so leave room for them */
	.lb__media { max-height: calc(100svh - 150px); }
}

/* ------------------------------------------------------- mobile contact */

/* Phones lose every booking CTA once the hero scrolls off, so one bar stays
   pinned to the bottom from there on. Shown only below 780px, where the
   floating button steps aside so the two never stack. */
.contactbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--surface);
	border-top: 1px solid var(--line-gold);
	box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.5);
	transform: translateY(115%);
	transition: transform .32s var(--ease);
}

.contactbar[data-visible="true"] { transform: none; }

.contactbar__note {
	flex: none;
	font-size: 9.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.contactbar__alt {
	flex: none;
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border: 1px solid var(--line-gold);
	border-radius: 50%;
	color: var(--gold-light);
}

.contactbar__cta { flex: 1; padding-inline: 14px; }

/* the open nav drawer owns the screen; the bar would float over it */
body.nav-open .contactbar,
body.lb-open .contactbar { transform: translateY(115%); }

/* --------------------------------------------------------- floating CTA */

.fab {
	position: fixed;
	right: 26px; bottom: 26px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 15px 24px 15px 18px;
	border-radius: var(--r-full);
	background: var(--gold);
	color: #0b0b0c;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(212, 175, 55, 0.2);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.fab:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.6), 0 0 34px rgba(212, 175, 55, 0.34);
}

/* ------------------------------------------------------------ reveal-in */

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal[data-seen="true"] { opacity: 1; transform: none; }

/* ---------------------------------------------------------- small type */

.hstat__unit { font-size: 20px; }

.tg-note {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--text-faint);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
	.assure { grid-template-columns: repeat(2, 1fr); }
	.quotes { grid-template-columns: 1fr; }
	.tg-panel__inner { grid-template-columns: 1fr; gap: 40px; }
	.steps { grid-template-columns: 1fr; }
	.step + .step { border-left: 0; border-top: 1px solid var(--line); }
	.footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
	.tg-panel { padding: 56px 40px; }
}

/* ------------------------------------------------------ phones/tablets */

@media (max-width: 780px) {
	:root { --header-h: 64px; --gutter: 18px; }

	/* --- header + drawer nav --- */
	.nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc(100svh - var(--header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
		background: rgba(8, 8, 10, 0.97);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		border-bottom: 1px solid var(--line-gold);
		display: none;
	}

	.nav[data-open="true"] { display: flex; }
	.nav__cta { display: inline-flex; }

	.nav__link {
		padding: 17px 2px;
		font-size: 13px;
		border-bottom: 1px solid var(--line);
	}

	.nav__link::after { display: none; }

	/* the drawer gets its own Telegram button so the CTA is never lost */
	.nav__cta { margin-top: 18px; }

	.nav-toggle { display: grid; margin-left: 0; }
	.lang { margin-left: auto; }
	.lang__opt { padding: 6px 8px; font-size: 9.5px; letter-spacing: 0.08em; }
	.header__cta { display: none; }
	.header__inner { gap: 14px; }

	body.nav-open { overflow: hidden; }

	/* --- rhythm --- */
	.section { padding-block: 64px; }
	.section--tight { padding-block: 48px; }
	.section-head { margin-bottom: 34px; }
	.section-title { font-size: clamp(27px, 7.4vw, 38px); }
	.section-sub { margin-top: 14px; font-size: 15px; line-height: 1.7; }
	.eyebrow { margin-bottom: 16px; font-size: 10px; letter-spacing: 0.26em; }
	.eyebrow::before, .eyebrow--center::after { width: 20px; }

	/* --- hero --- */
	.hero { min-height: 0; }
	.hero__inner { padding-block: 26px 32px; }
	.hero__title { font-size: clamp(28px, 7.2vw, 38px); line-height: 1.08; }
	.hero__lede { margin-top: 14px; font-size: 14.5px; line-height: 1.6; }

	/* side by side, not stacked: two full-width buttons cost a third of the fold */
	.hero__cta { gap: 9px; margin-top: 22px; flex-wrap: nowrap; }
	.hero__cta .btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 14px 8px;
		font-size: 10.5px;
		letter-spacing: 0.07em;
	}

	/* the stat rail already says "every day"; this line goes first when the
	   fold is tight */
	.hero__note { display: none; }

	/* keep the three proof numbers on one row instead of a tall stack */
	.hero__stats { grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
	.hstat { padding: 12px 4px 11px; text-align: center; }
	.hstat__num { font-size: 23px; }
	.hstat__unit { font-size: 13px; }
	.hstat__label { margin-top: 5px; font-size: 8.5px; letter-spacing: 0.09em; }

	/* an id beats .section, so this has to be restated for phones */
	#therapists { padding-top: 44px; }

	/* --- roster controls --- */
	.roster-bar { gap: 12px; margin-bottom: 22px; padding-bottom: 18px; }
	.bar-spacer { display: none; }

	/* slider and sort each take a full row on a phone */
	.range { flex: 1 1 100%; max-width: none; }
	.range__track { height: 30px; }
	.range__input { height: 30px; }
	.roster-bar .select { flex: 1 1 100%; text-align: left; }

	.select { padding: 12px 34px 12px 14px; font-size: 10.5px; }

	/* --- cards --- */
	.roster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.card__body { padding: 13px 12px 15px; gap: 4px; }
	.card__ref { font-size: 9px; letter-spacing: 0.16em; }
	.card__size { font-size: 17px; }
	.card__born { font-size: 11px; }
	.card__foot { padding-top: 12px; }
	.card__book { padding: 12px 10px; font-size: 10px; letter-spacing: 0.1em; }
	.card__flag { top: 9px; left: 9px; padding: 4px 8px; font-size: 8px; }
	.count-line { font-size: 11.5px; }

	/* --- content blocks --- */
	.step { padding: 30px 20px; }
	.step__title { font-size: 23px; }
	.step__text { font-size: 14.5px; }

	.assure { grid-template-columns: 1fr; gap: 30px; }
	.assure__icon { width: 40px; height: 40px; margin-bottom: 15px; }
	.assure__title { font-size: 19px; }
	.assure__text { font-size: 14px; }

	.quote { padding: 26px 22px 24px; }
	.quote__mark { font-size: 44px; margin-bottom: 12px; }
	.quote__text { font-size: 17.5px; margin-bottom: 20px; }

	.tg-panel { padding: 34px 20px; }
	.tg-panel::after { display: none; }
	.tg-panel__text { margin-top: 14px; font-size: 15px; line-height: 1.7; }
	.tg-card { gap: 12px; padding: 15px 16px; }
	.tg-card__icon { width: 38px; height: 38px; }
	.tg-card__value { font-size: 15px; letter-spacing: 0; overflow-wrap: anywhere; }

	.faq__q { gap: 16px; padding: 21px 2px; font-size: 18px; }
	.faq__a { padding: 0 8px 24px 2px; font-size: 14.5px; line-height: 1.7; }

	.footer { padding-block: 48px 26px; }
	.footer__top { grid-template-columns: 1fr; gap: 32px; padding-bottom: 34px; }
	.footer__about { margin-top: 16px; font-size: 14px; }
	.footer__bottom { font-size: 11.5px; }

	/* the bar replaces the floating button on phones */
	.contactbar { display: flex; }
	.fab { display: none; }

	/* keep the last footer line clear of the pinned bar */
	.footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------- small phones */

@media (max-width: 400px) {
	:root { --gutter: 15px; }

	.logo__mark { width: 33px; height: 33px; }
	.logo__name { font-size: 21px; }
	.logo__tag { font-size: 7.5px; letter-spacing: 0.24em; }

	/* a 640px-tall phone is the tightest fold we support, so the hero is
	   trimmed again here to keep the roster heading in view */
	.hero__inner { padding-block: 20px 24px; }
	.hero__title { font-size: 27px; }
	.hero__lede { font-size: 14px; }
	.hstat__num { font-size: 21px; }
	.hstat__label { font-size: 8px; letter-spacing: 0.07em; }

	.card__size { font-size: 16px; }
	.card__book { font-size: 9.5px; letter-spacing: 0.08em; }

	.faq__q { font-size: 16.5px; }
	.quote__text { font-size: 16.5px; }
	.step__title { font-size: 21px; }

	.tg-card { gap: 10px; padding: 14px; }
	.tg-card__icon { width: 34px; height: 34px; }
	.tg-card__value { font-size: 13px; }

	/* at 360px the note and both buttons no longer fit together */
	.contactbar { gap: 8px; }
	.contactbar__note { display: none; }
	.contactbar__alt { width: 44px; height: 44px; }
	.contactbar__cta { font-size: 11.5px; }
}

/* --------------------------------------------------------- touch input */

@media (hover: none) {
	/* hover states stick after a tap on touch devices, so drop them */
	.card:hover {
		transform: none;
		box-shadow: none;
		border-color: var(--line);
	}
	.card:hover .card__photo { transform: none; }
	.logo:hover .logo__mark { transform: none; }
	.btn--gold:hover, .btn--outline:hover, .btn--ghost:hover {
		transform: none;
		box-shadow: none;
	}
	.tg-card:hover { transform: none; }

	/* give a tap something to answer with instead */
	.card:active { transform: scale(0.985); }
	.btn:active, .select:active,
	.card__book:active, .tg-card:active, .faq__q:active { opacity: 0.75; }
}

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