/* =============================================================
   SmartConnect IIoT — main.css
   Industrial / technical / clean. Minimal, no external fonts.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
	--navy: #0d1b2e;
	--charcoal: #111a26;
	--surface: #16233a;
	--surface-2: #1b2c47;
	--steel: #5b6b7d;
	--steel-light: #8a9aab;
	--ink: #1a2432;
	--line: #e2e8f0;
	--line-dark: #2a3b57;
	--mist: #f5f7fa;
	--mist-2: #eef2f7;
	--white: #ffffff;
	--accent: #2f6fed;
	--accent-dark: #1e50c0;
	--accent-soft: #eaf1ff;
	--ok: #1f9d63;
	--warn: #d98a00;

	--maxw: 1180px;
	--gap: clamp(1rem, 3vw, 2rem);
	--radius: 10px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 2px rgba(13, 27, 46, .06), 0 1px 3px rgba(13, 27, 46, .08);
	--shadow-md: 0 4px 16px rgba(13, 27, 46, .08);
	--shadow-lg: 0 18px 50px rgba(13, 27, 46, .16);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--white);
	line-height: 1.65;
	font-size: 1rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.18; color: var(--navy); margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
code, kbd, samp { font-family: var(--mono); font-size: .9em; background: var(--mist-2); padding: .12em .4em; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.entry-content > * { }
.site-main { display: block; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-weight: 600; font-size: 1rem; line-height: 1.1;
	padding: .85rem 1.4rem; border-radius: var(--radius);
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-dark); }
.btn--ghost:hover { background: var(--mist); }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--mist); color: var(--navy); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.btn--sm { padding: .55rem 1rem; font-size: .92rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Gutenberg core buttons -> brand button ----------
   The seeder (and the editor) output core <div class="wp-block-button">
   <a class="wp-block-button__link">. WordPress core paints the inner link
   as its own pill, and our modifier classes land on the wrapper. Here we
   neutralize the wrapper and style the real link so buttons are consistent
   everywhere, including buttons the site owner adds later in Gutenberg. */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }

/* Neutralize the wrapper when our .btn helper classes land on it */
.wp-block-button.btn,
.wp-block-button {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	display: inline-block;
}

/* The actual clickable link becomes the brand button (accent by default) */
.entry-content .wp-block-button__link,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	background-color: var(--accent); color: #fff;
	font-weight: 600; font-size: 1rem; line-height: 1.1;
	padding: .85rem 1.4rem; border-radius: var(--radius);
	border: 1px solid transparent; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.entry-content .wp-block-button__link:hover,
.wp-block-button__link:hover {
	background-color: var(--accent-dark); color: #fff; text-decoration: none; box-shadow: var(--shadow-md);
}

/* Ghost / outline variants (modifier class sits on the wrapper) */
.wp-block-button.btn--ghost .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent; color: var(--navy); border-color: var(--line-dark); box-shadow: none;
}
.wp-block-button.btn--ghost .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--mist); color: var(--navy); box-shadow: none;
}
.wp-block-button.btn--outline-light .wp-block-button__link {
	background-color: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none;
}
.wp-block-button.btn--outline-light .wp-block-button__link:hover {
	background-color: rgba(255,255,255,.1); color: #fff; box-shadow: none;
}
.wp-block-button.btn--light .wp-block-button__link {
	background-color: #fff; color: var(--navy);
}
.wp-block-button.btn--light .wp-block-button__link:hover {
	background-color: var(--mist); color: var(--navy);
}

/* Sizes */
.wp-block-button.btn--lg .wp-block-button__link { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.wp-block-button.btn--sm .wp-block-button__link { padding: .55rem 1rem; font-size: .92rem; }

/* ---------- Header / nav ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 66px; }
.site-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--navy); text-decoration: none; font-size: 1.12rem; }
.site-logo:hover { text-decoration: none; }
.site-logo__mark { display: inline-flex; }
.site-logo__badge {
	font-size: .62rem; font-weight: 700; letter-spacing: .06em;
	background: var(--accent); color: #fff; padding: .12rem .4rem; border-radius: 5px; vertical-align: middle; margin-left: .1rem;
}
.custom-logo { max-height: 40px; width: auto; }

.primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3rem; }
.primary-nav__list li { position: relative; }
.primary-nav__list a {
	display: inline-flex; align-items: center; color: var(--ink); font-weight: 500; font-size: .96rem;
	padding: .55rem .7rem; border-radius: 8px; text-decoration: none;
}
.primary-nav__list a:hover { background: var(--mist); color: var(--navy); }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .current-page-ancestor > a { color: var(--accent-dark); }
.primary-nav__list .btn--accent,
.primary-nav__list a.btn--accent { color: #fff; }
.primary-nav__list .btn--accent:hover { background: var(--accent-dark); color: #fff; }

/* Submenus */
.primary-nav__list .sub-menu {
	list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: 0;
	min-width: 220px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow-lg); display: none; z-index: 20;
}
.primary-nav__list .menu-item-has-children:hover > .sub-menu,
.primary-nav__list .menu-item-has-children:focus-within > .sub-menu,
.primary-nav__list .submenu-open > .sub-menu { display: block; }
.primary-nav__list .sub-menu a { display: block; padding: .55rem .7rem; font-size: .94rem; }
.submenu-toggle { display: none; }

.nav-toggle { display: none; background: transparent; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 899px) {
	.nav-toggle { display: block; }
	.primary-nav {
		position: fixed; inset: 66px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
		max-height: 0; overflow: hidden; transition: max-height .25s ease; box-shadow: var(--shadow-md);
	}
	.primary-nav.is-open { max-height: calc(100vh - 66px); overflow-y: auto; }
	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1rem 1.5rem; }
	.primary-nav__list > li { border-bottom: 1px solid var(--mist-2); }
	.primary-nav__list a { padding: .85rem .5rem; }
	.primary-nav__list .btn--accent { margin-top: .75rem; }
	.primary-nav__list .sub-menu { position: static; box-shadow: none; border: 0; padding-left: 1rem; }
	.submenu-toggle {
		display: inline-flex; position: absolute; right: .5rem; top: .6rem; width: 34px; height: 34px;
		align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1;
		background: var(--mist); border: 0; border-radius: 8px; color: var(--navy); cursor: pointer;
	}
	.submenu-open > .submenu-toggle span { transform: rotate(45deg); }
}

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #cfd9e6; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: #9dc0ff; }
.section__head { max-width: 720px; margin-bottom: 2.5rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow {
	display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--accent-dark); margin-bottom: .6rem;
}
.section--navy .eyebrow { color: #7db0ff; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--steel); }
.section--navy .lead { color: #aebdd0; }

/* ---------- Hero ---------- */
.hero {
	background:
		radial-gradient(1100px 500px at 80% -10%, rgba(47,111,237,.22), transparent 60%),
		linear-gradient(180deg, var(--navy) 0%, var(--charcoal) 100%);
	color: #d7e0ec; position: relative; overflow: hidden;
}
.hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 44px 44px; mask-image: radial-gradient(80% 60% at 60% 0%, #000 20%, transparent 75%);
	pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero__title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.25rem); margin-bottom: 1rem; }
.hero__title .accent { color: #6ea2ff; }
.hero__text { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #b9c6d8; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__note { margin-top: 1.1rem; font-size: .9rem; color: #8fa0b6; }
.hero__note strong { color: #cdd9e8; }
@media (max-width: 880px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ---------- Flow diagram (crawlable HTML/CSS) ---------- */
.flow {
	--flow-box: #16233a; --flow-border: #2a3b57; --flow-text: #dbe5f2;
	display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 100%;
}
.flow--light { --flow-box: #fff; --flow-border: var(--line); --flow-text: var(--navy); }
.flow__tier {
	width: 100%; max-width: 460px; background: var(--flow-box); border: 1px solid var(--flow-border);
	border-radius: 12px; padding: 1rem 1.15rem; color: var(--flow-text); box-shadow: var(--shadow-md);
}
.flow__tier--brand { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); background: linear-gradient(180deg, #1b2c47, #16233a); }
.flow--light .flow__tier--brand { background: linear-gradient(180deg, #eaf1ff, #fff); }
.flow__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-light); margin-bottom: .35rem; font-weight: 700; }
.flow--light .flow__label { color: var(--steel); }
.flow__brand-name { font-weight: 700; font-size: 1.15rem; color: #fff; }
.flow--light .flow__brand-name { color: var(--navy); }
.flow__items { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0; padding: 0; list-style: none; }
.flow__items li { font-size: .92rem; font-weight: 500; }
.flow__items--chips li {
	background: rgba(47,111,237,.14); color: #cfe0ff; border: 1px solid rgba(47,111,237,.35);
	padding: .25rem .6rem; border-radius: 999px; font-size: .82rem;
}
.flow--light .flow__items--chips li { background: var(--accent-soft); color: var(--accent-dark); border-color: rgba(47,111,237,.25); }
.flow__caps { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.flow__caps span { font-size: .82rem; color: var(--steel-light); }
.flow--light .flow__caps span { color: var(--steel); }
.flow__arrow { color: var(--accent); font-size: 1.3rem; line-height: 1; }
.flow__protocols { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; max-width: 460px; width: 100%; }
.flow__protocols .flow__tier { flex: 1 1 120px; text-align: center; padding: .7rem .5rem; max-width: none; }
.flow__proto-name { font-weight: 700; color: #fff; font-size: .98rem; }
.flow--light .flow__proto-name { color: var(--navy); }

/* ---------- Generic grids / cards ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #cbd6e6; }
.card__icon {
	width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark);
	display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-weight: 700;
}
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--steel); margin-bottom: .6rem; }
.card__more { font-weight: 600; font-size: .92rem; }
.section--navy .card { background: var(--surface); border-color: var(--line-dark); }
.section--navy .card p { color: #aebdd0; }
.section--navy .card__icon { background: rgba(47,111,237,.18); color: #9dc0ff; }

/* Feature list with checks */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.checklist li::before {
	content: ""; position: absolute; left: 0; top: .15rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e50c0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--navy .checklist li::before { background-color: rgba(47,111,237,.22); }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 1.4rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.step__num {
	counter-increment: step; display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 700; margin-bottom: .8rem;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--steel); margin: 0; font-size: .96rem; }

/* Split / two-column content */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* Placeholder box (screenshots etc.) */
.placeholder {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 240px; border: 2px dashed #b9c6d8; border-radius: var(--radius-lg);
	background: repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 12px, #f1f5fa 12px, #f1f5fa 24px);
	color: var(--steel); font-weight: 600; padding: 1.5rem;
}
.section--navy .placeholder { background: rgba(255,255,255,.03); border-color: #35507a; color: #9fb1c8; }

/* Note / callout */
.callout { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; }
.callout--warn { border-color: var(--warn); background: #fff7e8; }
.callout p:last-child { margin-bottom: 0; }

/* Spec / definition table */
.spec-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.spec-table th, .spec-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 34%; color: var(--navy); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(180deg, var(--navy), var(--charcoal)); color: #d7e0ec; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.25rem); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: #aebdd0; max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: 1.5rem; }
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* ---------- Download card ---------- */
.download-card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md); overflow: hidden; max-width: 560px;
}
.download-card__top { background: linear-gradient(135deg, var(--navy), var(--surface-2)); color: #fff; padding: 1.75rem; display: flex; gap: 1rem; align-items: center; }
.download-card__logo { width: 56px; height: 56px; border-radius: 12px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.download-card__title { color: #fff; margin: 0 0 .2rem; font-size: 1.35rem; }
.download-card__sub { color: #aebdd0; margin: 0; font-size: .92rem; }
.download-card__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.download-card__meta div { padding: .9rem 1.25rem; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.download-card__meta div:nth-child(2n) { border-right: 0; }
.download-card__meta dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--steel); font-weight: 700; margin-bottom: .15rem; }
.download-card__meta dd { margin: 0; font-weight: 600; color: var(--navy); }
.download-card__action { padding: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .85rem; color: var(--steel); padding-top: 1.25rem; }
.breadcrumbs .wrap { padding-block: 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: .4rem; }
.breadcrumbs li + li::before { content: "/"; color: #b9c6d8; }
.breadcrumbs a { color: var(--steel); }
.breadcrumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* ---------- Page article (standard pages) ---------- */
.page-article__header { padding-top: 1.25rem; }
.page-article__title { max-width: 20ch; }
.page-article .entry-content { }

/* ===== Content width model =====================================
   STANDARD PAGES (page.php -> .page-article): one left-aligned column.
   The H1 header, breadcrumbs and body all share the same left edge.
   Prose is capped to a readable measure but stays left-aligned; wide
   layout blocks (.grid, .split, tables, CTAs) fill the column width.

   FRONT PAGE (.front-page): keeps full-bleed sections that span the
   viewport, with their inner content constrained (rules further down).
   Single blog posts keep their own prose styling below. */

/* ---- Standard pages: single 1180px left-aligned column ---- */
.page-article .entry-content {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}
/* Every top-level block aligns to the column's left edge */
.page-article .entry-content > * {
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}
/* Prose gets a readable measure, still left-aligned */
.page-article .entry-content > p,
.page-article .entry-content > h2,
.page-article .entry-content > h3,
.page-article .entry-content > h4,
.page-article .entry-content > ul,
.page-article .entry-content > ol,
.page-article .entry-content > blockquote,
.page-article .entry-content > table,
.page-article .entry-content > .wp-block-table,
.page-article .entry-content > figure.wp-block-image {
	max-width: 800px;
}
.page-article .entry-content > h2 { margin-top: 2.4rem; }
.page-article .entry-content > h3 { margin-top: 1.7rem; }

/* ---- Front page: full-bleed sections span the viewport ---- */
.front-page .entry-content > * {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
	box-sizing: border-box;
}
.front-page .entry-content > .alignfull,
.front-page .entry-content > .sc-section,
.front-page .entry-content > .hero {
	max-width: none;
}
/* Hero manages its own gutters via .wrap; sections use the column padding below. */
.front-page .entry-content > .hero { padding-inline: 0; }

/* Inner content of full-bleed sections shares ONE centered content
   column (same left edge as the hero and standard-page content), while
   the section background still spans the full viewport. Heads are
   left-aligned within the column; wide grids/splits fill it. */
.sc-section.section {
	padding-inline: calc(max(0px, (100% - var(--maxw)) / 2) + clamp(1rem, 4vw, 2rem));
}
.sc-section.section > * {
	max-width: 100%;
	margin-inline: 0 !important;
	padding-inline: 0;
	box-sizing: border-box;
}
.sc-section.section > .section__head { max-width: 820px; }
.sc-section.section > .section__head--center { max-width: 820px; margin-inline: auto !important; }

/* ---------- Blog ---------- */
.archive__header { padding-block: clamp(1.5rem, 4vw, 2.5rem); max-width: 760px; }
.archive__desc { color: var(--steel); font-size: 1.1rem; }
.archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .archive__grid { grid-template-columns: 1fr; } }
.archive__grid--list { grid-template-columns: 1fr; max-width: 760px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.post-card__media img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.post-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.post-card__eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-dark); font-weight: 700; margin: 0 0 .4rem; }
.post-card__title { font-size: 1.2rem; margin: 0 0 .5rem; }
.post-card__excerpt { color: var(--steel); font-size: .95rem; margin: 0 0 .8rem; }
.post-card__meta { color: var(--steel-light); font-size: .82rem; margin: 0; display: flex; gap: .4rem; align-items: center; }

.single-article { }
.single-article__header { max-width: 760px; padding-top: 1rem; }
.single-article__eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 0 .5rem; }
.single-article__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.single-article__meta { color: var(--steel); font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.single-article__figure { max-width: 900px; margin: 1.5rem auto; }
.single-article__figure img { border-radius: var(--radius-lg); width: 100%; }
.single-article__content { max-width: 760px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); font-size: 1.06rem; }
.single-article__content h2 { margin-top: 2.2rem; }
.single-article__content h3 { margin-top: 1.6rem; }
.single-article__content img { border-radius: 10px; }
.single-article__footer { max-width: 760px; margin: 2.5rem auto 0; }
.single-article__cta { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; text-align: center; }
.single-article__cta h2 { margin-top: 0; }
.single-article__cta-buttons { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin: 0; }
.single-article__tags { margin-top: 1.5rem; font-size: .88rem; color: var(--steel); }

.related-posts { max-width: 1180px; margin: 3.5rem auto; }
.related-posts__title { text-align: center; }
.related-posts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .related-posts__grid { grid-template-columns: 1fr; } }
.related-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-sm); }
.related-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.related-card__title { font-weight: 700; color: var(--navy); }
.related-card__excerpt { color: var(--steel); font-size: .9rem; }

/* Pagination */
.pagination, .navigation.pagination { margin: 3rem auto; max-width: var(--maxw); }
.nav-links { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--navy); text-decoration: none; }
.page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }
.page-numbers:hover:not(.current) { background: var(--mist); }

/* ---------- Search form ---------- */
.search-form { display: flex; gap: .5rem; max-width: 480px; }
.search-form__input { flex: 1; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; }
.search-form__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- Contact form ---------- */
.sc-form { display: grid; gap: 1.1rem; max-width: 640px; }
.sc-form__row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .sc-form__row { grid-template-columns: 1fr; } }
.sc-form label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--navy); font-size: .95rem; }
.sc-form input, .sc-form select, .sc-form textarea {
	width: 100%; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--ink);
}
.sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.sc-form textarea { min-height: 150px; resize: vertical; }
.sc-form__hint { font-size: .85rem; color: var(--steel); }
.sc-form__note { font-size: .85rem; color: var(--steel); }

/* Contact info list */
.contact-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contact-methods li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-methods strong { display: block; color: var(--navy); }

/* ---------- 404 ---------- */
.error-404 { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.error-404__code { font-size: clamp(4rem, 14vw, 8rem); color: var(--accent); margin: 0; line-height: 1; }
.error-404__links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; padding: 0; margin: 1.5rem 0; }
.error-404__search { max-width: 480px; margin: 1.5rem auto 0; }
.error-404__search .search-form { margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); color: #93a4b8; margin-top: 4rem; }
.site-footer a { color: #b9c6d8; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand .site-logo__text { color: #fff; }
.site-logo--footer { font-size: 1.15rem; margin-bottom: .75rem; }
.site-footer__tagline { color: #fff; font-weight: 600; margin: 0 0 .5rem; }
.site-footer__desc { font-size: .9rem; max-width: 34ch; color: #8496ab; }
.site-footer__col h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__col a { font-size: .93rem; text-decoration: none; }
.site-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; border-top: 1px solid #22303f; font-size: .85rem; }
.site-footer__legal { display: flex; gap: 1.25rem; }

/* ---------- Logos / trust row ---------- */
.trust-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: center; opacity: .9; }
.trust-row span { font-weight: 700; color: var(--steel); letter-spacing: .02em; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-sm > * + * { margin-top: .5rem; }
.muted { color: var(--steel); }
.pill { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; }
.badge-placeholder { background: #fff3d6; color: #8a5b00; border: 1px dashed #d8ad4d; padding: .1rem .5rem; border-radius: 6px; font-size: .85em; font-weight: 600; }

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}