/*
 * DigitasVin — Swiss Modernist style (loaded only when Customize → DigitasVin →
 * Visual style is "Swiss Modernist"). Layers on style.css.
 *
 * From the Swiss Modernist design system, adapted from slides to the web:
 *  - one ground (surface); no cards, borders, rules, tinted boxes or dark bands
 *  - one typeface, Inter Tight 300/400/700; hierarchy from size and weight
 *  - flush left; ideas separated by open space and alignment
 *  - one accent idea per section (the *highlighted* phrase, the lead result,
 *    the active filter, the open question)
 *  - accent is DigitasVin teal rather than the source system's blue
 * Slide sizes (320/120/88/72/48/36/32/28/24px) are scaled for reading distance
 * on screen; ratios between steps are kept.
 */

:root {
	--surface: #F4F5F7;
	--ink: #121A19;
	--body: #3B4645;
	--muted: #56615E;
	--numeral: #7A8582;
	--placeholder: #E2E6E5;
	--accent: #0F5C52;

	/* Retire the original system's extra grounds and rules. */
	--paper: var(--surface);
	--card: var(--surface);
	--line: transparent;
	--line-soft: transparent;
	--deep: var(--surface);
	--deep-line: transparent;
	--on-dark: var(--body);
	--on-dark-muted: var(--muted);
	--accent-light: var(--accent);
	--hover-tint: var(--surface);
	--warn: var(--muted);

	--sans: 'Inter Tight', Arial, sans-serif;
	--serif: var(--sans);
	--mono: var(--sans);

	/* Spacing: space-1..5 (12/24/40/56/96) */
	--s1: 12px;
	--s2: 24px;
	--s3: 40px;
	--s4: 56px;
	--s5: 96px;
	--section: 128px;
}
@media (max-width: 1024px) { :root { --s5: 64px; --section: 96px; } }
@media (max-width: 640px) { :root { --s4: 40px; --s5: 48px; --section: 72px; } }

body {
	background: var(--surface);
	color: var(--body);
	font: 300 18px/1.55 var(--sans);
}
strong, b { font-weight: 700; }

.hl { color: var(--accent); }

/* ------------------------------------------------------------------ Type */
.eyebrow, .label, .micro, .text-link, .chip,
.field label, .shots figcaption, .site-footer__heading, .site-footer__legal, .nav-links {
	font-family: var(--sans);
	text-transform: none;
}
.eyebrow, .label {
	font-size: 14px; font-weight: 400; letter-spacing: 3px; color: var(--muted); line-height: 1.4;
}
.label--accent, .label--warn, .label--on-dark, .eyebrow--on-dark { color: var(--muted); }
.micro { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }

.text-link {
	font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--ink);
	min-height: 44px;
}
.text-link:hover { color: var(--accent); }
.text-link--back { color: var(--muted); font-weight: 400; }

.page-title { font: 700 64px/1.02 var(--sans); letter-spacing: -2.5px; max-width: 18ch; }
.h2, .h2--sm { font: 700 44px/1.05 var(--sans); letter-spacing: -1.5px; }
.lead { font-size: 22px; font-weight: 300; line-height: 1.4; }
.metric { font: 700 40px/1 var(--sans); letter-spacing: -1px; }
.metric__label { font-size: 15px; font-weight: 400; color: var(--body); }

@media (max-width: 640px) {
	.page-title { font-size: 38px; letter-spacing: -1.2px; }
	.h2, .h2--sm { font-size: 30px; letter-spacing: -0.8px; }
	.lead { font-size: 19px; }
}

/* ------------------------------------------------------------------ Buttons */
.btn { font: 700 16px/1.2 var(--sans); padding: 18px 30px; }
.btn--primary, .btn--header, .btn--on-dark { background: var(--ink); color: var(--surface); }
.btn--primary:hover, .btn--header:hover, .btn--on-dark:hover { background: var(--accent); color: #fff; }
/* Secondary = text action (no outlined box). */
.btn--secondary { border: 0; padding: 18px 4px; background: transparent; color: var(--ink); }
.btn--secondary::after { content: '→'; margin-left: 8px; }
.btn--secondary:hover { background: transparent; color: var(--accent); }
.btn--header { font-size: 14px; padding: 12px 20px; }
:focus-visible,
.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: 2px solid var(--accent); outline-offset: 3px;
}

/* ------------------------------------------------------------------ Header & footer */
.site-header {
	background: rgba(244, 245, 247, 0.94);
	border-bottom: 0;
}
.site-header__inner { padding-top: 24px; padding-bottom: 24px; }
.logo { height: 24px; }
.site-nav a { font: 400 15px/1 var(--sans); }
.site-nav a[aria-current="page"] { font-weight: 700; color: var(--ink); }
@media (max-width: 899px) {
	.site-nav { border-top: 0; }
	.site-nav__list li + li { border-top: 0; }
	.nav-toggle { border: 0; }
	.site-nav a { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
}

.site-footer { background: var(--surface); color: var(--body); }
.site-footer__grid { padding-top: var(--section); padding-bottom: var(--s4); }
.site-footer__wordmark .logo { color: var(--ink); --logo-accent: var(--accent); }
.site-footer__brand p { font-size: 16px; }
.site-footer__email { font: 700 16px/1.4 var(--sans); color: var(--ink); }
.site-footer__email:hover { color: var(--accent); }
.site-footer__heading { font-size: 14px; letter-spacing: 3px; color: var(--muted); }
.site-footer__col a { font-size: 16px; color: var(--ink); font-weight: 400; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__legal { border-top: 0; font-size: 14px; color: var(--muted); padding-bottom: var(--s4); }

/* ------------------------------------------------------------------ Shared blocks */
.split { gap: var(--s5); padding-top: var(--section); padding-bottom: 0; }
.split--problem { padding-top: var(--section); padding-bottom: 0; gap: var(--s5); }
.split--ruled { border-bottom: 0; }
@media (max-width: 1024px) { .split, .split--problem { gap: var(--s3); } }

/* Numbered sets: large light numerals, space instead of rules. */
.numbered { gap: var(--s4); }
.numbered__item, .numbered--wide .numbered__item {
	grid-template-columns: 96px 1fr; gap: var(--s2); padding: 0; border: 0;
}
.numbered__num { font: 300 56px/0.9 var(--sans); color: var(--numeral); letter-spacing: -2px; }
.numbered__title { font: 700 22px/1.2 var(--sans); letter-spacing: -0.4px; margin-bottom: var(--s1); }
.numbered p { font-size: 17px; font-weight: 400; color: var(--body); }
@media (max-width: 640px) {
	.numbered__item, .numbered--wide .numbered__item { grid-template-columns: 1fr; gap: 8px; }
	.numbered__num { font-size: 40px; }
}

.ruled-section { padding-top: var(--section); padding-bottom: 0; }
.ruled-section__head { border-top: 0; padding-top: 0; margin-bottom: var(--s4); }

/* Hairline grids become open grids. */
.hairline-grid, .hairline-stack, .before-after {
	background: transparent; border: 0; gap: var(--s4) var(--s5);
}
.hairline-stack { gap: var(--s5); }

/* Images: flat placeholder fill, no frames. */
.dv-media, .dv-media--empty { background: var(--placeholder); border: 0 !important; }
.dv-media__label { background: transparent; border: 0; padding: 0; font: 400 14px/1.3 var(--sans); color: var(--muted); }
.dv-media__label::before { content: '['; }
.dv-media__label::after { content: ']'; }
.dv-media__hint { font-family: var(--sans); border-style: solid; }

/* ------------------------------------------------------------------ Homepage */
.hero { padding-top: var(--s5); padding-bottom: 0; gap: var(--s5); align-items: end; }
.hero__copy { gap: var(--s3); }
.hero__title { font: 700 84px/0.98 var(--sans); letter-spacing: -3.5px; max-width: 13ch; }
.hero__lead { font-size: 22px; max-width: 44ch; }
.hero__media .dv-media { border: 0; }
.proof-panel {
	border: 0; background: transparent; padding: 0; height: auto; justify-content: flex-end; gap: var(--s2);
}
.proof-panel__quote { font: 300 30px/1.25 var(--sans); letter-spacing: -0.5px; color: var(--ink); max-width: 20ch; }
.proof-panel .dv-media__hint { position: static; }
.proof-panel--metric { gap: var(--s1); }
@media (max-width: 1024px) { .hero__title { font-size: 64px; letter-spacing: -2.5px; } }
@media (max-width: 640px) {
	.hero { padding-top: var(--s3); }
	.hero__title { font-size: 40px; letter-spacing: -1.4px; line-height: 1.02; }
	.hero__lead { font-size: 19px; }
	.proof-panel { height: auto; }
	.proof-panel__quote { font-size: 24px; }
}

/* Results: on the surface; the first result is the hero stat. */
.results-bar { background: transparent; }
.results-bar__list { padding-top: var(--section); padding-bottom: 0; gap: var(--s3); align-items: end; }
.results-bar__figure { font: 700 56px/0.95 var(--sans); letter-spacing: -2px; color: var(--ink); }
.results-bar__label { font-size: 15px; font-weight: 400; color: var(--body); margin-top: var(--s1); }
.results-bar__list > li:first-child .results-bar__figure { color: var(--accent); font-size: 120px; letter-spacing: -5px; }
@media (max-width: 1024px) { .results-bar__list > li:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
	.results-bar__list > li:first-child .results-bar__figure { font-size: 88px; letter-spacing: -3.5px; }
	.results-bar__figure { font-size: 44px; }
}

/* Selected work cards → open columns. */
.cards { gap: var(--s4); }
.card { background: transparent; border: 0; gap: var(--s2); }
.card:hover { border: 0; }
.card:hover .card__title { color: var(--accent); }
.card__media { border: 0; height: 200px; }
.card__body { padding: 0; gap: var(--s1); }
.card__title { font: 700 24px/1.15 var(--sans); letter-spacing: -0.5px; }
.card__text { font-size: 16px; font-weight: 400; }
.card__metric { font: 700 30px/1 var(--sans); letter-spacing: -0.8px; color: var(--ink); margin-top: var(--s1); }

/* Capabilities. */
.capability { background: transparent; padding: 0; gap: var(--s1); }
.capability__title { font: 700 26px/1.15 var(--sans); letter-spacing: -0.6px; }
.capability p { font-size: 17px; font-weight: 400; }
.services-index .capability:hover { background: transparent; }
.services-index .capability:hover .capability__link { color: var(--accent); text-decoration: none; }
.ruled-list--compact li:first-child { border-top: 0; }

/* Who you work with: no card. */
.who { padding-top: var(--section); padding-bottom: 0; }
.who__card { background: transparent; border: 0; padding: 0; gap: var(--s5); }
.who__title { font-size: 44px; margin-top: var(--s2); }
.who__body p { font-size: 20px; font-weight: 300; color: var(--ink); }
.who__body .who__note { font-size: 16px; font-weight: 400; color: var(--muted); }
@media (max-width: 640px) { .who__card { padding: 0; } .who__title { font-size: 30px; } .who__body p { font-size: 18px; } }

/* Consultation: same ground, separated by space. */
.consult { background: transparent; color: var(--body); }
.consult__inner { padding-top: var(--section); padding-bottom: var(--section); gap: var(--s5); align-items: start; }
.consult__title { font: 700 56px/1.02 var(--sans); letter-spacing: -2px; color: var(--ink); }
.consult__lead { font-size: 20px; font-weight: 300; color: var(--body); }
.consult__points { margin-top: var(--s2); display: grid; gap: var(--s2); }
.consult__points li, .consult__points li:last-child { border: 0; padding: 0 0 0 var(--s3); position: relative; font-size: 17px; font-weight: 400; color: var(--ink); }
.consult__points li::before { content: counter(list-item, decimal-leading-zero); position: absolute; left: 0; color: var(--numeral); font-weight: 300; }
.consult__card { background: transparent; padding: 0; gap: var(--s2); }
.consult__embed { border: 0; background: var(--placeholder); }
.consult__note { font-size: 14px; }
.consult__done-title { font: 700 36px/1.05 var(--sans); letter-spacing: -1px; color: var(--accent); }
@media (max-width: 640px) { .consult__title { font-size: 34px; letter-spacing: -1px; } .consult__card { padding: 0; } }

/* Form controls keep a visible boundary (WCAG 1.4.11): an underline, not a box. */
.field label { font-size: 14px; letter-spacing: 3px; color: var(--muted); }
.field__optional { letter-spacing: 0; }
.field input, .field textarea {
	background: transparent; border: 0; border-bottom: 1.5px solid var(--numeral);
	padding: 12px 0; font-size: 18px; font-weight: 400;
}
.field input:hover { border-color: var(--ink); }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--ink); border-bottom-width: 3px; }
.field__error { color: var(--ink); font-weight: 700; font-size: 15px; }

/* ------------------------------------------------------------------ Inner pages */
.page-intro { padding-top: var(--s5); padding-bottom: var(--s4); gap: var(--s3); }
.page-intro--ruled { border-bottom: 0; padding-bottom: var(--s4); margin-bottom: 0; }
.page-intro__lead { font-size: 22px; }

.filters { border-bottom: 0; gap: var(--s3); padding-bottom: 0; margin-bottom: var(--s4); }
.chip {
	background: transparent; border: 0; padding: 10px 0;
	font-size: 17px; font-weight: 400; letter-spacing: 0; color: var(--muted);
}
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--accent); font-weight: 700; }
.chip[aria-pressed="true"]::before { display: none; }

.work { padding-bottom: 0; }
.work-row { background: transparent; }
.work-row__link { padding: 0; gap: var(--s4); }
.work-row__link:hover { background: transparent; }
.work-row__link:hover .work-row__title { color: var(--accent); text-decoration: none; }
.work-row__media { border: 0; }
.work-row__title { font: 700 32px/1.08 var(--sans); letter-spacing: -1px; }
.work-row__blurb { font-size: 17px; font-weight: 400; }
.work-row__metric { border-left: 0; padding-left: 0; }
@media (max-width: 640px) {
	.work-row__link { padding: 0; }
	.work-row__metric { border-top: 0; padding-top: 0; }
	.work-row__title { font-size: 26px; }
}

/* Closing band → a statement on the surface. */
.ink-cta { background: transparent; }
.ink-cta__inner { padding-top: var(--section); padding-bottom: 0; }
.ink-cta__title { font: 700 48px/1.1 var(--sans); letter-spacing: -1.5px; color: var(--ink); }
@media (max-width: 640px) { .ink-cta__title { font-size: 30px; letter-spacing: -0.8px; } }

/* Case study */
.case__header { padding-top: var(--s5); padding-bottom: 0; gap: var(--s3); border-bottom: 0; }
.case__title { font-size: 72px; letter-spacing: -3px; max-width: 20ch; }
.case__lead { font-size: 22px; }
.meta-row { gap: var(--s2) var(--s5); }
.meta-row dt { letter-spacing: 3px; }
.meta-row dd { font-size: 18px; font-weight: 700; }
@media (max-width: 640px) { .case__title { font-size: 38px; letter-spacing: -1.3px; } }

.before-after { margin-top: var(--section); }
.before-after__cell { background: transparent; padding: 0; gap: var(--s2); }
.ruled-list { display: grid; gap: var(--s2); }
.ruled-list li, .ruled-list li:first-child { border: 0; padding: 0; font-size: 17px; font-weight: 400; color: var(--body); }
.ruled-list--compact { gap: var(--s1); margin-top: var(--s1); }
.ruled-list--compact li { font-size: 16px; }
@media (max-width: 640px) { .before-after__cell { padding: 0; } }

.shots { padding-top: var(--section); gap: var(--s4); }
.shots .dv-media { border: 0; }
.shots figcaption { font-size: 14px; letter-spacing: 3px; }
.section-pad-sm { padding-top: var(--section); padding-bottom: 0; }

.results-band { background: transparent; }
.results-band__list { padding-top: var(--section); padding-bottom: 0; gap: var(--s3); align-items: end; }
.results-band__figure { font: 700 56px/0.95 var(--sans); letter-spacing: -2px; color: var(--ink); }
.results-band__label { font-size: 15px; font-weight: 400; color: var(--body); margin-top: var(--s1); }
.results-band__list > li:first-child .results-band__figure { color: var(--accent); font-size: 120px; letter-spacing: -5px; }
@media (max-width: 1024px) { .results-band__list > li:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
	.results-band__list, .results-band__list--3, .results-band__list--2 { padding-top: var(--section); padding-bottom: 0; }
	.results-band__list > li:first-child .results-band__figure { font-size: 88px; letter-spacing: -3.5px; }
	.results-band__figure { font-size: 44px; }
}

.pull-quote { text-align: left; justify-items: start; border-bottom: 0; padding-top: var(--section); padding-bottom: 0;
	max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.pull-quote blockquote p { font: 300 40px/1.2 var(--sans); font-style: normal; letter-spacing: -1px; margin: 0; max-width: 30ch; }

.next-case { padding-top: var(--section); padding-bottom: var(--section); }
.next-case__link { font: 700 40px/1.05 var(--sans); letter-spacing: -1.2px; }
.next-case__link:hover { color: var(--accent); text-decoration: none; }

/* Service page */
.service-hero { border-bottom: 0; padding-top: var(--s5); padding-bottom: 0; gap: var(--s5); }
.service-hero__copy { gap: var(--s3); }
.service-hero__title { font-size: 64px; letter-spacing: -2.5px; }
.service-hero__lead { font-size: 22px; }
.deliverables { background: transparent; padding: 0; color: var(--body); }
.deliverables ul { counter-reset: dl; display: grid; gap: var(--s2); margin-top: var(--s2); }
.deliverables li, .deliverables li:last-child {
	counter-increment: dl; border: 0; padding: 0 0 0 var(--s4); position: relative;
	font-size: 18px; font-weight: 400; color: var(--ink);
}
.deliverables li::before { content: counter(dl, decimal-leading-zero); position: absolute; left: 0; color: var(--numeral); font-weight: 300; }
@media (max-width: 640px) { .service-hero__title { font-size: 38px; letter-spacing: -1.3px; } .deliverables { padding: 0; } }

.phases { gap: var(--s4) var(--s5); }
.phase { border-top: 0; padding-top: 0; gap: var(--s1); }
.phase .label { letter-spacing: 3px; }
.phase__title { font: 700 22px/1.2 var(--sans); letter-spacing: -0.4px; }
.phase p { font-size: 17px; font-weight: 400; }

.proof { border-bottom: 0; padding-top: var(--section); padding-bottom: 0; gap: var(--s5); }
.proof__title { font-size: 44px; letter-spacing: -1.5px; }
.proof__body { font-size: 18px; font-weight: 400; }
.proof__media { border: 0; }
.proof-panel--metric .metric--xl { font-size: 120px; letter-spacing: -5px; color: var(--ink); }
.proof-panel--metric .metric__label { font-size: 16px; }
@media (max-width: 640px) { .proof__title { font-size: 30px; } .proof-panel--metric .metric--xl { font-size: 88px; } }

.faq { padding-top: var(--section); padding-bottom: 0; }
.faq__note { font-size: 15px; font-weight: 400; }
.faq__list { display: grid; gap: var(--s1); }
.faq__item { border-bottom: 0; }
.faq__q { padding: 14px 0; font: 700 21px/1.25 var(--sans); letter-spacing: -0.3px; color: var(--ink); }
.faq__item[open] .faq__q { color: var(--accent); }
.faq__q:hover { color: var(--accent); }
.faq__icon::before, .faq__icon::after { background: currentColor; }
.faq__a { padding-bottom: var(--s2); }
.faq__a p { font-size: 18px; font-weight: 300; color: var(--ink); }
@media (max-width: 640px) { .faq__q { font-size: 18px; } }

.deep-cta {
	background: transparent; text-align: left; justify-items: start; gap: var(--s3);
	max-width: var(--max); margin: 0 auto; padding: var(--section) var(--gutter) 0;
}
.deep-cta__title { font: 700 56px/1.05 var(--sans); letter-spacing: -2px; color: var(--ink); max-width: 20ch; }
.deep-cta__lead { font-size: 20px; font-weight: 300; color: var(--body); }
@media (max-width: 640px) { .deep-cta { padding-top: var(--section); padding-bottom: 0; } .deep-cta__title { font-size: 32px; letter-spacing: -1px; } }

/* Posts, prose, contact */
.posts { padding-bottom: 0; }
.post-row { background: transparent; }
.post-row__link { padding: 0; gap: var(--s1); }
.post-row__link:hover { background: transparent; }
.post-row__link:hover .post-row__title { color: var(--accent); }
.post-row__title { font: 700 32px/1.1 var(--sans); letter-spacing: -1px; }
.page-title--article { font-size: 56px; letter-spacing: -2px; }
.post-article__media { border: 0; }

.prose { padding-top: var(--s2); padding-bottom: 0; }
.prose p, .prose li { font-size: 19px; font-weight: 300; color: var(--ink); line-height: 1.6; }
.prose h2 { font: 700 34px/1.1 var(--sans); letter-spacing: -1px; margin-top: 1.8em; }
.prose h3 { font: 700 22px/1.2 var(--sans); letter-spacing: -0.4px; }
.prose li::marker { color: var(--numeral); }
.prose strong { font-weight: 700; }
.prose blockquote { border-left: 0; padding-left: 0; font: 300 28px/1.3 var(--sans); font-style: normal; }
.prose th, .prose td { border: 0; padding: 10px 24px 10px 0; }
.prose th { font-weight: 700; color: var(--ink); }

.contact-alt { padding-top: var(--s4); padding-bottom: 0; }
.contact-alt__email { font: 700 30px/1.2 var(--sans); letter-spacing: -0.6px; }

/* Lead result gets room to be the hero stat. */
@media (min-width: 1025px) {
	.results-bar__list, .results-band__list { grid-template-columns: 1.7fr repeat(3, 1fr); }
	.results-band__list--3 { grid-template-columns: 1.7fr repeat(2, 1fr); }
	.results-band__list--2 { grid-template-columns: 1.7fr 1fr; }
}
/* Only the headline phrase is accent in the case header. */
.meta-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.meta-row a:hover { color: var(--accent); }

/* ======================================================================
   Ground and breathing room above the footer
   ====================================================================== */
body[class] { background: var(--surface); }
.ink-cta__inner { padding-bottom: var(--section); }
.deep-cta { padding-bottom: var(--section); }
.contact-alt { padding-bottom: var(--section); }

/* ======================================================================
   Second accent (Customize → DigitasVin → Visual style → Second accent).
   --a2        decorative fills (markers, squares)
   --a2-text   the same hue dark enough for text on surface/tint (≥ 4.5:1)
   --a2-tint   pale panel ground
   --a2-dark   the hue light enough for text on the teal band (≥ 4.5:1)
   ====================================================================== */
.a2-lavender { --a2: #9B82C9; --a2-text: #6A4C9C; --a2-tint: #EEE9F7; --a2-dark: #D6C8F0; }
.a2-saffron { --a2: #E3A33B; --a2-text: #8A5600; --a2-tint: #FBF1DE; --a2-dark: #F2C46B; }
.a2-coral   { --a2: #E0633F; --a2-text: #A8401F; --a2-tint: #FBEAE3; --a2-dark: #F8BBA5; }
.a2-wine    { --a2: #8C2F4B; --a2-text: #8C2F4B; --a2-tint: #F5EAEE; --a2-dark: #F2B9C9; }
.has-a2 { --band: #0F5C52; --band-text: #D9E8E4; }

/* Small square markers on eyebrows (the logo's pin, in the second colour). */
.has-a2 .eyebrow::before {
	content: ''; display: inline-block; width: 0.62em; height: 0.62em;
	margin-right: 0.85em; background: var(--a2); vertical-align: 0.02em;
}

/* Numerals and phase labels pick up the second colour. */
.has-a2 .numbered__num,
.has-a2 .deliverables li::before,
.has-a2 .phase .label { color: var(--a2-text); }

/* Tinted panels: results, who-you-work-with, case results. */
.has-a2 .results-bar, .has-a2 .results-band { background: var(--a2-tint); margin-top: var(--section); }
.has-a2 .results-bar__list, .has-a2 .results-band__list { padding-top: var(--s5); padding-bottom: var(--s5); }
.has-a2 .who__card { background: var(--a2-tint); padding: var(--s5); }
@media (max-width: 640px) { .has-a2 .who__card { padding: var(--s3) var(--s2); } }

/* Deep teal bands: consultation, closing CTAs. */
.has-a2 .consult, .has-a2 .ink-cta { background: var(--band); color: var(--band-text); margin-top: var(--section); }
.has-a2 .ink-cta__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
.has-a2 .deep-cta {
	background: var(--band); max-width: none; margin-top: var(--section);
	padding: var(--s5) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.has-a2 .consult__inner { padding-top: var(--s5); padding-bottom: var(--s5); }
.has-a2 .consult__title, .has-a2 .ink-cta__title, .has-a2 .deep-cta__title { color: #FFFFFF; }
.has-a2 .consult .hl, .has-a2 .ink-cta .hl, .has-a2 .deep-cta .hl { color: var(--a2-dark); }
.has-a2 .consult__lead, .has-a2 .deep-cta__lead { color: var(--band-text); }
.has-a2 .consult .eyebrow { color: var(--band-text); }
.has-a2 .consult__points li { color: #FFFFFF; }
.has-a2 .consult__points li::before { color: var(--a2-dark); }
.has-a2 .consult__card { background: var(--surface); padding: var(--s4); color: var(--body); }
.has-a2 .consult .btn--primary, .has-a2 .consult .btn--on-dark { background: var(--ink); color: var(--surface); }
.has-a2 .ink-cta .btn--on-dark, .has-a2 .deep-cta .btn--on-dark { background: #FFFFFF; color: var(--ink); }
.has-a2 .ink-cta .btn--on-dark:hover, .has-a2 .deep-cta .btn--on-dark:hover { background: var(--a2-dark); color: var(--ink); }
.has-a2 .consult__copy :focus-visible, .has-a2 .ink-cta :focus-visible, .has-a2 .deep-cta :focus-visible { outline-color: #FFFFFF; }
@media (max-width: 640px) { .has-a2 .consult__card { padding: var(--s3) var(--s2); } }

/* Footer sits on the surface after a band: give it room. */
.has-a2 .site-footer__grid { padding-top: var(--section); }