/* RankCraft Web - Main Stylesheet */

/* Poppins, served from this origin instead of fonts.googleapis.com.

   The stylesheet there is render-blocking and lives on a different
   host, so before a single letter appeared the browser had to resolve
   DNS, open TCP, negotiate TLS and fetch a stylesheet from one third
   party, then do most of it again at fonts.gstatic.com for the files
   themselves. Everything on this page finished downloading inside
   341ms unthrottled, yet first paint measured 3.3s on simulated
   mobile: the cost was round trips, not bytes.

   Both latin subsets are here on purpose. The peso sign is U+20B1,
   which sits in latin-ext, not latin - shipping only latin would drop
   every price on the services page into a fallback face. Devanagari
   is not shipped; nothing on an English site needs it, and Google was
   serving it as a third of the family. unicode-range means a browser
   still only fetches the file a page actually needs.

   Poppins is licensed under the SIL Open Font License, which permits
   hosting it here. */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--rc-navy: #0C2A4A;
	--rc-green: #17805F;
	--rc-green-light: #63C89F;
	--rc-off-white: #F4F6F9;
	--rc-slate: #627288;
	--rc-slate-light: #8392A6;
	/* Was #E2E8F0, which at roughly 1.19:1 against white was invisible
	   on the unpainted bands: the cards looked borderless. This is
	   visible without turning into a hard outline. */
	--rc-border: #CBD5E1;

	/* Measured, not guessed: 20px padding either side of a 36px logo
	   and the nav that sits with it. Anything that has to clear the
	   sticky header offsets from this rather than repeating the number. */
	--rc-header-h: 90px;
	--font-main: 'Poppins', sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-main);
	color: var(--rc-navy);
	line-height: 1.6;
}

/* Headings had no typography of their own worth the name. Only the
   front-page h1 declared a line-height, so every other heading
   inherited body's 1.6 - a reading measure for paragraphs, which on a
   40px heading puts 64px between the lines and is the whole reason
   the front page looked right and nothing else did. Below h1 there
   was no base size either: the theme sizes headings by section class,
   so any section written without a matching rule fell through to the
   browser default, and 35 headings were doing exactly that, including
   six h2 sitting at 24px beside 32px section headings on the same
   page.

   Measured before any of this changed, across twelve pages at 375,
   768 and 1280: eleven of twelve h1 came back at ratio 1.6, and below
   h1, 28 of 96 rendered h2 and 11 of 99 h3 wrapped past one line, so
   the looseness was visible rather than theoretical.

   Ratios loosen as the type gets smaller on purpose: a 20px h3 needs
   more room between lines than a 44px h1. Every existing rule still
   wins on specificity, so nothing already decided is overridden -
   .blog-card-body h2 keeps its 18px/1.4, .cert-card h3 its 16px/1.4.
   The point is that a section added tomorrow is right by default and
   only states a size when it genuinely differs. */
h1 {
	line-height: 1.2;
}

h2 {
	font-size: 32px;
	line-height: 1.25;
}

h3 {
	font-size: 20px;
	line-height: 1.35;
}

h4 {
	font-size: 18px;
	line-height: 1.4;
}

/* There was no rule for a link at all. Sixty of them across the site
   rendered in the browser default blue with the default underline,
   inline links in body copy on every page among them. Measured
   against the two backgrounds they actually sit on, this green is
   4.90:1 on white and 4.52:1 on the off-white bands, both past the
   4.5:1 AA threshold. The underline stays: colour alone is not
   enough to mark a link. */
a {
	color: var(--rc-green);
	text-underline-offset: 3px;
}

/* Responsive baseline that was missing: without it any image sized by
   a fixed dimension keeps that width no matter how narrow the viewport
   gets, and pushes the page sideways. The footer logo did exactly that
   at 320px. Class rules still win on specificity, so this only fills
   the gap where nothing else has an opinion. */
img {
	max-width: 100%;
}

/* Now that the header is sticky it sits on top of whatever an anchor
   scrolls to. There are no in-page links in the theme today, but the
   hero carries id="free-audit" and that is the kind of thing that ends
   up in an email or a campaign URL. One rule covers the whole site. */
[id] {
	scroll-margin-top: calc(var(--rc-header-h) + 16px);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--rc-navy);
	padding: 20px 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	display: block;
	line-height: 0;
}

/* Sized by width rather than height. With height fixed and width auto,
   max-width could only squash the image; driving from width lets the
   height follow. 1800/320 is a ratio of 5.625, so 203px wide is the
   36px tall this used to be. */
.site-logo-img {
	width: 203px;
	height: auto;
	display: block;
}

.header-nav-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nav-menu {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	color: var(--rc-off-white);
	text-decoration: none;
	font-weight: 500;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
}

.nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--rc-off-white);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
	opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
/* The font is stated rather than left to inherit, because half the
   buttons on the site cannot inherit it: .btn sits on both <a> and
   <button>, and the UA stylesheet gives form controls a font of their
   own. The contact form had patched around that with its own family
   and 15px, which left the one <button> on the site rendering a pixel
   smaller and 2.6px shorter than every other button. */
.btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	font-family: var(--font-main);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

/* Focus states: a light-on-dark double ring that stays visible on any
   background color the site uses (navy hero sections, white cards, etc). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px white, 0 0 0 4px var(--rc-navy);
	border-radius: 4px;
}

.btn-primary {
	background: var(--rc-green);
	color: white;
}

.btn-secondary {
	background: transparent;
	color: var(--rc-off-white);
	border: 1.5px solid var(--rc-off-white);
}

/* Hero */
.hero {
	background: var(--rc-navy);
	padding: 80px 0;
}

.hero-inner {
	display: flex;
	align-items: center;
	gap: 48px;
}

.hero-text {
	flex: 1;
}

.hero-text h1 {
	color: var(--rc-off-white);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.hero-subhead {
	color: var(--rc-green-light);
	font-size: 18px;
	margin-bottom: 32px;
}

.hero-cta {
	display: flex;
	gap: 16px;
}

.hero-visual {
	flex: 1;
}

.hero-visual-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Proof section */
.proof {
	padding: 80px 0;
	text-align: center;
}

.proof-grid {
	margin-top: 48px;
}

.proof-grid .service-card {
	text-align: center;
}

.proof-grid .stat-row {
	justify-content: center;
	gap: 32px;
	margin: 20px 0;
}

.section-label {
	color: var(--rc-green);
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 13px;
}

/* --rc-green is 4.90:1 on white and 2.97:1 on the navy bands, so
   the same label passed on the light sections and failed on every
   dark hero - eight pages of it, which is what dropped those pages
   to 93 on Lighthouse while the front page, whose hero has no
   label, stayed at 100. --rc-green-light is 7.12:1 there and is
   already the colour of the lead paragraph underneath it. */
.hero .section-label,
.service-hero .section-label,
.about-hero .section-label,
.case-study-hero .section-label,
.single-post-header .section-label {
	color: var(--rc-green-light);
}

.proof h2 {
	font-size: 32px;
	max-width: 700px;
	margin: 8px auto 24px;
}

.stat-row {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin: 48px 0;
}

.stat {
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 40px;
	font-weight: 700;
	color: var(--rc-green);
}

.stat-label {
	display: block;
	font-size: 13px;
	color: var(--rc-slate);
	margin-top: 4px;
}

.link-arrow {
	color: var(--rc-navy);
	font-weight: 500;
	text-decoration: none;
}

/* Services */
.services {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.services h2, .how-it-works h2 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 48px;
}

.services-grid, .steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.service-card, .step {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* Teaser illustrations on the home page. The cards there used to
   repeat the services page word for word, so they now carry a
   drawing, a heading and a link and nothing else. All three share
   the same rounded screen so they read as one set. */

.service-illustration {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 4px auto 24px;
}

.service-card img, .step img {
	margin-bottom: 16px;
	border-radius: 12px;
}

/* margin-top: auto pins the link to the bottom of the card, so cards
   with shorter descriptions still line up their button with the rest
   of the row instead of floating higher. */
.service-card .link-arrow {
	display: block;
	margin-top: auto;
	padding-top: 12px;
}

/* How it works */
.how-it-works {
	padding: 80px 0;
	text-align: center;
}

.audit-form-anchor {
	margin-top: 48px;
}

/* About preview */
.about-preview {
	padding: 80px 0;
}

.about-preview-inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.about-headshot {
	border-radius: 50%;
	flex-shrink: 0;
}

.about-text h2 {
	font-size: 32px;
	margin: 0 0 16px;
}

.about-text p {
	color: var(--rc-slate);
	margin-bottom: 16px;
}

/* FAQ */
.faq {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.faq-inner {
	max-width: 760px;
}

.faq h2 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 40px;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	padding: 20px 24px;
}

.faq-item summary {
	cursor: pointer;
	font-weight: 500;
	list-style: none;
	position: relative;
	padding-right: 32px;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 0;
	color: var(--rc-green);
	font-size: 20px;
	line-height: 1;
}

.faq-item[open] summary::after {
	content: '−';
}

.faq-item p {
	color: var(--rc-slate);
	line-height: 1.7;
	margin: 16px 0 0;
}

/* Final CTA */
.final-cta {
	background: var(--rc-off-white);
	padding: 80px 0;
	text-align: center;
}

.final-cta h2 {
	font-size: 32px;
	margin-bottom: 12px;
}

.final-cta p {
	color: var(--rc-slate);
	margin-bottom: 32px;
}

/* Footer */
.site-footer {
	background: var(--rc-navy);
	color: var(--rc-off-white);
	padding: 64px 0 32px;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(244,246,249,0.15);
}

.footer-col-title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--rc-green-light);
	margin: 0 0 16px;
}

/* font-size here, not only on the link inside: an li inheriting 16px
   from body builds a 25.6px line box even when its only child is 14px,
   because the strut comes from the element own font. That is where the
   last 3.2px of difference against the address block was hiding. */
.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
}

.footer-col a {
	color: var(--rc-off-white);
	text-decoration: none;
	font-size: 14px;
	opacity: 0.85;
}

.footer-col a:hover {
	opacity: 1;
	text-decoration: underline;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* Set rather than placed: at 315px the logo image made the brand
   column a different weight of thing from the three beside it,
   whose headings are 14px. 20px sits just above those headings,
   which is where a brand belongs without taking the column over.
   Two classes so it beats .footer-col a, which would otherwise
   drop it to 14px. */
.footer-brand .footer-wordmark {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--rc-off-white);
	opacity: 1;
	text-decoration: none;
}

.footer-brand .footer-wordmark span {
	color: var(--rc-green-light);
}

/* <address> is italic by default, which is wrong for a postal block.
   Colour comes from --rc-off-white rather than --rc-slate-light: the
   slate measures 4.58:1 on the footer navy, which clears AA by four
   hundredths and is the kind of margin that disappears the next time
   a colour is nudged. The links inherit .footer-col a. */
.footer-nap {
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--rc-off-white);
}

/* The links here pick up .footer-col a, which dims to 0.85. The
   locality is not a link and would otherwise sit brighter than
   everything around it. */
.footer-nap > span {
	opacity: 0.85;
}

/* Same reasoning as .site-logo-img: 315px wide is the 56px tall this
   was, and it can now shrink instead of forcing the footer wider than
   the screen. */

.footer-bottom {
	padding-top: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.footer-copyright {
	color: var(--rc-slate-light);
	font-size: 13px;
	margin: 0;
}

.footer-legal {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-legal a {
	color: var(--rc-slate-light);
	font-size: 13px;
	text-decoration: none;
}

.footer-legal a:hover {
	color: var(--rc-off-white);
	text-decoration: underline;
}

/* Case study single */
.case-study-hero {
	background: var(--rc-navy);
	padding: 60px 0 40px;
	text-align: center;
}

.case-study-hero h1 {
	color: var(--rc-off-white);
	font-size: 36px;
	margin: 8px 0;
}

.case-study-client {
	color: var(--rc-green-light);
	font-size: 15px;
}

.case-study-client a {
	color: var(--rc-green-light);
}

.case-study-featured-image {
	margin-top: -30px;
}

.case-study-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.case-study-stats {
	margin: 48px auto;
}

.case-study-content {
	max-width: 760px;
	padding-top: 40px;
	padding-bottom: 40px;
	line-height: 1.8;
}

.case-study-content h2 {
	font-size: 26px;
	margin-top: 40px;
}

.case-study-cta {
	max-width: 760px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 60px;
	flex-wrap: wrap;
	gap: 16px;
}

/* Portfolio archive */
.portfolio-archive {
	padding: 80px 0;
}


.section-intro {
	color: var(--rc-slate);
	margin-bottom: 40px;
}

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.portfolio-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.portfolio-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Cards that carry a destination are now the whole click target, so
   they take the link reset and can honestly lift on hover. The price
   cards were deliberately left as divs because they have nowhere to
   go, and this selector passes over them without naming them: a lift
   on a card that cannot be clicked is a promise the page cannot keep. */
a.service-card,
a.cert-card {
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.service-card:hover,
a.cert-card:hover {
	transform: translateY(-2px);
	border-color: var(--rc-slate-light);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* The global focus ring rounds to 4px, which cuts the corners off a
   12px card. These now need the card radius instead. */
a.service-card:focus-visible,
a.cert-card:focus-visible,
.portfolio-card:focus-visible {
	border-radius: 12px;
}

/* main.js already honours this for the scroll reveal; the CSS had no
   equivalent until there was motion living in it. */
@media (prefers-reduced-motion: reduce) {
	a.service-card,
	a.cert-card,
	.portfolio-card {
		transition: none;
	}

	a.service-card:hover,
	a.cert-card:hover,
	.portfolio-card:hover {
		transform: none;
	}
}

.portfolio-card-image {
	aspect-ratio: 2.4 / 1;
	overflow: hidden;
}

.portfolio-card-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	/* Anchored rather than centred. A screenshot carries its nav
	   and its headline in the top left, so that is the corner
	   worth keeping when the ratios do not match exactly. */
	object-position: left top;
}

.portfolio-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.portfolio-card-body h2 {
	font-size: 20px;
	margin: 0 0 8px;
}

.portfolio-card-body p {
	color: var(--rc-slate);
	font-size: 14px;
	margin: 0;
}



/* A compact stat row for inside a card. The .stat-row used on single
   case studies sets 40px numerals and 48px gaps, which is sized for a
   full-width band and overruns a half-container card. */
.card-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: start;
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--rc-border);
}

.card-stat-number {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--rc-green);
}

/* Labels are author-entered and vary from one word to a short phrase,
   so this has to wrap cleanly rather than assume it fits. */
.card-stat-label {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.35;
	color: var(--rc-slate);
}

.portfolio-card-body .link-arrow {
	display: block;
	margin-top: auto;
	padding-top: 20px;
}

/* Contact page */
.contact-page {
	padding: 80px 0;
}

.contact-page-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.contact-intro h1 {
	font-size: 36px;
	margin-bottom: 16px;
}

.contact-intro .section-label {
	margin: 0 0 8px;
}

/* Capped rather than left to the column width. At 1200px the intro
   column is 568px wide, which runs this text to about 88 characters. */
.contact-lead {
	color: var(--rc-slate);
	line-height: 1.7;
	max-width: 460px;
	margin: 0 0 16px;
}

.contact-direct {
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--rc-border);
	color: var(--rc-slate);
	font-size: 15px;
}

.contact-form-wrap {
	background: var(--rc-off-white);
	border-radius: 12px;
	padding: 32px;
}

.contact-next {
	background: var(--rc-off-white);
	padding: 80px 0;
}

.contact-next h2 {
	text-align: center;
	font-size: 32px;
	margin-bottom: 48px;
}

/* Overrides .section-intro, which carries a 40px bottom margin meant
   for a heading that follows it. Nothing follows this one. */
.contact-next-note {
	text-align: center;
	margin: 40px auto 0;
	max-width: 560px;
}

.contact-form .form-row {
	margin-bottom: 20px;
}

.contact-form label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 6px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rc-border);
	border-radius: 8px;
	font-family: var(--font-main);
	font-size: 15px;
	background: white;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: none;
	border-color: var(--rc-green);
	box-shadow: 0 0 0 2px white, 0 0 0 4px var(--rc-navy);
}

.contact-form button {
	border: none;
	cursor: pointer;
}

.rc-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.form-notice {
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 24px;
	font-size: 14px;
}

.form-notice-success {
	background: #E1F5EE;
	color: #0F6E56;
}

.form-notice-error {
	background: #FCEBEB;
	color: #A32D2D;
}

/* About page */
.service-hero {
	background: var(--rc-navy);
	padding: 80px 0;
}

/* Same two-column hero the front page uses. These heroes were a
   single text column in a 1200px container, so past the h1's 700px
   cap the right-hand third of every one of them was empty. */
.service-hero-inner {
	display: flex;
	align-items: center;
	gap: 48px;
}

/* min-width:0 because a flex item defaults to min-content width and
   a long unbroken heading would otherwise refuse to shrink and push
   the drawing off the side. */
.service-hero-text,
.service-hero-visual {
	flex: 1;
	min-width: 0;
}

.service-hero-visual {
	max-width: 440px;
}

.hero-illustration {
	display: block;
	width: 100%;
	height: auto;
}

.service-hero h1 {
	color: var(--rc-off-white);
	font-size: 40px;
	max-width: 700px;
	margin: 8px 0 16px;
}

.service-hero-lead {
	color: var(--rc-green-light);
	font-size: 18px;
	max-width: 640px;
	margin-bottom: 32px;
}

.service-overview {
	padding: 80px 0;
}

.service-overview-inner {
	max-width: 760px;
}

.service-overview h2 {
	font-size: 32px;
	margin-bottom: 20px;
}

.service-overview p {
	color: var(--rc-slate);
	line-height: 1.8;
	margin-bottom: 16px;
}

/* Full-width alternating rows, one per named sub-service. The
   reference design this follows gives each of its services a row of
   its own rather than a cell in a grid, which is what makes them read
   as distinct offerings instead of bullet points with extra words. */
.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding: 56px 0;
	border-top: 1px solid var(--rc-border);
}

/* Every second row puts the drawing on the left. nth-of-type, not
   nth-child: the section heading is a sibling too, so nth-child would
   count it and the whole alternation would flip if that heading ever
   moved. Done with order
   rather than by reversing the markup, so the heading still comes
   before its illustration for anything reading the document rather
   than looking at it. */
.service-row:nth-of-type(even) .service-row-art {
	order: -1;
}

.service-row-text h3 {
	margin: 0 0 12px;
	font-size: 26px;
}

.service-row-text > p {
	margin: 0 0 20px;
	color: var(--rc-slate);
	max-width: 520px;
}

.service-row-points {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The tick is drawn in a pseudo-element so it never reaches the
   accessibility tree: it is punctuation, not content. */
.service-row-points li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	color: var(--rc-slate);
	font-size: 15px;
	line-height: 1.5;
}

.service-row-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--rc-green);
	border-bottom: 2px solid var(--rc-green);
	transform: rotate(-45deg);
}

.row-illustration {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	/* Stacked, and the alternation goes with it: on one column the
	   drawing belongs under its own heading rather than above the
	   previous row's text. */
	.service-row {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 0;
	}

	.service-row:nth-of-type(even) .service-row-art {
		order: 0;
	}

	.service-row-text > p {
		max-width: 560px;
	}

	.row-illustration {
		max-width: 400px;
	}
}

.service-deliverables {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.service-deliverables h2 {
	font-size: 32px;
	margin-bottom: 24px;
}

/* Sits between two unpainted sections, which would otherwise run
   together into one undivided white block. Carries the alternating
   band the service pages already use. */
/* Scroll timeline for the one canonical process section. The rail is a
   static track with a progress span that JS grows as the section passes
   the viewport; with reduced motion the span is simply set to full
   height so the design still reads.

   This was navy at first, which was a mistake: navy is the hero colour
   everywhere on this site and nowhere else, so a navy band mid-page
   read as a second hero. It now takes the off-white the rest of the
   page alternates with, and the rail carries the emphasis instead. */
.process {
	background: var(--rc-off-white);
	padding: 96px 0;
}

/* Two columns: the framing on the left, the steps on the right. The
   reference this follows puts its heading in a left column too, but
   lets it scroll away. Sticking it means the section title is still
   there when you are three thousand pixels into the timeline, which is
   the whole reason the column exists. The header is not fixed, so a
   small offset is all the clearance it needs. */
.process-inner {
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 72px;
	align-items: start;
}

.process-intro {
	position: sticky;
	top: calc(var(--rc-header-h) + 24px);
}

.process h2 {
	font-size: 32px;
	margin: 8px 0 16px;
}

.process .section-intro {
	margin-bottom: 0;
}

/* Sized in em so the icon tracks the heading rather than being pinned
   to a pixel value that stops matching if the type scale moves. */
/* Sits inside .process-timeline, so it already carries the rail's left
   padding and lines up with the step text rather than the markers. The
   process ends on "show what changed"; this is where that evidence
   actually lives, and it was the one thing the page never linked to. */
.process-outro {
	margin: 32px 0 0;
}

.process-step-icon {
	display: block;
	width: 1.75em;
	height: 1.75em;
	margin-bottom: 12px;
	color: var(--rc-green);
}

.process-step-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.process-timeline {
	position: relative;
	padding-left: 72px;
}

.process-rail {
	position: absolute;
	left: 23px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--rc-border);
}

.process-rail-progress {
	display: block;
	width: 100%;
	height: 0;
	background: var(--rc-green);
}

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

.process-step {
	position: relative;
	padding-bottom: 56px;
}

.process-step:last-child {
	padding-bottom: 0;
}

/* Filled with the band colour rather than left transparent, so the rail
   passes behind the marker instead of straight through the number. */
.process-step-num {
	position: absolute;
	left: -72px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--rc-border);
	border-radius: 50%;
	background: var(--rc-off-white);
	color: var(--rc-green);
	font-size: 15px;
	font-weight: 700;
}

.process-step h3 {
	font-size: 24px;
	margin: 10px 0 12px;
}

.process-step-body > p {
	color: var(--rc-slate);
	max-width: 640px;
	margin-bottom: 24px;
}

/* One column is the default here, not the fallback. These sit inside
   the right-hand column of a two column section, so the space they get
   is much narrower than the viewport suggests: at 901px the two column
   version gave 161px a side, about 21 characters. Two columns only earn
   their place once the section is wide enough to carry them. */
.process-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	max-width: 520px;
	gap: 20px 32px;
}

@media (min-width: 1150px) {
	.process-points {
		grid-template-columns: repeat(2, 1fr);
		max-width: 720px;
	}
}

.process-points li {
	color: var(--rc-slate);
	font-size: 15px;
	line-height: 1.5;
}

.process-points strong {
	display: block;
	margin-bottom: 4px;
	color: var(--rc-navy);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.process-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.process-intro {
		position: static;
	}

	.process .section-intro {
		max-width: 620px;
	}
}

@media (max-width: 768px) {
	.process-timeline {
		padding-left: 52px;
	}

	.process-rail {
		left: 15px;
	}

	.process-step-num {
		left: -52px;
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

}

.service-local {
	padding: 80px 0;
}

.service-process {
	padding: 80px 0;
	text-align: center;
}

.service-process h2 {
	font-size: 32px;
	margin-bottom: 48px;
}

.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rc-green);
	color: white;
	font-weight: 700;
	margin-bottom: 16px;
}

.blog-list {
	padding: 80px 0;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.blog-card {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.blog-card-thumb {
	display: block;
	line-height: 0;
}

.blog-card-thumb img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.blog-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Same pin as .service-card above: the link sits at the bottom of
   the card rather than wherever the excerpt happened to end. */
.blog-card-body .link-arrow {
	display: block;
	margin-top: auto;
	padding-top: 12px;
}

.blog-card-date {
	display: block;
	font-size: 13px;
	color: var(--rc-slate);
	margin-bottom: 8px;
}

.blog-card-body h2 {
	font-size: 18px;
	margin: 0 0 12px;
	line-height: 1.4;
}

.blog-card-body h2 a {
	color: var(--rc-navy);
	text-decoration: none;
}

.blog-card-body h2 a:hover {
	color: var(--rc-green);
}

.blog-card-body p {
	color: var(--rc-slate);
	line-height: 1.7;
	margin: 0 0 16px;
}

.blog-empty {
	color: var(--rc-slate);
	text-align: center;
}

.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.blog-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--rc-border);
	border-radius: 8px;
	color: var(--rc-navy);
	text-decoration: none;
	font-size: 14px;
}

.blog-pagination .page-numbers.current {
	background: var(--rc-green);
	border-color: var(--rc-green);
	color: white;
}

.blog-pagination .page-numbers.dots {
	border: none;
}

/* Legal pages */
.legal-page {
	padding: 80px 0;
}

.legal-page-inner {
	max-width: 760px;
}

.legal-page h1 {
	font-size: 36px;
	margin: 8px 0 8px;
}

.legal-updated {
	color: var(--rc-slate);
	font-size: 14px;
	margin-bottom: 40px;
}

.legal-content {
	color: var(--rc-slate);
	line-height: 1.8;
}

.legal-content h2 {
	color: var(--rc-navy);
	font-size: 22px;
	margin-top: 40px;
	margin-bottom: 12px;
}

.legal-content p {
	margin-bottom: 16px;
}

.legal-content ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.legal-content li {
	margin-bottom: 8px;
}

.legal-content a {
	color: var(--rc-green);
}

/* Single post */
.single-post-header {
	background: var(--rc-navy);
	padding: 64px 0 40px;
}

.single-post-header h1 {
	color: var(--rc-off-white);
	font-size: 36px;
	max-width: 760px;
	margin: 8px 0 12px;
}

.single-post-date {
	color: var(--rc-green-light);
	font-size: 14px;
}

.single-post-thumb {
	margin-top: 40px;
}

.single-post-thumb img {
	width: 100%;
	max-width: 760px;
	height: 320px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	margin: 0 auto;
}

.single-post-content {
	max-width: 760px;
	padding: 56px 24px 0;
	color: var(--rc-slate);
	line-height: 1.8;
}

.single-post-content h2,
.single-post-content h3 {
	color: var(--rc-navy);
	margin-top: 32px;
}

.single-post-content p {
	margin-bottom: 20px;
}

.single-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.single-post-back {
	max-width: 760px;
	padding: 24px 24px 64px;
}

.about-hero {
	background: var(--rc-navy);
	padding: 80px 0;
}

.about-hero-inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.about-hero-text {
	min-width: 0;
}

.about-hero-headshot {
	border-radius: 50%;
	flex-shrink: 0;
	margin-left: auto;
	margin-right: auto;
}

/* Matches the lead paragraph's measure. The heading used to be short
   enough that its full-width line box never showed, but a full sentence
   runs the whole column and leaves the heading jutting ~330px past the
   paragraph beneath it. */
.about-hero h1 {
	color: var(--rc-off-white);
	font-size: 40px;
	margin: 8px 0 16px;
	max-width: 600px;
}

.about-hero-lead {
	color: var(--rc-green-light);
	font-size: 17px;
	max-width: 600px;
}

.about-bio {
	padding: 80px 0;
}

.about-bio-inner {
	max-width: 760px;
}

.about-bio h2 {
	font-size: 32px;
	margin-bottom: 20px;
}

.about-bio p {
	color: var(--rc-slate);
	line-height: 1.8;
	margin-bottom: 16px;
}

.skills {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.skills h2 {
	font-size: 32px;
	margin-bottom: 24px;
}

.skills-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.skills-list li {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 14px;
	color: var(--rc-navy);
}

/* About page bands alternate plain / tinted all the way down:
   hero (navy) - bio - proof - process - skills - tools - certs - cta */
.about-proof {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.about-proof h2,
.about-tools h2 {
	font-size: 32px;
	margin-bottom: 24px;
}

.about-proof .section-intro {
	margin-bottom: 0;
	text-align: center;
}

/* Editorial two-column block. The framing stays put on the left while
   the prose runs down the right, which is deliberately not the
   three-card grid this replaced: every service page already carries its
   own process section, so a fourth one here made the About page read
   like a service page. This is about standards rather than steps, so it
   runs as continuous prose. Left unpainted to keep the alternating band
   going down the page. */
.about-standards {
	padding: 80px 0;
}

.about-standards-inner {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 64px;
	align-items: start;
}

.about-standards-aside h2 {
	font-size: 32px;
	margin: 8px 0 16px;
}

.about-standards-standfirst {
	color: var(--rc-slate);
	font-size: 17px;
	line-height: 1.6;
}

/* Holds the same measure the rest of the page reads at, so the wider
   grid does not stretch lines past comfortable. */
.about-standards-body {
	max-width: 640px;
}

.about-standards-body p {
	margin-bottom: 20px;
}

.pull-quote {
	border-left: 3px solid var(--rc-green);
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	font-size: 21px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--rc-navy);
}

@media (max-width: 900px) {
	.about-standards-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.about-tools {
	padding: 80px 0;
}

/* Chips rather than another bulleted column - the page already has one
   in Core skills, and repeating the format makes the two read as the
   same list twice. */
.tools-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tools-list li {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	color: var(--rc-navy);
}

.certifications {
	padding: 80px 0;
	background: var(--rc-off-white);
}

.certifications h2 {
	font-size: 32px;
	margin-bottom: 8px;
}

.cert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.cert-card {
	background: white;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.cert-issuer {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--rc-green);
	margin-bottom: 10px;
}

.cert-card h3 {
	font-size: 16px;
	margin: 0 0 8px;
	line-height: 1.4;
}

.cert-date {
	display: block;
	font-size: 13px;
	color: var(--rc-slate);
}

.cert-verify {
	display: inline-block;
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	color: var(--rc-navy);
	font-weight: 500;
	text-decoration: none;
}

.cert-verify:hover {
	text-decoration: underline;
}

.about-cta {
	padding: 80px 0;
	text-align: center;
}

/* Used where the closing CTA needs to be the shaded half of the page's
   alternation. .final-cta already paints this way on the front page,
   but it also resizes the heading, so this carries the background on
   its own. */
/* Unpainted, sitting between the off-white process band and the
   off-white local note. Reuses .services-grid and .service-card rather
   than inventing a card: those already carry the single column cap and
   centring, so the price cards inherit the responsive behaviour instead
   of repeating the same mistakes. */
.not-a-fit {
	background: var(--rc-off-white);
	padding: 80px 0;
}

/* Capped because .service-overview-inner is 760px, which at body size
   runs these to about 100 characters a line. The heading and intro can
   take that width; four paragraphs of reasoning cannot. */
.not-a-fit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 620px;
}

.not-a-fit-list li {
	padding: 20px 0;
	border-top: 1px solid var(--rc-border);
	color: var(--rc-slate);
}

.not-a-fit-list li:last-child {
	border-bottom: 1px solid var(--rc-border);
}

/* The refusal is the point of each line, so it leads and the reasoning
   follows underneath rather than sharing the sentence. */
.not-a-fit-list strong {
	display: block;
	margin-bottom: 6px;
	color: var(--rc-navy);
	font-weight: 700;
}

.pricing {
	padding: 80px 0;
}

.price-figure {
	display: block;
	margin-bottom: 4px;
	color: var(--rc-green);
	font-size: 26px;
	font-weight: 700;
}

/* Used either side of the figure: "Starts at" before it, "/ month"
   after. Small and quiet on purpose, so the number is what the eye
   lands on rather than the qualifier competing with it. */
.price-unit {
	color: var(--rc-slate);
	font-size: 15px;
	font-weight: 500;
}

/* Left aligned rather than centred: the hosting line runs to three
   lines and centred prose that long is hard to track back to. Held to
   560px for the same reason every other body block on this site is. */
/* A bordered box rather than a banner. Two sections below this the
   page says it is probably not the right fit for anyone shopping on
   price; a coloured sale ribbon directly above that would argue with
   it. This gives the offer enough weight to be seen without switching
   the page into the language of a discount. */
.pricing-offer {
	max-width: 560px;
	margin: 40px auto 0;
	padding: 24px 28px;
	border: 1px solid var(--rc-border);
	border-radius: 12px;
	background: var(--rc-off-white);
	color: var(--rc-slate);
	font-size: 15px;
	line-height: 1.6;
}

.pricing-offer p {
	margin: 0;
}

.pricing-offer strong {
	color: var(--rc-navy);
	font-weight: 700;
}

.pricing-notes {
	max-width: 560px;
	margin: 24px auto 0;
	color: var(--rc-slate);
	font-size: 15px;
	line-height: 1.6;
}

.pricing-notes p {
	margin: 0 0 12px;
}

.pricing-notes p:last-child {
	margin-bottom: 0;
}

.pricing-notes strong {
	color: var(--rc-navy);
	font-weight: 700;
}

.about-cta--shaded {
	background: var(--rc-off-white);
}

.about-cta h2 {
	font-size: 32px;
	margin-bottom: 24px;
}

.about-cta-buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.btn-secondary-dark {
	background: transparent;
	color: var(--rc-navy);
	border: 1.5px solid var(--rc-navy);
}

/* Mobile nav: the header row (logo + 6 nav links + CTA button) has no
   room to breathe below ~900px, so it collapses into a hamburger toggle. */
@media (max-width: 900px) {
	.nav-toggle {
		display: flex;
	}

	.header-nav-wrap {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		background: var(--rc-navy);
		padding: 24px;
		border-top: 1px solid rgba(244, 246, 249, 0.15);
		overflow-y: auto;
	}

	.header-nav-wrap.is-open {
		display: flex;
	}

	.nav-menu {
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}

	/* The hero's text column shares row space with hero-visual up to
	   768px, leaving hero-cta's two buttons with zero breathing room
	   between ~769-900px, right where the nav has already gone to a
	   hamburger. Stack it at the same breakpoint so the two switch to
	   "mobile" together instead of one lagging the other. */
	.hero-inner,
	.service-hero-inner {
		flex-direction: column;
	}

	/* Stacked, the drawing would otherwise run the full column width
	   and push the buttons a screen and a half down. */
	.service-hero-visual {
		max-width: 360px;
		width: 100%;
	}

	/* Same story as .hero-inner above: the 4-column footer (brand,
	   Services, Company, Get Started) doesn't drop to 2 columns until
	   768px, so 769-900px squeezes each nav column to ~145px, wrapping
	   "WordPress Development" and "SEO and Local Search" to 2 lines
	   while their neighbors stay on 1, an uneven, cramped-looking mix. */
	.footer-columns {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 40px;
	}

	.footer-brand {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Same 769-900px squeeze as above: these grids stayed 3-column
	   past the point the nav/hero/footer already went mobile,
	   producing a half-migrated layout in that band. */
	.services-grid, .steps-grid {
		grid-template-columns: 1fr;
	}

	/* Going to one column let the card text run to roughly 104 characters
	   at 900px and 84 at 768, both past a readable measure. Capping and
	   centring fixes it without a two-column step, which would leave the
	   third card of these three-item grids stranded on its own row. */
	.services-grid, .steps-grid {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.skills-list {
		grid-template-columns: 1fr;
	}

	.cert-grid {
		grid-template-columns: 1fr;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.hero-cta,
	.about-cta-buttons,
	.case-study-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta .btn,
	.about-cta-buttons .btn,
	.case-study-cta .btn,
	.case-study-cta .link-arrow {
		text-align: center;
	}

	.stat-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 24px;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.about-preview-inner {
		flex-direction: column;
		text-align: center;
	}

	.portfolio-grid {
		grid-template-columns: 1fr;
	}

	.contact-page-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.about-hero-inner {
		flex-direction: column;
		text-align: center;
	}

	/* The front page dropped to 32px here and nothing else did, so a
	   40px h1 was still 40px on a 375px screen and ran to five lines.
	   Every hero heading now steps to the same size at the same
	   width. */
	.hero-text h1,
	.about-hero h1,
	.service-hero h1,
	.case-study-hero h1,
	.single-post-header h1,
	.contact-intro h1,
	.legal-page h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 26px;
	}
}