/* Aurum Spa — the only stylesheet.
   Palette values are contrast-verified; see the table in
   docs/superpowers/specs/2026-08-10-aurum-redesign-design.md §3.
   tools/verify.py recomputes every ratio from these tokens, so changing a
   value here fails the build if it drops a text pair below WCAG AA. */

:root {
	--ground: #FAF7F2;
	--surface: #F1EBE3;
	--ink: #1F2421;
	--muted: #6C6459;
	--accent: #A85B40;
	--accent-ink: #8F4A31;
	--deep: #2C3E36;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-14: 56px;
	--space-24: 96px;

	--measure: 1140px;
	--radius: 2px;

	/* Single source of truth for the sticky header's height. The hero subtracts
	   it to fill exactly the rest of the first screen, so the two must never
	   drift apart. */
	--header-h: 68px;

	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Self-hosted, subset to latin + U+20B9. Google's prebuilt latin subsets
   omit the rupee sign, which every price on this page needs. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 400 17px/1.7 var(--sans);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-4);
	font-family: var(--serif);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.15rem; }

p {
	margin: 0 0 var(--space-4);
	max-width: 68ch;
}

a {
	color: var(--accent-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

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

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

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

/* Focus must stay visible — the page is navigated by keyboard and by
   screen reader, and the template's old outline:none is not coming back. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --accent on --deep is 2.29:1 — below WCAG 1.4.11's 3:1 floor for
   non-text indicators (spec §3: "must never be used as a text pair.
   Clay is for light grounds only."). Flip the ring to --ground (10.63:1
   on --deep) inside dark bands so it stays visible. */
.band-deep :focus-visible,
.hero :focus-visible {
	outline-color: var(--ground);
}

.container {
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--space-6);
}

section { padding: var(--space-24) 0; }

.band-surface { background: var(--surface); }
.band-deep { background: var(--deep); color: var(--ground); }
.band-deep h1,
.band-deep h2,
.band-deep h3,
.band-deep h4 { color: var(--ground); }

.eyebrow {
	font: 600 0.8rem/1.4 var(--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin: 0 0 var(--space-3);
}

.section-title {
	text-align: center;
	margin-bottom: var(--space-12);
}

.section-title p { margin: 0 auto; color: var(--muted); }

.lede { font-size: 1.1rem; color: var(--muted); }

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: #FFFFFF;
	font: 600 1rem/1 var(--sans);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: #FFFFFF;
}

.btn-quiet {
	background: transparent;
	color: var(--accent-ink);
}

.btn-quiet:hover {
	background: var(--accent);
	color: #FFFFFF;
}

/* Opaque ground so the sticky CTA's contents stay legible over whatever
   is scrolled beneath a fixed-position overlay — including .band-deep,
   where .btn-quiet's accent-ink text would otherwise sit at 1.73:1.
   Task 9 adds position: fixed, placement and flex; this rule alone is
   not the complete component. */
.sticky-cta {
	background: var(--ground);
	padding: var(--space-2);
	border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
	border-radius: var(--radius);
	box-shadow: 0 2px 12px rgba(31, 36, 33, 0.16);
}

.icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
	flex: none;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--space-3) var(--space-4);
	background: var(--deep);
	color: var(--ground);
}

.skip-link:focus { left: var(--space-4); }

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

#site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--ground) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--surface);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	min-height: var(--header-h);
}

.brand {
	display: flex;
	margin-right: auto;
}

/* The mark is stacked (lotus over wordmark) at 234x200, not a wide
   wordmark — so it is sized by HEIGHT. Sizing by width at 120px would
   render it 103px tall and force the 68px header open around it. */
.brand img { height: 52px; width: auto; }

#primary-nav ul {
	display: flex;
	gap: var(--space-6);
	margin: 0;
}

#primary-nav a {
	color: var(--ink);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	padding: var(--space-2) 0;
	border-bottom: 2px solid transparent;
}

#primary-nav a:hover { border-bottom-color: var(--accent); }

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--surface);
	border-radius: var(--radius);
	background: transparent;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
	display: block;
	width: 20px;
	height: 2px;
	margin: 0 auto;
	background: var(--ink);
	content: "";
}

.nav-toggle-bar::before { transform: translateY(-6px); }
.nav-toggle-bar::after { transform: translateY(4px); }

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

/* Fills exactly the rest of the first screen: the sticky header is in flow, so
   subtracting its height makes header + hero come to one viewport with no cream
   strip peeking under the fold. svh, not vh, so mobile browser chrome does not
   push the fold off-screen; the vh line above is the fallback for anything that
   does not know the unit. */
.hero {
	position: relative;
	padding: 0;
	min-height: calc(100vh - var(--header-h));
	min-height: calc(100svh - var(--header-h));
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--deep);
}

.hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Warm scrim, not the template's flat dark overlay: clay and forest tinted so
   the photo sits inside the palette instead of fighting it. Text contrast is
   carried by the left-hand stop, which is opaque enough for AAA on white. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(31, 36, 33, 0.88) 0%, rgba(44, 62, 54, 0.72) 42%, rgba(168, 91, 64, 0.28) 100%);
}

.hero-inner {
	position: relative;
	z-index: 1;
	padding-top: var(--space-24);
	padding-bottom: var(--space-24);
	max-width: var(--measure);
}

.hero-eyebrow { color: #E9C9BB; }

.hero h1 {
	color: #FFFFFF;
	max-width: 26ch;
	/* Two even lines instead of a long one and an orphan. Purely typographic —
	   ignored by browsers that do not support it, which just get the ragged
	   break the max-width alone produces. */
	text-wrap: balance;
	margin-bottom: var(--space-6);
}

/* Rotating headline — two spans in one grid cell, cross-faded.

   Grid, not absolute positioning: both spans sit in cell 1/1, so the h1
   reserves the height of the TALLER string and the swap costs zero CLS. An
   absolute second line would collapse the box and shift the lede every 8s.
   Only opacity animates, so nothing touches layout.

   Three things are load-bearing and coupled:
   - base state (line one opaque) is what `prefers-reduced-motion` leaves
     behind, since it kills `animation` outright at the end of this file;
   - line one must be opaque at 0% or the headline is unpainted at first
     paint, which forfeits it as an LCP candidate;
   - the -8s delay is half of 16s. Change the duration, change the delay. */
.hero-rotate {
	display: grid;
}

.hero-rotate > span {
	grid-area: 1 / 1;
	opacity: 0;
	animation: hero-rotate 16s infinite;
	animation-delay: -8s;
}

.hero-rotate > span:first-child {
	opacity: 1;
	animation-delay: 0s;
}

/* Each line holds ~7s, the pair cross-fades over ~1s. */
@keyframes hero-rotate {
	0%, 44%   { opacity: 1; }
	50%, 94%  { opacity: 0; }
	100%      { opacity: 1; }
}

.hero-lede {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.15rem;
	max-width: 46ch;
}

.hero-facts {
	color: #FFFFFF;
	font-weight: 600;
	margin-bottom: var(--space-8);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.hero .btn-quiet {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.65);
}

.hero .btn-quiet:hover {
	background: #FFFFFF;
	color: var(--ink);
	border-color: #FFFFFF;
}

/* ----------------------------------------------------------- split */

/* The media column is a fixed 370px because that is the intrinsic width of
   every image that goes in it. A fractional column works out at ~485px here,
   which would upscale each one by a third and visibly soften it. */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: var(--space-12);
	align-items: center;
}

.split-media {
	display: grid;
	gap: var(--space-4);
}

.split-media img {
	width: 100%;
	border-radius: var(--radius);
}

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

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.card {
	background: var(--ground);
	border: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.card img {
	width: 100%;
	aspect-ratio: 42 / 38;
	object-fit: cover;
}

.card-body {
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.card-body p { color: var(--muted); }

/* margin-top: auto pins the rate and the call link to the bottom of the card,
   so the six cards' CTAs line up across a row however long the blurbs run. */
.card-body .rate {
	color: var(--ink);
	margin-top: auto;
	margin-bottom: var(--space-3);
}

.card-body > a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	text-decoration: none;
	color: var(--accent-ink);
}

.card-body > a:hover { color: var(--ink); }

/* ----------------------------------------------------------- tiles */

.tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
}

.tile img {
	width: 100%;
	aspect-ratio: 382 / 510;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tile:hover img { transform: scale(1.03); }

.tile figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--space-6);
	background: linear-gradient(to top, rgba(31, 36, 33, 0.86), transparent);
	color: #FFFFFF;
	text-align: center;
}

.tile figcaption h3 {
	color: #FFFFFF;
	margin: 0 0 var(--space-1);
	font-size: 1.15rem;
}

.tile figcaption span {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

/* -------------------------------------------------------------- FAQ */

.qa-list {
	max-width: 820px;
	margin: 0 auto;
}

.qa {
	border-bottom: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
}

/* The h3 is the summary's only element child, and the flex row lives on the
   heading rather than on the summary. <summary> takes phrasing content OR one
   heading element, so a heading sitting beside a sibling svg would be invalid
   markup; putting the chevron inside the heading keeps both the outline and
   the validator happy. */
.qa summary {
	padding: var(--space-6) 0;
	cursor: pointer;
	list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary h3 {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: 0;
	font-size: 1.15rem;
}

.qa-mark {
	flex: none;
	margin-left: auto;
	color: var(--accent);
	transition: transform 0.2s ease;
}

.qa[open] .qa-mark { transform: rotate(90deg); }

.qa-body {
	padding: 0 0 var(--space-6);
	color: var(--muted);
	max-width: 68ch;
}

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

.contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* .split's second column is a fixed 370px because About puts a 370px-wide
   photograph there. This one holds text, so the contact split gets proportional
   columns instead. */
#contact .split { grid-template-columns: 1.15fr 1fr; }

.contact-panel {
	padding: var(--space-12);
	border-radius: var(--radius);
	align-self: center;
}

.contact-info { display: grid; gap: var(--space-6); }

.contact-info li {
	display: flex;
	gap: var(--space-4);
	align-items: flex-start;
}

.contact-info .icon {
	color: #E9C9BB;
	margin-top: 0.35em;
}

.contact-info span {
	display: block;
	font-weight: 600;
}

.contact-info p { margin: 0; }

.contact-panel a { color: var(--ground); }

.map { margin-top: var(--space-24); }

.map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	filter: saturate(0.85);
}

/* ------------------------------------------------------ sticky CTA */

/* .sticky-cta's opaque ground, border and shadow are set with the tokens near
   the top of this file; this rule adds only placement. */
.sticky-cta {
	position: fixed;
	z-index: 60;
	right: var(--space-4);
	bottom: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* The two data-keep-tel buttons opt out of the JS rewrite because each already
   sits beside its own WhatsApp twin. They are hidden on desktop instead — and
   THIS QUERY MUST STAY IDENTICAL TO THE ONE IN assets/js/aurum.js. */
@media (hover: hover) and (pointer: fine) {
	[data-keep-tel] { display: none; }
}

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

footer { padding: var(--space-24) 0 var(--space-8); }

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: var(--space-12);
}

.footer-grid a {
	color: var(--ground);
	text-decoration: none;
}

.footer-grid a:hover { text-decoration: underline; }

.footer-grid h3 { font-size: 1.05rem; }

.footer-grid ul { display: grid; gap: var(--space-2); }

/* Must be `.footer-grid .socials`, not `.socials`. The Quick Links rule above
   is `.footer-grid ul` — one class plus one element, specificity 0,1,1 — which
   outranks a bare `.socials` at 0,1,0 and turns this row into a single-column
   grid. The icons then stack vertically, which is what they did until
   2026-08-11. Keep both class names in the selector. */
.footer-grid .socials {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(250, 247, 242, 0.3);
	border-radius: var(--radius);
	font-size: 1.1rem;
}

.socials a:hover {
	background: var(--accent);
	border-color: var(--accent);
	text-decoration: none;
}

.footer-legal {
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(250, 247, 242, 0.18);
}

.footer-legal p {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(250, 247, 242, 0.72);
}

@media (max-width: 900px) {
	.nav-toggle { display: block; }
	.header-cta { display: none; }

	#primary-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--ground);
		border-bottom: 1px solid var(--surface);
		padding: var(--space-4) var(--space-6);
	}

	#primary-nav.is-open { display: block; }

	#primary-nav ul {
		flex-direction: column;
		gap: var(--space-2);
	}

	.split { grid-template-columns: 1fr; gap: var(--space-8); }
	.split-media { grid-template-columns: 1fr 1fr; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.tiles { grid-template-columns: 1fr 1fr; }
	.footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.contact-panel { padding: var(--space-8); }
	.sticky-cta { right: var(--space-3); bottom: var(--space-3); }
}

@media (max-width: 600px) {
	.cards { grid-template-columns: 1fr; }
	.tiles { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	section { padding: var(--space-14) 0; }

	/* The hero is flex-centred and now viewport-tall, so the 96px block padding
	   is doing nothing on a phone except pushing the CTAs toward the fold. */
	.hero-inner {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}