/* ============================================================
   Golden Crown Casino NZ — surface-16.css
   TYPO-09 · SPACE-09 · CONT-04 · BP-06 · GEO-10 · MOTION-04
   Dark near-black-green base, warm gold accents.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
	/* colours (RANDOM_SPEC .final; solids only, no alpha behind text) */
	--bs-main-color: #0d4a2f;
	--bs-accent-color: #fac202;
	--bs-accent-active: #feda3c;
	--bs-canvas: #191c1f;
	--bs-bg-elevated: #22262b;
	--bs-gradient-from: #030d08;
	--bs-grad-mid: #0a3923;
	--bs-text-color: #ffffff;
	--bs-text-secondary: #bdbdbd;
	--bs-warning-bg: #dc2626;
	--bs-color-line: #34383d;

	/* typography TYPO-09 (desktop) */
	--bs-font-heading: "Inter", system-ui, sans-serif;
	--bs-font-base: "Inter", system-ui, sans-serif;
	--bs-size-h1: 52px;
	--bs-text-h2: 32px;
	--bs-fs-h3: 24px;
	--bs-type-h4: 19px;
	--bs-size-h5: 16px;
	--bs-text-h6: 14px;
	--bs-type-body: 17px;
	--bs-fs-small: 14px;
	--bs-text-xs: 12px;
	--bs-line-tight: 1.15;
	--bs-lh-base: 1.55;
	--bs-lh-loose: 1.7;
	--bs-ls-normal: 0;
	--bs-letter-wide: 0.02em;
	--bs-weight-regular: 400;
	--bs-font-medium: 500;
	--bs-fw-bold: 700;

	/* spacing SPACE-09 (Twin) */
	--bs-space-2xs: 2px;
	--bs-spacing-xs: 6px;
	--bs-gutter-sm: 10px;
	--bs-spacing-md: 16px;
	--bs-spacing-lg: 48px;
	--bs-gutter-xl: 80px;
	--bs-gutter-2xl: 128px;
	--bs-gutter-3xl: 200px;
	/* single section vertical rhythm — capped for A-09 (pairs = 96px ≤110) */
	--bs-sec-y: 48px;

	/* container CONT-04 */
	--bs-max-width: 1400px;
	--bs-readable-width: 720px;
	--bs-edge-desktop: 56px;
	--bs-container-padding-tablet: 24px;
	--bs-edge-mobile: 16px;

	/* geometry GEO-10 */
	--bs-radius-sm: 4px;
	--bs-round-md: 8px;
	--bs-corner-lg: 16px;
	--bs-pill: 999px;
	--bs-circle: 50%;
	--bs-depth-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--bs-shade-lg: 0 18px 48px rgba(0, 0, 0, 0.55);

	/* motion MOTION-04 (sharp snappy) */
	--bs-duration-fast: 120ms;
	--bs-speed-base: 200ms;
	--bs-ease: cubic-bezier(0.2, 0, 0, 1);

	--bs-header-h: 80px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bs-canvas);
	color: var(--bs-text-color);
	font-family: var(--bs-font-base);
	font-size: var(--bs-type-body);
	font-weight: var(--bs-weight-regular);
	line-height: var(--bs-lh-base);
	padding-top: var(--bs-header-h);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--bs-line-tight); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.site-main { display: block; }

/* ---------- a11y utilities ---------- */
.skip-link {
	position: fixed;
	top: -200px;
	left: var(--bs-spacing-md);
	z-index: 200;
	background: var(--bs-accent-color);
	color: var(--bs-canvas);
	padding: var(--bs-gutter-sm) var(--bs-spacing-md);
	border-radius: var(--bs-round-md);
	font-weight: var(--bs-fw-bold);
}
.skip-link:focus { top: var(--bs-gutter-sm); }
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   HEADER — HEAD-04 Sticky Transparent Over Hero, NAV-01, STICKY-01
   ============================================================ */
.r43 {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: var(--bs-canvas);
	border-bottom: 1px solid var(--bs-color-line);
	transition: background var(--bs-speed-base) var(--bs-ease);
}
.r43--over-hero { background: transparent; border-bottom-color: transparent; }
.r43--over-hero.is-scrolled {
	background: var(--bs-canvas);
	border-bottom-color: var(--bs-color-line);
	backdrop-filter: blur(10px);
}
.r43-inner {
	height: 80px;
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	display: flex;
	align-items: center;
	gap: var(--bs-spacing-lg);
}
.r43-logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.r43-logo-img { height: 56px; width: 56px; flex-shrink: 0; }
.r43-toggle {
	margin-left: auto;
	display: none;
	background: transparent;
	border: 0;
	color: var(--bs-text-color);
	cursor: pointer;
	padding: var(--bs-spacing-xs);
}
.r43-toggle-icon { width: 28px; height: 28px; display: block; }
.r43-nav { margin-left: auto; }
.r43-nav-list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--bs-spacing-lg); }
.r43-nav-item { display: inline-flex; }
.r43-nav-link {
	color: var(--bs-text-color);
	font-size: var(--bs-fs-small);
	font-weight: var(--bs-font-medium);
	letter-spacing: var(--bs-letter-wide);
	white-space: nowrap;
	transition: color var(--bs-duration-fast) var(--bs-ease);
}
.r43-nav-link:hover { color: var(--bs-accent-color); }
.r43-nav-link[aria-current="page"] { color: var(--bs-accent-color); }
.r43-drawer { display: none; }
.r43-drawer-list { display: flex; flex-direction: column; }
.r43-drawer-item { border-top: 1px solid var(--bs-color-line); }
.r43-drawer-link {
	display: block;
	padding: var(--bs-spacing-md);
	color: var(--bs-text-color);
	font-size: var(--bs-size-h5);
	font-weight: var(--bs-font-medium);
}
.r43-drawer-link[aria-current="page"] { color: var(--bs-accent-color); }

/* ============================================================
   HERO — HERO-08 Magazine Cover
   ============================================================ */
.m41 {
	position: relative;
	min-height: 100vh;
	margin-top: calc(-1 * var(--bs-header-h));
	display: flex;
	align-items: center;
	background: var(--bs-gradient-from);
	overflow: hidden;
}
.m41-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m41-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 13, 8, 0.9), rgba(3, 13, 8, 0.45)); }
.m41-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	width: 100%;
	padding-block: var(--bs-gutter-xl);
}
.m41-cover { max-width: 900px; text-align: center; margin-inline: auto; }
.m41-eyebrow {
	display: inline-block;
	color: var(--bs-accent-color);
	font-size: var(--bs-text-xs);
	font-weight: var(--bs-fw-bold);
	letter-spacing: var(--bs-letter-wide);
	text-transform: uppercase;
	margin-bottom: var(--bs-spacing-md);
}
.m41-title {
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-fw-bold);
	font-size: var(--bs-size-h1);
	line-height: var(--bs-line-tight);
	color: var(--bs-text-color);
}
.m41-deck {
	max-width: 600px;
	margin: var(--bs-spacing-md) auto 0;
	color: #e6e6e6;
	font-size: var(--bs-size-h5);
	line-height: var(--bs-lh-base);
}
.m41-meta {
	display: flex;
	justify-content: center;
	gap: var(--bs-spacing-md);
	margin-top: var(--bs-spacing-md);
	color: #d0d0d0;
	font-size: var(--bs-fs-small);
}
.m41-meta-item { position: relative; }
.m41-meta-item + .m41-meta-item::before { content: "·"; position: absolute; left: calc(-1 * var(--bs-gutter-sm)); color: var(--bs-accent-color); }
.m41-scroll {
	position: absolute;
	bottom: var(--bs-spacing-md);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bs-space-2xs);
	color: #d0d0d0;
}
.m41-scroll-label { font-size: var(--bs-text-xs); letter-spacing: var(--bs-letter-wide); text-transform: uppercase; }
.m41-scroll-arrow { width: 20px; height: 20px; animation: m41-bounce 1.6s var(--bs-ease) infinite; }
@keyframes m41-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ============================================================
   PAGE HEADER — PHEAD-02 Compact Centered
   ============================================================ */
.b35 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.b35-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	text-align: center;
}
.b35-title { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-size-h1); color: var(--bs-text-color); }
.b35-divider { width: 60px; height: 3px; background: var(--bs-accent-color); margin: var(--bs-spacing-md) auto 0; border-radius: var(--bs-pill); }
.b35-description { max-width: 580px; margin: var(--bs-spacing-md) auto 0; color: var(--bs-text-secondary); font-size: var(--bs-type-body); line-height: var(--bs-lh-base); }

/* ============================================================
   ITEMS GRID — GRID-07 Editorial Article-Style
   ============================================================ */
.h83 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.h83-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.h83-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-lg); }
.h83-list { display: flex; flex-direction: column; gap: var(--bs-spacing-lg); }
.h83-item { max-width: var(--bs-readable-width); }
.h83-item-title { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-fs-h3); color: var(--bs-text-color); }
.h83-item-rule { width: 60px; height: 2px; background: var(--bs-accent-color); margin: var(--bs-gutter-sm) 0; }
.h83-item-text { color: var(--bs-text-color); font-size: var(--bs-type-body); line-height: var(--bs-lh-loose); }

/* ============================================================
   PROSE — PROSE-01 Classic Long-Read
   ============================================================ */
.g83 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.g83-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.g83-col { max-width: var(--bs-readable-width); }
.g83-h2 { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); line-height: var(--bs-line-tight); color: var(--bs-text-color); margin-top: var(--bs-gutter-xl); margin-bottom: var(--bs-spacing-md); }
.g83-h3 { font-family: var(--bs-font-base); font-weight: var(--bs-font-medium); font-style: italic; font-size: var(--bs-fs-h3); color: var(--bs-text-color); margin-top: var(--bs-spacing-lg); margin-bottom: var(--bs-gutter-sm); }
.g83 p { color: var(--bs-text-color); font-size: var(--bs-type-body); line-height: var(--bs-lh-loose); margin-bottom: var(--bs-spacing-md); }
.g83-link { color: var(--bs-accent-color); text-decoration: underline; text-underline-offset: 3px; transition: text-decoration-thickness var(--bs-duration-fast) var(--bs-ease); }
.g83-link:hover { text-decoration-thickness: 2px; }
.g83 strong { font-weight: var(--bs-fw-bold); color: var(--bs-text-color); }
.g83 em { font-style: italic; color: var(--bs-text-color); }
.g83-figure { margin: 0 0 var(--bs-spacing-lg); }
.g83-figure-img { width: 100%; border-radius: var(--bs-round-md); }
.g83-figure-caption { margin-top: var(--bs-spacing-xs); color: var(--bs-text-secondary); font-size: var(--bs-fs-small); }

/* ============================================================
   REVIEWS — REV-05 Vertical Timeline
   ============================================================ */
.o62 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.o62-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.o62-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-lg); }
.o62-list { position: relative; max-width: var(--bs-readable-width); border-left: 1px solid var(--bs-accent-color); }
.o62-item { position: relative; padding-left: var(--bs-spacing-lg); margin-bottom: var(--bs-gutter-xl); }
.o62-item:last-child { margin-bottom: 0; }
.o62-marker { position: absolute; left: -8px; top: 6px; width: 16px; height: 16px; border-radius: var(--bs-circle); background: var(--bs-accent-color); }
.o62-head { display: flex; justify-content: space-between; gap: var(--bs-spacing-md); color: var(--bs-text-secondary); font-size: var(--bs-fs-small); }
.o62-date { color: var(--bs-text-secondary); font-size: var(--bs-fs-small); }
.o62-author { color: var(--bs-text-secondary); font-weight: var(--bs-font-medium); font-size: var(--bs-fs-small); }
.o62-rating { color: var(--bs-text-secondary); font-size: var(--bs-fs-small); margin: var(--bs-space-2xs) 0 var(--bs-spacing-xs); }
.o62-stars { color: var(--bs-accent-color); letter-spacing: 2px; }
.o62-text { color: var(--bs-text-color); font-size: var(--bs-type-body); line-height: var(--bs-lh-base); }

/* ============================================================
   FAQ — FAQ-03 Two-Column Card-Style
   ============================================================ */
.t87 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.t87-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.t87-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-lg); }
.t87-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bs-spacing-md); }
.t87-item { padding: var(--bs-spacing-lg); border: 1px solid var(--bs-color-line); border-radius: var(--bs-round-md); background: var(--bs-canvas); }
.t87-question { font-size: var(--bs-size-h5); font-weight: var(--bs-fw-bold); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-md); }
.t87-question-prefix { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); color: var(--bs-accent-color); margin-right: var(--bs-spacing-xs); }
.t87-answer { color: var(--bs-text-color); font-size: var(--bs-type-body); line-height: var(--bs-lh-base); }

/* ============================================================
   CTA — CTA-02 Centered Contained Box
   ============================================================ */
.g35 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.g35-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.g35-box {
	max-width: var(--bs-readable-width);
	margin-inline: auto;
	text-align: center;
	background: var(--bs-bg-elevated);
	border: 1px solid var(--bs-color-line);
	border-radius: var(--bs-corner-lg);
	padding: var(--bs-spacing-lg);
}
.g35-title { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); }
.g35-text { color: var(--bs-text-secondary); font-size: var(--bs-type-body); line-height: var(--bs-lh-loose); margin-block: var(--bs-spacing-md); }
.g35-button {
	display: inline-block;
	min-height: 52px;
	line-height: 52px;
	padding-inline: var(--bs-spacing-lg);
	background: var(--bs-accent-color);
	color: var(--bs-canvas);
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--bs-letter-wide);
	border-radius: var(--bs-round-md);
	transition: background var(--bs-duration-fast) var(--bs-ease), color var(--bs-duration-fast) var(--bs-ease);
}
.g35-button:hover { background: var(--bs-accent-active); color: var(--bs-canvas); }

/* ============================================================
   BYLINE — BYLINE-05 Horizontal Bar Full-Width
   ============================================================ */
.n76 { background: var(--bs-main-color); padding-block: var(--bs-sec-y); }
.n76-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-spacing-md);
}
.n76-author-info { display: flex; align-items: center; gap: var(--bs-spacing-md); }
.n76-portrait { width: 56px; height: 56px; border-radius: var(--bs-circle); object-fit: cover; }
.n76-text { display: flex; flex-direction: column; gap: var(--bs-space-2xs); }
.n76-name { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-size-h5); }
.n76-name-link { color: var(--bs-text-color); }
.n76-name-link:hover { color: var(--bs-accent-color); }
.n76-role { color: #d7e3dc; font-size: var(--bs-fs-small); }
.n76-date { color: #c3d3c9; font-size: var(--bs-text-xs); }
.n76-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: var(--bs-gutter-sm) var(--bs-spacing-md);
	background: var(--bs-main-color);
	border: 1px solid var(--bs-accent-color);
	border-radius: var(--bs-round-md);
	color: var(--bs-accent-color);
	font-weight: var(--bs-font-medium);
	font-size: var(--bs-fs-small);
	transition: background var(--bs-duration-fast) var(--bs-ease), color var(--bs-duration-fast) var(--bs-ease);
}
.n76-cta:hover { background: var(--bs-accent-color); color: var(--bs-canvas); }

/* ============================================================
   AUTHOR CARD — AUTH-01 + articles list
   ============================================================ */
.n78 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.n78-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.n78-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--bs-spacing-lg);
	background: var(--bs-bg-elevated);
	padding: var(--bs-spacing-lg);
	border-radius: var(--bs-corner-lg);
	box-shadow: var(--bs-depth-sm);
}
.n78-portrait { width: 160px; height: 160px; border-radius: var(--bs-circle); overflow: hidden; }
.n78-portrait-img { width: 160px; height: 160px; object-fit: cover; object-position: center top; }
.n78-body { display: flex; flex-direction: column; gap: var(--bs-gutter-sm); }
.n78-role { color: var(--bs-accent-color); font-size: var(--bs-fs-small); font-weight: var(--bs-font-medium); text-transform: uppercase; letter-spacing: var(--bs-letter-wide); }
.n78-name { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); }
.n78-bio { color: var(--bs-text-secondary); font-size: var(--bs-type-body); line-height: var(--bs-lh-loose); }
.n78-tags { display: flex; flex-wrap: wrap; gap: var(--bs-spacing-xs); }
.n78-tag { padding: var(--bs-space-2xs) var(--bs-gutter-sm); background: var(--bs-main-color); color: var(--bs-text-color); border-radius: var(--bs-pill); font-size: var(--bs-text-xs); text-transform: uppercase; letter-spacing: var(--bs-letter-wide); }
.n78-articles { margin-top: var(--bs-spacing-lg); }
.n78-articles-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-type-h4); color: var(--bs-text-color); margin-bottom: var(--bs-gutter-sm); }
.n78-articles-list { display: flex; flex-direction: column; gap: var(--bs-spacing-xs); }
.n78-articles-item { list-style: none; }
.n78-articles-link { color: var(--bs-accent-color); font-size: var(--bs-type-body); text-decoration: underline; text-underline-offset: 3px; }
.n78-articles-link:hover { color: var(--bs-accent-active); }

/* ============================================================
   LEGAL — LEGAL-06 Compact Multi-Page Style
   ============================================================ */
.u67 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.u67-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.u67-col { max-width: var(--bs-readable-width); }
.u67-intro { color: var(--bs-text-color); font-size: var(--bs-type-body); line-height: var(--bs-lh-loose); margin-bottom: var(--bs-spacing-md); }
.u67-updated { color: var(--bs-text-secondary); font-size: var(--bs-fs-small); margin-bottom: var(--bs-spacing-md); }
.u67-section { margin-bottom: var(--bs-spacing-md); }
.u67-section-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-type-h4); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-xs); }
.u67-section-num { color: var(--bs-accent-color); }
.u67-section-paragraph { color: var(--bs-text-color); font-size: var(--bs-fs-small); line-height: var(--bs-lh-base); margin-bottom: var(--bs-gutter-sm); }
.u67-contacts { margin-top: var(--bs-spacing-md); }
.u67-contacts-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-type-h4); color: var(--bs-text-color); margin-bottom: var(--bs-spacing-xs); }
.u67-contacts-list { display: flex; flex-direction: column; gap: var(--bs-spacing-xs); }
.u67-contact-item { color: var(--bs-text-color); font-size: var(--bs-fs-small); line-height: var(--bs-lh-base); }
.u67-contact-link { color: var(--bs-accent-color); text-decoration: underline; }
.u67-disclaimer { display: block; margin-top: var(--bs-spacing-md); color: var(--bs-text-secondary); font-size: var(--bs-text-xs); line-height: var(--bs-lh-base); }

/* ============================================================
   CONTACT FORM — FORM-02 Two-Column Side-by-Side
   ============================================================ */
.f51 { background: var(--bs-canvas); padding-block: var(--bs-sec-y); }
.f51-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--bs-gutter-xl);
	align-items: start;
}
.f51-aside { padding: var(--bs-spacing-lg); background: var(--bs-bg-elevated); border-radius: var(--bs-round-md); }
.f51-aside-heading { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-type-h4); color: var(--bs-text-color); margin-bottom: var(--bs-gutter-sm); }
.f51-aside-intro { color: var(--bs-text-secondary); font-size: var(--bs-fs-small); line-height: var(--bs-lh-base); margin-bottom: var(--bs-spacing-md); }
.f51-contacts { display: flex; flex-direction: column; gap: var(--bs-spacing-xs); }
.f51-contact-item { color: var(--bs-text-color); font-size: var(--bs-fs-small); }
.f51-contact-link { color: var(--bs-accent-color); text-decoration: underline; }
.f51-main { display: block; }
.f51-success { display: none; padding: var(--bs-spacing-md); margin-bottom: var(--bs-spacing-md); background: var(--bs-main-color); color: var(--bs-text-color); border-radius: var(--bs-round-md); font-size: var(--bs-fs-small); }
.f51-success.is-visible { display: block; }
.f51-form { display: flex; flex-direction: column; gap: var(--bs-spacing-md); }
.f51-field { display: flex; flex-direction: column; gap: var(--bs-spacing-xs); }
.f51-label { color: var(--bs-text-color); font-size: var(--bs-fs-small); font-weight: var(--bs-font-medium); }
.f51-input, .f51-textarea {
	width: 100%;
	padding: var(--bs-gutter-sm) var(--bs-spacing-md);
	background: var(--bs-canvas);
	border: 1px solid var(--bs-color-line);
	border-radius: var(--bs-round-md);
	color: var(--bs-text-color);
	font-family: var(--bs-font-base);
	font-size: var(--bs-type-body);
}
.f51-input:focus, .f51-textarea:focus { outline: 2px solid var(--bs-accent-color); outline-offset: 1px; }
.f51-textarea { min-height: 140px; resize: vertical; }
.f51-submit {
	align-self: flex-start;
	min-height: 48px;
	padding-inline: var(--bs-spacing-lg);
	background: var(--bs-accent-color);
	color: var(--bs-canvas);
	border: 0;
	border-radius: var(--bs-round-md);
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--bs-letter-wide);
	cursor: pointer;
	transition: background var(--bs-duration-fast) var(--bs-ease);
}
.f51-submit:hover { background: var(--bs-accent-active); color: var(--bs-canvas); }

/* ============================================================
   BREADCRUMBS — BREAD-02 Pill Chips
   ============================================================ */
.w90 { background: var(--bs-canvas); padding-block: var(--bs-spacing-md); }
.w90-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
}
.w90-list { display: flex; flex-wrap: wrap; gap: var(--bs-gutter-sm); }
.w90-item { display: inline-flex; }
.w90-item--current { display: inline-flex; }
.w90-link {
	display: inline-flex;
	align-items: center;
	padding: var(--bs-space-2xs) var(--bs-gutter-sm);
	border-radius: var(--bs-pill);
	background: var(--bs-bg-elevated);
	color: var(--bs-text-secondary);
	font-size: var(--bs-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--bs-letter-wide);
	transition: background var(--bs-duration-fast) var(--bs-ease), color var(--bs-duration-fast) var(--bs-ease);
}
.w90-link:hover { background: var(--bs-accent-color); color: var(--bs-canvas); }
.w90-current {
	display: inline-flex;
	align-items: center;
	padding: var(--bs-space-2xs) var(--bs-gutter-sm);
	border-radius: var(--bs-pill);
	background: var(--bs-main-color);
	color: var(--bs-text-color);
	font-size: var(--bs-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--bs-letter-wide);
}

/* ============================================================
   ERROR — ERR-05 Glitch / Cyber Style
   ============================================================ */
.p24 { background: var(--bs-canvas); padding-block: var(--bs-gutter-3xl); }
.p24-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	text-align: center;
}
.p24-num { display: block; font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: 96px; color: var(--bs-accent-color); line-height: 1; }
.p24-title { position: relative; margin-top: var(--bs-spacing-md); font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-text-h2); color: var(--bs-text-color); }
.p24-title::before, .p24-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0.55; }
.p24-title::before { transform: translate(2px, -2px); color: var(--bs-accent-color); }
.p24-title::after { transform: translate(-2px, 2px); color: var(--bs-accent-active); }
.p24-text { max-width: 560px; margin: var(--bs-spacing-md) auto var(--bs-spacing-lg); color: var(--bs-text-secondary); font-size: var(--bs-type-body); line-height: var(--bs-lh-base); }
.p24-button {
	display: inline-block;
	min-height: 48px;
	line-height: 48px;
	padding-inline: var(--bs-spacing-lg);
	background: var(--bs-accent-color);
	color: var(--bs-canvas);
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--bs-letter-wide);
	border-radius: var(--bs-round-md);
	transition: background var(--bs-duration-fast) var(--bs-ease);
}
.p24-button:hover { background: var(--bs-accent-active); color: var(--bs-canvas); }

/* ============================================================
   FOOTER — FOOT-09 Wide Single-Strip Industrial
   ============================================================ */
.o82 { background: var(--bs-main-color); padding-block: var(--bs-spacing-md); }
.o82-inner {
	max-width: calc(var(--bs-max-width) + 2 * var(--bs-edge-desktop));
	margin-inline: auto;
	padding-inline: var(--bs-edge-desktop);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-spacing-lg);
	flex-wrap: wrap;
}
.o82-logo { flex-shrink: 0; }
.o82-logo-img { height: 36px; width: 36px; }
.o82-main-nav { flex: 1 1 auto; }
.o82-nav-list { display: flex; flex-wrap: wrap; gap: var(--bs-spacing-md); }
.o82-nav-item { display: inline-flex; }
.o82-nav-link { color: var(--bs-text-color); font-size: var(--bs-fs-small); letter-spacing: var(--bs-letter-wide); }
.o82-nav-link:hover { color: var(--bs-accent-color); }
.o82-legal-nav { flex-shrink: 0; }
.o82-legal-list { display: flex; flex-wrap: wrap; gap: var(--bs-gutter-sm); }
.o82-legal-item { display: inline-flex; }
.o82-legal-link { color: #cfe0d6; font-size: var(--bs-text-xs); }
.o82-legal-link:hover { color: var(--bs-accent-color); }
.o82-copyright { color: #cfe0d6; font-size: var(--bs-text-xs); flex-basis: 100%; }

/* ============================================================
   COOKIE — COOK-03 Corner Card
   ============================================================ */
.n26 {
	position: fixed;
	inset-block-end: var(--bs-spacing-md);
	inset-inline-end: var(--bs-spacing-md);
	z-index: 90;
	width: 360px;
	max-width: calc(100vw - 2 * var(--bs-spacing-md));
	display: flex;
	flex-direction: column;
	gap: var(--bs-spacing-md);
	background: var(--bs-bg-elevated);
	border: 1px solid var(--bs-color-line);
	border-radius: var(--bs-corner-lg);
	padding: var(--bs-spacing-lg);
	box-shadow: var(--bs-shade-lg);
}
.n26.is-hidden { display: none; }
.n26-title { font-family: var(--bs-font-heading); font-weight: var(--bs-fw-bold); font-size: var(--bs-size-h5); text-transform: uppercase; color: var(--bs-accent-color); }
.n26-message { color: var(--bs-text-secondary); font-size: var(--bs-fs-small); line-height: var(--bs-lh-base); }
.n26-actions { display: flex; gap: var(--bs-gutter-sm); }
.n26-button { width: 50%; min-height: 40px; border: 0; border-radius: var(--bs-round-md); font-family: var(--bs-font-base); font-weight: var(--bs-font-medium); font-size: var(--bs-fs-small); cursor: pointer; }
.n26-button--bs-decline { background: transparent; border: 1px solid var(--bs-color-line); color: var(--bs-text-color); }
.n26-button--bs-decline:hover { border-color: var(--bs-accent-color); color: var(--bs-accent-color); }
.n26-button--bs-accept { background: var(--bs-accent-color); color: var(--bs-canvas); }
.n26-button--bs-accept:hover { background: var(--bs-accent-active); color: var(--bs-canvas); }

/* ============================================================
   RESPONSIVE — BP-06, desktop-first
   ============================================================ */
@media (max-width: 1024px) {
	.r43-inner { padding-inline: var(--bs-container-padding-tablet); }
	.m41-inner, .b35-inner, .h83-inner, .g83-inner, .o62-inner, .t87-inner, .g35-inner, .n76-inner, .n78-inner, .u67-inner, .f51-inner, .w90-inner, .p24-inner, .o82-inner { padding-inline: var(--bs-container-padding-tablet); }
	.r43-logo-img { height: 48px; width: 48px; }
	.f51-inner { grid-template-columns: 1fr; gap: var(--bs-spacing-lg); }
}

@media (max-width: 899px) {
	:root {
		--bs-size-h1: 30px;
		--bs-text-h2: 24px;
		--bs-fs-h3: 20px;
		--bs-type-h4: 17px;
		--bs-size-h5: 15px;
		--bs-type-body: 16px;
		--bs-fs-small: 13px;
		--bs-text-xs: 11px;
		--bs-header-h: 64px;
	}
	.r43-inner { height: 64px; padding-inline: var(--bs-edge-mobile); }
	.r43-logo-img { height: 44px; width: 44px; }
	.r43-nav { display: none; }
	.r43-toggle { display: inline-flex; }
	.r43-drawer {
		position: fixed;
		top: 64px; left: 0; right: 0;
		background: var(--bs-canvas);
		border-top: 1px solid var(--bs-color-line);
		max-height: calc(100vh - 64px);
		overflow-y: auto;
	}
	.r43-drawer.is-open { display: block; }
	.r43, .r43--over-hero { background: var(--bs-canvas); border-bottom-color: var(--bs-color-line); }
	.m41-inner, .b35-inner, .h83-inner, .g83-inner, .o62-inner, .t87-inner, .g35-inner, .n76-inner, .n78-inner, .u67-inner, .f51-inner, .w90-inner, .p24-inner, .o82-inner { padding-inline: var(--bs-edge-mobile); }
	.t87-list { grid-template-columns: 1fr; }
	.n76-inner { flex-direction: column; align-items: flex-start; gap: var(--bs-spacing-md); }
	.n76-cta { width: 100%; justify-content: center; }
	.n78-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.n78-portrait, .n78-portrait-img { width: 120px; height: 120px; }
	.n78-tags { justify-content: center; }
	.o82-inner { flex-direction: column; align-items: flex-start; gap: var(--bs-spacing-md); }
}

@media (max-width: 720px) {
	.n26 {
		inset-inline: var(--bs-spacing-md);
		width: auto;
	}
}