/* =============================================================================
	Salt Grain Theme — Main Stylesheet
	CSS custom properties are injected dynamically from brand.config.php
	via sg_css_vars() in wp_head. All colour references use var(--sg-*).
	============================================================================= */

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--sg-font-body);
	color: var(--sg-night);
	background: var(--sg-paper);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

a {
	color: inherit;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* ── Layout Utilities ──────────────────────────────────────────────────────── */
.sg-container {
	max-width: var(--sg-page-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sg-gutter);
	padding-right: var(--sg-gutter);
}

.sg-section {
	position: relative;
	overflow: hidden;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
.sg-display {
	font-family: var(--sg-font-display);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 0.95;
}

.sg-mono {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sg-eyebrow {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sg-ink-60);
	display: flex;
	align-items: center;
	gap: 10px;
}

.sg-eyebrow .sg-dot {
	width: 7px;
	height: 7px;
	background: var(--sg-orange);
	border-radius: 50%;
	flex-shrink: 0;
}

.sg-lede {
	font-family: var(--sg-font-body);
	font-size: 20px;
	line-height: 1.55;
	color: var(--sg-ink-80);
	text-wrap: pretty;
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.sg-breadcrumbs {
	padding: 20px 0 14px;
	border-bottom: 1px solid var(--sg-ink-08);
}

.sg-breadcrumbs__list {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sg-ink-60);
}

.sg-breadcrumbs__list a {
	color: var(--sg-ink-60);
	text-decoration: none;
	transition: color 0.15s;
}

.sg-breadcrumbs__list a:hover {
	color: var(--sg-night);
}

.sg-breadcrumbs__current {
	color: var(--sg-night);
	font-weight: 500;
}

.sg-breadcrumbs__sep {
	color: var(--sg-ink-30);
	margin: 0 4px;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

/* Skip link */
.sg-skip-link {
	position: absolute;
	left: -9999px;
	top: 6px;
	z-index: 9999;
	padding: 8px 16px;
	background: var(--sg-night);
	color: var(--sg-paper);
	font-family: var(--sg-font-mono);
	font-size: 12px;
	border-radius: 4px;
	text-decoration: none;
}

.sg-skip-link:focus {
	left: 6px;
}

/* Nav bar */
.sg-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--sg-paper);
	transition: box-shadow 0.2s;
}

.sg-nav.is-scrolled {
	box-shadow: 0 1px 0 rgba(4, 17, 24, 0.1), 0 4px 24px rgba(4, 17, 24, 0.06);
}

.sg-nav__inner {
	display: flex;
	align-items: center;
	gap: 0;
	height: var(--sg-nav-height, 68px);
	padding: 0 var(--sg-gutter);
	max-width: var(--sg-page-max);
	margin: 0 auto;
	position: relative;
}

.sg-nav__logo {
	flex-shrink: 0;
	margin-right: auto;
	text-decoration: none;
}

.sg-nav__logo img {
	display: block;
}

/* Primary nav list — visibility controlled by header.php inline style */
.sg-nav__primary {
	display: flex;
	align-items: center;
	height: 100%;
}

.sg-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

/* Nav items */
.sg-nav__item {
	position: static;
	height: 100%;
	display: flex;
	align-items: center;
}

.sg-nav__item-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	font-family: var(--sg-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--sg-night);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s;
	white-space: nowrap;
}

.sg-nav__item-btn:hover {
	background: rgba(4, 17, 24, 0.06);
}

.sg-nav__item-btn:focus-visible {
	outline: 2px solid var(--sg-orange-text);
	outline-offset: 2px;
}

.sg-nav__item-label.is-current {
	color: var(--sg-orange);
}

.sg-nav__item.is-current > .sg-nav__item-btn {
	color: var(--sg-orange);
}

.sg-nav__chevron {
	flex-shrink: 0;
	transition: transform 0.2s;
	color: var(--sg-ink-60);
}

.sg-nav__item-btn[aria-expanded="true"] .sg-nav__chevron {
	transform: rotate(180deg);
}

.sg-nav__item-btn[aria-expanded="true"] {
	background: rgba(4, 17, 24, 0.06);
}

/* CTA button */
.sg-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 16px;
	padding: 10px 18px;
	background: var(--sg-night);
	color: var(--sg-paper);
	font-family: var(--sg-font-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s;
	flex-shrink: 0;
}

.sg-nav__cta:hover {
	background: var(--sg-forest);
	color: var(--sg-paper);
}

.sg-nav__cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: var(--sg-orange);
	border-radius: 50%;
	font-size: 11px;
	color: var(--sg-night);
	flex-shrink: 0;
}

/* CTA rendered as the last menu item (desktop nav) */
.sg-nav__item--cta .sg-nav__cta {
	margin-left: 0;
}

/* CTA rendered as the last drawer item (mobile nav) */
.sg-drawer__item--cta .sg-nav__cta {
	width: calc(100% - 48px);
	justify-content: center;
	margin: 8px 24px 16px;
	padding: 14px 24px;
}

/* Hamburger — visibility controlled by header.php inline style */
.sg-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
	margin-left: 8px;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 4px;
}

.sg-nav__toggle:focus-visible {
	outline: 2px solid var(--sg-orange-text);
	outline-offset: 2px;
}

.sg-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--sg-night);
	border-radius: 2px;
	transition: transform 0.2s, opacity 0.2s, width 0.2s;
	transform-origin: center;
}

/* Animate to X when open */
.sg-nav--drawer-open .sg-nav__toggle .sg-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sg-nav--drawer-open .sg-nav__toggle .sg-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}

.sg-nav--drawer-open .sg-nav__toggle .sg-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	width: 22px;
}

/* Backdrop */
.sg-nav__backdrop {
	position: fixed;
	inset: var(--sg-nav-height, 68px) 0 0 0;
	background: rgba(4, 17, 24, 0.45);
	backdrop-filter: blur(4px);
	z-index: 190;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}

.sg-nav__backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Standard Dropdown ─────────────────────────────────────────────────── */
.sg-dropdown {
	position: absolute;
	top: calc(100% + 1px);
	left: 0;
	min-width: 220px;
	background: var(--sg-paper);
	border: 1px solid rgba(4, 17, 24, 0.1);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(4, 17, 24, 0.12);
	padding: 8px;
	z-index: 210;
	animation: sg-dropdown-in 0.15s ease;
}

.sg-dropdown[hidden] {
	display: none;
}

@keyframes sg-dropdown-in {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sg-dropdown__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-dropdown__item { }

.sg-dropdown__item a,
.sg-dropdown__item button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	font-family: var(--sg-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--sg-night);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 5px;
	transition: background 0.12s;
}

.sg-dropdown__item a:hover,
.sg-dropdown__item button:hover {
	background: rgba(4, 17, 24, 0.06);
}

.sg-dropdown__item.is-current a {
	color: var(--sg-orange);
}

/* ── Mega Menu ─────────────────────────────────────────────────────────── */
.sg-mega__panel {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--sg-nav-height, 68px);
	z-index: 210;
	background: var(--sg-paper);
	border-top: 1px solid rgba(4, 17, 24, 0.08);
	border-bottom: 1px solid rgba(4, 17, 24, 0.08);
	box-shadow: 0 12px 40px rgba(4, 17, 24, 0.12);
	padding: 40px 0;
	animation: sg-mega-in 0.18s ease;
}

.sg-mega__panel[hidden] {
	display: none;
}

@keyframes sg-mega-in {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Grid layouts */
.sg-mega__grid {
	display: grid;
	gap: 32px;
	align-items: start;
}

.sg-mega__grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

.sg-mega__grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.sg-mega__grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

/* When promo is enabled, last item in grid is the promo tile */
.sg-mega__promo {
	border-radius: 8px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
}

.sg-mega__promo-headline {
	font-family: var(--sg-font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.15;
	margin-bottom: 12px;
}

.sg-mega__promo-body {
	font-family: var(--sg-font-body);
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.85;
	margin: 0 0 20px;
}

.sg-mega__promo-cta {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	opacity: 0.85;
}

.sg-mega__promo-cta:hover {
	opacity: 1;
}

/* Mega menu items */
.sg-mega__item {
	list-style: none;
}

.sg-mega__link {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.12s;
}

.sg-mega__link:hover {
	background: rgba(4, 17, 24, 0.05);
}

.sg-mega__item.is-current .sg-mega__link {
	background: rgba(4, 17, 24, 0.05);
}

.sg-mega__link-inner {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sg-mega__icon {
	font-size: 20px;
	margin-bottom: 6px;
	display: block;
}

.sg-mega__link-label {
	font-family: var(--sg-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--sg-night);
	line-height: 1.2;
}

.sg-mega__desc {
	font-family: var(--sg-font-body);
	font-size: 13px;
	color: var(--sg-ink-60);
	line-height: 1.4;
}

.sg-mega__item.is-current .sg-mega__link-label {
	color: var(--sg-orange);
}

/* Section headings inside mega (optional — future use via walker) */
.sg-mega__section-title {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--sg-ink-60);
	padding: 0 12px;
	margin-bottom: 8px;
}

/* ── Mobile Drawer ─────────────────────────────────────────────────────── */
.sg-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 100vw);
	background: var(--sg-paper);
	z-index: 300;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.sg-drawer[aria-hidden="false"] {
	transform: translateX(0);
}

.sg-drawer__overlay {
	position: fixed;
	inset: 0;
	background: rgba(4, 17, 24, 0.5);
	z-index: 299;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.sg-drawer__overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.sg-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sg-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 68px;
	border-bottom: 1px solid rgba(4, 17, 24, 0.1);
	flex-shrink: 0;
}

.sg-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(4, 17, 24, 0.15);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	color: var(--sg-night);
	transition: background 0.15s;
}

.sg-drawer__close:hover {
	background: rgba(4, 17, 24, 0.06);
}

.sg-drawer__close:focus-visible {
	outline: 2px solid var(--sg-orange-text);
	outline-offset: 2px;
}

.sg-drawer__nav {
	flex: 1;
	padding: 8px 0;
}

.sg-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sg-drawer__item {
	border-bottom: 1px solid rgba(4, 17, 24, 0.07);
}

.sg-drawer__item-btn,
.sg-drawer__item-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 24px;
	font-family: var(--sg-font-body);
	font-size: 17px;
	font-weight: 500;
	color: var(--sg-night);
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s;
}

.sg-drawer__item-btn:hover,
.sg-drawer__item-link:hover {
	background: rgba(4, 17, 24, 0.04);
}

.sg-drawer__item.is-current > .sg-drawer__item-link {
	color: var(--sg-orange);
}

.sg-drawer__chevron {
	transition: transform 0.2s;
	flex-shrink: 0;
}

.sg-drawer__item-btn[aria-expanded="true"] .sg-drawer__chevron {
	transform: rotate(180deg);
}

/* Sub-menu */
.sg-drawer__sub {
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(4, 17, 24, 0.03);
}

.sg-drawer__sub[hidden] {
	display: none;
}

.sg-drawer__item--child .sg-drawer__item-btn,
.sg-drawer__item--child .sg-drawer__item-link {
	padding-left: 40px;
	font-size: 15px;
	font-weight: 400;
	color: var(--sg-ink-80);
}

.sg-drawer__footer {
	padding: 20px 24px;
	border-top: 1px solid rgba(4, 17, 24, 0.1);
	flex-shrink: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.sg-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 28px;
	border-radius: 999px;
	font-family: var(--sg-font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.sg-btn--primary {
	background: var(--sg-night);
	color: var(--sg-paper);
}

.sg-btn--primary:hover {
	background: var(--sg-forest);
}

.sg-btn--accent {
	background: var(--sg-orange);
	color: var(--sg-night);
}

.sg-btn--accent:hover {
	background: var(--sg-wattle);
}

.sg-btn--outline {
	background: transparent;
	color: var(--sg-night);
	border: 1.5px solid var(--sg-night);
}

.sg-btn--outline:hover {
	background: var(--sg-night);
	color: var(--sg-paper);
}

.sg-btn__arrow {
	width: 32px;
	height: 32px;
	background: var(--sg-orange);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--sg-night);
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Tags / Pills ────────────────────────────────────────────────────────────── */
.sg-tag {
	display: inline-block;
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 7px 14px;
	border: 1px solid currentcolor;
	border-radius: 999px;
	opacity: 0.85;
}

/* ── Module: Hero ────────────────────────────────────────────────────────────── */
.sg-module-hero {
	padding: 24px 0 100px;
	background: var(--sg-paper);
}

.sg-module-hero__headline {
	font-family: var(--sg-font-display);
	font-size: clamp(72px, 9.5vw, 138px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--sg-night);
	text-wrap: balance;
	margin: 0;
}

.sg-module-hero__script {
	font-family: var(--sg-font-script);
	font-weight: 400;
	font-size: clamp(90px, 13vw, 196px);
	color: var(--sg-orange);
	display: inline-block;
	transform: rotate(-3deg);
	line-height: 0.82;
}

.sg-module-hero__meta-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
	margin-top: 72px;
	align-items: end;
}

.sg-module-hero__image-wrap {
	margin-top: 72px;
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 21 / 8;
}

.sg-module-hero__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sg-module-hero__image-quote {
	position: absolute;
	left: 40px;
	bottom: 36px;
	right: 40px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

/* ── Module: Phase Strip ─────────────────────────────────────────────────────── */
.sg-module-phase-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 64px;
}

.sg-phase-item {
	padding: 26px 22px 24px;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* ── Module: Services Grid ───────────────────────────────────────────────────── */
.sg-module-services-grid {
	padding: 120px 0;
	background: var(--sg-night);
	color: var(--sg-paper);
}

.sg-services-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-top: 64px;
}

.sg-service-card {
	background: rgba(250, 250, 242, 0.04);
	border: 1px solid rgba(250, 250, 242, 0.12);
	padding: 32px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.sg-service-card__corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 86px;
	height: 86px;
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* ── Module: Approach Grid ───────────────────────────────────────────────────── */
.sg-module-approach-grid {
	padding: 120px 0;
}

.sg-approach-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--sg-night);
	background: var(--sg-paper);
	border-radius: 8px;
	overflow: hidden;
	margin-top: 64px;
}

.sg-approach-step {
	padding: 28px 24px 36px;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.sg-approach-step:not(:last-child) {
	border-right: 1px solid var(--sg-night);
}

/* ── Module: Case Feature ────────────────────────────────────────────────────── */
.sg-module-case-feature {
	padding: 120px 0;
	color: var(--sg-paper);
}

/* ── Module: Pull Quote ──────────────────────────────────────────────────────── */
.sg-module-pull-quote {
	padding: 120px 0;
}

.sg-pull-quote__text {
	font-family: var(--sg-font-display);
	font-size: clamp(32px, 4.5vw, 56px);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.025em;
	text-wrap: balance;
	margin: 0;
}

.sg-pull-quote__apos {
	height: auto;
}

/* ── Module: CTA Band ────────────────────────────────────────────────────────── */
.sg-module-cta-band {
	padding: 140px 0;
	text-align: center;
}

.sg-module-cta-band--compact {
	padding: 100px 0;
}

.sg-module-cta-band .sg-btn {
	margin-top: 36px;
}

.sg-cta-headline {
	font-family: var(--sg-font-display);
	font-size: clamp(72px, 9vw, 108px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* ── Module: Team Grid ───────────────────────────────────────────────────────── */
.sg-module-team-grid {
	padding: 100px 0;
}

.sg-team-grid {
	display: grid;
	gap: 20px;
	margin-top: 48px;
}

.sg-team-grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.sg-team-grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.sg-team-grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.sg-team-tile {
	aspect-ratio: 4 / 5;
}

/* ── Module: Metrics Row ─────────────────────────────────────────────────────── */
.sg-module-metrics-row {
	padding: 100px 0;
}

.sg-metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	margin-top: 48px;
}

.sg-metric-item {
	padding: 40px 32px;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sg-metric-value {
	font-family: var(--sg-font-display);
	font-size: clamp(48px, 5vw, 68px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.sg-metric-label {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ── Module: Text + Sidebar ──────────────────────────────────────────────────── */
.sg-module-text-sidebar {
	padding: 100px 0;
}

.sg-text-sidebar-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 80px;
	align-items: start;
}

.sg-text-sidebar-grid--reversed {
	grid-template-columns: 1fr 2fr;
}

.sg-text-sidebar-grid--reversed .sg-text-sidebar__main {
	order: 2;
}

.sg-text-sidebar-grid--reversed .sg-text-sidebar__aside {
	order: 1;
}

/* ── Module: Service Block ───────────────────────────────────────────────────── */
.sg-module-service-block {
	padding: 80px 0;
}

.sg-service-block-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 64px;
	align-items: start;
}

.sg-service-block__sticky {
	position: sticky;
	top: 100px;
}

/* ── Module: FAQ Accordion ───────────────────────────────────────────────────── */
.sg-module-faq {
	padding: 100px 0;
}

.sg-faq-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 80px;
	align-items: start;
}

.sg-faq__sticky {
	position: sticky;
	top: 90px;
}

.sg-faq-item {
	border-bottom: 1px solid var(--sg-ink-14);
}

.sg-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
}

.sg-faq-item summary::-webkit-details-marker {
	display: none;
}

.sg-faq-item__q {
	font-family: var(--sg-font-display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.sg-faq-item__icon {
	width: 32px;
	height: 32px;
	background: var(--sg-night);
	color: var(--sg-paper);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	transition: transform 0.2s;
}

details[open] .sg-faq-item__icon {
	transform: rotate(45deg);
}

.sg-faq-item__a {
	font-family: var(--sg-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--sg-ink-80);
	padding: 0 0 24px;
	max-width: 640px;
	text-wrap: pretty;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.sg-footer {
	padding: 72px 0 36px;
	background: var(--sg-night);
	color: rgba(250, 250, 242, 0.72);
	font-family: var(--sg-font-body);
	font-size: 13px;
}

.sg-footer__signoff {
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(250, 250, 242, 0.12);
}

.sg-footer__signoff-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: end;
}

.sg-footer__signoff-headline {
	font-family: var(--sg-font-display);
	font-weight: 300;
	font-size: clamp(40px, 5.5vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.025em;
	color: var(--sg-paper);
	max-width: 1000px;
	padding-bottom: 16px;
}

.sg-footer__signoff-cta {
	text-align: right;
	padding-bottom: 8px;
}

.sg-footer__columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 48px;
	padding: 40px 0;
}

.sg-footer__brand {
	max-width: 320px;
}

.sg-footer__logo-link {
	display: inline-block;
	margin-bottom: 20px;
}

.sg-footer__tagline {
	margin-bottom: 20px;
	letter-spacing: .12em;
}

.sg-footer__email {
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	display: block;
	margin-bottom: 8px;
	transition: opacity .15s;
}

.sg-footer__email:hover {
	opacity: .75;
}

.sg-footer__address {
	font-size: 13px;
	opacity: .5;
	margin: 0;
	line-height: 1.5;
}

.sg-footer__social {
	display: flex;
	gap: 12px;
	margin-top: 24px;
	flex-wrap: wrap;
}

.sg-footer__social a {
	color: inherit;
	text-decoration: none;
	transition: color .15s;
}

.sg-footer__social a:hover {
	color: var(--sg-paper);
}

.sg-footer__nav-heading {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--sg-orange);
	margin-bottom: 16px;
}

.sg-footer__nav-links,
.sg-footer__legal-menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.sg-footer__nav-links a,
.sg-footer__legal-menu a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.sg-footer__nav-links a:hover,
.sg-footer__legal-menu a:hover {
	color: var(--sg-paper);
}

.sg-footer__legal {
	padding-top: 20px;
	border-top: 1px solid rgba(250, 250, 242, 0.12);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	font-size: 12px;
	opacity: 0.55;
	font-family: var(--sg-font-mono);
	letter-spacing: 0.05em;
}

.sg-footer__legal-menu {
	flex-direction: row;
	gap: 16px;
}

.sg-footer__legal-text,
.sg-footer__legal-meta {
	white-space: nowrap;
}

/* ── Module: Case Tile Grid ──────────────────────────────────────────────────── */
.sg-module-case-tile-grid {
	padding: 40px 0 120px;
}

.sg-case-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: minmax(280px, auto);
	gap: 16px;
}

.sg-case-tile {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	min-height: 280px;
	border-radius: 4px;
}

.sg-case-tile--featured {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 560px;
}

.sg-case-tile--featured .sg-case-tile__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

/* ── Module: Journal Grid ────────────────────────────────────────────────────── */
.sg-module-journal-grid {
	padding: 40px 0 120px;
}

.sg-journal-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: auto;
	gap: 16px;
}

.sg-journal-card--featured {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 560px;
}

/* ── Module: Contact Block ───────────────────────────────────────────────────── */
.sg-module-contact-block {
	padding: 72px 0 100px;
}

.sg-contact-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 80px;
	margin-top: 80px;
	align-items: start;
}

.sg-contact-field {
	border: none;
	border-bottom: 1.5px solid var(--sg-night);
	background: transparent;
	padding: 14px 0 12px;
	font-family: var(--sg-font-body);
	font-size: 17px;
	color: var(--sg-night);
	width: 100%;
	outline: none; /* replaced by a visible :focus-visible ring below */
}

.sg-contact-field::placeholder {
	color: var(--sg-ink-30);
}

.sg-contact-field:focus {
	border-bottom-color: var(--sg-night);
}

/* ── Page Hero (inner pages) ─────────────────────────────────────────────────── */
.sg-page-hero {
	padding: 24px 0 60px;
}

.sg-page-hero__headline {
	font-family: var(--sg-font-display);
	font-size: clamp(72px, 9vw, 132px);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.03em;
	color: var(--sg-night);
	text-wrap: balance;
	margin: 0;
}

.sg-page-hero__script {
	font-family: var(--sg-font-script);
	font-weight: 400;
	color: var(--sg-orange);
	display: inline-block;
	transform: rotate(-3deg);
	line-height: 0.8;
}

/* ══════════════════════════════════════════════════════════════════════════════
	RESPONSIVE — single authoritative block
	Breakpoints:
	≤1024px  large tablet / small desktop
	≥1025px  enforce desktop nav always
	≤860px   tablet
	≤560px   mobile phone
	══════════════════════════════════════════════════════════════════════════════ */

/* ── ≤1024px ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

	/* Grids — 2-col */
	.sg-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-case-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sg-journal-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* BUGFIX: grid-row must be reset as well. A tile spanning 2 of 2 columns AND
	2 rows leaves an entire empty grid row beside it. */
	.sg-case-tile--featured,
	.sg-journal-card--featured {
		grid-column: span 2;
		grid-row: span 1;
	}

	.sg-module-phase-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* Nav visibility is controlled entirely by header.php inline style block
	which reads the Header Settings and outputs !important rules with the
	correct breakpoint. Do NOT add nav display rules here. */

/* ── ≤860px tablet ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {

	/* Hero */
	.sg-module-hero {
		padding: 48px 0 60px;
	}

	.sg-module-hero__image-wrap {
		margin-top: 40px;
		aspect-ratio: 16 / 7;
	}

	.sg-module-hero__meta-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Phase strip */
	.sg-module-phase-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Values / Approach */
	.sg-approach-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sg-approach-step:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid var(--sg-night);
	}

	.sg-values-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.sg-approach-steps--4col,
	.sg-approach-steps--3col {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Metrics, team */
	.sg-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-team-grid--cols-3,
.sg-team-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Text sidebar */
	.sg-text-sidebar-grid,
	.sg-text-sidebar-grid--reversed {
		grid-template-columns: 1fr;
	}

	.sg-text-sidebar-grid--reversed .sg-text-sidebar__main {
		order: 1;
	}

	.sg-text-sidebar-grid--reversed .sg-text-sidebar__aside {
		order: 2;
	}

	/* Service blocks, FAQ, contact */
	.sg-service-block-grid {
		grid-template-columns: 1fr;
	}

	.sg-service-block__sticky {
		position: static;
	}

	.sg-faq-grid {
		grid-template-columns: 1fr;
	}

	.sg-contact-grid {
		grid-template-columns: 1fr;
	}

	/* Case feature */
	.sg-case-feature-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	/* Case study single */
	.sg-cs-meta-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 40px 0;
	}

	.sg-cs-metrics-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sg-cs-metric-card {
		min-height: 160px;
		padding: 28px 24px;
	}

	.sg-cs-nav-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.sg-cs-nav-item--next {
		text-align: left;
	}

	/* Tile grids — single col on tablet */
	.sg-case-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.sg-case-tile--featured {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 320px;
	}

	.sg-journal-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.sg-journal-card--featured {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 320px;
	}

	/* Footer */
	.sg-footer__columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sg-footer__signoff-inner {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	.sg-footer__signoff-cta {
		margin-top: 16px;
	}

	.sg-footer__signoff-inner > div:last-child {
		text-align: left !important;
	}

	/* Journal post layout */
	.sg-post-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sg-post-toc {
		position: static;
		margin-bottom: 40px;
		padding-bottom: 32px;
		border-bottom: 1px solid var(--sg-ink-08);
	}

	.sg-post-author-card {
		grid-template-columns: 80px 1fr;
		gap: 20px;
	}

	.sg-post-author-card__cta {
		display: none;
	}

	.sg-related-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	/* Author/related cards */
	.sg-author-card {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	/* CTA */
	.sg-cta-headline {
		font-size: clamp(44px, 9vw, 72px) !important;
	}
}

/* ── ≤560px mobile ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {

	/* ── Body / global ── */

	/* NOTE: `overflow-x: hidden` was removed here. It masked real overflow by
	clipping text, and it makes <body> a scroll container, which silently
	breaks every `position: sticky` descendant (.sg-post-toc,
	.sg-service-block__sticky, .sg-faq__sticky). Overflow is now fixed at the
	source: fluid clamp() floors + overflow-wrap. See the block at the end of
	this file. */

	/* Reduce all section padding on mobile */
	.sg-module-approach-grid,
	.sg-module-services-grid,
	.sg-module-phase-strip,
	.sg-module-case-feature,
	.sg-module-pull-quote,
	.sg-module-cta-band,
	.sg-module-metrics-row,
	.sg-module-team-grid,
	.sg-module-contact-block,
	.sg-module-faq-accordion,
	.sg-module-text-sidebar,
	.sg-module-service-block,
	.sg-module-case-tile-grid,
	.sg-module-journal-grid,
	.sg-module-page-hero,
	.sg-cs-cta-section,
	.sg-post-related,
	.sg-post-cta {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}

	.sg-module-hero {
		padding: 28px 0 36px;
	}

	.sg-module-hero__image-wrap {
		margin-top: 24px;
		aspect-ratio: 16 / 9;
	}

	.sg-module-hero__headline {
		font-size: clamp(44px, 11vw, 64px);
		letter-spacing: -1.5px;
	}

	.sg-module-hero__script {
		font-size: clamp(54px, 15vw, 80px);
	}

	/* Hero image quote — stack, hide badge */
	.sg-module-hero__image-quote {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px !important;
		left: 16px !important;
		right: 16px !important;
		bottom: 16px !important;
	}

	.sg-module-hero__image-quote > div:first-child {
		max-width: 100% !important;
		padding: 12px 16px !important;
	}

	.sg-module-hero__image-quote > div:first-child p {
		font-size: 14px !important;
	}

	.sg-module-hero__image-quote > div:last-child:not(:first-child) {
		display: none !important;
	}

	/* ── Phase strip ── */
	.sg-module-phase-strip {
		grid-template-columns: 1fr !important;
	}

	/* ── Values grid ── */
	.sg-values-grid {
		grid-template-columns: 1fr !important;
	}

	.sg-values-grid__item {
		min-height: auto !important;
		border-right: none !important;
	}

	/* ── Approach steps ── */
	.sg-approach-steps--4col,
	.sg-approach-steps--3col,
	.sg-approach-steps--2col {
		grid-template-columns: 1fr !important;
	}

	.sg-approach-step {
		min-height: 0 !important;
		border-right: none !important;
		border-bottom: 1px solid var(--sg-night);
		padding: 20px 16px !important;
	}

	.sg-approach-step:last-child {
		border-bottom: none;
	}

	/* ── Metrics ── */
	.sg-metrics-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sg-team-grid--cols-2,
	.sg-team-grid--cols-3,
	.sg-team-grid--cols-4 {
		grid-template-columns: 1fr;
	}

	/* ── Case & journal tiles — single col ── */
	.sg-case-grid,
	.sg-journal-grid {
		grid-template-columns: 1fr !important;
		grid-auto-rows: auto !important;
	}

	.sg-case-tile--featured,
	.sg-journal-card--featured {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
		min-height: 240px !important;
	}

	/* ── Case feature ── */
	.sg-case-feature-grid {
		display: block !important;
	}

	.sg-case-feature-grid > div:first-child {
		margin-bottom: 32px;
	}

	.sg-case-feature-metrics {
		grid-template-columns: 1fr 1fr !important;
		margin: 0 !important;
	}

	.sg-case-feature-metrics > div {
		padding: 20px 16px !important;
		min-height: 120px !important;
	}

	.sg-case-feature-metrics > div > div:first-child {
		font-size: clamp(32px, 9vw, 48px) !important;
	}

	/* ── Filter bar — horizontal scroll ── */
	.sg-filter-bar {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.sg-filter-bar::-webkit-scrollbar {
		display: none;
	}

	.sg-filter-bar .sg-tag,
	.sg-filter-bar button {
		flex-shrink: 0;
	}

	/* ── Case study single ── */
	.sg-cs-meta-grid {
		padding: 24px 0;
		gap: 20px;
	}

	.sg-cs-metrics-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sg-cs-metric-card {
		min-height: 110px;
		padding: 18px 14px;
	}

	.sg-cs-metric-value {
		font-size: clamp(28px, 9vw, 44px) !important;
	}

	.sg-cs-cta-section {
		padding: 56px 0;
	}

	.sg-cs-nav-section {
		padding: 48px 0;
	}

	/* ── Journal post ── */
	.sg-post-hero {
		padding: 28px 0 24px;
	}

	.sg-post-hero__title {
		font-size: clamp(32px, 9vw, 52px) !important;
		letter-spacing: -1.5px !important;
	}

	.sg-post-hero__script {
		font-size: 1.15em !important;
	}

	.sg-post-hero__deck {
		font-size: 16px !important;
		margin-bottom: 32px;
	}

	.sg-post-hero__share {
		display: none;
	}

	.sg-post-hero__byline {
		justify-content: flex-start;
	}

	.sg-post-hero-image {
		padding: 0 0 40px;
	}

	.sg-post-hero-image__frame {
		height: clamp(180px, 50vw, 280px);
	}

	.sg-post-body-section {
		padding: 40px 0 60px;
	}

	.sg-post-layout {
		grid-template-columns: 1fr !important;
	}

	.sg-post-toc {
		display: none !important;
	}

	/* Article body typography — smaller on phone */
	.sg-post-body {
		font-size: 16px !important;
	}

	.sg-post-body h2 {
		font-size: 26px !important;
		margin-top: 40px !important;
	}

	.sg-post-body h3 {
		font-size: 20px !important;
	}

	/* Author card — stack */
	.sg-post-author-card {
		grid-template-columns: 1fr !important;
		text-align: center;
		padding: 24px 20px !important;
		gap: 16px !important;
	}

	.sg-post-author-card__avatar {
		width: 72px !important;
		height: 72px !important;
		font-size: 20px !important;
		margin: 0 auto;
	}

	.sg-post-author-card__cta {
		display: inline-block;
		margin-top: 4px;
	}

	/* Related cards — stack */
	.sg-related-grid {
		grid-template-columns: 1fr !important;
	}

	.sg-related-card {
		min-height: 200px;
	}

	.sg-post-cta {
		padding: 56px 0;
	}

	/* ── Footer ── */
	.sg-footer__columns {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sg-footer__legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.sg-footer__legal-menu {
		flex-direction: column;
		gap: 8px;
	}

	.sg-footer__signoff-headline {
		font-size: clamp(28px, 8vw, 44px) !important;
	}

	/* ── CTA band ── */
	.sg-cta-headline {
		font-size: clamp(36px, 10vw, 56px) !important;
	}

	.sg-module-cta-band .sg-container {
		text-align: left !important;
	}

	.sg-eyebrow {
		justify-content: flex-start !important;
	}

	/* ── Contact ── */
	.sg-contact-headline,
	.sg-module-contact-block h1 {
		font-size: clamp(36px, 10vw, 64px) !important;
		overflow-wrap: break-word;
	}

	/* ── Service blocks ── */
	.sg-service-block-grid h2 {
		font-size: clamp(28px, 8vw, 44px) !important;
	}

	/* ── Drawer ── */
	.sg-drawer {
		width: 100vw !important;
	}
}

/* ── Print ───────────────────────────────────────────────────────────────────── */
@media print {

	.sg-nav,
.sg-footer {
		display: none;
	}

	.sg-module-cta-band {
		display: none;
	}

	body {
		background: white;
		color: black;
	}
}

/* ── Case tile (work grid tiles) ─────────────────────────────────────────────── */
.sg-case-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: #fafaf2;
}

.sg-case-tile--featured {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 480px;
}

.sg-case-tile__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 28px;
}

.sg-case-tile--featured .sg-case-tile__inner {
	padding: 40px;
}

.sg-case-tile__eyebrow {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sg-case-tile__dot {
	width: 6px;
	height: 6px;
	background: currentcolor;
	border-radius: 50%;
	flex-shrink: 0;
}

.sg-case-tile__title {
	font-family: var(--sg-font-display);
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sg-case-tile--featured .sg-case-tile__title {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 600;
	-webkit-line-clamp: 4;
}

.sg-case-tile__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.sg-case-tile__tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.sg-case-tile__tag {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid rgba(250, 250, 242, 0.4);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.sg-case-tile__tag--more {
	background: rgba(250, 250, 242, 0.15);
	border-color: transparent;
}

.sg-case-tile__metric {
	font-family: var(--sg-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 45%;
	flex-shrink: 0;
}

.sg-case-tile--featured .sg-case-tile__metric {
	font-size: 22px;
	max-width: 50%;
}

/* Case tile responsive */
@media (max-width: 860px) {

	.sg-case-tile--featured {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 320px;
	}

	.sg-case-tile--featured .sg-case-tile__title {
		font-size: 32px;
	}

	.sg-case-tile--featured .sg-case-tile__metric {
		font-size: 20px;
	}
}

@media (max-width: 560px) {

	.sg-case-tile {
		min-height: 200px;
	}

	.sg-case-tile__inner {
		padding: 20px !important;
	}

	.sg-case-tile__title {
		font-size: 20px !important;
	}

	.sg-case-tile--featured .sg-case-tile__title {
		font-size: 24px !important;
	}

	.sg-case-tile__tags {
		display: none;
	} /* simplify on mobile */
	.sg-case-tile__metric {
		font-size: 14px !important;
	}
}


.sg-journal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 280px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

.sg-journal-card--featured {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 560px;
}

.sg-journal-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 24px;
}

.sg-journal-card--featured .sg-journal-card__inner {
	padding: 40px;
}

.sg-journal-card__meta {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sg-journal-card__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sg-journal-card__dot {
	width: 6px;
	height: 6px;
	background: currentcolor;
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-block;
}

.sg-journal-card__title {
	font-family: var(--sg-font-display);
	font-size: 22px;
	font-weight: 500;
	margin: 16px 0 12px;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.sg-journal-card--featured .sg-journal-card__title {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 600;
	margin-top: 0;
	-webkit-line-clamp: 4;
}

.sg-journal-card__excerpt {
	font-family: var(--sg-font-body);
	font-size: 16px;
	line-height: 1.55;
	opacity: 0.85;
	margin: 0 0 20px;
	max-width: 540px;
	text-wrap: pretty;
}

.sg-journal-card__bottom {
	margin-top: auto;
	padding-top: 16px;
}

.sg-journal-card__cta {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 500;
}

/* ── Journal card responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {

	.sg-journal-card--featured {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 320px;
	}

	.sg-journal-card--featured .sg-journal-card__title {
		font-size: 32px;
	}
}

@media (max-width: 560px) {

	.sg-journal-card {
		min-height: 220px;
	}

	.sg-journal-card--featured {
		min-height: 260px;
	}

	.sg-journal-card__inner {
		padding: 20px !important;
	}

	.sg-journal-card__title {
		font-size: 20px !important;
		letter-spacing: -0.3px;
	}

	.sg-journal-card--featured .sg-journal-card__title {
		font-size: 26px !important;
	}
}


.sg-post-hero {
	padding: 56px 0 48px;
	background: var(--sg-paper);
	border-bottom: 1px solid var(--sg-ink-08);
}

.sg-post-hero__inner {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}

.sg-post-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(4, 17, 24, 0.55);
	margin-bottom: 32px;
}

.sg-post-hero__back {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s;
}

.sg-post-hero__back:hover {
	color: var(--sg-night);
}

.sg-post-hero__cat {
	color: var(--sg-orange);
	text-decoration: none;
}

.sg-post-hero__sep {
	opacity: 0.4;
}

.sg-post-hero__title {
	font-family: var(--sg-font-display);
	font-size: clamp(38px, 6vw, 76px);
	line-height: 1;
	font-weight: 300;
	margin: 0 0 28px;
	letter-spacing: -2px;
	color: var(--sg-night);
	text-wrap: balance;
}

.sg-post-hero__script {
	font-family: var(--sg-font-script);
	font-size: 1.25em;
	font-style: normal;
	color: var(--sg-orange);
	font-weight: 400;
	display: inline-block;
	transform: rotate(-2deg);
	line-height: 0.75;
}

.sg-post-hero__deck {
	font-family: var(--sg-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.7vw, 21px);
	line-height: 1.4;
	letter-spacing: -0.3px;
	color: rgba(4, 17, 24, 0.75);
	margin: 0 0 44px;
	max-width: 760px;
	text-wrap: pretty;
}

.sg-post-hero__byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--sg-ink-08);
}

.sg-post-hero__author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.sg-post-hero__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sg-forest);
	color: var(--sg-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sg-font-display);
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
}

.sg-post-hero__author-name {
	font-family: var(--sg-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--sg-night);
}

.sg-post-hero__author-role {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(4, 17, 24, 0.5);
	margin-top: 3px;
}

.sg-post-hero__share {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sg-post-hero__share-label {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(4, 17, 24, 0.45);
	margin-right: 4px;
}

.sg-post-hero__share-btn {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 6px 12px;
	border: 1px solid var(--sg-night);
	border-radius: 999px;
	text-decoration: none;
	color: var(--sg-night);
	background: transparent;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.sg-post-hero__share-btn:hover {
	background: var(--sg-night);
	color: var(--sg-paper);
}

.sg-post-hero-image {
	padding: 0 0 60px;
	background: var(--sg-paper);
}

.sg-post-hero-image__frame {
	height: clamp(200px, 36vw, 460px);
	border-radius: 4px;
	overflow: hidden;
}

.sg-post-hero-image__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sg-post-body-section {
	padding: 72px 0 80px;
	background: var(--sg-paper);
}

.sg-post-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 72px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

.sg-post-toc {
	position: sticky;
	top: calc(var(--sg-nav-height, 68px) + 28px);
}

.sg-post-toc__label {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sg-orange);
	margin-bottom: 16px;
}

.sg-post-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sg-post-toc__link {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-family: var(--sg-font-body);
	font-size: 13px;
	line-height: 1.4;
	color: rgba(4, 17, 24, 0.5);
	text-decoration: none;
	transition: color 0.15s;
}

.sg-post-toc__link:hover,
.sg-post-toc__item.is-active .sg-post-toc__link {
	color: var(--sg-night);
	font-weight: 600;
}

.sg-post-toc__num {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	color: var(--sg-orange);
	letter-spacing: 1.2px;
	flex-shrink: 0;
}

.sg-post-author-section {
	padding: 0 0 80px;
	background: var(--sg-paper);
}

.sg-post-author-inner {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 var(--sg-gutter);
}

.sg-post-author-card {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	gap: 28px;
	align-items: center;
	padding: 32px;
	background: var(--sg-night);
	color: var(--sg-paper);
	border-radius: 8px;
	overflow: hidden;
}

.sg-post-author-card__avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--sg-forest);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sg-font-display);
	font-weight: 700;
	font-size: 24px;
	color: var(--sg-paper);
}

.sg-post-author-card__label {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sg-orange);
	margin-bottom: 8px;
}

.sg-post-author-card__name {
	font-family: var(--sg-font-display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.5px;
	margin-bottom: 6px;
}

.sg-post-author-card__bio {
	font-family: var(--sg-font-body);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	opacity: 0.7;
}

.sg-post-author-card__cta {
	font-family: var(--sg-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--sg-night);
	background: var(--sg-orange);
	padding: 12px 20px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}

.sg-post-related {
	padding: 80px 0 120px;
	border-top: 1px solid var(--sg-ink-08);
	background: var(--sg-paper);
}

.sg-post-related__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 40px;
	flex-wrap: wrap;
	gap: 16px;
}

.sg-post-related__eyebrow {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sg-orange);
	margin-bottom: 12px;
}

.sg-post-related__heading {
	font-family: var(--sg-font-display);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 300;
	letter-spacing: -1.5px;
	margin: 0;
	line-height: 1;
	text-wrap: balance;
	color: var(--sg-night);
}

.sg-post-related__script {
	font-family: var(--sg-font-script);
	font-size: clamp(40px, 5.5vw, 66px);
	font-style: normal;
	color: var(--sg-orange);
	font-weight: 400;
	display: inline-block;
	transform: rotate(-2deg);
	line-height: 0.8;
}

.sg-post-related__all {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: 10px 16px;
	border: 1.5px solid var(--sg-night);
	border-radius: 999px;
	text-decoration: none;
	color: var(--sg-night);
	white-space: nowrap;
}

.sg-related-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 280px;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

.sg-related-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 28px;
}

.sg-related-card__meta {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	opacity: 0.85;
	display: flex;
	align-items: center;
	gap: 6px;
}

.sg-related-card__dot {
	width: 6px;
	height: 6px;
	background: currentcolor;
	border-radius: 50%;
	flex-shrink: 0;
}

.sg-related-card__title {
	font-family: var(--sg-font-display);
	font-size: 22px;
	font-weight: 500;
	margin: 16px 0 12px;
	letter-spacing: -0.4px;
	line-height: 1.15;
}

.sg-related-card__cta {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 500;
}

.sg-post-cta {
	padding: 100px 0;
	text-align: center;
}

.sg-post-cta__eyebrow {
	justify-content: center;
	margin-bottom: 28px;
	color: var(--sg-ink-60);
}

.sg-post-cta__heading {
	font-family: var(--sg-font-display);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 300;
	letter-spacing: -2px;
	margin: 0 auto 40px;
	max-width: 860px;
	text-wrap: balance;
	line-height: 0.95;
	color: var(--sg-night);
}

.sg-post-cta__script {
	font-family: var(--sg-font-script);
	font-size: clamp(52px, 8vw, 108px);
	font-style: normal;
	color: var(--sg-orange);
	font-weight: 400;
	display: inline-block;
	transform: rotate(-3deg);
	line-height: 0.8;
}

/* ── Single Case Study ───────────────────────────────────────────────────────── */
.sg-cs-hero { }

.sg-cs-hero__title { }

/* Meta strip — lede + facts side by side */
.sg-cs-meta-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr;
	gap: 64px;
	align-items: start;
	padding: 56px 0;
}

.sg-cs-lede { }

.sg-cs-facts {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sg-cs-fact {
	padding: 14px 0;
	border-bottom: 1px solid rgba(4, 17, 24, 0.1);
}

.sg-cs-fact:first-child {
	padding-top: 0;
}

.sg-cs-fact dt {
	font-family: var(--sg-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(4, 17, 24, 0.5);
	margin-bottom: 4px;
}

.sg-cs-fact dd {
	margin: 0;
	font-family: var(--sg-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--sg-night);
}

.sg-cs-fact-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	padding-top: 12px;
}

/* Metrics strip */
.sg-cs-metrics-section {
	padding: 0;
}

.sg-cs-metrics-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
}

.sg-cs-metric-card {
	padding: 40px 32px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sg-cs-metric-value {
	font-family: var(--sg-font-display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 700;
	letter-spacing: -2px;
	line-height: 1;
}

.sg-cs-metric-label {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	opacity: 0.85;
	margin-top: 20px;
}

/* Next/Prev nav */
.sg-cs-nav-section {
	padding: 64px 0;
}

.sg-cs-nav-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.sg-cs-nav-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
}

.sg-cs-nav-item--next {
	text-align: right;
}

.sg-cs-nav-label {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(4, 17, 24, 0.5);
}

.sg-cs-nav-title {
	font-family: var(--sg-font-display);
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 400;
	letter-spacing: -0.5px;
	color: var(--sg-night);
	line-height: 1.2;
	transition: color 0.15s;
}

.sg-cs-nav-item:hover .sg-cs-nav-title {
	color: var(--sg-forest);
}

/* CTA section */
.sg-cs-cta-section {
	padding: 120px 0;
}


.sg-post-body h2 {
	font-family: var(--sg-font-display);
	font-size: 40px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.05;
	margin: 56px 0 24px;
	text-wrap: balance;
	color: var(--sg-night);
	scroll-margin-top: 100px;
}

.sg-post-body h3 {
	font-family: var(--sg-font-display);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.5px;
	line-height: 1.15;
	margin: 40px 0 16px;
	color: var(--sg-night);
	scroll-margin-top: 100px;
}

.sg-post-body p {
	margin: 0 0 20px;
}

.sg-post-body ul,
.sg-post-body ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.sg-post-body li {
	margin-bottom: 10px;
	line-height: 1.6;
}

.sg-post-body blockquote {
	margin: 36px 0;
	padding: 24px 28px;
	background: var(--sg-sand);
	border-left: 4px solid var(--sg-orange);
	font-family: var(--sg-font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.3px;
}

.sg-post-body blockquote p {
	margin: 0;
}

.sg-post-body a {
	color: var(--sg-forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sg-post-body a:hover {
	color: var(--sg-orange);
}

.sg-post-body img {
	border-radius: 4px;
	margin: 32px 0;
}

.sg-post-body hr {
	border: none;
	border-top: 1px solid var(--sg-ink-14);
	margin: 48px 0;
}

.sg-post-body > p:first-child::first-letter {
	font-family: var(--sg-font-display);
	font-size: 64px;
	font-weight: 700;
	letter-spacing: -2px;
	color: var(--sg-forest);
	float: left;
	line-height: 0.85;
	margin-right: 12px;
	margin-top: 6px;
}

@media (max-width: 860px) {

	.sg-post-body h2 {
		font-size: 28px;
	}

	.sg-post-body h3 {
		font-size: 22px;
	}
}

/* ── Gravity Forms — brand overrides ──────────────────────────────────── */
.gform_wrapper.gravity-theme {
	font-family: var(--sg-font-body);
	color: var(--sg-night);
}

.gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper.gravity-theme legend.gfield_label {
	font-family: var(--sg-font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(4, 17, 24, 0.6);
	margin-bottom: 6px;
}

.gform_wrapper.gravity-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	font-family: var(--sg-font-body);
	font-size: 17px;
	color: var(--sg-night);
	background: transparent;
	border: none;
	border-bottom: 1.5px solid var(--sg-night);
	border-radius: 0;
	padding: 14px 0 12px;
	box-shadow: none;
	outline: none;
	width: 100%;
	transition: border-color 0.15s;
	-webkit-appearance: none;
}

.gform_wrapper.gravity-theme input::placeholder,
.gform_wrapper.gravity-theme textarea::placeholder {
	color: rgba(4, 17, 24, 0.3);
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-bottom-color: var(--sg-night);
	box-shadow: none;
}

.gform_wrapper.gravity-theme input:focus-visible,
.gform_wrapper.gravity-theme select:focus-visible,
.gform_wrapper.gravity-theme textarea:focus-visible {
	outline: 2px solid var(--sg-night);
	outline-offset: 2px;
}

.gform_wrapper.gravity-theme .gfield {
	margin-bottom: 28px;
}

.gform_wrapper.gravity-theme .ginput_container,
.gform_wrapper.gravity-theme .gfield_description {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
}

.gform_wrapper.gravity-theme textarea {
	resize: vertical;
	min-height: 120px;
}

.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper.gravity-theme input.gform_button[type="submit"] {
	font-family: var(--sg-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--sg-paper);
	background: var(--sg-night);
	border: none;
	border-radius: 999px;
	padding: 18px 32px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	transition: background 0.15s;
	-webkit-appearance: none;
	width: auto;
}

.gform_wrapper.gravity-theme input.gform_button[type="submit"]:hover {
	background: var(--sg-forest);
}

.gform_wrapper.gravity-theme .gfield_error input,
.gform_wrapper.gravity-theme .gfield_error textarea,
.gform_wrapper.gravity-theme .gfield_error select {
	border-bottom-color: #c0392b;
}

.gform_wrapper.gravity-theme .validation_message,
.gform_wrapper.gravity-theme .gfield_error .gfield_label {
	color: #c0392b;
	font-size: 11px;
	font-family: var(--sg-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.gform_wrapper.gravity-theme .gform_validation_errors {
	background: none;
	border: 1.5px solid #c0392b;
	border-radius: 4px;
	padding: 16px 20px;
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #c0392b;
	margin-bottom: 32px;
}

.gform_confirmation_wrapper {
	font-family: var(--sg-font-display);
	font-size: 24px;
	font-weight: 400;
	color: var(--sg-night);
	padding: 40px 0;
	letter-spacing: -0.3px;
	line-height: 1.3;
}

.gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox,
.gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox li,
.gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio li {
	margin: 0;
}

.gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox li label,
.gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio li label {
	font-family: var(--sg-font-body);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border: 1.5px solid var(--sg-night);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.15s, color 0.15s;
	color: var(--sg-night);
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}

.gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox li input[type="checkbox"]:checked + label,
.gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio li input[type="radio"]:checked + label {
	background: var(--sg-orange);
	border-color: var(--sg-orange);
	color: var(--sg-night);
}

.gform_wrapper.gravity-theme .gfield--type-checkbox .gfield_checkbox li input[type="checkbox"],
.gform_wrapper.gravity-theme .gfield--type-radio .gfield_radio li input[type="radio"] {
	display: none;
}

.gform_wrapper.gravity-theme .gform_footer {
	padding: 8px 0 0;
	margin: 0;
	border: none;
}

/* ── Pagination ────────────────────────────────────────────────────────── */
.nav-links {
	display: flex;
	gap: 8px;
	margin-top: 64px;
	justify-content: center;
	font-family: var(--sg-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.nav-links a,
.nav-links span {
	padding: 8px 14px;
	border: 1.5px solid var(--sg-ink-14);
	border-radius: 999px;
	text-decoration: none;
	color: var(--sg-night);
	transition: background 0.15s, border-color 0.15s;
}

.nav-links .current {
	background: var(--sg-night);
	color: var(--sg-paper);
	border-color: var(--sg-night);
}

.nav-links a:hover {
	border-color: var(--sg-night);
	background: var(--sg-night);
	color: var(--sg-paper);
}


/* ══════════════════════════════════════════════════════════════════════════════
	REVIEW FIXES — appended 2026-08-01
	Placed last so these rules win over the earlier interleaved base rules.
	══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. sg_tile() layer styles (were missing entirely) ────────────────────────
	modules/module-loader.php emits .sg-tile / __image / __overlay / __inner and
	NO stylesheet defined them. Result: the overlay rendered in normal flow on top
	of the content, and the lazy-loaded background image had no dimensions so it
	never appeared. Affected the team grid and the contact sidebar card at every
	viewport width. */
.sg-tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

.sg-tile__image,
.sg-tile__overlay {
	position: absolute;
	inset: 0;
}

.sg-tile__image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sg-tile__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 28px;
}

@media (max-width: 560px) {

	.sg-tile__inner {
		padding: 20px;
	}
}

/* ── 2. Scroll lock (replaces body.style.overflow, which does not hold on iOS) */
html.sg-scroll-lock,
html.sg-scroll-lock body {
	overflow: hidden;
}

.sg-drawer__inner {
	overscroll-behavior: contain;
}

/* ── 3. Drawer visibility ─────────────────────────────────────────────────────
	header.php previously used `display: flex !important` at <=1024px, which
	overrides the UA `[hidden] { display: none }`. The closed drawer was therefore
	laid out, off-screen, with every link still tabbable and inside
	aria-hidden="true" — a WCAG 4.1.2 failure. visibility:hidden removes
	descendants from the tab order and still allows the transform transition. */
.sg-drawer[aria-hidden="true"] {
	visibility: hidden;
}

.sg-drawer[aria-hidden="false"] {
	visibility: visible;
}

/* ── 4. Filter bar active state (was styled nowhere, and defeated by inline
	styles on the buttons — clicking a filter gave no visual confirmation) ─── */
.sg-filter-bar [data-filter] {
	cursor: pointer;
	background: transparent;
	color: var(--sg-night);
	border: 1.5px solid var(--sg-ink-14);
}

.sg-filter-bar [data-filter]:hover {
	border-color: var(--sg-night);
}

.sg-filter-bar [data-filter].is-active,
.sg-filter-bar [data-filter][aria-pressed="true"] {
	background: var(--sg-night) !important;
	color: var(--sg-paper) !important;
	border-color: var(--sg-night) !important;
}

/* ── 5. Tap targets ───────────────────────────────────────────────────────────
	Was: hamburger 38x32, drawer close 36x36, pagination ~40x27, filter buttons
	~29 high. The real box is enlarged rather than overlaying a 44px pseudo-element,
	because an overlay overhangs the 8px flex gap and steals clicks from adjacent
	controls once the filter bar wraps (which it always does on mobile).
	.sg-announcement__close is deliberately excluded: it is position:absolute and
	adding position:relative here would move it out of its corner. */
.sg-nav__toggle,
.sg-drawer__close,
.sg-filter-bar [data-filter],
.nav-links a,
.nav-links span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* Restore the hamburger's column layout, which the flex rule above would break. */
.sg-nav__toggle {
	flex-direction: column;
	gap: 5px;
}

.sg-filter-bar {
	gap: 16px !important;
}

/* ── 6. Overflow control ──────────────────────────────────────────────────────
	Replaces the removed `body { overflow-x: hidden }`. Long words, emails and
	addresses now wrap instead of pushing the layout wide. */
.sg-display,
.sg-script,
h1,
h2,
h3,
.sg-post-body,
.sg-footer p,
.sg-footer address,
.sg-footer a[href^="mailto:"],
.sg-case-tile__title,
.sg-journal-card__title {
	overflow-wrap: anywhere;
}

/* Editor-inserted tables had no styles at all and overflowed unbounded. */
.sg-post-body :is(table, .wp-block-table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sg-post-body table {
	border-collapse: collapse;
	width: 100%;
	font-size: 14px;
}

.sg-post-body :is(th, td) {
	border-bottom: 1px solid var(--sg-ink-14);
	padding: 10px 12px;
	text-align: left;
}

/* ── 7. Fluid type floors ─────────────────────────────────────────────────────
	Display headings had clamp() minimums of 72-90px against 272px of available
	width at 320px. The floors are lowered; the upper end is unchanged, so
	desktop rendering is identical. */
@media (max-width: 400px) {

	.sg-display,
	.sg-page-hero__headline,
	.sg-post-hero__title,
	h1[style*="clamp"],
	h2[style*="clamp"] {
		font-size: clamp(34px, 11vw, 72px) !important;
		letter-spacing: -1.5px !important;
	}

	/* Most of the oversized script words are bare <span>/<em> with the size set
	inline and no class at all, so they can only be reached by matching the
	inline style. A stylesheet !important still out-ranks a non-important
	inline declaration. */
	.sg-script,
	.sg-page-hero__script,
	h1 span[style*="clamp"],
	h1 em[style*="clamp"],
	h2 span[style*="clamp"],
	span[style*="Caveat"],
	em[style*="Caveat"],
	span[style*="--sg-font-script"],
	em[style*="--sg-font-script"] {
		font-size: clamp(40px, 14vw, 90px) !important;
	}
}

/* ── 8. Services grid — equal-width cards, no variable spans ────────────────
	The ACF "Grid Span" field let editors make individual service cards wider
	than their neighbours, which produced an uneven desktop layout. Cards are
	now forced to a single column each; the responsive rules below keep the
	layout predictable across breakpoints. */
.sg-service-card {
	grid-column: auto / span 1;
}

.sg-services-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 561px) {

	.sg-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1025px) {

	.sg-services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Tighten eyebrow spacing on desktop — the inline margins feel too loose. */
	.sg-eyebrow {
		margin-bottom: 8px !important;
		margin-top: 8px !important;
	}

	/* Hero / page-hero eyebrows sit right under the section padding, so the extra top margin pushes them too far down. */
	.sg-module-hero .sg-eyebrow,
	.sg-module-page-hero .sg-eyebrow {
		margin-top: 0 !important;
	}

	.sg-post-related__eyebrow,
	.sg-post-cta__eyebrow {
		margin-bottom: 8px !important;
	}
}

/* First section on every page sits right under the sticky header, so large top padding pushes eyebrows/content too far down on desktop. */
@media (min-width: 861px) {

	.sg-section:first-of-type {
		padding-top: 24px !important;
	}

	.sg-section:first-of-type .sg-section-intro {
		padding-top: 24px !important;
	}
}

.sg-metrics-grid,
.sg-cs-metrics-grid,
.sg-approach-grid {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (max-width: 1240px) {

	.sg-footer__columns {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

/* ── 9. Rotated script words were clipped by .sg-section { overflow: hidden }.
	NOTE: an earlier draft of this fix set `.sg-section { overflow-y: visible }`
	globally. That was reverted — it removes vertical clipping on desktop too and
	anything absolutely positioned inside a section would spill into its
	neighbour. The descender clipping is addressed on the span itself instead. */
.sg-script {
	padding-block: 0.14em;
}

/* ── 10. Footer link affordance ───────────────────────────────────────────────
	Replaces inline onmouseover/onmouseout handlers in footer.php, which gave
	keyboard and touch users no affordance at all and required
	'unsafe-inline' in any CSP. */
.sg-footer a {
	opacity: 0.85;
	transition: opacity 0.15s;
}

.sg-footer a:hover,
.sg-footer a:focus-visible {
	opacity: 1;
}

/* ── 11. Skip link: also match :focus-visible ─────────────────────────────── */
.sg-skip-link:focus-visible {
	left: 6px;
}

/* ── 12. Don't animate `width` (triggers layout, and the value never changes) */
.sg-nav__toggle-bar {
	transition: transform 0.2s, opacity 0.2s;
}

/* ── 13. Reduced motion ───────────────────────────────────────────────────────
	Nothing in the theme respected this. Affected smooth-scroll (a documented
	vestibular trigger), the drawer slide, dropdown keyframes, the hamburger
	rotation and the FAQ icon. */
@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;
	}
}

/* ── 14. Grids migrated out of inline style attributes ────────────────────────
	These were `style="display:grid;grid-template-columns:1fr 1fr"` in
	modules/module-all.php. Inline styles have higher specificity than any media
	query, so the 2-column layout survived all the way down to 320px. Two of them
	had no class at all, meaning no selector could ever reach them. */
.sg-services-grid__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
	align-items: end;
}

.sg-page-hero__body--split {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 64px;
	align-items: start;
}

.sg-service-block__offers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media (max-width: 860px) {

	.sg-services-grid__header {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 40px;
	}

	.sg-page-hero__body--split {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 640px) {

	.sg-service-block__offers {
		grid-template-columns: 1fr;
	}
}

/* ── 15. Contact field focus ring (outline:none had a colour-only replacement
	at 2.43:1, failing WCAG 1.4.11) ─────────────────────────────────────────── */
.sg-contact-field:focus-visible {
	outline: 2px solid var(--sg-night);
	outline-offset: 2px;
	border-bottom-color: var(--sg-night);
}

/* ── 16. Search result rows (was an inline 2-column grid with a 32px gap and a
	white-space:nowrap action — a real squeeze on every phone) ──────────────── */
.sg-search-result__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: baseline;
}

@media (max-width: 560px) {

	.sg-search-result__row {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ── 17. Filter empty state (a filter with no matches used to leave a blank
	page with no explanation) ────────────────────────────────────────────────── */
.sg-filter-empty {
	font-family: var(--sg-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sg-ink-60);
	padding: 48px 0;
	margin: 0;
	text-align: center;
}

/* ── 18. Tile grid "View all" CTA ───────────────────────────────────────────
	Case Tile Grid and Journal Grid modules show a limited set of items by
	default. The CTA below each grid links to the relevant archive so visitors
	can move beyond the default list. */
.sg-tile-grid-cta {
	margin-top: 48px;
}

.sg-tile-grid-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sg-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	text-decoration: none;
	color: var(--sg-night);
	border: 1.5px solid var(--sg-night);
	border-radius: 999px;
	padding: 12px 20px;
	transition: background 0.15s, color 0.15s;
}

.sg-tile-grid-cta__link:hover {
	background: var(--sg-night);
	color: var(--sg-paper);
}

.sg-tile-grid-cta__arrow {
	transition: transform 0.15s;
}

.sg-tile-grid-cta__link:hover .sg-tile-grid-cta__arrow {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

	.sg-tile-grid-cta__arrow {
		transition: none;
	}
}