/*
Theme Name: DigitasVin
Theme URI: https://digitasvin.com/
Description: Custom theme for DigitasVin — SEO, AI GEO, website builds and WCAG 2.1 AA accessibility. Case studies and service pages as structured content, Organization/Service/FAQPage schema, self-hosted fonts, no page builder required.
Version: 1.0.4
Requires at least: 6.3
Requires PHP: 7.4
Author: DigitasVin
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digitasvin
*/

/* =========================================================================
   Tokens
   ========================================================================= */
:root {
	--ink: #16140F;
	--body: #403B33;
	--muted: #6B655C;
	--paper: #F7F5F1;
	--card: #FFFDFA;
	--line: #DED8CE;
	--line-soft: #EFEBE3;
	--accent: #0F5C52;
	--deep: #0F1F1C;
	--deep-line: #23342F;
	--accent-light: #7FBDB0;
	--on-dark: #C8C2B6;
	--on-dark-muted: #B9B2A6;
	--hover-tint: #EFEBE3;
	--warn: #A6552E;

	--serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
	--sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--max: 1280px;
	--gutter: 56px;
	--section: 88px;
	--ease: 150ms ease;
}

@media (max-width: 1024px) {
	:root { --gutter: 40px; --section: 64px; }
}
@media (max-width: 640px) {
	:root { --gutter: 24px; --section: 48px; }
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--paper);
	color: var(--body);
	font: 400 15px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); font-weight: inherit; }
p, li { text-wrap: pretty; }
button, input, textarea, select { font: inherit; color: inherit; }
* { border-radius: 0 !important; }

a { color: var(--accent); text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease); }
a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.consult :focus-visible, .deep-cta :focus-visible, .site-footer :focus-visible,
.results-bar :focus-visible, .results-band :focus-visible, .ink-cta :focus-visible, .deliverables :focus-visible {
	outline-color: var(--accent-light);
}
main:focus { outline: none; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--paper); }

[hidden] { display: none !important; }

/* =========================================================================
   Type roles
   ========================================================================= */
.eyebrow, .label, .text-link, .micro, .chip {
	font-family: var(--mono);
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.eyebrow { font-size: 12px; color: var(--accent); }
.label { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; }
.label--accent { color: var(--accent); }
.label--warn { color: var(--warn); }
.label--on-dark, .eyebrow--on-dark { color: var(--accent-light); }
.micro { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; text-transform: none; }

.text-link { font-size: 12px; letter-spacing: 0.08em; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; min-height: 24px; }
.text-link:hover { color: var(--ink); }
.text-link--back { color: var(--muted); }

.page-title { font: 400 64px/1.02 var(--serif); color: var(--ink); max-width: 22ch; text-wrap: balance; }
.h2 { font: 400 44px/1.08 var(--serif); color: var(--ink); text-wrap: balance; }
.h2--sm { font-size: 36px; }
.lead { font-size: 19px; line-height: 1.55; color: var(--body); }
.metric { font: 400 34px/1 var(--serif); color: var(--ink); }
.metric--xl { font-size: 64px; }
.metric__label { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 6px; }

@media (max-width: 640px) {
	.page-title { font-size: 36px; }
	.h2, .h2--sm { font-size: 30px; line-height: 1.1; }
	.lead { font-size: 17px; }
	.metric { font-size: 36px; }
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 17px 28px;
	font: 600 15px/1.2 var(--sans); text-decoration: none; text-align: center;
	border: 0; cursor: pointer;
	transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 16px 26px; }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent-light); color: var(--ink); }
.btn--header { background: var(--ink); color: var(--paper); font-size: 13px; padding: 12px 20px; }
.btn--header:hover { background: var(--accent); color: var(--paper); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
	position: sticky; top: 0; z-index: 5;
	background: rgba(247, 245, 241, 0.94);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header__inner {
	max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__logo { max-height: 40px; width: auto; }
.logo { display: block; height: 26px; width: auto; color: var(--ink); --logo-accent: var(--accent); }
.site-footer__wordmark .logo { height: 24px; color: var(--paper); --logo-accent: var(--accent-light); }
.site-nav__list { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--sans); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a:hover { color: var(--accent); }
.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

.nav-toggle {
	display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 10px;
	background: transparent; border: 1px solid var(--line); cursor: pointer;
	font: 500 13px/1 var(--sans); color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; content: '';
}
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after { position: absolute; top: 5px; }
.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 899px) {
	.site-header__inner { grid-template-columns: 1fr auto; padding-top: 12px; padding-bottom: 12px; }
	.nav-toggle { display: inline-flex; }
	.site-nav {
		display: none; grid-column: 1 / -1; order: 3;
		border-top: 1px solid var(--line); margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) 12px;
	}
	.nav-open .site-nav { display: block; }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list li + li { border-top: 1px solid var(--line-soft); }
	.site-nav a { width: 100%; font-size: 16px; min-height: 52px; }
}
@media (max-width: 420px) {
	.btn--header { padding: 12px 14px; }
	.nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* =========================================================================
   Layout primitives
   ========================================================================= */
.section-pad, .split, .ruled-section, .who, .page-intro, .work, .services-index, .posts, .contact-alt,
.case__header, .shots, .next-case, .service-hero, .proof, .prose, .page-article > .prose {
	max-width: var(--max); margin-left: auto; margin-right: auto;
	padding-left: var(--gutter); padding-right: var(--gutter);
}

.split {
	display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px;
	padding-top: 72px; padding-bottom: 72px;
}
.split--problem { grid-template-columns: 0.9fr 1.1fr; gap: 64px; padding-top: var(--section); padding-bottom: var(--section); }
.split__title { max-width: 18ch; }
.split--ruled { border-bottom: 1px solid var(--line); }
@media (max-width: 1024px) {
	.split, .split--problem { grid-template-columns: 1fr; gap: 32px; padding-top: var(--section); padding-bottom: var(--section); }
}

/* Numbered lists (problem, what we did) */
.numbered { display: grid; gap: 0; }
.numbered__item {
	display: grid; grid-template-columns: 28px 1fr; gap: 18px;
	padding: 30px 0; border-bottom: 1px solid var(--line);
}
.numbered__item:first-child { padding-top: 0; }
.numbered__item:last-child { border-bottom: 0; padding-bottom: 0; }
.numbered--wide .numbered__item { grid-template-columns: 30px 1fr; padding: 26px 0; }
.numbered--wide .numbered__item:first-child { padding-top: 0; }
.numbered__num { font: 400 12px/1.9 var(--mono); color: var(--accent); }
.numbered__title { font: 600 17px/1.35 var(--sans); color: var(--ink); margin-bottom: 6px; }
.numbered p { max-width: 60ch; }

/* Ruled section heading row */
.ruled-section { padding-bottom: var(--section); }
.ruled-section__head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
	border-top: 1px solid var(--ink); padding-top: 22px; margin-bottom: 36px;
}

/* Hairline grid — container has NO padding, the 1px gap is the rule. */
.hairline-grid, .hairline-stack, .before-after {
	display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); padding: 0; margin: 0;
}
.hairline-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .hairline-grid--2 { grid-template-columns: 1fr; } }

/* =========================================================================
   Image slots
   ========================================================================= */
.dv-media { position: relative; overflow: hidden; background: var(--line-soft); }
.dv-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dv-media--empty {
	display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px;
	background: var(--line-soft);
}
.dv-media__label { font: 400 11px/1.3 var(--mono); color: var(--muted); letter-spacing: 0.04em; background: var(--card); padding: 4px 8px; border: 1px solid var(--line); }
.dv-media__hint { position: absolute; top: 10px; left: 10px; font: 500 11px/1.3 var(--mono); color: var(--warn); background: var(--card); padding: 4px 8px; border: 1px dashed var(--warn); }

/* =========================================================================
   Homepage
   ========================================================================= */
.hero {
	display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end;
	padding-top: 96px; padding-bottom: 72px;
}
.hero__copy { display: grid; gap: 26px; justify-items: start; }
.hero__title { font: 400 80px/0.98 var(--serif); letter-spacing: -0.02em; color: var(--ink); max-width: 15em; }
.hero__lead { max-width: 52ch; }
.hero__media .dv-media { height: 340px; border: 1px solid var(--line); }
.proof-panel {
	height: 340px; border: 1px solid var(--line); background: var(--card);
	padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; position: relative;
}
.proof-panel__quote { font: 400 34px/1.1 var(--serif); color: var(--ink); max-width: 18ch; }
.proof-panel--metric { height: 280px; justify-content: center; gap: 4px; }
.proof-panel .dv-media__hint { top: 16px; left: 16px; right: 16px; }
@media (max-width: 1024px) {
	.hero { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 56px; }
	.hero__title { font-size: 60px; }
}
@media (max-width: 640px) {
	.hero { padding-top: 40px; padding-bottom: 48px; }
	.hero__title { font-size: 40px; line-height: 1.02; }
	.hero__media .dv-media, .proof-panel { height: 260px; }
	.proof-panel { padding: 24px; }
	.proof-panel__quote { font-size: 28px; }
	.btn-row .btn { flex: 1 1 auto; }
}

/* Results bar (full-bleed ink) */
.results-bar { background: var(--ink); }
.results-bar__list {
	max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
}
.results-bar__figure { font: 400 44px/1 var(--serif); color: var(--paper); }
.results-bar__label { font-size: 13px; line-height: 1.45; color: var(--on-dark-muted); margin-top: 10px; max-width: 30ch; }
@media (max-width: 1024px) { .results-bar__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .results-bar__list { grid-template-columns: 1fr; gap: 28px; } .results-bar__figure { font-size: 40px; } }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
	display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
	color: inherit; text-decoration: none;
}
.card:hover { border-color: var(--ink); text-decoration: none; color: inherit; }
.card__media { height: 180px; border-bottom: 1px solid var(--line); }
.card__body { padding: 24px; display: grid; gap: 10px; align-content: start; flex: 1; }
.card__title { font: 600 20px/1.25 var(--sans); color: var(--ink); }
.card__text { font-size: 14px; line-height: 1.55; }
.card__metric { font: 400 26px/1.1 var(--serif); color: var(--ink); margin-top: 8px; }
@media (max-width: 1024px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .card__title { font-size: 18px; } }

/* Capabilities */
.capability { background: var(--paper); padding: 32px; display: grid; gap: 10px; align-content: start; position: relative; }
.capability__title { font: 600 19px/1.3 var(--sans); color: var(--ink); }
.capability p { max-width: 52ch; }
.capability .text-link { margin-top: 6px; }
.capability__link { color: var(--ink); }
.capability__link::after { content: ''; position: absolute; inset: 0; }
.services-index .capability:hover { background: var(--card); }
.services-index .capability:hover .capability__link { text-decoration: underline; }
@media (max-width: 640px) { .capability { padding: 24px; } }

/* Who you work with */
.who { padding-bottom: var(--section); }
.who__card {
	background: var(--card); border: 1px solid var(--line); padding: 48px;
	display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 56px; align-items: start;
}
.who__title { font-size: 40px; margin-top: 14px; max-width: 16ch; }
.who__body { display: grid; gap: 18px; }
.who__body p { font-size: 17px; line-height: 1.6; max-width: 62ch; }
.who__body .who__note { font-size: 15px; color: var(--muted); }
@media (max-width: 1024px) { .who__card { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .who__card { padding: 28px 24px; } .who__title { font-size: 30px; } }

/* Consultation band */
.consult { background: var(--deep); color: var(--on-dark); }
.consult__inner {
	max-width: var(--max); margin: 0 auto; padding: 80px var(--gutter);
	display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.consult__copy { display: grid; gap: 18px; }
.consult__title { font: 400 46px/1.06 var(--serif); color: var(--paper); max-width: 18ch; }
.consult__lead { font-size: 17px; line-height: 1.6; max-width: 46ch; }
.consult__points { margin-top: 8px; }
.consult__points li { padding: 13px 0; border-top: 1px solid var(--deep-line); font-size: 15px; }
.consult__points li:last-child { border-bottom: 1px solid var(--deep-line); }
.consult__card { background: var(--paper); color: var(--body); padding: 32px; display: grid; gap: 16px; }
.consult__embed { width: 100%; height: 640px; border: 1px solid var(--line); background: var(--card); }
.consult__note { font-size: 12px; color: var(--muted); }
.consult__done { display: grid; gap: 10px; padding: 12px 0; }
.consult__done:focus { outline: none; }
.consult__done-title { font: 400 32px/1.1 var(--serif); color: var(--ink); }
@media (max-width: 1024px) { .consult__inner { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 640px) { .consult__inner { padding-top: 48px; padding-bottom: 48px; } .consult__title { font-size: 34px; } .consult__card { padding: 24px; } }

/* Forms */
.consult-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font: 400 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.field__optional { text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
	width: 100%; min-height: 48px; padding: 12px 14px;
	background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 15px;
}
.field input::placeholder { color: var(--muted); }
.field input:hover { border-color: var(--muted); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--warn); }
.field__error { font-size: 13px; color: var(--warn); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Inner pages: intro, portfolio
   ========================================================================= */
.page-intro { padding-top: 72px; padding-bottom: 40px; display: grid; gap: 22px; justify-items: start; }
.page-intro--ruled { border-bottom: 1px solid var(--line); padding-bottom: 48px; margin-bottom: 48px; max-width: none;
	padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.page-intro__lead { max-width: 60ch; font-size: 18px; }
@media (max-width: 640px) { .page-intro { padding-top: 40px; padding-bottom: 32px; } }

.filters { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.chip {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	padding: 10px 14px; font-size: 12px; letter-spacing: 0.08em; color: var(--ink);
	background: var(--card); border: 1px solid var(--line); cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"]::before { content: ''; width: 6px; height: 6px; background: var(--accent); }

.work { padding-bottom: var(--section); }
.work-row { background: var(--paper); }
.work-row__link {
	display: grid; grid-template-columns: 280px 1fr 200px; gap: 36px; align-items: center;
	padding: 32px; color: inherit; text-decoration: none;
}
.work-row__link:hover { background: var(--card); color: inherit; text-decoration: none; }
.work-row__link:hover .work-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.work-row__media { height: 170px; border: 1px solid var(--line); }
.work-row__text { display: grid; gap: 10px; }
.work-row__title { font: 400 30px/1.1 var(--serif); color: var(--ink); }
.work-row__blurb { max-width: 56ch; }
.work-row__metric { border-left: 1px solid var(--line); padding-left: 24px; display: grid; gap: 4px; justify-items: start; }
.work-row__metric .text-link { margin-top: 10px; }
@media (max-width: 1024px) {
	.work-row__link { grid-template-columns: 220px 1fr; }
	.work-row__metric { grid-column: 2; }
}
@media (max-width: 640px) {
	.work-row__link { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
	.work-row__metric { grid-column: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
	.work-row__title { font-size: 26px; }
	.work-row__media { height: 190px; }
}

.ink-cta { background: var(--ink); }
.ink-cta__inner {
	max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter);
	display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.ink-cta__title { font: 400 40px/1.08 var(--serif); color: var(--paper); }
@media (max-width: 640px) { .ink-cta__title { font-size: 30px; } }

/* =========================================================================
   Case study
   ========================================================================= */
.case__header { padding-top: 64px; padding-bottom: 48px; display: grid; gap: 22px; justify-items: start; border-bottom: 1px solid var(--line); max-width: none;
	padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.case__title { font-size: 66px; max-width: 26ch; }
.case__lead { max-width: 62ch; }
.meta-row { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 6px; }
.meta-row dd { margin: 4px 0 0; color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .case__title { font-size: 36px; } .case__header { padding-top: 40px; } }

.before-after {
	grid-template-columns: 1fr 1fr;
	max-width: calc(var(--max) - 2 * var(--gutter)); margin: 56px auto 0;
}
.before-after__cell { background: var(--card); padding: 36px; display: grid; gap: 16px; align-content: start; }
.ruled-list li { padding: 14px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.ruled-list li:first-child { border-top: 0; padding-top: 0; }
.ruled-list--compact li { padding: 9px 0; font-size: 14px; }
.ruled-list--compact li:first-child { padding-top: 9px; border-top: 1px solid var(--line-soft); }
@media (max-width: 1360px) { .before-after { margin-left: var(--gutter); margin-right: var(--gutter); } }
@media (max-width: 640px) { .before-after { grid-template-columns: 1fr; } .before-after__cell { padding: 24px; } }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 56px; padding-bottom: 8px; }
.shots .dv-media { height: 300px; border: 1px solid var(--line); }
.shots figcaption { margin-top: 10px; font: 400 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .shots { grid-template-columns: 1fr; } .shots .dv-media { height: 220px; } }
.section-pad-sm { padding-top: 56px; padding-bottom: 72px; }

.results-band { background: var(--ink); }
.results-band__list {
	max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
}
.results-band__list--3 { grid-template-columns: repeat(3, 1fr); }
.results-band__list--2 { grid-template-columns: repeat(2, 1fr); }
.results-band__figure { font: 400 52px/1 var(--serif); color: var(--paper); }
.results-band__label { font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); margin-top: 12px; max-width: 28ch; }
@media (max-width: 1024px) { .results-band__list, .results-band__list--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .results-band__list, .results-band__list--3, .results-band__list--2 { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; } .results-band__figure { font-size: 40px; } }

.pull-quote { text-align: center; padding: 64px var(--gutter); border-bottom: 1px solid var(--line); display: grid; gap: 20px; justify-items: center; }
.pull-quote blockquote p { font: italic 400 34px/1.2 var(--serif); color: var(--ink); max-width: 32ch; margin: 0 auto; }
@media (max-width: 640px) { .pull-quote blockquote p { font-size: 26px; } }

.next-case { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 56px; }
.next-case__link { display: inline-block; margin-top: 6px; font: 400 34px/1.1 var(--serif); color: var(--ink); }
@media (max-width: 640px) { .next-case__link { font-size: 28px; } }

/* =========================================================================
   Service page
   ========================================================================= */
.service-hero {
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start;
	padding-top: 72px; padding-bottom: 56px;
	max-width: none; border-bottom: 1px solid var(--line);
	padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.service-hero__copy { display: grid; gap: 24px; justify-items: start; }
.service-hero__title { font-size: 60px; }
.service-hero__lead { font-size: 18px; max-width: 56ch; }
.deliverables { background: var(--deep); padding: 32px; color: var(--on-dark); }
.deliverables ul { margin: 6px 0 0; padding: 0; list-style: none; }
.deliverables li { padding: 13px 0; border-bottom: 1px solid var(--deep-line); font-size: 15px; }
.deliverables li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 1024px) { .service-hero { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .service-hero { padding-top: 40px; } .service-hero__title { font-size: 36px; } .deliverables { padding: 24px; } }

.split--ruled { max-width: none;
	padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.phase { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.phase__title { font: 600 18px/1.3 var(--sans); color: var(--ink); }
@media (max-width: 640px) { .phases { grid-template-columns: 1fr; } }

.proof {
	display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
	padding-top: 64px; padding-bottom: 64px; max-width: none; border-bottom: 1px solid var(--line);
	padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.proof__copy { display: grid; gap: 18px; justify-items: start; }
.proof__title { font-size: 38px; max-width: 22ch; }
.proof__body { font-size: 16px; max-width: 48ch; }
.proof__media { height: 280px; border: 1px solid var(--line); }
@media (max-width: 1024px) { .proof { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px) { .proof__title { font-size: 30px; } }

.faq { padding-top: 64px; padding-bottom: 64px; }
.faq__note { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 40ch; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
	display: flex; justify-content: space-between; align-items: center; gap: 24px;
	min-height: 44px; padding: 22px 0; cursor: pointer; list-style: none;
	font: 600 18px/1.35 var(--sans); color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--accent); }
.faq__icon { flex: none; width: 12px; height: 12px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1.5px; background: var(--accent); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { display: none; }
.faq__a { padding-bottom: 24px; }
.faq__a p { font-size: 16px; line-height: 1.65; max-width: 64ch; }
@media (max-width: 640px) { .faq__q { font-size: 17px; } }

.deep-cta { background: var(--deep); text-align: center; padding: 72px var(--gutter); display: grid; gap: 22px; justify-items: center; }
.deep-cta__title { font: 400 48px/1.06 var(--serif); color: var(--paper); max-width: 26ch; text-wrap: balance; }
.deep-cta__lead { font-size: 17px; color: var(--on-dark); max-width: 52ch; }
@media (max-width: 640px) { .deep-cta { padding-top: 48px; padding-bottom: 48px; } .deep-cta__title { font-size: 32px; } }

/* =========================================================================
   Services index, posts, prose, contact
   ========================================================================= */
.services-index { padding-bottom: var(--section); }

.posts { padding-bottom: var(--section); }
.post-row { background: var(--paper); }
.post-row__link { display: grid; gap: 8px; padding: 28px 32px; color: inherit; }
.post-row__link:hover { background: var(--card); color: inherit; text-decoration: none; }
.post-row__title { font: 400 30px/1.1 var(--serif); color: var(--ink); }
.post-row__excerpt { max-width: 64ch; }
.page-title--article { font-size: 56px; max-width: 24ch; }
@media (max-width: 640px) { .page-title--article { font-size: 34px; } }
.post-article__media { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto 48px; border: 1px solid var(--line); }
.nav-links { display: flex; gap: 24px; margin-top: 28px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

.prose { padding-bottom: var(--section); }
.prose > * { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; }
.prose h2 { font: 400 36px/1.1 var(--serif); margin-top: 1.6em; }
.prose h3 { font: 600 19px/1.35 var(--sans); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 20px; font: italic 400 24px/1.3 var(--serif); color: var(--ink); }
.prose img, .prose figure { max-width: 100%; }
.prose figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose--case { padding-top: 8px; }
@media (max-width: 640px) { .prose h2 { font-size: 28px; } .prose p, .prose li { font-size: 16px; } }

.contact-alt { padding-top: 56px; padding-bottom: var(--section); display: grid; gap: 8px; }
.contact-alt .prose { padding: 0 0 24px; }
.contact-alt__email { font: 400 28px/1.2 var(--serif); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--on-dark-muted); }
.site-footer__grid {
	max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 40px;
	display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer__brand { display: grid; gap: 14px; align-content: start; }
.site-footer__brand p { font-size: 14px; line-height: 1.55; max-width: 34ch; }
.site-footer__email { font: 400 13px/1.4 var(--mono); color: var(--accent-light); }
.site-footer__email:hover { color: var(--paper); }
.site-footer__heading { font: 400 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 14px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--on-dark-muted); }
.site-footer__col a:hover { color: var(--paper); }
.site-footer__legal { max-width: var(--max); margin: 0 auto; padding: 20px var(--gutter) 32px; border-top: 1px solid #2A2720; font: 400 12px/1.4 var(--mono); color: var(--on-dark-muted); }
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__col a { min-height: 44px; } }

/* =========================================================================
   Print
   ========================================================================= */
@media print {
	.site-header, .consult, .ink-cta, .deep-cta, .site-footer, .filters { display: none; }
	body { background: #fff; }
}

/* Page builders (e.g. Elementor's global kit) can paint the body white; the theme owns the ground. */
body[class] { background: var(--paper); }