/* ==========================================================================
   Fleetia — site styles
   Light page, light header and footer, Fleetia's green-to-lime brand gradient.
   Single stylesheet, no framework. Sections follow the page order.

   1.  Fonts
   2.  Tokens
   3.  Reset & base
   4.  Layout primitives
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero
   8.  Credibility strip
   9.  Product cards
   10. Flow
   11. Reasons
   12. Pricing
   13. Contact CTA band
   14. Footer
   15. Subpage headers
   16. Product detail sections
   17. Contact page
   18. Utilities
   19. Motion & accessibility
   ========================================================================== */


/* 1. FONTS ================================================================= */

/* Self-hosted so the site makes no third-party requests. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. TOKENS ================================================================ */

:root {
	/* Brand. --green-core and --lime are the logo's own gradient stops and are
	   used as fills only. Text and icons use --green, a darkened cut that
	   clears 4.5:1 on both --bg and --footer-bg; --green-core does not. */
	--green-core:     #3D9735;
	--lime:           #CCD723;
	--green:          #317A2B;
	--green-dark:     #276322;
	--green-bright:   #6FBF4A;  /* on dark backgrounds only */
	--green-tint:     #EFF5EC;
	--green-tint-2:   #E2EBDC;

	/* Fleetia's CTA gradient. Its light end is unreadable under white text
	   (1.58:1), so every surface using it sets colour to --ink, which clears
	   5.11:1 at the green end and 11.99:1 at the lime end. */
	--brand-gradient: linear-gradient(130deg, var(--green-core) 0%, var(--lime) 100%);

	/* Surfaces & text */
	--ink:            #14201A;  /* CTA band; also the text colour on gradients */
	--bg:             #FBFBFA;
	--surface:        #FFFFFF;
	--footer-bg:      #F2F5F0;
	--text:           #1A1F23;
	--muted:          #5E6A70;
	--muted-dark:     #AEB9B2;  /* muted text on the dark band */
	--nav-link:       #3A4348;
	--line:           #E4E7E0;
	--line-strong:    #D3D9CF;
	--line-dark:      rgba(255, 255, 255, .12);

	/* Shape */
	--radius:         10px;
	--radius-sm:      6px;
	--shadow:         0 1px 2px rgba(16, 21, 19, .04), 0 10px 28px rgba(16, 21, 19, .05);
	--shadow-lift:    0 2px 6px rgba(16, 21, 19, .06), 0 18px 40px rgba(16, 21, 19, .09);

	/* Rhythm */
	--container:      1180px;
	--gutter:         24px;
	--section-y:      clamp(56px, 7vw, 104px);
	--header-h:       72px;

	--ease:           cubic-bezier(.22, .61, .36, 1);
}


/* 3. RESET & BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* <picture> is a WebP-selection wrapper, not a layout box. display:contents
   removes it from the box tree so every `.thing img { ... }` rule below keeps
   matching the image directly — without this, percentage heights like
   `.product__media img { height: 100% }` would resolve against the wrapper
   instead of the sized container, and the cover-crops would collapse. */
picture { display: contents; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--text);
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }

strong { font-weight: 600; }

::selection { background: var(--green); color: #fff; }


/* 4. LAYOUT PRIMITIVES ===================================================== */

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

.section { padding-block: var(--section-y); }

/* Thin, very light separators instead of boxing every section. */
.section--divided { border-top: 1px solid var(--line); }
.section--tint { background: var(--green-tint); }

.section__head {
	max-width: 62ch;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	margin: 0 0 14px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
}

.lede {
	font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
	color: var(--muted);
}

.section__foot { margin-top: 44px; text-align: center; }

.skip-link {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--green);
	color: #fff;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }


/* 5. BUTTONS & LINKS ======================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: filter .18s var(--ease), background-color .18s var(--ease),
		border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

/* Dark text on the brand gradient — see the --brand-gradient note in Tokens. */
.btn--primary {
	background: var(--brand-gradient);
	color: var(--ink);
}
.btn--primary:hover { filter: saturate(1.12) brightness(1.04); color: var(--ink); }

.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { background: #fff; border-color: var(--green); color: var(--green-dark); }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* "Läs mer →" text link */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--green);
}
.arrow-link svg { transition: transform .2s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }


/* 6. HEADER / NAVIGATION =================================================== */

/* Light header: the Fleetia wordmark is near-black (#202020) and is used
   as-authored, so the bar it sits on has to stay light. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck {
	border-bottom-color: var(--line-strong);
	box-shadow: 0 6px 24px rgba(16, 21, 19, .07);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.brand { flex: none; margin-right: auto; }
.brand img { width: 136px; }

.nav { display: flex; align-items: center; gap: 4px; }

/* :not(.nav__cta) matters — .nav a would otherwise out-rank .btn on the CTA. */
.nav > a:not(.nav__cta) {
	position: relative;
	padding: 8px 14px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--nav-link);
	border-radius: var(--radius-sm);
	transition: color .18s var(--ease);
}
.nav > a:not(.nav__cta):hover { color: var(--text); }

.nav > a:not(.nav__cta)[aria-current='page'] { color: var(--green-dark); }
.nav > a:not(.nav__cta)[aria-current='page']::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	background: var(--brand-gradient);
	border-radius: 2px;
}

.nav__cta {
	margin-left: 18px;
	padding: 10px 20px;
	font-size: .8rem;
	line-height: 1.35;
}

.lang-switch {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: 18px;
}

.lang-flag {
	display: block;
	width: 26px;
	height: 17px;
	border-radius: 3px;
	overflow: hidden;
	opacity: .5;
	box-shadow: 0 0 0 1px rgba(20, 32, 26, .18);
	transition: opacity .18s var(--ease), box-shadow .18s var(--ease);
}
.lang-flag svg { width: 100%; height: 100%; }
.lang-flag:hover { opacity: .9; }
.lang-flag.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--green); }

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	margin: 4px auto;
	background: var(--text);
	border-radius: 2px;
	transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
	.nav-toggle { display: block; }

	.nav {
		position: fixed;
		inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px var(--gutter) 28px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 14px 30px rgba(16, 21, 19, .1);
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
	}
	.nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

	.nav > a:not(.nav__cta) {
		padding: 15px 4px;
		font-size: .95rem;
		letter-spacing: .04em;
		text-transform: none;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
	}
	.nav > a:not(.nav__cta)[aria-current='page']::after { display: none; }

	.nav__cta { margin: 20px 0 0; justify-content: center; }

	.lang-switch { margin: 20px 0 0; padding: 0; justify-content: center; }
	.lang-flag { width: 34px; height: 22px; }
}


/* Language banner — quiet strip under the header, dismissible. */
.lang-banner {
	background: var(--green-tint);
	border-bottom: 1px solid var(--green-tint-2);
	font-size: .92rem;
}
.lang-banner[hidden] { display: none; }

.lang-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	padding-block: 11px;
}
.lang-banner p { margin: 0; color: var(--green-dark); }

.lang-banner__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	color: var(--green);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.lang-banner__link:hover { color: var(--green-dark); }
.lang-banner__link svg { transition: transform .2s var(--ease); }
.lang-banner__link:hover svg { transform: translateX(3px); }

.lang-banner__close {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--green-dark);
	cursor: pointer;
	opacity: .65;
	transition: opacity .16s var(--ease), background-color .16s var(--ease);
}
.lang-banner__close:hover { opacity: 1; background: var(--green-tint-2); }


/* 7. HERO ================================================================== */

.hero { padding-block: clamp(44px, 5.5vw, 80px) clamp(36px, 4vw, 56px); }

.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.hero h1 { margin-bottom: .45em; }

/* Solid green, deliberately not the brand gradient. As *text* the gradient
   fails contrast badly at its lime end — 1.52:1 on the page background, under
   even the 3:1 large-text minimum — so the second half of the headline would
   fade out. The gradient stays on fills (buttons, step numbers, rules) where
   it is the background rather than the foreground. */
.hero h1 .accent { display: block; color: var(--green); }

.hero__lede {
	max-width: 46ch;
	margin-bottom: 30px;
	font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
	color: var(--muted);
}

/* The product mockups are cut-outs on transparency, so the hero slot carries
   no frame, crop or shadow of its own — the artwork floats on the page. */
.hero__media img { width: 100%; }

@media (max-width: 860px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__media { order: 2; max-width: 520px; margin-inline: auto; }
	.hero__copy { order: 1; }
}


/* 8. CREDIBILITY STRIP ===================================================== */

.credibility {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	padding-block: clamp(28px, 3.5vw, 44px);
	border-top: 1px solid var(--line);
}

.credibility li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--muted);
}
.credibility svg { flex: none; margin-top: 2px; color: var(--green); }

@media (max-width: 880px) { .credibility { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 520px) { .credibility { grid-template-columns: 1fr; } }


/* 9. PRODUCT CARDS ========================================================= */

.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.product {
	position: relative;  /* anchors the whole-card link overlay */
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;  /* clips the media to the card's rounded corners */
	transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.product:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

/* Shallow crop of the square source, so three photos don't push the lists down. */
.product__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-tint); }
.product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.product:hover .product__media img { transform: scale(1.035); }

.product__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 28px; }

.product h3 { margin-bottom: 4px; font-size: 1.15rem; }
/* The whole card is clickable, but only the title carries the link. */
.product h3 a { color: inherit; text-decoration: none; }
.product h3 a::after { content: ''; position: absolute; inset: 0; }

.product__subtitle {
	margin: 0 0 16px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--green);
}

.product__intro { margin-bottom: 22px; color: var(--muted); font-size: .96rem; }

.product .arrow-link { margin-top: auto; }

@media (max-width: 940px) {
	.products { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}


/* 10. FLOW ================================================================= */

.flow {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	position: relative;
}

/* Subtle connecting line rather than heavy UI. */
.flow::before {
	content: '';
	position: absolute;
	top: 21px;
	left: 10%;
	right: 10%;
	height: 1px;
	background: var(--line-strong);
}

.step { position: relative; text-align: center; padding-inline: 6px; }

.step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0 auto 18px;
	background: var(--brand-gradient);
	color: var(--ink);
	border: 4px solid var(--bg);
	border-radius: 50%;
	font-size: .8rem;
	font-weight: 700;
}

.step__icon { display: grid; place-items: center; height: 34px; margin-bottom: 12px; color: var(--green); }

.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .9rem; line-height: 1.5; color: var(--muted); }

@media (max-width: 880px) {
	/* Vertical rail on mobile — still one continuous, readable sequence. */
	.flow { grid-template-columns: 1fr; gap: 0; max-width: 480px; margin-inline: auto; }
	.flow::before { top: 12px; bottom: 30px; left: 21px; right: auto; width: 1px; height: auto; }

	.step {
		display: grid;
		grid-template-columns: 42px 1fr;
		column-gap: 20px;
		text-align: left;
		padding: 0 0 30px;
	}
	.step__num { margin: 0; grid-row: 1; }
	.step__icon { display: none; }
	.step h3 { grid-column: 2; margin-top: 7px; }
	.step p { grid-column: 2; }
	.step:last-child { padding-bottom: 0; }
}


/* 11. REASONS ============================================================== */

.reasons__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.reasons__list { display: grid; gap: 18px; }
.reasons__list li { display: flex; gap: 14px; align-items: flex-start; }
.reasons__list svg { flex: none; margin-top: 3px; color: var(--green); }
.reasons__list h3 { font-size: 1.02rem; margin-bottom: 2px; }
.reasons__list p { font-size: .93rem; color: var(--muted); }

/* The same list used on its own, centred, rather than beside a figure. */
.reasons__list--narrow { max-width: 560px; margin-inline: auto; }

.reasons__figure img { width: 100%; }

@media (max-width: 860px) {
	.reasons__grid { grid-template-columns: 1fr; }
	.reasons__figure { max-width: 400px; margin-inline: auto; }
}


/* 12. PRICING ============================================================== */

.price-card {
	position: relative;
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(32px, 4vw, 48px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	overflow: hidden;
}

/* Brand gradient as a top edge rather than a filled panel, so the price
   itself stays the highest-contrast thing in the card. */
.price-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--brand-gradient);
}

.price-card__label {
	margin: 0 0 6px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
}

/* Wraps because the period carries the per-user qualifier ("per
   användare/kvartal"), which is too long to sit beside the amount on narrow
   screens. It must never be dropped — the amount alone misstates the price. */
.price-card__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 8px;
	margin-bottom: 10px;
}
.price-card__amount {
	font-size: clamp(2.6rem, 2rem + 2.6vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
}
.price-card__period { font-size: 1.05rem; color: var(--muted); }

.price-card__note { margin-bottom: 26px; font-size: .95rem; color: var(--muted); }

.price-card .bullet-list {
	max-width: 340px;
	margin-inline: auto;
	margin-bottom: 30px;
	text-align: left;
}

/* Offer strip under the price — the free demo and free first month. */
.price-offer {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	max-width: 560px;
	margin: 22px auto 0;
	padding: 18px 22px;
	background: var(--green-tint);
	border-radius: var(--radius);
	font-size: .95rem;
	color: var(--green-dark);
	text-align: left;
}
.price-offer svg { flex: none; margin-top: 3px; color: var(--green); }
.price-offer p { margin: 0; }


/* 13. CONTACT CTA BAND ===================================================== */

.cta-band {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	align-items: stretch;
	background: var(--ink);
	border-radius: var(--radius);
	overflow: hidden;
	color: #fff;
}

.cta-band__media { min-height: 220px; display: grid; place-items: center; padding: 24px; }
.cta-band__media img { width: 100%; height: auto; }

.cta-band__body {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: clamp(28px, 4vw, 48px);
}

.cta-band h2 { color: #fff; margin-bottom: 10px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.cta-band p { color: var(--muted-dark); max-width: 46ch; }

@media (max-width: 800px) {
	.cta-band { grid-template-columns: 1fr; }
	.cta-band__media { max-height: 220px; }
	.cta-band__media img { max-height: 172px; width: auto; }
}


/* 14. FOOTER =============================================================== */

.site-footer {
	background: var(--footer-bg);
	border-top: 1px solid var(--line);
	color: var(--muted);
	padding-top: clamp(48px, 5vw, 68px);
	font-size: .93rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: clamp(28px, 4vw, 48px);
	padding-bottom: 44px;
}

.site-footer img.footer-logo { width: 150px; margin-bottom: 16px; }

.footer-heading {
	margin-bottom: 16px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text);
}

.site-footer a { color: var(--muted); text-decoration: none; transition: color .16s var(--ease); }
.site-footer a:hover { color: var(--green-dark); }

.site-footer__tagline { color: var(--text); font-weight: 600; }

.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }

.footer-contact { display: grid; gap: 12px; }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { flex: none; margin-top: 4px; color: var(--green); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: center;
	padding-block: 22px;
	border-top: 1px solid var(--line);
	text-align: center;
	font-size: .85rem;
	color: #77827B;
}

@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }


/* 15. SUBPAGE HEADERS ====================================================== */

.page-head { padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3.5vw, 44px); }
.page-head h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); margin-bottom: .35em; }
.page-head .lede { max-width: 60ch; }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	font-size: .82rem;
	color: var(--muted);
}
.breadcrumb a { text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb span[aria-hidden] { opacity: .5; }


/* 16. PRODUCT DETAIL SECTIONS ============================================== */

.detail { display: grid; gap: clamp(32px, 4vw, 52px); }

.detail__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.detail__intro h2 { margin-bottom: 4px; }
.detail__intro p { color: var(--muted); }
.detail__intro .product__subtitle { margin-bottom: 18px; font-size: 1.05rem; }

/* Mockups again — no frame, so they read as artwork rather than screenshots
   pasted into a box. */
.detail__media img { width: 100%; }

/* Photography does need a frame: unlike the cut-out mockups it has edges, and
   without a crop a square photo would tower over the copy beside it. */
.detail__media--framed {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow);
}
.detail__media--framed img { height: 100%; object-fit: cover; }

/* Alternate the image side so the three blocks don't read as a list. */
.detail--reverse .detail__intro { order: 2; }

.detail__caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 44px;
}

@media (max-width: 880px) {
	.detail__top { grid-template-columns: 1fr; }
	.detail--reverse .detail__intro { order: 0; }
	.detail__caps { grid-template-columns: 1fr; }
}

.bullet-list { display: grid; gap: 11px; margin-top: 6px; }
.bullet-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.bullet-list svg { flex: none; margin-top: 4px; color: var(--green); }

.caps-group h3 {
	margin-bottom: 10px;
	font-size: .78rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--green);
}


/* 17. CONTACT PAGE ========================================================= */

.contact-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.contact-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 24px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.contact-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: inherit; }
.contact-card svg { flex: none; margin-top: 3px; color: var(--green); }
.contact-card__label {
	display: block;
	margin-bottom: 2px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}
.contact-card__value { font-weight: 600; }


/* 18. UTILITIES ============================================================ */

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.mt-l { margin-top: 26px; }
.mb-m { margin-bottom: 32px; }


/* 19. MOTION & ACCESSIBILITY =============================================== */

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-radius: 3px;
}
.cta-band :where(a, button):focus-visible { outline-color: var(--green-bright); }

/* Progressive enhancement: JS adds .reveal-ready, so no-JS keeps everything visible. */
.reveal-ready .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.reveal-ready .reveal { opacity: 1; transform: none; }
}