/*
 * Grey Giant — components.
 * Mobile-first (design width 390px); desktop layout from 900px (design width 1440px).
 * Colors, fonts and fluid sizes come from tokens.css.
 *
 * 1. Base          5. Home sections      9. Article
 * 2. Frame/header  6. Articles lists    10. Prose
 * 3. Footer        7. Contact           11. Utilities
 * 4. Primitives    8. About / pages
 */

/* 1. Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--text);
	background-color: var(--bg);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: var(--grid-size) var(--grid-size);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--font-mono); }

.skip-link {
	position: absolute; left: -9999px; top: 8px; z-index: 100;
	padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* 2. Frame + header ------------------------------------------------------ */

.frame {
	max-width: var(--frame-max);
	min-height: 100vh;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}
.site-main { flex: 1 0 auto; }

.site-header {
	box-sizing: content-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 var(--gutter);
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}
.site-header__brand { display: flex; align-items: center; min-height: 44px; color: var(--text); }
.site-header__brand:hover { color: var(--text); }
.site-header .logo { width: 140px; height: 32px; }

.menu-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	background: transparent; color: var(--text); cursor: pointer;
}
.menu-toggle__close, .menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }
html:not(.js) .menu-toggle { display: none; }

.site-nav__list { margin: 0; padding: 0; list-style: none; }
.site-nav__link { display: flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none; }
.site-nav__link:hover { color: var(--text); }
.site-nav__link[aria-current="page"] { color: var(--text); }

.btn.btn--nav {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 0 18px;
	border: 1px solid var(--accent); border-radius: var(--radius-sm);
	background: transparent; color: var(--accent);
	font-size: 15px; font-weight: 400; text-decoration: none;
}
.btn.btn--nav:hover, .btn.btn--nav.is-current { background: var(--accent); color: var(--on-accent); }

/* Mobile menu panel */
@media (max-width: 899.98px) {
	.js .site-nav { display: none; }
	.js .site-nav.is-open {
		display: flex;
		position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
		flex-direction: column; gap: 16px;
		padding: 4px var(--gutter) 20px;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 12px 24px -16px rgba(22, 24, 26, 0.25);
	}
	html:not(.js) .site-header { height: auto; flex-wrap: wrap; padding-block: 10px; }
	html:not(.js) .site-nav { width: 100%; }
	.site-nav__link { font-size: 17px; border-bottom: 1px solid var(--line); min-height: 52px; }
	.site-nav__link[aria-current="page"] { font-weight: 500; }
	.btn.btn--nav { align-self: stretch; min-height: 54px; font-size: 16px; }
}

@media (min-width: 900px) {
	.frame { border-inline: 1px solid var(--line); }
	.site-header { height: 76px; }
	.site-header .logo { width: 168px; height: 38px; }
	.menu-toggle { display: none; }
	.site-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; }
	.site-nav__list { display: flex; align-items: center; gap: 36px; }
	.site-nav__link[aria-current="page"] { border-bottom: 2px solid var(--accent); }
}

/* 3. Footer -------------------------------------------------------------- */

.site-footer {
	display: flex; flex-direction: column; gap: 24px;
	padding: var(--footer-top) var(--gutter) var(--footer-bottom);
}
.site-footer__main { display: flex; flex-direction: column; gap: 24px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 24px; }
.site-footer__brand a { align-self: flex-start; color: var(--text); }
.site-footer__brand .logo { display: inline-block; vertical-align: baseline; }
.site-footer .logo { width: 180px; height: 41px; }
.site-footer__brand p { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 15px; }
.site-footer__nav a { display: flex; align-items: center; min-height: 44px; color: var(--body); text-decoration: none; }
.site-footer__nav a:hover { color: var(--text); }
.site-footer__bar {
	display: flex; justify-content: space-between;
	padding-top: 18px; border-top: 1px solid var(--line);
	font-family: var(--font-mono); font-size: 12px; color: var(--subtle);
}
.site-footer__bar a { color: var(--subtle); text-decoration: none; }
.site-footer__bar a:hover { color: var(--text); }

@media (min-width: 900px) {
	.site-footer { gap: 40px; }
	.site-footer__main { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 40px; }
	.site-footer__brand { gap: 18px; }
	.site-footer .logo { width: 220px; height: 50px; }
	.site-footer__nav { display: flex; gap: 32px; }
	.site-footer__nav a { min-height: 0; }
	.site-footer__bar { padding-top: 20px; }
}

/* 4. Primitives ---------------------------------------------------------- */

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--accent); }
.eyebrow--sm { font-size: 12px; }
.accent { color: var(--accent); }

.btn {
	display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
	min-height: 50px; padding: 0 24px;
	border: 0; border-radius: var(--radius-sm);
	font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { min-height: 52px; border: 1px solid var(--line-strong); color: var(--text); font-weight: 500; }
.btn--secondary:hover { border-color: var(--text); color: var(--text); }

@media (max-width: 899.98px) {
	.btn--block-mobile, .cta-card__btn { align-self: stretch; }
}

.icon-btn {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0;
	border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	background: transparent; color: var(--text); cursor: pointer;
}
.icon-btn:hover { border-color: var(--text); }

.badge {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
	padding: 6px 12px;
	border: 1px solid var(--line); border-radius: 999px;
	background: var(--surface); color: var(--body);
	font-size: 13px; font-weight: 500;
}
.badge__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }

.media { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--media-bg); }
.media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--media-pos, 50% 50%); }
.media--empty { background: var(--placeholder); }

.person { display: flex; align-items: center; gap: 14px; }
.person__tile {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 46px; height: 46px;
	border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	font-size: 13px; color: var(--body);
}
.person__tile--sm { width: 42px; height: 42px; font-size: 12px; }
.person__text { display: flex; flex-direction: column; gap: 2px; }
.person__name { font-size: 15px; font-weight: 500; }
.person__role { font-size: 14px; color: var(--subtle); }
.person--byline { gap: 12px; }
.person--byline .person__role { font-size: 12px; }

.section { padding: var(--sec-y) var(--gutter); border-bottom: 1px solid var(--line); }
.section--flush { padding: 0; }

.section-head {
	display: flex; flex-direction: column; gap: 12px;
	padding: var(--head-top) var(--gutter) var(--head-bottom);
}
.section-head__titles { display: flex; flex-direction: column; gap: 12px; }
.section-head__lede { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.section-head__link { display: none; font-size: 13px; text-decoration: none; }
.section-head--articles { padding-bottom: clamp(24px, calc(24px + (100vw - 390px) * 0.00762), 32px); }
.section-head--specialties { padding-bottom: clamp(24px, calc(24px + (100vw - 390px) * 0.01524), 40px); }

.h-display, .h-page, .h-section, .h-article, .h-contact { margin: 0; font-weight: 500; }
.h-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
.h-page { font-size: var(--fs-page); line-height: 1.02; letter-spacing: -0.035em; }
.h-page--sm { font-size: var(--fs-page-sm); }
.h-section { font-size: var(--fs-section); line-height: normal; letter-spacing: -0.03em; }
.h-section--tight, .section-head--articles .h-section { line-height: 1.08; }
.h-section--lg { font-size: var(--fs-section-lg); }
.h-section--sm { font-size: var(--fs-section-sm); }
.h-contact { font-size: var(--fs-contact); line-height: 1.04; letter-spacing: -0.035em; }
.h-article { font-size: var(--fs-article); line-height: 1.08; letter-spacing: -0.03em; }

.checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.checklist li { display: flex; align-items: center; gap: 10px; }
.checklist .icon { flex: none; color: var(--accent); }

@media (min-width: 900px) {
	.btn--block-mobile { align-self: flex-start; }
	.badge { padding: 7px 12px; font-size: 14px; }
	.person { gap: 16px; }
	.person--byline { gap: 14px; }
	.section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; }
	.section-head__titles { gap: 14px; }
	.section-head__lede { line-height: 1.6; }
	.section-head__link { display: inline; }
	.h-display, .h-page { line-height: 1.0; }
	.h-section--tight { line-height: 1.05; }
	.section-head--articles .h-section { line-height: normal; }
	.h-contact { line-height: 1.02; }
	.h-article { line-height: 1.04; letter-spacing: -0.035em; }
	.checklist { color: var(--body); }
}

/* 5. Home sections ------------------------------------------------------- */

/* Hero */
.hero {
	display: flex; flex-direction: column; gap: var(--hero-gap);
	padding: var(--hero-top) var(--gutter) var(--hero-bottom);
	border-bottom: 1px solid var(--line);
}
.hero__body { display: flex; flex-direction: column; gap: var(--hero-gap); }
/* Keep the design's line breaks: "development team." sits right at the column edge. */
.hero .h-display { max-width: 7.6em; }
.hero__lede { margin: 0; max-width: 560px; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.hero__actions { display: flex; flex-direction: column; gap: 10px; }
.hero__actions .btn { align-self: stretch; min-height: 52px; font-size: 16px; }
.hero__actions .btn--secondary { min-height: 54px; }
.hero__media { height: 240px; margin-top: 8px; }

@media (min-width: 900px) {
	.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.hero__body { grid-column: span 7; }
	.hero__actions { flex-direction: row; gap: 12px; padding-top: 8px; }
	.hero__actions .btn { align-self: auto; min-height: 50px; font-size: 15px; }
	.hero__actions .btn--secondary { min-height: 52px; }
	.hero__media { grid-column: 8 / span 5; align-self: stretch; height: auto; min-height: 460px; margin: 0; }
}

/* Services */
.service-card {
	display: flex; flex-direction: column; gap: 16px;
	padding: var(--card-pad-y) var(--card-pad-x);
	border-top: 1px solid var(--line);
}
.service-card__icon { width: 32px; height: 32px; color: var(--accent); stroke-width: 1.4; }
.service-card__title { margin: 0; font-size: var(--fs-card-title); font-weight: 500; line-height: normal; letter-spacing: -0.02em; }
.service-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.service-card__link { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; text-decoration: none; }

@media (min-width: 900px) {
	.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
	.service-card { gap: 22px; border-top: 0; }
	.service-card__title { line-height: 1.15; }
	.service-card + .service-card { border-left: 1px solid var(--line); }
	.service-card__icon { width: 40px; height: 40px; stroke-width: 1.3; }
	.service-card__link { display: block; min-height: 0; margin-top: auto; padding-top: 12px; }
}

/* Region */
.region { display: flex; flex-direction: column; gap: 20px; }
.region__body { display: flex; flex-direction: column; gap: 20px; }
.region__text { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--muted); }

.stats {
	margin: 0; display: flex; flex-direction: column;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.stats__item { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px; }
.stats__item + .stats__item { border-top: 1px solid var(--line); }
.stats__label { font-size: 14px; color: var(--muted); }
.stats__value { margin: 0; font-size: var(--fs-stat); font-weight: 500; letter-spacing: -0.02em; text-align: right; }
.stats__value--text { font-size: 20px; letter-spacing: 0; }

.map-card {
	position: relative; height: 202px; overflow: hidden;
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.map-card__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.43); }

@media (min-width: 900px) {
	.region { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.region__body { grid-column: span 6; gap: 24px; }
	.region__text { line-height: 1.65; }
	.stats { display: grid; grid-template-columns: repeat(var(--stat-cols, 3), minmax(0, 1fr)); margin-top: 12px; background: transparent; }
	.stats__item { flex-direction: column-reverse; justify-content: flex-end; align-items: stretch; gap: 6px; padding: 20px; }
	.stats__item + .stats__item { border-top: 0; border-left: 1px solid var(--line); }
	.stats__label { font-family: var(--font-mono); font-size: 12px; color: var(--subtle); }
	/* 30px at 1440 (design); shrinks with the 6-col cell so a word like "Enterprise" never overflows. */
	.stats__value, .stats__value--text { font-size: clamp(18px, 2.1vw, 30px); letter-spacing: -0.02em; text-align: left; }
	.map-card { grid-column: 8 / span 5; height: 442px; }
}

/* Testimonials */
.testimonials { display: flex; flex-direction: column; gap: 24px; }
.testimonials__aside { display: contents; }
.testimonials__aside .eyebrow { order: 1; }
.testimonials__slides { order: 2; }
.testimonials__controls { order: 3; display: flex; align-items: center; gap: 8px; }
.testimonials__count { padding-left: 8px; font-size: 12px; color: var(--subtle); }
.testimonial { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.testimonial[hidden] { display: none; }
.testimonial__quote { margin: 0; font-size: var(--fs-quote); font-weight: 400; line-height: 1.35; letter-spacing: -0.015em; color: var(--text); }

@media (min-width: 900px) {
	.testimonials { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.testimonials__aside { display: flex; flex-direction: column; gap: 24px; grid-column: span 3; }
	.testimonials__controls { display: grid; grid-template-columns: 44px 44px; gap: 8px; }
	.testimonials__count { grid-column: 1 / -1; margin-top: 16px; padding-left: 0; }
	.testimonials__slides { grid-column: 4 / span 9; }
	.testimonial { gap: 32px; }
	.testimonial__quote { line-height: 1.3; letter-spacing: -0.02em; }
}

/* Latest articles */
.latest-articles__all {
	box-sizing: content-box;
	display: flex; align-items: center; min-height: 52px; padding: 0 var(--gutter);
	border-top: 1px solid var(--line);
	font-size: 15px; font-weight: 500; text-decoration: none;
}

/* Contact block (home) */
.contact-block { display: flex; flex-direction: column; gap: 20px; }
.contact-block__intro { display: flex; flex-direction: column; gap: 20px; }
.contact-block__text { margin: 0; max-width: 400px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.contact-block__email { margin: 0; font-size: 16px; font-weight: 500; color: var(--body); }

@media (min-width: 900px) {
	.contact-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
	.contact-block__intro { grid-column: span 5; gap: 24px; }
	.contact-block__text { line-height: 1.65; }
	.contact-block__email { padding-top: 8px; font-weight: 400; }
	.contact-block__email a { text-decoration: none; }
	.contact-block .contact-form { grid-column: 7 / span 6; }
}

/* 6. Article lists ------------------------------------------------------- */

.article-rows__head { display: none; }
.article-row {
	display: flex; flex-direction: column; gap: 8px;
	padding: 22px var(--gutter);
	border-top: 1px solid var(--line);
	color: var(--text); text-decoration: none;
}
.article-row:hover { color: var(--text); background: var(--surface); }
.article-row__date, .article-row__topic, .article-row__arrow { display: none; }
.article-row__meta { font-size: 12px; color: var(--subtle); }
.article-row__main { display: flex; flex-direction: column; gap: 8px; }
.article-row__title { font-size: var(--fs-row-title); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.article-row__dek { font-size: 15px; line-height: 1.55; color: var(--muted); }

.articles-index .article-row { gap: 10px; padding-block: 24px; }
.articles-index .article-row__main { gap: 10px; }
.articles-index .article-row__title { line-height: 1.25; letter-spacing: -0.015em; }

.article-feature {
	display: flex; flex-direction: column; gap: 10px;
	padding: 24px var(--gutter);
	color: var(--text); text-decoration: none;
}
.article-feature:hover { color: var(--text); }
.article-feature__media { height: 190px; }
.article-feature__body { display: flex; flex-direction: column; gap: 10px; }
.article-feature__meta { font-size: 12px; color: var(--subtle); }
.article-feature__title { font-size: var(--fs-feature); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.article-feature__dek { font-size: 15px; line-height: 1.55; color: var(--muted); }
.article-feature__more { font-size: 15px; font-weight: 500; color: var(--accent); }
.article-feature:hover .article-feature__more { color: var(--accent-hover); }

.pagination { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 24px var(--gutter); border-top: 1px solid var(--line); font-size: 13px; }
.pagination a { text-decoration: none; }
.pagination .current { color: var(--text); }
.empty-state { margin: 0; padding: var(--sec-y) var(--gutter); color: var(--muted); }

@media (min-width: 900px) {
	.article-rows__head, .article-row {
		display: grid; grid-template-columns: 160px minmax(0, 1fr) 200px 40px; column-gap: var(--col-gap);
	}
	.article-rows__head {
		padding: 12px var(--gutter);
		border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
		font-size: 12px; color: var(--subtle);
	}
	.article-row, .articles-index .article-row { align-items: start; gap: 0 var(--col-gap); padding: 28px var(--gutter); border-top: 0; }
	.article-row + .article-row { border-top: 1px solid var(--line); }
	.article-row__meta { display: none; }
	.article-row__date { display: block; padding-top: 4px; font-size: 13px; color: var(--subtle); }
	.article-row__topic { display: block; padding-top: 6px; font-size: 12px; color: var(--body); }
	.article-row__arrow { display: block; font-size: 20px; color: var(--accent); }
	.article-row__main, .articles-index .article-row__main { gap: 8px; }
	.article-row__title, .articles-index .article-row__title { line-height: 1.3; letter-spacing: -0.01em; }

	.article-feature {
		display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
		padding: 40px var(--gutter);
		border-bottom: 1px solid var(--line);
	}
	.article-feature__media { grid-column: span 6; height: 340px; }
	.article-feature__body { grid-column: 8 / span 5; justify-content: center; gap: 18px; }
	.article-feature__title { line-height: 1.12; letter-spacing: -0.025em; }
	.article-feature__dek { font-size: 17px; line-height: 1.6; }
	.articles-index .article-feature + .article-rows .article-rows__head { border-top: 0; }
}

/* 7. Contact ------------------------------------------------------------- */

.contact-form {
	display: flex; flex-direction: column; gap: 16px;
	padding: var(--form-pad);
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.contact-form--page { gap: 18px; padding: var(--form-pad-lg); }
.contact-form__row { display: flex; flex-direction: column; gap: inherit; }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; color: var(--body); }
.field__input {
	width: 100%; min-height: 50px; padding: 0 14px;
	border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	background: var(--field); color: var(--text);
	font-family: var(--font-sans); font-size: 16px; font-weight: 400;
}
.contact-form--page .field__input { min-height: 52px; }
textarea.field__input { padding: 12px 14px; resize: vertical; }
select.field__input { appearance: auto; min-height: 48px; }
.contact-form--page select.field__input { min-height: 50px; }
.field__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.contact-form__foot { display: flex; flex-direction: column; gap: 16px; }
.contact-form__submit { order: -1; align-self: stretch; min-height: 52px; border: 0; font-size: 16px; }
.contact-form__note { font-size: 14px; color: var(--muted); }
.contact-form--inline .contact-form__note { text-align: center; }
.contact-form--page .contact-form__foot { gap: 18px; }

.form-status { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.5; }
.form-status--sent { background: #e5ede6; color: var(--accent-hover); border: 1px solid #b9cdbd; }
.form-status--error, .form-status--invalid { background: #f6e9e6; color: #7a2418; border: 1px solid #e3c2bb; }

.contact-page { display: flex; flex-direction: column; gap: 22px; padding-top: var(--page-top); padding-bottom: clamp(48px, calc(48px + (100vw - 390px) * 0.04571), 96px); }
.contact-page__intro { display: flex; flex-direction: column; gap: 22px; }
.contact-page__lede { max-width: 440px; }

.details { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.details__item { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.details dt { font-size: 12px; color: var(--subtle); }
.details dd { margin: 0; font-size: 16px; color: var(--text); }
.details dd a { font-weight: 500; }

@media (min-width: 900px) {
	.contact-form { gap: 18px; }
	.contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.contact-form--inline .field__input { background: var(--bg); font-size: 15px; }
	.contact-form--inline .contact-form__foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; padding-top: 4px; }
	.contact-form--inline .contact-form__submit { order: 0; align-self: auto; min-height: 48px; padding: 0 24px; font-size: 15px; }
	.contact-form--inline .contact-form__note { text-align: left; }
	.contact-form--page .contact-form__submit { align-self: flex-start; padding: 0 32px; }

	.contact-page { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); row-gap: 28px; }
	.contact-page__intro { grid-column: 1 / span 5; grid-row: 1; gap: 28px; }
	.contact-page__details { grid-column: 1 / span 5; grid-row: 2; }
	.contact-page__form { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; }
	.details dd { font-size: 17px; }
}

/* 8. About + generic pages ----------------------------------------------- */

.page-hero {
	display: flex; flex-direction: column; gap: var(--page-gap);
	padding: var(--page-top) var(--gutter) var(--page-bottom);
	border-bottom: 1px solid var(--line);
}
.page-hero__body { display: flex; flex-direction: column; gap: var(--page-gap); }
.page-hero__text { margin: 0; font-size: var(--fs-lede-page); line-height: 1.6; color: var(--body); }
.page-hero__lede { margin: 0; max-width: 620px; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.page-hero__aside { display: flex; flex-direction: column; gap: 12px; }
.page-hero__media { height: 220px; margin-top: 8px; }
.page-hero__caption { margin: 0; font-size: 12px; line-height: 1.5; color: var(--subtle); }
.page-hero--articles { padding-bottom: clamp(36px, calc(36px + (100vw - 390px) * 0.02667), 64px); border-bottom: 0; }
.page-hero--articles, .page-hero--articles .page-hero__body { gap: clamp(18px, calc(18px + (100vw - 390px) * 0.00571), 24px); }
.page-hero--404 { border-bottom: 0; padding-bottom: calc(var(--page-bottom) * 2); }

.specialties { margin: 0; padding: 0; list-style: none; }
.specialty { display: flex; align-items: center; gap: 16px; padding: 18px var(--gutter); border-top: 1px solid var(--line); }
.specialty__icon { flex: none; width: 26px; height: 26px; color: var(--accent); }
.specialty__num { display: none; }
.specialty__title { margin: 0; font-size: var(--fs-specialty); font-weight: 500; }
.specialty--text { flex-wrap: wrap; align-items: flex-start; }
.specialty--text .specialty__title { flex: 1; align-self: center; }
.specialty__text { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.approach__points { margin-top: 4px; }

.approach { display: flex; flex-direction: column; gap: 20px; padding-block: clamp(48px, calc(48px + (100vw - 390px) * 0.03810), 88px); }
.approach__body { display: flex; flex-direction: column; gap: 20px; }
.approach__statement { margin: 0; font-size: var(--fs-statement); line-height: 1.25; letter-spacing: -0.02em; }
.approach__text { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--muted); }

.page-body { padding-bottom: calc(var(--sec-y) + 16px); }
.page-body .prose { max-width: 760px; }

@media (min-width: 900px) {
	.page-hero { border-bottom: 1px solid var(--line); }
	.page-hero--media { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.page-hero--media .page-hero__body { grid-column: span 7; }
	.page-hero__text { line-height: 1.65; }
	.page-hero__aside { grid-column: 9 / span 4; }
	.page-hero__media { flex: 1 1 auto; height: auto; min-height: 420px; margin: 0; }
	.page-hero--articles { border-bottom: 1px solid var(--line); }
	.page-hero--404 { border-bottom: 0; }

	.specialties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
	.specialty { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; border-top: 0; }
	.specialty + .specialty { border-left: 1px solid var(--line); }
	.specialty__icon { width: 32px; height: 32px; }
	.specialty__num { display: block; font-size: 12px; color: var(--subtle); }
	.specialty__title { letter-spacing: -0.02em; }
	.specialties--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.specialty--text .specialty__title { flex: none; align-self: auto; }
	.specialty__text { flex-basis: auto; }

	.approach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
	.approach__eyebrow { grid-column: span 3; }
	.approach__body { grid-column: 4 / span 9; gap: 28px; }
	.approach__statement { line-height: 1.15; letter-spacing: -0.025em; }
	.approach__text { font-size: 18px; }
}

/* 9. Article ------------------------------------------------------------- */

.article {
	display: flex; flex-direction: column; gap: 20px;
	padding: var(--article-top) var(--gutter) var(--article-bottom);
	border-bottom: 1px solid var(--line);
}
.article__head { display: flex; flex-direction: column; gap: 20px; }
.article__back { display: flex; align-items: center; align-self: flex-start; min-height: 44px; margin-block: -12px -4px; font-size: 13px; text-decoration: none; }
.article__standfirst { margin: 0; font-size: var(--fs-standfirst); line-height: 1.55; color: var(--muted); }
.article__media { height: clamp(220px, calc(220px + (100vw - 390px) * 0.28571), 520px); margin-block: 8px; background: var(--placeholder); }
.article__cta { margin-top: 32px; }
.article__caption { margin: -16px 0 0; font-size: 12px; line-height: 1.5; color: var(--subtle); }

.cta-card {
	display: flex; flex-direction: column; gap: 16px;
	padding: var(--cta-pad);
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.cta-card .eyebrow { font-size: 12px; }
.cta-card__title { margin: 0; font-size: var(--fs-cta-title); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.cta-card__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

.next-article {
	display: flex; flex-direction: column; gap: 10px;
	padding: 32px var(--gutter);
	border-bottom: 1px solid var(--line);
	color: var(--text); text-decoration: none;
}
.next-article:hover { color: var(--text); background: var(--surface); }
.next-article__body { display: flex; flex-direction: column; gap: 10px; }
.next-article__label { font-size: 12px; color: var(--subtle); }
.next-article__title { font-size: var(--fs-next); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.next-article__arrow { font-size: 28px; color: var(--accent); }

@media (min-width: 900px) {
	.article { align-items: center; gap: 0; }
	.article__head { width: 800px; max-width: 100%; gap: 24px; }
	.article__back { min-height: 0; margin: 0; }
	.article .person--byline { padding-top: 8px; }
	.article__media { width: 1120px; max-width: 100%; margin: 56px 0; }
	.article__caption { width: 1120px; max-width: 100%; margin: -44px 0 56px; }
	.article__head + .article__body { margin-top: 56px; }
	.article__body, .article__cta { width: 680px; max-width: 100%; }
	.article__cta { margin-top: 68px; }

	.next-article { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; padding: 48px var(--gutter); }
	.next-article__title { line-height: normal; letter-spacing: -0.02em; }
}

/* 10. Prose (post_content) ----------------------------------------------- */

.prose { font-size: var(--fs-prose); line-height: 1.7; color: var(--prose); overflow-wrap: break-word; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 20px; }
.prose > :is(h1, h2, h3, h4) + * { margin-top: 20px; }
.prose :is(h1, h2) { margin-top: 44px; font-size: var(--fs-prose-h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
.prose :is(h3, h4) { margin-top: 36px; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose :is(ul, ol) { padding-left: 1.3em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--subtle); }
.prose strong { font-weight: 600; color: var(--text); }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--subtle); }
.prose blockquote { padding-left: 20px; border-left: 2px solid var(--accent); color: var(--text); font-size: 1.1em; line-height: 1.5; }
.prose hr { height: 1px; border: 0; background: var(--line); }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-mono); font-size: .86em; }
.prose pre { padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 14px; line-height: 1.6; }
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9em; }
.prose :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }

@media (min-width: 900px) {
	.prose > * + * { margin-top: 22px; }
	.prose > :is(h1, h2, h3, h4) + * { margin-top: 22px; }
	.prose :is(h1, h2) { margin-top: 46px; }
}

/* 11. Utilities ---------------------------------------------------------- */

.show-mobile-inline { display: inline; }
.show-mobile-flex { display: flex; }
.hide-mobile { display: none; }

@media (min-width: 900px) {
	.show-mobile, .show-mobile-inline, .show-mobile-flex { display: none !important; }
	.hide-mobile { display: inline; }
}
@media (max-width: 899.98px) {
	.show-mobile { display: inline; }
}