/* ==========================================================================
   Veloura Models
   Dark editorial directory with a magenta accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kodchasan — self-hosted

   Served from the theme rather than Google's CDN: no third-party request on
   every page view, nothing to disclose under GDPR, and the type still renders
   if fonts.gstatic.com is blocked or slow.

   Latin and Latin Extended only. The Thai and Vietnamese subsets Google also
   ships are ~90 KB of glyphs this site will never render. unicode-range means
   the browser downloads Latin Extended only if a page actually needs it.

   Kodchasan by Cadson Demak, SIL Open Font License 1.1 — see assets/fonts/OFL.txt.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kodchasan-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kodchasan-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Kodchasan";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kodchasan-400-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kodchasan";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kodchasan-400-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/kodchasan-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/kodchasan-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/kodchasan-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/kodchasan-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/kodchasan-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kodchasan";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/kodchasan-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	/*
	 * Three magentas, because one colour cannot do all three jobs and clear
	 * WCAG AA. --pink is the fill behind white text (4.96:1); --pink-on-dark
	 * and --pink-on-light are the text colours, light enough on the charcoal
	 * and dark enough on a white card respectively. --pink-bright is reserved
	 * for hover states, dots and focus rings, where no text sits on it.
	 */
	--pink: #d80c76;
	--pink-bright: #ff2d95;
	--pink-deep: #b30d62;
	--pink-on-dark: #ff5faa;
	--pink-on-light: #d40f74;

	/* Charcoal texture supplied with the design. Its mean value is #313131, so
	   --ink matches it: nothing flashes a different colour before it loads. */
	--texture: url("../img/texture-dark.png");
	--ink: #313131;
	--ink-2: #2b2b2b;
	--ink-3: #242424;
	--line: rgba(255, 255, 255, .12);

	--paper: #f4f4f6;
	--paper-2: #ffffff;

	--text: #e8e8ec;
	--text-dim: #b2b2bd;
	--text-dark: #1a1a1f;
	--text-dark-dim: #5d5d6b;

	/* --green sits behind white text (4.68:1); --green-bright is for icons,
	   which only need 3:1 as non-text UI. */
	--green: #1a8545;
	--green-dark: #146937;
	--green-bright: #3ddb84;

	--container: 1200px;
	--gutter: 24px;
	--radius: 14px;
	--radius-sm: 9px;
	--radius-pill: 999px;

	--shadow: 0 18px 40px rgba(0, 0, 0, .35);
	--shadow-card: 0 10px 30px rgba(20, 20, 30, .1);

	--font: "Kodchasan", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

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

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--text);
	background-color: var(--ink);
	background-image: var(--texture);
	background-repeat: repeat;
	/* Scrolls with the page on purpose — a fixed repeating texture forces a
	   full repaint on every scroll frame. */
	-webkit-font-smoothing: antialiased;

	/*
	 * Nothing should ever be draggable sideways. "clip" rather than "hidden"
	 * on purpose: overflow-x:hidden turns the body into a scroll container and
	 * silently kills position:sticky on the header.
	 */
	overflow-x: clip;

	/* Long unbroken strings — emails, URLs — wrap instead of pushing the
	   layout wider than the screen. */
	overflow-wrap: break-word;
}

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

input, select, textarea, button { font-family: inherit; }

/*
 * Flex and grid children default to min-width:auto, which means they refuse to
 * shrink below their content's intrinsic width — the single most common cause
 * of a page that drags sideways on a phone. These are the containers holding
 * text that can run long.
 */
.model-card__body,
.model-card__head,
.model-card__title,
.contact-tile__body,
.site-header__inner,
.site-footer__inner,
.hero__inner,
.profile__head,
.profile__body,
.booking__form,
.directory__meta { min-width: 0; }

a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.015em;
}

p { margin: 0 0 1em; }

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

.icon {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -.125em;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	inset: 8px auto auto 8px;
	width: auto; height: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--pink);
	color: #fff;
	border-radius: var(--radius-sm);
	z-index: 999;
}

:focus-visible {
	outline: 2px solid var(--pink-bright);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
	white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn .icon { width: 1.05em; height: 1.05em; }

.btn--primary {
	background: linear-gradient(135deg, var(--pink), var(--pink-deep));
	color: #fff;
	box-shadow: 0 8px 20px rgba(230, 17, 127, .3);
}
.btn--primary:hover { background: linear-gradient(135deg, var(--pink-deep), #8e0a4e); }

.btn--outline {
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
	background: transparent;
}
.btn--outline:hover { border-color: var(--pink-bright); color: var(--pink-bright); }

.btn--ghost {
	border-color: rgba(20, 20, 35, .16);
	color: var(--text-dark);
	background: transparent;
}
.btn--ghost:hover { border-color: var(--pink); color: var(--pink); }

.btn--whatsapp { background: var(--green); color: #fff; }
.btn--whatsapp:hover { background: var(--green-dark); }

.btn--light { background: #fff; color: var(--pink-deep); }
.btn--light:hover { background: #ffe9f4; }

.btn--lg { padding: 17px 32px; font-size: 14px; }
.btn--sm { padding: 9px 17px; font-size: 11.5px; }
.btn--block { display: flex; width: 100%; }

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

/*
 * Marker used to detect when the header has stuck. It needs real area —
 * IntersectionObserver is unreliable on a zero-area target — so the negative
 * margin cancels the 1px back out and it costs nothing in layout.
 */
.header-sentinel {
	height: 1px;
	margin-bottom: -1px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(28, 28, 28, .88);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
	transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/*
 * Added by main.js once the sentinel above scrolls away. The header height is
 * deliberately unchanged — a sticky element still occupies its space in normal
 * flow, so shrinking it on scroll would jerk the whole page up by that amount.
 */
.site-header.is-stuck {
	background: rgba(22, 22, 22, .96);
	border-bottom-color: rgba(255, 255, 255, .16);
	box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}

.site-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: uppercase;
}

.site-title__mark {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: linear-gradient(135deg, var(--pink-bright), var(--pink-deep));
	box-shadow: 0 4px 14px rgba(230, 17, 127, .45);
}

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-nav__list a {
	text-decoration: none;
	color: var(--text-dim);
	transition: color .15s ease;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: #fff; }

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: transparent;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 18px; height: 2px;
	margin-inline: auto;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(4px); }

/* --------------------------------------------------------------------------
   Hero

   Full-bleed photograph, everything centred over it. The photo is set in the
   Customizer; without one the section falls back to the brand gradient.
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
}

.hero--gradient {
	background:
		radial-gradient(120% 100% at 50% 0%, rgba(230, 17, 127, .4) 0%, rgba(230, 17, 127, 0) 60%),
		linear-gradient(160deg, #3a0b1e 0%, #24101a 55%, rgba(49, 49, 49, 0) 100%);
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/*
 * Crimson wash over the photograph. It is what keeps the headline readable no
 * matter which image is uploaded — without it, contrast depends on luck.
 */
.hero__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(10, 4, 7, .55) 0%, rgba(10, 4, 7, .2) 35%, rgba(10, 4, 7, .8) 100%),
		linear-gradient(135deg, rgba(160, 12, 62, .62), rgba(90, 12, 45, .58));
}

.hero--gradient .hero__wash { background: none; }

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 72px 116px;
}

/* --- search, sitting above the headline --- */

.hero__search { width: 100%; max-width: 720px; margin-bottom: 54px; }

.hero__search-label {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* --- headline --- */

.hero__title {
	max-width: none;
	margin: 0 0 22px;
	font-size: clamp(2.2rem, 5.4vw, 4rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.hero__subtitle {
	max-width: none;
	margin: 0 0 40px;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* The hero uses .btn--lg like every other prominent action on the site — the
   outline variant just gets a stronger border so it holds up over a photo. */
.hero .btn--outline {
	border-width: 2px;
	border-color: var(--pink-bright);
}

.hero .btn--outline:hover {
	background: var(--pink-bright);
	border-color: var(--pink-bright);
	color: #fff;
}

/* Fraud-report strip, pinned to the foot of the banner as in the design. */
.hero__fraud {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	max-width: 100%;
	flex-wrap: wrap;
	padding: 13px 30px 13px var(--gutter);
	background: rgba(155, 28, 40, .94);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.hero__fraud a { display: inline-block; padding-block: 7px; text-decoration: none; }
.hero__fraud a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */

.filter-bar {
	display: grid;
	grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(200px, 1.6fr) auto;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .08);
}

.filter-bar__field { position: relative; display: flex; }

.filter-bar select,
.filter-bar input[type="search"] {
	width: 100%;
	padding: 12px 18px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	appearance: none;
}

.filter-bar select { padding-right: 40px; cursor: pointer; }
.filter-bar select option { color: #111; background: #fff; }

.filter-bar input::placeholder { color: var(--text-dim); }

.filter-bar__field--select .icon {
	position: absolute;
	right: 16px;
	top: 50%;
	translate: 0 -50%;
	width: 16px; height: 16px;
	pointer-events: none;
	color: var(--text-dim);
}

.filter-bar__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	border: 0;
	border-radius: var(--radius-pill);
	background: linear-gradient(135deg, var(--pink), var(--pink-deep));
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.filter-bar__submit:hover { background: linear-gradient(135deg, var(--pink-deep), #8e0a4e); }

.filter-bar--compact {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
}

.filter-bar--compact select {
	padding: 20px 24px;
	border-radius: 0;
	background: #fff;
	color: var(--text-dark);
	font-size: 16px;
}

.filter-bar--compact .filter-bar__field--select .icon { color: var(--text-dark-dim); right: 22px; }

.filter-bar--compact .filter-bar__submit {
	padding-inline: 34px;
	border-radius: 0;
	background: var(--pink-deep);
}

.filter-bar--compact .filter-bar__submit:hover { background: var(--pink); }
.filter-bar--compact .filter-bar__submit span { display: none; }
.filter-bar--compact .filter-bar__submit .icon { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: 86px; }
.section--tight { padding-block: 58px; }
.section--light { background: var(--paper); color: var(--text-dark); }
/* Transparent so the body texture reads straight through. */
.section--dark { background: transparent; }

/* Darkened band — still translucent, so the texture carries through it. */
.section--darker { background: rgba(0, 0, 0, .22); }

.section-head { max-width: 760px; margin: 0 auto 46px; }
.section-head--center { text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }

.section-head__eyebrow {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pink-on-dark);
}

.section-head__title {
	margin: 0 0 14px;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.section--light .section-head__title { color: var(--text-dark); }

.section-head__intro {
	margin: 0;
	font-size: 16.5px;
	color: var(--text-dim);
}

.section--light .section-head__intro { color: var(--text-dark-dim); }

.section__cta { margin: 44px 0 0; text-align: center; }

.section__empty,
.directory__empty {
	padding: 40px;
	text-align: center;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Model cards

   One full-width card per row, portrait left. The two-column and three-column
   variants stay available for the Elementor widget and the shortcode.
   -------------------------------------------------------------------------- */

.model-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

.model-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.model-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.model-card {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	overflow: hidden;
	background: var(--paper-2);
	border: 1px solid rgba(20, 20, 35, .08);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	color: var(--text-dark);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.model-card:hover,
.model-card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(230, 17, 127, .38);
	box-shadow: 0 22px 50px rgba(20, 20, 30, .18);
}

/* Only zoom when there is a single photo — on a carousel the scale would fight
   the horizontal scroll and make the snap points drift. */
.model-card:hover .gallery__slide:only-child img,
.model-card:focus-within .gallery__slide:only-child img { transform: scale(1.07); }

.model-card:hover .model-card__media::after,
.model-card:focus-within .model-card__media::after { opacity: 1; }

.model-card:hover .model-card__title a { color: var(--pink); }

.model-card__media {
	position: relative;
	overflow: hidden;
	background: var(--ink-3);
	min-height: 200px;
}

.model-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.22, .61, .24, 1);
}

/* Scrim that deepens on hover. Sits above the photo, below the flags. */
.model-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(11, 11, 13, .6), transparent 58%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}

/* The verified flag sits in the card's top-left corner, over the portrait. */
.model-card__flags {
	position: absolute;
	z-index: 2;
	inset: 12px auto auto 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.flag--verified { background: var(--green); color: #fff; }
.flag--featured { background: var(--pink); color: #fff; }
.flag--floating { position: absolute; inset: 14px auto auto 14px; }
.flag .icon { width: 13px; height: 13px; }

.model-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 15px 18px;
}

.model-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.model-card__title { margin: 0; font-size: 17px; line-height: 1.25; }

.model-card__title a {
	display: inline-block;
	padding-block: 5px;
	text-decoration: none;
}
.model-card__title a:hover { color: var(--pink); }

.model-card__status {
	flex: none;
	padding: 4px 11px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Tuned for the white card. */
.model-card__status--available { background: rgba(35, 180, 93, .14); color: #16763c; }
.model-card__status--limited { background: rgba(230, 150, 17, .16); color: #8d5a04; }
.model-card__status--booked { background: rgba(120, 120, 140, .16); color: #5d5d6b; }

/*
 * The same badge appears on the profile, where the backdrop is dark — the
 * card's deep-green and amber text is close to unreadable there, so the dark
 * context gets its own light-on-dark pairing.
 */
.profile__head .model-card__status--available { background: rgba(35, 180, 93, .22); color: #6ee7a0; }
.profile__head .model-card__status--limited { background: rgba(230, 150, 17, .22); color: #ffc861; }
.profile__head .model-card__status--booked { background: rgba(255, 255, 255, .14); color: #cfcfda; }

.model-card__tags {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pink-on-light);
}

.model-card__city {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 6px;
	color: var(--text-dark-dim);
	font-weight: 500;
}

.model-card__city .icon { width: 13px; height: 13px; }

.model-card__excerpt {
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-dark-dim);
}

/* Two lines, then ellipsis. The excerpt length alone cannot guarantee a
   consistent card height because word lengths vary; clamping can. */
.model-card__excerpt p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Bottom row: stats and rating on the left, rate and actions on the right. */
.model-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid rgba(20, 20, 35, .07);
}

.model-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.model-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.model-card__stats li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	background: rgba(20, 20, 35, .05);
	font-size: 12px;
	color: var(--text-dark-dim);
	white-space: nowrap;
}

.model-card__stats .icon { width: 14px; height: 14px; color: var(--pink); }
.model-card__stat-label { opacity: .75; }
.model-card__stats strong { color: var(--text-dark); }

.model-card__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
}

.model-card__rating .stars { margin-top: 0; }

/* On a white card the "off" star needs a dark tint, not the dark-section one. */
.model-card__rating .stars__star .icon { color: rgba(20, 20, 35, .18); }

.model-card__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex: none;
}

.model-card__rate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--text-dark);
}

.model-card__rate .icon { width: 17px; height: 17px; color: var(--pink); }

.model-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.model-card__actions .btn { padding: 8px 15px; font-size: 12.5px; }

/* Narrow columns cannot hold the side-by-side layout, so stack instead. */
.model-grid--cols-2 .model-card,
.model-grid--cols-3 .model-card { grid-template-columns: minmax(0, 1fr); }

.model-grid--cols-2 .model-card__media,
.model-grid--cols-3 .model-card__media { aspect-ratio: 4 / 3; min-height: 0; }

.model-grid--cols-2 .model-card__foot,
.model-grid--cols-3 .model-card__foot { align-items: flex-start; flex-direction: column; }

.model-grid--cols-2 .model-card__side,
.model-grid--cols-3 .model-card__side { align-items: flex-start; width: 100%; }

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

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

.service {
	position: relative;
	padding: 28px 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
	transition: border-color .18s ease, transform .18s ease;
}

.service:hover { border-color: rgba(230, 17, 127, .5); transform: translateY(-3px); }

.service__num {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	/* The service card's own tint lifts the backdrop, so this needs to be a
	   shade lighter than --pink-on-dark to stay above 4.5:1. */
	color: #ff85c4;
}

.service__title { margin: 0 0 10px; font-size: 18px; }
.service__body { margin: 0 0 18px; font-size: 14.5px; color: var(--text-dim); }

/* Pushes the button to the bottom so every card's CTA lines up. */
.service {
	display: flex;
	flex-direction: column;
}

.service__cta { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   Booking CTA
   -------------------------------------------------------------------------- */

.booking-cta {
	background: linear-gradient(135deg, #8e0a4e 0%, var(--pink-deep) 45%, var(--pink) 100%);
	text-align: center;
	color: #fff;
}

.booking-cta__title {
	max-width: 20ch;
	margin-inline: auto;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.booking-cta__badge {
	display: inline-block;
	margin: 0 0 34px;
	padding: 11px 30px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--pink-deep);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.booking-cta__lede {
	max-width: 62ch;
	margin: 0 auto 44px;
	font-size: 16.5px;
	color: #fff;
}

.booking-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	text-align: left;
	counter-reset: none;
}

.booking-step {
	padding: 26px 24px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, .18);
	backdrop-filter: blur(4px);
}

.booking-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: #fff;
	color: var(--pink-deep);
	font-weight: 700;
}

.booking-step__title { margin: 0 0 8px; font-size: 17px; }
.booking-step p { margin: 0; font-size: 14.5px; color: #fff; }

.booking-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

/* --------------------------------------------------------------------------
   Long-form trust copy
   -------------------------------------------------------------------------- */

.prose-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 40px;
}

.prose-grid__item h3 {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--pink-on-dark);
}

.prose-grid__item p {
	margin: 0;
	font-size: 14.5px;
	color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Pills
   -------------------------------------------------------------------------- */

.pill-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: linear-gradient(135deg, var(--pink), var(--pink-deep));
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(230, 17, 127, .26);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.pill:hover {
	background: linear-gradient(135deg, var(--pink-deep), #8e0a4e);
	transform: translateY(-1px);
	box-shadow: 0 9px 22px rgba(230, 17, 127, .34);
}

.pill__count {
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, .28);
	font-size: 11px;
}

.pill--sm { padding: 7px 14px; font-size: 12.5px; }

/* Outlined variant, so a model's city reads as secondary to its categories. */
.pill--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: var(--line);
	box-shadow: none;
}

.pill--ghost:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
}
.pill .icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Why us
   -------------------------------------------------------------------------- */

.why__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 56px;
	align-items: center;
}

.why__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.why__lede { color: var(--text-dim); }

.checklist {
	display: grid;
	gap: 12px;
	margin: 28px 0;
	padding: 0;
	list-style: none;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14.5px;
}

.checklist .icon {
	width: 20px; height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(35, 180, 93, .18);
	color: var(--green-bright);
	stroke-width: 2.6;
}

.why__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.why__media { position: relative; min-height: 420px; }

.why__frame {
	position: absolute;
	border-radius: 18px;
	border: 1px solid var(--line);
}

.why__frame--back {
	inset: 0 0 18% 18%;
	background: linear-gradient(150deg, rgba(255, 45, 149, .3), rgba(179, 13, 98, .12));
}

.why__frame--front {
	inset: 16% 16% 0 0;
	display: grid;
	place-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background: var(--ink-3);
	box-shadow: var(--shadow);
	color: var(--text-dim);
	font-size: 13px;
}

.why__frame-icon { width: 34px; height: 34px; margin-inline: auto; color: var(--pink-on-dark); }
.why__frame p { margin: 0; }

/* --------------------------------------------------------------------------
   Testimonials

   Horizontal scroller. Reviews accumulate, and a grid of twenty would bury the
   rest of the page.
   -------------------------------------------------------------------------- */

.testimonials {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.rating-card {
	padding: 30px 26px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(160deg, rgba(230, 17, 127, .18), rgba(255, 255, 255, .03));
	text-align: center;
}

.rating-card__score {
	display: block;
	font-size: 52px;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}

.rating-card__meta { margin: 14px 0 0; font-size: 13px; color: var(--text-dim); }

.stars { display: inline-flex; gap: 3px; margin-top: 10px; }
.stars__star .icon { width: 17px; height: 17px; color: rgba(255, 255, 255, .22); }
.stars__star.is-on .icon { color: #ffb400; fill: #ffb400; }

/* --- the scroller --- */

.review-track {
	display: grid;
	grid-auto-flow: column;
	/* Fixed, not minmax(0, …) — a zero minimum lets the columns shrink to fit
	   the container, which collapses the cards instead of overflowing them
	   into the scroller. */
	grid-auto-columns: 340px;
	gap: 18px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 14px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.review-track::-webkit-scrollbar { height: 6px; }
.review-track::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 99px; }
.review-track::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 99px; }
.review-track::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); }

.testimonial {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 26px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .06);
}

.testimonial__mark {
	width: 26px; height: 26px;
	margin-bottom: 10px;
	color: rgba(230, 17, 127, .55);
}

.testimonial blockquote {
	margin: 12px 0 16px;
	font-size: 14.5px;
	color: var(--text);

	/* Grid rows size to the tallest item, so without a cap one long review
	   would stretch every card in the row to match it. */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.testimonial figcaption { margin-top: auto; }
.testimonial figcaption strong { display: block; font-size: 14px; }
.testimonial figcaption span { font-size: 12.5px; color: var(--text-dim); }

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

.rating-card__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.scroll-btn {
	display: grid;
	place-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.scroll-btn:hover:not(:disabled) { background: var(--pink); border-color: var(--pink); }

/* Disabled rather than hidden, so the control does not jump around at the ends. */
.scroll-btn:disabled { opacity: .35; cursor: default; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: start;
}

.contact__details { display: grid; gap: 12px; }

.contact-tile {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .06);
	text-decoration: none;
	transition: border-color .15s ease;
}

a.contact-tile:hover { border-color: rgba(230, 17, 127, .5); }

.contact-tile__icon {
	display: grid;
	place-content: center;
	width: 46px; height: 46px;
	flex: none;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--pink-bright), var(--pink-deep));
	color: #fff;
}

.contact-tile__icon .icon { width: 20px; height: 20px; }

.contact-tile__body strong {
	display: block;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.contact-tile__body span { font-size: 15px; }

.contact__form {
	padding: 32px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink-3);
}

.contact__form-title { margin: 0 0 20px; font-size: 20px; }

.enquiry-form__row { margin: 0 0 16px; }

.enquiry-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dim);
}

.enquiry-form input,
.enquiry-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font: inherit;
	font-size: 15px;
}

.enquiry-form input:focus,
.enquiry-form textarea:focus {
	border-color: var(--pink);
	outline: none;
}

.enquiry-form textarea { resize: vertical; min-height: 120px; }
.enquiry-form__trap { position: absolute; left: -9999px; }

.form-notice {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
}

.form-notice--success { background: rgba(35, 180, 93, .16); color: #7ee2a8; }
.form-notice--error { background: rgba(230, 40, 40, .16); color: #ff9d9d; }

/* --------------------------------------------------------------------------
   Link grids
   -------------------------------------------------------------------------- */

.link-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
	gap: 10px;
}

.link-grid__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: linear-gradient(135deg, var(--pink), var(--pink-deep));
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(230, 17, 127, .24);
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.link-grid__item:hover {
	background: linear-gradient(135deg, var(--pink-deep), #8e0a4e);
	transform: translateY(-1px);
	box-shadow: 0 9px 22px rgba(230, 17, 127, .32);
}

.link-grid__item .icon { width: 15px; height: 15px; color: rgba(255, 255, 255, .85); }

.link-grid--cities { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.link-grid--cities .link-grid__item { justify-content: space-between; }

.link-grid--cities em {
	font-style: normal;
	font-size: 12px;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, .28);
}

/* --------------------------------------------------------------------------
   Directory
   -------------------------------------------------------------------------- */

.directory { padding-block: 56px 86px; }

.directory__head { margin-bottom: 26px; }
.directory__title { margin: 0 0 8px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.directory__description { margin: 0; max-width: 70ch; color: var(--text-dim); }

/* The search bar inherits its dark styling — the directory sits on the page
   texture now, so the white treatment it used to need has been removed. */

.directory__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 22px 0 20px;
	font-size: 14px;
	color: var(--text-dim);
}

.directory__count { margin: 0; font-weight: 600; }
.directory__clear { display: inline-block; padding: 6px 2px; color: var(--pink-on-dark); font-weight: 600; }

.directory__empty { border-color: var(--line); color: var(--text-dim); }

.pagination {
	margin-top: 40px;
	text-align: center;
}

.pagination .nav-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pagination .page-numbers {
	display: grid;
	place-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--pink);
	border-color: var(--pink);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Photo gallery

   Shared by the model cards and the profile page. The track is a native
   scroll-snap container, so swipe and trackpad work without JavaScript; the
   arrows and dots are added on top.
   -------------------------------------------------------------------------- */

.gallery { position: relative; height: 100%; }

.gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.gallery__track::-webkit-scrollbar { display: none; }

.gallery__slide { scroll-snap-align: start; height: 100%; }
.gallery__slide a { display: block; height: 100%; }

.gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Arrows sit over the middle of the photo, as in the design. */
.gallery__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 3;
	display: grid;
	place-content: center;
	width: 34px;
	height: 34px;
	padding: 0 0 2px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 15, 18, .55);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background-color .15s ease;
}

.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }

.gallery__nav:hover:not(:disabled) { background: var(--pink); }
.gallery__nav:disabled { opacity: 0 !important; pointer-events: none; }

/* Revealed on hover, on keyboard focus, and always on touch — where there is
   no hover to reveal them with. */
.model-card:hover .gallery__nav,
.gallery:focus-within .gallery__nav,
.gallery--main .gallery__nav { opacity: 1; }

@media (hover: none) {
	.gallery__nav { opacity: 1; }
}

.gallery__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.gallery__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	transition: background-color .2s ease, width .2s ease;
}

.gallery__dot.is-on { width: 18px; border-radius: 99px; background: #fff; }

/* --------------------------------------------------------------------------
   Model profile
   -------------------------------------------------------------------------- */

.model-single { padding-bottom: 0; }

.profile-bar {
	border-bottom: 1px solid var(--line);
	background: rgba(0, 0, 0, .25);
}

.profile-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-block: 16px;
}

.profile-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.btn--dark {
	background: rgba(0, 0, 0, .55);
	border-color: var(--line);
	color: #fff;
}

.btn--dark:hover { background: rgba(0, 0, 0, .75); border-color: rgba(255, 255, 255, .3); }

.profile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 40px;
	align-items: start;
	padding-block: 40px 64px;
}

/* --- gallery column: main image with a thumbnail rail beside it --- */

.profile__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px;
	gap: 14px;
	align-items: start;
}

.gallery--main {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--ink-3);
}

.profile__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
}

.profile__thumb {
	position: relative;
	flex: none;
	width: 92px;
	aspect-ratio: 3 / 4;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--ink-3);
	cursor: pointer;
	opacity: .6;
	transition: opacity .15s ease, border-color .15s ease;
}

.profile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.profile__thumb:hover { opacity: 1; }
.profile__thumb.is-on { opacity: 1; border-color: var(--pink); }

/* --- write-up column --- */

.profile__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.profile__title { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }

.profile__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

.profile__content { color: var(--text-dim); font-size: 15.5px; }
.profile__content p { margin: 0 0 1em; }

.fact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
	font-size: 14px;
}

.fact-grid li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fact-grid .icon { width: 17px; height: 17px; color: var(--pink-on-dark); }
.fact-grid span { color: var(--text-dim); }
.fact-grid strong { color: #fff; }
.fact-grid__rating { gap: 10px; }
.fact-grid__rating .stars { margin: 0; }

.profile__links {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 24px;
	font-size: 14px;
}

.profile__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-block: 5px;
	color: var(--pink-on-dark);
	text-decoration: none;
	font-weight: 600;
}

.profile__links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Booking block
   -------------------------------------------------------------------------- */

.booking {
	background: linear-gradient(135deg, rgba(120, 12, 44, .55), rgba(40, 12, 24, .7));
	border-block: 1px solid var(--line);
}

.booking__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.booking__heading {
	margin: 0 0 14px;
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	text-transform: uppercase;
	letter-spacing: .02em;
}

.booking__lede { max-width: 52ch; margin: 0 0 28px; color: rgba(255, 255, 255, .82); }

.booking__tiles { display: grid; gap: 12px; margin-bottom: 26px; }
.booking__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.booking__form {
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, .35);
	backdrop-filter: blur(6px);
}

.booking__form-title {
	margin: 0 0 20px;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Force the native date picker's icon to be visible on a dark field. */
.booking__form input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: .7;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Representation notice
   -------------------------------------------------------------------------- */

.disclaimer { text-align: center; }

.disclaimer__title {
	margin: 0 0 12px;
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pink-on-dark);
}

.disclaimer p {
	max-width: 92ch;
	margin: 0 auto;
	font-size: 13px;
	line-height: 1.8;
	color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Generic entries (pages, posts)
   -------------------------------------------------------------------------- */

.entry { padding-block: 56px; }
.entry__header { margin-bottom: 26px; }
.entry__title { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.entry__meta { color: var(--text-dim); font-size: 14px; }
.entry__content > .container,
.entry--page .entry__content { color: var(--text-dim); }

.archive__header { padding-block: 48px 8px; }
.archive__title { font-size: clamp(1.7rem, 3vw, 2.3rem); }

.post-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: 28px;
	padding-block: 32px;
}

.card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card__body { padding: 18px 20px; }
.card__title { font-size: 18px; margin: 0 0 8px; }
.card__title a { display: inline-block; padding-block: 5px; text-decoration: none; }

.error-404 { padding-block: 90px; text-align: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	background: rgba(0, 0, 0, .42);
	border-top: 1px solid var(--line);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: 56px 40px;
}

.site-footer__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.site-footer__mark {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--pink-bright), var(--pink-deep));
	box-shadow: 0 4px 14px rgba(230, 17, 127, .45);
}

.site-footer__blurb {
	max-width: 78ch;
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--text-dim);
}

.site-footer__contact {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 26px;
	font-size: 14.5px;
	font-weight: 600;
}

.site-footer__contact a { display: inline-block; padding: 6px 2px; color: var(--pink-on-dark); text-decoration: none; }
.site-footer__contact a:hover { text-decoration: underline; }
.site-footer__contact span { color: var(--text-dim); }

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.site-footer__list a {
	display: inline-block;
	/* Padding, not height: it lifts the tap target past the 24px minimum
	   without changing where the text sits. */
	padding: 9px 4px;
	color: var(--text-dim);
	text-decoration: none;
	transition: color .15s ease;
}

.site-footer__list a:hover { color: #fff; }

.site-footer__legal {
	border-top: 1px solid var(--line);
	padding-block: 20px;
	font-size: 13px;
	color: var(--text-dim);
	text-align: center;
}

.site-footer__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.services,
	.booking-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.testimonials { grid-template-columns: minmax(0, 1fr); }
	.rating-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; }
	.rating-card__meta { margin: 0; }
	.rating-card__nav { margin: 0; }
	.model-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.model-card { grid-template-columns: 200px minmax(0, 1fr); }
	.model-card__media { min-height: 180px; }
}

@media (max-width: 900px) {
	.section { padding-block: 64px; }

	.hero__inner { padding-block: 56px 72px; }
	.hero__search { margin-bottom: 40px; }

	.filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius); }
	.filter-bar__field--text,
	.filter-bar__submit { grid-column: 1 / -1; }
	.filter-bar__submit { justify-content: center; }

	.model-grid--cols-2,
	.model-grid--cols-3 { grid-template-columns: minmax(0, 1fr); }

	.why__inner,
	.contact,
	.profile,
	.booking__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }

	/* Thumbnails move under the main photo and scroll sideways. */
	.profile__gallery { grid-template-columns: minmax(0, 1fr); }

	.profile__thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		padding-bottom: 6px;
	}

	.why__media { display: none; }

	.prose-grid { grid-template-columns: minmax(0, 1fr); }

	/* Collapsed navigation */
	.nav-toggle { display: block; }

	.site-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 var(--gutter);
		max-height: 0;
		overflow: hidden;
		background: var(--ink-2);
		border-bottom: 1px solid var(--line);
		transition: max-height .25s ease, padding .25s ease;
	}

	.site-nav.is-open { max-height: 70vh; padding-block: 12px 20px; overflow-y: auto; }

	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list li { border-bottom: 1px solid var(--line); }
	.site-nav__list a { display: block; padding: 14px 0; }
	.site-nav__cta { margin-top: 16px; }
}

@media (max-width: 620px) {
	:root { --gutter: 18px; }

	/*
	 * Mobile cards carry the decision, not the detail: photo, name, what they
	 * do, whether they are free, whether they are verified, and the two ways to
	 * reach the agency. Everything else — bio, measurements, rating, day rate —
	 * is one tap away on the profile, and on a phone it only pushes the next
	 * model further down the screen.
	 */
	.model-card { grid-template-columns: minmax(0, 1fr); }

	/* Portrait crop. Modelling shots are vertical, and the tall frame is the
	   whole reason to scroll a roster on a phone. */
	.model-card__media { aspect-ratio: 4 / 5; min-height: 0; }

	.model-card__body { gap: 8px; padding: 14px 16px 16px; }
	.model-card__title { font-size: 18px; }

	.model-card__excerpt,
	.model-card__meta,
	.model-card__rate { display: none; }

	.model-card__foot {
		padding-top: 0;
		border-top: 0;
	}

	.model-card__side { align-items: stretch; width: 100%; }
	.model-card__actions { width: 100%; gap: 10px; }
	.model-card__actions .btn {
		flex: 1;
		min-width: 0;
		padding: 12px 10px;
		font-size: 11px;
		letter-spacing: .04em;
	}

	.services,
	.booking-steps { grid-template-columns: minmax(0, 1fr); }

	.review-track { grid-auto-columns: 84%; }

	.profile-bar__inner { justify-content: center; }
	.profile-bar__actions { width: 100%; }
	.profile-bar__actions .btn { flex: 1; min-width: 0; padding-inline: 10px; }

	.fact-grid { grid-template-columns: minmax(0, 1fr); }
	.profile__thumb { width: 68px; }
	.booking__form { padding: 20px; }

	.contact__form { padding: 22px; }

	.hero__title br,
	.hero__subtitle br { display: none; }

	.hero__fraud {
		position: static;
		justify-content: center;
		flex-wrap: wrap;
		padding-inline: var(--gutter);
		font-size: 13px;
	}

	.filter-bar--compact { grid-template-columns: minmax(0, 1fr); }
	.filter-bar--compact .filter-bar__submit { padding-block: 15px; }
	.filter-bar--compact .filter-bar__submit span { display: inline; }
	.hero__actions { width: 100%; }
	.hero__actions .btn { flex: 1; }
}

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