/*--------------------------------------------------
	Naveen Satya — BIO theme over Hayler
	Palette: ink ground, crimson + gold accents
---------------------------------------------------*/

:root {
	--primary-color: #D4A017;
	--secondary-color: #6B0F0F;

	--cursor-background-color: #D4A017;
	--cursor-border-color: #D4A017;
	--cursor-info-color: #A7A3AE;

	--fullscreen-menu-bg-color: #0A0A0A;

	/* Three brand voices, per the Bliss bible:
	   Display = Cormorant · Interface = Manrope · Reading = Lato.
	   Playora shares them (Cormorant Garamond for romantic display headlines).
	   Playfair Display + JetBrains Mono are scoped to the Spatial AI module only. */
	--default-font-family: 'Manrope';
	--primary-font-family: 'Cormorant Garamond';
	--secondary-font-family: 'Manrope';
	--reading-font-family: 'Lato';

	--bt-font-weight: 600;
	--bt-letter-spacing: -0.012em;
	--h1-font-weight: 600;
	--h1-letter-spacing: -0.012em;
	--h2-font-weight: 600;
	--h2-letter-spacing: -0.012em;
	--h3-font-weight: 600;
	--h3-letter-spacing: -0.01em;
	--h4-font-weight: 600;
	--h4-letter-spacing: -0.008em;
	--title-font-weight: 600;
	--title-letter-spacing: -0.012em;
	--small-title-font-weight: 600;
	--small-title-letter-spacing: -0.01em;
	--fullscreen-menu-font-weight: 600;
	--fullscreen-menu-letter-spacing: -0.012em;

	/* Six brand colours — no invented values.
	   Gold is a precious accent, never a wash. Crimson and Plum are tints only. */
	--bliss-gold: #D4A017;
	--bliss-ink: #211C16;
	--bliss-crimson: #6B0F0F;
	--bliss-plum: #3A1A44;
	--bliss-ivory: #F5F1EB;
	--bliss-gray: #A7A3AE;
	--gold-bright: #E8B83A;
	--gold-deep: #A87D0E;

	--ground: #0A0A0A;
	--surface-1: #141414;
	--surface-2: #1C1820;
	--ink-hi: var(--bliss-ivory);
	--ink-body: var(--bliss-gray);
	--ink-quiet: #7D7986;
}

/* Ink ground everywhere the template assumed a light page */
body.hayler,
#clapat-page-content { background-color: var(--ground); }

/* Hero intro start states.
   showcase.css parks the slider wrapper, its caption layer and the control
   strip at opacity 0, waiting on the template's ajax intro timeline. This page
   drives its own curtain, so the preloader flags the body and we lift all of
   them here. Deliberately NOT !important: the strip is a .fadeout-element and
   GSAP writes inline styles to fade it as you scroll past the hero. */
body.bio-intro-done .showcase-slider-parallax,
body.bio-intro-done .clapat-slider-wrapper .clapat-caption-wrapper,
body.bio-intro-done .clapat-slider-wrapper .fade-slide-element { opacity: 1; }

/* The hero portrait's lit head sits directly under the header lockup, and the
   header is transparent by design. Give the lockup its own soft scrim rather
   than dimming the panel — the portrait keeps the brightness it was asked for.
   #header-gradient can't be used: the template pins it to opacity 0 inline. */
#clapat-logo { position: relative; }
#clapat-logo::before {
	content: '';
	position: absolute;
	/* The box has to be much larger than the lockup, because the feather has
	   to happen somewhere. At -30/-90/-26/-34 the fades were only 92px and
	   22px long, which against a mid-dark photograph is not a fade at all —
	   it read as a black rectangle with two visible edges sitting over the
	   portrait. Roughly 190px of horizontal and 95px of vertical runway turns
	   the same scrim into a corner vignette. */
	left: -60px;
	right: -230px;
	top: -60px;
	bottom: -120px;
	/* Opaque across the FULL width of the lockup, feathering only after it —
	   a radial centred on the box drops to ~0.46 alpha by the text's right
	   edge, which is where "Bangalore, India" was still washing out. The
	   plateaus below run to 58%, which is just past the last glyph on both
	   axes; the alpha under the type is unchanged at ~0.94. */
	background: linear-gradient(90deg, rgba(10,10,10,0.94) 0 58%, rgba(10,10,10,0) 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
	pointer-events: none;
}
#clapat-logo > a { position: relative; }

/* Once the hero has scrolled past, the transparent header stops working:
   section headings and body copy run straight under the nav labels, and both
   texts stay visible because there is nothing between them. `bio.js` sets
   `bio-past-hero` the moment the hero's bottom clears the band; the scrim
   below is what that class buys. Opaque behind the labels themselves,
   feathered over the last fifth so the band has no hard bottom edge, and
   absent over the hero so the panels keep the brightness they were given. */
#clapat-header::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Fully opaque down to 78% — the logo, the nav row and the pill all sit
	   within the top 72px of the 100px band, so anything less leaves the copy
	   ghosting through. The last fifth feathers so the band has no hard edge. */
	background: linear-gradient(180deg, rgba(10,10,10,1) 0 78%, rgba(10,10,10,0.85) 88%, rgba(10,10,10,0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
body.bio-past-hero #clapat-header::before { opacity: 1; }
/* The lockup's own scrim is for the hero only — over the band it would just
   double up and read as a darker rectangle sitting inside the header. */
body.bio-past-hero #clapat-logo::before { opacity: 0; }
#clapat-logo::before { transition: opacity 0.35s ease; }

/* Hero control strip + header button labels.
   These inherit showcase.css's black ink, which was written for the demo's
   LIGHT slides. Every slide here is near-black, so they need the theme's ink.
   The header label is !important because .change-header-color flips it back
   to black over each slide — a rule that only makes sense on a light hero. */
.clapat-slider-footer .progress-info-fill,
.clapat-slider-footer .progress-info-empty,
.clapat-slider-footer .cp-buttons-caption { color: var(--bliss-gray); }
.clapat-slider-footer .info-text,
.clapat-slider-footer .info-text span { color: var(--bliss-ivory); }
header .button-wrap.button-link .button-text,
header .button-wrap.button-link .button-text span { color: var(--bliss-ivory) !important; }

/* Footer chrome + filled buttons — the last places still carrying
   showcase.css's black demo ink, and the gold CTA whose label inherited
   the same gold as its own fill. */
.parallax-footer .clock-widget,
.parallax-footer .clock-label,
.parallax-footer .copyright,
.parallax-footer .socials-text { color: var(--bliss-gray); }
.parallax-footer .button-wrap .button-text,
.parallax-footer .button-wrap .button-text span { color: var(--bliss-ivory); }
/* Filled pill CTA. On .apart-icon the template makes the pill's fill
   `currentColor` and inverts the label span — so `color` here paints the
   PILL (gold), and the label needs the invert cancelled plus its own ink. */
.button-wrap.button-icon-box.apart-icon .button-text { color: var(--bliss-gold); }
.button-wrap.button-icon-box.apart-icon .button-text span {
	color: var(--bliss-ink);
	-webkit-filter: none;
	filter: none;
}
/* And a third time, on the nav's current-section chip. `bio.js` adds `.active`,
   the template rolls the chip up into view, and its fill is `currentColor`
   with the label `filter: invert(1)` over it — so the chip inherits whatever
   ink the nav happens to carry and lands on pure #000, which is not in the
   palette, with a 3px radius against the header pill's fully rounded one. Two
   shape languages, 26px apart in the same bar.

   Name both colours instead of inverting, and make it a real pill: 13px is
   half the chip's 26px height. Ivory on Bliss Ink measures 15:1. */
.classic-menu .clapat-nav li a.active .before-span span::before {
	background-color: var(--bliss-ink);
	border-radius: 13px;
}
.classic-menu .clapat-nav li a.active .before-span span::after {
	color: var(--bliss-ivory);
	-webkit-filter: none;
	filter: none;
}

/* The icon half is the same trap a second time. The template fills the glyph's
   own box with `currentColor` and then inverts the glyph to read against it —
   which works only when currentColor is black or white. Inverting Bliss Gold
   gives #2B5FE8, so the arrow rendered blue on the gold chip. Cancel the
   invert and set the ink directly, exactly as the label above does. */
.button-wrap.button-icon-box.apart-icon .button-icon i::before {
	color: var(--bliss-ink);
	-webkit-filter: none;
	filter: none;
}
/* Outline variants have no fill — their label sits on the page ground. */
.button-wrap.button-icon-box.outline-solid .button-text,
.button-wrap.button-icon-box.outline-solid .button-text span,
.button-wrap.button-icon-box.reveal-icon .button-text span { color: var(--bliss-ivory); }

/* ------------------------------------------------------------------
   Opening gate — the light first screen
   Ivory ground (Bliss Ivory), ink type, one gold CTA. Nothing else.
   ------------------------------------------------------------------ */
#bio-gate {
	position: fixed;
	inset: 0;
	z-index: 19000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	box-sizing: border-box;
	background:
		radial-gradient(ellipse 90% 70% at 50% 22%, #FFFFFF, transparent 70%),
		linear-gradient(180deg, #F7F4EE 0%, #EFEAE1 100%);
	transition: transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease .3s;
}
body.bio-gate-open #bio-gate { transform: translateY(-100%); opacity: 0; }
body.bio-gate-locked,
body.bio-gate-locked #clapat-page-content { overflow: hidden; }

.bio-gate-inner {
	text-align: center;
	max-width: 640px;
	animation: bioGateIn 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bioGateIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.bio-gate-eyebrow {
	font-family: var(--secondary-font-family), 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #6A5F50;
	margin-bottom: 26px;
}
.bio-gate-title {
	font-family: var(--primary-font-family), Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(52px, 11vw, 132px);
	line-height: 0.94;
	letter-spacing: -0.015em;
	color: var(--bliss-ink) !important;
	margin: 0;
}
.bio-gate-rule {
	display: flex;
	justify-content: center;
	margin: 34px 0 40px;
}
.bio-gate-rule span {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--bliss-gold);
}
.bio-gate-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--bliss-gold);
	border-radius: 999px;
	padding: 0 30px;
	height: 52px;
	font-family: var(--secondary-font-family), 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bliss-ink);
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bio-gate-btn::after {
	content: '';
	width: 18px;
	height: 8px;
	background: currentColor;
	clip-path: polygon(0 3px, 12px 3px, 12px 0, 18px 4px, 12px 8px, 12px 5px, 0 5px);
	transition: transform .25s ease;
}
.bio-gate-btn:hover {
	background: #E8B83A;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(212,160,23,0.32);
}
.bio-gate-btn:hover::after { transform: translateX(5px); }
.bio-gate-btn:focus-visible { outline: 2px solid var(--bliss-ink); outline-offset: 4px; }

@media (max-width: 767px) {
	.bio-gate-rule { margin: 26px 0 32px; }
	.bio-gate-btn { height: 48px; padding: 0 24px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.bio-gate-inner { animation: none; }
	#bio-gate { transition: opacity .4s ease; }
	body.bio-gate-open #bio-gate { transform: none; }
}

/* Film grain — atmosphere over the whole page, never in the way of a click. */
body.hayler::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
	body.hayler::after { display: none; }
}

.light-section { color: var(--ink-hi); }

/* Reading voice for long-form copy; Manrope stays on UI, labels and subheads. */
p, .bio-dl dd, li { font-family: var(--reading-font-family), 'Manrope', sans-serif; }

/* Spatial AI speaks its own brand book: Playfair Display for display —
   never bolded — and JetBrains Mono as the technical voice. Mono is for
   labels, numerals and captions; running prose stays in the reading face,
   because multi-sentence paragraphs set in mono stop being readable. */
.bio-panel.tone-spatial h2,
.bio-panel.tone-spatial h3,
.bio-panel.tone-spatial h4,
.bio-panel.tone-spatial .heading-4,
.bio-panel.tone-spatial .bio-lockup,
.bio-panel.tone-spatial .bio-triple-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
}
.bio-panel.tone-spatial .bio-kicker,
.bio-panel.tone-spatial .bio-num,
.bio-panel.tone-spatial .bio-plate-caption,
.bio-panel.tone-spatial figcaption,
.bio-panel.tone-spatial .bio-dl dt {
	font-family: 'JetBrains Mono', monospace;
}
.bio-panel.tone-spatial p,
.bio-panel.tone-spatial .bio-triple-body { font-family: var(--reading-font-family), 'Lato', sans-serif; }

h1, h2, h3, h4, h5, .big-title, .item-title, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5 { color: var(--bliss-ivory); }
h6, .heading-6 { color: var(--bliss-gold); }

p { color: var(--ink-body); }
p.body-medium, .body-medium { color: var(--bliss-ivory); }

a { color: var(--bliss-gold); }
a:hover { color: var(--gold-bright); }
a:focus-visible { outline: 2px solid var(--bliss-gold); outline-offset: 3px; }

hr { border-color: #2A2A2A; }

::selection { background: rgba(212,160,23,0.30); color: var(--bliss-ivory); }

/* Plain bulleted copy — the "what I am building" list is the only bulleted
   list anywhere in the page's body content, so nothing upstream styles a
   bare <ul>/<li>. Left alone it would render browser-default disc bullets in
   whatever the inherited text colour happens to be — the one clearly
   unstyled element on an otherwise fully typeset page. The dash marker
   echoes .bio-kicker's own before-dash rather than introducing a new motif;
   the product name stays <strong> and inherits ordinary link colour when
   it's also a link (the Spatial AI item), which is why that one item alone
   reads gold — a signal it's clickable, not an inconsistency. */
.bio-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bio-list li {
	position: relative;
	padding-left: 26px;
}
.bio-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 14px;
	height: 1px;
	background: var(--bliss-gold);
}
.bio-list strong { color: var(--bliss-ivory); font-weight: 600; }

/* Kickers / eyebrows */
.bio-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--default-font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold-bright);
	margin: 0 0 26px;
}
.bio-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.bio-kicker::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--gold-bright);
	display: block;
	flex: none;
}

.bio-num {
	font-family: var(--secondary-font-family);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bliss-gray);
	line-height: 1.9;
}
.bio-num strong { display: block; color: var(--bliss-gold); font-weight: 600; }

/* Logo plates — every venture mark sits on the ground its brand needs,
   at one shared size so the five read as a set. */
.bio-logo-plate {
	width: 132px;
	height: 74px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	border-radius: 8px;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.bio-logo-plate:hover { transform: translateY(-2px) scale(1.02); }
.bio-logo-plate img { display: block; max-width: 100%; height: auto; }
.bio-logo-plate.on-bliss {
	background: var(--bliss-ink);
	border: 1px solid rgba(107,15,15,0.55);
}
.bio-logo-plate.on-bliss .bio-lockup { color: var(--bliss-ivory); }
.bio-logo-plate.on-bliss:hover { box-shadow: 0 12px 28px rgba(107,15,15,0.35); }
.bio-logo-plate.on-ink {
	background: var(--ground);
	border: 1px solid rgba(212,160,23,0.35);
}
.bio-logo-plate.on-ink:hover { box-shadow: 0 12px 30px rgba(212,160,23,0.28); }
.bio-logo-plate.on-spatial {
	background: #0C0C0C;
	border: 1px solid rgba(184,147,74,0.35);
}
.bio-logo-plate.on-spatial:hover { box-shadow: 0 12px 30px rgba(184,147,74,0.20); }
.bio-logo-plate.on-black {
	background: #000;
	border: 1px solid rgba(212,160,23,0.30);
}
.bio-logo-plate.on-black:hover { box-shadow: 0 12px 30px rgba(212,160,23,0.24); }
/* Bare plate — the wordmark carries its own colour, so no box behind it. */
.bio-logo-plate.on-bare {
	background: none;
	border: 1px solid transparent;
	box-shadow: none;
}
.bio-logo-plate.on-bare:hover { box-shadow: none; }

.bio-plate-caption {
	font-family: var(--default-font-family);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--bliss-gray);
	margin-top: 10px;
}

.bio-lockup {
	font-family: var(--primary-font-family);
	font-weight: 400;
	line-height: 1.05;
	color: var(--bliss-ink);
}
.bio-lockup.stacked { text-align: center; }

/* Definition lists for site / app / social rows */
.bio-dl {
	display: grid;
	grid-template-columns: 140px minmax(0,1fr);
	gap: 12px 28px;
	margin: 30px 0 0;
	font-size: 15px;
	line-height: 1.7;
}
.bio-dl dt {
	font-family: var(--default-font-family);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bliss-gray);
	padding-top: 3px;
}
.bio-dl dd { margin: 0; color: var(--ink-body); }

.bio-pending {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 4px;
	border: 1px solid rgba(212,160,23,0.30);
	font-family: var(--secondary-font-family);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bliss-gray);
}

/* Panelled module cards */
.bio-panel {
	border-radius: 16px;
	padding: 40px 44px 46px;
	box-sizing: border-box;
}
.bio-panel.tone-blissai {
	background:
		radial-gradient(ellipse 90% 70% at 12% 0%, rgba(107,15,15,0.34), transparent 62%),
		linear-gradient(170deg, #1A1512 0%, #14100E 100%);
	border: 1px solid rgba(212,160,23,0.34);
}
.bio-panel.tone-bliss {
	background: linear-gradient(180deg, #2B241C, var(--bliss-ink));
	border: 1px solid rgba(212,160,23,0.40);
}
/* Playora ground is the live site's own #070707. Its crimson/plum ambience
   stays, but far enough down that the surface never reads blue. */
.bio-panel.tone-playora {
	background:
		radial-gradient(ellipse 80% 60% at 72% 16%, rgba(107,15,15,0.26), transparent 62%),
		radial-gradient(ellipse 70% 55% at 18% 88%, rgba(58,26,68,0.22), transparent 66%),
		#0F0F10;
	border: 1px solid rgba(212,160,23,0.34);
}
.bio-panel.tone-spatial {
	background: #0C0C0C;
	border: 1px solid rgba(184,147,74,0.30);
}

.bio-panel.tone-playora h2 { color: var(--bliss-gold); }
.bio-panel.tone-spatial h2,
.bio-panel.tone-spatial .heading-4 { color: #f3ede2; }
.bio-panel.tone-spatial .bio-num strong { color: #c8a45e; }

.bio-rule { display: flex; gap: 6px; margin-bottom: 32px; }
.bio-rule span { height: 2px; display: block; background: var(--bliss-gold); }
.bio-rule span:first-child { width: 44px; }
.bio-rule span + span { width: 14px; background: var(--gold-bright); }

/* Three-up feature strip (Spatial AI) */
.bio-triple {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1px;
	background: rgba(243,237,226,0.14);
	border: 1px solid rgba(243,237,226,0.14);
	border-radius: 10px;
	overflow: hidden;
	grid-template-rows: auto auto;
}
/* Each cell sizes its own title, so a two-line one pushes only its own body
   down and the three columns lose their shared baseline — "Every finish, one
   link" wraps where its neighbours do not, dropping that body 24px below the
   other two. Subgrid puts the title and the body on rows shared by all three
   cells, so the tallest title sets the row for everyone and the bodies start
   level whatever the copy does. */
.bio-triple > div {
	background: #1A1A1A;
	padding: 24px;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	align-content: start;
}
.bio-triple .bio-triple-title {
	font-family: var(--primary-font-family);
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -0.01em;
	color: #e2c690;
	/* An even two-line split rather than a long line and an orphan. */
	text-wrap: balance;
}
.bio-triple .bio-triple-body {
	font-family: var(--reading-font-family), 'Lato', sans-serif;
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.01em;
	color: #9c9891;
	margin-top: 10px;
}

/* Illustrations */
.bio-figure { margin: 34px 0 0; }
.bio-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid rgba(212,160,23,0.16);
}
.bio-figure.warm img { filter: sepia(0.16) saturate(1.28) hue-rotate(-14deg); }
/* Like the portrait credit below: the template pins every figcaption
   absolute, bottom-right, over its image, with an rgba(0,0,0,0.3) scrim to
   keep it legible on the photo. These four read as badge-style overlays for
   long enough to get a dedicated contrast fix (see git history — 4.09, 4.23,
   3.33 and, over the pale Spatial render, 1.88:1 against the real pixels
   behind them), but the brief changed: they read as floating too close to
   the artwork and belong below it instead, same as the portrait. Static pulls
   them out of the overlay; the inherited scrim goes with it, since normal-flow
   text over the panel's own background needs none. Colour is --bliss-gray,
   not the base template's original --ink-quiet: measured against each
   panel's own gradient at the caption's new position, --ink-quiet came in at
   4.19/3.69/4.16/4.39 — all four short of 4.5:1, worst on Wedding Suite where
   the ink-toned gradient sits lightest near the image. --bliss-gray clears
   every panel with room, worst case 6.33:1 (same Wedding Suite panel). */
.bio-figure figcaption {
	position: static;
	background: none;
	margin-top: 16px;
	font-family: var(--secondary-font-family);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--bliss-gray);
}

.bio-portrait { margin: 0; }
.bio-portrait > div { border-radius: 14px; overflow: hidden; }
/* Zoom from the crown down — a centre-origin scale crops the top of the head. */
.bio-portrait img { transform-origin: 50% 0; }
.bio-portrait img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.bio-portrait:hover img { transform: scale(1.035); }
/* The base template pins every figcaption absolute, bottom-right, over its
   image, with an rgba(0,0,0,0.3) scrim to keep it legible on the photo — right
   for the badge-style captions on the module screenshots, but this one was
   always meant as a plain photo credit: uppercase, letter-spaced, `margin-top`
   already written as if it sat in normal flow below the frame. That margin
   never did anything, because nothing here reset `position`, so it sat as an
   overlay chip on the portrait's shoulder instead — scrim and all, which is
   also why removing just the position left a disembodied dark rectangle
   floating under the photo: the scrim has no photo to sit on anymore. Static
   takes it out of the overlay entirely; 22px (up from 14px) gives it clear air
   under the photo rather than crowding the frame edge; and the scrim goes
   because normal-flow text on the section's own ink ground needs none. */
.bio-portrait figcaption {
	position: static;
	background: none;
	margin-top: 22px;
	font-family: var(--default-font-family);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bliss-gray);
}

/* Clients table holds the five brand marks — keep them legible on ink */
.clients-table li .client-wrapper img { filter: none; opacity: 1; }

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

/* Nothing may push the page sideways. */
.bio-panel, .bio-figure, .bio-triple, .bio-dl { max-width: 100%; min-width: 0; }
.bio-figure img, .bio-portrait img, .bio-logo-plate img { max-width: 100%; }

/* Long URLs, emails and handles must never overflow their column. */
.bio-dl dd, .bio-dl dd a, .bio-panel p a { overflow-wrap: anywhere; word-break: break-word; }

/* Comfortable touch targets for every inline link in the content columns. */
@media (hover: none) and (pointer: coarse) {
	.bio-dl dd a, .bio-panel p a { padding: 3px 0; display: inline-block; }
}

@media only screen and (max-width: 1024px) {
	.bio-panel { padding: 32px 28px 36px; }
	.bio-triple { grid-template-columns: minmax(0,1fr); }
	.bio-figure { margin-top: 28px; }
	.bio-dl { grid-template-columns: 124px minmax(0,1fr); gap: 10px 20px; }
}

@media only screen and (max-width: 767px) {
	.bio-panel { padding: 26px 20px 30px; border-radius: 12px; }
	.bio-rule { margin-bottom: 24px; }
	.bio-dl { grid-template-columns: minmax(0,1fr); gap: 2px 0; margin-top: 24px; }
	.bio-dl dt { padding-top: 16px; }
	.bio-dl dt:first-of-type { padding-top: 0; }
	.bio-logo-plate { width: 100%; max-width: 190px; height: 84px; }
	.bio-plate-caption { margin-bottom: 18px; }
	.bio-num { margin-bottom: 6px; }
	.bio-kicker { gap: 10px; margin-bottom: 20px; }
	.bio-kicker::before { width: 24px; }
	.bio-figure img { border-radius: 10px; }
	.bio-figure figcaption { font-size: 10px; letter-spacing: 0.08em; }
	.bio-triple > div { padding: 20px; }
	.bio-triple .bio-triple-title { font-size: 22px; }
}

@media only screen and (max-width: 479px) {
	#clapat-logo a > span > span:first-child { font-size: 18px !important; }
	#clapat-logo a > span > span:last-child { font-size: 9px !important; letter-spacing: 0.16em !important; }
	.bio-panel { padding: 22px 16px 26px; }
	.bio-logo-plate { max-width: 100%; height: 78px; padding: 14px; gap: 10px; }
	.bio-logo-plate .bio-lockup { font-size: 19px !important; }
	.bio-logo-plate img { width: 34px !important; height: 34px !important; }
	.bio-triple .bio-triple-title { font-size: 20px; }
	.bio-dl dt { font-size: 10px; }
}


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

/* 1. Nothing may push the page sideways. `clip` — never `hidden` — because
      overflow-x:hidden forces the other axis to `auto`, which would turn the
      element into a scroll container and strand the page's own scrolling. */
body.hayler { overflow-x: clip; }
/* iOS inflates text in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 2. Long unbroken strings — emails, URLs, handles — must never set the
      minimum width of their column. */
.bio-dl dd, .bio-dl dd a,
.bio-panel p a, .bio-list a, #elsewhere a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* 3. Media stays inside its box. */
.bio-figure img, .bio-portrait img, .bio-logo-plate img, .bio-shot img { max-width: 100%; height: auto; }

@media only screen and (max-width: 1024px) {
	/* 4. Real viewport units — dvh follows the iOS toolbar instead of
	      being clipped by it. Phone-only: at tablet-and-up the hero keeps
	      its full-bleed height. */
	#bio-gate { height: 100dvh; }

	/* 5. Notch and home-indicator clearance. */
	header.classic-menu { box-sizing: border-box; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
	.clapat-slider-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
	#bio-gate .bio-gate-inner { padding: 0 max(24px, env(safe-area-inset-left)); }
}

@media only screen and (max-width: 767px) {
	/* 6. Hero height follows the real viewport. The wrapper moves with the
	      slider, or the control strip floats over bare ground. */
	.clapat-slider-wrapper,
	.clapat-slider.fit-thumb-screen { height: 78dvh; min-height: 420px; }

	/* The hero caption and the control strip share a short screen —
	   pull the display size down so they cannot collide. */
	.clapat-slider .item-caption .item-title { font-size: clamp(30px, 9vw, 46px) !important; line-height: 1.08 !important; }
	.clapat-slider .item-caption .item-date, .clapat-slider .item-caption .item-cat { font-size: 10px; letter-spacing: 0.14em; }
	.clapat-slider-footer .info-text { display: none; }

	/* 8. Marquee and section rhythm tighten rather than overflow. */
	.bio-shot { border-radius: 10px; }
	.bio-gate-title { font-size: clamp(38px, 13vw, 64px) !important; }
	.bio-gate-eyebrow { font-size: 10px; letter-spacing: 0.2em; }
}

/* 9. Landscape phones are short — give the hero room to breathe. */
@media only screen and (max-height: 480px) and (orientation: landscape) {
	.clapat-slider-wrapper,
	.clapat-slider.fit-thumb-screen { height: 92dvh; min-height: 300px; }
	.clapat-slider .item-caption .item-title { font-size: clamp(26px, 6vw, 40px) !important; }
	.clapat-slider-footer { display: none; }
}

/* 10. Touch devices get no cursor ball and no hover-only affordances. */
@media (hover: none) and (pointer: coarse) {
	#ball, .cb-cursor { display: none !important; }
	.bio-logo-plate:hover { transform: none; }

	/* 11. Every tap target clears 44px.

	   Keyed to the pointer, not to `max-width: 767px` as it was. A phone in
	   landscape is 844px wide and matched nothing, so exactly the device that
	   most needs generous targets got desktop-sized ones: the section links
	   measured 32px and the CTA 34px. Width tells you how much room there is;
	   only the pointer query tells you what is doing the pointing. */
	.button-wrap a, .button-wrap button, header .button-wrap .button-text,
	.bio-dl dd a, #elsewhere a, .footer-nav-lists a, .bio-link-row a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* The footer's section list stacked six 24px links with no gap between
	   rows, so neighbouring targets shared an edge. 44px rows plus a little
	   air makes each one its own. */
	.footer-nav-lists { row-gap: 6px; }

	/* Links that are the whole of their paragraph are buttons in everything
	   but name and get the full target (`.bio-link-row`, set in the markup).
	   A link *inside* a sentence is exempt — WCAG excludes inline targets, and
	   forcing a 44px box on one would tear open the line it sits in. */
	.bio-panel p a:not(.bio-link-row a) { min-height: 0; }
}

/* 12. The fullscreen menu. Its items were set at 39.6px on a 41.58px line
      with no margin, so the five links butted edge to edge and read as one
      block of text rather than a list — and "Wedding Suite" wrapped, which
      made it look like two more entries. Give each item its own air, and keep
      every label on one line by scaling the type with the viewport instead of
      letting it wrap. At 320px this resolves to ~27px, which fits the longest
      label inside the gutters. */
@media only screen and (max-width: 1024px) {
	#clapat-nav-wrapper .clapat-nav > li > a {
		font-size: clamp(26px, 8.2vw, 40px);
		line-height: 1.18;
		white-space: nowrap;
	}
	#clapat-nav-wrapper .clapat-nav > li + li { margin-top: 14px; }
}


/* The template hides the whole body until its own preloader finishes, so any
   hiccup in that handoff leaves a blank white page. The curtain is a fixed
   overlay and covers the load on its own — the body stays visible. */
body.hayler.hidden { visibility: visible; }


/*--------------------------------------------------
	Preloader — matt black, gold as a hairline only
---------------------------------------------------*/
.preloader-wrap { color: var(--bliss-ivory); }
.preloader-reveal span { background: #0A0A0A; }
.preloader-reveal span::after { background-color: rgba(212,160,23,0.16); }
.preloader-info > span { color: var(--bliss-gray); }
.percentage { color: var(--bliss-gold); }


/*--------------------------------------------------
	Music — compact coda. Half the vertical weight of
	a full module, no illustration.
---------------------------------------------------*/
#music.bio-half { padding-top: 50px; }
#music.bio-half h2 {
	font-size: 30px;
	line-height: 1.14;
	margin-bottom: 14px;
}
#music.bio-half p { font-size: 15px; line-height: 1.6; }
#music.bio-half .bio-logo-plate { width: 96px; height: 54px; }
#music.bio-half .bio-logo-plate img { max-width: 78px; }
#music.bio-half .bio-num { font-size: 11px; }
#music.bio-half .bio-num strong { font-size: 15px; }
#music.bio-half hr { margin: 18px 0; }
#music.bio-half .bio-dl { row-gap: 8px; }
@media only screen and (max-width: 767px) {
	#music.bio-half { padding-top: 34px; }
	#music.bio-half h2 { font-size: 25px; }
}


/* Module tagline — sits directly under the section heading. */
.bio-tagline {
	font-family: var(--secondary-font-family);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #E8B83A;
	margin: -6px 0 22px;
}
@media only screen and (max-width: 767px) {
	.bio-tagline { font-size: 11px; letter-spacing: 0.11em; margin-bottom: 18px; }
}


/*--------------------------------------------------
	Footer wordmark — the "Satya" display line
---------------------------------------------------*/

/* `.has-slide` splits the word into per-character boxes and masks each one
   with `overflow: hidden`, so the scrub can slide a second clone up from
   `top: 100%`. The mask box is exactly one line-height tall, and at
   --bt-line-height: 1.05 Cormorant Garamond does not fit inside it: the font's
   own ascent + descent is 1.211em, which puts the baseline 0.844em down and
   the tail of the "y" at 1.125em — 0.075em, about 15px at this display size,
   below the mask. The descender was being sliced off mid-stroke.

   1.24em clears it. The requirement is L >= ascent - descent + 2 x the "y"
   ink descender (0.924 - 0.287 + 2 x 0.281 = 1.199em); the rest is margin for
   hinting. Raising the line-height is what works here rather than padding the
   mask, because the second clone is positioned at 100% of the same box — it
   moves down with the box and stays hidden. Padding would expose it.

   Set as the token rather than a bare line-height so it still reads as one of
   the type variables, and scoped to the element because the page has exactly
   one `.big-title`. */
.big-title { --bt-line-height: 1.28; }

/* The mask itself (`.span-word`) and each letter's own box (`.span-char`) are
   both `display: inline-flex` with `align-items` left at its default,
   `normal`. Inside a flex container `normal` resolves to `stretch`, and how a
   browser stretches a block of TEXT to fill a taller cross-axis is not
   pinned down the same way `flex-start`/`center` are — engines are free to
   settle it differently, which is exactly the kind of gap that holds in
   Chromium (verified: ~30px of clearance under the "y" at rest) and can still
   clip in another engine at the same line-height. `flex-start` removes the
   ambiguity: every extra pixel `--bt-line-height` buys over the font's own
   ascent+descent is pinned to the bottom of the box, below the glyph, in any
   spec-compliant browser — which is where the descender needs it. */
.has-slide .span-word,
.has-slide .span-char { align-items: flex-start; }


/*--------------------------------------------------
	Hero focal points
---------------------------------------------------*/

/* The hero composites are 1600x1000 and `.item-image` covers its box from
   `center`. At 16:10 that is a no-op — the whole frame shows. Any narrower
   box crops horizontally around the middle, and slide 01 is the one panel
   whose subject is not in the middle: Naveen sits at roughly x 2–39%, so a
   centre crop lands on the empty right half and the phone hero renders as a
   black rectangle. Pin each slide to its own subject instead.

   Slides 02–05 stay centred on purpose — their protected headline band is
   the middle of the frame (source x 448–1151), so `center` is already the
   correct focal point and moving it would carry the band off-screen.

   Matched on `src`, not on position: the slider clones every slide to loop,
   so at runtime there are ten `.clapat-slide` children and no `:nth-child`
   rule survives. */
#hero .item-image[src$="hero-naveen.png"] { object-position: 14% center; }

/* The slider's own script sizes the viewport and every slide to
   `window.innerHeight`, but the mobile hardening layer above caps the visible
   hero at 78dvh. The taller viewport is then centred inside the shorter one,
   so equal slices are cut off the top and bottom of every panel — which is
   what took the top of Naveen's head off. Make the slides fill the box the
   hero actually occupies. Horizontal drag is unaffected; only the vertical
   box changes. */
@media only screen and (max-width: 767px) {
	#hero .clapat-slider-viewport,
	#hero .clapat-slide {
		height: 100% !important;
		top: 0 !important;
	}
}

/* Every pagination bullet is a fixed 20px box holding a counter set at
   heading-3 size — 46px of Cormorant in a 20px box, so each number overhangs
   its own box by roughly 13px a side. That eats the 20px gap between boxes
   before it starts, which is why the strip reads as one run-on string,
   "01.02030405.", and why on a phone the fifth number landed on the back
   arrow. Size the boxes to their content so the declared gap is the gap you
   see. The click target grows with the box, which is the right direction. */
#hero .clapat-pagination-bullet,
#hero .clapat-pagination-bullet .bullet-number { width: auto; }

@media only screen and (max-width: 767px) {
	/* Phone: the strip shares the row with the nav cluster, so the display
	   size comes down too. A flat 15px was tuned against a 390px phone and
	   measured 26px clear of the back arrow there — but the strip's own width
	   doesn't shrink with the viewport while the arrow's position does, so
	   that same 15px closes the gap entirely under ~360px and overlaps by
	   16px at 320. Scaling with the viewport keeps the two in proportion at
	   every width instead of just the one it was checked on. */
	#hero .clapat-slider-pagination { gap: clamp(8px, -10.28px + 5.71vw, 12px); }
	#hero .clapat-pagination-bullet .bullet-number { font-size: clamp(10px, -12.86px + 7.14vw, 15px); letter-spacing: 0.02em; }
}