@charset "utf-8";
/*==========================================================================
  BEAUTILIATE — Design System
  Rajasree Paul · Makeup Artist · Kestopur, Kolkata

  Written from scratch. No framework, no reset library, no template.
  Palette B — Sindoor & Brass: deep sindoor maroon, antique brass and
  charcoal on warm cream. Rooted in the vermillion Bengali brides wear
  rather than a generic "beauty pink".
==========================================================================*/

/*--------------------------------------------------------------
  01. TOKENS
--------------------------------------------------------------*/
:root {
	/* colour — Sindoor & Brass */
	--ink:        #1E1B1A;
	--plum:       #2B1D17;
	--plum-soft:  #4A382F;
	--alta:       #7A1F2B;
	--alta-lit:   #A6394A;
	--alta-wash:  #F6E9E7;
	--gold:       #B08D57;
	--gold-deep:  #8C6F41;
	--gold-pale:  #E4D3B0;
	--ivory:      #FBF3E7;
	--sand:       #F0E3D0;
	--muted:      #6B5A4E;
	--line:       rgba(43, 29, 23, .14);
	--line-soft:  rgba(43, 29, 23, .07);

	/* type */
	--display: 'Niconne', 'Cormorant', 'Cormorant Garamond', cursive, serif;
	--accent:  'Marcellus', 'Cormorant Garamond', serif;
	--body:    'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bengali: 'Noto Serif Bengali', 'Cormorant Garamond', serif;

	/* rhythm — compact */
	--gutter:  clamp(16px, 3vw, 26px);
	--maxw:    1240px;
	--section: clamp(46px, 6.4vw, 92px);
	--radius:  6px;

	/* glass — kept light so it doesn't fight the moving backdrop for GPU time */
	--glass-bg:      rgba(255, 253, 250, .6);
	--glass-bg-dark: rgba(30, 27, 26, .5);
	--glass-line:    rgba(255, 255, 255, .55);
	--glass-blur:    10px;

	/* soft/neumorphic pair — a warm highlight + a warm shadow, laid
	   underneath the glass fill so raised surfaces read as gently
	   pressed-out of the cream, not just floating panes of glass */
	--neo-light:      rgba(255, 255, 255, .75);
	--neo-shadow:     rgba(76, 56, 41, .22);
	--neo-light-dark: rgba(255, 255, 255, .06);
	--neo-shadow-dark: rgba(0, 0, 0, .5);

	/* motion */
	--ease:    cubic-bezier(.22, .61, .36, 1);
	--ease-io: cubic-bezier(.65, .05, .36, 1);
}

/*--------------------------------------------------------------
  02. RESET
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}
body {
	margin: 0;
	background: var(--ivory);
	color: var(--plum);
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.66;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* faint paper grain over the whole page — the "tactile, not flat"
   texture the premium-feel brief asked for. Pure CSS, no image request. */
body::before {
	content: '';
	position: fixed; inset: 0; z-index: 1; pointer-events: none;
	opacity: .035; mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { max-width: 100%; height: auto; display: block; }
p, li, dd, td, figcaption { text-align: justify; text-justify: inter-word; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--alta); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--alta); color: var(--ivory); }

/*--------------------------------------------------------------
  03. TYPE SCALE
--------------------------------------------------------------*/
/* Niconne is a script face — no negative tracking (loops collide) and
   more line-height than a slab serif needs for its ascenders/descenders */
.display-xl {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(30px, 4.8vw, 60px);
	line-height: 1.18;
	letter-spacing: 0;
}
.display-xl em { font-style: normal; }
.display-l {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(24px, 3.1vw, 38px);
	line-height: 1.28;
	letter-spacing: 0;
}
.display-m {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(19px, 2.2vw, 26px);
	line-height: 1.34;
	letter-spacing: 0;
}
.display-s {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(16.5px, 1.6vw, 19px);
	line-height: 1.4;
	letter-spacing: 0;
}
.eyebrow {
	font-family: var(--accent);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--gold-deep);
	display: block;
}
.lede {
	font-size: clamp(13.5px, 1.05vw, 15.5px);
	line-height: 1.66;
	color: var(--plum-soft);
	font-weight: 400;
}
.prose p { margin-bottom: 1.1em; color: var(--muted); font-size: 14.5px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--plum); font-weight: 600; }
.prose a { color: var(--alta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--gold-deep); }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.prose li:last-child { margin-bottom: 0; }
.prose h2 { margin: 2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.dropcap::first-letter {
	font-family: var(--display);
	font-size: 3.6em;
	line-height: .8;
	float: left;
	padding: .06em .1em 0 0;
	color: var(--alta);
	font-weight: 480;
}
.bn { font-family: var(--bengali); line-height: 1.85; }
.italic { font-style: italic; }

/*--------------------------------------------------------------
  04. LAYOUT
--------------------------------------------------------------*/
.shell {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.shell-narrow { max-width: 820px; }
/* opaque by default — .page paints above the fx backdrop layer, so any
   section left transparent lets the drifting dust/glyphs show through
   as messy specks over body copy. Sections keep their own colour below. */
.section { padding-block: var(--section); position: relative; background: var(--ivory); }
/* warm brass glow instead of flat colour — a soft radial wash bleeding
   in from one corner, echoing the gold-dust backdrop rather than
   competing with it */
.section--ink {
	background:
		radial-gradient(ellipse 900px 520px at 12% -8%, rgba(176, 141, 87, .16), transparent 60%),
		radial-gradient(ellipse 700px 500px at 100% 108%, rgba(122, 31, 43, .16), transparent 62%),
		var(--ink);
	color: var(--ivory);
}
.section--plum {
	background:
		radial-gradient(ellipse 900px 520px at 88% -8%, rgba(176, 141, 87, .14), transparent 60%),
		radial-gradient(ellipse 700px 500px at 0% 108%, rgba(122, 31, 43, .14), transparent 62%),
		var(--plum);
	color: var(--ivory);
}
.section--sand  { background: var(--sand); }
.section--wash  { background: var(--alta-wash); }
.section--ink .prose p,
.section--plum .prose p { color: rgba(251, 243, 231, .74); }
.section--ink .prose strong,
.section--plum .prose strong { color: var(--gold-pale); }
.section--ink .eyebrow,
.section--plum .eyebrow { color: var(--gold); }
.section--ink .lede,
.section--plum .lede { color: rgba(251, 243, 231, .82); }

/* editorial section header with a numeral set in the margin */
.sec-head { display: grid; grid-template-columns: 50px 1fr; gap: clamp(14px, 2.6vw, 28px); align-items: start; margin-bottom: clamp(24px, 3.2vw, 42px); }
.sec-num {
	font-family: var(--display);
	font-size: 23px;
	color: var(--gold);
	line-height: 1;
	padding-top: 6px;
	border-top: 1px solid var(--gold);
}
.section--ink .sec-num, .section--plum .sec-num { color: var(--gold-pale); border-color: rgba(228, 211, 176, .4); }
.sec-head__body > .eyebrow { margin-bottom: 12px; }
.sec-head__body > .lede { margin-top: 16px; max-width: 60ch; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.section--ink .rule, .section--plum .rule { background: rgba(251, 243, 231, .14); }

/* align-items: start, not center — centering a short text column against
   a tall 4:5 portrait image was leaving a dead gap above the paragraph
   while it waited to be vertically centred against the taller image */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split--reverse > :first-child { order: 2; }
/* for a short prose column beside a taller frame image, centring reads
   better than pinning the text to the top and leaving a dead run of
   cream below it — reserved for splits where the text is the shorter
   of the two columns */
.split--center { align-items: center; }
.stack > * + * { margin-top: 22px; }

/*--------------------------------------------------------------
  05. MOTION BACKDROP
  Drifting cosmetic light + gold dust canvas + floating glyphs.
--------------------------------------------------------------*/
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.fx__aurora { overflow: hidden; }
.fx__aurora span {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .42;
	will-change: transform;
}
.fx__aurora span:nth-child(1) {
	width: 52vw; height: 52vw; min-width: 340px; min-height: 340px; top: -16%; left: -10%;
	background: radial-gradient(circle at 40% 40%, rgba(176, 141, 87, .72), transparent 66%);
	animation: drift1 30s var(--ease-io) infinite alternate;
}
.fx__aurora span:nth-child(2) {
	width: 44vw; height: 44vw; min-width: 300px; min-height: 300px; bottom: -18%; right: -8%;
	background: radial-gradient(circle at 55% 45%, rgba(181, 48, 60, .42), transparent 68%);
	animation: drift2 38s var(--ease-io) infinite alternate;
}
.fx__aurora span:nth-child(3) {
	width: 36vw; height: 36vw; min-width: 260px; min-height: 260px; top: 42%; left: 56%;
	background: radial-gradient(circle at 50% 50%, rgba(228, 211, 176, .55), transparent 70%);
	animation: drift3 44s var(--ease-io) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(10vw, 8vh, 0) scale(1.18); } }
@keyframes drift2 { to { transform: translate3d(-12vw, -7vh, 0) scale(.88); } }
@keyframes drift3 { to { transform: translate3d(-8vw, 10vh, 0) scale(1.22); } }

.fx__dust { z-index: 1; }

/* kept deliberately simple: transform + opacity only. Rotation, scaling
   and animated drop-shadow filters were causing the browser to repaint
   these on every frame instead of compositing them on the GPU, which
   read as flicker — especially over the hero's own backdrop-filter nav. */
.fx__glyphs { overflow: hidden; z-index: 1; }
.fx__glyphs i, .fx__glyphs span {
	position: absolute;
	bottom: -8vh;
	opacity: 0;
	font-size: 10px;
	line-height: 1;
	animation: rise linear infinite;
	will-change: transform, opacity;
	transform: translateZ(0);
}
@keyframes rise {
	0%   { transform: translate3d(0, 0, 0);        opacity: 0; }
	14%  {                                          opacity: .3; }
	82%  {                                          opacity: .18; }
	100% { transform: translate3d(0, -110vh, 0);    opacity: 0; }
}
.page { position: relative; z-index: 2; }

/*--------------------------------------------------------------
  06. HEADER / NAV — floating glassmorphic pill islands
--------------------------------------------------------------*/
.masthead {
	position: fixed; top: 0; left: 0; right: 0; z-index: 80;
	background: transparent;
	padding-block: clamp(10px, 1.6vw, 16px) 12px;
	transition: padding .35s var(--ease);
}
.masthead.is-stuck { padding-block: 8px 10px; }

/* utility row — sits directly over the hero photo, fades once it scrolls
   out of view so it never overlaps page content on lighter sections */
.masthead__utility {
	position: relative;
	max-height: 46px; opacity: 1; overflow: hidden; margin-bottom: 10px;
	transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease);
}
.masthead.hero-out .masthead__utility { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; }
/* legibility over the hero photo comes from text-shadow, not a boxed
   scrim strip — a separate dark rectangle behind just the utility row
   was stacking with the hero's own scrim and reading as a hard seam
   across the top of the page */
.utility__call a, .utility__social a, .utility__rating .stars, .utility__rating .stars + span {
	text-shadow: 0 1px 6px rgba(15, 12, 10, .55);
}
.masthead__utility .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.utility__call a {
	font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: rgba(251, 243, 231, .92);
}
.utility__call a:hover { color: var(--gold-pale); }
.utility__social { display: flex; gap: 8px; }
.utility__social a {
	width: 28px; height: 28px; display: grid; place-items: center;
	border: 1px solid rgba(251, 243, 231, .32); border-radius: var(--radius);
	color: rgba(251, 243, 231, .88); font-size: 11px; transition: all .3s var(--ease);
}
.utility__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.utility__rating { display: flex; align-items: center; gap: 12px; }
.utility__rating .stars { color: var(--gold-pale); font-size: 11px; letter-spacing: 2px; text-align: right; }
.utility__rating .stars + span { display: block; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(251, 243, 231, .7); text-align: right; margin-top: 2px; }
.utility__badge {
	background: linear-gradient(155deg, var(--gold-pale), var(--gold));
	color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1;
	padding: 9px 13px 15px; text-align: center; min-width: 46px;
	clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* logo badge — dark rounded pill, matches the crest-style reference */
.brand {
	display: flex; align-items: center; gap: 10px;
	background: var(--ink);
	border: 1px solid rgba(228, 211, 176, .18);
	border-radius: var(--radius);
	padding: 7px 16px 7px 7px;
	box-shadow: 0 10px 26px -14px rgba(30, 27, 26, .55);
	transition: transform .3s var(--ease);
}
.brand:hover { transform: translateY(-1px); }
.brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; background: rgba(228, 211, 176, .1); }
.brand__name { font-family: var(--accent); font-size: 17px; font-weight: 500; letter-spacing: .01em; line-height: 1; color: var(--gold-pale); }
.brand__tag { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: rgba(228, 211, 176, .55); margin-top: 3px; display: block; }

/* glass pill nav */
.nav {
	display: flex; align-items: center; gap: 2px;
	background: var(--glass-bg);
	border: 1px solid var(--glass-line);
	border-radius: var(--radius);
	padding: 5px;
	backdrop-filter: blur(var(--glass-blur)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
	box-shadow: 0 10px 30px -18px rgba(30, 27, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.nav a {
	position: relative;
	font-family: var(--body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 10px 17px;
	border-radius: 3px;
	color: var(--plum-soft);
	transition: color .3s var(--ease), background .3s var(--ease);
}
.nav a:hover { background: rgba(43, 29, 23, .08); color: var(--plum); }
.nav a[aria-current] {
	background: var(--ink);
	color: var(--gold-pale);
	box-shadow: 0 6px 16px -8px rgba(30, 27, 26, .6);
}

/* Services / Areas dropdowns — the trigger is a real link to that
   section's hub page (services.html / areas-we-serve.html); hovering
   (or focusing, for keyboard users) reveals the submenu without a
   click, closing again on mouseleave/blur. A small invisible margin
   above the menu keeps it open while the pointer travels down to it. */
.nav__drop { position: relative; }
.nav__drop-btn {
	font-family: var(--body); font-size: 11.5px; font-weight: 600;
	letter-spacing: .07em; text-transform: uppercase;
	padding: 10px 17px; border-radius: 3px; border: 0; background: none; cursor: pointer;
	color: var(--plum-soft);
	display: inline-flex; align-items: center; gap: 7px;
	transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__drop-btn:hover { background: rgba(43, 29, 23, .08); color: var(--plum); }
.nav__drop-btn i { font-size: 9px; transition: transform .3s var(--ease); }
.nav__drop:hover .nav__drop-btn,
.nav__drop:focus-within .nav__drop-btn { background: rgba(43, 29, 23, .08); color: var(--plum); }
.nav__drop:hover .nav__drop-btn i,
.nav__drop:focus-within .nav__drop-btn i { transform: rotate(180deg); }

.nav__drop-menu {
	position: absolute; top: 100%; left: 0; min-width: 236px; margin-top: 6px;
	background: linear-gradient(165deg, var(--ivory) 0%, var(--alta-wash) 145%);
	border: 1px solid rgba(176, 141, 87, .3); border-radius: 12px;
	box-shadow: 0 26px 50px -20px rgba(43, 29, 23, .38);
	padding: 15px 8px 10px; display: flex; flex-direction: column; gap: 1px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
	z-index: 5; overflow: hidden;
}
/* no real gap between button and menu (margin-top is small and the
   button's own padding already extends the hoverable area down to
   meet it), so the hover state never breaks while the pointer moves
   from the trigger into the menu */
.nav__drop:hover .nav__drop-menu,
.nav__drop:focus-within .nav__drop-menu { opacity: 1; visibility: visible; transform: none; }

/* decorative top swatch strip — a soft "eyeshadow palette" gradient
   sweep, the one deliberate spot of colour-play in an otherwise
   restrained UI. Shared by every dropdown, not just the mega menu, so
   the Services and Areas panels read as one consistent system. */
.nav__drop-menu::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, var(--plum) 0%, var(--alta) 32%, var(--gold) 68%, var(--gold-pale) 100%);
	z-index: 2;
}

.nav__drop-menu a {
	display: flex; align-items: center; gap: 9px;
	padding: 10px 14px; border-radius: 8px; position: relative; z-index: 1;
	font-family: var(--body); font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-transform: none;
	color: var(--plum); white-space: nowrap;
	transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__drop-menu a:hover { background: rgba(122, 31, 43, .08); color: var(--alta); }
.nav__drop-menu a i { flex: 0 0 auto; width: 14px; text-align: center; font-size: 10.5px; opacity: .8; color: var(--alta); }

/* Mega menu — Services dropdown grows into a multi-column panel. It's
   anchored to .masthead (position:fixed, full viewport width) rather
   than the small trigger button itself — .nav__drop--mega overrides
   the base .nav__drop's position:relative back to static so the
   browser skips it and uses .masthead as the containing block instead.
   That's what keeps an 880-960px panel truly centered on the viewport
   no matter where "Services" happens to sit in the nav row, instead of
   centering on the trigger and running off the right edge. */
.nav__drop.nav__drop--mega { position: static; }
.nav__drop--mega .nav__drop-menu {
	left: 50%; min-width: 0; width: max-content; max-width: min(1040px, 94vw);
	transform: translateX(-50%) translateY(6px);
	display: grid; grid-template-columns: repeat(5, minmax(178px, 1fr));
	gap: 4px 0; padding: 22px 24px 18px;
}
.nav__drop--mega:hover .nav__drop-menu,
.nav__drop--mega:focus-within .nav__drop-menu { transform: translateX(-50%) translateY(0); }

/* soft blurred gradient blob, purely decorative, clipped by the panel's
   own overflow:hidden + rounded corners so it never spills out — mega
   panel only, the small Areas dropdown is too compact for it */
.nav__drop--mega .nav__drop-menu::after {
	content: ''; position: absolute; top: -60px; right: -70px; width: 240px; height: 240px;
	background: radial-gradient(circle, rgba(122, 31, 43, .12), transparent 72%);
	z-index: 0; pointer-events: none;
}

.nav__mega-col {
	display: flex; flex-direction: column; gap: 1px; position: relative; z-index: 1;
	padding-right: 20px; margin-right: 2px;
}
/* thin separators between columns — makes five clusters of links read
   as five distinct categories instead of one long list with headings */
.nav__mega-col:not(:last-child) { border-right: 1px solid rgba(176, 141, 87, .28); }
.nav__mega-col:last-child { padding-right: 0; margin-right: 0; }
.nav__mega-heading {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--body); font-size: 10px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase; color: var(--plum-soft);
	padding: 5px 14px 9px; white-space: nowrap;
	border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
}
.nav__mega-heading .chip,
.chip {
	flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
	display: grid; place-items: center; font-size: 9.5px; color: var(--ivory);
	box-shadow: 0 3px 8px -2px rgba(43, 29, 23, .35);
	background: linear-gradient(135deg, var(--alta), var(--gold-deep));
}
/* one accent-gradient per category, echoing a makeup-palette swatch row */
.nav__mega-col:nth-child(1) .chip { background: linear-gradient(135deg, var(--alta-lit), var(--plum)); }
.nav__mega-col:nth-child(2) .chip { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.nav__mega-col:nth-child(3) .chip { background: linear-gradient(135deg, var(--alta-lit), var(--gold)); }
.nav__mega-col:nth-child(4) .chip { background: linear-gradient(135deg, var(--plum-soft), var(--muted)); }
.nav__mega-col:nth-child(5) .chip { background: linear-gradient(135deg, var(--alta), var(--gold-deep)); }

.nav__drop--mega .nav__drop-menu a {
	display: flex; align-items: flex-start; gap: 9px;
	white-space: normal; line-height: 1.3;
}
.nav__drop--mega .nav__drop-menu a i {
	flex: 0 0 auto; width: 14px; text-align: center; font-size: 10.5px; opacity: .8;
	margin-top: 2px;
}
.nav__mega-col:nth-child(1) a i { color: var(--alta); }
.nav__mega-col:nth-child(2) a i { color: var(--gold-deep); }
.nav__mega-col:nth-child(3) a i { color: var(--alta-lit); }
.nav__mega-col:nth-child(4) a i { color: var(--muted); }
.nav__mega-col:nth-child(5) a i { color: var(--alta); }

.masthead__cta { display: flex; align-items: center; gap: 10px; }
.masthead__cta .btn {
	padding: 12px 22px; font-size: 11px;
	background: rgba(30, 27, 26, .55); color: var(--gold-pale); border: 1px solid rgba(228, 211, 176, .28);
	box-shadow: 0 10px 26px -14px rgba(30, 27, 26, .55);
}
.masthead__cta .btn::before { background: var(--alta); }
.masthead__cta .btn:hover { color: var(--ivory); border-color: var(--alta); }
.burger {
	display: none; width: 44px; height: 44px; place-items: center;
	background: var(--glass-bg); border: 1px solid var(--glass-line); border-radius: var(--radius);
	backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 10px 26px -16px rgba(30, 27, 26, .4);
}
.burger span { display: block; width: 16px; height: 1.5px; background: var(--plum); position: relative; transition: background .25s; }
.burger span::before, .burger span::after {
	content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--plum);
	transition: transform .35s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* slide-in mobile panel */
.drawer {
	position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px); z-index: 70;
	background: var(--ink); color: var(--ivory);
	padding: 96px var(--gutter) 40px;
	transform: translateX(102%);
	transition: transform .5s var(--ease);
	overflow-y: auto;
	display: flex; flex-direction: column;
}
.drawer.is-open { transform: none; }
.drawer a { display: block; font-family: var(--display); font-weight: 400; font-size: 23px; padding-block: 12px; border-bottom: 1px solid rgba(251, 243, 231, .12); }
.drawer a:hover { color: var(--gold-pale); padding-left: 8px; transition: padding .3s var(--ease), color .3s; }

/* Services / Areas accordion groups inside the mobile drawer */
.drawer__group-btn {
	display: flex; width: 100%; align-items: center; justify-content: space-between;
	font-family: var(--display); font-weight: 400; font-size: 23px;
	padding-block: 12px; border-bottom: 1px solid rgba(251, 243, 231, .12);
	background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit;
	cursor: pointer; text-align: left;
}
.drawer__group-btn i { font-size: 14px; color: var(--gold-pale); transition: transform .3s var(--ease); }
.drawer__group.is-open .drawer__group-btn i { transform: rotate(180deg); }
.drawer__group-menu { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.drawer__group.is-open .drawer__group-menu { max-height: 1400px; }
.drawer__group-menu a {
	font-family: var(--body); font-size: 15px; font-weight: 400;
	padding: 11px 0 11px 16px; border-bottom: 0; color: rgba(251, 243, 231, .78);
}
.drawer__group-menu a:hover { color: var(--gold-pale); padding-left: 20px; }
/* explicit escape hatch to the hub page, since the accordion label
   itself only toggles the submenu and doesn't navigate */
.drawer__group-menu .drawer__group-viewall {
	display: flex; align-items: center; justify-content: space-between;
	margin: 10px 0 4px; padding: 12px 14px;
	font-family: var(--accent); font-size: 13px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink); background: var(--gold-pale);
	border-radius: var(--radius);
}
.drawer__group-viewall i { font-size: 12px; }
.drawer__group-menu .drawer__group-viewall:hover { background: var(--gold); color: var(--ink); padding-left: 14px; }
.drawer__group-heading {
	display: block; font-family: var(--body); font-size: 10.5px; font-weight: 700;
	letter-spacing: .09em; text-transform: uppercase; color: var(--gold-pale);
	opacity: .65; padding: 14px 0 5px 16px;
}
.drawer__group-heading:first-child { padding-top: 6px; }
.drawer__foot { margin-top: auto; padding-top: 30px; font-size: 13.5px; color: rgba(251, 243, 231, .6); }
.drawer__foot a { font-family: var(--body); font-size: 15px; border: 0; padding-block: 5px; color: var(--gold-pale); }
.scrim {
	position: fixed; inset: 0; z-index: 65; background: rgba(30, 27, 26, .55);
	opacity: 0; visibility: hidden; transition: opacity .45s, visibility .45s;
	backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/*--------------------------------------------------------------
  07. HERO — full-bleed crossfading slideshow, centred content
--------------------------------------------------------------*/
.hero-fs {
	position: relative;
	min-height: min(94vh, 800px);
	display: flex; flex-direction: column; justify-content: flex-end;
	overflow: hidden;
	color: var(--ivory);
	background: var(--ink); /* shows briefly before the first image decodes */
}
.hero-fs__slides { position: absolute; inset: 0; }
.hero-fs__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.8s ease;
}
.hero-fs__slide.is-active { opacity: 1; }
.hero-fs__scrim {
	position: absolute; inset: 0;
	/* monotonic top-to-bottom darkening — the photo reads clearly at
	   the very top instead of sitting behind a pre-darkened band */
	background:
		linear-gradient(180deg, rgba(20,16,13,.1) 0%, rgba(20,16,13,.04) 20%, rgba(20,16,13,.58) 76%, rgba(20,16,13,.86) 100%),
		linear-gradient(90deg, rgba(20,16,13,.16) 0%, transparent 26%, transparent 74%, rgba(20,16,13,.16) 100%);
}
.hero-fs__corner {
	position: absolute; bottom: 30px; width: 64px; height: 64px; z-index: 2;
	border: 1px dashed rgba(228, 211, 176, .5);
}
.hero-fs__corner--l { left: 24px; border-right: 0; border-top: 0; border-radius: 0 0 0 18px; }
.hero-fs__corner--r { right: 24px; border-left: 0; border-top: 0; border-radius: 0 0 18px 0; }

.hero-fs__content {
	position: relative; z-index: 2;
	text-align: center;
	padding-block: clamp(110px, 16vw, 170px) 8px;
}
.hero-fs__eyebrow { color: var(--gold-pale); margin-bottom: clamp(14px, 2vw, 20px); }
.hero-fs__title { margin-bottom: clamp(16px, 2.4vw, 24px); text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero-fs__title em { font-style: normal; color: var(--gold-pale); }
.hero-fs__sep { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--gold); font-size: 12px; }
.hero-fs__sep span { width: 56px; height: 1px; background: rgba(228, 211, 176, .4); }

.hero-fs__dots { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; padding-block: 26px 16px; }
.hero-fs__dots button {
	width: 7px; height: 7px; border-radius: 50%;
	background: rgba(251, 243, 231, .38);
	transition: all .35s var(--ease);
}
.hero-fs__dots button.is-active { background: var(--gold-pale); width: 22px; border-radius: 4px; }

.hero-fs__scroll { position: relative; z-index: 2; display: flex; justify-content: center; padding-bottom: 26px; }
.hero-fs__scroll span {
	display: block; width: 1px; height: 32px;
	background: linear-gradient(rgba(251,243,231,.75), transparent);
	animation: scrollcue 2.4s ease-in-out infinite;
}
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* the lede / meta / CTA block carried over from the split-hero design,
   now sitting just below the slideshow as its own short intro strip */
.hero-intro { position: relative; background: var(--ivory); padding-block: clamp(30px, 4.6vw, 48px) clamp(26px, 4vw, 40px); overflow: hidden; }
.hero-intro .btns { margin-top: 18px; }
.hero-intro__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 11.5px; letter-spacing: .03em; color: var(--muted); }
.hero-intro__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-intro__meta i { color: var(--gold-deep); font-size: 11px; }
.hero-intro .shell { position: relative; }

/*--------------------------------------------------------------
  08. MARQUEE RIBBON
--------------------------------------------------------------*/
.ribbon {
	background: linear-gradient(115deg, var(--plum) 0%, var(--alta) 46%, #8C2534 100%);
	color: var(--ivory); padding-block: 11px; overflow: hidden; position: relative;
	box-shadow: inset 0 10px 18px -14px rgba(0,0,0,.55), inset 0 -10px 18px -14px rgba(0,0,0,.4);
}
.ribbon__track { display: flex; width: max-content; animation: slide 42s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__track > span {
	font-family: var(--accent); font-size: 15px;
	padding-inline: 22px; white-space: nowrap; display: inline-flex; align-items: center; gap: 22px;
}
.ribbon__track > span::after { content: '✦'; font-size: 9px; opacity: .65; }
@keyframes slide { to { transform: translateX(-50%); } }

/*--------------------------------------------------------------
  08b. BRAND RIBBONS — homepage-only marquee strip beside the price
  table: a fixed tier tag beside a track of brand names scrolling past
  one after another, opposite directions per tier. Distinct from both
  the card grid and the .shelf panels used on the HD/Ultra HD page.
--------------------------------------------------------------*/
.brand-ribbons { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.brand-ribbon {
	display: flex; align-items: stretch; border: 1px solid var(--line);
	background: rgba(255, 253, 250, .5); overflow: hidden;
}
.brand-ribbon__tag {
	flex: none; display: flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap;
	font-family: var(--accent); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ivory); background: linear-gradient(155deg, var(--plum), var(--alta));
}
.brand-ribbon--ultra .brand-ribbon__tag { background: linear-gradient(155deg, var(--alta), var(--gold-deep)); }
.brand-ribbon__wrap { flex: 1 1 auto; overflow: hidden; position: relative; }
.brand-ribbon__track { display: flex; width: max-content; padding-block: 15px; animation: slide 34s linear infinite; }
.brand-ribbon:hover .brand-ribbon__track { animation-play-state: paused; }
.brand-ribbon__track--rev { animation-direction: reverse; animation-duration: 42s; }
.brand-ribbon__track > span {
	font-family: var(--display); font-size: 15.5px; color: var(--plum);
	padding-inline: 18px; white-space: nowrap; display: inline-flex; align-items: center; gap: 18px;
}
.brand-ribbon__track > span::after { content: '·'; opacity: .5; }
@media (max-width: 560px) {
	.brand-ribbon__tag { padding: 0 14px; font-size: 10.5px; }
	.brand-ribbon__track > span { font-size: 14px; padding-inline: 12px; }
}

/*--------------------------------------------------------------
  09. ANSWER BLOCK — glass card, the snippet / AI-Overview target
--------------------------------------------------------------*/
.answer {
	position: relative;
	background: linear-gradient(155deg, rgba(255, 253, 250, .82), rgba(255, 253, 250, .5));
	backdrop-filter: blur(var(--glass-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
	border: 1px solid var(--glass-line);
	border-radius: 18px;
	padding: clamp(20px, 2.8vw, 30px);
	margin-block: clamp(20px, 2.8vw, 32px);
	box-shadow:
		0 34px 64px -34px rgba(43, 29, 23, .4),
		0 12px 26px -16px rgba(43, 29, 23, .2),
		inset 0 1px 0 rgba(255, 255, 255, .6),
		inset -6px -6px 14px var(--neo-shadow),
		inset 6px 6px 14px var(--neo-light);
}
.answer__tag {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 12px 5px 6px; border-radius: 999px;
	background: linear-gradient(155deg, var(--gold-pale), var(--gold));
	color: var(--ink);
	font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	box-shadow: 0 8px 18px -8px rgba(139, 108, 61, .7);
	margin-bottom: 13px;
}
.answer__tag i {
	width: 18px; height: 18px; display: grid; place-items: center;
	background: rgba(30, 27, 26, .12); border-radius: 50%; font-size: 9px;
}
.answer p {
	font-family: var(--body);
	font-weight: 400;
	font-size: clamp(14.5px, 1.25vw, 16.5px);
	line-height: 1.72;
	color: var(--plum);
	margin: 0;
}
.answer strong { font-weight: 700; color: var(--alta); }

/*--------------------------------------------------------------
  10. FACT / PRICE TABLES — a proper bordered table, icon per row
--------------------------------------------------------------*/
.facts {
	margin-block: 28px;
	border: 5px solid rgb(255 255 255 / 14%); border-radius: 12px; overflow: hidden;
	background: rgba(255, 253, 250, .55);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	box-shadow:
		0 24px 46px -30px rgba(43, 29, 23, .38),
		inset 6px 6px 14px var(--neo-light),
		inset -6px -6px 14px var(--neo-shadow);
}
.facts caption {
	text-align: left; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold-deep); font-weight: 600; padding: 12px 20px 10px;
}
.facts th, .facts td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; font-size: 13.5px; }
.facts th { width: 36%; font-weight: 500; color: var(--plum); }
.facts th i { color: var(--gold-deep); width: 15px; text-align: center; margin-right: 10px; font-size: 12px; }
.facts td { color: var(--muted); }
.facts tr:nth-child(even) { background: rgba(240, 227, 208, .32); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.section--ink .facts, .section--plum .facts { background: rgba(255, 253, 250, .05); border-color: rgba(253,249,244,.14); }
.section--ink .facts tr:nth-child(even), .section--plum .facts tr:nth-child(even) { background: rgba(253,249,244,.04); }
.section--ink .facts th, .section--plum .facts th { color: var(--gold-pale); }
.section--ink .facts td, .section--plum .facts td { color: rgba(253,249,244,.72); }
.section--ink .facts th, .section--ink .facts td,
.section--plum .facts th, .section--plum .facts td { border-color: rgba(253,249,244,.12); }

/* menu-card pricing — a boutique tariff card, not a spreadsheet table.
   Dotted leader lines connect the service name to its price, the way a
   restaurant or spa menu sets a rate card. */
.menu {
	list-style: none; max-width: 720px; margin: 30px auto 0; padding: 6px 26px;
	background: rgba(255, 253, 250, .55);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(176, 141, 87, .35); border-radius: 16px;
}
.menu__row { padding-block: 20px; border-bottom: 1px solid var(--line-soft); transition: background .35s var(--ease); }
.menu__row:hover { background: rgba(122, 31, 43, .035); }
.menu__row:last-child { border-bottom: 0; }
.menu__head { display: flex; align-items: baseline; gap: 10px; }
.menu__num { font-family: var(--accent); font-size: 12px; color: var(--gold-deep); flex: none; }
.menu__name { font-family: var(--display); font-weight: 480; font-size: clamp(16.5px, 1.7vw, 19px); color: var(--plum); flex: none; }
.menu__leader { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--line); margin: 0 2px 5px; }
.menu__price { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--alta); flex: none; white-space: nowrap; }
.menu__desc { margin: 6px 0 0 22px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.section--ink .menu, .section--plum .menu { background: rgba(255, 253, 250, .05); border-color: rgba(228, 211, 176, .3); }
.section--ink .menu__row, .section--plum .menu__row { border-color: rgba(253,249,244,.1); }
.section--ink .menu__row:hover, .section--plum .menu__row:hover { background: rgba(228,211,176,.05); }
.section--ink .menu__name, .section--plum .menu__name { color: var(--gold-pale); }
.section--ink .menu__price, .section--plum .menu__price { color: var(--ivory); }
.section--ink .menu__leader, .section--plum .menu__leader { border-color: rgba(253,249,244,.22); }
.section--ink .menu__desc, .section--plum .menu__desc { color: rgba(253,249,244,.65); }

.note { margin-top: 28px; font-size: 13.5px; color: var(--muted); font-style: italic; line-height: 1.65; }
.section--ink .note, .section--plum .note { color: rgba(253,249,244,.55); }
.menu + .note { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.brand-ribbons + .note, .shelf + .note { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------
  10b. BRAND SHELF — product-brand showcase. Deliberately not a card
  grid and not the .menu price list: two open "shelf" panels holding
  loosely wrapped brand pills, so it reads as a kit, not a catalogue.
--------------------------------------------------------------*/
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 40px; }
@media (max-width: 780px) { .shelf { grid-template-columns: 1fr; } }
.shelf__tier {
	position: relative; padding: 34px 28px 28px; border: 1px solid var(--line);
	background: rgba(255, 253, 250, .5);
}
.shelf__tier::before {
	content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px;
	background: linear-gradient(90deg, var(--gold-deep), transparent 75%);
}
.shelf__tier--ultra {
	background: linear-gradient(160deg, rgba(122, 31, 43, .05), rgba(176, 141, 87, .1));
	border-color: rgba(176, 141, 87, .45);
}
.shelf__tier--ultra::before { background: linear-gradient(90deg, var(--alta), var(--gold-deep) 55%, transparent 90%); }
.shelf__label {
	display: flex; align-items: center; gap: 9px; margin-bottom: 22px;
	font-family: var(--accent); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}
.shelf__label i { font-size: 13px; }
.shelf__tier--ultra .shelf__label { color: var(--alta); }
.shelf__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 0; margin: 0; }
.shelf__chips li {
	font-family: var(--display); font-size: clamp(14px, 1.4vw, 16px); color: var(--plum);
	padding: 7px 18px; border: 1px solid var(--line); border-radius: 2px;
	background: rgba(255, 255, 255, .55); transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.shelf__chips li:nth-child(3n) { border-style: dashed; }
.shelf__chips li:hover { border-color: var(--gold-deep); color: var(--alta); transform: translateY(-2px); }
.shelf__tier--ultra .shelf__chips li { background: rgba(255, 253, 250, .65); border-color: rgba(176, 141, 87, .4); }
.shelf__chips li.shelf__chip--shared { font-style: italic; color: var(--muted); border-color: var(--line-soft); background: transparent; }
.section--ink .shelf__tier, .section--plum .shelf__tier { background: rgba(255, 253, 250, .04); border-color: rgba(228, 211, 176, .25); }
.section--ink .shelf__tier--ultra, .section--plum .shelf__tier--ultra { background: linear-gradient(160deg, rgba(228,211,176,.06), rgba(228,211,176,.12)); border-color: rgba(228, 211, 176, .4); }
.section--ink .shelf__chips li, .section--plum .shelf__chips li { color: var(--gold-pale); background: rgba(255,253,244,.04); border-color: rgba(253,249,244,.18); }
.section--ink .shelf__chips li:hover, .section--plum .shelf__chips li:hover { color: var(--ivory); border-color: var(--gold-pale); }

/*--------------------------------------------------------------
  11. CARDS — hairline borders, alta sweep on hover. No drop shadows.
--------------------------------------------------------------*/
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* fixed column counts rather than auto-fit — auto-fit was letting a
   6-card grid squeeze 4-across on wide screens and wrap as an
   uneven 4+2 instead of a clean 3x2 */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.section--ink .grid, .section--plum .grid { background: rgba(253,249,244,.14); border-color: rgba(253,249,244,.14); }

/* Opt-in modifiers for a grid--3 whose card count isn't a multiple of
   3 — rather than leave a lone card or a half-empty last row, stretch
   the leftover card(s) to fill the row. Uses a finer 6-column track so
   a single leftover card can take the full width (span 6) and two
   leftover cards can split it evenly (span 3 each), while a normal
   card still reads as exactly a third (span 2). Opt-in via modifier
   class so grids that already divide evenly by 3 are untouched. */
.grid--fill-last1, .grid--fill-last2 { grid-template-columns: repeat(6, 1fr); }
.grid--fill-last1 > *, .grid--fill-last2 > * { grid-column: span 2; }
.grid--fill-last1 > *:last-child { grid-column: span 6; }
.grid--fill-last2 > *:nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 860px) {
	/* at the 2-column breakpoint both a 7-card and a 5-card grid have
	   exactly one card left over (7%2=1, 5%2=1), so both modifiers
	   collapse to the same "stretch the last card" behaviour here */
	.grid--fill-last1, .grid--fill-last2 { grid-template-columns: repeat(2, 1fr); }
	.grid--fill-last1 > *, .grid--fill-last2 > * { grid-column: auto; }
	.grid--fill-last1 > *:last-child, .grid--fill-last2 > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.grid--fill-last1, .grid--fill-last2 { grid-template-columns: 1fr; }
	.grid--fill-last1 > *:last-child, .grid--fill-last2 > *:nth-last-child(-n+2) { grid-column: auto; }
}

.card {
	position: relative; background: rgba(255, 253, 250, .62);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	padding: clamp(20px, 2.4vw, 28px);
	display: flex; flex-direction: column;
	overflow: hidden;
	/* soft-UI edge (inset highlight + inset shadow) under the outer drop
	   shadow — glass fill, neumorphic edge */
	box-shadow:
		0 16px 34px -26px rgba(43, 29, 23, .35),
		inset 1px 1px 2px var(--neo-light),
		inset -2px -2px 5px var(--neo-shadow);
	transition: color .45s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
	isolation: isolate;
}
.card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 26px 54px -26px rgba(30, 27, 26, .45),
		inset 1px 1px 2px rgba(255, 255, 255, .3),
		inset -2px -2px 5px rgba(0, 0, 0, .3);
}
.section--ink .card, .section--plum .card {
	background: rgba(255, 253, 250, .05);
	box-shadow:
		0 16px 34px -26px rgba(0, 0, 0, .5),
		inset 1px 1px 2px var(--neo-light-dark),
		inset -2px -2px 5px var(--neo-shadow-dark);
}
.section--sand .card { background: rgba(255, 253, 250, .72); }
.section--wash .card { background: rgba(255, 253, 250, .55); }
.card::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: var(--alta);
	transform: translateY(101%);
	transition: transform .55s var(--ease);
}
.card:hover::before { transform: none; }
.card:hover, .card:hover .card__t, .card:hover p, .card:hover .card__n { color: var(--ivory); }
.card:hover .card__i { color: var(--gold-pale); border-color: rgba(253,249,244,.4); }
.card:hover .card__go { color: var(--ivory); }

/* default corner accent — a stamped/certificate-style bracket in the
   top-right of every card, so plain hairline boxes don't feel flat */
.card::after {
	content: ''; position: absolute; top: 12px; right: 12px;
	width: 20px; height: 20px;
	border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
	opacity: .6; transition: opacity .4s var(--ease);
}
.card:hover::after { opacity: .9; border-color: var(--gold-pale); }

/* "fold" variant — a dog-eared page corner instead of the bracket,
   used on alternating sections so the grids don't all read identically */
.grid--fold .card::after {
	top: auto; left: auto; bottom: 0; right: 0; width: 0; height: 0;
	border: 0; border-style: solid; border-width: 0 24px 24px 0;
	border-color: transparent var(--sand) transparent transparent;
	opacity: 1; filter: drop-shadow(-2px -2px 3px rgba(43, 29, 23, .12));
}
.grid--fold .card:hover::after { border-color: transparent var(--gold-pale) transparent transparent; }
.section--ink .grid--fold .card::after, .section--plum .grid--fold .card::after {
	border-color: transparent var(--gold) transparent transparent;
	opacity: .5; filter: none;
}
.card__n { font-family: var(--accent); font-size: 12px; letter-spacing: .04em; color: var(--gold-deep); margin-bottom: 12px; transition: color .45s; }
.card__i {
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid var(--line); border-radius: 50%;
	color: var(--alta); font-size: 15px; margin-bottom: 15px;
	transition: color .45s, border-color .45s;
}
.section--ink .card__i, .section--plum .card__i { border-color: rgba(253,249,244,.2); color: var(--gold); }
.card__t { margin-bottom: 8px; transition: color .45s; }
.card p { font-size: 13.5px; line-height: 1.62; color: var(--muted); margin: 0 0 12px; transition: color .45s; }
.section--ink .card p, .section--plum .card p { color: rgba(253,249,244,.7); }
.card__go {
	margin-top: auto; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
	color: var(--alta); display: inline-flex; align-items: center; gap: 8px; transition: color .45s;
}
.card__go i { transition: transform .35s var(--ease); }
.card:hover .card__go i { transform: translateX(6px); }

/*--------------------------------------------------------------
  11b. TESTIMONIALS — centred badge card
--------------------------------------------------------------*/
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
@media (min-width: 900px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card {
	position: relative;
	background: rgba(255, 253, 250, .65);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 38px 26px 26px;
	text-align: center;
}
.testi-mark {
	position: absolute; top: 16px; left: 20px;
	font-family: var(--display); font-size: 34px; line-height: 1;
	color: var(--gold); opacity: .75;
}
.testi-mark--end { top: auto; left: auto; right: 20px; bottom: 14px; }
.testi-avatar {
	width: 58px; height: 58px; margin: 0 auto 14px;
	border-radius: 50%; overflow: hidden;
	background: var(--ink);
	border: 1px solid var(--gold-pale);
	display: grid; place-items: center;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-name { font-family: var(--display); font-weight: 500; font-size: 15.5px; color: var(--plum); margin-bottom: 14px; }
.testi-role { font-family: var(--body); font-weight: 400; font-size: 11.5px; color: var(--muted); }
.testi-stars { color: var(--gold); font-size: 11px; letter-spacing: 3px; margin-bottom: 16px; }
.testi-quote { font-size: 13px; line-height: 1.72; color: var(--muted); font-style: italic; margin-bottom: 20px; }
.testi-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.testi-num { font-family: var(--display); color: var(--gold-deep); }
.testi-dots { letter-spacing: 4px; color: var(--gold); }

/*--------------------------------------------------------------
  12. CHIPS — internal-link mesh
--------------------------------------------------------------*/
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block: 18px; }
.chips a {
	display: inline-block; padding: 7px 15px; border: 1px solid var(--line);
	border-radius: var(--radius); font-size: 12px; color: var(--plum-soft);
	background: rgba(255,255,255,.4); backdrop-filter: blur(8px);
	transition: all .3s var(--ease);
}
.chips a:hover { background: var(--plum); border-color: var(--plum); color: var(--gold-pale); transform: translateY(-2px); }
.section--ink .chips a, .section--plum .chips a { border-color: rgba(253,249,244,.2); color: rgba(253,249,244,.78); }
.section--ink .chips a:hover, .section--plum .chips a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/*--------------------------------------------------------------
  13. TIMELINE
--------------------------------------------------------------*/
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--alta), transparent); }
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
	content: ''; position: absolute; left: -38px; top: 7px;
	width: 15px; height: 15px; border-radius: 50%;
	background: var(--ivory); border: 2px solid var(--gold);
}
.section--ink .timeline li::before, .section--plum .timeline li::before { background: var(--ink); }
.timeline__yr { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--alta); }
.section--ink .timeline__yr, .section--plum .timeline__yr { color: var(--alta-lit); }
.timeline h3 { margin: 5px 0 7px; }
.timeline p { font-size: 13.5px; color: var(--muted); margin: 0; }
.section--ink .timeline p, .section--plum .timeline p { color: rgba(253,249,244,.72); }

/*--------------------------------------------------------------
  14. LISTS & CALLOUT
--------------------------------------------------------------*/
.ticks li { position: relative; padding: 0 0 13px 28px; font-size: 13.5px; line-height: 1.66; color: var(--muted); }
.ticks li::before {
	content: ''; position: absolute; left: 2px; top: 10px;
	width: 6px; height: 6px; background: var(--alta); border-radius: 50%;
}
.ticks strong { color: var(--plum); font-weight: 600; }
.section--ink .ticks li, .section--plum .ticks li { color: rgba(253,249,244,.74); }
.section--ink .ticks strong, .section--plum .ticks strong { color: var(--gold-pale); }

.callout {
	border-left: 3px solid var(--gold);
	background: rgba(255, 253, 250, .55);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-radius: 0 12px 12px 0;
	padding: clamp(16px, 2.2vw, 24px); margin-block: 24px;
}
.callout p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--plum-soft); }
.callout strong { color: var(--alta); }
.section--ink .callout, .section--plum .callout { background: rgba(253,249,244,.06); }
.section--ink .callout p, .section--plum .callout p { color: rgba(253,249,244,.8); }
.section--ink .callout strong, .section--plum .callout strong { color: var(--gold-pale); }

/*--------------------------------------------------------------
  15. FAQ — native <details>, mirrors FAQPage JSON-LD
--------------------------------------------------------------*/
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 20px 50px 20px 0;
	font-family: var(--display); font-size: clamp(15.5px, 1.6vw, 18.5px); font-weight: 480;
	color: var(--plum); line-height: 1.35;
	transition: color .3s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--alta); }
.faq summary::after {
	content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px;
	background: var(--alta); transform: translateY(-50%);
}
.faq summary::before {
	content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px;
	background: var(--alta); transform: translateY(-50%) rotate(90deg);
	transition: transform .35s var(--ease), opacity .35s;
}
.faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq details[open] summary { color: var(--alta); }
.faq__a { padding: 0 clamp(0px, 6vw, 70px) 22px 0; }
.faq__a p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0 0 11px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a strong { color: var(--plum); font-weight: 600; }
.section--ink .faq summary, .section--plum .faq summary { color: var(--ivory); }
.section--ink .faq summary:hover, .section--plum .faq summary:hover { color: var(--gold-pale); }
.section--ink .faq details[open] summary, .section--plum .faq details[open] summary { color: var(--gold-pale); }
.section--ink .faq, .section--plum .faq { border-color: rgba(253,249,244,.16); }
.section--ink .faq details, .section--plum .faq details { border-color: rgba(253,249,244,.16); }
.section--ink .faq__a p, .section--plum .faq__a p { color: rgba(253,249,244,.65); }
.section--ink .faq__a strong, .section--plum .faq__a strong { color: var(--gold-pale); }

/*--------------------------------------------------------------
  16. BUTTONS & CTA
--------------------------------------------------------------*/
.btns { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }
.btn {
	position: relative; display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 26px; font-size: 11.5px; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	border-radius: var(--radius);
	border: 1px solid transparent; overflow: hidden; isolation: isolate;
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: inset 1px 1px 2px var(--neo-light), inset -2px -2px 5px var(--neo-shadow);
	transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(43,29,23,.4), inset 1px 1px 2px rgba(255,255,255,.25); }
.btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	transform: translateY(101%); transition: transform .45s var(--ease);
}
.btn:hover::before { transform: none; }

/* glass fills — translucent tinted backgrounds rather than flat colour,
   the solid tint only arrives via the ::before sweep on hover */
.btn--alta { background: rgba(122, 31, 43, .14); border-color: rgba(122, 31, 43, .5); color: var(--alta); }
.btn--alta::before { background: var(--alta); }
.btn--alta:hover { color: var(--ivory); border-color: var(--alta); }

.btn--wa { background: rgba(31, 168, 85, .14); border-color: rgba(31, 168, 85, .5); color: #1a8a48; }
.btn--wa::before { background: #1FA855; }
.btn--wa:hover { color: #fff; border-color: #1FA855; }

.btn--line { background: rgba(255, 255, 255, .1); border-color: currentColor; color: var(--plum); }
.btn--line::before { background: var(--plum); }
.btn--line:hover { color: var(--ivory); border-color: var(--plum); }

/* dark-context override — anywhere text sits on the charcoal/maroon
   surfaces (section--ink, section--plum, or the standalone .cta card,
   which uses --ink directly without those wrapper classes) */
.section--ink .btn--line, .section--plum .btn--line, .cta .btn--line {
	background: rgba(228, 211, 176, .08); border-color: rgba(228, 211, 176, .5); color: var(--gold-pale);
}
.section--ink .btn--line::before, .section--plum .btn--line::before, .cta .btn--line::before { background: var(--gold); }
.section--ink .btn--line:hover, .section--plum .btn--line:hover, .cta .btn--line:hover { color: var(--ink); border-color: var(--gold); }

.cta {
	background: var(--ink); color: var(--ivory);
	padding: clamp(28px, 4.2vw, 58px); border-radius: 20px;
	position: relative; overflow: hidden;
	border: 1px solid rgba(228, 211, 176, .12);
}
.cta::before {
	content: ''; position: absolute; width: 380px; height: 380px; top: -170px; right: -120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(201,164,107,.3), transparent 70%);
}
.cta > * { position: relative; }
.cta p { color: rgba(253,249,244,.76); max-width: 58ch; margin: 11px 0 0; font-size: 13.5px; }

/*--------------------------------------------------------------
  17. AUTHOR / BREADCRUMB / MEDIA
--------------------------------------------------------------*/
.author {
	display: flex; gap: 18px; align-items: flex-start;
	background: rgba(255, 253, 250, .55);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid var(--glass-line); border-radius: 16px;
	padding: clamp(18px, 2.4vw, 26px); margin-top: 30px;
}
.author img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--gold-pale); }
.author h3 { margin-bottom: 3px; }
.author__role { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 10px; }
.author p { font-size: 13.5px; color: var(--muted); margin: 0 0 11px; }

.crumbs { font-size: 11px; color: var(--muted); padding-block: 16px 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: '/'; color: var(--gold); }
.crumbs a:hover { color: var(--alta); }
.crumbs [aria-current] { color: var(--plum); font-weight: 500; }

/* photo frame — a mat border with a soft-UI edge, a gold corner
   bracket, and a small pushpin holding it in place, so photos read as
   deliberately displayed rather than dropped into a plain box */
.frame {
	position: relative; padding: 9px; background: var(--ivory); border-radius: 14px;
	box-shadow:
		0 30px 54px -30px rgba(43, 29, 23, .4),
		inset 3px 3px 8px var(--neo-shadow),
		inset -3px -3px 8px var(--neo-light);
}
.frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 8px; }
.frame--wide img { aspect-ratio: 3/2; }
.frame::before {
	content: ''; position: absolute; bottom: 12px; left: 12px;
	width: 22px; height: 22px;
	border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold);
	opacity: .65;
}
.frame::after {
	content: '';
	position: absolute; top: -11px; left: 50%; translate: -50% 0;
	width: 18px; height: 18px; border-radius: 50%; z-index: 2;
	background: radial-gradient(circle at 32% 28%, #F3E4C6, var(--gold) 55%, var(--gold-deep) 100%);
	box-shadow: 0 4px 8px -2px rgba(43, 29, 23, .55), inset 0 1px 1px rgba(255,255,255,.6);
}
.section--ink .frame, .section--plum .frame { background: var(--plum); }

/* faint floating makeup icons — plain glyphs (FA icon font + a couple
   of emoji), not drawn shapes, kept deliberately very transparent so
   they read as a quiet ambient detail rather than a graphic element.
   Injected by JS (see icons() in beautiliate.js). Lifted above .page
   (z-index 2) so they're visible over any section, unlike the hidden
   aurora/dust layer which is meant to only glow through glass. */
.fx__icons { z-index: 3; overflow: hidden; }
.fx__icons i, .fx__icons span {
	position: absolute; bottom: -10vh; opacity: 0;
	line-height: 1; color: var(--gold-deep);
	animation: iconRise linear infinite; will-change: transform, opacity;
}
.fx__icons i:nth-child(3n) { color: var(--alta); }
@keyframes iconRise {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg);          opacity: 0; }
	12%  {                                                         opacity: .1; }
	50%  { transform: translate3d(16px, -62vh, 0) rotate(10deg); }
	86%  {                                                         opacity: .07; }
	100% { transform: translate3d(-12px, -122vh, 0) rotate(-8deg); opacity: 0; }
}

/* a few CSS-drawn props (lipstick, brush) sliding in diagonally from a
   screen edge rather than rising straight up — kept just as faint as
   the icons above so they never compete with page content */
.fx__wisps { z-index: 3; overflow: hidden; }
.wisp { position: absolute; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.wisp--lipstick { width: 16px; height: 46px; }
.wisp--lipstick::before {
	content: ''; position: absolute; left: 50%; bottom: 0; width: 13px; height: 27px; translate: -50% 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale) 50%, var(--gold-deep));
}
.wisp--lipstick::after {
	content: ''; position: absolute; left: 50%; bottom: 25px; width: 11px; height: 20px; translate: -50% 0;
	border-radius: 6px 6px 2px 2px / 11px 11px 2px 2px;
	background: linear-gradient(180deg, var(--alta-lit), var(--alta));
}
.wisp--brush { width: 22px; height: 60px; }
.wisp--brush::before {
	content: ''; position: absolute; left: 50%; bottom: 0; width: 6px; height: 34px; translate: -50% 0;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--sand), var(--ivory));
}
.wisp--brush::after {
	content: ''; position: absolute; left: 50%; bottom: 28px; width: 22px; height: 20px; translate: -50% 0;
	border-radius: 50% 50% 40% 40% / 65% 65% 30% 30%;
	background: radial-gradient(circle at 34% 28%, var(--muted), var(--plum-soft) 70%);
}
.wisp--lr { animation: wispDiagLR linear infinite; }
.wisp--rl { animation: wispDiagRL linear infinite; }
@keyframes wispDiagLR {
	0%   { transform: translate3d(-16vw, 18vh, 0) rotate(-14deg); opacity: 0; }
	16%  {                                                        opacity: .12; }
	50%  { transform: translate3d(58vw, -42vh, 0) rotate(6deg); }
	84%  {                                                        opacity: .09; }
	100% { transform: translate3d(132vw, -104vh, 0) rotate(20deg); opacity: 0; }
}
@keyframes wispDiagRL {
	0%   { transform: translate3d(16vw, 18vh, 0) rotate(14deg);  opacity: 0; }
	16%  {                                                        opacity: .12; }
	50%  { transform: translate3d(-58vw, -42vh, 0) rotate(-6deg); }
	84%  {                                                        opacity: .09; }
	100% { transform: translate3d(-132vw, -104vh, 0) rotate(-20deg); opacity: 0; }
}

/*--------------------------------------------------------------
  18. FOOTER — photo backdrop behind a dark glass wash, blended
  smoothly out of the page colour rather than a hard seam line
--------------------------------------------------------------*/
.foot {
	position: relative;
	color: var(--ivory);
	padding-top: clamp(48px, 6vw, 80px);
	overflow: hidden;
	background-color: var(--ink);
	background-image:
		linear-gradient(180deg, rgba(15, 13, 12, .78) 0%, rgba(15, 13, 12, .94) 30%, rgba(15, 13, 12, .97) 55%, var(--ink) 100%),
		url('https://img.freepik.com/free-photo/makeup-cosmetics-presentation_23-2151928807.jpg?&w=740');
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(22px, 3vw, 46px); padding-bottom: 46px; }
/* column-wise separators between the footer's four blocks */
.foot__grid > div:not(:first-child) {
	border-left: 1px solid rgba(253, 249, 244, .12);
	padding-left: clamp(18px, 2.4vw, 32px);
}
/* underline the column headings with a short overline/underline pair
   instead of letter-spacing alone carrying the label */
.foot h4 {
	position: relative;
	font-family: var(--accent); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold); font-weight: 500;
	padding: 8px 0 10px; margin-bottom: 16px;
	border-top: 1px solid rgba(196, 141, 87, .35);
}
.foot h4::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}
.foot p { font-size: 13px; color: rgba(253,249,244,.66); line-height: 1.68; margin: 0 0 14px; }
/* small pushpin marker before every footer link, echoing the pin
   accent used on the photo frames elsewhere on the site */
.foot li { position: relative; margin-bottom: 10px; padding-left: 15px; font-size: 13px; }
.foot li::before {
	content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, var(--gold-pale), var(--gold-deep));
	box-shadow: 0 0 0 2px rgba(176, 141, 87, .16);
}
.foot li a { color: rgba(253,249,244,.7); transition: color .3s, padding .3s; }
.foot li a:hover { color: var(--gold-pale); padding-left: 5px; }
.foot__social { display: flex; gap: 10px; margin-top: 16px; }
.foot__social a {
	width: 34px; height: 34px; display: grid; place-items: center;
	background: rgba(255, 253, 250, .06);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(253,249,244,.18); border-radius: 50%; font-size: 12.5px;
	color: rgba(253,249,244,.75); transition: all .3s var(--ease);
}
.foot__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-3px); }
.foot__wordmark {
	font-family: var(--display); font-weight: 380; font-size: clamp(44px, 12vw, 150px); line-height: .8;
	color: rgba(253,249,244,.07); text-align: center; letter-spacing: -.02em;
	user-select: none; margin-bottom: -.12em; pointer-events: none;
}
.foot__base { border-top: 1px solid rgba(253,249,244,.14); padding-block: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 11px; color: rgba(253,249,244,.55); }
.foot__legal a { color: rgba(253,249,244,.55); }
.foot__legal a:hover { color: var(--gold-pale); }

/*--------------------------------------------------------------
  19. FLOATING ACTIONS
--------------------------------------------------------------*/
.wa-float {
	position: fixed; left: 20px; bottom: 20px; z-index: 55;
	width: 54px; height: 54px; border-radius: 50%;
	background: #1FA855; color: #fff; display: grid; place-items: center; font-size: 25px;
	box-shadow: 0 12px 30px -10px rgba(31, 168, 85, .8);
	transition: transform .35s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float::after {
	content: ''; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid #1FA855; animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* back-to-top — mirrors the WhatsApp button on the opposite corner,
   fades in once the reader has actually scrolled somewhere */
.top-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 55;
	width: 50px; height: 50px; border-radius: 50%;
	background: rgba(30, 27, 26, .72); color: var(--gold-pale);
	display: grid; place-items: center; font-size: 17px;
	border: 1px solid rgba(228, 211, 176, .3);
	backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: 0 12px 28px -12px rgba(30, 27, 26, .6);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.top-float.is-visible { opacity: 1; visibility: visible; transform: none; }
.top-float:hover { background: var(--alta); color: var(--ivory); border-color: var(--alta); }

.dock {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; display: none; gap: 1px;
	background: rgba(30, 27, 26, .16); padding-bottom: env(safe-area-inset-bottom);
	backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.dock a {
	flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.dock__call {
	background: rgba(122, 31, 43, .82); color: var(--ivory);
	box-shadow: inset 2px 2px 5px rgba(0,0,0,.3), inset -2px -2px 5px rgba(255,255,255,.12);
}
.dock__wa {
	background: rgba(31, 168, 85, .82); color: #fff;
	box-shadow: inset 2px 2px 5px rgba(0,0,0,.28), inset -2px -2px 5px rgba(255,255,255,.16);
}

/*--------------------------------------------------------------
  20. REVEAL
--------------------------------------------------------------*/
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/*--------------------------------------------------------------
  21. RESPONSIVE
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse > :first-child { order: 0; }
	.foot__grid { grid-template-columns: 1fr 1fr; }
	.foot__grid > div:not(:first-child) { border-left: 0; padding-left: 0; }
	.foot__grid > div:nth-child(2n) { border-left: 1px solid rgba(253, 249, 244, .12); padding-left: clamp(18px, 2.4vw, 32px); }
}
@media (max-width: 860px) {
	.nav { display: none; }
	.burger { display: grid; }
	.masthead__cta .btn { display: none; }
	.utility__rating, .utility__social { display: none; }
	.hero-fs { min-height: min(78vh, 620px); }
	.hero-fs__content { padding-top: clamp(90px, 24vw, 130px); }
	.hero-fs__corner { width: 46px; height: 46px; bottom: 18px; }
}
@media (max-width: 620px) {
	.brand { padding: 5px 12px 5px 5px; }
	.brand img { width: 28px; height: 28px; }
	.brand__name { font-size: 14.5px; }
	.brand__tag { display: none; }
	.sec-head { grid-template-columns: 1fr; gap: 14px; }
	.sec-num { display: inline-block; }
	.foot__grid { grid-template-columns: 1fr; gap: 32px; }
	/* keep the same vertical left-border separator used at wider
	   breakpoints, just applied to every stacked block instead of only
	   the even ones — the 1024px rule only bordered :nth-child(2n),
	   which left Popular Areas (an odd child) without one once the
	   grid stacked to a single column. Repeating :nth-child(2n) here
	   matches its specificity so this reset actually wins. */
	.foot__grid > div, .foot__grid > div:nth-child(2n) { border-left: 0; padding-left: 0; }
	.foot__grid > div:not(:first-child) {
		border-left: 1px solid rgba(253, 249, 244, .12);
		padding-left: clamp(18px, 2.4vw, 28px);
	}
	.author { flex-direction: column; }
	.dock { display: flex; }
	/* clearance for the fixed dock belongs to the footer's own dark
	   background, not the body's — padding on <body> here left a strip
	   of the page's ivory background showing above the dock instead of
	   the footer simply running underneath it */
	.foot__base { padding-bottom: calc(18px + 48px); justify-content: center; text-align: center; }
	/* the dock bar already has its own WhatsApp button — a second
	   floating WhatsApp circle on top of it was redundant */
	.wa-float { display: none; }
	.top-float { bottom: 62px; right: 16px; width: 44px; height: 44px; font-size: 15px; }
	.fx__glyphs { display: none; }
	.timeline { padding-left: 30px; }
	.timeline li::before { left: -29px; }
	.btns .btn { flex: 1 1 100%; justify-content: center; }
	.facts th { width: 42%; }
	/* the dotted leader gets cramped on a narrow phone — drop it and
	   let name/price wrap to their own lines instead */
	.menu { padding: 4px 16px; }
	.menu__head { flex-wrap: wrap; }
	.menu__leader { display: none; }
	.menu__name { flex: 1 1 100%; min-width: 0; white-space: normal; }
	.menu__price { margin-left: auto; }
	.menu__desc { margin-left: 0; }
	.hero-fs__corner { display: none; }
	.hero-fs__content { padding-top: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fx__aurora span, .fx__glyphs i, .fx__glyphs span, .fx__icons i, .fx__icons span, .wisp, .ribbon__track, .brand-ribbon__track { animation: none !important; }
	.fx__dust, .fx__glyphs { display: none; }
	.reveal { opacity: 1 !important; transform: none !important; }
	.wa-float::after { animation: none; }
	.top-float { transition: none; }
	.hero-fs__slide { transition: none; }
	.hero-fs__scroll span { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/*--------------------------------------------------------------
  19. CONTACT PAGE COMPONENTS
--------------------------------------------------------------*/

/* .reach — three large "reach me" tiles: call / WhatsApp / email.
   Not the .card grid: full-bleed colour fills, big icon, big number,
   no border-hairline treatment. */
.reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 40px; }
@media (max-width: 780px) { .reach { grid-template-columns: 1fr; } }
.reach__tile {
	position: relative; padding: 40px 30px; background: var(--ivory); text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	transition: background .35s var(--ease), color .35s var(--ease);
}
.reach__tile i { font-size: 30px; color: var(--gold-deep); transition: color .35s var(--ease); }
.reach__tile h3 { margin: 0; font-size: clamp(19px, 2vw, 23px); }
.reach__tile p { margin: 0; font-size: 13.5px; color: var(--muted); }
.reach__tile strong { display: block; font-family: var(--display); font-size: clamp(18px, 2vw, 21px); color: var(--alta); margin-top: 2px; }
.reach__tile:hover { background: var(--plum); }
.reach__tile:hover i, .reach__tile:hover h3, .reach__tile:hover strong { color: var(--gold-pale); }
.reach__tile:hover p { color: rgba(253,249,244,.7); }
.reach__tile--wa:hover { background: #157a3d; }
.reach__tile--wa:hover i, .reach__tile--wa:hover h3, .reach__tile--wa:hover strong { color: #fff; }
.reach__tile--wa:hover p { color: rgba(255,255,255,.75); }

/* .steps — horizontal connected stepper for "what to have ready
   before you message." Collapses to a left-lined vertical list on
   mobile, distinct from the About page's .timeline (year markers). */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps__step { position: relative; padding: 0 22px 0 0; counter-increment: step; }
.steps__step:not(:last-child)::after {
	content: ''; position: absolute; top: 22px; left: 22px; right: -22px; height: 1px;
	background: linear-gradient(90deg, var(--gold), transparent);
}
@media (max-width: 860px) { .steps__step:not(:last-child)::after { display: none; } .steps__step { padding: 0 0 30px 0; } }
.steps__num {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--plum); color: var(--gold-pale); font-family: var(--display); font-size: 18px;
	position: relative; z-index: 1; margin-bottom: 16px;
}
.steps__step h3 { margin: 0 0 6px; font-size: 17px; }
.steps__step p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* .stats — horizontal band of big numbers for hours/coverage/response.
   Not a card grid: no borders between items, just a shared dark band. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(228,211,176,.15); margin-top: 8px; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stats__item { padding: 26px 20px; text-align: center; background: var(--plum); }
.stats__num { display: block; font-family: var(--display); font-size: clamp(28px, 3.4vw, 38px); color: var(--gold-pale); line-height: 1; }
.stats__label { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; color: rgba(253,249,244,.65); }

@media print {
	.fx, .masthead, .dock, .wa-float, .top-float, .ribbon, .drawer, .scrim { display: none !important; }
	body { background: #fff; color: #000; }
	.section { padding-block: 20px; }
}