/*
Theme Name: HappyNight69 Penang
Theme URI: https://example.com/happynight69-penang
Author: HappyNight69
Author URI: https://example.com
Description: Penang edition of the HappyNight69 brand theme, for a Penang-only site on its own WordPress installation. Child theme of BlankSlate. Areas are categories and girls are posts, so the island and the mainland are managed as ordinary WordPress content. Ships Home, About Us, Rates, All Areas and Contact templates, an area archive and a girl profile, an 18+ age gate, and a WhatsApp-first enquiry flow that posts nothing to the server.
Template: blankslate
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: happynight69-penang
Tags: one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Per the brand guideline: a modern nightlife *platform*, not a casino —
	   midnight-blue charcoal ground, electric coral as the brand accent, soft
	   violet as the secondary, green reserved for availability only. */
	--ink:         #0d101a;
	--ink-2:       #10141f;
	--surface:     rgba(23, 28, 42, .55);
	--surface-2:   #171c2a;
	--line:        rgba(255, 255, 255, .08);
	--line-strong: rgba(255, 255, 255, .18);

	--text:        #f4f6fb;
	--text-dim:    #a8afc2;
	--text-faint:  #737b91;

	--coral:       #ff4d6e;
	--coral-deep:  #e02a52;
	--coral-soft:  rgba(255, 77, 110, .14);
	--coral-line:  rgba(255, 77, 110, .38);
	--violet:      #DB5A6B;
	--lavender:    #d8d2f5;

	/* Availability only — never decoration. */
	--live:        #34d399;

	--wa:          #25d366;
	--tg:          #2aabee;

	--display: "Sora", "Segoe UI", system-ui, sans-serif;
	--sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--shell:     1440px;
	--gut:       clamp(20px, 5vw, 44px);
	--radius:    16px;
	--radius-sm: 10px;

	--ease: cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background: var(--ink);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* One ambient wash behind everything, so sections themselves stay flat. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		none;
}

body.nav-open {
	overflow: hidden;
}

#wrapper {
	position: relative;
	z-index: 1;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}
svg {
width:25px;
}
a {
	color: var(--violet);
	text-decoration: none;
	transition: color .3s var(--ease), opacity .3s var(--ease);
}

a:hover {
	color: var(--text);
}

strong,
b {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

::selection {
	background: var(--coral);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.025em;
	color: var(--text);
	margin: 0;
}

h1 { font-size: clamp(2.6rem, 7vw, 4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
h4 { font-size: 1rem; letter-spacing: .02em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .35em; }

blockquote {
	margin: 2em 0;
	padding: 1.4em 1.6em;
	border-left: 2px solid var(--coral);
	background: rgba(255, 255, 255, .03);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--text-dim);
	font-size: 1.06rem;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 3em 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.shell {
	/* 80% of the viewport, never wider than --shell. The percentage is the
	   gutter, so there is no padding-inline on top of it. */
	width: 80%;
	max-width: var(--shell);
	margin-inline: auto;
}

@media (max-width: 900px) {
	.shell {
		width: 90%;
	}
}

.section {
	position: relative;
	padding: clamp(72px, 11vw, 130px) 0;
}

.section--tight {
	padding-block: clamp(40px, 6vw, 70px);
}

.section--alt {
	background: rgba(255, 255, 255, .022);
}

.section--line {
	border-block: 1px solid var(--line);
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.mt-l { margin-top: clamp(28px, 4vw, 48px); }
.text-center { text-align: center; }

.section-head {
	max-width: 720px;
	margin-bottom: clamp(34px, 5vw, 60px);
}

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

.section-head h2 { margin-bottom: .5em; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--display);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: 1.1em;
}

.eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--coral);
}

.eyebrow--center::before { display: none; }

.lede {
	font-size: clamp(1.02rem, 1.4vw, 1.18rem);
	color: var(--text-dim);
	line-height: 1.72;
}

.neon {
	color: var(--coral);
}

/* ==========================================================================
   4. Buttons & links
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--display);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .95em 1.7em;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .3s var(--ease), background .3s var(--ease),
	            box-shadow .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
	background: var(--coral);
	color: #fff;
	box-shadow: 0 14px 34px -16px rgba(255, 77, 110, .9);
}

.btn--primary:hover {
	color: #fff;
	box-shadow: 0 20px 44px -16px rgba(255, 77, 110, 1);
}

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

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

.btn--wa { background: var(--wa); color: #05240f; }
.btn--wa:hover { color: #05240f; }
.btn--tg { background: var(--tg); color: #02202e; }
.btn--tg:hover { color: #02202e; }

.btn--sm { padding: .68em 1.25em; font-size: .8rem; }
.btn--block { width: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(22px, 3vw, 34px);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--display);
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text);
	border-bottom: 1px solid var(--coral-line);
	padding-bottom: .3em;
}

.link-arrow::after {
	content: "\2192";
	transition: transform .3s var(--ease);
}

.link-arrow:hover { color: var(--coral); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ==========================================================================
   5. Header
   ========================================================================== */

#header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	border-bottom: 1px solid transparent;
	transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
}

#header.is-stuck {
	background: rgba(7, 6, 14, .82);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--line);
}

.masthead {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
	min-height: 76px;
}

/* Custom logo.
   functions.php declares flex-height/flex-width so uploads are never cropped,
   which means WordPress prints the file at whatever size it was uploaded at.
   The width cap is what keeps it out of the nav; height follows the aspect
   ratio, so a tall logo will set the header height. */
#branding {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}

.custom-logo-link {
	display: block;
	line-height: 0;
	max-width: min(80px, 45vw);
}

.custom-logo {
	width: auto;
	height: auto;
	max-width: 100%;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .65em;
	font-family: var(--display);
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text);
	text-transform: uppercase;
}

.brand__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--coral);
	box-shadow: 0 0 14px 2px var(--coral);
	animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .55; transform: scale(.8); }
}

.brand__tag {
	display: block;
	font-family: var(--sans);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-top: 2px;
}

.masthead__nav { margin-left: auto; }

.masthead__nav ul {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.masthead__nav li { margin: 0; position: relative; }

.masthead__nav a {
	position: relative;
	font-family: var(--display);
	font-size: .84rem;
	font-weight: 500;
	color: var(--text-dim);
	padding: .4em 0;
}

.masthead__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--coral);
	transition: width .3s var(--ease);
}

.masthead__nav a:hover,
.masthead__nav .current-menu-item > a { color: var(--text); }

.masthead__nav a:hover::after,
.masthead__nav .current-menu-item > a::after { width: 100%; }

.masthead__nav ul ul {
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	min-width: 200px;
	padding: 10px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all .28s var(--ease);
}

.masthead__nav li:hover > ul { opacity: 1; visibility: visible; transform: none; }
.masthead__nav ul ul a { display: block; padding: .45em .6em; }

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	cursor: pointer;
}

.burger span {
	display: block;
	width: 16px;
	height: 1.5px;
	margin-inline: auto;
	background: var(--text);
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
	position: fixed;
	inset: 76px 0 auto;
	z-index: 89;
	background: rgba(7, 6, 14, .97);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line);
	padding: 26px var(--gut) 34px;
	transform: translateY(-14px);
	opacity: 0;
	visibility: hidden;
	transition: all .35s var(--ease);
}

.nav-open .drawer { transform: none; opacity: 1; visibility: visible; }

.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { margin-bottom: 4px; }

.drawer a {
	display: block;
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--text);
	padding: .4em 0;
	border-bottom: 1px solid var(--line);
}

.drawer ul ul { padding-left: 1em; }
.drawer ul ul a { font-size: 1rem; color: var(--text-dim); }
.drawer__foot { margin-top: 22px; }

/* Templates without a hero need the fixed header cleared. */
body.no-hero #content { padding-top: 76px; }

/* ==========================================================================
   6. Heroes
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(620px, 92vh, 900px);
	padding: 130px 0 70px;
	overflow: hidden;
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 74px 74px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
	opacity: .6;
}

.hero__glow {
	position: absolute;
	left: 50%;
	top: 14%;
	width: min(900px, 96vw);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: none;
	filter: blur(28px);
	animation: drift 16s var(--ease) infinite alternate;
}

@keyframes drift {
	from { transform: translate(-52%, -3%) scale(1); }
	to   { transform: translate(-48%, 4%) scale(1.1); }
}

.hero .shell { position: relative; z-index: 2; }
.hero__inner { max-width: 900px; }
.hero h1 { margin-bottom: .38em; }
.hero h1 .line { display: block; }
.hero .lede { max-width: 620px; }

.hero__meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: clamp(46px, 7vw, 78px) 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--line);
}

.hero__meta dt {
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: .5em;
}

.hero__meta dd {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -.03em;
}

.scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	font-size: .64rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--text-faint);
	animation: bob 2.4s var(--ease) infinite;
}

@keyframes bob {
	0%, 100% { transform: translate(-50%, 0); opacity: .5; }
	50%      { transform: translate(-50%, 7px); opacity: 1; }
}

/* Compact hero for interior templates */
.page-hero {
	position: relative;
	padding: clamp(140px, 18vw, 210px) 0 clamp(50px, 7vw, 84px);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.page-hero__glow {
	position: absolute;
	left: 62%;
	top: -30%;
	width: 620px;
	aspect-ratio: 1;
	background: none;
	filter: blur(24px);
	pointer-events: none;
}

.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); margin-bottom: .35em; }
.page-hero .lede { max-width: 660px; }

/* ==========================================================================
   7. Marquee
   ========================================================================== */

.marquee {
	overflow: hidden;
	border-block: 1px solid var(--line);
	background: rgba(255, 255, 255, .02);
	padding: 15px 0;
}

.marquee__track {
	display: flex;
	gap: 46px;
	width: max-content;
	animation: slide 34s linear infinite;
}

.marquee__track span {
	display: inline-flex;
	align-items: center;
	gap: 46px;
	font-family: var(--display);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}

.marquee__track span::after {
	content: "\2726";
	color: var(--coral);
	letter-spacing: 0;
}

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

/* ==========================================================================
   8. Cards, media, stats
   ========================================================================== */

.card {
	position: relative;
	padding: clamp(24px, 3vw, 34px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--coral);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease);
}

.card:hover {
	transform: translateY(-5px);
	border-color: var(--line-strong);
	background: var(--surface-2);
}

.card:hover::before { transform: scaleX(1); }

.card__num {
	display: block;
	font-family: var(--display);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--coral);
	margin-bottom: 1.1em;
}

.card h3 { margin-bottom: .55em; }
.card p { color: var(--text-dim); font-size: .95rem; margin: 0; }

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

.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }
.media img { width: 100%; height: 100%; object-fit: cover; }

.strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.6vw, 20px);
}

.stat {
	padding: 20px 0;
	border-top: 1px solid var(--line);
}

.stat__val {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1;
	margin-bottom: .3em;
	background: var(--coral);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stat__lbl {
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Numbered rows */
.svc {
	display: grid;
	grid-template-columns: 68px 1fr 48px;
	gap: clamp(14px, 2vw, 30px);
	align-items: center;
	padding: clamp(22px, 3vw, 32px) 0;
	border-top: 1px solid var(--line);
	transition: padding-inline .4s var(--ease);
}

.svc:last-child { border-bottom: 1px solid var(--line); }
.svc:hover { padding-inline: 10px; }

.svc__idx {
	font-family: var(--display);
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--text-faint);
	transition: color .3s var(--ease);
}

.svc:hover .svc__idx { color: var(--coral); }
.svc h3 { margin-bottom: .35em; }
.svc p { color: var(--text-dim); font-size: .95rem; margin: 0; max-width: 62ch; }

.svc__go {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--text);
	transition: all .35s var(--ease);
}

.svc__go svg { width: 15px; height: 15px; }

.svc:hover .svc__go {
	background: var(--coral);
	border-color: var(--coral);
	color: #fff;
	transform: rotate(-45deg);
}

/* Steps */
.step { padding-top: 22px; border-top: 2px solid var(--coral-line); }

.step__n {
	display: block;
	font-family: var(--display);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: 1em;
}

.step h3 { margin-bottom: .5em; }
.step p { color: var(--text-dim); font-size: .95rem; margin: 0; }

/* Quotes */
.quote {
	margin: 0;
	padding: clamp(24px, 3vw, 34px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.quote__mark {
	display: block;
	font-family: var(--display);
	font-size: 3rem;
	line-height: .6;
	color: var(--coral);
	margin-bottom: .3em;
}

.quote p { color: var(--text); font-size: 1rem; line-height: 1.7; }

.quote footer {
	margin-top: 1.4em;
	padding-top: 1.1em;
	border-top: 1px solid var(--line);
	font-size: .8rem;
	color: var(--text-faint);
}

.quote footer b { display: block; color: var(--text); margin-bottom: .2em; }

/* ==========================================================================
   9. Brand story
   ========================================================================== */

.story {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	padding-left: clamp(28px, 5vw, 56px);
}

.story::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--coral);
}

.story__item { position: relative; padding-bottom: clamp(34px, 5vw, 58px); }
.story__item:last-child { padding-bottom: 0; }

.story__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(28px, 5vw, 56px) + 1px);
	top: 10px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ink);
	border: 2px solid var(--coral);
	box-shadow: 0 0 12px 1px var(--coral-line);
}

.story__year {
	display: block;
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--violet);
	margin-bottom: .7em;
}

.story__item h3 { margin-bottom: .5em; }
.story__item p { color: var(--text-dim); }

.pull {
	max-width: 780px;
	margin: clamp(34px, 5vw, 56px) auto;
	text-align: center;
	font-family: var(--display);
	font-size: clamp(1.35rem, 2.8vw, 2.1rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.025em;
}

.pull cite {
	display: block;
	margin-top: 1.1em;
	font-family: var(--sans);
	font-size: .8rem;
	font-style: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.value {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.value__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--coral-soft);
	color: var(--coral);
	font-family: var(--display);
	font-size: .8rem;
	font-weight: 700;
}

.value h4 { margin-bottom: .3em; font-size: 1.02rem; }
.value p { color: var(--text-dim); font-size: .93rem; margin: 0; }

/* ==========================================================================
   10. Location tiles
   ========================================================================== */

.tiles {
	display: grid;
	/* Areas are user-managed categories, so the strip adapts to however many
	   there are rather than assuming a fixed count. */
	grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
	gap: clamp(8px, 1.2vw, 14px);
}

.tile {
	display: flex;
	flex-direction: column;
	gap: .35em;
	padding: 16px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-align: center;
	transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.tile:hover {
	transform: translateY(-3px);
	border-color: var(--coral-line);
	background: var(--surface-2);
}

.tile--flagship { border-color: var(--coral-line); }

.tile__code {
	font-family: var(--display);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--coral);
}

.tile__name {
	font-family: var(--display);
	font-size: .86rem;
	font-weight: 600;
	color: var(--text);
}

.tile:hover .tile__name { color: var(--text); }

.tile__count {
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-faint);
}

/* The proof line under the hero */
.proof {
	margin-top: clamp(26px, 4vw, 40px);
	font-family: var(--display);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.foot-proof {
	margin-top: 1em !important;
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--coral);
}

.card__areas {
	margin-top: .9em !important;
	padding-top: .9em;
	border-top: 1px solid var(--line);
	font-size: .78rem !important;
	letter-spacing: .04em;
	color: var(--text-faint) !important;
}

.card .link-arrow { margin-top: 1.3em; }

/* ==========================================================================
   11. Listing cards
   ========================================================================== */

.girls {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 2vw, 22px);
}

.girl {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .4s var(--ease), border-color .4s var(--ease);
}

.girl:hover { transform: translateY(-5px); border-color: var(--line-strong); }

.girl__photo {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	background:
		var(--surface-2);
}

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

.girl__new {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: .35em .75em;
	border-radius: 999px;
	background: var(--violet);
	color: #17102b;
	font-family: var(--display);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.girl__status {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .4em .8em;
	border-radius: 999px;
	background: rgba(13, 16, 26, .82);
	backdrop-filter: blur(6px);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.girl__status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.girl__status--live { color: var(--live); }
.girl__status--live i { box-shadow: 0 0 8px 1px var(--live); }
.girl__status--soon { color: var(--lavender); }
.girl__status--ask  { color: var(--text-faint); }

.girl__body {
	display: flex;
	flex-direction: column;
	gap: .55em;
	flex: 1;
	padding: 18px;
}

.girl__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.girl__head h3 { font-size: 1.08rem; }

.girl__rate {
	font-family: var(--display);
	font-size: .8rem;
	font-weight: 700;
	color: var(--coral);
	white-space: nowrap;
}

.girl__where {
	margin: 0;
	font-size: .8rem;
	color: var(--text-faint);
}

.girl__facts {
	display: grid;
	gap: .35em;
	margin: .5em 0 1.2em;
}

.girl__facts > div {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: .78rem;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--line);
}

.girl__facts dt { color: var(--text-faint); }
.girl__facts dd { margin: 0; color: var(--text-dim); text-align: right; }

.girl .btn { margin-top: auto; }

/* ==========================================================================
   12. Girl profile
   ========================================================================== */

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em;
	margin-bottom: clamp(22px, 3vw, 34px);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--text-faint);
}

.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--coral); }
.crumbs span[aria-hidden] { opacity: .4; }

.profile__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.girl__photo--lg {
	aspect-ratio: 3 / 4;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	position: sticky;
	top: 100px;
}

.girl__photo--lg .girl__status {
	left: 16px;
	bottom: 16px;
	font-size: .7rem;
}

.profile__info h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: .3em;
}

.profile__rate {
	display: flex;
	align-items: baseline;
	gap: .7em;
	flex-wrap: wrap;
	margin: 0 0 1.4em;
	font-family: var(--display);
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--coral);
}

.profile__rate span {
	font-family: var(--sans);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.profile__facts {
	display: grid;
	gap: 0;
	margin: 0 0 1.8em;
	border-top: 1px solid var(--line);
}

.profile__facts > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: .92rem;
}

.profile__facts dt {
	color: var(--text-faint);
	letter-spacing: .06em;
}

.profile__facts dd {
	margin: 0;
	color: var(--text);
	text-align: right;
}

.profile__facts dd a { color: var(--violet); }

.profile__body {
	margin-bottom: 1.8em;
	color: var(--text-dim);
	font-size: .96rem;
}

.profile .form__note { margin-top: 1.4em; }

/* ==========================================================================
   13. Area guide
   ========================================================================== */

/* Long-form area copy. Held to a readable measure rather than the full shell
   width — this is prose, not a layout. */
.area-guide {
	max-width: 760px;
}

.area-guide .section-head {
	margin-bottom: clamp(22px, 3vw, 32px);
}

.area-guide .entry__content p {
	color: var(--text-dim);
	font-size: 1.02rem;
	line-height: 1.78;
	margin-bottom: 1.3em;
}

.area-guide .entry__content p:first-of-type {
	color: var(--text);
	font-size: clamp(1.06rem, 1.4vw, 1.18rem);
}

.area-guide .entry__content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   14. Pricing
   ========================================================================== */

.price {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 32px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.price:hover {
	transform: translateY(-5px);
	border-color: var(--line-strong);
	background: var(--surface-2);
}

.price--feature {
	border-color: var(--coral-line);
	background: var(--surface-2);
	box-shadow: 0 26px 60px -34px rgba(255, 77, 110, .85);
}

.price__flag {
	position: absolute;
	top: 0;
	right: clamp(20px, 3vw, 28px);
	transform: translateY(-50%);
	padding: .45em 1em;
	border-radius: 999px;
	background: var(--coral);
	color: #fff;
	font-family: var(--display);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.price__name {
	font-family: var(--display);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: .8em;
}

.price__fig {
	display: block;
	font-family: var(--display);
	font-size: clamp(2.1rem, 3.6vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--text);
}

.price__fig sup {
	font-size: .38em;
	font-weight: 600;
	vertical-align: .95em;
	margin-right: .18em;
	color: var(--violet);
}

.price__per {
	display: block;
	margin-top: .7em;
	font-family: var(--sans);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.price__cap {
	display: block;
	margin-top: 1.1em;
	padding-top: 1.1em;
	border-top: 1px solid var(--line);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--violet);
}

.price__desc {
	margin: 1em 0 0;
	color: var(--text-dim);
	font-size: .92rem;
}

.price__list {
	list-style: none;
	margin: 1.4em 0 1.8em;
	padding: 0;
}

.price__list li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: .6em;
	font-size: .88rem;
	color: var(--text-dim);
}

.price__list li::before {
	content: "\2726";
	position: absolute;
	left: 0;
	top: -.05em;
	color: var(--coral);
	font-size: .8em;
}

.price .btn { margin-top: auto; }

/* Plain rate sheets — door prices, extras */
.sheet { border-top: 1px solid var(--line); }

.sheet__row {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) 2fr auto;
	gap: clamp(14px, 2.4vw, 32px);
	align-items: baseline;
	padding: clamp(16px, 2vw, 22px) 0;
	border-bottom: 1px solid var(--line);
	transition: padding-inline .4s var(--ease);
}

.sheet__row:hover { padding-inline: 10px; }

.sheet__when {
	font-family: var(--display);
	font-size: .98rem;
	font-weight: 600;
	color: var(--text);
}

.sheet__note {
	color: var(--text-dim);
	font-size: .92rem;
}

.sheet__fig {
	justify-self: end;
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--violet);
	white-space: nowrap;
}
.pricing-girls {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin: 28px 0;
}

.pricing-girl {
	overflow: hidden;
	background: #080808;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
}

.pricing-girl__image {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #111;
}

.pricing-girl__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pricing-girl__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #111;
}

.pricing-girl__body {
	padding: 14px;
}

.pricing-girl__title {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.3;
}

.pricing-girl__title a {
	color: #fff;
	text-decoration: none;
}

.pricing-girl__title a:hover {
	color: #ff4d6e;
}

.pricing-girl__excerpt {
	margin: 0 0 12px;
	color: #c7c7c7;
	font-size: 13px;
	line-height: 1.55;
}

.pricing-girl__link {
	color: #ff4d6e;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 900px) {
	.pricing-girls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.pricing-girls {
		gap: 10px;
	}

	.pricing-girl__body {
		padding: 11px;
	}

	.pricing-girl__title {
		font-size: 15px;
	}

	.pricing-girl__excerpt {
		display: none;
	}
}
/* ==========================================================================
   15. Locations
   ========================================================================== */

.venue {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 32px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}

.venue:hover {
	transform: translateY(-5px);
	border-color: var(--line-strong);
	background: var(--surface-2);
}

.venue--flagship {
	border-color: var(--coral-line);
	background: var(--surface-2);
}

.venue__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 1.1em;
}

.venue__city {
	display: block;
	font-family: var(--display);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: .7em;
}

.venue h3 { font-size: 1.16rem; }

.venue__note {
	color: var(--text-dim);
	font-size: .92rem;
	margin: 0 0 1.4em;
}

.badge {
	flex: 0 0 auto;
	padding: .4em .85em;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	font-family: var(--display);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}

.badge--live {
	border-color: var(--coral-line);
	background: var(--coral-soft);
	color: var(--coral);
}

.badge--soon {
	border-color: rgba(216, 210, 245, .28);
	color: var(--lavender);
}

.venue__meta {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}

.venue__meta li {
	display: flex;
	gap: 11px;
	margin-bottom: .7em;
	font-size: .89rem;
	color: var(--text-dim);
	line-height: 1.55;
}

.venue__meta svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: .25em;
	color: var(--violet);
}

.venue__meta a { color: var(--text-dim); }
.venue__meta a:hover { color: var(--violet); }

.venue__rooms {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: auto;
	padding-top: 4px;
}

.chip {
	padding: .38em .85em;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}

.chip--cap {
	border-color: var(--coral-line);
	color: var(--coral);
}

.venue__go { margin-top: 20px; }

/* ==========================================================================
   16. Contact
   ========================================================================== */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

.contact-card {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid var(--line);
}

.contact-card:last-child { border-bottom: 1px solid var(--line); }

.contact-card__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--violet);
}

.contact-card__ico svg { width: 16px; height: 16px; }
.contact-card h4 { margin-bottom: .25em; }
.contact-card p,
.contact-card a { font-size: .95rem; color: var(--text-dim); margin: 0; }
.contact-card a:hover { color: var(--violet); }

.form {
	padding: clamp(24px, 3.4vw, 38px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.field { margin-bottom: 16px; }

.field label {
	display: block;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: .55em;
}

.field input,
.field select,
.field textarea,
.search-form input[type="search"] {
	width: 100%;
	padding: .85em 1em;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--sans);
	font-size: .95rem;
	transition: border-color .3s var(--ease), background .3s var(--ease);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--coral);
	background: rgba(255, 255, 255, .06);
}

.field select option { background: var(--surface-2); color: var(--text); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form__note {
	margin-top: 14px;
	font-size: .78rem;
	color: var(--text-faint);
	line-height: 1.6;
}

.map {
	margin-top: clamp(28px, 4vw, 46px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--surface-2);
}

.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* FAQ */
.faq { 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: 20px;
	width: 100%;
	padding: 20px 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--display);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--text);
}

.faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.3rem;
	color: var(--coral);
	transition: transform .3s var(--ease);
}

.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }

.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s var(--ease);
}

.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--text-dim); font-size: .95rem; padding-bottom: 20px; margin: 0; }

/* ==========================================================================
   17. CTA band
   ========================================================================== */

.cta {
	position: relative;
	padding: clamp(64px, 9vw, 110px) 0;
	text-align: center;
	border-top: 1px solid var(--line);
	overflow: hidden;
}

.cta::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -55%;
	width: min(900px, 120vw);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: none;
	filter: blur(30px);
}

.cta .shell { position: relative; z-index: 2; }
.cta h2 { max-width: 18ch; margin: 0 auto .5em; }
.cta .lede { max-width: 620px; margin-inline: auto; }
.cta .btn-row { justify-content: center; }

/* ==========================================================================
   18. Posts
   ========================================================================== */
.comment-form-comment > label {
display:none;
}
#comment {
width:100%;
}
.comment-respond #submit {
background: var(--coral);
    color: #fff;
    box-shadow: 0 14px 34px -16px rgba(255, 77, 110, .9);
    padding: .68em 1.25em;
    font-size: .8rem;
    border: none;
}
.posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 32px);
}

.p-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .4s var(--ease), border-color .4s var(--ease);
}

.p-card:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.p-card__thumb { aspect-ratio: 16 / 10; overflow: hidden; }

.p-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}

.p-card:hover .p-card__thumb img { transform: scale(1.05); }

.p-card__body {
	display: flex;
	flex-direction: column;
	gap: .6em;
	flex: 1;
	padding: 22px;
}

.p-card__meta {
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.p-card h3 { font-size: 1.12rem; }
.p-card h3 a { color: var(--text); }
.p-card h3 a:hover { color: var(--coral); }
.p-card p { color: var(--text-dim); font-size: .92rem; margin: 0; }

.entry { max-width: 760px; margin-inline: auto; }
.entry__head { margin-bottom: clamp(28px, 4vw, 48px); }
.entry__head h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .4em; }

.entry__meta {
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.entry__content h2 { margin: 1.6em 0 .5em; }
.entry__content h3 { margin: 1.5em 0 .5em; }
.entry__content ul,
.entry__content ol { color: var(--text-dim); }
.entry__content img { border-radius: var(--radius); margin-block: 1.6em; }

.pager {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(34px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: .88rem;
}

.search-form { display: flex; gap: 10px; }
.search-form label { flex: 1; }

/* ==========================================================================
   19. Footer
   ========================================================================== */

#footer {
	border-top: 1px solid var(--line);
	padding: clamp(52px, 7vw, 84px) 0 30px;
	background: var(--ink-2);
}

.foot-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: clamp(26px, 4vw, 52px);
}

.foot-brand p {
	margin-top: 1.1em;
	color: var(--text-dim);
	font-size: .92rem;
	max-width: 34ch;
}

#footer h4 {
	font-family: var(--display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 1.3em;
}

#footer ul { list-style: none; margin: 0; padding: 0; }
#footer li { margin-bottom: .6em; font-size: .92rem; color: var(--text-dim); }
#footer a { color: var(--text-dim); }
#footer a:hover { color: var(--coral); }

.foot-social { display: flex; gap: 10px; margin-top: 1.4em; }

.foot-social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text-dim);
	transition: all .3s var(--ease);
}

.foot-social a:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-3px); }
.foot-social svg { width: 15px; height: 15px; }

#copyright {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(38px, 5vw, 60px);
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-size: .78rem;
	color: var(--text-faint);
}

/* ==========================================================================
   20. Floating enquiry widget
   ========================================================================== */

.hn-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.hn-fab__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(.94);
	transform-origin: bottom right;
	transition: all .3s var(--ease);
}

.hn-fab.is-open .hn-fab__items { opacity: 1; visibility: visible; transform: none; }

.hn-fab__item {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .7em 1.1em;
	border-radius: 999px;
	font-family: var(--display);
	font-size: .82rem;
	font-weight: 600;
	color: #fff;
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
	transition: transform .3s var(--ease);
}

.hn-fab__item:hover { color: #fff; transform: translateX(-3px); }
.hn-fab__item svg { width: 17px; height: 17px; }
.hn-fab__item--wa { background: var(--wa); }
.hn-fab__item--tg { background: var(--tg); }

.hn-fab__toggle {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--coral);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 16px 36px -14px rgba(255, 77, 110, .95);
	transition: transform .35s var(--ease);
}

.hn-fab__toggle svg { width: 22px; height: 22px; }
.hn-fab.is-open .hn-fab__toggle { transform: rotate(135deg); }

/* Single-channel widget: one tap straight into the chat, no toggle. Telegram
   blue rather than brand coral, matching .btn--tg elsewhere -- a chat bubble
   is recognised by its colour before it is read. */
.hn-fab--single .hn-fab__toggle {
	background: var(--tg);
	box-shadow: 0 16px 36px -14px rgba(42, 171, 238, .95);
}

.hn-fab--single .hn-fab__toggle:hover {
	transform: translateY(-3px);
}

.hn-fab--single .hn-fab__toggle svg {
	width: 24px;
	height: 24px;
}


/* ==========================================================================
   21. Age gate
   ========================================================================== */

.age-gate {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: var(--gut);
	background: rgba(8, 3, 6, .94);
	backdrop-filter: blur(10px);
}

.age-gate[hidden] { display: none; }

.age-gate__box {
	max-width: 440px;
	text-align: center;
	padding: clamp(28px, 4vw, 40px);
	background: var(--surface-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}

.age-gate__box h2 { font-size: 1.6rem; margin-bottom: .5em; }
.age-gate__box p { color: var(--text-dim); font-size: .93rem; }
.age-gate__box .btn-row { justify-content: center; }

/* ==========================================================================
   22. Reveal animation
   ========================================================================== */

.js .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   23. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.foot-grid  { grid-template-columns: 1fr 1fr; }
	.hero__meta { grid-template-columns: repeat(2, 1fr); }
	.strip      { grid-template-columns: repeat(2, 1fr); }
	.grid--4    { grid-template-columns: repeat(2, 1fr); }
	.girls      { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.masthead__nav,
	.masthead__cta { display: none; }

	.burger { display: flex; margin-left: auto; }

	.split,
	.contact-grid,
	.grid--2,
	.grid--3,
	.profile__grid,
	.posts { grid-template-columns: 1fr; }

	.girl__photo--lg { position: static; max-width: 420px; }

	.sheet__row {
		grid-template-columns: 1fr auto;
		align-items: start;
	}

	.sheet__note { grid-column: 1 / -1; }

	.girls { grid-template-columns: repeat(2, 1fr); }

	.split > div:first-child { order: 2; }
}

@media (max-width: 600px) {
	.hero__meta { grid-template-columns: 1fr 1fr; gap: 14px; }
	.foot-grid  { grid-template-columns: 1fr; }
	.field-row  { grid-template-columns: 1fr; }
	.svc        { grid-template-columns: 46px 1fr; }
	.svc__go    { display: none; }
	.btn        { width: 100%; }
	.btn-row    { flex-direction: column; }
	.hn-fab     { right: 14px; bottom: 14px; }
	.grid--4    { grid-template-columns: 1fr; }

	.sheet__row { grid-template-columns: 1fr; }
	.sheet__fig { justify-self: start; }
	.girls      { grid-template-columns: repeat(2, 1fr); }
	.girl__body { padding: 14px; }
}

/* ==========================================================================
   24. Penang variant
   --------------------------------------------------------------------------
   Everything that makes this site look unlike the rest of the brand lives
   here. Colour and type tokens are deliberately NOT touched -- the palette,
   Sora/Inter and the availability green are identical to the national and KL
   themes. The difference is geometry and composition: squared instead of
   pill-shaped, flat bordered cards instead of raised translucent ones, and a
   hero built on a rule rather than a centred glow.

   Delete this section and Penang looks exactly like the other two again.
   ========================================================================== */

/* --- Geometry: squared off ---------------------------------------------- */

:root {
	--radius:    4px;
	--radius-sm: 2px;
}

.btn,
.chip,
.badge,
.girl__new,
.girl__status,
.price__flag,
.svc__go,
.contact-card__ico,
.value__ico,
.foot-social a,
.burger {
	border-radius: 2px;
}

.brand__dot {
	border-radius: 1px;
}

.hn-fab--single .hn-fab__toggle {
	border-radius: 6px;
}

/* --- Section rhythm: a hairline above every heading ---------------------- */

.section--alt {
	background: rgba(255, 255, 255, .022);
}

.section-head {
	border-top: 1px solid var(--line);
	padding-top: clamp(20px, 3vw, 30px);
}

/* --- Eyebrow: a boxed tag rather than a leading dash --------------------- */

.eyebrow {
	padding: .5em .9em;
	border: 1px solid var(--coral-line);
	border-radius: 2px;
}

.eyebrow::before {
	display: none;
}

/* --- Cards: flat and bordered, accent on the left, no hover lift --------- */

.card,
.venue,
.price,
.quote,
.girl,
.p-card,
.form {
	background: transparent;
}

.card:hover,
.venue:hover,
.price:hover,
.girl:hover,
.p-card:hover {
	transform: none;
	background: rgba(255, 255, 255, .025);
	border-color: var(--line-strong);
}

/* The accent rule runs down the left edge instead of across the top. */
.card::before {
	inset: 0 auto 0 0;
	width: 2px;
	height: auto;
	transform: scaleY(0);
	transform-origin: top;
}

.card:hover::before {
	transform: scaleY(1);
}

.price--feature,
.venue--flagship {
	background: rgba(255, 255, 255, .035);
}

.price--feature {
	box-shadow: none;
	border-color: var(--coral);
}

/* --- Tiles: left-aligned, not centred ------------------------------------ */

.tile {
	text-align: left;
	align-items: flex-start;
	padding: 14px;
}

/* --- Listing cards: square crop, availability top-right ------------------ */

.girl__photo {
}

.girl__new {
	left: auto;
	right: 12px;
}

/* --- Hero: a vertical rule instead of a centred glow --------------------- */

.hero {
	min-height: clamp(560px, 82vh, 820px);
}

.hero__inner {
	padding-left: clamp(18px, 3vw, 36px);
	border-left: 2px solid var(--coral);
}

.hero__glow {
	left: 22%;
	top: 8%;
	opacity: .72;
}

/* Vertical rules read as columns rather than graph paper. */
.hero__grid {
	background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 96px 100%;
	mask-image: linear-gradient(90deg, #000, transparent 78%);
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
	opacity: .8;
}

.page-hero__glow {
	left: 70%;
	opacity: .7;
}

/* --- Editorial rail: heading left, content right ------------------------ */

@media (min-width: 1025px) {

	/* Only sections that actually have a heading, and never a .split (its two
	   columns are already the layout) or a centred head. */
	.section > .shell:has(> .section-head):not(.split):not(:has(> .section-head--center)) {
		display: grid;
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
		gap: clamp(36px, 5vw, 88px);
		align-items: start;
	}

	/* No grid-row span and no sticky: "1 / -1" only reaches the end of the
	   EXPLICIT grid, which is row 1 here, so it silently collapsed and left
	   dead space. The head simply sits at the top of the rail instead. */
	.section > .shell:has(> .section-head):not(.split):not(:has(> .section-head--center)) > .section-head {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
		max-width: none;
	}

	.section > .shell:has(> .section-head):not(.split):not(:has(> .section-head--center)) > *:not(.section-head) {
		grid-column: 2;
	}

	/* A rail heading is a column, so it sets its own scale rather than the
	   full-width one. */
	.section > .shell:has(> .section-head) > .section-head h2 {
		font-size: clamp(1.6rem, 2.2vw, 2.3rem);
	}

	.section > .shell:has(> .section-head) > .section-head .lede {
		font-size: .96rem;
	}

	/* The content column is narrower than a full row, so the dense grids step
	   down one. */
	.section > .shell:has(> .section-head):not(.split) .grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.section > .shell:has(> .section-head):not(.split) .girls {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Hero split: copy beside the area map -------------------------------- */

.hero--split {
	min-height: 0;
	padding: clamp(120px, 14vw, 170px) 0 clamp(50px, 7vw, 90px);
	align-items: center;
}

.hero__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.hero--split .hero__inner {
	max-width: none;
}

/* The italic gradient face has deep descenders and line-height 1.06 was
   cutting the g in "Penang". Background-clip text has no overflow to spare,
   so the room has to come from the line box. */
.hero--split h1 {
	line-height: 1.14;
	padding-bottom: .06em;
}

.hero--split h1 .line {
	padding-bottom: .04em;
}

.hero--split .hero__inner .lede {
	max-width: none;
}

.hero__aside {
	min-width: 0;
}

@media (max-width: 1024px) {
	.hero__split {
		/* minmax(0,1fr), not 1fr: a plain fr track has min-width:auto and will
		   not shrink below its longest word, which pushed the whole container
		   wider than the viewport on phones. */
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(32px, 6vw, 48px);
	}
}

@media (max-width: 600px) {
	.hero__inner {
		padding-left: 14px;
		border-left-width: 1px;
	}
}

.area-top__head {
	max-width: 720px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: center;
}

.area-top__head h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: .4em;
}

.area-top__head .eyebrow::before { display: none; }

.area-fallback {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
	padding: clamp(26px, 3.4vw, 40px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.area-fallback p {
	color: var(--text-dim);
	margin-bottom: 1.4em;
}

.tier {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(30px, 4vw, 70px);
	align-items: start;
}

.tier__head h2 {
	font-size: clamp(1.5rem, 2.2vw, 2.1rem);
	margin-bottom: .5em;
}

.tier__head .lede {
	font-size: .96rem;
	margin-bottom: 1.6em;
}

.tier__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(24px, 3vw, 44px);
}

.rates h3 {
	font-size: .76rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: 1em;
	padding-bottom: .8em;
	border-bottom: 1px solid var(--coral-line);
}

.rate {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
}

.rate__label {
	font-size: .94rem;
	color: var(--text);
}

.rate__label em {
	display: block;
	font-style: normal;
	font-size: .78rem;
	color: var(--text-faint);
	margin-top: 2px;
}

.rate__price {
	font-family: var(--display);
	font-size: .96rem;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
}

.rate__price b {
	display: inline-block;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--coral);
	padding: .25em .5em;
	border-radius: 2px;
	margin-right: .5em;
	vertical-align: .12em;
}

.rate--flag .rate__label { color: var(--text); }

.rates--addons .rate__price { color: var(--coral); }

@media (max-width: 900px) {
	.tier { grid-template-columns: minmax(0, 1fr); }
}

.zone-label {
	font-family: var(--display);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: clamp(24px, 3vw, 38px);
	padding-bottom: .9em;
	border-bottom: 1px solid var(--coral-line);
}

.area-block {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: clamp(26px, 4vw, 60px);
	align-items: start;
	padding: clamp(26px, 3.4vw, 44px) 0;
	border-bottom: 1px solid var(--line);
}

.area-block:last-child { border-bottom: 0; padding-bottom: 0; }

.area-block__head h2 {
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	margin-bottom: .45em;
}

.area-block__head h2 a { color: var(--text); }
.area-block__head h2 a:hover { color: var(--coral); }

.area-block__count {
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--coral);
	margin-bottom: .5em;
}

.area-block__travel {
	font-size: .88rem;
	color: var(--text-faint);
	margin-bottom: 1.3em;
}

.area-block__empty {
	color: var(--text-dim);
	font-size: .95rem;
	margin-bottom: 1.2em;
	max-width: 46ch;
}

.girls--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 620px;
}
/* ==========================================
   ALL AREAS — 2 COLUMNS DESKTOP
   ========================================== */

.area-zone-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	align-items: stretch;
	width: 100%;
}

.area-zone-grid .area-block {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	background: #050505;
}

.area-zone-grid .area-block__head {
	width: 100%;
	margin-bottom: 24px;
}

.area-zone-grid .area-block__girls {
	width: 100%;
	min-width: 0;
	margin-top: auto;
}


/* 2 girls inside each area */

.area-zone-grid .girls--pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
}


/* Make cards behave inside half-width area block */

.area-zone-grid .girls--pair > * {
	min-width: 0;
	width: 100%;
}
/* =========================================================
   SERVICES + PRICE TABLES
   ========================================================= */
.service-price-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	width: 100%;
}

.service-price-column {
	min-width: 0;
	width: 100%;
}

.service-price-header {
	margin: 0 0 18px;
}

.service-price-header h2,
.service-price-header h3 {
	margin: 0;
	color: #fff;
	line-height: 1.2;
}

.service-price-header h2 {
	font-size: clamp(26px, 3vw, 38px);
}

.service-price-header h3 {
	font-size: clamp(22px, 2.3vw, 30px);
}

.service-price-eyebrow {
	display: block;
	margin: 0 0 7px;
	color: #ff4d6e;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.service-table-wrap,
.price-table-wrap,
.extra-service-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	background: #050505;
}

.service-table,
.price-table,
.extra-service-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.service-table th,
.service-table td,
.price-table th,
.price-table td,
.extra-service-table th,
.extra-service-table td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(255,255,255,.09);
	text-align: left;
	vertical-align: middle;
}

.service-table thead th,
.price-table thead th,
.extra-service-table thead th {
	background: #101010;
	color: #ff4d6e;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.service-table tbody td,
.price-table tbody td,
.extra-service-table tbody td {
	color: #ddd;
	font-size: 14px;
	line-height: 1.45;
}

.service-table tbody tr:last-child td,
.price-table tbody tr:last-child td,
.extra-service-table tbody tr:last-child td {
	border-bottom: 0;
}

.service-table td:first-child {
	width: 44%;
	color: #fff;
	font-weight: 600;
}

.price-table td:first-child,
.price-table td:nth-child(2),
.extra-service-table td:first-child {
	color: #fff;
}

.price-table td:nth-child(2) strong,
.extra-service-table td:last-child strong {
	color: #ff4d6e;
}

.single-price-duration {
	display: block;
	margin-top: 3px;
	color: #999;
	font-size: 12px;
	font-weight: 400;
}

.extra-service-block {
	margin-top: 32px;
}

.service-price-header--extra {
	margin-bottom: 14px;
}

.extra-service-table td:last-child,
.extra-service-table th:last-child {
	text-align: right;
}

/* Tablet / mobile: stack into one column */
@media (max-width: 900px) {
	.service-price-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 600px) {
	.service-table th,
	.service-table td,
	.price-table th,
	.price-table td,
	.extra-service-table th,
	.extra-service-table td {
		padding: 12px;
	}

	.price-table thead {
		display: none;
	}

	.price-table,
	.price-table tbody,
	.price-table tr,
	.price-table td {
		display: block;
		width: 100%;
	}

	.price-table tr {
		padding: 12px 14px;
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

	.price-table tr:last-child {
		border-bottom: 0;
	}

	.price-table td {
		display: flex;
		justify-content: space-between;
		gap: 18px;
		padding: 6px 0;
		border: 0;
		text-align: right;
	}

	.price-table td::before {
		content: attr(data-label);
		flex: 0 0 38%;
		color: #888;
		font-size: 11px;
		font-weight: 700;
		text-align: left;
		text-transform: uppercase;
	}
}
/* Tablet */

@media (max-width: 900px) {

	.area-zone-grid {
		gap: 20px;
	}

	.area-zone-grid .area-block {
		padding: 22px;
	}

	.area-block { grid-template-columns: minmax(0, 1fr); }
	.girls--pair { max-width: none; }
}


/* Mobile — one area per row */

@media (max-width: 767px) {

	.area-zone-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.area-zone-grid .area-block {
		width: 100%;
		padding: 20px;
	}

}


/* Keep 2 girls per area on normal mobile */

@media (max-width: 480px) {

	.area-zone-grid .girls--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.area-zone-grid .area-block {
		padding: 16px;
	}

}