@charset "UTF-8";
/*
 * Beau & Hans — theme stylesheet
 *
 * Tokens are carried over verbatim from the client-approved concept so the
 * built site matches the design that was signed off. New components (dropdown
 * navigation, category pages, blog templates, treatment detail, compliance
 * footer) are built from those same tokens rather than new ones.
 */

/* ============================================================
   Fonts (self-hosted)
   ============================================================ */
@font-face {
	font-family: "Petrona";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/petrona-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Petrona";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/petrona-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Petrona";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/petrona-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Petrona";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/petrona-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Petrona";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/petrona-400-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/karla-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/karla-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/karla-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/karla-500-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/karla-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/karla-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/karla-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/karla-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
	--cream: #fbf6ee;
	--cream-alt: #f3e7cf;
	--ink: #211c17;
	--ink-soft: #5b5147;
	--gold: #ae8a4e;
	--gold-deep: #8a6b34;
	--gold-pale: #e8d8af;
	--espresso: #20180f;
	--espresso-soft: #2e2318;

	--line: rgba(33, 28, 23, 0.14);
	--line-strong: rgba(33, 28, 23, 0.28);
	--line-light: rgba(251, 246, 238, 0.18);

	--shadow: 0 24px 55px -24px rgba(32, 24, 15, 0.45);
	--shadow-soft: 0 12px 32px -18px rgba(32, 24, 15, 0.35);

	--container: 1180px;
	--container-narrow: 760px;

	--fs-hero: clamp(2.3rem, 1.6rem + 3vw, 4rem);
	--fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
	--fs-h2: clamp(1.7rem, 1.4rem + 1.3vw, 2.35rem);
	--fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	--fs-h4: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
	--fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
	--fs-small: 0.9rem;
	--fs-eyebrow: 0.78rem;

	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-section: clamp(4rem, 3rem + 4.5vw, 8rem);

	--radius-sm: 3px;
	--radius: 4px;
	--radius-pill: 999px;

	--duration-fast: 150ms;
	--duration: 260ms;
	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	--header-height: 76px;
}

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

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 1rem);
	-webkit-text-size-adjust: 100%;
	/* The closed mobile drawer sits off-screen at translateX(100%) and Chrome
	   counts it in scrollable overflow, which widened the whole document.
	   `clip` contains it without creating a scroll container, so the sticky
	   header keeps working — `hidden` here would break it. The `hidden`
	   declaration is the fallback for browsers without `clip`. */
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	position: relative;
	background: var(--cream);
	color: var(--ink);
	font-family: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-x: clip;
}

/* Fine paper grain — atmosphere without an image request. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(33, 28, 23, 0.045) 1px, transparent 1px);
	background-size: 3px 3px;
	opacity: 0.55;
}

h1,
h2,
h3,
h4 {
	font-family: "Petrona", ui-serif, Georgia, serif;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: "Karla", ui-sans-serif, system-ui, sans-serif; font-weight: 700; }

p { text-wrap: pretty; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--duration-fast) ease;
}

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

ul,
ol { list-style-position: outside; }

strong { font-weight: 700; }

:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--gold-pale);
	color: var(--espresso);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-md);
	z-index: 100;
	padding: var(--space-sm) var(--space-md);
	background: var(--espresso);
	color: var(--cream);
	font-size: var(--fs-small);
	font-weight: 600;
	border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
	top: 0;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 2vw + 0.5rem, 2.5rem);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.section--dark { background: var(--espresso); color: var(--cream); }
.section--alt { background: var(--cream-alt); }

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--cream); }

.eyebrow {
	display: block;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.section--dark .eyebrow { color: var(--gold); }

.section-head {
	max-width: 640px;
	margin-bottom: clamp(2.25rem, 2vw + 1.5rem, 3.5rem);
}

.section-head .eyebrow { margin-bottom: var(--space-sm); }
.section-head h2 { margin-bottom: var(--space-sm); }
.section-head p { color: var(--ink-soft); }
.section--dark .section-head p { color: rgba(251, 246, 238, 0.78); }

.prose {
	max-width: 68ch;
}

.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul,
.prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a {
	color: var(--gold-deep);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--ink); }
.prose blockquote {
	padding: var(--space-md) var(--space-lg);
	background: var(--cream-alt);
	border-radius: var(--radius);
	font-family: "Petrona", ui-serif, Georgia, serif;
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.4;
}
.prose img { border-radius: var(--radius); }
.prose figcaption {
	margin-top: var(--space-xs);
	font-size: var(--fs-small);
	color: var(--ink-soft);
}

/* ============================================================
   Icons & buttons
   ============================================================ */
.icon {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
	flex-shrink: 0;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 44px;
	padding: 0.85rem 1.6rem;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: transform var(--duration-fast) ease, background-color var(--duration-fast) ease,
		color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
	background: var(--gold);
	color: var(--cream);
	box-shadow: 0 12px 24px -12px rgba(174, 138, 78, 0.65);
}
.btn--gold:hover { background: var(--gold-deep); color: var(--cream); }

.btn--outline {
	border-color: var(--ink);
	color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--cream); }

.btn--light {
	border-color: var(--line-light);
	color: var(--cream);
}
.btn--light:hover { background: var(--cream); color: var(--espresso); }

.btn--sm {
	min-height: 38px;
	padding: 0.55rem 1.1rem;
	font-size: 0.85rem;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gold-deep);
}

.link-arrow::after {
	content: "→";
	transition: transform var(--duration-fast) ease;
}

.link-arrow:hover::after { transform: translateX(3px); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
	background: var(--espresso);
	color: var(--gold-pale);
	font-size: 0.8rem;
}

.topbar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: 0.55rem;
}

.topbar-group {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.topbar a:hover { color: var(--cream); }

/* ============================================================
   Header & navigation
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: var(--space-md);
}

.site-brand {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: "Petrona", ui-serif, Georgia, serif;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}

.site-brand-mark {
	width: auto;
	height: 44px;
}

.site-brand-text { white-space: nowrap; }

.site-brand .amp { color: var(--gold-deep); }

.site-footer .site-brand-mark {
	height: 40px;
	/* The mark is dark charcoal; on the espresso footer it needs inverting. */
	filter: invert(1) brightness(1.6);
	opacity: 0.9;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

/* --- Desktop navigation --- */
.main-nav > ul {
	display: flex;
	align-items: center;
	gap: var(--space-xl);
	list-style: none;
}

.main-nav li { position: relative; }

.main-nav a,
.main-nav .menu-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .current-menu-parent > a { color: var(--gold-deep); }

/* Submenu: a two-column panel, because a single column of nine concern
   categories reads as an unscannable strip.

   Scoped to desktop widths deliberately. `is-open` is shared with the mobile
   accordion, and when these rules were unscoped the desktop
   `transform: translate(-50%, 0)` applied on mobile too, shifting the open
   submenu half its width off the left edge of the drawer. */
@media (min-width: 861px) {
	.main-nav .sub-menu {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 50%;
		z-index: 30;
		display: grid;
		grid-template-columns: repeat(2, minmax(210px, 1fr));
		gap: 0.15rem 1.5rem;
		min-width: 520px;
		padding: var(--space-lg);
		list-style: none;
		background: var(--cream);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -6px);
		transition: opacity var(--duration) var(--ease-out-expo),
			transform var(--duration) var(--ease-out-expo), visibility var(--duration);
	}

	.main-nav li:hover > .sub-menu,
	.main-nav li:focus-within > .sub-menu,
	.main-nav li.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
	}
}

.main-nav .sub-menu a {
	display: block;
	padding: 0.6rem 0.75rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ink);
	border-radius: var(--radius-sm);
	transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.main-nav .sub-menu a:hover {
	background: var(--cream-alt);
	color: var(--gold-deep);
}

.menu-item-has-children > a::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.15em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* --- Mobile drawer --- */
.nav-close { display: none; }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	cursor: pointer;
}

.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

.nav-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: rgba(32, 24, 15, 0.45);
	opacity: 0;
	transition: opacity var(--duration) ease;
}

body.nav-open .nav-backdrop { opacity: 1; }

/* Hidden entirely on desktop, where the shell is `display: contents` and the
   backdrop would otherwise sit loose in the header. */
.nav-shell { display: contents; }
.nav-shell > .nav-backdrop { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--space-section);
	overflow: hidden;
}

.hero .container {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
}

.hero-copy .eyebrow { margin-bottom: 1.1rem; }
.hero-copy h1 { font-size: var(--fs-hero); margin-bottom: 1.3rem; }
.hero-copy p {
	max-width: 46ch;
	margin-bottom: 2rem;
	font-size: 1.05rem;
	color: var(--ink-soft);
}

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

.hero-visual {
	position: relative;
	aspect-ratio: 4 / 5;
}

.hero-visual::before {
	content: "";
	position: absolute;
	top: -1.4rem;
	right: -1.4rem;
	z-index: 0;
	width: 72%;
	height: 72%;
	border: 1px solid var(--gold);
	border-radius: var(--radius);
}

.hero-visual-panel {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.hero-visual-panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   Fact strip (replaces the mockup's promotional trust strip)
   ============================================================ */
.fact-strip {
	padding-block: 2.3rem;
	border-block: 1px solid var(--line);
}

.fact-strip .container {
	display: flex;
	flex-wrap: wrap;
}

.fact-item {
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	gap: 0.85rem;
	padding-inline: var(--space-lg);
	border-left: 1px solid var(--line);
}

.fact-item:first-child {
	padding-left: 0;
	border-left: none;
}

.fact-item .icon { stroke: var(--gold-deep); }

.fact-item span {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--ink-soft);
}

/* ============================================================
   Category grid (editorial bento)
   ============================================================ */
.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(190px, auto);
	gap: 1.35rem;
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.8rem;
	overflow: hidden;
	color: var(--cream);
	background: var(--espresso);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.tile-photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out-expo);
}

/* The brand imagery is deliberately pale, so a light gradient left the caption
   failing contrast. Two layers: an even wash that guarantees a floor whatever
   the photograph does, plus a bottom-weighted scrim behind the text itself. */
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			to top,
			rgba(24, 18, 11, 0.88) 0%,
			rgba(24, 18, 11, 0.62) 32%,
			rgba(24, 18, 11, 0.18) 62%,
			rgba(24, 18, 11, 0.08) 100%
		),
		rgba(24, 18, 11, 0.14);
}

.tile > *:not(.tile-photo) {
	position: relative;
	z-index: 1;
}

.tile:hover .tile-photo { transform: scale(1.04); }

.tile h3 {
	margin-bottom: 0.5rem;
	color: var(--cream);
	font-size: var(--fs-h3);
}

.tile p {
	max-width: 34ch;
	margin-bottom: var(--space-md);
	font-size: 0.9rem;
	color: rgba(251, 246, 238, 0.85);
}

.tile .link-arrow { color: var(--gold-pale); }

/* Deliberately uneven rhythm: the first tile anchors the composition, then the
   rows alternate between paired and split. Spans are chosen so all eight
   categories tile the four columns exactly, with no orphaned gap in the last
   row: 2+2 / (1+1 beside the tall tile) / 2+2 / 2+2 / one full-width. */
.category-grid .tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.category-grid .tile:nth-child(2) { grid-column: span 2; }
.category-grid .tile:nth-child(3),
.category-grid .tile:nth-child(4) { grid-column: span 1; }
.category-grid .tile:nth-child(5),
.category-grid .tile:nth-child(6),
.category-grid .tile:nth-child(7),
.category-grid .tile:nth-child(8) { grid-column: span 2; }
.category-grid .tile:nth-child(9) { grid-column: span 4; min-height: 240px; }

/* ============================================================
   Treatment cards (inside a category page)
   ============================================================ */
.treatment-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}

.treatment-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform var(--duration) var(--ease-out-expo),
		box-shadow var(--duration) var(--ease-out-expo);
}

.treatment-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
}

.treatment-card-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cream-alt);
}

.treatment-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

.treatment-card h3 {
	margin-bottom: var(--space-xs);
	font-size: 1.35rem;
}

.treatment-card p {
	margin-bottom: var(--space-md);
	font-size: 0.92rem;
	color: var(--ink-soft);
}

.treatment-card .link-arrow { margin-top: auto; }

.treatment-card-meta {
	margin-bottom: var(--space-xs);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

/* ============================================================
   Treatment detail
   ============================================================ */
.treatment-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.treatment-facts {
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
	padding: var(--space-lg);
	background: var(--cream-alt);
	border-radius: var(--radius);
}

.treatment-facts h2 {
	margin-bottom: var(--space-md);
	font-size: 1.35rem;
}

.fact-row {
	padding-block: 0.8rem;
	border-top: 1px solid var(--line);
}

.fact-row:first-of-type { border-top: none; }

.fact-row dt {
	margin-bottom: 0.15rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.fact-row dd {
	font-size: 0.92rem;
	color: var(--ink-soft);
}

/* Safety information is presented as a full-bordered panel rather than an
   accent stripe, so it reads as part of the content, not a decorative alert. */
.safety-panel {
	margin-top: var(--space-2xl);
	padding: var(--space-lg);
	background: var(--cream-alt);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}

.safety-panel h2 {
	margin-bottom: var(--space-sm);
	font-size: 1.35rem;
}

.safety-panel h3 {
	margin-top: var(--space-md);
	margin-bottom: var(--space-2xs);
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.safety-panel p { font-size: 0.95rem; color: var(--ink-soft); }

.review-note {
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--ink-soft);
}

/* ============================================================
   Approach section
   ============================================================ */
.approach .container {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(2.5rem, 4vw, 4.5rem);
	align-items: center;
}

.approach-visual {
	position: relative;
	padding: 0 1.4rem 2.4rem 0;
}

.approach-visual::before {
	content: "";
	position: absolute;
	inset: 1.4rem 0 0 1.4rem;
	z-index: 0;
	border: 1px solid var(--gold);
	border-radius: var(--radius);
}

.approach-photo {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}

.approach-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.approach-quote {
	position: relative;
	z-index: 2;
	max-width: 82%;
	margin: -2.75rem 0 0 -1.4rem;
	padding: clamp(1.5rem, 2vw, 2.25rem);
	background: var(--espresso-soft);
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.approach-quote p {
	font-family: "Petrona", ui-serif, Georgia, serif;
	font-style: italic;
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	line-height: 1.35;
	color: var(--gold-pale);
}

.approach-copy p {
	max-width: 52ch;
	margin-bottom: 1.75rem;
	color: rgba(251, 246, 238, 0.78);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.pillar {
	padding-top: 0.9rem;
	border-top: 1px solid var(--line-light);
}

.pillar strong {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.92rem;
}

.pillar span {
	font-size: 0.82rem;
	color: rgba(251, 246, 238, 0.65);
}

/* ============================================================
   Journal / blog
   ============================================================ */
.journal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-lg);
	margin-bottom: clamp(2.25rem, 2vw + 1.5rem, 3.5rem);
}

.journal-head .section-head { margin-bottom: 0; }

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

.post-card { display: block; }

.post-card-media {
	aspect-ratio: 4 / 3;
	margin-bottom: 1.2rem;
	overflow: hidden;
	background: var(--cream-alt);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.post-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s var(--ease-out-expo);
}

.post-card:hover .post-card-media img { transform: scale(1.05); }

.post-card h3 {
	margin-bottom: 0.5rem;
	font-size: var(--fs-h3);
	transition: color var(--duration-fast) ease;
}

.post-card:hover h3 { color: var(--gold-deep); }

.post-card p {
	max-width: 44ch;
	margin-bottom: 0.7rem;
	font-size: 0.92rem;
	color: var(--ink-soft);
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep);
}

.entry-header { margin-bottom: var(--space-xl); }
.entry-header h1 { margin-bottom: var(--space-sm); }
.entry-hero {
	margin-bottom: var(--space-2xl);
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* ============================================================
   Visit / contact
   ============================================================ */
.visit-layout {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: stretch;
}

.visit-card {
	padding: clamp(1.75rem, 2vw, 2.75rem);
	background: var(--cream-alt);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.visit-card h2 {
	margin-block: 0.6rem var(--space-lg);
	font-size: var(--fs-h3);
}

.visit-row {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	padding-block: 0.85rem;
	border-top: 1px solid var(--line);
}

.visit-row:first-of-type { border-top: none; }
.visit-row .icon { stroke: var(--gold-deep); margin-top: 2px; }

.visit-row strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.88rem;
}

.visit-row span,
.visit-row a {
	font-size: 0.86rem;
	color: var(--ink-soft);
}

.visit-row a:hover { color: var(--gold-deep); }

.visit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: var(--space-lg);
}

.map-panel {
	position: relative;
	min-height: 320px;
	overflow: hidden;
	background: var(--cream-alt);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.map-panel iframe {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.map-placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	min-height: 320px;
	padding: var(--space-lg);
	text-align: center;
	background-image:
		repeating-linear-gradient(0deg, rgba(33, 28, 23, 0.07) 0 1px, transparent 1px 42px),
		repeating-linear-gradient(90deg, rgba(33, 28, 23, 0.07) 0 1px, transparent 1px 42px);
}

.map-placeholder span {
	padding: 0.35rem 0.8rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	background: var(--cream);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
	padding-block: clamp(3rem, 3vw + 2rem, 4.5rem);
	color: var(--cream);
	background: linear-gradient(155deg, var(--gold-deep), var(--gold));
}

.cta-band .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
}

.cta-band h2 {
	max-width: 22ch;
	color: var(--cream);
}

.cta-band p {
	max-width: 46ch;
	margin-top: var(--space-xs);
	font-size: 0.95rem;
	color: rgba(251, 246, 238, 0.85);
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
	padding-block: var(--space-md);
	font-size: 0.82rem;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
}

.breadcrumbs li::after {
	content: "/";
	margin-left: 0.45rem;
	color: var(--line-strong);
}

.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs a:hover { color: var(--gold-deep); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ============================================================
   Page header
   ============================================================ */
.page-header {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* A page header followed straight by a content section stacked two full
   paddings on top of each other, leaving a dead band before the first heading. */
.page-header + .section {
	padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.page-header .eyebrow { margin-bottom: var(--space-sm); }
.page-header h1 { margin-bottom: var(--space-md); }
.page-header p {
	max-width: 60ch;
	font-size: 1.05rem;
	color: var(--ink-soft);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	padding-top: var(--space-section);
	color: rgba(251, 246, 238, 0.75);
	background: var(--espresso);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: var(--space-2xl);
	padding-bottom: var(--space-2xl);
	border-bottom: 1px solid var(--line-light);
}

.footer-brand .site-brand { color: var(--cream); margin-bottom: 0.9rem; }
.footer-brand .site-brand .amp { color: var(--gold); }

.footer-brand p {
	max-width: 34ch;
	font-size: 0.88rem;
	color: rgba(251, 246, 238, 0.6);
}

.footer-col h4 {
	margin-bottom: var(--space-md);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-pale);
}

.footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	list-style: none;
}

.footer-col a { font-size: 0.9rem; }
.footer-col a:hover { color: var(--cream); }

/* Regulatory block: required corporate and licensing disclosures. */
.footer-compliance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-lg);
	padding-block: var(--space-xl);
	border-bottom: 1px solid var(--line-light);
	font-size: 0.78rem;
	line-height: 1.6;
	color: rgba(251, 246, 238, 0.55);
}

.footer-compliance strong {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-pale);
	font-weight: 700;
}

.footer-disclaimer {
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--line-light);
	font-size: 0.78rem;
	line-height: 1.65;
	color: rgba(251, 246, 238, 0.5);
	max-width: 90ch;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-lg);
	font-size: 0.78rem;
	color: rgba(251, 246, 238, 0.45);
}

.footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	list-style: none;
}

.footer-bottom a:hover { color: var(--cream); }

/* ============================================================
   Pagination, forms, misc
   ============================================================ */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-top: var(--space-2xl);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	color: var(--cream);
	background: var(--gold-deep);
	border-color: var(--gold-deep);
}

.search-form {
	display: flex;
	gap: var(--space-xs);
}

.search-form input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--cream);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
}

.search-form input[type="search"]:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(174, 138, 78, 0.18);
}

.empty-state {
	max-width: 52ch;
	padding-block: var(--space-2xl);
}

.empty-state h1,
.empty-state h2 { margin-bottom: var(--space-sm); }
.empty-state p { margin-bottom: var(--space-lg); color: var(--ink-soft); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
	.category-grid { grid-template-columns: repeat(2, 1fr); }
	.category-grid .tile:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.category-grid .tile:nth-child(1),
	.category-grid .tile:nth-child(9) { grid-column: span 2; min-height: 300px; }
	.treatment-layout { grid-template-columns: 1fr; }
	.treatment-facts { position: static; }
}

@media (max-width: 960px) {
	.hero .container { grid-template-columns: 1fr; }
	.hero-visual {
		order: -1;
		width: 100%;
		max-width: 420px;
		margin-inline: auto;
	}
	.approach .container { grid-template-columns: 1fr; }
	.approach-visual {
		order: 2;
		max-width: 460px;
		margin-inline: auto;
		padding-bottom: 3rem;
	}
	.visit-layout { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.topbar-group:first-child span:not(:first-child) { display: none; }

	.nav-toggle { display: inline-flex; }

	/* Sits at the top of the drawer's own flow, so it can never collide with a
	   menu row however tall the header happens to be. */
	.nav-close {
		/* Block-level flex, not inline-flex: `margin-left: auto` has no effect
		   on an inline-level box, which left the button stuck at the left edge. */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 0 var(--space-md) auto;
		background: none;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		color: var(--ink);
		cursor: pointer;
	}

	.nav-close:hover {
		background: var(--cream-alt);
		border-color: var(--line-strong);
	}

	/* Fixed and exactly viewport-sized, so it adds no scrollable overflow of
	   its own, while clipping the absolutely-positioned drawer inside it.
	   Hidden when closed, which also keeps the drawer's links out of the tab
	   order until it is actually opened. */
	.nav-shell {
		display: block;
		position: fixed;
		/* Longhand rather than `inset`, which older iOS Safari does not honour. */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		overflow: hidden;
		pointer-events: none;
		visibility: hidden;
		transition: visibility 0s linear var(--duration);
	}

	.nav-shell > .nav-backdrop { display: block; }

	body.nav-open .nav-shell {
		pointer-events: auto;
		visibility: visible;
		transition-delay: 0s;
	}

	.main-nav {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(86vw, 360px);
		height: 100%;
		padding: var(--space-lg) var(--space-lg) var(--space-xl);
		overflow-y: auto;
		background: var(--cream);
		box-shadow: var(--shadow);
		transform: translateX(100%);
		transition: transform var(--duration) var(--ease-out-expo);
	}

	body.nav-open .main-nav { transform: translateX(0); }

	/* The drawer lives inside the header's stacking context, so the header
	   itself has to rise above the page while the drawer is open. */
	body.nav-open .site-header { z-index: 60; }

	.main-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-nav > ul > li { border-bottom: 1px solid var(--line); }

	.main-nav > ul > li > a {
		display: flex;
		justify-content: space-between;
		min-height: 52px;
		padding-block: var(--space-sm);
		font-size: 1rem;
		color: var(--ink);
	}

	/* Eight categories cannot sit in a flat mobile list, so the parent item
	   becomes an accordion. The toggle is a real button for keyboard users. */
	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		background: none;
		border: none;
		color: var(--ink-soft);
		cursor: pointer;
	}

	.submenu-toggle svg {
		width: 16px;
		height: 16px;
		transition: transform var(--duration) var(--ease-out-expo);
	}

	.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	.main-nav .menu-item-has-children > a { flex: 1; }

	.main-nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-nav .menu-item-has-children > a::after { content: none; }

	/* Collapsed with max-height rather than the grid-template-rows technique:
	   that only works with a single child, and with nine list items the first
	   one sat in the zero-height track (invisible) while the rest spilled into
	   auto-sized implicit rows, so the menu neither collapsed nor showed its
	   first entry. */
	.main-nav .sub-menu {
		position: static;
		display: block;
		list-style: none;
		width: 100%;
		min-width: 0;
		padding: 0;
		overflow: hidden;
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		transition: max-height var(--duration) var(--ease-out-expo);
	}

	.main-nav .menu-item-has-children.is-open > .sub-menu {
		max-height: 40rem;
		padding-bottom: var(--space-sm);
	}

	.main-nav .sub-menu a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding-left: var(--space-md);
		color: var(--ink-soft);
	}

	.header-actions .btn--outline { display: none; }
}

@media (max-width: 720px) {
	.fact-strip .container { flex-direction: column; }
	.fact-item {
		/* flex-basis resolves against the main axis, so the 220px basis used for
		   the desktop row became a 220px minimum *height* once stacked. */
		flex: 0 0 auto;
		padding: var(--space-md) 0 0;
		border-left: none;
		border-top: 1px solid var(--line);
	}
	.fact-item:first-child { padding-top: 0; border-top: none; }

	.category-grid { grid-template-columns: 1fr; }
	.category-grid .tile:nth-child(1),
	.category-grid .tile:nth-child(9) { grid-column: span 1; }

	.footer-top { grid-template-columns: 1fr; }
	.cta-band .container { flex-direction: column; align-items: flex-start; }
	.approach-quote { max-width: 100%; margin-left: 0; }
	.pillars { grid-template-columns: 1fr; }
	.journal-head { flex-direction: column; align-items: flex-start; }
}

/* Below ~520px the full-size brand lockup plus both header buttons no longer
   fit on one row, which pushed the document wider than the viewport. The brand
   shrinks and the WhatsApp button tightens rather than dropping the CTA, which
   is the primary conversion path on mobile. */
@media (max-width: 520px) {
	.site-brand { font-size: 1.25rem; gap: var(--space-xs); }
	.site-brand-mark { height: 34px; }
	.site-header .container { gap: var(--space-sm); }
	.header-actions { gap: var(--space-xs); }
	.header-actions .btn--gold {
		padding-inline: 0.85rem;
		font-size: 0.8rem;
	}
}

@media (max-width: 380px) {
	.hero-actions .btn,
	.visit-actions .btn { width: 100%; }
}

/* ============================================================
   Motion & print
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.topbar,
	.site-header,
	.cta-band,
	.nav-backdrop,
	.site-footer .footer-top { display: none; }

	body { background: #fff; color: #000; }
	body::before { display: none; }
	.container { max-width: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}