/* ─────────────────────────────────────────────────────────────────────────
   Seemleius International — element base + component kit.

   Built to the Seemleius Design System's visual foundations:
     · flat colour fields only — white, --neutral-50, navy. No gradients,
       no textures, no patterns.
     · cards 14px radius, buttons/inputs 10px, chips pill
     · 1px --border-subtle on cards in preference to shadow-heavy looks
     · buttons: primary = navy fill / white text · accent = green fill /
       navy-950 text · secondary = white + border · ghost = navy text
     · hover DARKENS one step, never lightens; press translates 1px down;
       focus = 3px green ring
     · motion 120–320ms ease-out; fades and small rises, no bounces/parallax
     · section pattern = uppercase kicker + sentence-case H2 + one-line subhead

   Prefix is .sm- (matching the DS's own .sm-kicker) so nothing collides with
   Kadence or Kadence Blocks output.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Element base (from the DS tokens/base.css) ─────────────────────────── */

body {
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	line-height: var(--leading-body);
	color: var(--text-body);
	background: var(--surface-page);
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	color: var(--text-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-display); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-heading); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-heading); }
h5 { font-size: var(--text-body-size); font-weight: var(--weight-semibold); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--link);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: var(--weight-semibold); }
img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-16) 0; }

::selection { background: var(--green-200); color: var(--navy-900); }

/* Focus: the DS's 3px green ring. The transparent outline keeps an indicator
   in Windows High Contrast Mode, where box-shadow is discarded. */
:focus-visible {
	box-shadow: var(--focus-ring);
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.sm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-overlay);
	padding: var(--space-3) var(--space-5);
	background: var(--navy-900);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	border-radius: 0 0 var(--radius-md) 0;
}
.sm-skip-link:focus { left: 0; color: #fff; text-decoration: none; }

.sm-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.sm-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.sm-container--narrow { max-width: var(--container-narrow); }

.sm-section { padding-block: var(--section-y); position: relative; }
.sm-section--tight { padding-block: var(--section-y-tight); }
.sm-section--subtle { background: var(--surface-subtle); }
.sm-section--green-tint { background: var(--surface-green-tint); }

/* Navy full-bleed band — hero, footer, CTA. Solid navy, never blurred. */
.sm-section--navy,
.sm-section--navy-deep {
	background: var(--surface-navy);
	color: var(--text-on-navy);
}
.sm-section--navy-deep { background: var(--surface-navy-deep); }

.sm-section--navy :is(h1, h2, h3, h4, h5),
.sm-section--navy-deep :is(h1, h2, h3, h4, h5) { color: #fff; }

.sm-section--navy p,
.sm-section--navy-deep p,
.sm-section--navy .sm-lead,
.sm-section--navy-deep .sm-lead { color: var(--text-on-navy-muted); }

.sm-section--navy a:not(.sm-btn),
.sm-section--navy-deep a:not(.sm-btn) { color: var(--green-400); }
.sm-section--navy a:not(.sm-btn):hover,
.sm-section--navy-deep a:not(.sm-btn):hover { color: var(--green-300); }

/* ── Kicker — the DS section eyebrow ────────────────────────────────────── */

.sm-kicker {
	font-family: var(--font-display);
	font-size: var(--kicker-size);
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-tracking);
	text-transform: uppercase;
	color: var(--accent-strong);
	display: block;
	margin-bottom: var(--space-3);
}
.sm-kicker--on-navy,
.sm-section--navy .sm-kicker,
.sm-section--navy-deep .sm-kicker { color: var(--green-400); }

/* ── SectionHeader — kicker + H2 + one-line subhead ─────────────────────── */

.sm-section-head { max-width: 720px; margin-bottom: var(--space-12); }
.sm-section-head h2 { margin-bottom: var(--space-4); }
.sm-section-head--center { margin-inline: auto; text-align: center; }

.sm-lead {
	font-size: var(--text-lead);
	line-height: var(--leading-body);
	color: var(--text-muted);
	max-width: 62ch;
}
.sm-muted { color: var(--text-muted); }
.sm-small { font-size: var(--text-small); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-heading);
	line-height: 1;
	padding: 13px var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out),
	            color var(--duration-fast) var(--ease-out),
	            transform var(--duration-fast) var(--ease-out);
}
.sm-btn:hover { text-decoration: none; }
.sm-btn:active { transform: translateY(1px); }

.sm-btn--primary   { background: var(--primary); border-color: var(--primary); color: #fff; }
.sm-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* The single highest-intent CTA — "Request a quote". */
.sm-btn--accent    { background: var(--accent); border-color: var(--accent); color: var(--text-on-green); }
.sm-btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-green); }

.sm-btn--secondary { background: #fff; border-color: var(--border-strong); color: var(--navy-700); }
.sm-btn--secondary:hover { background: var(--neutral-50); border-color: var(--navy-700); color: var(--navy-800); }

.sm-btn--ghost     { background: transparent; border-color: transparent; color: var(--navy-700); padding-inline: var(--space-2); }
.sm-btn--ghost:hover { color: var(--green-700); }

/* On navy, "secondary" inverts to an outlined white button. */
.sm-section--navy .sm-btn--secondary,
.sm-section--navy-deep .sm-btn--secondary {
	background: transparent;
	border-color: var(--border-on-navy);
	color: #fff;
}
.sm-section--navy .sm-btn--secondary:hover,
.sm-section--navy-deep .sm-btn--secondary:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

.sm-btn--lg { padding: 15px var(--space-8); font-size: var(--text-body-size); }
.sm-btn--block { width: 100%; }

.sm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Arrow link — used inside cards in place of a button. */
.sm-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-heading);
	color: var(--navy-700);
}
.sm-link::after { content: "→"; transition: transform var(--duration-base) var(--ease-out); }
.sm-link:hover { color: var(--green-700); text-decoration: none; }
.sm-link:hover::after { transform: translateX(4px); }

/* ── Card ───────────────────────────────────────────────────────────────── */

.sm-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	transition: border-color var(--duration-base) var(--ease-out),
	            box-shadow var(--duration-base) var(--ease-out),
	            transform var(--duration-base) var(--ease-out);
}
.sm-card--link:hover {
	border-color: var(--navy-300);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.sm-card__title { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.sm-card__body { color: var(--text-muted); font-size: var(--text-small); }
.sm-card__foot { margin-top: var(--space-6); }

.sm-section--navy .sm-card,
.sm-section--navy-deep .sm-card {
	background: rgba(255, 255, 255, .04);
	border-color: var(--border-on-navy);
}
.sm-section--navy .sm-card__body,
.sm-section--navy-deep .sm-card__body { color: var(--text-on-navy-muted); }
.sm-section--navy .sm-link,
.sm-section--navy-deep .sm-link { color: var(--green-400); }

/* Icon tile — 28–32px icon in a green-50 / navy-50 rounded square. */
.sm-icon-tile {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: var(--radius-md);
	background: var(--green-50);
	color: var(--navy-700);
	margin-bottom: var(--space-5);
	flex: none;
}
.sm-icon-tile svg { width: 26px; height: 26px; }
.sm-section--navy .sm-icon-tile,
.sm-section--navy-deep .sm-icon-tile { background: rgba(255, 255, 255, .07); color: var(--green-400); }

/* ── Grids ──────────────────────────────────────────────────────────────── */

.sm-grid { display: grid; gap: var(--space-6); }
.sm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Centre a lone trailing card instead of stranding it in column 1.
   The services grid holds 7 cards, so at 3 columns the last row has exactly one. */
@media (min-width: 1040px) {
	.sm-grid--3 > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

.sm-split { display: grid; gap: var(--space-12); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.sm-split { grid-template-columns: 1fr 1fr; }
	.sm-split--wide-first { grid-template-columns: 1.3fr .7fr; }
}

/* ── Stat — big display numeral + plain caption ─────────────────────────── */

.sm-stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	font-weight: var(--weight-display);
	line-height: 1;
	letter-spacing: var(--tracking-display);
	color: var(--navy-700);
}
.sm-stat__label {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-small);
	color: var(--text-muted);
	line-height: var(--leading-tight);
}
.sm-section--navy .sm-stat__value,
.sm-section--navy-deep .sm-stat__value { color: var(--green-400); }
.sm-section--navy .sm-stat__label,
.sm-section--navy-deep .sm-stat__label { color: var(--text-on-navy-muted); }

.sm-stats { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* ── StepList — numbered process ────────────────────────────────────────── */

.sm-steps { counter-reset: sm-step; display: grid; gap: var(--space-8); }
@media (min-width: 760px)  { .sm-steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sm-steps--4 { grid-template-columns: repeat(4, 1fr); } }

.sm-step { counter-increment: sm-step; }
.sm-step::before {
	content: counter(sm-step, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--radius-pill);
	background: var(--green-50);
	color: var(--green-700);
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-display);
	margin-bottom: var(--space-4);
}
.sm-step__title { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.sm-step__body { font-size: var(--text-small); color: var(--text-muted); }
.sm-section--navy .sm-step::before,
.sm-section--navy-deep .sm-step::before { background: rgba(255, 255, 255, .08); color: var(--green-400); }
.sm-section--navy .sm-step__body,
.sm-section--navy-deep .sm-step__body { color: var(--text-on-navy-muted); }

/* ── RoutePill — corridor / trade-lane link ─────────────────────────────── */

.sm-route {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	background: #fff;
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	color: var(--navy-700);
	transition: border-color var(--duration-fast) var(--ease-out),
	            background var(--duration-fast) var(--ease-out);
}
.sm-route:hover { border-color: var(--navy-300); background: var(--neutral-50); color: var(--navy-800); text-decoration: none; }
.sm-route__arrow { color: var(--green-600); font-weight: var(--weight-heading); }
.sm-section--navy .sm-route,
.sm-section--navy-deep .sm-route {
	background: rgba(255, 255, 255, .05);
	border-color: var(--border-on-navy);
	color: #fff;
}
.sm-section--navy .sm-route:hover,
.sm-section--navy-deep .sm-route:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }

.sm-routes { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Badge ──────────────────────────────────────────────────────────────── */

.sm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 5px var(--space-3);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: var(--weight-heading);
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--neutral-100);
	color: var(--text-muted);
}
.sm-badge--accent { background: var(--green-50); color: var(--green-700); }
.sm-badge--navy { background: var(--navy-50); color: var(--navy-700); }

/* ── Accordion (FAQ) — native disclosure, no JS ─────────────────────────── */

.sm-faq { border-top: 1px solid var(--border-subtle); }
.sm-faq__item { border-bottom: 1px solid var(--border-subtle); }
.sm-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-6);
	padding: var(--space-5) 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-heading);
	color: var(--text-heading);
	list-style: none;
}
.sm-faq__q::-webkit-details-marker { display: none; }
.sm-faq__q::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	color: var(--accent-strong);
	flex: none;
	transition: transform var(--duration-base) var(--ease-out);
}
.sm-faq__item[open] .sm-faq__q::after { transform: rotate(45deg); }
.sm-faq__a { padding-bottom: var(--space-5); color: var(--text-muted); max-width: 68ch; }

/* ── Table — transit times, lane comparisons ───────────────────────────── */

.sm-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.sm-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.sm-table th, .sm-table td { padding: var(--space-4) var(--space-5); text-align: left; }
.sm-table thead th {
	background: var(--neutral-50);
	font-family: var(--font-display);
	font-size: var(--text-caption);
	font-weight: var(--weight-heading);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-subtle);
	white-space: nowrap;
}
.sm-table tbody tr + tr td { border-top: 1px solid var(--border-subtle); }

/* ── Prose — long-form service and insight copy ─────────────────────────── */

.sm-prose { max-width: 68ch; }
.sm-prose > * + * { margin-top: var(--space-5); }
.sm-prose h2 { margin-top: var(--space-12); }
.sm-prose h3 { margin-top: var(--space-10); }
.sm-prose h2:first-child, .sm-prose h3:first-child { margin-top: 0; }
.sm-prose ul, .sm-prose ol { padding-left: var(--space-6); }
.sm-prose li + li { margin-top: var(--space-2); }
.sm-prose li::marker { color: var(--accent-strong); }
.sm-prose blockquote {
	margin: var(--space-10) 0;
	padding-left: var(--space-6);
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	color: var(--text-heading);
}

/* ── Utilities ──────────────────────────────────────────────────────────── */

.sm-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.sm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sm-center { text-align: center; }

/* Small rise-in on scroll. Opt-in via .sm-reveal; JS adds .is-in.
   Reduced-motion users get the final state immediately. */
.sm-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.sm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sm-reveal { opacity: 1; transform: none; } }

/* ── Photography ────────────────────────────────────────────────────────── */

.sm-photo {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--neutral-100);
}
.sm-photo img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--sm-photo-ratio, 16 / 9);
	object-fit: cover;
}
.sm-photo--square { border-radius: var(--radius-lg); }
.sm-photo--flush { border-radius: 0; }

/* Media band: full-bleed photo with the navy scrim over it, used behind
   hero copy. The scrim is a flat colour wash — the DS rules out gradients as
   decoration, but a legibility scrim is a functional overlay, not a texture. */
.sm-media-band { position: relative; isolation: isolate; }
.sm-media-band > .sm-photo {
	position: absolute;
	inset: 0;
	border-radius: 0;
	z-index: -2;
}
.sm-media-band > .sm-photo img { height: 100%; aspect-ratio: auto; }
.sm-media-band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--navy-900) 82%, transparent);
}
.sm-media-band--soft::before { background: color-mix(in srgb, var(--navy-900) 68%, transparent); }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.sm-media-band::before { background: rgba(15, 33, 64, .82); }
	.sm-media-band--soft::before { background: rgba(15, 33, 64, .68); }
}

figure.sm-figure { margin: 0; }
figure.sm-figure figcaption {
	margin-top: var(--space-3);
	font-size: var(--text-small);
	color: var(--text-muted);
}

/* Fixed two-up pair (service "what's included" — 4 cards read best as 2×2). */
.sm-grid--pair { grid-template-columns: 1fr; }
@media (min-width: 720px) { .sm-grid--pair { grid-template-columns: 1fr 1fr; } }