/* marble-components.css */
/*
 * Marble Headhunter — Component library v1.0
 * Requires marble-tokens.css. Generic, page-agnostic components extracted from the approved Home.
 * Naming: .ms-<component>__<element>--<modifier>. Behaviour hooks use data-* attributes (see marble-system.js).
 */

/* =====================================================================
   0. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--ms-font-body);
	font-size: var(--ms-body);
	line-height: var(--ms-leading-body);
	color: var(--ms-ink-soft);
	background: var(--ms-ground);
	-webkit-font-smoothing: antialiased;
}
/* Ground: bone + soft brand glow + fine grain (fixed, no blend mode = no scroll repaint) */
body::before {
	content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(52% 46% at 82% 8%, color-mix(in srgb, var(--ms-brand-on-dark) 14%, transparent), transparent 68%),
		radial-gradient(44% 40% at 4% 100%, color-mix(in srgb, var(--ms-brand) 7%, transparent), transparent 70%),
		var(--ms-ground);
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.28; background-image: var(--ms-grain); background-size: 240px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ms-on-dark :focus-visible { outline-color: var(--ms-on-dark); }
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* =====================================================================
   1. LAYOUT
   ===================================================================== */
.ms-section { position: relative; padding-block: var(--ms-section-y); }
.ms-section--flush-top { padding-block-start: 0; }
.ms-section--flush-bottom { padding-block-end: 0; }
.ms-container { width: 100%; max-width: calc(var(--ms-container-max) + 2 * var(--ms-gutter)); margin-inline: auto; padding-inline: var(--ms-gutter); }
.ms-grid { display: grid; grid-template-columns: repeat(var(--ms-grid-columns), minmax(0, 1fr)); column-gap: var(--ms-grid-gap); }
.ms-dark { background: var(--ms-dark); color: var(--ms-on-dark); }

/* =====================================================================
   2. TYPOGRAPHY PRIMITIVES
   ===================================================================== */
/* Kicker: section index + rule + label. The index is always the brand accent. */
.ms-kicker {
	display: flex; align-items: center; gap: 0.9rem;
	margin-block-end: var(--ms-kicker-gap);
	font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label);
	letter-spacing: var(--ms-tracking-label); text-transform: uppercase; line-height: 1.3;
	color: var(--ms-ink-soft);
}
.ms-kicker__idx { color: var(--ms-brand); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.ms-kicker__rule { width: 2.75rem; height: 1px; background: var(--ms-line-strong); transform-origin: left; }
.ms-on-dark .ms-kicker { color: var(--ms-on-dark-soft); }
.ms-on-dark .ms-kicker__idx { color: var(--ms-brand-on-dark); }
.ms-on-dark .ms-kicker__rule { background: linear-gradient(90deg, var(--ms-brand-on-dark), rgb(255 255 255 / 0.25)); }

/* Weight-contrast title: the signature gesture. Strong line (600) + light line (300). */
.ms-title, .ms-display {
	font-family: var(--ms-font-display); font-weight: 300;
	line-height: var(--ms-leading-display); letter-spacing: var(--ms-tracking-display); color: var(--ms-ink);
}
.ms-title { font-size: var(--ms-title); }
.ms-display { font-size: var(--ms-display); }
.ms-on-dark .ms-title, .ms-on-dark .ms-display { color: var(--ms-on-dark); }
.ms-title strong, .ms-display strong, .ms-line--strong { font-weight: 600; }
/* overflow: hidden drives the line-rise reveal; the padding keeps overhanging or descending glyphs ("¿", "¡", "j") unclipped (2026-10-02) */
.ms-line { display: block; overflow: hidden; padding-inline: 0.08em; margin-inline: -0.08em; padding-block-end: 0.16em; margin-block-end: -0.16em; }
.ms-line > span { display: inline-block; }
.ms-subtitle { font-family: var(--ms-font-display); font-weight: 600; font-size: var(--ms-subtitle); line-height: var(--ms-leading-heading); letter-spacing: -0.01em; color: var(--ms-ink); text-wrap: balance; }
.ms-lede { max-width: var(--ms-measure); font-size: var(--ms-body); line-height: var(--ms-leading-body); color: var(--ms-ink-soft); }
.ms-on-dark .ms-lede { color: var(--ms-on-dark-soft); }
.ms-label { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
.ms-quote { padding-inline-start: 1.75rem; border-inline-start: 2px solid var(--ms-brand); }
.ms-quote p { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(1.6rem, 0.9rem + 1.45vw, 2.35rem); line-height: 1.12; color: var(--ms-ink); text-wrap: balance; }

/* =====================================================================
   3. SECTION HEADER (layouts)
   ===================================================================== */
.ms-header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ms-grid-gap); align-items: end; margin-block-end: var(--ms-header-gap); }
.ms-header__main { grid-column: 1 / span 7; }
.ms-header__side { grid-column: 8 / span 5; justify-self: end; display: grid; gap: 1.5rem; justify-items: start; max-width: 40ch; padding-block-end: 0.5rem; }
/* Diagonal: title top-left, side block pushed down (quote or lede) */
.ms-header--diagonal { align-items: start; }
.ms-header--diagonal .ms-header__side { align-self: end; margin-block-start: clamp(8rem, 16vw, 13rem); justify-self: stretch; }
@media (max-width: 64rem) {
	.ms-header__main, .ms-header__side { grid-column: 1 / -1; justify-self: start; }
	.ms-header__side { margin-block-start: 1.5rem; }
	.ms-header--diagonal .ms-header__side { margin-block-start: 3rem; }
}

/* =====================================================================
   4. BUTTONS & LINKS
   ===================================================================== */
/* CTA: label + circle lens. The only primary button style on the site. */
.ms-cta { display: inline-flex; align-items: center; gap: 1.1rem; text-decoration: none; color: var(--ms-ink); }
.ms-cta__label { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; }
.ms-cta__circle {
	position: relative; display: grid; place-items: center; flex: none;
	width: var(--ms-circle); height: var(--ms-circle); border-radius: var(--ms-radius-pill);
	border: 1px solid var(--ms-line-strong); color: var(--ms-ink);
	background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 62%), rgb(255 255 255 / 0.45);
	box-shadow: inset 0 1px 0 var(--mb-white), inset 0 -1px 1px rgb(51 51 51 / 0.06), 0 6px 14px -8px rgb(51 51 51 / 0.35);
	transition: background-color var(--ms-dur-micro) ease, border-color var(--ms-dur-micro) ease, color var(--ms-dur-micro) ease;
}
.ms-cta__circle svg { width: 1.05rem; height: 1.05rem; fill: currentColor; transition: transform 0.45s var(--ms-ease); }
.ms-cta:hover .ms-cta__circle, .ms-cta:focus-visible .ms-cta__circle {
	background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 18px -8px color-mix(in srgb, var(--ms-brand) 60%, transparent);
}
.ms-cta:hover svg, .ms-cta:focus-visible svg { transform: translateX(3px); }
.ms-cta:focus-visible { outline: none; }
.ms-cta:focus-visible .ms-cta__circle { outline: 2px solid var(--ms-brand); outline-offset: 4px; }
.ms-cta--sm .ms-cta__circle { width: var(--ms-circle-sm); height: var(--ms-circle-sm); }
.ms-cta--sm .ms-cta__circle svg { width: 0.9rem; height: 0.9rem; }
/* On photos / dark ground */
.ms-on-dark .ms-cta { color: var(--ms-on-dark); }
.ms-on-dark .ms-cta__circle {
	color: var(--ms-on-dark); border-color: color-mix(in srgb, var(--ms-brand-on-dark) 85%, transparent);
	background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 62%), rgb(255 255 255 / 0.06);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 8px 18px -10px rgb(0 0 0 / 0.6);
}
.ms-on-dark .ms-cta:hover .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); }
/* Optional attention ring (one per page, hero only) */
.ms-cta--breathe .ms-cta__circle::after {
	content: ""; position: absolute; inset: -1px; border-radius: inherit;
	animation: ms-breathe 3.6s cubic-bezier(0.65, 0, 0.35, 1) 2.4s infinite;
}
@keyframes ms-breathe { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ms-brand-on-dark) 55%, transparent); } 60%, 100% { box-shadow: 0 0 0 0.9rem transparent; } }

/* Text link */
.ms-link { color: var(--ms-brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-thickness 0.3s var(--ms-ease); }
.ms-link:hover { text-decoration-thickness: 2px; }
.ms-on-dark .ms-link { color: rgb(255 255 255 / 0.85); }

/* Dash tag: informational, never looks like a button */
.ms-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.ms-tag { display: inline-flex; align-items: baseline; gap: 0.6rem; font-size: 0.8125rem; color: var(--ms-ink); }
.ms-tag::before { content: ""; width: 0.85rem; height: 1px; background: var(--ms-brand); transform: translateY(-0.3em); }

/* =====================================================================
   5. LIQUID GLASS — the house material
   ===================================================================== */
.ms-glass {
	--gx: 30%; --gy: 0%;
	position: relative; isolation: isolate;
	border-radius: var(--ms-radius-lg);
	background: radial-gradient(16rem 11rem at var(--gx) var(--gy), rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 70%), var(--ms-glass-light);
	box-shadow: var(--ms-glass-light-inset), var(--ms-shadow-card);
}
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.ms-glass::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px;
	background: var(--ms-glass-rim-light);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Dark glass: only over photography or dark ground. Real refraction is added by JS (has-liquid). */
.ms-glass--dark {
	background: var(--ms-glass-dark);
	-webkit-backdrop-filter: blur(var(--ms-glass-blur)) saturate(150%);
	backdrop-filter: blur(var(--ms-glass-blur)) saturate(150%);
	box-shadow: var(--ms-glass-dark-inset), var(--ms-shadow-dark);
	color: var(--ms-on-dark);
}
.ms-glass--dark::after { background: var(--ms-glass-rim-dark); }
html.has-liquid .ms-glass--dark[data-refract] {
	-webkit-backdrop-filter: url(#ms-liquid-lens) blur(12px) saturate(175%) brightness(1.04);
	backdrop-filter: url(#ms-liquid-lens) blur(12px) saturate(175%) brightness(1.04);
}

/* =====================================================================
   6. CARDS
   ===================================================================== */
.ms-card {
	display: flex; flex-direction: column; gap: 1rem;
	padding: 2rem 2rem 1.75rem; text-decoration: none; color: var(--ms-ink);
	transition: transform var(--ms-dur-ui) var(--ms-ease), box-shadow var(--ms-dur-ui) var(--ms-ease);
}
a.ms-card:hover, a.ms-card:focus-visible { transform: translateY(var(--ms-lift)); box-shadow: var(--ms-glass-light-inset), var(--ms-shadow-card-hover); }
.ms-card__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-brand); }
.ms-card__title { margin-block-start: auto; font-family: var(--ms-font-display); font-weight: 400; font-size: var(--ms-subtitle); line-height: var(--ms-leading-heading); color: var(--ms-brand); text-wrap: balance; }
.ms-card__text { font-size: var(--ms-body-sm); line-height: 1.65; color: var(--ms-ink-soft); max-width: 36ch; }
.ms-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 0.5rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--ms-line); font-weight: 600; font-size: var(--ms-body-sm); color: var(--ms-brand); }
.ms-card__foot .ms-cta__circle { width: var(--ms-circle-sm); height: var(--ms-circle-sm); }
a.ms-card:hover .ms-cta__circle, a.ms-card:focus-visible .ms-cta__circle { background: var(--ms-brand); border-color: var(--ms-brand); color: var(--ms-on-dark); }

/* Swap: description ↔ key points in the same cell (never changes card height) */
.ms-swap { display: grid; }
.ms-swap > * { grid-area: 1 / 1; }
.ms-swap__rest { transition: opacity 0.22s ease 0.14s; }
.ms-swap__alt { opacity: 0; transform: translateY(0.3rem); transition: opacity 0.14s ease, transform 0.14s ease; }
a.ms-card:is(:hover, :focus-visible) .ms-swap__rest { opacity: 0; transition: opacity 0.14s ease; }
a.ms-card:is(:hover, :focus-visible) .ms-swap__alt { opacity: 1; transform: none; transition: opacity 0.26s ease 0.14s, transform 0.4s var(--ms-ease) 0.14s; }
@media (hover: none) { .ms-swap > * { grid-area: auto; } .ms-swap__alt { opacity: 1; transform: none; margin-block-start: 0.75rem; } }

/* Photo card: image bleeds, copy on the dark zone */
.ms-card--photo { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ms-radius-lg); color: var(--ms-on-dark); background: var(--ms-dark); min-height: 22rem; justify-content: flex-end; }
.ms-card--photo .ms-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: transform 0.9s var(--ms-ease); }
.ms-card--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 6 7 / 0.55) 0%, rgb(10 6 7 / 0.05) 30%, rgb(10 6 7 / 0.3) 55%, rgb(10 6 7 / 0.9) 100%); }
.ms-card--photo:hover .ms-card__img { transform: scale(1.06); }
.ms-card--photo .ms-card__meta { position: absolute; top: 1.75rem; left: 2rem; color: rgb(255 255 255 / 0.85); }
.ms-card--photo .ms-card__title, .ms-card--photo .ms-card__foot { color: var(--ms-on-dark); }
.ms-card--photo .ms-card__text { color: rgb(255 255 255 / 0.82); }
.ms-card--photo .ms-card__foot { border-color: rgb(255 255 255 / 0.18); }

/* Data card: dark brand territory */
.ms-card--data {
	position: relative; isolation: isolate; overflow: hidden; border-radius: var(--ms-radius-lg); color: var(--ms-on-dark);
	background: radial-gradient(80% 90% at 85% 10%, var(--ms-brand-state) 0%, transparent 60%), radial-gradient(70% 80% at 10% 100%, var(--ms-brand) 0%, transparent 65%), var(--ms-brand-deep);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--ms-brand-deep) 55%, transparent);
}
.ms-card--data::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.22; mix-blend-mode: overlay; background-image: var(--ms-grain); pointer-events: none; }

/* =====================================================================
   7. FIGURES
   ===================================================================== */
/* Annotated figure: number + label + leader line (never looks like a button) */
.ms-figure { display: grid; gap: 0.45rem; position: relative; padding-block-end: 2.25rem; }
.ms-figure__n { font-family: var(--ms-font-display); font-weight: 300; font-size: var(--ms-figure); line-height: 0.9; letter-spacing: -0.01em; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ms-figure__l { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: var(--ms-ink-subtle); }
.ms-figure::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 1.5rem; background: linear-gradient(to bottom, var(--ms-brand), transparent); }
/* Stat: number with left brand tick (trio rows) */
.ms-stats { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 3.5vw, 3rem); margin: 0; padding: 0; list-style: none; }
.ms-stat { display: grid; gap: 0.4rem; padding-inline-start: 0.9rem; border-inline-start: 1px solid color-mix(in srgb, var(--ms-brand) 55%, transparent); }
.ms-stat__n { font-family: var(--ms-font-display); font-weight: 300; font-size: clamp(2rem, 1.4rem + 1.2vw, 2.75rem); line-height: 0.85; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ms-stat__l { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-ink-subtle); }
.ms-on-dark .ms-stat__n { color: var(--ms-on-dark); }
.ms-on-dark .ms-stat__l { color: var(--ms-brand-line); }

/* =====================================================================
   8. ACCORDION
   ===================================================================== */
.ms-accordion { display: grid; gap: 0.5rem; }
.ms-acc { position: relative; padding: 0.85rem 0 0.85rem 1.5rem; border-radius: var(--ms-radius-sm); transition: background-color 0.5s ease; }
.ms-acc::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 2px; border-radius: 2px; background: var(--ms-brand); transform: scaleY(0); transform-origin: top; transition: transform 0.6s var(--ms-ease); }
.ms-acc.is-open::before { transform: scaleY(1); }
.ms-acc:hover { background: rgb(255 255 255 / 0.35); }
.ms-acc__q { margin: 0; font: inherit; }
.ms-acc__btn { width: 100%; display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: 1rem; padding: 0.35rem 1rem 0.35rem 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--ms-ink); }
.ms-acc__n { font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label); color: var(--ms-ink-subtle); font-variant-numeric: tabular-nums; }
.ms-acc__t { font-family: var(--ms-font-display); font-weight: 400; font-size: var(--ms-heading-sm); line-height: 1.18; text-wrap: balance; }
.ms-acc.is-open .ms-acc__n { color: var(--ms-brand); }
.ms-acc.is-open .ms-acc__t { font-weight: 600; }
.ms-acc__icon { position: relative; width: var(--ms-circle-sm); height: var(--ms-circle-sm); border-radius: var(--ms-radius-pill); border: 1px solid var(--ms-line-strong); background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 62%), rgb(255 255 255 / 0.45); box-shadow: inset 0 1px 0 var(--mb-white), 0 6px 14px -8px rgb(51 51 51 / 0.35); transition: background-color 0.4s ease, transform 0.6s var(--ms-ease); }
.ms-acc__icon i { position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 1.5px; background: var(--ms-ink); translate: -50% -50%; transition: transform 0.5s var(--ms-ease); }
.ms-acc__icon i:last-child { transform: rotate(90deg); }
.ms-acc.is-open .ms-acc__icon { background: var(--ms-brand); border-color: var(--ms-brand); transform: rotate(180deg); }
.ms-acc.is-open .ms-acc__icon i { background: var(--mb-white); }
.ms-acc.is-open .ms-acc__icon i:last-child { transform: rotate(0deg); }
.ms-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ms-ease); }
.ms-acc.is-open .ms-acc__panel { grid-template-rows: 1fr; }
.ms-acc__inner { min-height: 0; overflow: hidden; }
.ms-acc__inner p { padding: 0.9rem 4rem 0.4rem 3.75rem; max-width: 62ch; font-size: var(--ms-body); line-height: 1.75; color: var(--ms-ink-soft); }
@media (max-width: 64rem) { .ms-acc__btn { grid-template-columns: 2rem 1fr auto; } .ms-acc__inner p { padding: 0.75rem 0 0.25rem 2.75rem; } }

/* =====================================================================
   9. MEDIA
   ===================================================================== */
/* Framed photograph (portraits, interiors). B&W treatment always. */
.ms-frame { position: relative; overflow: hidden; border-radius: var(--ms-radius-lg); background: var(--ms-dark); box-shadow: 0 2.5rem 5rem -2.5rem rgb(0 0 0 / 0.45); }
.ms-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ms-frame--portrait { aspect-ratio: 4 / 5; }
.ms-frame--wide { aspect-ratio: 16 / 9; }

/* Cinematic band: full-bleed photo + scrim + grain (hero, closing, page intros) */
.ms-band { position: relative; isolation: isolate; overflow: hidden; color: var(--ms-on-dark); background: var(--ms-dark); }
.ms-band__media { position: absolute; inset: 0; z-index: -3; }
.ms-band__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ms-band__scrim { position: absolute; inset: 0; z-index: -2; background:
	linear-gradient(90deg, rgb(14 8 10 / 0.76) 0%, rgb(14 8 10 / 0.5) 34%, rgb(14 8 10 / 0) 60%),
	linear-gradient(0deg, rgb(14 8 10 / 0.9) 0%, rgb(14 8 10 / 0) 40%),
	radial-gradient(50% 45% at 20% 40%, color-mix(in srgb, var(--ms-brand) 24%, transparent), transparent 70%); }
.ms-band__grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.2; mix-blend-mode: overlay; background-image: var(--ms-grain); }
.ms-band--screen { min-height: max(100svh, 36rem); }
.ms-band--intro { min-height: clamp(28rem, 70svh, 44rem); }

/* Logo marquee */
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.ms-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.ms-marquee__track { display: flex; gap: clamp(3rem, 6vw, 5rem); width: max-content; animation: ms-marquee 60s linear infinite; }
.ms-marquee:hover .ms-marquee__track { animation-play-state: paused; }
.ms-marquee__track img { height: 3rem; width: auto; filter: grayscale(1) brightness(0.35); opacity: 0.5; transition: opacity 0.3s ease; }
.ms-marquee__track img:hover { opacity: 0.85; }
@keyframes ms-marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   10. NAVIGATION (liquid glass pill)
   ===================================================================== */
.ms-header-bar { position: absolute; inset-inline: 0; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem var(--ms-gutter); }
.ms-nav {
	--gx: 50%; --gy: 0%;
	position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.35rem;
	padding: 0.4rem 0.45rem 0.4rem 1.25rem; margin: 0; list-style: none; border-radius: var(--ms-radius-pill);
	background: linear-gradient(180deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.04) 46%, rgb(255 255 255 / 0.08) 100%), rgb(24 10 14 / 0.22);
	-webkit-backdrop-filter: blur(14px) saturate(185%) brightness(1.06);
	backdrop-filter: blur(14px) saturate(185%) brightness(1.06);
	box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 -1px 1px rgb(255 255 255 / 0.1);
}
html.has-liquid .ms-nav { -webkit-backdrop-filter: url(#ms-liquid-lens) blur(10px) saturate(190%) brightness(1.08); backdrop-filter: url(#ms-liquid-lens) blur(10px) saturate(190%) brightness(1.08); }
/* token-exempt: #000 here is a mask-image/-webkit-mask gradient stop, not a rendered colour. mask-image's default mask-mode is alpha (not luminance) for a CSS gradient source, so only the stop's opacity is used and the RGB channel is discarded. No token in tokens.css carries pure #000000 (the nearest, --mb-ink-deep, is #141112 and would not be an exact match), so the literal is left as-is rather than approximated. */
.ms-nav::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px; background: var(--ms-glass-rim-light); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ms-nav a { position: relative; z-index: 1; display: block; padding: 0.6rem 0.95rem; border-radius: var(--ms-radius-pill); color: var(--ms-on-dark); text-decoration: none; font-weight: 500; font-size: 0.9375rem; text-shadow: 0 1px 8px rgb(0 0 0 / 0.25); }
.ms-nav__cta a { margin-inline-start: 0.35rem; padding-inline: 1.25rem; background: rgb(255 255 255 / 0.94); color: var(--ms-brand-deep); text-shadow: none; font-weight: 600; box-shadow: inset 0 1px 0 var(--mb-white), inset 0 -2px 0 var(--ms-brand-on-dark), 0 4px 14px -4px rgb(0 0 0 / 0.35); }
.ms-nav__drop { position: absolute; z-index: 0; left: 0; border-radius: var(--ms-radius-pill); pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 30% 0%, rgb(255 255 255 / 0.34), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 6px 16px -6px rgb(0 0 0 / 0.35); transition: transform 0.62s var(--ms-ease-spring), width 0.62s var(--ms-ease-spring), opacity 0.3s ease; }
.ms-nav__drop.is-on { opacity: 1; }

/* =====================================================================
   11. FOOTER
   ===================================================================== */
.ms-footer { background: var(--ms-dark); color: rgb(255 255 255 / 0.78); padding-block: clamp(4rem, 7vw, 5.5rem) 2rem; }
.ms-footer a { color: rgb(255 255 255 / 0.8); text-decoration: none; font-size: var(--ms-body-sm); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color 0.3s ease, background-size 0.45s var(--ms-ease); }
.ms-footer a:hover, .ms-footer a:focus-visible { color: var(--ms-on-dark); background-size: 100% 1px; }
.ms-footer__label { margin: 0 0 1rem; font-family: var(--ms-font-label); font-weight: 600; font-size: var(--ms-label-sm); letter-spacing: var(--ms-tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.62); } /* 0.62: AA on practice deep grounds (petrol 07 failed at 0.5) */

/* =====================================================================
   12. REVEAL (JS adds .is-armed on [data-reveal] roots, then .is-in)
   ===================================================================== */
[data-reveal].is-armed .ms-line > span { transform: translateY(calc(105% + 0.2em)); }
[data-reveal].is-armed [data-reveal-item] { opacity: 0; transform: translateY(0.75rem); }
[data-reveal].is-in .ms-line > span { transform: none; transition: transform var(--ms-dur-reveal) var(--ms-ease); }
[data-reveal].is-in .ms-line:nth-child(2) > span { transition-delay: var(--ms-stagger); }
[data-reveal].is-in [data-reveal-item] { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s var(--ms-ease); transition-delay: calc(var(--i, 0) * var(--ms-stagger) + 0.2s); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
	[data-reveal].is-armed .ms-line > span, [data-reveal].is-armed [data-reveal-item] { transform: none; }
}