/* ==========================================================================
   Myfront AB — site styles
   Scandinavian / minimal: light page, dark header & footer, green accent.
   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.  Competence areas
   10. Process
   11. Projects
   12. About
   13. Why Myfront
   13b. Presentation video
   14. Contact CTA band
   15. Footer
   16. Subpage headers
   17. Case study pages
   18. Services page
   19. Contact page
   20. 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 */
	--ink:            #0F1113;  /* header & footer */
	--ink-soft:       #171B1E;
	--green:          #2A6B36;
	--green-dark:     #1F5228;
	--green-bright:   #4E9E5C;  /* on dark backgrounds */
	--green-tint:     #EEF4EF;
	--green-tint-2:   #E2EBE4;

	/* Surfaces & text */
	--bg:             #FBFBFA;
	--surface:        #FFFFFF;
	--text:           #1A1F23;
	--muted:          #5E6A70;
	--muted-dark:     #A7B2B6;  /* muted text on dark */
	--line:           #E6E7E3;
	--line-dark:      rgba(255, 255, 255, .12);

	/* Shape */
	--radius:         10px;
	--radius-sm:      6px;
	--shadow:         0 1px 2px rgba(16, 19, 21, .04), 0 10px 28px rgba(16, 19, 21, .05);
	--shadow-lift:    0 2px 6px rgba(16, 19, 21, .06), 0 18px 40px rgba(16, 19, 21, .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, picture { display: block; max-width: 100%; }
img { height: auto; }

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 { 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__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);
}

.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: 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; }

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

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

/* Filled brand green — used for the header CTA so it reads against the dark bar.
   White on #31793F is 5.33:1, and the fill sits 3.55:1 clear of the header. */
.btn--brand { background: #31793F; color: #fff; border-color: #31793F; }
.btn--brand:hover { background: #3A8B4A; border-color: #3A8B4A; color: #fff; }

.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 =================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ink);
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck {
	border-bottom-color: var(--line-dark);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

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

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

.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: #D3D8DA;
	border-radius: var(--radius-sm);
	transition: color .18s var(--ease);
}
.nav > a:not(.nav__cta):hover { color: #fff; }

.nav > a:not(.nav__cta)[aria-current='page'] { color: var(--green-bright); }
.nav > a:not(.nav__cta)[aria-current='page']::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	background: var(--green-bright);
	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: .45;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
	transition: opacity .18s var(--ease), box-shadow .18s var(--ease);
}
.lang-flag svg { width: 100%; height: 100%; }
.lang-flag:hover { opacity: .85; }
.lang-flag.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--green-bright); }

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	margin: 4px auto;
	background: #fff;
	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(--ink);
		border-bottom: 1px solid var(--line-dark);
		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-dark);
		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;
		border-left: 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 #D8E3DA;
	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: #DCE8DE; }


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

/* Hero content sits on the light page background, not on the dark header. */
.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; }
.hero h1 .accent { color: var(--green); display: block; }

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

/* Kept deliberately compact so it never dominates the first viewport. */
.hero__media {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	aspect-ratio: 8 / 5;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Video in the hero slot: 16:9 rather than 8:5, and it must not be clipped by
   the wrapper's overflow, so the wrapper drops its own frame and the player
   carries it instead. */
.hero__media--video {
	aspect-ratio: auto;
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}
.hero__media--video .video__player { aspect-ratio: 16 / 9; }

.hero__media-note {
	margin: 12px 0 0;
	font-size: .84rem;
	color: var(--muted);
	text-align: center;
}

@media (max-width: 860px) {
	.hero__grid { grid-template-columns: 1fr; }
	/* Image below the text on mobile, per the brief. */
	.hero__media { order: 2; aspect-ratio: 16 / 10; }
	.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. COMPETENCE AREAS ====================================================== */

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

/* One of the few places a card genuinely helps hierarchy. */
.area {
	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);
}
.area:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

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

.area__body { display: flex; flex-direction: column; flex: 1; padding: 28px; }

.area h3 a { color: inherit; text-decoration: none; }
.area h3 a::after { content: ''; position: absolute; inset: 0; }

.area h3 { margin-bottom: 4px; }

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

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

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


/* 10. PROCESS ============================================================== */

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

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

.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(--green);
	color: #fff;
	border: 4px solid var(--bg);
	border-radius: 50%;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.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. */
	.process { grid-template-columns: 1fr; gap: 0; max-width: 480px; margin-inline: auto; }
	.process::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. PROJECTS ============================================================= */

.projects {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.projects--all { grid-template-columns: repeat(3, 1fr); }

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

.project__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--green-tint); }
.project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease);
}
.project:hover .project__media img { transform: scale(1.035); }

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

.project h3 { font-size: 1.12rem; margin-bottom: 8px; }

/* The whole card is clickable, but only the title carries the link. */
.project h3 a { color: inherit; text-decoration: none; }
.project h3 a::after { content: ''; position: absolute; inset: 0; }

.project p { margin-bottom: 20px; font-size: .94rem; color: var(--muted); }

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

@media (max-width: 940px) {
	.projects, .projects--all { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.projects, .projects--all { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}

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


/* 12. ABOUT ================================================================ */

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

.about__portrait {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1;
	box-shadow: var(--shadow);
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }

.about__copy p { color: var(--muted); }
.about__copy p:first-of-type { color: var(--text); font-size: 1.1rem; font-weight: 600; }

@media (max-width: 760px) {
	.about__grid { grid-template-columns: 1fr; }
	.about__portrait { max-width: 240px; }
}


/* 13. WHY MYFRONT ========================================================== */

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

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

.why__figure {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.why__figure img { width: 100%; height: auto; }

@media (max-width: 860px) {
	.why__grid { grid-template-columns: 1fr; }
	.why__figure { max-width: 300px; margin-inline: auto; }
}


/* Presentation video. preload="none" on the element keeps the file off the
   initial load; the poster is what the page actually ships. */
.video { margin: 0 auto; max-width: 860px; }

.video__player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--ink);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.video__note {
	margin-top: 14px;
	text-align: center;
	font-size: .87rem;
	color: var(--muted);
}


/* 14. 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; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }

.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; }
.cta-band .btn--primary { background: var(--green); }
.cta-band .btn--primary:hover { background: #2F7A3E; }

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


/* 15. FOOTER =============================================================== */

.site-footer {
	background: var(--ink);
	color: var(--muted-dark);
	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: 168px; margin-bottom: 16px; }

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

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

.site-footer__tagline { color: #C6CED1; }

.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-bright); }

.site-footer__bottom {
	padding-block: 22px;
	border-top: 1px solid var(--line-dark);
	text-align: center;
	font-size: .85rem;
	color: #7E8A8F;
}

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


/* 16. 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; }


/* 17. CASE STUDY PAGES ===================================================== */

.case-hero {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	box-shadow: var(--shadow);
}
.case-hero img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) { .case-hero { aspect-ratio: 16 / 10; } }

.case-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 24px;
	padding-block: 32px;
	margin-top: 40px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.case-meta dt {
	margin-bottom: 4px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--green);
}
.case-meta dd { margin: 0; font-size: .95rem; }

.case-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.case-body__main > section + section { margin-top: clamp(32px, 4vw, 48px); }
.case-body__main h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); }
.case-body__main p { color: var(--muted); }
.case-body__main h2 + p { margin-top: 0; }

.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); }

/* Technology detail is evidence, kept away from the cards and low in the page. */
.tech-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tech-list li {
	padding: 6px 13px;
	background: var(--green-tint);
	border-radius: 100px;
	font-size: .82rem;
	color: var(--green-dark);
}

.case-body__side {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	display: grid;
	gap: 18px;
}

.case-aside {
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.case-aside h3 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--green); }
.case-aside p { font-size: .94rem; color: var(--muted); }
.case-aside .bullet-list li { font-size: .92rem; }

@media (max-width: 900px) {
	.case-body { grid-template-columns: 1fr; }
	.case-body__side { position: static; }
}

/* 18. SERVICES PAGE ======================================================== */

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

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

.service__intro h2 { margin-bottom: 4px; }
.service__intro p { color: var(--muted); }
.service__intro .area__subtitle { color: var(--green); margin-bottom: 18px; }

.service__media {
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow);
}
.service__media img { width: 100%; height: 100%; object-fit: cover; }

/* Alternate the image side so the three blocks don't read as a list. */
.service--reverse .service__top { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
.service--reverse .service__intro { order: 2; }

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

@media (max-width: 880px) {
	.service__top,
	.service--reverse .service__top { grid-template-columns: 1fr; }
	.service--reverse .service__intro { order: 0; }
	.service__caps { grid-template-columns: 1fr; }
}


/* 19. 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: #cfd8d0; 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; }


/* 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; }


/* 20. MOTION & ACCESSIBILITY =============================================== */

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
	border-radius: 3px;
}
.site-header :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.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; }
}

/* Added after first pass */
.area__subtitle--lg { font-size: 1.05rem; }