/*
 * turboseo.ai
 *
 * Broadside. Oversized lowercase Anton running near the full content width,
 * quiet Archivo beneath, separated by hairlines rather than boxes. White,
 * dense, precisely aligned, everything labelled. A specification sheet with a
 * very loud voice, not a pitch deck.
 *
 * Nothing here animates. Hover changes colour and underline, and that is all.
 */

/* Reset ------------------------------------------------------------------ */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-70);
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: var(--leading-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Layout ----------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.measure { max-width: var(--measure-max); }

.section { padding-block: clamp(3rem, 8vw, var(--s7)); }
.section--alt { background: var(--paper-alt); }
.section--tight { padding-block: clamp(2rem, 5vw, var(--s5)); }

/* Sections are separated by whitespace and a hairline, never by a box. */
.section + .section { border-top: var(--hairline); }
.section--alt + .section--alt { border-top-color: #E6E2DE; }

/* Type ------------------------------------------------------------------- */

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: lowercase;
	letter-spacing: var(--tracking-display);
	line-height: var(--leading-display);
	color: var(--ink);
	margin: 0;
	overflow-wrap: break-word;
}

h1 { font-size: var(--size-d1); }
h2 { font-size: var(--size-d2); }
h3 { font-size: var(--size-d3); }  /* floor 24px: Anton closes up below that */

/*
 * The signature.
 *
 * Every Anton heading terminates in a full stop and that full stop is
 * vermilion. Applied as a rule rather than typed into content, so a heading
 * added later cannot forget it. The mark ends in .ai; the site adopts the
 * stop as its structural device.
 */
h1::after,
h2::after,
h3::after {
	content: ".";
	color: var(--vermilion);
}

/* Headings that are not statements do not take the stop. */
h1.no-stop::after,
h2.no-stop::after,
h3.no-stop::after { content: none; }

h4 {
	font-family: var(--font-body);
	font-size: var(--size-body);
	font-weight: 600;
	color: var(--ink);
	margin: 0;
	line-height: 1.35;
}

p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }

.lede {
	font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
	color: var(--ink-70);
	line-height: 1.5;
}

.label {
	font-family: var(--font-body);
	font-size: var(--size-meta);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--ink-45);
	margin: 0 0 var(--s2);
}

.meta { font-size: var(--size-small); color: var(--ink-45); }

.tnum { font-variant-numeric: tabular-nums; }

/* Links.
 * Vermilion measures 4.02:1 on white and fails AA for running text, so prose
 * links use vermilion-press at 5.49:1 plus an underline. --vermilion is
 * reserved for the signature stop, the CTA and large type. */
a {
	color: var(--vermilion-press);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

a:hover { color: var(--ink); text-decoration-thickness: 2px; }

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

/* Skip link --------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ink);
	color: var(--paper);
	padding: var(--s2) var(--s3);
	text-decoration: none;
}

.skip-link:focus {
	left: var(--gutter);
	top: var(--s2);
	color: var(--paper);
}

/* Masthead ---------------------------------------------------------------- */

.masthead {
	border-bottom: var(--hairline);
	padding-block: var(--s3);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	flex-wrap: wrap;
}

.masthead__logo { display: block; line-height: 0; }
.masthead__logo svg { width: 200px; height: auto; }
.masthead__logo:hover .logo-ink { fill: var(--vermilion-press); }

.nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.5vw, var(--s4));
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav a {
	font-size: var(--size-small);
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	padding-block: var(--s1);
	border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav .current-menu-item > a {
	color: var(--ink);
	border-bottom-color: var(--vermilion);
}

/* Hero -------------------------------------------------------------------- */

/*
 * Asymmetric on purpose. Generous above so the mark keeps its air, tighter
 * below because a symmetric 144px left the CTA and the entity strip separated by
 * dead space that read as a gap rather than as breathing.
 */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 4vw, 3.5rem); }

.hero h1 {
	font-size: var(--size-hero);
	/*
	 * No character cap. Line breaks are controlled by the two .hero__line spans,
	 * so the only constraint needed is the 1200px content width. A 34ch cap was
	 * applied while the breaks were automatic, and once the spans became blocks
	 * that cap wrapped each of them, turning two lines into four.
	 *
	 * text-wrap: balance is also gone. It was useful while wrapping was
	 * automatic, but with explicit spans it re-balanced across them and split a
	 * line that already fitted, which is how two lines became three.
	 */

	/*
	 * Looser leading than the global display value, and a deliberate departure
	 * from the brief's 0.95 to 1.02 band.
	 *
	 * That band is right for a heading of one line, or for short lines. This one
	 * is two full-width lines of Anton at 60px, and at 0.98 the descenders on line
	 * one ("managed", "google") came within a hair of the ascenders on line two,
	 * so the block read as mashed together rather than tight. Anton has tall
	 * ascenders and deep descenders; multi-line settings need the air.
	 *
	 * h2 and h3 keep 0.98, because they are almost always one line.
	 */
	line-height: 1.08;
}

/*
 * The brief's permitted inversion is not used. See parts/hero.php for why. The
 * vermilion full stop from the global heading rule carries the signature alone,
 * so there is nothing to override here.
 *
 * Sense-unit line breaks at tablet and up; natural wrapping below, where a
 * forced break would strand a short line.
 */
/*
 * 60rem, not 48rem. At 768px the container is 691px while the service-list line
 * needs 702px, so forcing the break there reintroduced the wrap it exists to
 * prevent. Above 60rem it fits with room to spare; below it, natural wrapping is
 * correct anyway.
 */
@media (min-width: 60rem) {
	.hero__line { display: block; }
}

/*
 * The signature stop has to hang off the LAST LINE, not off the heading.
 *
 * The global rule puts it on h1::after. Once .hero__line became display: block
 * that pseudo-element was pushed below both spans and rendered as a lone
 * vermilion square floating on a third line, which looked like a bug because it
 * was one. Moving it onto the last span puts it back where a full stop belongs.
 */
.hero h1::after { content: none; }

.hero h1 .hero__line:last-child::after {
	content: ".";
	color: var(--vermilion);
}

.hero__support {
	margin-top: var(--s4);
	max-width: var(--measure-max);
}

/* Buttons ----------------------------------------------------------------- */

/*
 * The button rests on --vermilion-press, not --vermilion.
 *
 * I measured every token against --paper and recorded the matrix, then missed
 * the inverse: white ON vermilion is the same 4.02:1, and at 17px semibold the
 * button does not qualify as large text, so it failed AA. Lighthouse caught what
 * my own measurement pass should have.
 *
 * --vermilion-press gives 5.49:1 and passes. The side effect is welcome: the
 * signature full stop is now the only place --vermilion appears at all, which is
 * tighter discipline than before.
 */
.btn {
	display: inline-block;
	background: var(--vermilion-press);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--size-body);
	font-weight: 600;
	line-height: 1;
	padding: 0.9375rem var(--s3);
	border: 0;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
}

.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { background: var(--ink); }

/* Rows, not cards --------------------------------------------------------- */

.rows { border-top: var(--hairline); }

.row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s2) var(--s5);
	padding-block: var(--s4);
	border-bottom: var(--hairline);
	align-items: start;
}

.row__name { margin: 0; }
.row__body > * + * { margin-top: var(--s2); }
.row__receive { font-size: var(--size-small); color: var(--ink-45); }
.row__receive strong { color: var(--ink); font-weight: 600; }

/* Service detail: scope beside out of scope. The out-of-scope column is the
 * credibility move and keeps equal visual weight, never a footnote. */
.service { padding-block: var(--s5); border-bottom: var(--hairline); }
.service:first-of-type { border-top: var(--hairline); }

.service__head { margin-bottom: var(--s4); }
.service__summary { margin-top: var(--s2); max-width: var(--measure-max); }

.service__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s5);
}

.service__col > .label { margin-bottom: var(--s2); }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding-block: 0.625rem; border-top: var(--hairline); }
.list li:first-child { border-top: 0; padding-top: 0; }

/* Numbered sequence ------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: var(--hairline); }

.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	gap: var(--s3);
	padding-block: var(--s4);
	border-bottom: var(--hairline);
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-display);
	font-size: var(--size-d3);
	line-height: 1;
	color: var(--vermilion);
	font-variant-numeric: tabular-nums;
}

.steps h2 { margin-bottom: var(--s1); font-size: var(--size-d3); }
.steps p { max-width: var(--measure-max); }

/* Entity strip ------------------------------------------------------------ */

.entity-strip {
	border-block: var(--hairline);
	padding-block: var(--s2);
}

.entity-strip__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1) var(--s3);
	font-size: var(--size-small);
	color: var(--ink-45);
}

.entity-strip__list li + li {
	padding-left: var(--s3);
	border-left: var(--hairline);
}

.entity-strip__list a { color: var(--ink-70); text-decoration: none; }
.entity-strip__list a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 40rem) {
	.entity-strip__list li + li { padding-left: 0; border-left: 0; }
}

/* Commitments ------------------------------------------------------------- */

.commitments {
	margin-top: var(--s4);
	border-top: var(--hairline);
}

.commitments__item {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--s2) var(--s5);
	padding-block: var(--s3);
	border-bottom: var(--hairline);
	align-items: start;
}

.commitments__label { margin: 0; }
.commitments__note { margin: 0; }

@media (max-width: 60rem) {
	.commitments__item { grid-template-columns: 1fr; gap: var(--s1); }
}

/* FAQ --------------------------------------------------------------------- */

.faq {
	margin-top: var(--s4);
	border-top: var(--hairline);
}

.faq__item {
	padding-block: var(--s3);
	border-bottom: var(--hairline);
}

.faq__q {
	font-family: var(--font-body);
	font-size: var(--size-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	color: var(--ink);
	margin: 0 0 var(--s1);
}

.faq__a { margin: 0; max-width: var(--measure-max); }

/* Compact sequence -------------------------------------------------------- */

.sequence {
	list-style: none;
	margin: var(--s4) 0 0;
	padding: 0;
	counter-reset: seq;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	border-top: var(--hairline);
}

.sequence li {
	counter-increment: seq;
	padding-block: var(--s3);
	border-bottom: var(--hairline);
	font-family: var(--font-display);
	font-size: var(--size-d3);
	line-height: 1.05;
	color: var(--ink);
	padding-right: var(--s3);
}

.sequence li::before {
	content: counter(seq, decimal-leading-zero);
	display: block;
	font-family: var(--font-body);
	font-size: var(--size-meta);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	color: var(--vermilion);
	margin-bottom: var(--s1);
	font-variant-numeric: tabular-nums;
}

/* Excluded line on a service row ------------------------------------------ */

.row__excluded { font-size: var(--size-small); color: var(--ink-45); }
.row__excluded strong { color: var(--ink); font-weight: 600; }

/* Terms ------------------------------------------------------------------- */

.terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--s4);
	border-top: var(--hairline);
	padding-top: var(--s4);
}

.terms__item > .label { margin-bottom: var(--s1); }
.terms__value { font-family: var(--font-display); font-size: var(--size-d3); color: var(--ink); line-height: 1; }
.terms__note { margin-top: var(--s2); font-size: var(--size-small); color: var(--ink-45); }

/* Contact ----------------------------------------------------------------- */

.contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--s4) var(--s5);
	border-top: var(--hairline);
	padding-top: var(--s4);
}

.contact__value {
	font-family: var(--font-display);
	font-size: var(--size-d3);
	color: var(--ink);
	line-height: 1.1;
	text-transform: none;
	word-break: break-word;
}

.contact__value a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--vermilion); }
.contact__value a:hover { color: var(--vermilion-press); }

/* Footer ------------------------------------------------------------------ */

.site-footer {
	border-top: var(--hairline);
	padding-block: var(--s5) var(--s4);
	margin-top: 0;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--s4) var(--s5);
}

.site-footer__logo svg { width: 160px; }
.site-footer a { color: var(--ink-70); }
.site-footer a:hover { color: var(--ink); }

.site-footer .nav ul { flex-direction: column; gap: var(--s1); }

.colophon {
	margin-top: var(--s5);
	padding-top: var(--s3);
	border-top: var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	justify-content: space-between;
	font-size: var(--size-meta);
	color: var(--ink-45);
}

/* Prose ------------------------------------------------------------------- */

.prose { max-width: var(--measure-max); }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: var(--s1); }

.notice {
	border-left: 3px solid var(--vermilion);
	padding: var(--s2) var(--s3);
	background: var(--paper-alt);
	font-size: var(--size-small);
}

/* 404 --------------------------------------------------------------------- */

.error404__code {
	font-family: var(--font-display);
	font-size: var(--size-hero);
	line-height: 1;
	color: var(--vermilion);
	font-variant-numeric: tabular-nums;
}

/* Gravity Forms, restyled to the system ------------------------------------ */

/*
 * Selectors are the ones Gravity Forms 2.9 ACTUALLY emits, taken from the
 * rendered markup rather than assumed. An earlier version targeted
 * .gform_wrapper.gravity-theme, and neither of those classes exists here:
 * disabling the plugin's own framework CSS also removes the wrapper and theme
 * classes those selectors depended on, so the entire restyle was inert and the
 * form rendered with browser-default inputs.
 */

.gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gfield_label,
.gform-field-label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--size-meta);
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--ink-45);
	margin: 0 0 var(--s1);
}

/* GF renders "(Required)" hard against the label text. */
.gfield_required_text {
	margin-left: 0.5ch;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--vermilion-press);
}

.ginput_container input[type="text"],
.ginput_container input[type="email"],
.ginput_container input[type="tel"],
.ginput_container textarea {
	width: 100%;
	max-width: var(--measure-max);
	font-family: var(--font-body);
	font-size: var(--size-body);
	line-height: 1.4;
	color: var(--ink);
	background: var(--paper);
	border: var(--hairline);
	border-radius: var(--radius);
	padding: 0.75rem var(--s2);
}

.ginput_container input:focus,
.ginput_container textarea:focus {
	outline: 2px solid var(--vermilion);
	outline-offset: 2px;
	border-color: var(--ink-45);
}

.ginput_container textarea { min-height: 10rem; resize: vertical; }

.gfield_description {
	margin-top: var(--s1);
	font-size: var(--size-small);
	color: var(--ink-45);
}

.gform_footer { margin-top: var(--s4); padding: 0; }

/*
 * The honeypot must be reachable by nothing and visible to no one. Positioned
 * off-screen rather than display:none, because a hidden input some bots skip is
 * a honeypot that catches nothing.
 */
.gform_validation_container {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.gfield_validation_message,
.validation_message {
	background: none;
	border: 0;
	border-left: 3px solid var(--vermilion);
	padding: var(--s1) var(--s2);
	margin-top: var(--s1);
	color: var(--ink);
	font-size: var(--size-small);
}

.gform_validation_errors {
	background: var(--paper-alt);
	border: 0;
	border-left: 3px solid var(--vermilion);
	border-radius: 0;
	box-shadow: none;
	padding: var(--s2) var(--s3);
	margin-bottom: var(--s4);
}

.gform_validation_errors h2 {
	font-family: var(--font-body);
	font-size: var(--size-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
	margin: 0;
}

.gform_validation_errors h2::after { content: none; }

.gform_required_legend {
	font-size: var(--size-small);
	color: var(--ink-45);
	margin: 0 0 var(--s3);
}

.gform_confirmation_message {
	font-family: var(--font-display);
	font-size: var(--size-d3);
	text-transform: lowercase;
	letter-spacing: var(--tracking-display);
	color: var(--ink);
}

.gform_confirmation_message::after { content: "."; color: var(--vermilion); }

/* The honeypot must stay reachable by nothing and visible to no one. */
.gform_wrapper .gform_validation_container { position: absolute !important; left: -9999px; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 60rem) {
	.row { grid-template-columns: 1fr; gap: var(--s2); }
	.service__cols { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 40rem) {
	.masthead__inner { gap: var(--s2); }
	.masthead__logo svg { width: 150px; }  /* stays above the 120px floor */
	.nav ul { gap: var(--s2) var(--s3); }
	.steps li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s2); }
	.hero h1 { max-width: none; }
	.colophon { flex-direction: column; gap: var(--s1); }
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print ------------------------------------------------------------------- */

@media print {
	.masthead .nav, .skip-link, .btn { display: none; }
	body { color: #000; }
	h1::after, h2::after, h3::after { color: #000; }
}