/* ==========================================================================
   SMG site styles
   --------------------------------------------------------------------------
   Brand layer for the SMG (Cixi Samegear) pages: shared chrome (header,
   footer, buttons, media placeholder) plus the About page sections.

   Design source: SMG-English-Landing-Page (2).html + DESIGN.md.
   Every rule is scoped to a .smg-* class, so this file is safe to load on
   every page of the site. Tokens live in assets/css/tokens.css.
   ========================================================================== */

/* 1. Page shell ---------------------------------------------------------- */

body.smg-site-body { background: var(--smg-white); }

/* Column shell: a short page still fills the viewport, so the footer sits at
   the bottom instead of leaving the starter background showing underneath. */
.smg-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--smg-font);
	color: var(--smg-ink);
	background: var(--smg-white);
	-webkit-font-smoothing: antialiased;
}
.smg-site > main { flex: 1 1 auto; }

/* Override the starter stylesheet's generic layout rules for this page. */
.smg-site main,
.smg-site header,
.smg-site footer {
	max-width: none;
	margin: 0;
	padding: 0;
}

.smg-site p { max-width: none; }
.smg-site ul,
.smg-site ol { margin: 0; }

.smg-container {
	width: min(calc(100% - 48px), var(--smg-max));
	margin-inline: auto;
}

.smg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 60;
	padding: 12px 18px;
	background: var(--smg-white);
	color: var(--smg-navy);
	border-radius: var(--smg-radius-btn);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.smg-skip:focus { left: 16px; top: 16px; }

/* Focus ring in brand colours (the starter uses its own accent colour). */
.smg-site :focus-visible {
	outline: 3px solid var(--smg-blue);
	outline-offset: 3px;
}
.smg-site .smg-header :focus-visible,
.smg-site .smg-hero :focus-visible,
.smg-site .smg-dark :focus-visible,
.smg-site .smg-footer :focus-visible {
	outline-color: var(--smg-white);
}

/* 2. Typography ---------------------------------------------------------- */

.smg-h1,
.smg-h2,
.smg-h3 {
	margin: 0;
	font-weight: 650;
	line-height: 1.06;
	letter-spacing: -0.035em;
}
.smg-h1 { font-size: clamp(46px, 7vw, 88px); }
.smg-h2 { font-size: clamp(34px, 4.8vw, 58px); }
.smg-h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }

.smg-h1 span { color: var(--smg-accent-soft); }

.smg-p {
	color: var(--smg-body);
	font-size: 16px;
	line-height: 1.72;
}
.smg-p-invert { color: var(--smg-dark-body); }

.smg-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smg-blue);
}
.smg-eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 2px;
	background: var(--smg-red);
}
.smg-eyebrow-invert { color: #A9C4E0; }

/* 3. Buttons ------------------------------------------------------------- */

.smg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: var(--smg-radius-btn);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.smg-btn-primary {
	background: var(--smg-red);
	color: var(--smg-white);
}
.smg-btn-primary:hover,
.smg-btn-primary:focus { background: var(--smg-red-strong); }

.smg-btn-outline {
	background: transparent;
	color: var(--smg-white);
	border-color: rgba(255, 255, 255, 0.45);
}
.smg-btn-outline:hover,
.smg-btn-outline:focus {
	border-color: var(--smg-white);
	background: rgba(255, 255, 255, 0.08);
}

.smg-btn-ghost {
	background: var(--smg-white);
	color: var(--smg-navy);
	border-color: var(--smg-field);
}
.smg-btn-ghost:hover,
.smg-btn-ghost:focus {
	color: var(--smg-blue);
	border-color: var(--smg-blue);
	background: var(--smg-soft-strong);
}

/* 4. Media placeholder --------------------------------------------------- */

.smg-ph {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: var(--smg-ph-ratio, 4 / 3);
	background: var(--smg-placeholder);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-media);
	overflow: hidden;
}
.smg-ph-label {
	max-width: 280px;
	padding: 0 16px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--smg-placeholder-ink);
}

/* 5. Header -------------------------------------------------------------- */

.smg-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	color: var(--smg-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.smg-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 84px;
}

.smg-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
.smg-brand-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid currentColor;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
}
.smg-brand-mark::after {
	content: "";
	position: absolute;
	top: -1.5px;
	right: -1.5px;
	width: 9px;
	height: 9px;
	background: var(--smg-red);
}
.smg-brand-word {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.12em;
}
.smg-brand-word small {
	margin-top: 5px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.68;
}

.smg-nav-links {
	display: flex;
	gap: 30px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.smg-nav-links a {
	position: relative;
	color: inherit;
	text-decoration: none;
	opacity: 0.82;
	transition: opacity 0.18s ease;
}
.smg-nav-links a:hover,
.smg-nav-links a:focus,
.smg-nav-links a.is-active { opacity: 1; }
.smg-nav-links a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	background: var(--smg-red);
}

.smg-nav-cta {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--smg-radius-btn);
	color: var(--smg-white);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.smg-nav-cta:hover,
.smg-nav-cta:focus {
	border-color: var(--smg-white);
	background: rgba(255, 255, 255, 0.1);
}

/* 6. Hero ---------------------------------------------------------------- */

.smg-hero {
	position: relative;
	padding: 180px 0 96px;
	background: linear-gradient(118deg, var(--smg-navy) 0%, var(--smg-blue) 118%);
	color: var(--smg-white);
}
.smg-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 70px;
	align-items: start;
}
.smg-h1 { margin-top: 22px; }
.smg-lead {
	max-width: 670px;
	margin: 28px 0 0;
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}
.smg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.smg-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 52px 0 0;
	padding: 34px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	list-style: none;
}
.smg-metric strong {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--smg-white);
}
.smg-metric span {
	display: block;
	margin-top: 9px;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}

.smg-hero-note {
	padding: 28px 26px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--smg-radius-card);
}
.smg-hero-note-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--smg-white);
}
.smg-hero-note p + p,
.smg-hero-note-title + p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

/* 7. Trust strip --------------------------------------------------------- */

.smg-trust {
	padding: 26px 0;
	background: var(--smg-soft);
	border-bottom: 1px solid var(--smg-line);
}
.smg-trust-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.smg-trust-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--smg-navy);
}
.smg-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
}
.smg-pill {
	padding: 7px 14px;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--smg-body);
}

/* 8. Sections ------------------------------------------------------------ */

.smg-section { padding: var(--smg-section) 0; }
.smg-soft { background: var(--smg-soft); }
.smg-dark {
	background: var(--smg-navy);
	color: var(--smg-white);
}
.smg-dark .smg-ph {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
}
.smg-dark .smg-ph-label { color: rgba(255, 255, 255, 0.6); }

.smg-section-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: end;
	margin-bottom: 58px;
}
.smg-section-head .smg-h2 { margin-top: 16px; }
.smg-section-head .smg-p { max-width: 54ch; }
.smg-section-head .smg-p + .smg-p { margin-top: 0; }

/* 9. Two-column splits --------------------------------------------------- */

.smg-split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 64px;
	align-items: center;
}
.smg-split-flip .smg-split-media { order: -1; }
.smg-split-copy .smg-h2 { margin-top: 16px; }
.smg-split-copy .smg-p { margin-top: 18px; }

.smg-focus {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin-top: 26px;
	list-style: none;
	padding: 0;
}
.smg-focus li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: var(--smg-body);
}
.smg-focus li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 2px;
	background: var(--smg-blue);
}

.smg-checklist {
	margin-top: 28px;
	list-style: none;
	padding: 0;
}
.smg-checklist li {
	padding: 17px 0;
	border-top: 1px solid var(--smg-line);
}
.smg-checklist li:last-child { border-bottom: 1px solid var(--smg-line); }
.smg-checklist strong {
	display: block;
	font-size: 14.5px;
	color: var(--smg-ink);
}
.smg-checklist span {
	display: block;
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smg-muted);
}

/* Company facts strip ---------------------------------------------------- */

.smg-facts {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 1px;
	margin-top: 76px;
	background: var(--smg-line);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	overflow: hidden;
	list-style: none;
	padding: 0;
}
.smg-fact {
	padding: 26px 22px;
	background: var(--smg-white);
}
.smg-fact strong {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--smg-navy);
}
.smg-fact span {
	display: block;
	margin-top: 9px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--smg-muted);
}

/* Business evolution stages ---------------------------------------------- */

.smg-stages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.smg-stage {
	display: flex;
	flex-direction: column;
	padding: 32px 28px 30px;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
}
.smg-stage-no {
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--smg-blue);
}
.smg-stage .smg-h3 { margin-top: 14px; font-size: 20px; }
.smg-stage .smg-p { margin-top: 12px; font-size: 14px; }
.smg-stage-tag {
	margin: 0;
	padding-top: 24px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--smg-muted);
}
.smg-stage-tag::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin-bottom: 12px;
	background: var(--smg-red);
}

.smg-statement {
	max-width: 820px;
	margin: 44px 0 0;
	padding-top: 36px;
	border-top: 1px solid var(--smg-line);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: var(--smg-navy);
}

/* Core values ------------------------------------------------------------ */

.smg-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	background: var(--smg-line);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	overflow: hidden;
	list-style: none;
	padding: 0;
}
.smg-value {
	padding: 28px 24px 30px;
	background: var(--smg-white);
}
.smg-value strong {
	display: block;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--smg-navy);
}
.smg-value span {
	display: block;
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--smg-body);
}

/* 10. Product cards ------------------------------------------------------ */

.smg-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.smg-card {
	display: flex;
	flex-direction: column;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.smg-card:hover,
.smg-card:focus-within {
	box-shadow: var(--smg-shadow);
	transform: translateY(-2px);
}
.smg-card .smg-ph {
	border: 0;
	border-bottom: 1px solid var(--smg-line);
	border-radius: 0;
}
.smg-card-copy {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 24px 28px;
}
.smg-card-kicker {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-red);
}
.smg-card-copy .smg-h3 { margin-top: 10px; font-size: 19px; }
.smg-card-copy .smg-p { margin-top: 10px; font-size: 14px; }

.smg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding: 20px 0 0;
	list-style: none;
}
.smg-tags li {
	padding: 5px 9px;
	background: var(--smg-soft);
	border: 1px solid var(--smg-line);
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--smg-blue);
}

.smg-note {
	margin-top: 30px;
	padding-left: 14px;
	border-left: 2px solid var(--smg-red);
	font-size: 14px;
	color: var(--smg-muted);
}

/* 11. Quality & validation ----------------------------------------------- */

.smg-quality {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 70px;
	align-items: start;
}
.smg-quality-copy .smg-h2 { margin-top: 16px; }
.smg-quality-copy .smg-p { margin-top: 18px; }

.smg-steps { list-style: none; padding: 0; }
.smg-step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 20px;
	padding: 24px 0;
	border-top: 1px solid var(--smg-line);
}
.smg-step:last-child { border-bottom: 1px solid var(--smg-line); }
.smg-step-no {
	grid-row: 1 / span 2;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--smg-blue);
}
.smg-step strong {
	font-size: 16px;
	color: var(--smg-ink);
}
.smg-step p {
	grid-column: 2;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--smg-muted);
}

/* 12. Markets ------------------------------------------------------------ */

.smg-markets {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 44px;
	align-items: start;
}
.smg-market-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
	list-style: none;
	padding: 0;
}
.smg-market-list li {
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 15px;
	font-weight: 600;
	color: var(--smg-white);
}

.smg-audience {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 56px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
	padding: 0;
}
.smg-audience li {
	padding: 24px 22px;
	background: var(--smg-navy);
}
.smg-audience strong {
	display: block;
	font-size: 14.5px;
	color: var(--smg-white);
}
.smg-audience span {
	display: block;
	margin-top: 9px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--smg-dark-body);
}

/* 13. Call to action ----------------------------------------------------- */

.smg-cta-box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
	padding: 52px 56px;
	background: var(--smg-soft);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
}
.smg-cta-box .smg-h2 {
	margin-top: 14px;
	font-size: clamp(28px, 3.4vw, 40px);
}
.smg-cta-box .smg-p { margin-top: 16px; max-width: 60ch; }
.smg-cta-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	min-width: 230px;
}

/* Contact details -------------------------------------------------------- */

.smg-contact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 22px 0 0;
	background: var(--smg-line);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	overflow: hidden;
	list-style: none;
	padding: 0;
}
.smg-contact-item {
	padding: 24px 22px 26px;
	background: var(--smg-white);
}
.smg-contact-label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-muted);
}
.smg-contact-value {
	display: block;
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--smg-navy);
}
.smg-contact-value a {
	color: var(--smg-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Footer presentation of the same details: a plain row on navy. */
.smg-contact-footer {
	grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
	gap: 28px;
	margin: 0 0 30px;
	padding: 26px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
}
.smg-contact-footer .smg-contact-item {
	padding: 0;
	background: transparent;
}
.smg-contact-footer .smg-contact-label { color: var(--smg-dark-muted); }
.smg-contact-footer .smg-contact-value { color: var(--smg-white); }
.smg-contact-footer .smg-contact-value a { color: var(--smg-white); }

/* 14. Footer ------------------------------------------------------------- */

.smg-footer {
	padding: 58px 0 30px;
	background: var(--smg-navy);
	color: var(--smg-white);
}
.smg-footer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.smg-brand-invert { color: var(--smg-white); }
.smg-footer-links {
	display: flex;
	gap: 26px;
	font-size: 13px;
	font-weight: 600;
}
.smg-footer-links a {
	color: inherit;
	text-decoration: none;
	opacity: 0.78;
	transition: opacity 0.18s ease;
}
.smg-footer-links a:hover,
.smg-footer-links a:focus { opacity: 1; }
.smg-footer-bottom {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 24px;
}
.smg-footer-tagline {
	margin: 0;
	font-size: 13px;
	color: var(--smg-dark-body);
}
.smg-footer-legal {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--smg-dark-muted);
}

/* 15. Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
	.smg-nav-links { display: none; }

	.smg-hero { padding: 150px 0 80px; }
	.smg-hero-inner { grid-template-columns: 1fr; gap: 40px; }
	.smg-hero-note { max-width: 620px; }

	.smg-metrics { grid-template-columns: 1fr 1fr; gap: 26px 22px; }

	.smg-split,
	.smg-section-head,
	.smg-quality,
	.smg-markets { grid-template-columns: 1fr; gap: 36px; }
	.smg-split-flip .smg-split-media { order: 0; }
	.smg-section-head { align-items: start; }

	.smg-cards { grid-template-columns: 1fr 1fr; gap: 18px; }
	.smg-audience { grid-template-columns: 1fr 1fr; }
	.smg-facts { grid-template-columns: repeat(3, 1fr); }
	.smg-values { grid-template-columns: 1fr 1fr; }
	.smg-contact,
	.smg-contact-footer { grid-template-columns: 1fr 1fr; }
	.smg-stage { padding: 26px 22px; }

	.smg-cta-box { grid-template-columns: 1fr; gap: 30px; padding: 40px 36px; }
	.smg-cta-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

@media (max-width: 620px) {
	.smg-container { width: min(calc(100% - 64px), var(--smg-max)); }

	.smg-nav { height: 72px; }
	.smg-brand-word small { display: none; }

	.smg-hero { padding: 128px 0 68px; }
	.smg-h1 { margin-top: 18px; }
	.smg-lead { margin-top: 20px; font-size: 17px; }
	.smg-actions { flex-direction: column; align-items: stretch; }

	.smg-section { padding: 82px 0; }
	.smg-section-head { margin-bottom: 40px; }

	.smg-metrics,
	.smg-focus,
	.smg-cards,
	.smg-market-list,
	.smg-audience { grid-template-columns: 1fr; }
	.smg-facts { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
	.smg-stages,
	.smg-values { grid-template-columns: 1fr; }
	.smg-contact,
	.smg-contact-footer { grid-template-columns: 1fr; }
	.smg-value { padding: 24px 20px 26px; }
	.smg-statement {
		margin-top: 34px;
		padding-top: 28px;
		font-size: 17px;
	}
	.smg-audience { margin-top: 40px; }

	.smg-step { grid-template-columns: 1fr; gap: 8px; }
	.smg-step-no { grid-row: auto; }
	.smg-step p { grid-column: 1; }

	.smg-cta-box { padding: 34px 26px; }
	.smg-cta-actions { flex-direction: column; }

	.smg-trust-inner { flex-direction: column; align-items: flex-start; gap: 16px; }

	.smg-footer-bottom { flex-direction: column; gap: 10px; }
	.smg-footer-links { gap: 20px; flex-wrap: wrap; }
}

/* 16. Generic page (page.php) -------------------------------------------- */

/* Compact navy hero: the shared header is absolutely positioned, so the
   hero carries the top padding that keeps the title clear of it. */
.smg-page-hero {
	position: relative;
	padding: 176px 0 76px;
	background: linear-gradient(118deg, var(--smg-navy) 0%, var(--smg-blue) 118%);
	color: var(--smg-white);
}
.smg-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}
.smg-crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}
.smg-crumbs a:hover,
.smg-crumbs a:focus { color: var(--smg-white); }
.smg-crumbs-sep { opacity: 0.5; }
.smg-page-hero .smg-h1 {
	font-size: clamp(34px, 4.8vw, 58px);
	overflow-wrap: anywhere;
}

/* Content: one centred reading column on white. */
.smg-page-main {
	display: flex;
	flex-direction: column;
}
.smg-page-body {
	display: flex;
	flex: 1 1 auto;
	padding: 82px 0 116px;
	background: var(--smg-white);
}
/* Auto margins centre a short page's content in the free space and resolve to
   zero when the content is longer, so nothing is ever clipped. */
.smg-page-body > .smg-container {
	width: 100%;
	margin-block: auto;
}
.smg-page-content {
	max-width: 780px;
	margin-inline: auto;
}

/* Prose rules for editor content. Scoped to .smg-prose, and they restore the
   list styling the .smg-site reset above removes. */
.smg-prose {
	color: var(--smg-body);
	font-size: 16px;
	line-height: 1.8;
}
.smg-prose > * + * { margin-top: 1.1em; }
.smg-prose > p:first-child {
	font-size: 19px;
	line-height: 1.7;
	font-weight: 500;
	color: var(--smg-navy);
}
.smg-prose h2,
.smg-prose h3,
.smg-prose h4 {
	margin: 1.6em 0 0.6em;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--smg-navy);
}
.smg-prose h2 { font-size: 26px; }
.smg-prose h3 { font-size: 21px; }
.smg-prose h4 { font-size: 17px; }
.smg-prose strong { color: var(--smg-navy); font-weight: 650; }
.smg-prose a {
	color: var(--smg-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.smg-prose ul,
.smg-prose ol {
	padding-left: 22px;
}
.smg-prose ul { list-style: disc; }
.smg-prose ol { list-style: decimal; }
.smg-prose li + li { margin-top: 8px; }
.smg-prose li::marker { color: var(--smg-blue); }
.smg-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 18px;
	border-left: 2px solid var(--smg-red);
	color: var(--smg-muted);
}
.smg-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--smg-radius-media);
}
.smg-prose hr {
	height: 1px;
	border: 0;
	background: var(--smg-line);
}
.smg-prose figure { max-width: 100%; }
.smg-prose figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--smg-muted);
}
.smg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}
.smg-prose th,
.smg-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--smg-line);
	text-align: left;
}
.smg-prose th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--smg-navy);
}
.smg-prose code,
.smg-prose pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	background: var(--smg-soft);
	border: 1px solid var(--smg-line);
	border-radius: 4px;
}
.smg-prose code { padding: 2px 6px; }
.smg-prose pre {
	padding: 18px 20px;
	overflow-x: auto;
}

@media (max-width: 980px) {
	.smg-page-hero { padding: 148px 0 64px; }
}

@media (max-width: 620px) {
	.smg-page-hero { padding: 126px 0 54px; }
	.smg-page-hero .smg-h1 { font-size: clamp(30px, 9vw, 40px); }
	.smg-page-body { padding: 56px 0 78px; }
	.smg-prose > p:first-child { font-size: 17px; }
	.smg-prose table { font-size: 13.5px; }
	.smg-prose th,
	.smg-prose td { padding: 10px 8px; }
}

/* 17. Contact and thank-you pages ----------------------------------------- */

/* Lead paragraph under a navy page hero. */
.smg-page-lead {
	max-width: 720px;
	margin: 24px 0 0;
	font-size: 19px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

/* Form beside the direct-contact column. */
.smg-contact-layout {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 56px;
	align-items: start;
}

.smg-form {
	padding: 34px 32px 30px;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
}
.smg-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 22px;
}
.smg-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.smg-field-wide { grid-column: 1 / -1; }

.smg-label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-muted);
}

.smg-input,
.smg-select,
.smg-textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--smg-ink);
	background: var(--smg-white);
	border: 1px solid var(--smg-field);
	border-radius: var(--smg-radius-btn);
}
.smg-textarea {
	min-height: 132px;
	line-height: 1.6;
	resize: vertical;
}
.smg-input::placeholder,
.smg-textarea::placeholder { color: var(--smg-placeholder-ink); }
.smg-input:focus,
.smg-select:focus,
.smg-textarea:focus {
	border-color: var(--smg-blue);
	outline: 2px solid var(--smg-blue);
	outline-offset: 1px;
}
.smg-input-file {
	padding: 10px 12px;
	font-size: 13.5px;
	color: var(--smg-muted);
}

.smg-form-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid var(--smg-line);
}
.smg-form-note {
	margin: 0;
	font-size: 13px;
	color: var(--smg-muted);
}
.smg-form-note a {
	color: var(--smg-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.smg-aside-title {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-blue);
}
.smg-aside-note {
	margin: 22px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--smg-muted);
}

/* Stacked presentation of the contact details, for narrow columns. */
.smg-contact-stack {
	display: block;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.smg-contact-stack .smg-contact-item {
	padding: 16px 0;
	background: transparent;
	border-top: 1px solid var(--smg-line);
}
.smg-contact-stack .smg-contact-item:last-child {
	border-bottom: 1px solid var(--smg-line);
}
.smg-contact-stack .smg-contact-value { margin-top: 7px; }

@media (max-width: 980px) {
	.smg-contact-layout { grid-template-columns: 1fr; gap: 40px; }
	.smg-form { padding: 26px 22px 24px; }
	.smg-page-lead { font-size: 17px; }
}

@media (max-width: 620px) {
	.smg-form-grid { grid-template-columns: 1fr; gap: 18px; }
	.smg-form { padding: 22px 18px 20px; }
	.smg-form-actions { flex-direction: column; align-items: stretch; }
}

/* 17. Books (archive-book.php / single-book.php) ------------------------- */

/* Factual count under the archive title. */
.smg-hero-meta {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

/* Archive grid: three industrial cards per row (DESIGN.md §10, §13). */
.smg-books {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.smg-book { display: flex; }
.smg-book-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.smg-book-link:hover,
.smg-book-link:focus-visible {
	border-color: var(--smg-field);
	box-shadow: var(--smg-shadow);
	transform: translateY(-2px);
}
.smg-book-cover {
	display: block;
	background: var(--smg-soft);
	border-bottom: 1px solid var(--smg-line);
}
.smg-book-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.smg-book-cover .smg-ph {
	border: 0;
	border-radius: 0;
}
.smg-book-copy {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px 24px 26px;
}
.smg-book-title {
	margin: 0;
	font-size: 19px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--smg-navy);
}
.smg-book-author {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--smg-muted);
}
.smg-book-foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--smg-line);
}
.smg-book-price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.smg-book-price span {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-muted);
}
.smg-book-price strong {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--smg-navy);
}
.smg-book-more {
	font-size: 13px;
	font-weight: 700;
	color: var(--smg-blue);
}
.smg-book-link:hover .smg-book-more,
.smg-book-link:focus-visible .smg-book-more { color: var(--smg-red); }

/* Single book: cover left, details right (DESIGN.md §10). */
.smg-book-layout {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.smg-book-media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-media);
	box-shadow: var(--smg-shadow);
}
.smg-book-info .smg-prose { margin-top: 34px; }

/* Parameter table: label above value (DESIGN.md §20 data visual language). */
.smg-specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin: 0;
	background: var(--smg-line);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	overflow: hidden;
}
.smg-spec {
	padding: 18px 20px 20px;
	background: var(--smg-white);
}
.smg-spec dt {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-muted);
}
.smg-spec dd {
	margin: 9px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--smg-navy);
}
.smg-book-back { margin: 34px 0 0; }

/* An odd number of specs leaves no empty cell behind in the two-column table. */
.smg-spec:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Archive pagination */
.smg-pagination { margin-top: 60px; }
.smg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.smg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-btn);
	font-size: 13px;
	font-weight: 700;
	color: var(--smg-navy);
	text-decoration: none;
}
.smg-pagination a.page-numbers:hover,
.smg-pagination a.page-numbers:focus {
	border-color: var(--smg-blue);
	color: var(--smg-blue);
}
.smg-pagination .page-numbers.current {
	background: var(--smg-navy);
	border-color: var(--smg-navy);
	color: var(--smg-white);
}
.smg-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 980px) {
	.smg-books { grid-template-columns: 1fr 1fr; gap: 24px; }
	.smg-book-layout { grid-template-columns: 1fr; gap: 36px; }
	.smg-book-media { max-width: 320px; }
}

@media (max-width: 620px) {
	.smg-books { grid-template-columns: 1fr; }
	.smg-book-layout { gap: 28px; }
	.smg-book-media { max-width: 260px; }
	.smg-specs { grid-template-columns: 1fr; }
	.smg-pagination { margin-top: 42px; }
}

/* 18. Primary navigation dropdown (Books) -------------------------------- */

.smg-nav-menu {
	position: relative;
	display: flex;
	align-items: center;
}
.smg-nav-dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 30;
	min-width: 200px;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: var(--smg-white);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	box-shadow: var(--smg-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
/* Open on hover, and on keyboard focus so the terms stay reachable. The
   :target rule opens the same panel from a link to #smg-books-menu, which
   keeps it usable where hover is not available. */
.smg-nav-menu:hover .smg-nav-dropdown,
.smg-nav-menu:focus-within .smg-nav-dropdown,
.smg-nav-menu:target .smg-nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
/* Invisible bridge across the gap, so the panel does not close on the way in. */
.smg-nav-dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.smg-nav-dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--smg-radius-btn);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--smg-navy);
	text-decoration: none;
	opacity: 1;
	white-space: nowrap;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.smg-nav-dropdown a:hover,
.smg-nav-dropdown a:focus {
	background: var(--smg-soft);
	color: var(--smg-blue);
	opacity: 1;
}

/* Mega panel: one column per taxonomy, each column headed by its label.
   The width is explicit so the absolutely positioned panel grows with its
   content instead of shrinking to the width of the nav item it hangs from. */
.smg-nav-mega {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(158px, max-content);
	width: max-content;
	max-width: min(92vw, 760px);
	min-width: 0;
	padding: 6px;
}
.smg-mega-col { padding: 8px 14px 10px; }
.smg-mega-col + .smg-mega-col { border-left: 1px solid var(--smg-line); }
.smg-mega-title {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--smg-muted);
}
.smg-mega-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 19. Process page (page-our-process.php) -------------------------------- */

/* Two-up card grid: the two working tracks. */
.smg-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

/* Small in-card link (design reference: card link in technical blue). */
.smg-card-link {
	display: inline-block;
	margin-top: 22px;
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.02em;
	color: var(--smg-blue);
	text-decoration: none;
	transition: color 0.18s ease;
}
.smg-card-link:hover,
.smg-card-link:focus { color: var(--smg-red); }
.smg-card .smg-tags { margin-top: 22px; }
.smg-card .smg-card-link { margin-top: 24px; }

/* Photograph slot: a real image keeps its replacement size honest. */
.smg-figure { margin: 0; }
.smg-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-media);
	box-shadow: var(--smg-shadow);
}
.smg-figure figcaption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--smg-muted);
}
.smg-dark .smg-figure img { border-color: rgba(255, 255, 255, 0.14); }

/* Steps inside a dark technical section: invert hairline and text. */
.smg-dark .smg-step { border-top-color: rgba(255, 255, 255, 0.16); }
.smg-dark .smg-step:last-child { border-bottom-color: rgba(255, 255, 255, 0.16); }
.smg-dark .smg-step-no { color: #A9C4E0; }
.smg-dark .smg-step strong { color: var(--smg-white); }
.smg-dark .smg-step p { color: var(--smg-dark-body); }

@media (max-width: 980px) {
	.smg-two { grid-template-columns: 1fr; gap: 24px; }
}

/* 20. Archives, filters and cards with photographs ----------------------- */

/* Filter chips row (archive pages): links, current item marked. */
.smg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 42px;
	padding: 0;
	list-style: none;
}
.smg-filter {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--smg-line);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--smg-body);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.smg-filter:hover,
.smg-filter:focus {
	border-color: var(--smg-blue);
	color: var(--smg-blue);
}
.smg-filter.is-active {
	background: var(--smg-navy);
	border-color: var(--smg-navy);
	color: var(--smg-white);
}

/* Photograph inside a card (product, case, article): fixed 4 / 3 frame. */
.smg-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-bottom: 1px solid var(--smg-line);
}

/* Small meta row under an archive card or article title. */
.smg-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--smg-muted);
}
.smg-meta-row span { display: inline-flex; gap: 6px; }

/* Customer quote on a case page. */
.smg-quote {
	margin: 0;
	padding-left: 18px;
	border-left: 2px solid var(--smg-red);
	font-size: 17px;
	line-height: 1.7;
	color: var(--smg-navy);
}
.smg-dark .smg-quote { color: var(--smg-white); }

/* Filter row that sits directly under a page hero. */
.smg-section-filters { padding: 42px 0 0; }

/* Light meta text on the navy hero. */
.smg-page-hero .smg-meta-row { color: rgba(255, 255, 255, 0.72); }

/* Tag chip that is a link. */
.smg-tags a { color: inherit; text-decoration: none; }
.smg-tags a:hover,
.smg-tags a:focus { color: var(--smg-blue); }

/* Table of contents inside an article. */
.smg-toc {
	margin: 0 0 34px;
	padding: 22px 24px;
	background: var(--smg-soft);
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
}
.smg-toc ol { margin: 10px 0 0; padding-left: 20px; list-style: decimal; }
.smg-toc li { font-size: 14px; line-height: 1.75; }
.smg-toc a { color: var(--smg-blue); text-decoration: none; }
.smg-toc a:hover,
.smg-toc a:focus { text-decoration: underline; }

/* FAQ item: native details / summary, no JavaScript. */
.smg-faq-item {
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-card);
	background: var(--smg-white);
}
.smg-faq-item + .smg-faq-item { margin-top: 12px; }
.smg-faq-q {
	padding: 20px 24px;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.45;
	color: var(--smg-navy);
	cursor: pointer;
	list-style: none;
}
.smg-faq-q::-webkit-details-marker { display: none; }
.smg-faq-a { padding: 0 24px 22px; color: var(--smg-body); }
.smg-faq-a p { max-width: none; }

/* Embedded media stays inside its column. */
.smg-dark iframe,
.smg-figure iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Card action row sits at the bottom of equal-height cards. */
.smg-card .smg-actions { margin-top: auto; }

/* Tag chips sitting on a soft section need a white chip to stay readable. */
.smg-soft .smg-tags li { background: var(--smg-white); }

/* 21. Navigation panels and spacing -------------------------------------- */

/* Single-column panel (About, Support): a plain list of pages. */
.smg-nav-dropdown.smg-nav-simple { min-width: 240px; }
.smg-nav-dropdown.smg-nav-simple a { padding: 10px 12px; }

/* Six primary items plus the CTA: tighten the row before it wraps. */
@media (max-width: 1240px) {
	.smg-nav-links { gap: 21px; }
	.smg-nav-links > a,
	.smg-nav-links > .smg-nav-menu > a { font-size: 12.5px; }
	.smg-nav-cta { padding: 0 15px; }
}

/* 22. Mobile navigation (checkbox and details, no JavaScript) ------------- */

/* Utility: text for assistive technology only. */
.smg-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;
}

.smg-mobile-toggle,
.smg-mobile-toggle-label,
.smg-mobile-nav { display: none; }

@media (max-width: 980px) {
	.smg-mobile-toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.smg-mobile-toggle-label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px;
		height: 42px;
		margin-left: auto;
		padding: 0 13px;
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: var(--smg-radius-btn);
		cursor: pointer;
	}
	.smg-mobile-toggle-label span {
		display: block;
		height: 2px;
		background: var(--smg-white);
	}
	.smg-mobile-toggle:focus-visible + .smg-mobile-toggle-label {
		outline: 3px solid var(--smg-white);
		outline-offset: 3px;
	}

	.smg-mobile-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		padding: 8px 0 28px;
		background: var(--smg-navy);
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
	.smg-mobile-toggle:checked ~ .smg-mobile-nav { display: block; }

	.smg-mobile-link,
	.smg-mobile-group > summary {
		display: block;
		padding: 15px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 15px;
		font-weight: 650;
		line-height: 1.4;
		color: var(--smg-white);
		text-decoration: none;
		cursor: pointer;
		list-style: none;
	}
	.smg-mobile-group > summary::-webkit-details-marker { display: none; }
	.smg-mobile-group[open] > summary { color: var(--smg-dark-body); }

	.smg-mobile-list {
		margin: 0 0 10px;
		padding: 0;
		list-style: none;
	}
	.smg-mobile-list a {
		display: block;
		padding: 11px 0 11px 16px;
		font-size: 14px;
		line-height: 1.5;
		color: var(--smg-dark-body);
		text-decoration: none;
	}
	.smg-mobile-list a:hover,
	.smg-mobile-list a:focus { color: var(--smg-white); }

	.smg-mobile-cta {
		width: 100%;
		margin-top: 22px;
	}
}

/* On the smallest screens the header CTA is dropped: the mobile menu ends
   with the same call to action, full width. */
@media (max-width: 620px) {
	.smg-nav-cta { display: none; }
	.smg-nav { gap: 14px; }
}

/* 23. Image-led sections ------------------------------------------------- */

/* Full-bleed photograph band. The image sits behind a navy wash so a short
   caption stays readable, and background-size holds the crop at any width. */
.smg-band {
	position: relative;
	display: flex;
	align-items: flex-end;
	aspect-ratio: 2 / 1;
	min-height: 440px;
	padding: 72px 0 64px;
	color: var(--smg-white);
	background-color: var(--smg-navy);
	background-size: cover;
	background-position: center;
}
.smg-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 35, 66, 0.2) 0%, rgba(10, 35, 66, 0.78) 100%);
}
.smg-band > .smg-container { position: relative; z-index: 1; }
.smg-band-title {
	margin: 14px 0 0;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--smg-white);
}
.smg-band-text {
	max-width: 60ch;
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--smg-dark-body);
}

/* Hero with a photograph behind the brand gradient. */
.smg-hero-has-media {
	background-size: cover;
	background-position: center;
}

/* Three-up gallery: same crop and radius on every tile. */
.smg-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.smg-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--smg-line);
	border-radius: var(--smg-radius-media);
}

@media (max-width: 980px) {
	.smg-band { min-height: 360px; padding: 56px 0 48px; }
}

@media (max-width: 620px) {
	.smg-band { min-height: 300px; }
	.smg-gallery { grid-template-columns: 1fr 1fr; }
}