:root {
	--paper: #f6efe6;
	--paper-3: #e4d5c2;
	--panel: #fffaf3;
	--ink: #1f1a17;
	--ink-soft: #463d37;
	--muted: #6b5f57;
	--brand: #9a5b3c;
	--brand-deep: #713f26;
	--brand-soft: #f0dccd;
	--brand-light: #d9a482;
	--sage: #4f7a5c;
	--sage-text: #3f6a4c;
	--on-dark: #e8ddd0;
	--on-dark-muted: #cfc3b6;
	--line: rgba(31, 26, 23, 0.16);
	--tape: rgba(222, 200, 168, 0.62);
	--linkedin: #0a66c2;
	--linkedin-deep: #004182;
	--linkedin-soft: rgba(10, 102, 194, 0.1);
	--coffee-soft: rgba(255, 221, 0, 0.28);
	--font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Charter, Georgia, serif;
	--font-body: "Avenir Next", Avenir, "Segoe UI", Seravek, "Gill Sans", "Trebuchet MS", "Helvetica Neue", sans-serif;
	--shadow: 0 24px 60px -28px rgba(60, 35, 20, 0.45), 0 6px 18px -10px rgba(60, 35, 20, 0.25);
	--radius: 14px;
	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
	--top-h: 74px;
	--wrap: 1180px;
	--gutter: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background-color: var(--paper);
	background-image: var(--noise);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a[href], button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.2vw, 4.3rem); line-height: 1.04; }
h1 em { font-style: italic; color: var(--brand); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.7rem); }
h3 { font-size: 1.32rem; margin-bottom: 0.4rem; }
p { margin: 0; }
a { color: inherit; }
strong, b { font-weight: 650; color: var(--ink); }

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

.skip {
	position: absolute;
	left: -999px;
	top: 10px;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
}
.skip:focus { left: 10px; z-index: 50; }

.top {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--paper);
	background-image: var(--noise);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.top-in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 14px var(--gutter);
	display: flex;
	align-items: center;
	gap: 12px 28px;
	flex-wrap: wrap;
}
.top.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: 0 14px 26px -24px rgba(60, 35, 20, 0.75);
}
section[id], #main { scroll-margin-top: calc(var(--top-h) + 18px); }
a[href], button, [tabindex] { scroll-margin-top: calc(var(--top-h) + 14px); }
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	text-decoration: none;
	font-family: var(--font-display);
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
.coin { width: 34px; height: 34px; }
.coin-face { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 6; }
.coin-petal { fill: var(--brand); }
.coin-petal.side { opacity: 0.65; }
.coin-arc { stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; }
.nav {
	margin-left: auto;
	display: flex;
	gap: 6px;
	font-size: 0.95rem;
}
.nav a {
	text-decoration: none;
	color: var(--ink-soft);
	padding: 10px 8px;
	border-bottom: 1.5px solid transparent;
	transition: color 0.18s ease;
}
.nav a:hover { color: var(--brand-deep); border-bottom-color: var(--brand-light); }
.nav a[aria-current="true"] {
	color: var(--brand-deep);
	border-bottom-color: var(--brand);
	background: var(--brand-soft);
	border-radius: 7px 7px 0 0;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border: 1.5px solid var(--ink);
	color: var(--ink);
	transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(31, 26, 23, 0.06); }
.btn-lg { padding: 13px 26px; font-size: 1.05rem; min-height: 52px; }

.hero {
	max-width: var(--wrap);
	margin: clamp(20px, 4vw, 56px) auto 0;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.kicker {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 700;
	margin-bottom: 16px;
}
.lead { font-size: 1.2rem; color: var(--ink-soft); margin: 26px 0 30px; max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visual { position: relative; padding: 22px 8px 62px 0; }
.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.panel-main { padding: 16px 18px 12px; transform: rotate(-1.4deg); }
.panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); }
.dot:first-child { background: var(--brand); }
.panel-title { margin-left: 8px; font-size: 0.8rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.02em; }
.panel-range { margin-left: auto; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi {
	display: grid;
	gap: 2px;
	padding: 10px 12px 11px;
	border-radius: 10px;
	background: var(--paper);
	border-top: 3px solid var(--brand);
	min-width: 0;
}
.kpi:nth-child(2) { border-top-color: var(--sage); }
.kpi:nth-child(3) { border-top-color: var(--brand-deep); }
.kpi:nth-child(4) { border-top-color: var(--ink); }
.kpi-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.kpi-value {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1.9vw, 1.7rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 6.5ch;
	white-space: nowrap;
	line-height: 1.15;
}
.kpi-foot { font-size: 0.76rem; color: var(--muted); }
.chart { margin-top: 14px; }
.chart-title { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.bars { width: 100%; height: auto; display: block; }
.bars rect { fill: var(--brand); rx: 3; }
.bars rect:nth-child(odd) { fill: var(--brand-deep); }
.bars rect:last-child { fill: var(--sage); }
.bar-labels text { font-family: var(--font-body); font-size: 9px; fill: var(--muted); text-anchor: middle; }

.panel-side {
	position: absolute;
	right: 0;
	bottom: 18px;
	width: min(280px, 74%);
	padding: 16px 16px 14px;
	transform: rotate(2.2deg);
	display: grid;
	gap: 8px;
}
.panel-mini-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.mini-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.86rem; color: var(--ink-soft); }
.mini-row b { color: var(--brand-deep); white-space: nowrap; }
.progress { height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.progress span { display: block; height: 100%; width: 100%; background: var(--brand); border-radius: inherit; transform-origin: left; transform: scaleX(var(--w)); }
.mini-foot { font-size: 0.76rem; color: var(--muted); }

.tape { position: absolute; }
.tape::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 50%;
	width: 88px;
	height: 22px;
	background: var(--tape);
	transform: translateX(-50%) rotate(-3deg);
	box-shadow: 0 1px 2px rgba(60, 35, 20, 0.12);
	pointer-events: none;
}

.section {
	max-width: var(--wrap);
	margin: clamp(72px, 10vw, 128px) auto 0;
	padding: 0 var(--gutter);
}
.section-head { max-width: 44em; margin-bottom: 40px; }
.section-lead { font-size: 1.12rem; color: var(--ink-soft); margin-top: 16px; }

.pillars { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 18px; align-items: start; }
.card {
	position: relative;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 30px 26px 28px;
	display: grid;
	gap: 8px;
	align-content: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.num {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--brand);
	margin-bottom: 6px;
}
.card-accent {
	background: var(--brand-deep);
	color: var(--paper);
	border-color: var(--brand-deep);
	padding: 40px 30px 38px;
	margin-top: -14px;
	transform: rotate(-0.6deg);
	box-shadow: var(--shadow);
}
.card-accent:hover { transform: rotate(-0.6deg) translateY(-3px); }
.card-accent .num { color: var(--brand-light); }
.card-accent h3 { font-size: 1.55rem; color: var(--paper); }
.card-accent p { color: var(--paper); font-size: 1.05rem; }

.rail {
	display: flex;
	gap: 16px;
	margin: 0 -6px;
	padding: 8px 6px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 6px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.persona {
	position: relative;
	flex: 0 0 min(80vw, 296px);
	scroll-snap-align: start;
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	gap: 6px;
	padding: 24px 24px 26px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.persona:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand); }
.persona img { width: 46px; height: 46px; border-radius: 50%; margin-bottom: 10px; }
.persona-industry { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); font-weight: 700; }
.persona-name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; line-height: 1.22; }
.persona-desc { font-size: 0.92rem; color: var(--ink-soft); margin-top: 8px; }
.persona::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 34px;
	width: 10px;
	height: 10px;
	border-top: 1.5px solid var(--brand);
	border-right: 1.5px solid var(--brand);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.persona:hover::after { transform: rotate(45deg) translate(3px, -3px); }

.rail-controls { display: flex; align-items: center; gap: 16px; min-height: 44px; margin-top: 22px; }
.rail-controls:empty { display: none; }
.rail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1.5px solid var(--brand);
	border-radius: 50%;
	background: transparent;
	color: var(--brand-deep);
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.rail-btn:hover:not([aria-disabled="true"]) { background: var(--brand-soft); transform: translateY(-2px); }
.rail-btn[aria-disabled="true"] { border-color: var(--line); color: var(--muted); }
.rail-track {
	position: relative;
	flex: 1 1 auto;
	height: 3px;
	border-radius: 2px;
	background: var(--paper-3);
	overflow: hidden;
}
.rail-bar {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	border-radius: 2px;
	background: var(--brand);
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr 0.9fr 1.1fr;
	gap: 28px;
}
.steps li {
	position: relative;
	padding-top: 18px;
	border-top: 1px solid var(--ink);
}
.step-n {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--brand);
	margin-bottom: 14px;
}
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--ink-soft); font-size: 0.96rem; }

.section-about {
	display: grid;
	grid-template-columns: 0.94fr 1.06fr;
	gap: clamp(28px, 4.4vw, 64px);
	align-items: start;
}
.about-copy .section-head { margin-bottom: 26px; }
.about-copy p + p { margin-top: 16px; }
.about-copy > p { color: var(--ink-soft); font-size: 1.04rem; max-width: 36em; }
.social { display: flex; gap: 8px; margin-top: 28px; }
.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.linkedin { color: var(--linkedin); }
.linkedin:hover { color: var(--linkedin-deep); background: var(--linkedin-soft); transform: translateY(-2px); }
.coffee { color: var(--ink-soft); }
.coffee:hover { color: var(--ink); background: var(--coffee-soft); transform: translateY(-2px); }

.photos {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 0;
	row-gap: clamp(16px, 2vw, 26px);
	padding: 22px 6px 14px 10px;
}
.photo {
	display: block;
	position: relative;
	z-index: 1;
	padding: 9px 9px 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	align-self: start;
	transition: transform 0.2s ease;
}
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.photo-4 img { aspect-ratio: 3 / 2; }
.photo-1 { grid-row: 1; grid-column: 1; transform: rotate(-1.6deg); }
.photo-2 { grid-row: 1; grid-column: 2; margin-top: 22px; margin-left: -58px; transform: rotate(2deg); z-index: 2; }
.photo-3 { grid-row: 2; grid-column: 2; margin-top: -92px; margin-left: -46px; transform: rotate(-1.3deg); z-index: 3; }
.photo-4 { grid-row: 2; grid-column: 1; margin-top: -20px; margin-right: -4px; transform: rotate(1.4deg); z-index: 2; }
.photo:hover { transform: rotate(0deg) translateY(-4px); z-index: 4; }
.photo.tape::before { top: -11px; width: 78px; height: 21px; }
.photo-2.tape::before { left: 42%; transform: translateX(-50%) rotate(4deg); }
.photo-4.tape::before { left: 58%; transform: translateX(-50%) rotate(-5deg); }

.section-dark {
	max-width: none;
	padding: clamp(60px, 8vw, 100px) 0;
	background: var(--ink);
	color: var(--on-dark);
}
.section-dark > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section-dark .kicker { color: var(--brand-light); }
.section-dark .section-lead { color: var(--on-dark-muted); }
.section-dark b { color: var(--paper); }
.facts {
	list-style: none;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 48px;
	counter-reset: fact;
}
.facts li {
	position: relative;
	padding: 4px 0 4px 44px;
	color: var(--on-dark);
	font-size: 0.98rem;
	counter-increment: fact;
}
.facts li::before {
	content: counter(fact) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.6rem;
	line-height: 1.1;
	color: var(--brand-light);
}

.section-contact { padding-bottom: 20px; }
.contact {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 40px;
	align-items: center;
	padding: clamp(28px, 4vw, 52px);
	border-radius: 22px;
	background: var(--brand-soft);
	border: 1px solid rgba(154, 91, 60, 0.3);
}
.contact .kicker { color: var(--brand-deep); }
.contact-actions { display: grid; gap: 12px; justify-items: start; }
.mail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.mail-link {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 600;
	line-height: 1.2;
	padding: 4px 0;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--brand);
	overflow-wrap: anywhere;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.mail-link:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }
.copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid rgba(31, 26, 23, 0.28);
	border-radius: 50%;
	background: transparent;
	color: var(--ink-soft);
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.copy-btn[hidden] { display: none; }
.copy-btn:hover { color: var(--brand-deep); border-color: var(--brand); background: rgba(154, 91, 60, 0.1); transform: translateY(-1px); }
.copy-btn .ico-check { display: none; }
.copy-btn.is-copied { color: var(--sage-text); border-color: var(--sage); background: rgba(79, 122, 92, 0.14); }
.copy-btn.is-copied .ico-copy { display: none; }
.copy-btn.is-copied .ico-check { display: block; }

.foot {
	max-width: var(--wrap);
	margin: 60px auto 0;
	padding: 26px var(--gutter) 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	justify-content: space-between;
	font-size: 0.88rem;
	color: var(--muted);
	border-top: 1px solid var(--line);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot-links a { display: inline-flex; align-items: center; gap: 4px; padding: 10px 8px; text-decoration: none; color: var(--ink-soft); }
.foot-links a:hover { color: var(--brand-deep); text-decoration: underline; }
.foot-date { width: 100%; font-family: var(--font-display); font-style: italic; }

.reveal { animation: reveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal:nth-child(2) { animation-delay: 0.08s; }
.reveal:nth-child(3) { animation-delay: 0.16s; }
.hero-visual.reveal { animation-delay: 0.3s; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.reveal { animation: none; }
	html { scroll-behavior: auto; }
	.btn, .card, .persona, .photo, .persona::after, .nav a, .social a, .rail-btn, .top, .mail-link, .copy-btn { transition: none; }
	.btn:hover, .card:hover, .persona:hover, .social a:hover, .copy-btn:hover, .rail-btn:hover:not([aria-disabled="true"]) { transform: none; }
	.card-accent:hover { transform: rotate(-0.6deg); }
	.photo:hover { transform: inherit; }
}

@media (max-width: 1040px) {
	.pillars { grid-template-columns: 1fr 1fr; }
	.card-accent { grid-column: 1 / -1; margin-top: 0; }
	.steps { grid-template-columns: 1fr 1fr; }
	.facts { grid-template-columns: 1fr; }
	.section-about { grid-template-columns: 1fr; }
	.photos { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; max-width: 800px; }
	.photo-1 { grid-row: 1 / 3; grid-column: 1; align-self: center; }
	.photo-2 { grid-row: 1; grid-column: 2; margin-left: -42px; margin-top: 18px; }
	.photo-3 { grid-row: 1; grid-column: 3; margin-left: -34px; margin-top: 34px; }
	.photo-4 { grid-row: 2; grid-column: 2 / 4; margin: -26px 0 0 -30px; }
}
@media (max-width: 760px) {
	body { font-size: 16px; }
	.top-in { gap: 8px 14px; padding: 10px var(--gutter) 0; }
	.top .btn { margin-left: auto; padding: 10px 16px; }
	.nav { order: 3; width: 100%; margin-left: 0; gap: 0; justify-content: space-between; font-size: 0.92rem; }
	.nav a { padding: 9px 6px; }
	.hero { grid-template-columns: 1fr; margin-top: 18px; gap: 40px; }
	.lead { font-size: 1.1rem; }
	.hero-visual { padding: 14px 0 92px; }
	.panel-main { transform: rotate(-1deg); }
	.panel-side { transform: rotate(1.6deg); width: 62%; bottom: 8px; }
	.panel-range { display: none; }
	.pillars, .steps { grid-template-columns: 1fr; }
	.card-accent { transform: rotate(-0.8deg); margin: 8px 0; }
	.rail-controls { gap: 12px; }
	.contact { grid-template-columns: 1fr; gap: 28px; }
	.contact-actions { justify-items: stretch; }
	.foot-links { width: 100%; }
}
@media (max-width: 600px) {
	.photos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto auto; max-width: none; padding: 16px 4px 10px; }
	.photo-1 { grid-row: 1 / 3; grid-column: 1; align-self: center; }
	.photo-2 { grid-row: 1; grid-column: 2; margin-left: -28px; margin-top: 0; }
	.photo-3 { grid-row: 2; grid-column: 2; margin-left: -20px; margin-top: 0; }
	.photo-4 { grid-row: 3; grid-column: 1 / -1; justify-self: center; width: min(100%, 460px); margin: -22px 0 0; }
}
@media (max-width: 420px) {
	.kpi-value { font-size: 1.25rem; }
	.panel-title { font-size: 0.78rem; }
	.mini-row { font-size: 0.8rem; }
	.hero-visual { padding-bottom: 104px; }
	.panel-side { width: 60%; }
}