/* ==========================================================================
   AARDIV — design system + site styles
   One stylesheet. No framework, no page builder, no icon fonts.

   Palette is sampled from the Aardiv logo:
     Navy #27408A  — 9.60:1 on white (AAA)
     Red  #F04029  — 3.84:1 on white, GRAPHICS AND LARGE DISPLAY ONLY.
                     Anywhere red carries readable text, use --red-600/700.

   Sections
     01 Tokens
     02 Reset & base
     03 Layout primitives
     04 Buttons & links
     05 Header
     06 Hero & spec band
     07 Sections, cards, chips, steps
     08 Forms
     09 Tables & prose
     10 Footer
     11 Utilities & responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 TOKENS

   The palette is the logo's own two colours set on a warm concrete neutral —
   the ground of a container yard rather than the blue-grey every logistics
   site defaults to. Navy carries structure, red carries action, and the
   neutrals are warm enough that the two brand colours read as deliberate
   against them.
   -------------------------------------------------------------------------- */
:root {
	/* Brand scales — navy and red sampled from the logo */
	--navy-50:#EFF1F7; --navy-100:#DDE2EF; --navy-200:#B9C3DF; --navy-300:#8FA0CD;
	--navy-400:#5E75B4; --navy-500:#27408A; --navy-600:#223878; --navy-700:#1D3068;
	--navy-800:#1A2B5E; --navy-900:#16224A;

	--red-50:#FDF3F0; --red-100:#FBE2DC; --red-200:#F7C0B4; --red-300:#F49B87;
	--red-400:#F4795F; --red-500:#F04029; --red-600:#CE3A20; --red-700:#A9301B;
	--red-800:#822822; --red-900:#5D211F;

	/* Warm concrete neutrals */
	--ground:     #F5F4F1;
	--surface:    #FFFFFF;
	--surface-2:  #EBE8E2;
	--ink:        #1B1D22;
	--ink-2:      #444851;
	--muted:      #63645F;
	--rule:       #DFDBD3;
	--rule-2:     #C7C2B8;

	--accent:     #27408A;   /* navy */
	--accent-ink: #FFFFFF;
	--accent-soft:#E9ECF5;
	--accent-deep:#1A2B5E;   /* large navy fields: hero scrim, CTA band */
	--pop:        #CE3A20;   /* red that may carry text — 5.0:1 on white */
	--pop-ink:    #FFFFFF;
	--pop-graphic:#F04029;   /* logo red: rules, marks, illustration only */
	--pop-text:   #A9301B;   /* small red text on a TINTED ground. --pop is only
	                            5.0:1 against white and drops to 4.04:1 on
	                            --surface-2, which fails AA at body sizes. */

	--dark:       #16224A;   /* footer ground */
	--dark-ink:   #E9EBF2;

	--ok:         #1B6B3E;
	--ok-bg:      #DFEFE5;
	--warn-bg:    #FAEBD3;
	--warn-tx:    #855507;
	--bad-bg:     #FBE1DB;
	--bad-tx:     #A7261A;

	--shadow:     0 1px 2px rgba(20,24,36,.06), 0 10px 28px -18px rgba(20,24,36,.4);
	--shadow-lg:  0 2px 4px rgba(20,24,36,.06), 0 24px 48px -28px rgba(20,24,36,.5);

	/* Type. --display can be swapped for a self-hosted condensed webfont;
	   see DEPLOY.md. The stack below is deliberately webfont-free. */
	--display: "Aardiv Display","Helvetica Neue Condensed","HelveticaNeue-CondensedBold","Arial Narrow",Haettenschweiler,Impact,Helvetica,Arial,sans-serif;
	--sans:    ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--mono:    ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,monospace;

	--maxw: 78rem;
	--maxw-prose: 44rem;
	--pad: 1.5rem;
	--radius: 3px;

	/* Tells the browser which way to paint form controls, scrollbars and the
	   canvas behind the page. Without it, native widgets stay light in dark
	   mode and the select dropdowns on the quote form look pasted on. */
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground:     #14151A;
		--surface:    #1D1F26;
		--surface-2:  #262932;
		--ink:        #EFEDE8;
		--ink-2:      #C6C4BE;
		--muted:      #96948E;
		--rule:       #2C2F38;
		--rule-2:     #3E424D;

		--accent:     #9EB2E8;
		--accent-ink: #12161F;
		--accent-soft:#1E2A4D;
		--accent-deep:#141F42;
		--pop:        #F5795F;
		--pop-ink:    #2A0B05;
		--pop-graphic:#F5795F;
		--pop-text:   #F5795F;

		--dark:       #101A38;
		--dark-ink:   #E9EBF2;

		--ok:         #7CC79A;
		--ok-bg:      #16301F;
		--warn-bg:    #332711;
		--warn-tx:    #E3B160;
		--bad-bg:     #351B17;
		--bad-tx:     #F19585;

		--shadow:     0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.9);
		--shadow-lg:  0 2px 4px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,.9);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--ground:#14151A; --surface:#1D1F26; --surface-2:#262932;
	--ink:#EFEDE8; --ink-2:#C6C4BE; --muted:#96948E;
	--rule:#2C2F38; --rule-2:#3E424D;
	--accent:#9EB2E8; --accent-ink:#12161F; --accent-soft:#1E2A4D; --accent-deep:#141F42;
	--pop:#F5795F; --pop-ink:#2A0B05; --pop-graphic:#F5795F; --pop-text:#F5795F;
	--dark:#101A38; --dark-ink:#E9EBF2;
	--ok:#7CC79A; --ok-bg:#16301F;
	--warn-bg:#332711; --warn-tx:#E3B160;
	--bad-bg:#351B17; --bad-tx:#F19585;
	--shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px -18px rgba(0,0,0,.9);
	--shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -28px rgba(0,0,0,.9);

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   02 RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
figure img { border-radius: var(--radius); }
p { margin: 0 0 1rem; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--pop); }

h1, h2, h3, h4 { text-wrap: balance; }

:where(:focus-visible) {
	outline: 3px solid var(--pop-graphic);
	outline-offset: 2px;
	border-radius: 1px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--accent);
	color: var(--accent-ink);
	padding: .75rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
}
.skip-link:focus { left: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   03 LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.shell-narrow { max-width: 58rem; margin: 0 auto; padding: 0 var(--pad); }

.band { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.band-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.band-alt { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-dark { background: var(--dark); color: var(--dark-ink); }
.band-dark a { color: var(--navy-200); }

.eyebrow {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.sec-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.sec-head h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.02;
	letter-spacing: .002em;
	text-transform: uppercase;
	margin: .5rem 0 0;
}
.sec-head p { margin-top: .9rem; color: var(--ink-2); font-size: 1.02rem; }
/* Short red rule under every section heading — the logo's one warm colour,
   repeated often enough to tie the pages together. */
.sec-head .rule {
	width: 3rem; height: 4px;
	background: var(--pop-graphic);
	margin-top: 1rem;
}

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

/* --------------------------------------------------------------------------
   04 BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--sans);
	font-size: .88rem;
	font-weight: 700;
	line-height: 1.2;
	padding: .78rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--pop); color: var(--pop-ink); border-color: var(--pop); }
.btn-primary:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }
:root[data-theme="dark"] .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary:hover { background: var(--red-300); border-color: var(--red-300); color: var(--pop-ink); }

.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover { background: transparent; color: var(--accent); }

.btn-ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .9; }
.btn-ghost:hover { opacity: 1; border-color: var(--pop-graphic); color: var(--pop-graphic); }

.btn-block { width: 100%; justify-content: center; }

.arrow-link {
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	display: inline-flex;
	gap: .35rem;
	align-items: center;
}
.arrow-link::after { content: "→"; transition: transform .15s ease; }
.arrow-link:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   05 HEADER
   -------------------------------------------------------------------------- */
.topline {
	background: var(--accent-deep);
	color: #E7EBF6;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .05em;
}
.topline .shell {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-top: .5rem;
	padding-bottom: .5rem;
}
.topline .badges { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

.masthead {
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 40;
}
.masthead .shell {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-top: .8rem;
	padding-bottom: .8rem;
}

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand-logo { height: 2.6rem; width: auto; }
.site-footer .brand-logo { height: 2.9rem; }

/* Header lockup: the arrow mark carries the red, the name carries the navy and
   the tagline sits under it in the red that is safe at text sizes. Set live
   rather than baked into the logo bitmap, so both lines stay sharp and both
   follow the theme. */
.brand-mark { height: 2.7rem; width: auto; flex: none; }
/* Only one mark is ever in the layout, so the header height cannot shift when
   the theme is switched. */
.brand-mark-ondark { display: none; }
:root[data-theme="dark"] .brand-mark-onlight { display: none; }
:root[data-theme="dark"] .brand-mark-ondark  { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .brand-mark-onlight { display: none; }
	:root:not([data-theme="light"]) .brand-mark-ondark  { display: block; }
}
.brand-lockup { display: flex; flex-direction: column; justify-content: center; gap: .18rem; }
.brand .name {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .015em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--accent);
}
.brand .tag {
	font-family: var(--mono);
	font-size: .55rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--pop-text);
}

.nav-toggle {
	margin-left: auto;
	display: none;
	background: transparent;
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .55rem .7rem;
	cursor: pointer;
}

nav.main { margin-left: auto; }
nav.main ul { display: flex; gap: 1.35rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
nav.main a {
	font-size: .87rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ink-2);
	padding: .25rem 0;
	border-bottom: 2px solid transparent;
	display: inline-block;
}
nav.main a:hover { color: var(--ink); border-bottom-color: var(--pop-graphic); }
nav.main .current-menu-item > a,
nav.main .current-menu-ancestor > a { color: var(--ink); border-bottom-color: var(--accent); }

/* Light / dark switch.

   Hidden until the head script confirms JavaScript is running, so nobody is
   offered a control that cannot work. Because that script runs before the body
   paints, the button is never visible-then-gone and the header does not shift.
   44px square meets the minimum touch target even though the glyph is 20px. */
.theme-toggle { display: none; }
.js .theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	background: transparent;
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.theme-toggle svg { display: block; }

/* One icon at a time: the moon offers dark, the sun offers a way back. */
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

.head-cta { display: flex; align-items: center; gap: .8rem; flex: none; }
.head-phone {
	font-family: var(--display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	color: var(--ink);
	white-space: nowrap;
	line-height: 1.1;
}
.head-phone small {
	display: block;
	font-family: var(--mono);
	font-size: .55rem;
	letter-spacing: .13em;
	color: var(--ok);
	font-weight: 700;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   06 HERO & SPEC BAND
   -------------------------------------------------------------------------- */
/* Photo-led hero: the fleet image is the ground, with a navy scrim heavy
   enough on the text side to hold AA contrast and light enough on the far
   side that the photograph is still doing work. */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--accent-deep);
	color: #F2F4FA;
	overflow: hidden;
}
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(20,31,66,.96) 0%, rgba(20,31,66,.92) 38%, rgba(20,31,66,.62) 68%, rgba(20,31,66,.42) 100%);
}
.hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 5px;
	background: var(--pop-graphic);
}
.hero .shell {
	position: relative;
	padding-top: clamp(3rem, 8vw, 6rem);
	padding-bottom: clamp(3.25rem, 8vw, 6rem);
	max-width: var(--maxw);
}
.hero-copy { max-width: 34rem; }
.hero .eyebrow { color: var(--red-300); }
.hero h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.5rem, 6.2vw, 4.5rem);
	line-height: .95;
	letter-spacing: -.005em;
	text-transform: uppercase;
	margin: .75rem 0 0;
}
.hero h1 em { font-style: normal; color: var(--red-300); }
.hero .sub {
	font-size: 1.08rem;
	line-height: 1.55;
	max-width: 46ch;
	margin-top: 1.1rem;
	color: rgba(242,244,250,.92);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(255,255,255,.18);
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(242,244,250,.86);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust b { color: var(--red-300); }

.hero-caption {
	position: absolute;
	right: var(--pad);
	bottom: 1.4rem;
	max-width: 16rem;
	text-align: right;
	font-family: var(--mono);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(242,244,250,.6);
}

/* Page hero for interior pages */
.page-hero {
	background: var(--accent-deep);
	color: #F2F4FA;
	padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.25rem, 4vw, 3.25rem);
	border-bottom: 5px solid var(--pop-graphic);
}
.page-hero h1 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: .98;
	text-transform: uppercase;
	margin: .6rem 0 0;
	max-width: 22ch;
}
.page-hero .eyebrow { color: var(--red-300); }
.page-hero .standfirst {
	margin-top: 1rem;
	font-size: 1.05rem;
	max-width: 58ch;
	color: rgba(242,244,250,.9);
}
.page-hero .hero-actions { margin-top: 1.4rem; }

/* Split hero: copy beside a photograph.

   The navy ground stays — it is the brand field and it guarantees the text
   contrast rather than depending on whatever is in the top-left of a photo.
   The photo sits as a discrete panel rather than bleeding to the edge, which
   is what lets a 4:3 phone shot sit here without being cropped to a strip. */
.page-hero-photo .shell {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.page-hero-photo .page-hero-copy { min-width: 0; }
.page-hero-photo h1 { max-width: 16ch; }
.page-hero-photo .standfirst { max-width: 46ch; }

.page-hero-figure { margin: 0; min-width: 0; }
.page-hero-figure picture { display: block; }
.page-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	/* A hairline of the logo red ties the panel to the brand without a caption. */
	border-bottom: 4px solid var(--pop-graphic);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 62rem) {
	.page-hero-photo .shell { grid-template-columns: minmax(0, 1fr) 34rem; }
}

/* Below the split breakpoint the photo follows the copy, so the H1 is still
   the first thing read on a phone. */
@media (max-width: 61.999rem) {
	.page-hero-figure { margin-top: 1.75rem; }
	.page-hero-figure img { aspect-ratio: 16 / 10; }
}

.crumbs {
	font-family: var(--mono);
	font-size: .67rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(242,244,250,.62);
	margin: 0 0 .25rem;
}
.crumbs a { color: rgba(242,244,250,.78); text-decoration: none; }
.crumbs a:hover { color: var(--red-300); }
.crumbs span { padding: 0 .4rem; }

/* The numbers band sits light, not dark: three stacked dark slabs in a row
   was what made the page feel heavy. */
.specs {
	background: var(--surface-2);
	color: var(--ink);
	border-bottom: 1px solid var(--rule);
}
.specs .row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.spec {
	padding: 1.5rem .85rem;
	border-left: 1px solid var(--rule);
	text-align: center;
}
.spec:first-child { border-left: 0; }
.spec .n {
	font-family: var(--display);
	font-size: 2.35rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.spec .n sup { font-size: .44em; color: var(--pop-text); }
.spec .l {
	margin-top: .5rem;
	font-family: var(--mono);
	font-size: .62rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   07 SECTIONS, CARDS, CHIPS, STEPS
   -------------------------------------------------------------------------- */
.card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 1.5rem 1.4rem 1.6rem;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.band-alt .card { background: var(--ground); }
.card h3 {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.05;
	margin: .8rem 0 .6rem;
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--accent); }
.card p { font-size: .93rem; color: var(--ink-2); }
.card .card-body { flex: 1; }
.card .icon { color: var(--accent); }

.factlist {
	margin: 1rem 0 1.15rem;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem .9rem;
	font-family: var(--mono);
	font-size: .73rem;
	border-top: 1px solid var(--rule);
	padding-top: .9rem;
}
.factlist dt { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.factlist dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
	font-family: var(--mono);
	font-size: .76rem;
	font-weight: 600;
	padding: .42rem .7rem;
	background: var(--surface);
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	color: var(--ink-2);
}
.band-alt .chip { background: var(--ground); }
/* Two classes, not one: `.band-alt .chip` above is also (0,2,0), and a plain
   `.chip-key` loses to it — which stripped the navy ground off the key chips
   inside alt bands while leaving their text white. Invisible, in both themes. */
.chip.chip-key { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.block-head {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 .9rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--rule);
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.step { padding: 1.4rem 1.35rem; border-left: 3px solid var(--rule); }
.step:first-child { border-left-color: var(--pop-graphic); }
.step .num { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.step h3 { font-size: 1.02rem; margin: .5rem 0 .4rem; }
.step p { font-size: .89rem; color: var(--ink-2); margin: 0; }
.step .when {
	display: inline-block;
	margin-top: .7rem;
	font-family: var(--mono);
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--accent);
	background: var(--accent-soft);
	padding: .22rem .5rem;
	border-radius: var(--radius);
}
:root[data-theme="dark"] .step .when,
:root:not([data-theme="light"]) .step .when { color: var(--navy-100); }

.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.trust { display: flex; gap: .9rem; align-items: flex-start; }
.trust .mark {
	flex: none;
	min-width: 2.6rem; height: 2.6rem;
	padding: 0 .4rem;
	display: grid; place-items: center;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius);
	font-family: var(--display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .02em;
}
.trust h3 { font-size: .97rem; margin: 0 0 .25rem; }
.trust p { font-size: .86rem; color: var(--muted); margin: 0; }

.callout {
	background: var(--accent-soft);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	margin: 1.75rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

.cta-band {
	background: var(--accent-deep);
	color: #F2F4FA;
	padding: clamp(2.25rem,5vw,3.5rem) 0;
	border-top: 5px solid var(--pop-graphic);
}
.cta-band .inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: space-between;
}
.cta-band h2 {
	font-family: var(--display);
	font-size: clamp(1.7rem, 3.5vw, 2.5rem);
	text-transform: uppercase;
	line-height: 1.03;
	margin: 0;
	max-width: 20ch;
}
.cta-band p { margin: .6rem 0 0; color: rgba(242,244,250,.88); max-width: 46ch; }
.cta-band .actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.callbox {
	padding: 1.15rem 1.25rem;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius);
}
.callbox .k {
	font-family: var(--mono);
	font-size: .64rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .85;
}
.callbox .v {
	font-family: var(--display);
	font-size: 2rem;
	font-weight: 700;
	margin-top: .2rem;
	display: block;
	text-decoration: none;
	color: inherit;
}
.callbox p { font-size: .84rem; margin: .5rem 0 0; opacity: .88; }

/* --------------------------------------------------------------------------
   08 FORMS
   -------------------------------------------------------------------------- */
.form-card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-top: 4px solid var(--pop-graphic);
	border-radius: var(--radius);
	padding: 1.75rem 1.6rem 1.85rem;
	box-shadow: var(--shadow);
}
.band-alt .form-card { background: var(--ground); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label {
	font-family: var(--mono);
	font-size: .65rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 700;
}
.field .req { color: var(--pop); }
.field input, .field select, .field textarea {
	font-family: var(--sans);
	font-size: .95rem;
	padding: .62rem .7rem;
	background: var(--ground);
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	color: var(--ink);
	width: 100%;
}
.band-alt .field input, .band-alt .field select, .band-alt .field textarea { background: var(--surface); }
.field textarea { resize: vertical; min-height: 5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field .hint { font-size: .76rem; color: var(--muted); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--bad-tx); }
.field .err { font-size: .76rem; color: var(--bad-tx); font-weight: 600; }

/* Honeypot — hidden from people, visible to bots. Not display:none, which
   some bots detect and skip. */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.form-foot {
	margin-top: 1.3rem;
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	align-items: center;
	justify-content: space-between;
}
.form-foot .note { font-size: .78rem; color: var(--muted); margin: 0; max-width: 30ch; }

.notice {
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
	font-size: .95rem;
	border-left: 4px solid;
}
.notice p:last-child { margin-bottom: 0; }
.notice-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.notice-bad { background: var(--bad-bg); color: var(--bad-tx); border-color: var(--bad-tx); }
.notice-warn { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-tx); }

/* --------------------------------------------------------------------------
   09 TABLES & PROSE
   -------------------------------------------------------------------------- */
.prose { max-width: var(--maxw-prose); }
.prose h2 {
	font-family: var(--display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	text-transform: uppercase;
	line-height: 1.05;
	margin: 2.5rem 0 .75rem;
}
.prose h3 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.prose > *:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--pop-graphic); }
.prose blockquote {
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 4px solid var(--accent);
	color: var(--ink-2);
	font-size: 1.05rem;
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	min-width: 34rem;
}
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--rule); }
thead th {
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 2px solid var(--rule-2);
	white-space: nowrap;
}
tbody tr:hover { background: var(--surface-2); }
td + td, th + th { font-variant-numeric: tabular-nums; }

.faq-item {
	border-bottom: 1px solid var(--rule);
	padding: 1.1rem 0;
}
.faq-item h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.faq-item p { margin: 0; color: var(--ink-2); }

.deflist dt {
	font-weight: 700;
	font-family: var(--mono);
	font-size: .9rem;
	color: var(--accent);
	margin-top: 1.25rem;
}
.deflist dd { margin: .25rem 0 0; color: var(--ink-2); font-size: .95rem; }

/* Post/blog listing */
.post-list { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.post-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-card .pad { padding: 1.15rem 1.25rem 1.35rem; }
.post-card h2 { font-size: 1.2rem; margin: .3rem 0 .5rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.post-card time { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-card p { font-size: .9rem; color: var(--ink-2); margin: 0; }

.pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; }
.pagination .page-numbers {
	padding: .45rem .8rem;
	border: 1px solid var(--rule-2);
	border-radius: var(--radius);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
}
.pagination .current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   10 FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: var(--dark-ink); padding: 3rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
.site-footer h2 {
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--red-300);
	margin: 0 0 .8rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: rgba(232,235,242,.82); text-decoration: none; font-size: .88rem; }
.site-footer a:hover { color: var(--red-300); }
.site-footer .brand .name { color: #fff; }
.site-footer .about { font-size: .87rem; color: rgba(232,235,242,.66); margin-top: .9rem; max-width: 36ch; }
.foot-phone {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--red-300) !important;
	text-decoration: none;
}
.foot-legal {
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .05em;
	color: rgba(232,235,242,.6);
}

/* --------------------------------------------------------------------------
   11 UTILITIES & RESPONSIVE
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.split-even { grid-template-columns: 1fr 1fr; }
.stack > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.center { text-align: center; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* Below the full shell width the nav, phone and quote button take the whole
   bar, so the tagline is dropped rather than allowed to wrap the header onto a
   second line. The name and mark always stay. */
@media (max-width: 78rem) {
	.masthead .brand .tag { display: none; }
}

@media (max-width: 62rem) {
	.hero-caption { display: none; }
	.split, .split-even { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr 1fr; }

	.nav-toggle { display: block; }
	nav.main {
		display: none;
		flex-basis: 100%;
		order: 10;
		margin-left: 0;
		border-top: 1px solid var(--rule);
		padding-top: .9rem;
		margin-top: .3rem;
	}
	nav.main.is-open { display: block; }
	nav.main ul { flex-direction: column; gap: .1rem; }
	nav.main a { display: block; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
	.masthead .shell { flex-wrap: wrap; }
	.head-cta { order: 5; }
}

@media (max-width: 40rem) {
	.fields { grid-template-columns: 1fr; }
	.foot-grid { grid-template-columns: 1fr; }
	.step { border-left: 0; border-top: 3px solid var(--rule); }
	.step:first-child { border-top-color: var(--pop-graphic); }
	.spec { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
	.head-phone { font-size: 1.15rem; }
	.topline .badges:last-child { display: none; }
}

@media print {
	.masthead, .topline, .cta-band, .site-footer, .hero-actions, .nav-toggle { display: none !important; }
	body { background: #fff; color: #000; }
}