/*
 * Agency Starter — front-end styles.
 *
 * Color, type, and spacing tokens come from theme.json, which WordPress
 * exposes as --wp--preset--* custom properties. Local aliases below keep the
 * rest of the file readable.
 */

:root {
	--c-base:    var(--wp--preset--color--base, #FDF6EE);
	--c-surface: var(--wp--preset--color--surface, #F5E9DC);
	--c-sand:    var(--wp--preset--color--sand, #FBE3C6);
	--c-ink:     var(--wp--preset--color--ink, #201A14);
	--c-body:    #453B31;
	--c-muted:   var(--wp--preset--color--muted, #7A6E60);
	--c-line:    var(--wp--preset--color--line, #E6DCCD);
	--c-primary: var(--wp--preset--color--primary, #E85D14);
	--c-accent:  var(--wp--preset--color--accent, #F79A3C);
	--c-leaf:    var(--wp--preset--color--leaf, #4C7A34);
	/* The leaf green is right for a small accent and too loud for a full
	   section against cream. This is the same hue, darker and slightly
	   desaturated, so the block reads as depth rather than as a clash.
	   It also lifts body text from 4.7:1 to 9.2:1. */
	--c-leaf-deep: #2E4A26;
	--c-white:   #FFFFFF;

	--f-display: var(--wp--preset--font-family--display, Outfit, system-ui, sans-serif);
	--f-sans:    var(--wp--preset--font-family--sans, Manrope, system-ui, sans-serif);

	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.75rem;
	--s-4: 3rem;
	--s-5: 5rem;

	--section-y: clamp(4rem, 8vw, 7rem);

	--wrap:        1180px;
	--wrap-narrow: 720px;
	--gutter:      clamp(1.15rem, 4vw, 2.5rem);

	--radius: 6px;
	--radius-lg: 14px;
	--shadow: 0 1px 2px rgb(32 26 20 / 5%), 0 12px 32px rgb(32 26 20 / 7%);

	--transition: 170ms ease;
}

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

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

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-body);
	font-family: var(--f-sans);
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
	margin: 0 0 var(--s-2);
	font-family: var(--f-display);
	/* A geometric sans has no serif detail to carry a headline, so weight
	   does that job. At 400 Outfit reads as body copy set large. */
	font-weight: 600;
	line-height: 1.06;
	/* Geometric letterforms sit on wide sidebearings, which looks loose at
	   display sizes. */
	letter-spacing: -0.03em;
	color: var(--c-ink);
	text-wrap: balance;
}

h3, h4 { font-family: var(--f-sans); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

h1 { font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.1rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.4rem); }

p, ul, ol {
	margin: 0 0 var(--s-2);
}

p { text-wrap: pretty; }

a {
	color: var(--c-primary);
	text-underline-offset: 0.18em;
	transition: color var(--transition);
}

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

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

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

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

.wrap--narrow { max-width: var(--wrap-narrow); }

.site-main { min-height: 50vh; }

.page-head {
	padding-block: clamp(var(--s-4), 8vw, var(--s-5)) var(--s-3);
}

.page-title { margin-bottom: var(--s-1); }

.page-intro {
	color: var(--c-muted);
	font-size: 1.125rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--s-1) var(--s-2);
	background: var(--c-ink);
	color: var(--c-base);
}

.skip-link:focus {
	left: var(--s-2);
	top: var(--s-2);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------- Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--c-base) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.site-header.is-stuck {
	border-bottom-color: var(--c-line);
	box-shadow: 0 1px 3px rgb(22 25 29 / 4%);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	min-height: 72px;
}

.site-title {
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--c-ink);
}

.custom-logo { max-height: 44px; width: auto; }

.site-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(var(--s-2), 2.5vw, var(--s-3));
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	color: var(--c-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--c-primary);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.nav-toggle { display: none; }

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		position: relative;
	}

	.nav-toggle__bar,
	.nav-toggle__bar::before,
	.nav-toggle__bar::after {
		position: absolute;
		left: 11px;
		width: 22px;
		height: 2px;
		background: var(--c-ink);
		transition: transform var(--transition), opacity var(--transition);
	}

	.nav-toggle__bar { top: 21px; }
	.nav-toggle__bar::before { content: ""; top: -7px; left: 0; }
	.nav-toggle__bar::after  { content: ""; top: 7px;  left: 0; }

	.nav-open .nav-toggle__bar { background: transparent; }
	.nav-open .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
	.nav-open .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

	.site-nav {
		position: fixed;
		inset: 72px 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--s-2) var(--gutter) var(--s-3);
		background: var(--c-base);
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow);
		transform: translateY(-120%);
		visibility: hidden;
		transition: transform 220ms ease, visibility 220ms;
	}

	.nav-open .site-nav {
		transform: translateY(0);
		visibility: visible;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list li { border-bottom: 1px solid var(--c-line); }
	.site-nav__list a { display: block; padding: var(--s-2) 0; }

	.site-nav__cta { margin-top: var(--s-2); text-align: center; }
}

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

.button,
.wp-block-button__link {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.button--primary,
.wp-block-button__link {
	background: var(--c-primary);
	color: var(--c-base);
}

.button--primary:hover,
.wp-block-button__link:hover {
	background: color-mix(in srgb, var(--c-primary) 85%, black);
	color: var(--c-base);
}

.button--ghost {
	background: transparent;
	border-color: var(--c-line);
	color: var(--c-ink);
}

.button--ghost:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}

/* ---------------------------------------------------------------- Forms */

.form {
	display: grid;
	gap: var(--s-2);
	max-width: 34rem;
}

.form-row {
	display: grid;
	gap: 0.35rem;
}

.form-row label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-ink);
}

.form-required { color: var(--c-accent); }

.form input,
.form textarea,
.form select,
.search-form__input {
	width: 100%;
	padding: 0.65em 0.8em;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	background: var(--c-base);
	color: var(--c-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 15%, transparent);
	outline: none;
}

.form textarea { resize: vertical; min-height: 8rem; }

.form button { justify-self: start; }

/* Honeypot: hidden from people, present for bots. */
.form-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: var(--s-2);
	border-radius: var(--radius);
	border-left: 3px solid;
}

.form-notice p { margin: 0; }

.form-notice--ok {
	background: color-mix(in srgb, var(--c-primary) 8%, var(--c-base));
	border-color: var(--c-primary);
}

.form-notice--error {
	background: color-mix(in srgb, var(--c-accent) 10%, var(--c-base));
	border-color: var(--c-accent);
}

.search-form {
	display: flex;
	gap: var(--s-1);
	max-width: 28rem;
}

/* ---------------------------------------------------------------- Cards */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--s-3);
	padding-bottom: var(--s-4);
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow var(--transition), transform var(--transition);
}

.card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.card__body { padding: 0 var(--s-2) var(--s-2); }
.card__media + .card__body { padding-top: 0; }
.card:not(:has(.card__media)) .card__body { padding-top: var(--s-2); }

.card__meta {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

.card__title {
	margin: 0 0 var(--s-1);
	font-size: 1.1875rem;
}

.card__title a { text-decoration: none; color: var(--c-ink); }
.card__title a:hover { color: var(--c-primary); }

.card__excerpt {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------- Content
 *
 * Everything the client writes lands here. It has to look right whether they
 * paste a twelve-section privacy policy or type three sentences, without them
 * choosing a single style.
 */

.entry-content {
	padding-bottom: var(--s-5);
}

/* Vertical rhythm. Spacing is a property of what precedes what, so the client
   never has to add spacers. */
.entry-content > * + *  { margin-top: var(--s-2); }
.entry-content > * + h2 { margin-top: var(--s-4); }
.entry-content > * + h3 { margin-top: var(--s-3); }
.entry-content > * + h4 { margin-top: var(--s-3); }
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + * { margin-top: var(--s-1); }

.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-table { margin-block: var(--s-3); }

.entry-content h2 { font-size: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); }
.entry-content h3 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); }
.entry-content h4 { font-size: 1.0625rem; font-weight: 650; }

/* Long documents read better a touch narrower than the layout width. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 68ch; }

.entry-content img { border-radius: var(--radius); }

.entry-content figcaption {
	margin-top: 0.5rem;
	color: var(--c-muted);
	font-size: 0.875rem;
}

/* Lists. Nested levels get their own markers so deep policy clauses stay legible. */
.entry-content ul,
.entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: 0.4rem; }
.entry-content li > ul,
.entry-content li > ol { margin-top: 0.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ul ul { list-style: circle; }
.entry-content ul ul ul { list-style: square; }
.entry-content ol ol { list-style: lower-alpha; }
.entry-content ol ol ol { list-style: lower-roman; }
.entry-content li::marker { color: var(--c-muted); }

.entry-content blockquote {
	margin-block: var(--s-3);
	padding-left: var(--s-2);
	border-left: 3px solid var(--c-primary);
	color: var(--c-muted);
	font-size: 1.125rem;
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content hr,
.entry-content .wp-block-separator {
	margin-block: var(--s-4);
	border: 0;
	border-top: 1px solid var(--c-line);
}

.entry-content code {
	padding: 0.15em 0.4em;
	background: var(--c-surface);
	border-radius: 3px;
	font-size: 0.9em;
}

.entry-content pre {
	padding: var(--s-2);
	background: var(--c-surface);
	border-radius: var(--radius);
	overflow-x: auto;
	font-size: 0.875rem;
}

/* Tables scroll rather than breaking the page on a phone. */
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}

.entry-content th { font-weight: 650; background: var(--c-surface); }

/* Headings get an anchor so a clause can be linked to directly.
   Invisible until the heading is hovered or the link is focused. */
.entry-content h2,
.entry-content h3 { scroll-margin-top: 96px; position: relative; }

.heading-anchor {
	margin-left: 0.4rem;
	color: var(--c-muted);
	text-decoration: none;
	font-weight: 400;
	opacity: 0;
	transition: opacity var(--transition);
}

h2:hover > .heading-anchor,
h3:hover > .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }

@media (hover: none) {
	.heading-anchor { display: none; }
}

/* Page head extras */

.page-lede {
	margin-top: var(--s-1);
	max-width: 55ch;
	color: var(--c-muted);
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
}

.page-updated {
	margin-top: var(--s-2);
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.page-hero,
.post-hero { margin: 0 0 var(--s-3); }
.page-hero img,
.post-hero img { border-radius: var(--radius); width: 100%; }

.post-meta { color: var(--c-muted); font-size: 0.875rem; margin-bottom: var(--s-1); }

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--s-2);
	padding-block: var(--s-3);
	border-top: 1px solid var(--c-line);
	font-size: 0.9375rem;
}

.post-nav__next { margin-left: auto; text-align: right; }

.page-404 { padding-block: var(--s-5); }

.empty { color: var(--c-muted); padding-block: var(--s-4); }

/* --------------------------------------------------------- Pagination */

.wp-block-query-pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
	gap: var(--s-1);
	padding-bottom: var(--s-5);
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.6rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	text-decoration: none;
	font-size: 0.9375rem;
}

.navigation.pagination .page-numbers.current {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-base);
}

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

.site-footer {
	margin-top: auto;
	padding-top: var(--s-4);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	font-size: 0.9375rem;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--s-3);
	padding-bottom: var(--s-3);
}

.site-footer__name {
	font-weight: 700;
	font-size: 1.0625rem;
	margin-bottom: 0.25rem;
}

.site-footer__tagline { color: var(--c-muted); margin: 0; }

.site-footer__heading {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	margin-bottom: var(--s-1);
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; }
.site-footer__list address { font-style: normal; }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding-block: var(--s-2);
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.site-footer__copyright { margin: 0; }

.site-footer__legal {
	display: flex;
	gap: var(--s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------ Sections */

/* One vertical rhythm for every section, at every screen size.
 *
 * There is deliberately no rule collapsing the padding between adjacent
 * sections. It saves a little space between two plain sections and then puts a
 * heading flush against the top edge the moment a section has its own
 * background, which is most of them. Uniform is worth more than compact. */

.section {
	padding-block: var(--section-y);
}

.section--surface {
	background: var(--c-surface);
	border-block: 1px solid var(--c-line);
}

.section__heading {
	max-width: 44ch;
	margin-bottom: var(--s-3);
}

.section__heading p {
	color: var(--c-muted);
	font-size: 1.125rem;
	margin: 0;
}

/* Hero */

.section--hero {
	padding-block: clamp(var(--s-5), 12vw, 8rem) clamp(var(--s-4), 8vw, var(--s-5));
}

.hero__text { max-width: 40ch; }

.hero__title { margin-bottom: var(--s-2); }

.hero__lede {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--c-muted);
	margin-bottom: var(--s-3);
	max-width: 46ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1);
	margin: 0;
}

/* Closing CTA */

.section--cta {
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
	padding-block: clamp(var(--s-4), 8vw, var(--s-5));
	scroll-margin-top: 96px;
}

.section--cta .section__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--s-4);
	align-items: start;
}

.cta__text h2 { margin-bottom: var(--s-1); }
.cta__text p { color: var(--c-muted); margin: 0; max-width: 40ch; }

/* ------------------------------------------------------ Reduced 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;
	}
}

/* ==================================================== Naranja Webworks
 *
 * Everything below is this site rather than the starter. Ported from the
 * static mockup in naranja-site/, with the hardcoded hexes swapped for the
 * theme.json tokens above.
 */

/* ------------------------------------------------------------ primitives */

.eyebrow {
	display: flex; align-items: center; gap: 0.6rem;
	margin: 0 0 1.1rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-primary);
}
.eyebrow::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: currentcolor; flex: none;
}

.lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem); max-width: 56ch; }

.section__head { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section__head p { color: var(--c-muted); margin-bottom: 0; }

.section--tint { background: var(--c-surface); }

.link-arrow {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-weight: 600; font-size: 0.9375rem;
	color: var(--c-ink); text-decoration: none;
}
.link-arrow span { border-bottom: 1px solid rgb(32 26 20 / 25%); }
.link-arrow:hover { color: var(--c-primary); }
.link-arrow:hover span { border-color: var(--c-primary); }
.link-arrow .icon { transition: transform var(--transition); }
.link-arrow:hover .icon { transform: translateX(3px); }

.button--primary { background: var(--c-primary); color: var(--c-white); border-color: var(--c-primary); }
.button--primary:hover { background: #cf4f0d; border-color: #cf4f0d; color: var(--c-white); }

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--c-base) 86%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-stuck { border-bottom-color: var(--c-line); box-shadow: 0 1px 3px rgb(32 26 20 / 5%); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }

.brand { display: flex; align-items: center; text-decoration: none; }

/* Height drives the size; width follows the aspect ratio. The intrinsic
   width/height attributes stay on the img so the header does not shift as it
   loads. */
.brand__logo { height: 44px; width: auto; display: block; }

@media (max-width: 620px) { .brand__logo { height: 36px; } }

/* Both footer marks share this width so they line up as a stacked pair. */
.footer__brand { --footer-mark-w: 172px; }
.footer__logo { width: var(--footer-mark-w); height: auto; margin-bottom: 0.25rem; }
.brand__name {
	font-family: var(--f-display); font-weight: 600; font-size: 1.15rem;
	letter-spacing: -0.02em; color: var(--c-ink); line-height: 1;
}
.brand__sub {
	display: block; margin-top: 3px;
	font-family: var(--f-sans); font-size: 0.625rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted);
}

.site-nav { display: flex; align-items: center; gap: 1.9rem; }
.site-nav__list { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.site-nav__list > li { position: relative; }
.site-nav__list a { color: var(--c-ink); text-decoration: none; font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.3rem; }
.site-nav__list a:hover, .site-nav__list .current-menu-item > a { color: var(--c-primary); }

/* Dropdowns: hover for pointers, the injected button for touch and keyboard. */
.dropdown-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.2rem; height: 1.2rem; padding: 0;
	background: none; border: 0; cursor: pointer; color: inherit;
}
.dropdown-toggle svg { width: 10px; height: 10px; transition: transform var(--transition); }
.has-dropdown.is-open > a .dropdown-toggle svg { transform: rotate(180deg); }

.site-nav__list .sub-menu { margin: 0; padding: 0.45rem; list-style: none; }

@media (min-width: 1041px) {
	.site-nav__list .sub-menu {
		position: absolute; top: 100%; left: 50%; translate: -50% 0; z-index: 70;
		min-width: 16rem; margin-top: 0.5rem;
		background: var(--c-white); border: 1px solid var(--c-line);
		border-radius: var(--radius-lg); box-shadow: var(--shadow);
		opacity: 0; visibility: hidden; transform: translateY(-5px);
		transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	}
	.has-dropdown:hover > .sub-menu,
	.has-dropdown:focus-within > .sub-menu,
	.has-dropdown.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.site-nav__list .sub-menu a { display: block; padding: 0.65rem 0.8rem; border-radius: var(--radius); white-space: nowrap; }
	.site-nav__list .sub-menu a:hover { background: var(--c-surface); }
}

@media (max-width: 1040px) {
	.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--c-ink); }
	.site-nav {
		position: fixed; inset: 76px 0 auto;
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 1rem var(--gutter) 1.75rem;
		background: var(--c-base); border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow);
		transform: translateY(-120%); visibility: hidden;
		transition: transform 220ms ease, visibility 220ms;
		max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.nav-open .site-nav { transform: translateY(0); visibility: visible; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list > li { border-bottom: 1px solid var(--c-line); }
	.site-nav__list > li > a { padding: 0.9rem 0; justify-content: space-between; }
	.site-nav__list .sub-menu { display: none; padding: 0 0 0.6rem 1.1rem; }
	.has-dropdown.is-open > .sub-menu { display: block; }
	.site-nav__list .sub-menu li { border: 0; }
	.site-nav__cta { margin-top: 1rem; text-align: center; justify-content: center; }
}

/* ------------------------------------------------------------------ hero */

.hero { padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* Outfit has no italic cut. Faking one skews the geometry into something
   the designer never drew, so the emphasis is weight and color instead. */
.hero__title em { font-style: normal; font-weight: 700; color: var(--c-primary); position: relative; white-space: nowrap; }
.hero__title em::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em;
	height: 0.09em; background: var(--c-accent); border-radius: 2px;
}

.hero__lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.28rem); max-width: 46ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-bottom: 1.6rem; }
.hero__note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	max-width: 52ch;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
}
.hero__note .icon { margin-top: 4px; flex: none; color: var(--c-leaf); }
.hero__art { max-width: 440px; margin-inline: auto; width: 100%; }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__art { display: none; }
}

/* --------------------------------------------------------- logo marquee */

.proof { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-block: 1px solid var(--c-line); background: var(--c-white); }
.proof__label { text-align: center; margin: 0 0 1.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); }

.marquee { display: flex; overflow: hidden; user-select: none; }

/* One animated element. Two would be free to drift out of phase. */
.marquee__inner {
	display: flex;
	width: max-content;
	/* Both this and the tracks are flex items, and a flex item shrinks by
	   default. Without this the row was squeezed to the width of the viewport
	   and every logo overflowed its own track, which is what made the spacing
	   look wrong no matter what the gap was set to. */
	flex: none;
	animation: nw-marquee 70s linear infinite;
}

.marquee:hover .marquee__inner { animation-play-state: paused; }

/* A set number of pixels between logos. The same at every screen width, and
   the same across the join, because the trailing padding matches the gap.
   Deliberately not a clamp: anything viewport-derived changes as the window
   changes, which is the whole fault being fixed. */
.marquee__track {
	display: flex;
	align-items: center;
	flex: none;
	gap: 104px;
	padding: 0 104px 0 0;
	margin: 0;
	list-style: none;
}

.marquee__item { flex: none; display: flex; align-items: center; }

.logo-mark {
	display: block;
	height: 32px;
	width: auto;
	opacity: 0.62;
	filter: grayscale(100%);
	transition: opacity var(--transition), filter var(--transition);
}

.logo-link { display: block; line-height: 0; }
.logo-link:hover .logo-mark,
.logo-link:focus-visible .logo-mark { opacity: 1; filter: grayscale(0%); }

@media (max-width: 620px) { .logo-mark { height: 26px; } }

/* Half the wrapper is exactly one copy, so this lands copy two where copy one
   began. */
@keyframes nw-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.marquee__inner { animation: none; }
	.marquee__track + .marquee__track { display: none; }
	.marquee { overflow-x: auto; }
}

/* ----------------------------------------------------------- how it works */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.75rem, 3.5vw, 3rem); margin: 0; padding: 0; list-style: none; }
.step__num {
	display: grid; place-items: center;
	width: 40px; height: 40px; margin-bottom: 1.1rem;
	border-radius: 50%; background: var(--c-primary); color: var(--c-white);
	font-size: 0.9375rem; font-weight: 700;
}
.step h3 { margin-bottom: 0.55rem; }
.step p { color: var(--c-muted); margin: 0; }

/* ------------------------------------------------------------ tech stack */

.section--stack { background: var(--c-leaf-deep); color: rgb(253 246 238 / 84%); }
.section--stack h2, .section--stack h3 { color: var(--c-base); }
.section--stack .eyebrow { color: var(--c-accent); }
.section--stack .section__head p { color: rgb(253 246 238 / 80%); }

.stack__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1px; background: rgb(253 246 238 / 13%);
	border: 1px solid rgb(253 246 238 / 13%);
	border-radius: var(--radius-lg); overflow: hidden;
}
.stack__cell { background: var(--c-leaf-deep); padding: clamp(1.5rem, 3vw, 2.1rem); }
.stack__cell h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.stack__cell p { margin: 0; font-size: 0.9688rem; }
.stack__icon { color: var(--c-accent); margin-bottom: 0.9rem; width: 26px; height: 26px; }

/* ------------------------------------------------------- marketing stack */

.market { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .market { grid-template-columns: 1fr; } }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; }
.checklist .icon { margin-top: 5px; color: var(--c-primary); width: 18px; height: 18px; }
.checklist strong { color: var(--c-ink); font-weight: 600; }

.panel { background: var(--c-sand); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.panel h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.6rem; }
.panel p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- CTA */

.section--cta { background: var(--c-surface); }
.cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .cta__inner { grid-template-columns: 1fr; } }
.cta__alt { color: var(--c-muted); font-size: 0.9375rem; }
.cta__form .form { max-width: none; }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--c-ink); color: rgb(253 246 238 / 64%); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer a { color: rgb(253 246 238 / 80%); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }

.footer__top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: 2.5rem; }
@media (max-width: 980px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand .brand__name { color: var(--c-base); }
.footer__brand p { margin: 1rem 0 1.25rem; font-size: 0.9375rem; max-width: 30ch; }

.footer__social { display: flex; gap: 0.6rem; }
.footer__social a {
	display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: var(--radius); background: rgb(253 246 238 / 8%);
	transition: background-color var(--transition), color var(--transition);
}
.footer__social a:hover { background: var(--c-primary); color: var(--c-white); }

.footer__col h2 {
	margin: 0 0 0.9rem;
	font-family: var(--f-sans); font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgb(253 246 238 / 45%);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__col a { font-size: 0.9375rem; }

.footer__bottom {
	display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
	padding-top: 1.75rem; border-top: 1px solid rgb(253 246 238 / 12%);
	font-size: 0.8125rem; color: rgb(253 246 238 / 45%);
}

/* ------------------------------------------------------------------ icons
 *
 * agency_icon() inlines raw SVGs that carry no dimensions of their own, so
 * without this they render at whatever the viewBox scales to, which on the
 * hero arrow was 70px. Sizing lives here rather than in each file so one rule
 * governs every icon.
 */

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.stack__icon { width: 26px; height: 26px; }

/* The label and its arrow belong on one line. */
.link-arrow { white-space: nowrap; }

/* The step list's own call to action. Centered under the four columns so it
   reads as the end of the sequence rather than a fifth step. */
.how__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	text-align: center;
}

.how__cta-note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
}

/* ------------------------------------------------------- Request a quote */

.quote-page__hero { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.quote-page__hero .hero__title { max-width: 18ch; }

.quote-page__body { padding-top: 0; }

.quote-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (max-width: 900px) {
	.quote-page__grid { grid-template-columns: 1fr; }
	/* The aside is reassurance, not instruction, so on a phone it belongs
	   after the form rather than in front of it. */
	.quote-page__aside { order: 2; }
}

.quote-page__form .form { max-width: none; }

.quote-page__aside { display: grid; gap: 1.25rem; position: sticky; top: 100px; }
@media (max-width: 900px) { .quote-page__aside { position: static; } }

.quote-page__aside h2 { font-family: var(--f-sans); font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.75rem; }

.quote-page__next {
	margin: 0 0 1rem;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.5rem;
	font-size: 0.9688rem;
}

.quote-page__honest { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }
.quote-page__alt { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }

/* Help text under a field label. */
.form-help {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--c-muted);
}

/* ------------------------------------------------------- Form sections */

.form-section {
	margin: 0 0 var(--s-3);
	padding: 0 0 var(--s-3);
	border: 0;
	border-bottom: 1px solid var(--c-line);
	display: grid;
	gap: 0.9rem;
}

.form-section:last-of-type { border-bottom: 0; padding-bottom: 0; }

.form-section legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--c-primary);
}

/* A group label is not a <label for>, so it needs the label's styling. */
.form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-ink);
}

/* ---------------------------------------------------------- Checkboxes */

.form-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.5rem 1rem;
	margin-top: 0.15rem;
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.5rem 0.65rem;
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}

.form-check:hover { border-color: var(--c-primary); }

.form-check input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
	flex: none;
	accent-color: var(--c-primary);
	cursor: pointer;
}

/* :has is safe here; without it the box simply does not tint, which is a
   cosmetic loss rather than a functional one. */
.form-check:has(input:checked) {
	border-color: var(--c-primary);
	background: var(--c-sand);
}

/* ================================================================ Journal
 *
 * The blog index, Naranja only. A row list rather than cards: cards need an
 * image to look like anything, and a writing-led blog rarely has a good
 * photograph for every post.
 */

.journal__head {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--c-line);
}

.journal__title {
	font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
	margin-bottom: 0.75rem;
}

.journal__lede { max-width: 58ch; font-size: 1.0625rem; color: var(--c-muted); margin-bottom: 1.5rem; }

.journal__stats {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
	margin: 0; font-size: 0.9375rem; color: var(--c-muted);
}
.journal__stats strong { color: var(--c-primary); font-weight: 700; }

.journal__body { padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem); }

/* ------------------------------------------------------------- controls */

.journal__controls {
	display: grid; gap: 1rem;
	padding: clamp(1rem, 2.5vw, 1.4rem);
	margin-bottom: 1.5rem;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}

/* Revealed by script. Without JS the controls would do nothing, so they stay
   hidden rather than sitting there inert. */
.journal__controls[hidden] { display: none; }

.journal__search {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.7rem 0.9rem;
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
}
.journal__search .icon { color: var(--c-muted); }
.journal__search input {
	flex: 1; min-width: 0;
	border: 0; background: none; font: inherit; color: var(--c-ink);
}
.journal__search input:focus { outline: none; }
.journal__search:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgb(232 93 20 / 12%); }

.journal__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pill {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.45rem 0.9rem;
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	font: inherit; font-size: 0.875rem; font-weight: 600;
	color: var(--c-ink); cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.pill:hover { border-color: var(--c-primary); }
.pill__count { font-size: 0.75rem; font-weight: 700; color: var(--c-muted); }

.pill.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-base); }
.pill.is-active .pill__count { color: rgb(253 246 238 / 60%); }

.journal__count {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	margin: 0 0 0.5rem;
	font-size: 0.875rem; color: var(--c-muted);
}
.journal__sort { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- rows */

.journal__list { list-style: none; margin: 0; padding: 0; }

.row {
	position: relative;
	display: grid; gap: 0.4rem;
	padding-block: clamp(1.4rem, 3vw, 1.9rem);
	border-top: 1px solid var(--c-line);
}
.row:last-child { border-bottom: 1px solid var(--c-line); }
.row[hidden] { display: none; }

.row__tag {
	justify-self: start;
	margin: 0 0 0.15rem;
	padding: 0.2rem 0.55rem;
	background: var(--c-sand);
	border-radius: 4px;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: #8A4413;
}

.row__title { margin: 0; font-family: var(--f-sans); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; line-height: 1.3; }
.row__title a { color: var(--c-ink); text-decoration: none; }

/* The whole row is the target, so a thumb does not have to find the words. */
.row__title a::after { content: ""; position: absolute; inset: 0; }
.row:hover .row__title a { color: var(--c-primary); }

.row__excerpt { margin: 0; max-width: 68ch; color: var(--c-muted); font-size: 0.9688rem; }

.row__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	margin: 0.35rem 0 0;
}

.row__date {
	font-size: 0.8125rem; color: var(--c-muted);
	font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.row__open {
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	font-size: 0.8125rem; font-weight: 600; color: var(--c-ink);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.row:hover .row__open { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

.journal__empty { padding-block: 2.5rem; color: var(--c-muted); }
.journal__empty[hidden] { display: none; }

/* ------------------------------------------------------- single post */

.post__back { margin: clamp(1.75rem, 4vw, 2.5rem) 0 1.5rem; }
.link-arrow--back .icon { transition: transform var(--transition); }
.link-arrow--back:hover .icon { transform: translateX(-3px); }

.post__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.post__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
	margin-bottom: 1rem;
	font-size: 0.8125rem; color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}
.post__meta .row__tag { margin: 0; }

.post__title { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem); margin-bottom: 1rem; }
.post__lede { font-size: 1.125rem; color: var(--c-muted); max-width: 60ch; margin: 0; }

.post__hero { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.post__hero img { width: 100%; border-radius: var(--radius-lg); }

.post__foot {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-line);
}

/* --------------------------------------------------------- Three steps */

/* With three items, auto-fit would leave a wide orphan on a mid-size screen.
   Naming the count keeps them even. */
.steps--three { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (min-width: 900px) { .steps--three { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------- Comparison track
 *
 * Replaces the paragraph that used to make this argument. Built from real
 * text rather than an image, so it stays legible at any width, translates,
 * and reads correctly to a screen reader.
 */

.compare {
	margin: 0;
	padding: clamp(1.4rem, 3vw, 2rem);
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}

.compare__caption {
	margin-bottom: 1.4rem;
	font-size: 0.75rem; font-weight: 700;
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--c-muted);
}

.track + .track { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--c-line); }

.track__label {
	margin: 0 0 0.9rem;
	font-size: 0.9375rem; font-weight: 700; color: var(--c-ink);
}

.track__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 0.85rem;
	padding: 0;
	list-style: none;
}

.track__step {
	position: relative;
	padding-top: 1.5rem;
	padding-right: 0.4rem;
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--c-muted);
}

/* The connector runs from each dot to the next, so the last step has none. */
.track__step::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 0;
	height: 2px;
	background: var(--c-line);
}
.track__step--last::before { display: none; }

.track__dot {
	position: absolute;
	top: 0; left: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--c-base);
	border: 2px solid var(--c-line);
}

.track__note { margin: 0; font-size: 0.8125rem; color: var(--c-muted); }

/* The measured path: continuous, and the payoff is the emphasis. */
.track--now .track__step::before { background: var(--c-accent); }
.track--now .track__dot { border-color: var(--c-primary); }
.track--now .track__step--last .track__dot { background: var(--c-primary); border-color: var(--c-primary); }
.track--now .track__step--last .track__text { color: var(--c-ink); font-weight: 700; }
.track--now .track__note { color: var(--c-leaf); font-weight: 600; }

/* The retrofit path: the same journey, ending somewhere nobody wants. */
.track--later .track__step::before {
	background: repeating-linear-gradient(
		to right,
		var(--c-line) 0 5px,
		transparent 5px 10px
	);
}
.track--later .track__step--last .track__dot {
	background: var(--c-base);
	border-color: #B4472B;
	border-style: dashed;
}
.track--later .track__step--last .track__text { color: #B4472B; font-weight: 700; }

@media (max-width: 520px) {
	/* Four columns is too tight for two words each on a phone, so the track
	   turns vertical and the connector runs down the side. */
	.track__steps { grid-template-columns: 1fr; gap: 0.7rem; }
	.track__step { padding-top: 0; padding-left: 1.5rem; font-size: 0.8125rem; }
	.track__step::before { top: 12px; bottom: -0.7rem; left: 5px; right: auto; width: 2px; height: auto; }
	.track--later .track__step::before {
		background: repeating-linear-gradient(
			to bottom,
			var(--c-line) 0 5px,
			transparent 5px 10px
		);
	}
}

/* ================================================================ Pricing */

/* The hero is gone, so this section carries the top spacing the header used
   to sit against. */
.pricing-page__table { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* A table on a wide screen, stacked cards on a phone. Built from divs with
   ARIA roles rather than <table>, because a real table cannot reflow into
   cards without losing its semantics halfway. */
.ptable {
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-white);
}

.ptable__head {
	display: none;
	padding: 0.85rem clamp(1rem, 2.5vw, 1.6rem);
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--c-muted);
}

.ptable__row { padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1rem, 2.5vw, 1.6rem); }
.ptable__row + .ptable__row { border-top: 1px solid var(--c-line); }
.ptable__row.is-feature { background: var(--c-sand); }

.ptable__name h2 {
	margin: 0 0 0.35rem;
	font-family: var(--f-sans);
	font-size: 1.125rem; font-weight: 700;
}
.ptable__name p { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }

.ptable__flag {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.2rem 0.55rem;
	background: var(--c-primary);
	border-radius: 4px;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--c-white);
}

.ptable__price { margin: 0.9rem 0; display: flex; align-items: baseline; gap: 0.4rem; }
.ptable__figure { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.03em; font-size: 2rem; color: var(--c-primary); line-height: 1; }
.is-feature .ptable__figure { color: #B84A0C; }
.ptable__unit { font-size: 0.875rem; color: var(--c-muted); }

.ptable__covers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ptable__covers li { display: grid; grid-template-columns: 18px 1fr; gap: 0.55rem; align-items: start; font-size: 0.9375rem; }
.ptable__covers .icon { margin-top: 4px; color: var(--c-primary); width: 14px; height: 14px; }

.ptable__note {
	margin: 0.9rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--c-line);
	font-size: 0.8438rem; color: var(--c-muted);
}
.is-feature .ptable__note { border-top-color: rgb(32 26 20 / 12%); }

@media (min-width: 860px) {
	.ptable__head,
	.ptable__row {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 1.6fr);
		gap: clamp(1rem, 2.5vw, 2rem);
		align-items: start;
	}
	.ptable__price { margin: 0; }
}

.pricing-page__choose { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.pricing-page__choose h2 { font-family: var(--f-sans); font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.6rem; }
.pricing-page__choose p { margin: 0 0 0.6rem; }
.pricing-page__choose-note { font-size: 0.9375rem; color: var(--c-muted); }

.pricing-page__foot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .pricing-page__foot { grid-template-columns: 1fr; } }

.pricing-page__excluded {
	columns: 2; column-gap: 2rem;
	margin: 1.25rem 0 0; padding-left: 1.1rem;
	font-size: 0.9375rem; color: var(--c-muted);
}
.pricing-page__excluded li { break-inside: avoid; margin-bottom: 0.4rem; }
@media (max-width: 620px) { .pricing-page__excluded { columns: 1; } }

.pricing-page__foot .panel h3 { font-family: var(--f-sans); font-size: 1.0625rem; font-weight: 700; }
.pricing-page__terms { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; font-size: 0.9375rem; }

/* ========================================================= Contractor offer */

.offer__hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.offer__hero .hero__title { max-width: 16ch; }
.offer__price { font-size: 0.9375rem; color: var(--c-muted); }

.offer__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .offer__grid { grid-template-columns: 1fr; } }

.offer__rules { list-style: none; margin: 1.75rem 0 0; padding: 0; counter-reset: rule; display: grid; gap: 1.5rem; }
.offer__rules li { counter-increment: rule; position: relative; padding-left: 3rem; }
.offer__rules li::before {
	content: counter(rule);
	position: absolute; left: 0; top: 0;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	background: var(--c-primary); color: var(--c-white);
	border-radius: 50%; font-size: 0.875rem; font-weight: 700;
}
.offer__rules h3 { margin-bottom: 0.35rem; font-size: 1.0625rem; }
.offer__rules p { margin: 0; color: var(--c-muted); font-size: 0.9688rem; }

.offer__honest { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.6rem; }
.offer__honest li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; align-items: start; font-size: 0.9375rem; }
.offer__honest .icon { margin-top: 4px; color: var(--c-primary); width: 14px; height: 14px; }
.offer__canvas { margin: 0; padding-top: 0.9rem; border-top: 1px solid rgb(32 26 20 / 12%); font-size: 0.9375rem; color: var(--c-muted); }

.offer__deal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 760px) { .offer__deal { grid-template-columns: 1fr; } }

.offer__side {
	padding: clamp(1.4rem, 3vw, 1.9rem);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}
.offer__side--you { background: var(--c-sand); border-color: transparent; }
.offer__side h3 { font-family: var(--f-sans); font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; }
.offer__side ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; font-size: 0.9375rem; }

.offer__terms { margin: clamp(1.5rem, 3vw, 2rem) 0 0; font-size: 0.9375rem; color: var(--c-muted); max-width: 70ch; }

.offer__apply { max-width: 44rem; }
.offer__apply .form { max-width: none; }

/* ============================================================== SEO page */

/* Shared by every service page: SEO, Marketing. Nothing below is specific
   to search, which is why the names lost their seo__ prefix. */
.svc-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.svc-hero .hero__title { max-width: 18ch; }

.pains {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0.9rem 2rem; margin: 0; padding: 0; list-style: none;
}
.pains li {
	position: relative; padding-left: 1.6rem;
	font-size: 1.0625rem; color: var(--c-ink);
}
/* A cross rather than a tick: these are the things going wrong. */
.pains li::before {
	content: ""; position: absolute; left: 0; top: 0.62em;
	width: 9px; height: 9px; border-radius: 2px;
	background: #C05A2E; transform: rotate(45deg);
}
.pains__note { margin: 1.75rem 0 0; max-width: 62ch; color: var(--c-muted); }

.pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }
@media (max-width: 860px) { .pkgs { grid-template-columns: 1fr; } }

.pkg {
	padding: clamp(1.5rem, 3vw, 2.1rem);
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}
.pkg.is-feature { background: var(--c-sand); border-color: transparent; }

.pkg__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem; font-weight: 700;
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--c-primary);
}
.pkg h3 { font-family: var(--f-sans); font-size: 1.1875rem; font-weight: 700; margin-bottom: 0.6rem; }
.pkg__blurb { color: var(--c-muted); font-size: 0.9688rem; margin-bottom: 1.25rem; }

.pkg ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.55rem; }
.pkg li { display: grid; grid-template-columns: 18px 1fr; gap: 0.6rem; align-items: start; font-size: 0.9375rem; }
.pkg .icon { margin-top: 4px; color: var(--c-primary); width: 14px; height: 14px; }

.pkg__foot {
	margin: 0; padding-top: 0.85rem;
	border-top: 1px solid var(--c-line);
	font-size: 0.8438rem; color: var(--c-muted);
}
.is-feature .pkg__foot { border-top-color: rgb(32 26 20 / 12%); }

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

.faq-list { max-width: 48rem; }

.faq { border-bottom: 1px solid var(--c-line); }
.faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.1rem 0; cursor: pointer; list-style: none;
	font-size: 1.0625rem; font-weight: 600; color: var(--c-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ""; flex: none;
	width: 10px; height: 10px;
	border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--transition);
}
.faq[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq summary:hover { color: var(--c-primary); }
.faq p { margin: 0 0 1.2rem; max-width: 62ch; color: var(--c-muted); }

/* ================================================================== About */

.about__text p { max-width: 62ch; }
.about__text h2 { max-width: 20ch; }
.about__link { margin-top: 1.25rem; }

/* A byline, not a portrait. Same pattern as the one on innervate.media: a
   small circle with the name and title set beside it, reading as a signature
   at the foot of the copy. */
.about__byline {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	margin: 2rem 0 0;
}

.about__byline img {
	width: 72px; height: 72px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	/* A ring in the sand tint, so the photo sits in the palette rather than
	   looking pasted onto it. */
	border: 2px solid var(--c-sand);
}

.about__byline figcaption { line-height: 1.35; }
.about__name { display: block; font-weight: 600; font-size: 1rem; color: var(--c-ink); }
.about__role { display: block; font-size: 0.875rem; color: var(--c-muted); }

/* ----------------------------------------------------------- Sister brand */

/* The handoff to Innervate Media. It reads as a note in the margin rather than
   a section of its own, because sending the reader away has to feel like
   advice; a full-width band here competes with our own offer. */
.sister {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	background: var(--c-white);
}
@media (max-width: 860px) { .sister { grid-template-columns: 1fr; } }

.sister__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); max-width: 20ch; }
.sister__body p { max-width: 58ch; color: var(--c-muted); }
.sister__actions { margin: 1.5rem 0 0; }

.sister__mark { align-self: center; }
.sister__mark img { display: block; width: 200px; height: auto; }
@media (max-width: 860px) { .sister__mark img { width: 160px; } }

.pkgs__note {
	margin: 1.75rem 0 0;
	max-width: 62ch;
	font-size: 0.9375rem;
	color: var(--c-muted);
}

/* -------------------------------------------------- Footer parent brand */

.footer__parent { margin: 1.25rem 0; }

/* Matched to the Naranja mark above it by width rather than height. The two
   marks have very different proportions, so equal heights would leave this one
   looking much wider; equal widths is what actually reads as aligned. */
.footer__parent-logo {
	display: block;
	width: var(--footer-mark-w);
	height: auto;
	opacity: 0.75;
	transition: opacity var(--transition);
}

@media (max-width: 620px) { .footer__brand { --footer-mark-w: 148px; } }
.footer__parent-logo:hover { opacity: 1; }