/* =========================================================================
   HiSalon — design system

   Read off the brand assets: a black script wordmark, and a shopfront of warm
   timber, tan leather, brass and cream. So: bone ground, near-black ink, one
   camel accent, and an editorial serif doing the talking. No second accent —
   the photography is meant to be the colour on this site.
   ====================================================================== */

:root {
	/* Ink & ground ------------------------------------------------------ */
	--ink:        #14110F;   /* warm near-black, matches the wordmark */
	--ink-soft:   #433C35;
	--ink-muted:  #6F665D;
	--ink-faint:  #9A9188;

	--bone:       #F7F2EA;   /* page ground */
	--bone-deep:  #EFE7DA;   /* alternating sections */
	--paper:      #FFFDFA;   /* cards */
	--line:       #E2D8C9;
	--line-soft:  #EEE6DA;

	/* Accent ------------------------------------------------------------ */
	--camel:      #B08355;
	--camel-deep: #8C6640;
	--camel-wash: #F1E4D4;

	/* On dark ----------------------------------------------------------- */
	--on-dark:       #FFFDFA;
	--on-dark-soft:  rgba(255, 253, 250, .76);
	--on-dark-muted: rgba(255, 253, 250, .54);
	--on-dark-line:  rgba(255, 253, 250, .16);

	/* Type -------------------------------------------------------------- */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
	             Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
	             "Microsoft YaHei", "Noto Sans SC", sans-serif;
	--font-display: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman",
	                "Noto Serif SC", "Songti SC", "SimSun", serif;

	/* Rhythm ------------------------------------------------------------ */
	--shell:     1160px;
	--gutter:    clamp(20px, 5vw, 56px);
	--section-y: clamp(64px, 8vw, 128px);
	--radius:    2px;        /* almost square — rounded corners read "template" */
	--radius-lg: 4px;

	--shadow-sm: 0 1px 2px rgba(20, 17, 15, .04), 0 6px 20px rgba(20, 17, 15, .05);
	--shadow-md: 0 2px 8px rgba(20, 17, 15, .06), 0 24px 60px rgba(20, 17, 15, .09);

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

/* Chinese sets at a slightly smaller optical size and needs more leading;
   the serif display face also has far fewer weights in CJK, so headings drop
   to the Noto Serif stack rather than faking one. */
.hs-lang-zh {
	--font-display: "Noto Serif SC", "Songti SC", "SimSun", ui-serif, Georgia, serif;
}

/* =========================================================================
   Reset & base
   ====================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
}

body {
	margin: 0;
	background: var(--bone);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.hs-lang-zh body,
body.hs-lang-zh { line-height: 1.85; }

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

a { color: inherit; text-decoration: none; }
p a:not(.btn):not(.link-arrow) {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--line);
	transition: text-decoration-color .2s var(--ease);
}
p a:not(.btn):not(.link-arrow):hover { text-decoration-color: var(--camel); }

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

/* figure carries a UA margin of 1em 40px, which silently widens every grid
   gap it sits in. */
figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
	outline: 2px solid var(--camel);
	outline-offset: 3px;
}

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 50%; top: 0;
	transform: translate(-50%, -120%);
	z-index: 200; padding: 12px 22px;
	background: var(--ink); color: var(--on-dark);
	font-size: 14px; letter-spacing: .04em;
	transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* =========================================================================
   Layout primitives
   ====================================================================== */

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

.narrow { max-width: 720px; }
.center { text-align: center; }

.section { padding-block: var(--section-y); }
.section-alt { background: var(--bone-deep); }

.section-head {
	max-width: 640px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}

/* =========================================================================
   Type
   ====================================================================== */

.eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--camel-deep);
}
.hs-lang-zh .eyebrow { letter-spacing: .14em; }

.h1, .h2, .h3 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -.005em;
	line-height: 1.12;
	margin: 0 0 .5em;
	color: var(--ink);
	text-wrap: balance;
}

.h1 { font-size: clamp(38px, 6vw, 68px); }
.h2 { font-size: clamp(30px, 4.2vw, 48px); }
.h3 { font-size: clamp(23px, 2.6vw, 30px); }

/* CJK breaks between any two characters by default, which snaps headings in
   half mid-word (良/好). keep-all confines the break to the punctuation that
   is already in the copy — and every heading here is comma-separated, so it
   has somewhere to break. text-wrap: balance is dropped alongside it: the two
   fight, and the punctuation break is the one that reads. */
.hs-lang-zh .h1,
.hs-lang-zh .h2,
.hs-lang-zh .h3,
.hs-lang-zh .hero-line,
.hs-lang-zh .pillar-title,
.hs-lang-zh .svc-group-title,
.hs-lang-zh .value-title {
	line-height: 1.3;
	letter-spacing: .01em;
	word-break: keep-all;
	text-wrap: initial;
}

.lead {
	max-width: 62ch;
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--ink-soft);
}
.section-head .lead { margin-inline: auto; }

.prose p { max-width: 68ch; color: var(--ink-soft); }

.fineprint {
	margin-top: 28px;
	font-size: 14px;
	color: var(--ink-muted);
}

/* =========================================================================
   Buttons & links
   ====================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .22s var(--ease), color .22s var(--ease),
	            border-color .22s var(--ease), transform .22s var(--ease);
}
.hs-lang-zh .btn { letter-spacing: .06em; text-transform: none; font-size: 15px; }

.btn:active { transform: translateY(1px); }
.btn-sm { padding: 11px 20px; font-size: 12.5px; }

.btn-primary  { background: var(--ink); color: var(--on-dark); }
.btn-primary:hover { background: var(--camel-deep); }

.btn-ghost    { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--on-dark); }

.btn-invert   { background: var(--on-dark); color: var(--ink); }
.btn-invert:hover { background: var(--camel-wash); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--camel-deep);
	border-bottom: 1px solid var(--line);
	padding-bottom: 4px;
	transition: border-color .22s var(--ease), color .22s var(--ease);
}
.hs-lang-zh .link-arrow { letter-spacing: .05em; text-transform: none; font-size: 15px; }
.link-arrow:hover { color: var(--ink); border-color: var(--camel); }
.link-arrow .icon { transition: transform .22s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 17px; height: 17px; }

.big-link {
	font-family: var(--font-display);
	font-size: clamp(24px, 2.4vw, 30px);
	letter-spacing: .01em;
}

/* =========================================================================
   Header
   ====================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 242, 234, .88);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
}

.brand { flex: none; }
.brand-mark {
	width: auto;
	height: 30px;
	transition: opacity .2s var(--ease);
}
.brand:hover .brand-mark { opacity: .7; }

.nav {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
}

.nav-list {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
}
.nav-list a {
	position: relative;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-soft);
	padding-block: 6px;
	transition: color .2s var(--ease);
}
.hs-lang-zh .nav-list a { letter-spacing: .05em; text-transform: none; font-size: 15.5px; }
.nav-list a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: var(--camel);
	transform: scaleX(0); transform-origin: left;
	transition: transform .24s var(--ease);
}
.nav-list a:hover { color: var(--ink); }
.nav-list a:hover::after,
.nav-list a.is-current::after { transform: scaleX(1); }
.nav-list a.is-current { color: var(--ink); }

.nav-tail { display: flex; align-items: center; gap: 18px; }

/* Language switcher ----------------------------------------------------- */

.lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12.5px;
	letter-spacing: .08em;
}
.lang-option {
	padding: 5px 9px;
	color: var(--ink-faint);
	border-radius: var(--radius);
	transition: color .2s var(--ease), background-color .2s var(--ease);
}
.lang-option:hover { color: var(--ink); }
.lang-option.is-active { color: var(--ink); background: var(--camel-wash); }

.site-footer .lang-option { color: var(--on-dark-muted); }
.site-footer .lang-option:hover { color: var(--on-dark); }
.site-footer .lang-option.is-active {
	color: var(--on-dark);
	background: rgba(255, 253, 250, .12);
}

/* Mobile ---------------------------------------------------------------- */

.header-mobile { display: none; align-items: center; gap: 10px; }

.nav-toggle {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	padding: 0; border: 0;
	background: none; cursor: pointer;
	color: var(--ink);
}
.nav-toggle-bars { display: grid; gap: 6px; width: 22px; }
.nav-toggle-bars i {
	display: block; height: 1.5px;
	background: currentColor;
	transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 900px) {
	.header-mobile { display: flex; }
	.nav-tail .lang { display: none; }

	.nav {
		position: fixed;
		inset: 78px 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px var(--gutter) 32px;
		background: var(--bone);
		border-bottom: 1px solid var(--line);
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }

	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list a {
		display: block;
		padding: 16px 0;
		border-bottom: 1px solid var(--line-soft);
		font-size: 16px;
	}
	.nav-list a::after { display: none; }

	.nav-tail { margin-top: 22px; }
	.nav-tail .btn { width: 100%; }
}

/* =========================================================================
   Hero
   ====================================================================== */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(82vh, 760px);
	padding-block: clamp(72px, 10vw, 128px);
	background: var(--ink);
	color: var(--on-dark);
	overflow: hidden;
}

.hero-media {
	position: absolute;
	inset: 0;
	background: var(--ink);
}

.hero-media video,
.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-pos, center 42%);
	/* Pulled towards the palette: full-saturation stock footage reads as
	   footage, and the page only has one accent colour to spend. */
	filter: var(--hero-filter, saturate(.72) contrast(1.04));
}

/* The poster carries the frame until (and unless) the source is attached, so
   there is never an empty black box while the video loads. */
.hero-video { display: block; }

/* Scrim, heaviest on the left where the copy sits. The hero type is light on
   whatever photograph is behind it, so contrast cannot be left to the image. */
.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Directional: heaviest under the copy on the left. */
		linear-gradient(96deg,
			rgba(18, 15, 13, var(--scrim-1, .95)) 0%,
			rgba(18, 15, 13, var(--scrim-2, .88)) 42%,
			rgba(18, 15, 13, var(--scrim-3, .66)) 74%,
			rgba(18, 15, 13, var(--scrim-4, .58)) 100%),
		/* Top and bottom, so the sticky header and the section seam both land
		   on something settled rather than on whatever the frame is doing. */
		linear-gradient(180deg, rgba(18, 15, 13, .62) 0%, transparent 26%,
		                        transparent 70%, rgba(18, 15, 13, .58) 100%),
		/* A wash to tie the footage to the palette. */
		linear-gradient(0deg, var(--hero-wash, rgba(90, 62, 38, .22)),
		                      var(--hero-wash, rgba(90, 62, 38, .22)));
}

/* =========================================================================
   Art directions

   Three media sets ship side by side while the client picks one, each graded
   for what its footage actually is. Everything else — layout, type, palette —
   is identical: the direction is the photography, not a different site.
   ====================================================================== */

/* B · Studio. A tan sweep behind dark hair, already the brand's camel. The
   plate is clean, so the scrim can lift and let the backdrop read as colour
   rather than as something being hidden. */
.hs-style-b {
	--scrim-1: .90; --scrim-2: .76; --scrim-3: .42; --scrim-4: .30;
	--hero-wash: rgba(70, 48, 30, .14);
	--hero-filter: saturate(.85) contrast(1.06);
	--hero-pos: center 38%;
}

/* C · Daylight. Backlit and blown out on purpose, which fights light type —
   so this one needs the heaviest scrim of the three, and the warm wash comes
   off entirely to keep the highlights from going orange. */
.hs-style-c {
	--scrim-1: .92; --scrim-2: .84; --scrim-3: .62; --scrim-4: .52;
	--hero-wash: rgba(40, 32, 26, .26);
	--hero-filter: saturate(.62) contrast(1.02) brightness(.94);
	--hero-pos: center 46%;
}

/* The preview-only art-direction switcher. Deleted with inc/preview.php. */
.style-switch {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 300;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 6px 6px 14px;
	background: rgba(18, 15, 13, .90);
	backdrop-filter: blur(10px);
	border-radius: 999px;
	box-shadow: 0 8px 30px rgba(18, 15, 13, .3);
	font-size: 12.5px;
	color: var(--on-dark-muted);
}
.style-switch-label {
	margin-right: 6px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 10.5px;
}
.style-switch-opt {
	padding: 7px 13px;
	border-radius: 999px;
	color: var(--on-dark-soft);
	white-space: nowrap;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.style-switch-opt b { font-weight: 600; margin-right: 4px; }
.style-switch-opt:hover { color: var(--on-dark); background: rgba(255, 253, 250, .10); }
.style-switch-opt.is-active { color: var(--ink); background: var(--on-dark); }

@media (max-width: 620px) {
	.style-switch { font-size: 11px; padding-left: 10px; gap: 2px; }
	.style-switch-label { display: none; }
	.style-switch-opt { padding: 7px 10px; }
}

.hero-inner { position: relative; max-width: 780px; }

.hero-title { margin: 0 0 24px; }

.hero-wordmark {
	width: clamp(240px, 34vw, 400px);
	height: auto;
	margin-bottom: clamp(20px, 3vw, 34px);
}

.hero-line {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 5.4vw, 62px);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--on-dark);
	text-wrap: balance;
}
.hs-lang-zh .hero-line { line-height: 1.3; letter-spacing: .02em; }

.hero-lead {
	max-width: 56ch;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.75;
	color: var(--on-dark-soft);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}
.hero .btn-primary { background: var(--on-dark); color: var(--ink); }
.hero .btn-primary:hover { background: var(--camel-wash); }
.hero .btn-ghost { border-color: var(--on-dark-line); color: var(--on-dark); }
.hero .btn-ghost:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

.hero-est {
	margin-top: clamp(40px, 6vw, 72px);
	font-size: 11.5px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--on-dark-muted);
}

/* =========================================================================
   Pillars
   ====================================================================== */

.pillar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(28px, 4vw, 56px);
}

.pillar { padding-top: 26px; border-top: 1px solid var(--line); }
.pillar-icon { display: block; color: var(--camel); margin-bottom: 18px; }

.pillar-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
	margin: 0 0 12px;
}

.pillar p { color: var(--ink-soft); }

/* =========================================================================
   Split sections
   ====================================================================== */

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

.about-split .split-media { order: -1; }

@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; }
	.about-split .split-media { order: 0; }
}

.split-body .h2 { margin-bottom: .55em; }
.split-body p { color: var(--ink-soft); }
.split-body .link-arrow { margin-top: 10px; }

/* Photo placeholders ---------------------------------------------------- */

.ph {
	display: grid;
	place-items: center;
	background: var(--camel-wash);
	border: 1px dashed var(--camel);
	color: var(--camel-deep);
	font-size: 12px;
	letter-spacing: .06em;
	text-align: center;
	padding: 16px;
}
.ph span { opacity: .8; }
.ph-portrait { aspect-ratio: 4 / 5; }
.ph-tile     { aspect-ratio: 1 / 1; }

/* Real imagery ---------------------------------------------------------- */

.shot {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--camel-wash);
}
.shot-portrait { aspect-ratio: 4 / 5; }
.shot-tile     { aspect-ratio: 1 / 1; transition: transform .5s var(--ease); }

.tile { overflow: hidden; }
.tile:hover .shot-tile { transform: scale(1.04); }

/* =========================================================================
   Gallery tiles
   ====================================================================== */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.6vw, 20px);
	margin-bottom: clamp(36px, 5vw, 56px);
}
.tile-grid-lg { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 700px) {
	.tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Page head
   ====================================================================== */

.page-head {
	padding-block: clamp(56px, 8vw, 104px) clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--line);
}
.page-head .lead { margin-top: 20px; }

/* =========================================================================
   Services
   ====================================================================== */

.svc-group { margin-bottom: clamp(48px, 6vw, 80px); }
.svc-group:last-of-type { margin-bottom: 0; }

.svc-group-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(26px, 3vw, 36px);
	margin: 0 0 8px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--ink);
}

.svc {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 28px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line-soft);
}

.svc-main { flex: 1 1 auto; }

.svc-name {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 4px;
	letter-spacing: -.005em;
}

.svc-text {
	margin: 0;
	font-size: 15px;
	color: var(--ink-muted);
	max-width: 52ch;
}

.svc-price {
	flex: none;
	margin: 0;
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--camel-deep);
	white-space: nowrap;
}

@media (max-width: 560px) {
	.svc { flex-direction: column; gap: 8px; }
	.svc-price { font-size: 20px; }
}

/* =========================================================================
   Values (about)
   ====================================================================== */

.value-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(24px, 3.5vw, 48px);
}

.value {
	background: var(--paper);
	border: 1px solid var(--line-soft);
	padding: clamp(26px, 3vw, 36px);
}

.value-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.25;
	margin: 0 0 12px;
}
.value p { color: var(--ink-soft); font-size: 16px; }

/* =========================================================================
   Contact
   ====================================================================== */

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

@media (max-width: 900px) {
	.contact-split { grid-template-columns: 1fr; }
}

.detail { margin-bottom: 36px; }
.detail:last-child { margin-bottom: 0; }

.detail-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--camel-deep);
}
.hs-lang-zh .detail-title { letter-spacing: .1em; }

.detail p { color: var(--ink-soft); }

.hours li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink-soft);
	font-size: 16px;
}
.hours li:last-child { border-bottom: 0; }

/* =========================================================================
   Form
   ====================================================================== */

.booking {
	background: var(--paper);
	border: 1px solid var(--line);
	padding: clamp(26px, 4vw, 48px);
	scroll-margin-top: 100px;
}

.booking-intro { color: var(--ink-muted); font-size: 15px; margin-bottom: 26px; }
.booking-alt { margin: 22px 0 0; color: var(--ink-muted); font-size: 15px; }
.booking-alt a { color: var(--ink); white-space: nowrap; }

.field { margin: 0 0 18px; }
.field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--ink-soft);
}
.req { color: var(--camel-deep); }

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bone);
	color: var(--ink);
	font: inherit;
	font-size: 16px;   /* iOS zooms in below 16 */
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--camel);
	background: var(--paper);
	outline: none;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { margin: 26px 0 0; }
.form-actions .btn { width: 100%; }

.form-status {
	margin: 16px 0 0;
	font-size: 15px;
	min-height: 1.5em;
}
.form-status.is-ok   { color: var(--camel-deep); }
.form-status.is-fail { color: #A2402F; }

.form.is-busy { opacity: .6; pointer-events: none; }

/* =========================================================================
   CTA band
   ====================================================================== */

.cta-band {
	background: var(--ink);
	color: var(--on-dark);
	text-align: center;
}
.cta-band .h2 { color: var(--on-dark); }
.cta-band p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--on-dark-soft);
}
.cta-inner .btn { margin-top: 30px; }

/* =========================================================================
   Footer
   ====================================================================== */

.site-footer {
	background: var(--ink);
	color: var(--on-dark-soft);
	padding-top: clamp(56px, 7vw, 88px);
	font-size: 15px;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

@media (max-width: 800px) {
	.footer-inner { grid-template-columns: 1fr; gap: 36px; }
}

.footer-mark { width: 180px; height: auto; margin-bottom: 20px; }
.footer-blurb { max-width: 38ch; color: var(--on-dark-muted); }

.footer-nav li { margin-bottom: 11px; }
.footer-nav a { transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--on-dark); }

.footer-contact a { transition: color .2s var(--ease); }
.footer-contact a:hover { color: var(--camel); }
.footer-address { color: var(--on-dark-muted); }

.footer-base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-block: 24px;
	border-top: 1px solid var(--on-dark-line);
	font-size: 13px;
	color: var(--on-dark-muted);
}
.footer-base p { margin: 0; }

/* =========================================================================
   Entrance
   ====================================================================== */

/* Gated on .js, which a one-line inline script in <head> sets before paint.
   Without it the elements are simply visible — no flash, and no content that
   only appears if a script runs. */
.js .reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* =========================================================================
   Misc
   ====================================================================== */

.notfound { padding-block: clamp(80px, 12vw, 160px); }
.notfound .btn { margin-top: 28px; }

.entry { padding-block: 28px; border-bottom: 1px solid var(--line); }

/* WeChat QR on the Visit page. White quiet zone kept so phones can scan it. */
.wechat-qr { display: block; width: 180px; height: 180px; background: #fff; padding: 8px; border: 1px solid var(--line); }