/*
Theme Name: Prodio
Version: 1.0
Description: Prodio - digitale partner. Hand-coded theme, no page builder.
Text Domain: prodio
*/

/* ---------- Fonts ---------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-400-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
	--blue: #1b5cf6;
	--blue-600: #1449d6;
	--blue-100: #e8f0ff;
	--navy: #0a1f3c;
	--ink: #0b1b33;
	--muted: #5b6b84;
	--line: #e4ebf7;
	--soft: #f4f8ff;
	--radius: 18px;
	--shadow: 0 18px 40px -22px rgba(12, 40, 90, .35);
	--shadow-sm: 0 10px 26px -18px rgba(12, 40, 90, .45);
	--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--max: 1200px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.container {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 28px;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 600;
	padding: 13px 22px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-primary {
	background: var(--blue);
	color: #fff;
	box-shadow: 0 14px 28px -16px rgba(27, 92, 246, .85);
}
.btn-primary:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); }
.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.btn-ghost:hover { background: var(--soft); color: var(--ink); }

/* ---------- Eyebrow / headings ---------- */
.eyebrow {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 12px;
}
.h2 {
	font-size: 40px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--ink);
}
.lead {
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}
.accent { color: var(--blue); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark {
	width: 34px; height: 34px; border-radius: 9px;
	background: linear-gradient(135deg, var(--blue), #3f7bff);
	color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.04em;
	display: inline-flex; align-items: center; justify-content: center;
}
.logo-text { font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }

.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list a {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
	padding: 8px 14px;
	border-radius: 8px;
	transition: color .18s ease, background .18s ease;
}
.nav-list a:hover { color: var(--blue); background: var(--soft); }
.header-cta { flex: 0 0 auto; }

.nav-toggle {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-size: 18px;
	cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f7faff 0%, #eef5ff 62%, #ffffff 100%);
	padding: 64px 0 96px;
}
.hero::before {
	content: "";
	position: absolute;
	width: 620px; height: 620px;
	right: -180px; top: -220px;
	background: radial-gradient(circle, rgba(27, 92, 246, .16), rgba(27, 92, 246, 0) 65%);
	pointer-events: none;
}
.hero::after {
	content: "";
	position: absolute;
	width: 480px; height: 480px;
	left: -200px; bottom: -220px;
	background: radial-gradient(circle, rgba(63, 123, 255, .14), rgba(63, 123, 255, 0) 65%);
	pointer-events: none;
}
.hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 40px;
	align-items: center;
}
.pill {
	display: inline-block;
	background: var(--blue-100);
	color: var(--blue);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.hero h1 {
	font-size: 60px;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
}
.hero-lead {
	font-size: 17px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 470px;
	margin-top: 20px;
}
.checks { margin-top: 26px; display: grid; gap: 10px; }
.checks li {
	position: relative;
	padding-left: 30px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
}
.checks li::before {
	content: "";
	position: absolute;
	left: 0; top: 1px;
	width: 19px; height: 19px;
	border-radius: 50%;
	background-color: var(--blue-100);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5cf6' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* monitor mockup */
.hero-visual { position: relative; }
.monitor {
	position: relative;
	z-index: 2;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 10px;
	box-shadow: 0 40px 80px -40px rgba(10, 31, 60, .55);
}
.monitor-bar { display: flex; gap: 6px; padding: 6px 8px 10px; }
.monitor-bar span { width: 9px; height: 9px; border-radius: 50%; background: #dfe7f4; }
.monitor-screen {
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(160deg, #0b2450 0%, #123a7a 55%, #1b5cf6 130%);
	padding: 26px 24px 0;
	min-height: 300px;
}
.mini-nav { display: flex; gap: 14px; margin-bottom: 26px; }
.mini-nav i { width: 34px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); }
.mini-nav i:first-child { width: 54px; background: #fff; }
.mini-h { width: 78%; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .92); margin-bottom: 10px; }
.mini-h.short { width: 52%; }
.mini-p { width: 64%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); margin: 16px 0 8px; }
.mini-p.two { width: 48%; margin-top: 0; }
.mini-btns { display: flex; gap: 8px; margin-top: 18px; }
.mini-btns span { height: 22px; width: 82px; border-radius: 6px; background: #fff; }
.mini-btns span + span { background: rgba(255, 255, 255, .24); width: 64px; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
.mini-cards div { height: 54px; border-radius: 8px 8px 0 0; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .14); }
.monitor-stand { width: 120px; height: 14px; margin: 0 auto; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #e7edf8, #cfd9ea); }
.monitor-base { width: 200px; height: 8px; margin: 0 auto; border-radius: 8px; background: #dbe4f3; }

/* ---------- Stats ---------- */
.stats { position: relative; z-index: 5; margin-top: -54px; }
.stats-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: var(--shadow);
	padding: 24px 26px;
}
.stat { display: flex; align-items: center; gap: 12px; }
.stat-icon {
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--blue-100);
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.stat-num { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.stat-label { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; margin-top: 2px; }

/* ---------- Services ---------- */
.services { padding: 96px 0 80px; }
.services-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 34px;
}
.services-head .h2 { max-width: 660px; }
.text-link { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 24px 22px;
	box-shadow: var(--shadow-sm);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); border-color: #cddcf9; box-shadow: var(--shadow); }
.card-icon {
	width: 46px; height: 46px;
	border-radius: 12px;
	background: var(--blue-100);
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.card h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.card-arrow {
	margin-top: auto;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.card:hover .card-arrow { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Why ---------- */
.why { background: var(--soft); padding: 96px 0 100px; }
.why-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
	align-items: center;
}
.why-card {
	min-height: 380px;
	border-radius: var(--radius);
	background: linear-gradient(150deg, #0b2450, #14417f 60%, #1b5cf6 130%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	box-shadow: 0 30px 60px -34px rgba(10, 31, 60, .6);
}
.why-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 70% at 20% 15%, rgba(255, 255, 255, .14), transparent 60%);
}
.why-card .logo-mark { width: 96px; height: 96px; border-radius: 26px; font-size: 46px; background: rgba(255, 255, 255, .14); }
.why-text .h2 { max-width: 420px; }
.why-text .lead { max-width: 470px; margin-top: 16px; }
.bullets { display: grid; gap: 14px; margin-top: 26px; }
.bullets li {
	position: relative;
	padding-left: 36px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
}
.bullets li::before {
	content: "";
	position: absolute;
	left: 0; top: -2px;
	width: 24px; height: 24px;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid var(--line);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 13px;
	background-repeat: no-repeat;
	background-position: center;
}
.quote {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 26px 22px;
	box-shadow: var(--shadow-sm);
	margin-top: 26px;
}
.quote-mark { font-size: 34px; line-height: 1; font-weight: 800; color: var(--blue); }
.quote p { font-size: 15px; line-height: 1.65; font-weight: 500; margin: 6px 0 14px; }
.stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 12px; }
.quote-who { display: flex; align-items: center; gap: 10px; }
.quote-avatar {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--blue-100);
	color: var(--blue);
	font-weight: 700;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.quote-who b { display: block; font-size: 13.5px; }
.quote-who em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ---------- CTA ---------- */
.cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #071a33 0%, #0d2f63 55%, #1449a8 100%);
	padding: 68px 0;
}
.cta-mountains { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; width: 100%; opacity: .34; pointer-events: none; }
.cta-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.cta h2 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #fff; margin-bottom: 8px; }
.cta p { font-size: 15px; color: rgba(255, 255, 255, .72); }
.cta-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cta .btn-primary { background: #fff; color: var(--ink); box-shadow: none; }
.cta .btn-primary:hover { background: #eef4ff; color: var(--ink); }
.cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.cta .btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 34px 0; background: #fff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { font-size: 14px; color: var(--muted); }
.footer-nav a:hover { color: var(--blue); }
.copy { font-size: 13px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.hero h1 { font-size: 46px; }
	.h2 { font-size: 33px; }
	.hero-grid { gap: 28px; }
	.services { padding: 72px 0 64px; }
	.services-grid { grid-template-columns: repeat(2, 1fr); }
	.why { padding: 72px 0 76px; }
	.why-grid { grid-template-columns: 1fr; gap: 34px; }
	.stats-inner { grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}

@media (max-width: 820px) {
	.main-nav {
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: #fff;
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		display: none;
		padding: 12px 20px 18px;
	}
	.main-nav.is-open { display: block; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
	.nav-toggle { display: inline-flex; margin-left: auto; }
	.header-cta { display: none; }
	.hero { padding: 44px 0 88px; }
	.hero-grid { grid-template-columns: 1fr; }
	.hero h1 { font-size: 40px; }
	.hero-visual { order: -1; }
	.monitor-screen { min-height: 240px; padding: 18px 16px 0; }
	.cta-inner { flex-direction: column; align-items: flex-start; }
	.footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 620px) {
	.container { padding: 0 20px; }
	.hero h1 { font-size: 33px; }
	.hero-lead { font-size: 15.5px; }
	.h2 { font-size: 27px; }
	.services-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.services-grid { grid-template-columns: 1fr; }
	.stats { margin-top: -40px; }
	.stats-inner { grid-template-columns: 1fr; padding: 18px 20px; }
	.cta h2 { font-size: 26px; }
	.cta-actions { width: 100%; flex-direction: column; }
	.cta-actions .btn { width: 100%; }
	.why-card { min-height: 260px; }
	.footer-nav { gap: 14px 18px; }
}

/* =========================================================
   Hero with the desk photo as background
   The photo has a calm left side, so the text sits over a soft
   white scrim and the monitor stays visible on the right.
   ========================================================= */
.hero {
	background-color: #eef6ff;
	background-image:
		linear-gradient(90deg, rgba(248, 251, 255, .97) 0%, rgba(248, 251, 255, .93) 30%, rgba(248, 251, 255, .45) 48%, rgba(248, 251, 255, 0) 62%),
		url('assets/img/hero-desk.webp');
	background-size: cover, cover;
	background-position: center center, right center;
	background-repeat: no-repeat, no-repeat;
	padding: 96px 0 108px;
	min-height: 640px;
	display: flex;
	align-items: center;
}
.hero::before,
.hero::after { content: none; }
.hero-grid { display: block; position: relative; z-index: 2; }
.hero-text { max-width: 560px; }
.hero-visual { display: none; }
.hero h1 { font-size: 56px; }

@media (max-width: 1100px) {
	.hero {
		background-image:
			linear-gradient(90deg, rgba(248, 251, 255, .97) 0%, rgba(248, 251, 255, .9) 42%, rgba(248, 251, 255, .15) 72%, rgba(248, 251, 255, 0) 88%),
			url('assets/img/hero-desk.webp');
		min-height: 560px;
		padding: 72px 0 84px;
	}
	.hero h1 { font-size: 44px; }
}

@media (max-width: 820px) {
	.hero {
		background-image: none;
		min-height: 0;
		padding: 40px 0 0;
		display: block;
	}
	.hero-visual { display: block; margin-top: 26px; }
	.hero-visual img { width: 100%; height: auto; display: block; }
	.hero-text { max-width: none; }
	.hero h1 { font-size: 36px; }
}

/* =========================================================
   Mountain photo for the dark bands
   Used by the homepage CTA and by the inner-page headers.
   ========================================================= */
.cta {
	background-color: #071a33;
	background-image:
		linear-gradient(105deg, rgba(6, 22, 44, .96) 0%, rgba(8, 30, 60, .92) 45%, rgba(10, 40, 80, .74) 100%),
		url('assets/img/mountains.webp');
	background-size: cover, cover;
	background-position: center center, center 58%;
	background-repeat: no-repeat, no-repeat;
	padding: 72px 0;
}
.cta-mountains { display: none; }

/* Inner page header: same photo, darker toward the bottom so the
   heading sits on solid colour. */
.page-hero {
	position: relative;
	overflow: hidden;
	background-color: #071a33;
	background-image:
		linear-gradient(180deg, rgba(6, 22, 44, .58) 0%, rgba(7, 26, 51, .9) 62%, #08203f 100%),
		url('assets/img/mountains.webp');
	background-size: cover, cover;
	background-position: center center, center 42%;
	background-repeat: no-repeat, no-repeat;
	color: #fff;
	padding: 88px 0 76px;
}
.page-hero .eyebrow { color: #9dc0ff; }
.page-hero h1 {
	font-size: 46px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: #fff;
	max-width: 720px;
}
.page-hero p {
	font-size: 16.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .76);
	max-width: 620px;
	margin-top: 14px;
}

@media (max-width: 820px) {
	.page-hero { padding: 60px 0 52px; }
	.page-hero h1 { font-size: 33px; }
	.page-hero p { font-size: 15.5px; }
}

/* ---------- Refinements after first render ---------- */
/* 1. the card arrow sat at the bottom of stretched cards, leaving a dead
      gap; keep it with the text the way the reference does */
.card-arrow { margin-top: 18px; }
.card p { margin-bottom: 0; }

/* 2. services heading broke as "voor / jouw bedrijf." - narrow it */
.services-head .h2 { max-width: 640px; }

/* 3. the Why panel was an empty blue block; give it the same mountain
      photography as the dark bands, so it reads as intentional */
.why-card {
	background-color: #0b2450;
	background-image:
		linear-gradient(160deg, rgba(8, 28, 58, .86) 0%, rgba(10, 40, 85, .58) 100%),
		url('assets/img/mountains.webp');
	background-size: cover, cover;
	background-position: center center, center 55%;
	background-repeat: no-repeat, no-repeat;
}

/* =========================================================
   Projecten overview
   ========================================================= */
.projects { padding: 56px 0 96px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filter:hover { border-color: #c3d5f7; color: var(--blue); background: #fff; }
.filter.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter.is-active:hover { color: #fff; background: var(--blue-600); }

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

.project-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.project-card:hover { transform: translateY(-4px); border-color: #cddcf9; box-shadow: var(--shadow); color: var(--ink); }

.project-media {
	position: relative;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, #0b2450, #14417f 65%, #1b5cf6 130%);
	overflow: hidden;
}
.project-media.is-webshop { background: linear-gradient(150deg, #0a2340, #1a3f8f 60%, #4b6ef5 130%); }
.project-media.is-overige { background: linear-gradient(150deg, #071a33, #12305c 60%, #2c5fa8 130%); }
.project-media img { width: 100%; height: 100%; object-fit: cover; }

.project-icon {
	width: 58px; height: 58px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.project-badge {
	position: absolute;
	bottom: 14px; left: 14px;
	background: rgba(255, 255, 255, .94);
	color: var(--ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 7px;
}

.project-body { padding: 22px 24px 24px; }
.project-body h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: 8px;
}
.project-body p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 16px; }
.project-link { font-size: 13px; font-weight: 600; color: var(--blue); }
.project-card:hover .project-link { color: var(--blue-600); }

.projects-empty { font-size: 15.5px; color: var(--muted); padding: 40px 0; }

@media (max-width: 820px) {
	.projects { padding: 40px 0 64px; }
	.projects-grid { grid-template-columns: 1fr; gap: 18px; }
	.filters { gap: 8px; margin-bottom: 24px; }
	.filter { padding: 9px 15px; font-size: 13.5px; }
}

/* ---------- Single project ---------- */
.single-project { padding: 48px 0 96px; }
.back-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 28px; }
.back-link:hover { color: var(--blue); }
.single-project__media { margin-bottom: 36px; }
.single-project__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.single-project__body { max-width: 760px; }
.single-project__body p { font-size: 16px; line-height: 1.8; color: var(--muted); margin-bottom: 18px; }
.single-project__body h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 32px 0 12px; }

@media (max-width: 820px) {
	.single-project { padding: 32px 0 64px; }
}

/* ---------- Project card preview ----------
   Until real screenshots are uploaded, each card shows a wireframe
   of a website rather than a lone icon on an empty gradient. */
.project-media { aspect-ratio: 16 / 9; }
.project-preview {
	width: 74%;
	max-width: 340px;
	aspect-ratio: 16 / 10;
	background: #fff;
	border-radius: 10px;
	padding: 10px 12px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow: 0 18px 34px -18px rgba(4, 18, 38, .65);
	transform: translateY(2px);
	transition: transform .3s ease;
}
.project-card:hover .project-preview { transform: translateY(-2px); }
.pp-bar { display: flex; gap: 4px; margin-bottom: 4px; }
.pp-bar i { width: 5px; height: 5px; border-radius: 50%; background: #d7e1f2; }
.pp-hero { display: block; height: 26%; border-radius: 5px; background: linear-gradient(120deg, #e8f0ff, #cfe0fb); }
.pp-line { display: block; height: 5px; border-radius: 3px; background: #e4ebf7; width: 84%; }
.pp-line.short { width: 56%; }
.pp-cards { display: flex; gap: 5px; margin-top: auto; }
.pp-cards i { flex: 1; height: 16px; border-radius: 4px; background: #eef3fb; }

/* =========================================================
   Over ons
   ========================================================= */
.about { padding: 88px 0 72px; }
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: center;
}
.about-media img {
	width: 100%;
	/* the height="..." attribute on the img otherwise wins over aspect-ratio */
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 42% 45%;
	border-radius: var(--radius);
	box-shadow: 0 30px 60px -34px rgba(10, 31, 60, .55);
}
.about-text .h2 { max-width: 460px; }
.about-text .lead { max-width: 520px; margin-top: 18px; }

.about-stats { padding: 8px 0 88px; }
.about-stats-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 34px 0 0;
	border-top: 1px solid var(--line);
}
.about-stat { text-align: center; }
.about-stat__num {
	display: block;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--blue);
	line-height: 1.1;
}
.about-stat__label {
	display: block;
	font-size: 13.5px;
	color: var(--muted);
	margin-top: 6px;
}

@media (max-width: 1024px) {
	.about-grid { grid-template-columns: 1fr; gap: 34px; }
	.about { padding: 64px 0 56px; }
	.about-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
	.about-stats { padding-bottom: 64px; }
}

@media (max-width: 620px) {
	.about-stats-inner { grid-template-columns: 1fr 1fr; }
	.about-stat__num { font-size: 28px; }
}

/* =========================================================
   Diensten
   ========================================================= */
.diensten { padding: 64px 0 84px; }

.service-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 44px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 34px 36px;
	margin-bottom: 20px;
	scroll-margin-top: 90px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.service-row:hover { border-color: #cddcf9; box-shadow: var(--shadow); }
.service-row:last-child { margin-bottom: 0; }

.service-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--blue-100);
	color: var(--blue);
	margin-bottom: 16px;
}
.service-row h2 {
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: 10px;
}
.service-row p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 520px;
	margin-bottom: 18px;
}

.service-points { display: grid; gap: 8px; margin-bottom: 20px; }
.service-points li {
	position: relative;
	padding-left: 26px;
	font-size: 14.5px;
	font-weight: 500;
}
.service-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background-color: var(--blue-100);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5cf6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: center;
}
.service-link { font-size: 14px; font-weight: 600; color: var(--blue); }
.service-link:hover { color: var(--blue-600); }

.service-row__art {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	background: linear-gradient(150deg, #eaf2ff 0%, #d7e6ff 55%, #c3d8ff 100%);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-row__art svg { width: 76px; height: 76px; opacity: .9; }

@media (max-width: 900px) {
	.diensten { padding: 44px 0 60px; }
	.service-row {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 26px 24px;
	}
	.service-row__art { order: -1; aspect-ratio: 16 / 7; }
	.service-row__art svg { width: 54px; height: 54px; }
	.service-row h2 { font-size: 21px; }
}

/* =========================================================
   Werkwijze
   ========================================================= */
.steps { padding: 64px 0 24px; }
.steps-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.step-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 30px 30px 28px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.step-card:hover { border-color: #cddcf9; box-shadow: var(--shadow); }
.step-num {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--blue);
	background: var(--blue-100);
	border-radius: 7px;
	padding: 5px 9px;
	margin-bottom: 16px;
}
.step-card h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.step-card p { font-size: 15px; line-height: 1.7; color: var(--muted); }

.promises { padding: 52px 0 84px; }
.promises .h2 { margin-bottom: 22px; }
.promises-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 32px;
}
.promises-list li {
	position: relative;
	padding-left: 34px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
}
.promises-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 7px;
	background-color: var(--blue-100);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
}

/* =========================================================
   Contact
   ========================================================= */
.contact { padding: 64px 0 84px; }
.contact-grid {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 56px;
	align-items: start;
}
.contact-details .h2 { max-width: 340px; margin-bottom: 14px; }
.contact-details .lead { max-width: 380px; margin-bottom: 26px; }
.contact-list { display: grid; gap: 16px; margin-bottom: 26px; }
.contact-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.contact-list a { color: var(--ink); font-weight: 500; }
.contact-list a:hover { color: var(--blue); }
.contact-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--blue-100);
	color: var(--blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.contact-note { font-size: 13.5px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--line); }

.contact-form-wrap {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-field { margin: 0 0 18px; }
.form-field label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(27, 92, 246, .14);
}
.form-field textarea { resize: vertical; }
.form-hp { position: absolute; left: -9999px; }
.form-submit { width: 100%; }
.form-notice { font-size: 14.5px; padding: 14px 18px; border-radius: 10px; margin-bottom: 22px; }
.form-notice.is-ok { background: rgba(31, 122, 69, .1); color: #1f6b3e; }
.form-notice.is-error { background: rgba(176, 42, 42, .09); color: #942a2a; }

/* =========================================================
   404
   ========================================================= */
.notfound { padding: 56px 0 96px; }
.notfound-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.notfound-links { display: flex; gap: 22px; flex-wrap: wrap; }
.notfound-links a { font-size: 14px; font-weight: 600; color: var(--muted); }
.notfound-links a:hover { color: var(--blue); }

@media (max-width: 900px) {
	.steps { padding: 44px 0 16px; }
	.steps-grid { grid-template-columns: 1fr; }
	.promises { padding: 20px 0 56px; }
	.promises-list { grid-template-columns: 1fr; }
	.contact { padding: 44px 0 60px; }
	.contact-grid { grid-template-columns: 1fr; gap: 34px; }
	.contact-form-wrap { padding: 24px; }
	.form-row { grid-template-columns: 1fr; }
	.step-card { padding: 24px; }
}

/* =========================================================
   Generic page + WooCommerce account area
   The storefront is not part of this design, but My Account is how
   customers see and cancel their subscriptions, so it stays first class.
   ========================================================= */
.page-body { padding: 56px 0 88px; }
.entry-content { max-width: 900px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 34px 0 12px; }
.entry-content h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 26px 0 10px; }
.entry-content p { font-size: 15.5px; line-height: 1.8; color: var(--muted); margin-bottom: 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px 0; padding-left: 22px; list-style: revert; }
.entry-content li { font-size: 15.5px; line-height: 1.8; color: var(--muted); margin-bottom: 6px; }
.entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--blue-600); }
.entry-content img { border-radius: var(--radius); height: auto; }

/* account navigation becomes a tab bar */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.woocommerce-MyAccount-navigation li { margin: 0; list-style: none; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.woocommerce-MyAccount-navigation li a:hover { border-color: #c3d5f7; color: var(--blue); background: #fff; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--blue); border-color: var(--blue); color: #fff; }

.woocommerce-MyAccount-content { font-size: 15.5px; color: var(--muted); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: var(--ink); }
.woocommerce-MyAccount-content p { font-size: 15.5px; line-height: 1.8; }

/* tables: subscriptions, orders, addresses */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	font-size: 14.5px;
	margin-bottom: 24px;
}
.woocommerce table.shop_table th {
	background: var(--soft);
	text-align: left;
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
}
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.shop_table tr:first-child td { border-top: 0; }

/* buttons inside Woo screens match the site buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--blue);
	color: #fff;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 600;
	padding: 12px 20px;
	border: 1px solid var(--blue);
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--blue); }
.woocommerce a.button.alt:hover { background: var(--blue-600); }

/* a cancel link is a destructive action; keep it quiet but clear */
.woocommerce table.shop_table .subscription-actions a:not(.button),
.woocommerce .subscription-actions a.cancel {
	font-size: 13.5px;
	color: #a83a3a;
	text-decoration: underline;
}

/* notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: 10px;
	background: var(--soft);
	padding: 14px 18px;
	font-size: 14.5px;
	color: var(--ink);
	margin-bottom: 22px;
	list-style: none;
}
.woocommerce-error { border-left-color: #b02a2a; background: rgba(176, 42, 42, .06); }
.woocommerce-message { border-left-color: #1f7a45; background: rgba(31, 122, 69, .07); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* forms in Woo screens: login, addresses, cancellation */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 7px;
	color: var(--ink);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 12px 14px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; background: #fff; border-color: var(--blue); }
.woocommerce .woocommerce-form-login { max-width: 460px; }
.woocommerce .lost_password a { font-size: 13.5px; }

/* header account link */
.account-link {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	margin-left: 4px;
}
.account-link:hover { color: var(--blue); }

@media (max-width: 820px) {
	.account-link { display: none; }
	.page-body { padding: 36px 0 60px; }
	.woocommerce table.shop_table { font-size: 13.5px; }
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding: 10px; }
}

/* ---------- Legal pages ---------- */
.legal-updated {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 26px !important;
}
.entry-content h3 { scroll-margin-top: 90px; }
.entry-content ul li { color: var(--muted); }
.contact-note + .contact-note { border-top: 0; padding-top: 6px; margin-top: 0; }

/* =========================================================
   Footer
   Four columns: brand with contact details, then the service,
   company and information links, then a legal bottom bar.
   ========================================================= */
.site-footer {
	background: var(--soft);
	border-top: 1px solid var(--line);
	padding: 56px 0 0;
}
.footer-main {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 44px;
}
.footer-brand .logo { margin-bottom: 16px; }
.footer-tagline {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 300px;
	margin-bottom: 20px;
}
.footer-contact { display: grid; gap: 9px; }
.footer-contact li { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.footer-contact a { color: var(--ink); font-weight: 500; }
.footer-contact a:hover { color: var(--blue); }

.footer-col h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: 14.5px; color: var(--muted); }
.footer-col a:hover { color: var(--blue); }

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding: 20px 0 24px;
}
.footer-bottom p { font-size: 13px; color: var(--muted); }

@media (max-width: 980px) {
	.footer-main { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
	.site-footer { padding-top: 40px; }
	.footer-main { grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }
	.footer-brand { grid-column: auto; }
	.footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================================
   Account dropdown
   ========================================================= */
.account-menu { position: relative; }

.account-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 9px 12px;
	font-family: var(--sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.account-toggle:hover { color: var(--blue); background: var(--soft); }
.account-toggle svg { color: var(--blue); flex: 0 0 auto; }
.account-toggle[aria-expanded="true"] { background: var(--soft); border-color: var(--line); color: var(--blue); }

.account-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 310px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 24px 50px -20px rgba(10, 31, 60, .35);
	padding: 18px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.account-menu.is-open .account-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.account-panel__user {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-bottom: 14px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--line);
}
.account-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--blue-100);
	color: var(--blue);
	font-size: 13px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.account-user-meta { display: grid; min-width: 0; }
.account-user-meta strong { font-size: 14px; color: var(--ink); line-height: 1.3; }
.account-user-meta em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-links { display: grid; gap: 2px; }
.account-links a {
	display: block;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	transition: background .15s ease, color .15s ease;
}
.account-links a:hover { background: var(--soft); color: var(--blue); }
.account-links__customer-logout a {
	color: #a83a3a;
	margin-top: 6px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 8px 8px;
	padding-top: 12px;
}
.account-links__customer-logout a:hover { background: rgba(168, 58, 58, .07); color: #8f2f2f; }

.account-panel__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}
.account-field { display: block; margin-bottom: 12px; }
.account-field span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 6px;
}
.account-field input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 14.5px;
	color: var(--ink);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 10px 12px;
}
.account-field input:focus { outline: none; background: #fff; border-color: var(--blue); }
.account-submit { width: 100%; margin-top: 4px; }
.account-panel__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; font-size: 12.5px; }
.account-panel__foot a { color: var(--muted); }
.account-panel__foot a:hover { color: var(--blue); }

@media (max-width: 820px) {
	.account-panel { right: 0; width: min(310px, calc(100vw - 40px)); }
	.account-toggle__label { display: none; }
	.account-toggle { padding: 9px; }
}

.account-caret { color: var(--muted); transition: transform .18s ease; margin-left: -2px; }
.account-toggle:hover .account-caret { color: var(--blue); }
.account-toggle[aria-expanded="true"] .account-caret { transform: rotate(180deg); color: var(--blue); }

/* =========================================================
   Project thumbnails: a full-page screenshot scrolls on hover
   Upload a full-height capture as the featured image; the card shows the
   top of it and glides to the bottom while hovered.
   ========================================================= */
.project-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: object-position 5s cubic-bezier(.42, 0, .58, 1);
	will-change: object-position;
}
.project-card:hover .project-media img,
.project-card:focus-visible .project-media img {
	object-position: center bottom;
}

/* the single project page: back link plus a link out to the live site */
.single-project__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.single-project__bar .back-link { margin-bottom: 0; }
.project-visit { font-size: 14px; padding: 11px 18px; }

@media (max-width: 620px) {
	.single-project__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* =========================================================
   Browser frame around project screenshots
   ========================================================= */
/* card: a small window floating on the tinted panel */
.browser-card {
	position: absolute;
	inset: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 22px 40px -20px rgba(4, 18, 38, .6);
}
.browser-card__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #f4f7fc;
	border-bottom: 1px solid #e3eaf6;
	flex: 0 0 auto;
}
.browser-card__dots { display: flex; gap: 4px; }
.browser-card__dots i { width: 6px; height: 6px; border-radius: 50%; background: #cfd9ea; display: block; }
.browser-card__url {
	font-size: 9.5px;
	color: #7d8aa1;
	background: #fff;
	border: 1px solid #e6ecf7;
	border-radius: 20px;
	padding: 1px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 68%;
}
.browser-card__screen {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	min-height: 0;
}
.browser-card__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: object-position 5s cubic-bezier(.42, 0, .58, 1);
	will-change: object-position;
}

/* the card image fills its media area directly */

/* single project: a larger window that shows the whole page */
.browser-frame {
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 26px 50px -30px rgba(10, 31, 60, .45);
	margin-bottom: 32px;
}
.browser-frame__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #f4f7fc;
	border-bottom: 1px solid #e3eaf6;
}
.browser-frame__dots { display: flex; gap: 5px; }
.browser-frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: #cfd9ea; display: block; }
.browser-frame__url {
	flex: 1 1 auto;
	font-size: 12px;
	color: #6d7a91;
	background: #fff;
	border: 1px solid #e6ecf7;
	border-radius: 20px;
	padding: 3px 12px;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.browser-frame__screen { background: #fff; }
.browser-frame__screen img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (max-width: 620px) {
	.browser-card { inset: 10px 10px 12px; }
	.browser-card__url { display: none; }
	.browser-frame__url { font-size: 11px; }
}

/* project type label in the card body, so nothing covers the screenshot */
.project-type {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 7px;
}

/* consent notice under the submit button */
.form-note {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted);
	margin: 12px 0 0 !important;
	text-align: center;
}
.form-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--blue-600); }

/* ---------- Very wide screens ----------
   The hero photo is 2:1. Stretched with `cover` across a 2560px viewport it
   scales to 2560x1280 and loses ~44% of its height, which makes the monitor
   look oversized. Past the photo's own width it is scaled by height instead
   and anchored right, while the left side carries the photo's edge colour
   (#e7f0fd) so the join is invisible under the existing scrim. */
@media (min-width: 1774px) {
	.hero {
		/* the left side is not one flat colour: the photo's own left column runs
		   from #f1f6fd at the top to #cbe2fc at the bottom, so the fill repeats
		   that ramp and the join disappears */
		background-image:
			linear-gradient(90deg, rgba(248, 251, 255, .97) 0%, rgba(248, 251, 255, .93) 30%, rgba(248, 251, 255, .45) 48%, rgba(248, 251, 255, 0) 62%),
			url('assets/img/hero-desk.webp'),
			linear-gradient(180deg, #ebf2fd 0%, #e4edfc 15%, #e2edfd 30%, #dfecfc 50%, #dfecfc 70%, #dfecfd 85%, #deebfd 100%);
		background-size: cover, auto 135%, cover;
		background-position: center center, right center, center center;
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-color: #e8f1fe;
	}
}

/* The account UI can sit inside .entry-content, where the prose styles give
   it bullets and underlined links. Reset them inside Woo's own wrappers. */
.entry-content .woocommerce ul { list-style: none; padding-left: 0; margin: 0; }
.entry-content .woocommerce ol { list-style: none; padding-left: 0; }
.entry-content .woocommerce li { margin-bottom: 0; }
.entry-content .woocommerce a { text-decoration: none; }
.entry-content .woocommerce .woocommerce-MyAccount-navigation li { margin: 0; }
.entry-content .woocommerce p { color: inherit; }

/* account dropdown intro line, shown when Turnstile replaces the inline form */
.account-panel__intro {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 14px;
}
.account-panel .account-submit { display: block; width: 100%; text-align: center; }

/* ---------- card: browser bar across the top, screenshot fills the rest ---------- */
.project-media.has-shot {
	display: flex;
	flex-direction: column;
	/* the base card centres its children, which would shrink the screenshot to
	   its own width; stretch pins the bar and the screen to the full card */
	align-items: stretch;
	justify-content: flex-start;
	aspect-ratio: 16 / 10;
}
.project-media__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	background: #f1f5fc;
	border-bottom: 1px solid #e1e9f6;
	flex: 0 0 auto;
}
.project-media__dots { display: flex; gap: 4px; flex: 0 0 auto; }
.project-media__dots i { width: 5px; height: 5px; border-radius: 50%; background: #c9d5e8; display: block; }
.project-media__url {
	font-size: 9.5px;
	line-height: 1.6;
	color: #7d8aa1;
	background: #fff;
	border: 1px solid #e4ebf6;
	border-radius: 20px;
	padding: 0 8px;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.project-media__screen {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}
.project-media__screen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: object-position 5s cubic-bezier(.42, 0, .58, 1);
	will-change: object-position;
}
.project-card:hover .project-media__screen img,
.project-card:focus-visible .project-media__screen img { object-position: center bottom; }