/*
Theme Name: SEOWard
Theme URI:
Author: SEOWard
Author URI:
Description: A native WordPress block theme for SEOWard. Every brand decision (colour, type, spacing) lives in theme.json, so the theme can be copied and re-skinned for a client build by editing that one file. Sections are registered patterns, so pages stay editable from the block editor without touching code.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seoward-site
Tags: full-site-editing, block-patterns, blog, business, one-column, accessibility-ready, custom-colors, custom-logo, wide-blocks
*/

/* -------------------------------------------------------------------------
   This file holds only mechanism CSS - behaviour that block supports cannot
   express (sticky header, the hero grid-paper texture, the FAQ +/- marker,
   Gravity Forms integration). Every colour, size and space below resolves to
   a theme.json preset variable, so re-skinning a fork means editing
   theme.json and nothing else.
   ---------------------------------------------------------------------- */

/* --- Accessibility ------------------------------------------------------ */

/* Visually hidden, still read by screen readers. Used by the new-tab note
   and core's own labels. Keep on any CSS optimiser's never-strip list. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 22px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

:where(a, button, input, textarea, select, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Dark bands need the brighter logo orange for a visible focus ring. */
.has-contrast-background-color :where(a, button, input, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

@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;
	}
}

html {
	scroll-behavior: smooth;

	/* Lets the hero rings bleed past their column without producing a
	   horizontal scrollbar. `clip` rather than `hidden` on purpose: `hidden`
	   makes this a scroll container and silently kills position: sticky on
	   the header. */
	overflow-x: clip;
}

/* Sticky header must not cover the target of an in-page anchor link. */
:target {
	scroll-margin-top: 96px;
}

/* --- Section stacking ---------------------------------------------------
   WordPress applies --wp--style--block-gap as margin-block-start between
   siblings at two levels, and both show the page background as a stripe
   between coloured bands, breaking the design's colour blocking:

     1. .wp-site-blocks - between header, main and footer.
     2. post-content    - between the stacked page sections.

   The shell (1) is always flush: vertical rhythm comes from each section's
   own padding, never from a gap between them. Inside the content (2) the gap
   is collapsed only where two full-width sections meet, so ordinary blocks
   the client inserts between sections still get their normal spacing.
   ---------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull,
.block-editor-block-list__layout > .alignfull + .alignfull {
	margin-block-start: 0;
}

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

.sw-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Logged in, the fixed admin bar covers the top of the page, so the sticky
   header must pin below it or editors see it slide underneath. Core
   publishes the bar's height (32px, 46px on small screens) as a variable. */
.admin-bar .sw-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@supports (backdrop-filter: blur(6px)) {
	.sw-header {
		backdrop-filter: blur(6px);
	}

	/* backdrop-filter makes the header a containing block for any
	   position: fixed descendant. Core's mobile menu overlay is
	   `position: fixed; inset: 0`, so with the blur applied it gets confined
	   to the header box instead of covering the viewport: the first link shows
	   and the rest paint underneath the page content, invisible and
	   unclickable. Drop the blur while the menu is open. There is nothing to
	   blur at that point, because the overlay is opaque. */
	.sw-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
		backdrop-filter: none;
	}
}

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

/* Nav links sit in ink, not link-rust, until hovered. */
.sw-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}

.sw-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The phone number reads as a mono utility, not a nav item. */
.sw-phone a,
.sw-phone .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0.02em;
}

/* --- Navigation submenu -------------------------------------------------
   Core's default submenu is a rounded white box with its own borders. Square
   it off and put it in the theme's hairline language so the dropdown looks
   like part of the site rather than part of WordPress.
   ---------------------------------------------------------------------- */

.sw-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	box-shadow: 0 12px 28px rgba(18, 17, 16, 0.07);
	min-width: 260px;
	padding: var(--wp--preset--spacing--20) 0;
}

.sw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	padding: 0.5rem var(--wp--preset--spacing--50);
	text-decoration: none;
	width: 100%;
}

.sw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* The parent item's chevron should not drift from its label. */
.sw-header .wp-block-navigation-submenu__toggle {
	padding-right: 0;
}

/* --- Hero grid-paper texture -------------------------------------------- */

.sw-gridpaper {
	background-image:
		linear-gradient(var(--wp--preset--color--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--line) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center top;
}

/* --- Hero mark animation ------------------------------------------------
   The lifebuoy rebuilt as geometry rather than an image: four sonar rings
   pulsing outward, a slowly rotating dashed orbit, and the ring itself drawn
   from four clipped quadrants. It is decorative, so it is aria-hidden and it
   stops entirely under prefers-reduced-motion (handled globally above).
   ---------------------------------------------------------------------- */

@keyframes sw-sonar {
	0%   { transform: scale(0.34); opacity: 0; }
	12%  { opacity: 0.85; }
	100% { transform: scale(1.6); opacity: 0; }
}

@keyframes sw-spin {
	to { transform: rotate(360deg); }
}

.sw-heromark {
	--sw-sonar: 400px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 46vh, 420px);

	/* Deliberately NOT clipped. The rings expand to 1.6x, which is wider than
	   the column they sit in, and the whole point is that they carry past its
	   edge. Page-level containment is handled once on <html> below. */
	overflow: visible;
}

.sw-heromark__sonar {
	position: absolute;
	width: var(--sw-sonar);
	height: var(--sw-sonar);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	opacity: 0;
	animation: sw-sonar 5.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.sw-heromark__sonar:nth-child(2) { animation-delay: 1.3s; }
.sw-heromark__sonar:nth-child(3) { animation-delay: 2.6s; }
.sw-heromark__sonar:nth-child(4) { animation-delay: 3.9s; }

.sw-heromark__core {
	position: relative;
	width: 196px;
	height: 196px;
}

.sw-heromark__orbit {
	position: absolute;
	inset: -34px;
	border: 1px dashed var(--wp--custom--hairline--orbit);
	border-radius: 50%;
	animation: sw-spin 24s linear infinite;
}

.sw-heromark__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
}

/* Each quadrant is a full ring clipped to a wedge, which is what gives the
   buoy its four painted segments without four separate arc paths. */
.sw-heromark__seg {
	position: absolute;
	inset: 0;
	border: 13px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	clip-path: polygon(50% 50%, 100% 13%, 100% 87%);
}

.sw-heromark__seg:nth-child(1) { transform: rotate(45deg); }
.sw-heromark__seg:nth-child(2) { transform: rotate(135deg); }
.sw-heromark__seg:nth-child(3) { transform: rotate(225deg); }
.sw-heromark__seg:nth-child(4) { transform: rotate(315deg); }

.sw-heromark__hub {
	position: absolute;
	inset: 44px;
	background-color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
}

@media (max-width: 600px) {
	.sw-heromark { --sw-sonar: 300px; }
	.sw-heromark__core { width: 150px; height: 150px; }
	.sw-heromark__hub { inset: 34px; }
	.sw-heromark__seg { border-width: 10px; }
}

/* --- Hairline card grids ------------------------------------------------
   The grid container carries the hairline colour and a 1px gap, so the gaps
   themselves draw the rules. Children just need their own background.
   ---------------------------------------------------------------------- */

.sw-hairline-grid {
	border: 1px solid var(--wp--preset--color--line);
	padding: 0;
}

.sw-hairline-grid.has-ink-line-background-color {
	border-color: var(--wp--preset--color--ink-line);
}

/* Cards lift slightly on hover where the design calls for it.
   !important is required throughout the hover states below: WordPress emits
   its preset utilities (.has-*-color, .has-*-background-color) with
   !important, so any hover override of a preset-coloured element loses
   without it. */
.sw-card {
	transition: background-color 120ms ease;
}

.sw-card:hover {
	background-color: var(--wp--custom--hover--card) !important;
}

/* --- Registered block styles -------------------------------------------- */

/* core/list - "Spec list" */
.wp-block-list.is-style-spec {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-muted);
}

.has-contrast-background-color .wp-block-list.is-style-spec {
	color: var(--wp--preset--color--on-dark);
}

/* core/group - "Numbered step" */
.wp-block-group.is-style-step {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: 22px;
}

/* --- Comparison table ---------------------------------------------------
   core/table with the registered "Comparison table" block style. Using a real
   table keeps it semantic and lets the client edit it like a spreadsheet.
   ---------------------------------------------------------------------- */

.wp-block-table.is-style-compare {
	margin: 0;
}

.wp-block-table.is-style-compare table {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-compare thead {
	/* Core draws a 3px rule under the head. The design puts the single dark
	   rule on TOP of the whole block instead, with hairlines between rows. */
	border-bottom: 0;
}

.wp-block-table.is-style-compare :where(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: baseline;
}

.wp-block-table.is-style-compare thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	padding: 20px 0;
}

.wp-block-table.is-style-compare thead th:last-child {
	color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-compare tbody td {
	padding: 22px 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-muted);
}

.wp-block-table.is-style-compare tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	width: 210px;
}

.wp-block-table.is-style-compare tbody td:last-child {
	color: var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-compare :where(th, td) + :where(th, td) {
	padding-left: clamp(14px, 2vw, 32px);
}

@media (max-width: 600px) {
	.wp-block-table.is-style-compare tbody td:first-child {
		width: auto;
	}
	.wp-block-table.is-style-compare :where(th, td) {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- FAQ (core/details) ------------------------------------------------- */

.sw-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 24px 0;
}

.sw-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sw-faq .wp-block-details summary::-webkit-details-marker,
.sw-faq .wp-block-details summary::marker {
	display: none;
	content: "";
}

.sw-faq .wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	flex: none;
}

.sw-faq .wp-block-details[open] summary::after {
	content: "\2212"; /* minus */
}

.sw-faq .wp-block-details > *:not(summary) {
	margin-top: 14px;
	max-width: 70ch;
	color: var(--wp--preset--color--ink-soft);
	line-height: var(--wp--custom--line-height--relaxed);
}

/* --- Card links ---------------------------------------------------------
   A linked card title alone is not an obvious affordance, so cards that lead
   somewhere also carry a mono link. The whole card lightens on hover.
   ---------------------------------------------------------------------- */

.sw-card h3 a {
	color: inherit;
	text-decoration: none;
}

.sw-card:hover h3 a {
	color: var(--wp--preset--color--primary);
}

.sw-cardlink a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sw-card:hover .sw-cardlink a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Link index ---------------------------------------------------------
   The industries hub is a long list of links. A hairline-ruled grid reads as
   an index rather than as navigation, and stays scannable at 40+ entries.
   ---------------------------------------------------------------------- */

.sw-index__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 14px 0;
}

.sw-index__item a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}

.sw-index__item a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Measure ------------------------------------------------------------
   The design constrains individual headings and paragraphs by character
   count rather than by column. Block supports have no max-width control, so
   these are exposed as utility classes - pick one in the block's Advanced >
   Additional CSS class field.
   ---------------------------------------------------------------------- */

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

/* Slightly recede a label against a saturated band. */
.sw-dim {
	opacity: 0.72;
}

/* A text link that reads as a call to action without being a button. */
.sw-underline a {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 4px;
	text-decoration: none;
}

.sw-underline a:hover {
	border-bottom-color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sw-measure-13 { max-width: 13ch; }
.sw-measure-16 { max-width: 16ch; }
.sw-measure-18 { max-width: 18ch; }
.sw-measure-20 { max-width: 20ch; }
.sw-measure-22 { max-width: 22ch; }
.sw-measure-46 { max-width: 46ch; }
.sw-measure-52 { max-width: 52ch; }
.sw-measure-58 { max-width: 58ch; }
.sw-measure-60 { max-width: 60ch; }
.sw-measure-70 { max-width: 70ch; }

/* --- Media -------------------------------------------------------------- */

/* Portraits fill their column but must not dictate the section's height. The
   design has them stretch to the copy, not the other way round. Both are shot
   with the head about a tenth of the way down, so the crop is biased upward
   to keep the face in frame at every viewport. */
.sw-hero-media {
	height: 100%;
}

/* Qualified with .wp-block-image: core's own `.wp-block-image img` rule ties
   a bare `.sw-hero-media img` on specificity and wins on source order, so the
   height silently falls back to the image's natural ratio. */
.wp-block-image.sw-hero-media img {
	height: clamp(340px, 58vh, 620px);
	object-position: 50% 28%;
}

.wp-block-image.sw-about-media img {
	height: clamp(380px, 62vh, 660px);
	object-position: 50% 16%;
}

.sw-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Buttons ------------------------------------------------------------
   Core's is-style-outline sets its own padding (0.667em) at a specificity
   that beats theme.json, so an outline button renders ~10px shorter than a
   filled one sitting next to it. Restore the theme.json rhythm on both, then
   add the design's hover states - the filled ones deepen, the outline ones
   fill in.
   ---------------------------------------------------------------------- */

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.wp-block-button__link {
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

/* Outline buttons fill with ink on hover.
   The text colour needs !important: WordPress emits its preset colour
   utilities (.has-contrast-color) with !important, so a plain declaration
   here loses and the label stays ink-on-ink - invisible. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
}

/* The header CTA is already ink, so it fills rust instead. */
.sw-header .wp-block-button__link:hover,
.sw-header .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
}

/* On the rust band: the ink button deepens to true black, and the outline
   one veils rather than filling - an ink fill would fight the band. */
#audit .wp-block-button__link.has-contrast-background-color:hover,
#audit .wp-block-button__link.has-contrast-background-color:focus-visible {
	background-color: var(--wp--custom--hover--ink-deep) !important;
	border-color: var(--wp--custom--hover--ink-deep);
}

#audit .wp-block-button.is-style-outline > .wp-block-button__link:hover,
#audit .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--hover--veil) !important;
	border-color: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--shell) !important;
}

/* --- Gravity Forms -----------------------------------------------------
   GF 3.x (Orbital theme) is styled by a family of --gf-ctrl-* and --gf-color-*
   custom properties. Setting those is the upgrade-safe way to restyle it: GF
   can change its markup without breaking this.

   GF prints each form's own colour settings inline against the form's ID
   (#gform_wrapper_1), which outranks any class selector, so these carry
   !important. They are scoped to GF wrappers, so nothing else is touched,
   and they apply to every form on the site, including ones the client adds.
   ---------------------------------------------------------------------- */

.gform_wrapper.gform-theme {
	/* Brand colours. */
	--gf-color-primary: var(--wp--preset--color--primary) !important;
	--gf-color-primary-rgb: 184, 65, 14 !important;
	--gf-color-primary-contrast: var(--wp--preset--color--shell) !important;
	--gf-color-primary-darker: var(--wp--preset--color--primary-deep) !important;
	--gf-color-primary-lighter: var(--wp--preset--color--tint) !important;
	--gf-color-danger: var(--wp--preset--color--danger) !important;
	--gf-color-danger-rgb: 163, 54, 31 !important;

	/* Inputs: paper wells, a warm hairline, moss on focus. */
	--gf-ctrl-bg-color: var(--wp--preset--color--base) !important;
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--shell) !important;
	--gf-ctrl-border-color: var(--wp--preset--color--field-line) !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary) !important;
	--gf-ctrl-outline-color-focus: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent) !important;
	--gf-ctrl-outline-width-focus: 3px !important;
	--gf-ctrl-radius: var(--wp--custom--radius--field) !important;
	--gf-ctrl-color: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-color-focus: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-font-family: var(--wp--preset--font-family--body) !important;
	--gf-ctrl-font-size: var(--wp--preset--font-size--medium) !important;
	--gf-ctrl-size: 3.125rem !important;
	--gf-ctrl-padding-x: 1rem !important;
	--gf-ctrl-placeholder-color: var(--wp--preset--color--ink-muted) !important;
	--gf-ctrl-icon-color: var(--wp--preset--color--ink-muted) !important;

	/* Labels in the body face, not GF's own; "(Required)" quiet, not red. */
	--gf-ctrl-label-color-primary: var(--wp--preset--color--contrast) !important;
	--gf-ctrl-label-font-family-primary: var(--wp--preset--font-family--body) !important;
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--medium) !important;
	--gf-ctrl-label-font-weight-primary: 700 !important;
	--gf-ctrl-label-color-req: var(--wp--preset--color--ink-muted) !important;
	--gf-ctrl-label-font-family-req: var(--wp--preset--font-family--body) !important;
	--gf-ctrl-label-font-size-req: var(--wp--preset--font-size--small) !important;
	--gf-ctrl-label-font-weight-req: 400 !important;
	--gf-ctrl-desc-color: var(--wp--preset--color--ink-muted) !important;
	--gf-ctrl-desc-font-family: var(--wp--preset--font-family--body) !important;
	--gf-ctrl-desc-font-size: var(--wp--preset--font-size--small) !important;
	--gf-ctrl-desc-color-error: var(--wp--preset--color--danger) !important;

	/* The submit button matches the site's moss pill buttons. */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-deep) !important;
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--primary-deep) !important;
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary) !important;
	--gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--primary-deep) !important;
	--gf-ctrl-btn-border-color-focus-primary: var(--wp--preset--color--primary-deep) !important;
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--shell) !important;
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--shell) !important;
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--shell) !important;
	--gf-ctrl-btn-radius: var(--wp--custom--radius--button) !important;
	--gf-ctrl-btn-font-family: var(--wp--preset--font-family--body) !important;
	--gf-ctrl-btn-font-size: var(--wp--preset--font-size--medium) !important;
	--gf-ctrl-btn-font-weight: 600 !important;
	--gf-ctrl-btn-size: 3.25rem !important;

	/* Rhythm. */
	--gf-form-gap-y: 1.5rem !important;
	--gf-form-gap-x: 1.25rem !important;
	--gf-label-space-primary: 0.5rem !important;
	--gf-desc-space: 0.4rem !important;
}

/* Textareas: a sensible starting height, resizable downwards only. */
.gform_wrapper.gform-theme textarea {
	min-height: 9rem;
	resize: vertical;
}

/* The validation summary at the top reads as a calm notice, not an alarm. */
.gform_wrapper.gform-theme .gform_validation_errors {
	border-radius: var(--wp--custom--radius--field);
	box-shadow: none;
}

/* Thank-you message after sending. */
.gform_confirmation_message {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--tint);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--field);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.5;
}

/* A heading for the form card, if the client adds one above the form. */
.sw-form-card > .wp-block-heading:first-child {
	margin-top: 0;
}

/* Core's constrained layout gives EVERY child narrower than the content width
   `margin-left: auto !important; margin-right: auto !important`, which centres
   it. A measure class exists precisely to make an element narrower than its
   container, so the two combine to centre every constrained paragraph and
   heading that carries one, while the eyebrow and buttons beside it stay left.

   On the homepage this never showed, because those elements sit inside
   core/column, which is flow layout. The interior page sections put them
   directly inside a constrained group, so it appeared everywhere at once.

   The same auto margins bite a second way in any constrained group that has
   been turned into a flex column: in flexbox an auto cross-axis margin stops
   the item stretching and centres it at its content width instead, so the
   category card headings sat centred above left-aligned body copy.

   Core's rule is `.is-layout-constrained > :where(...)`, which is one class
   plus !important. These selectors tie it on specificity and win on source
   order, because the theme stylesheet is enqueued after the inline global
   styles.

   This must NOT be pointed at every constrained child. On a full-bleed
   section those same auto margins are what centre the 1280px content column,
   so zeroing them there drags the element out to the section edge instead.
   The section emitters solve that structurally, with an inner flow-layout
   group that takes the auto margins and becomes the column. What is left
   below are the containers that are already narrower than the content width,
   where the margins centre but position nothing. */
.sw-cat__body > *,
.sw-ctaband__copy > *,
.sw-emergency-band__copy > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* --- Interior service pages ---------------------------------------------
   Everything below serves the pages built by build/make-pages.php. The
   emitters in inc/service-blocks.php name these classes; keep the two in
   step.
   ---------------------------------------------------------------------- */

/* The interior hero reuses the homepage hero's photo and scrim mechanism via
   .sw-hero, so it only needs its own stacking context for the copy. */
.sw-page-hero__body {
	position: relative;
	z-index: 1;
}

/* Breadcrumb. The separators are the literal " / " in the text, so there is
   nothing to style but the emphasis on the current page. */
.sw-crumbs strong {
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.sw-crumbs a {
	color: inherit;
}

.sw-crumbs a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A chip on its own line has to shrink to its label rather than fill the
   column, which a block-level paragraph would do. */
.sw-chip--solo {
	display: inline-block;
	width: fit-content;
}

/* --- Hero "at a glance" panel -------------------------------------------
   An outlined box beside the headline carrying the two or three numbers a
   visitor wants before reading anything. Only some service pages use it,
   which is deliberate: four pages built from one skeleton need something to
   tell them apart.
   ---------------------------------------------------------------------- */

.sw-glance {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wp--custom--radius--panel);
	align-self: center;

	/* Same stacking context the hero copy gets. Without it the panel sits
	   under the scrim that ::after paints over the photo, and every value in
	   it renders washed out even though the colours are correct. */
	position: relative;
	z-index: 1;
}

/* The hero copy and the panel become a pair only when a panel is present.
   `:has()` keeps that decision in CSS rather than needing two hero emitters. */
.sw-page-hero .wp-block-group:has(> .sw-glance) {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	align-items: center;
}

@media (max-width: 781px) {
	.sw-page-hero .wp-block-group:has(> .sw-glance) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--80);
	}
}

/* --- Rule grid ----------------------------------------------------------
   Cards under a coloured rule with no box, so a page can carry two list
   sections without them reading as the same component twice. The rule and
   padding are block attributes; nothing needed here but the measure reset,
   which the shared rule above already covers.
   ---------------------------------------------------------------------- */

/* --- Note panel and related cards --------------------------------------- */

.sw-note-panel {
	border-radius: var(--wp--custom--radius--panel);
}

/* --- Before and after --------------------------------------------------- */

.wp-block-image.sw-ba-media img {
	height: clamp(240px, 34vh, 340px);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

/* --- Trust bar ---------------------------------------------------------- */

.sw-trustbar {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* --- What we offer ------------------------------------------------------ */

/* The intro column tracks the reader down the card stack. Sticky needs a top
   offset clear of the sticky header, and it must not apply once the columns
   have stacked or it pins the intro over the cards. */
@media (min-width: 782px) {
	.sw-sticky-col {
		position: sticky;
		top: 120px;
		align-self: start;
	}
}

.sw-offer {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
}

/* The card that leads to its own page is outlined in navy and lifts, so it
   reads as a destination rather than another description. */
.sw-offer--link {
	border-color: var(--wp--preset--color--primary);
	transition: transform 200ms ease;
}

.sw-offer--link:hover {
	transform: translateY(-3px);
}

.sw-offer__note {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Who turns up ------------------------------------------------------- */

.wp-block-image.sw-team-media img {
	height: clamp(340px, 56vh, 520px);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--panel);
}

.sw-pullquote {
	border-radius: var(--wp--custom--radius--card);
}

/* --- Recent work gallery ------------------------------------------------
   A feature tile beside two stacked, then a row of three. Grid rather than
   columns because the feature tile spans two rows, which a column layout
   cannot express.
   ---------------------------------------------------------------------- */

.sw-gallery {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: 230px 230px;
	gap: var(--wp--preset--spacing--50);
}

.sw-gallery > .sw-gallery__item:first-child {
	grid-row: span 2;
}

.sw-gallery--row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 200px;
}

.sw-gallery--row > .sw-gallery__item:first-child {
	grid-row: auto;
}

.sw-gallery__item {
	margin: 0;
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-image.sw-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

@media (max-width: 781px) {
	.sw-gallery,
	.sw-gallery--row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.sw-gallery > .sw-gallery__item:first-child {
		grid-row: auto;
	}

	.sw-gallery__item {
		height: 220px;
	}
}

/* --- Service category cards --------------------------------------------- */

.sw-cat {
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.sw-cat__media {
	margin: 0;
}

.sw-cat__media img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 0;
}

/* The body grows so every card's read-more line sits on the same baseline
   however long the description runs. */
.sw-cat__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sw-cat .sw-cardlink {
	margin-top: auto;
}

/* The chips naming what a category covers. */
.sw-tag {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 15px;
}

/* --- Urgent work band --------------------------------------------------- */

.sw-emergency-band {
	border-radius: var(--wp--custom--radius--panel);
}

/* The copy has to be allowed to share the row, or it takes the full width of
   the flex line and pushes the phone button onto its own row underneath. The
   design has them side by side, with the button vertically centred against the
   heading. The basis is the point below which they should stack. */
.sw-emergency-band__copy {
	flex: 1 1 30rem;
}

/* --- How we work steps -------------------------------------------------- */

.sw-step {
	border-top-style: solid;
}

/* --- Closing call to action --------------------------------------------- */

.sw-ctaband__copy {
	flex: 1 1 420px;
}

/* The two buttons stack rather than sitting side by side, which is what the
   design does and what keeps them the same width. */
.sw-btn-stack {
	flex-direction: column;
	align-items: stretch;
}

.sw-btn-stack .wp-block-button__link {
	display: block;
	text-align: center;
}

@media (max-width: 781px) {
	.sw-ctaband {
		padding: var(--wp--preset--spacing--80) !important;
	}
}

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

@media print {
	.sw-header,
	.sw-form,
	.wp-block-navigation {
		display: none !important;
	}
}

/* =========================================================================
   Membership association sections (from the LADUCA build)
   Everything below resolves to theme.json presets. Corner radii come from
   --wp--custom--radius--*, so a fork changes the shape language in one place.
   ========================================================================= */

/* --- Shared ------------------------------------------------------------- */

/* Paragraph style "Section label": small capitals with a short rule. */
p.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-text);
}

p.is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--primary);
}

p.is-style-eyebrow.has-text-align-center {
	justify-content: center;
}

.sw-dark p.is-style-eyebrow {
	color: var(--wp--preset--color--brand);
}

.sw-dark p.is-style-eyebrow::before {
	background: var(--wp--preset--color--brand);
}

/* Group style "Leaf corners": top left and bottom right rounded. */
.wp-block-group.is-style-leaf {
	border-radius: var(--wp--custom--radius--leaf) 0 var(--wp--custom--radius--leaf) 0;
	overflow: hidden;
}

/* Text links that act as a call to action read heavier than body links. */
.sw-textlink a,
.sw-textlinks a,
.sw-event__link a {
	font-weight: 600;
}

/* Two-column sections: a wider gutter than core's 2em, and no trailing
   margin under the columns block. */
.wp-block-columns.sw-split,
.wp-block-columns.sw-about__intro {
	gap: clamp(2.5rem, 6vw, 6rem);
	margin-bottom: 0;
}

/* The heading row above a card grid caps its copy so the link can sit at
   the right on the same baseline. */
.sw-headrow__copy {
	max-width: 680px;
}

/* On navy, headings go white and plain links go pale. Buttons keep their
   own colours, and the white portal card keeps ink. */
.sw-dark :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--on-dark-strong);
}

.sw-dark a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-dark);
}

.sw-dark a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--shell);
}

.sw-dark :where(a, button, input, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

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

.sw-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--shell);
}

.sw-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.sw-dark .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--hover--veil);
	border-color: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--shell) !important;
}

/* A navy button deepens rather than turning red on hover. */
.wp-block-button__link.has-band-background-color:hover,
.wp-block-button__link.has-band-background-color:focus-visible {
	background-color: var(--wp--custom--hover--ink-deep) !important;
}

/* --- Hero: photo with overlapping panels -------------------------------- */

.sw-loginhero {
	padding-inline: clamp(0px, 2vw, 24px);
}

.sw-loginhero .sw-loginhero__photo {
	margin: 0;
}

.wp-block-image.sw-loginhero__photo img {
	display: block;
	width: 100%;
	height: clamp(260px, 34vw, 500px);
	object-fit: cover;
	object-position: center 55%;
	border-radius: 0 0 var(--wp--custom--radius--leaf) var(--wp--custom--radius--leaf);
}

.wp-block-columns.sw-loginhero__panels {
	position: relative;
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	margin: clamp(-200px, -12vw, -60px) auto 0;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start !important;
}

/* Two equal halves, as in the design: the intro takes one, and the login card
   sits at the far end of the other. Core's flex rules zero the card's margin,
   hence the extra specificity on margin-top. */
@media (min-width: 782px) {
	.wp-block-columns.sw-loginhero__panels > .sw-loginhero__intro {
		box-sizing: border-box;
		flex: 0 1 calc(50% - var(--wp--preset--spacing--50) / 2);
	}

	.wp-block-columns.sw-loginhero__panels > .sw-loginhero__login {
		margin-top: clamp(0px, 4vw, 56px);
		margin-left: auto;
	}
}

.sw-loginhero__intro {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--leaf) 0 0 0;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px) var(--wp--preset--spacing--50);
}

.sw-loginhero__login {
	box-sizing: border-box;
	max-width: 460px;
	padding: clamp(28px, 4vw, 44px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0 var(--wp--custom--radius--leaf) 0 0;
}

@media (max-width: 781px) {
	.sw-loginhero__login {
		max-width: none;
		margin-top: 0;
		border-radius: 0;
	}
}

/* Core's Login/out block, shown as a form. */
.sw-login form > p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.sw-login label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.sw-login input.input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--field-line);
	border-radius: var(--wp--custom--radius--field);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.sw-login input.input:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.sw-login .login-remember {
	display: none;
}

.sw-login form > p.login-submit {
	margin-bottom: 0;
}

.sw-login input[type="submit"] {
	width: 100%;
	min-height: 50px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--shell);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sw-login input[type="submit"]:hover,
.sw-login input[type="submit"]:focus-visible {
	background: var(--wp--custom--hover--ink-deep);
}

/* --- About: icon pillars ------------------------------------------------ */

.sw-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-text);
}

/* --- Ticked list -------------------------------------------------------- */

.sw-checklist {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-checklist li {
	position: relative;
	padding-left: 38px;
}

.sw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 24px;
	height: 24px;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.sw-checklist strong {
	font-weight: 600;
}

.sw-dark .sw-checklist li::before {
	background: var(--wp--preset--color--brand);
}

.sw-dark .sw-checklist strong {
	color: var(--wp--preset--color--on-dark-strong);
}

/* --- Portal preview card ------------------------------------------------ */

.sw-portal {
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border-radius: 0 var(--wp--custom--radius--leaf) 0 var(--wp--custom--radius--leaf);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.sw-portal p {
	margin: 0;
}

.sw-portal__top {
	gap: 12px;
	padding: 20px 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-portal__hello {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
}

.sw-portal__tabs {
	row-gap: 4px;
	padding: 0 28px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.sw-portal__tabs p {
	padding: 14px 0;
	border-bottom: 2px solid transparent;
}

.sw-portal__tabs p.is-active {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.sw-portal__body {
	padding: var(--wp--preset--spacing--50) 28px 28px;
}

.sw-portal__next {
	padding: 18px;
	border-radius: var(--wp--custom--radius--badge);
	background: var(--wp--preset--color--surface);
}

.sw-portal__event {
	min-width: 0;
}

.sw-portal__status {
	margin-left: auto !important;
	color: var(--wp--preset--color--success);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.sw-label {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sw-files > .sw-label {
	margin-bottom: 10px !important;
}

.sw-file {
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-file:last-child {
	border-bottom: 0;
}

.sw-file > p:first-child {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sw-file > p:first-child::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--ink-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.sw-file__type {
	flex: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

/* --- Chips and date badges ---------------------------------------------- */

p.sw-pill {
	flex: none;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1.4;
}

p.sw-pill--ok {
	background: var(--wp--preset--color--success-tint);
	color: var(--wp--preset--color--success);
}

.sw-datebadge {
	flex: none;
	overflow: hidden;
	width: 64px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--button);
	text-align: center;
}

.sw-datebadge p {
	margin: 0;
}

.sw-datebadge__mon {
	padding: 3px 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--shell);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.4;
}

.sw-datebadge__day {
	padding: 4px 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.625rem;
	line-height: 1.3;
}

/* --- Numbered steps ----------------------------------------------------- */

.sw-vstep {
	position: relative;
}

.sw-vstep:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--line);
}

p.sw-vstep__num {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--primary-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
}

.sw-vstep__body {
	padding: 8px 0 40px;
}

.sw-vstep:last-child .sw-vstep__body {
	padding-bottom: 0;
}

/* --- Card grids --------------------------------------------------------- */

.sw-event {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--wp--preset--color--base);
	border-radius: 0 var(--wp--custom--radius--card) 0 var(--wp--custom--radius--card);
}

.sw-event__top {
	gap: 12px;
}

.sw-event .sw-datebadge {
	width: 68px;
}

.sw-event .sw-datebadge__mon {
	padding: 4px 0;
}

.sw-event .sw-datebadge__day {
	padding: 6px 0;
	font-size: 1.75rem;
}

.sw-meta {
	display: grid;
	gap: 4px;
	font-size: var(--wp--preset--font-size--small);
}

.sw-meta p {
	margin: 0;
}

.sw-meta__key {
	display: inline-block;
	min-width: 4.5rem;
	color: var(--wp--preset--color--ink-muted);
}

/* The link sits on the card's bottom edge whatever the title length. */
.sw-event__link {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--40);
}

.sw-person {
	padding: 22px;
	background: var(--wp--preset--color--base);
	border-radius: 0 var(--wp--custom--radius--panel) 0 var(--wp--custom--radius--panel);
}

p.sw-person__initials {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0;
	background: var(--wp--preset--color--band);
	border-radius: 0 var(--wp--custom--radius--panel) 0 var(--wp--custom--radius--panel);
	color: var(--wp--preset--color--shell);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
}

.sw-person__text {
	min-width: 0;
}

.sw-person__text h3 {
	font-size: 1.25rem;
}

.sw-person__org {
	color: var(--wp--preset--color--primary-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* --- Photo with leaf corners and the price row -------------------------- */

.wp-block-image.sw-media-leaf {
	margin: 0;
}

.wp-block-image.sw-media-leaf img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--leaf) 0 var(--wp--custom--radius--leaf) 0;
}

.sw-fees {
	column-gap: 48px !important;
	padding: var(--wp--preset--spacing--50) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-fee p {
	margin: 0;
}

.sw-fee__figure {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--price);
	line-height: 1.1;
}

p.sw-fees__note {
	flex-basis: 100%;
	margin: 0;
}

/* --- Sponsor logos ------------------------------------------------------ */

.sw-logos {
	row-gap: var(--wp--preset--spacing--40) !important;
}

.wp-block-image.sw-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180px;
	height: 96px;
	margin: 0;
}

.wp-block-image.sw-logo-item img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 60px;
}

/* --- Closing call to action --------------------------------------------- */

.sw-cta__panel {
	align-items: center;
	padding: clamp(40px, 6vw, 80px);
}

.sw-cta__copy {
	max-width: 680px;
}


/* =========================================================================
   Natural history archive sections (from the NZ Mollusca build)
   Specimen hero with a scale bar, field notes, factsheet contents cards,
   species spotlight with a specimen-label table, plate gallery, researcher
   cards and take-part panels. Scroll-driven motion is progressive: browsers
   without animation-timeline get the static page.
   ========================================================================= */

/* --- Typography and page-level niceties ---------------------------------- */

@view-transition {
	navigation: auto;
}

:where(h1, h2, h3, .wp-block-heading) {
	text-wrap: balance;
	font-optical-sizing: auto;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}

/* Species names are italic by convention; Fraunces' true italic carries it. */
:where(h1, h2, h3) em {
	font-style: italic;
	font-weight: inherit;
}

::selection {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

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

/* Outline buttons on paper read in moss, then fill moss on hover. The
   padding matches theme.json's filled button, so a pair lines up. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.95rem 1.6rem;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-deep);
}

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--shell) !important;
}

.sw-btn-amber > .wp-block-button__link:hover,
.sw-btn-amber > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--shell) !important;
	color: var(--wp--preset--color--contrast) !important;
}

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

.sw-hero {
	position: relative;
	overflow: clip;
	background-image:
		radial-gradient(ellipse 55% 70% at 78% 50%, color-mix(in srgb, var(--wp--preset--color--brand) 13%, transparent), transparent 70%);
}

.sw-hero__title {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.sw-hero__meta {
	margin-top: var(--wp--preset--spacing--60);
}

.sw-specimen {
	position: relative;
	max-width: 500px;
	margin-inline: auto;
}

.sw-specimen .sw-specimen__photo {
	margin: 0;
}

.sw-specimen__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	background: var(--wp--preset--color--specimen);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 40%, transparent);
	outline-offset: 14px;
	box-shadow: var(--wp--custom--shadow--plate);
}

.sw-specimen__photo figcaption {
	margin-top: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: center;
}

/* The scale bar covers the photo's square and sits in its bottom-right
   corner, outside the round crop. --sw-scale is 1 mm as a share of the
   photo's width, measured from the original scale bar. */
.sw-scalebar {
	position: absolute;
	inset: 0 0 auto 0;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 6px;
	pointer-events: none;
}

.sw-scalebar__bar {
	width: var(--sw-scale, 20%);
	height: 2px;
	background: var(--wp--preset--color--on-dark-strong);
	box-shadow:
		inset 2px 0 0 var(--wp--preset--color--on-dark-strong),
		inset -2px 0 0 var(--wp--preset--color--on-dark-strong);
	position: relative;
}

.sw-scalebar__bar::before,
.sw-scalebar__bar::after {
	content: "";
	position: absolute;
	top: -4px;
	width: 2px;
	height: 10px;
	background: var(--wp--preset--color--on-dark-strong);
}

.sw-scalebar__bar::before { left: 0; }
.sw-scalebar__bar::after { right: 0; }

.sw-scalebar__label {
	order: -1;
	color: var(--wp--preset--color--on-dark-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* The shell turns a little as the page scrolls, like a specimen on a stage. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.sw-specimen__photo img {
			animation: sw-turn linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100vh;
		}
	}
}

@keyframes sw-turn {
	to { rotate: 35deg; }
}

@media (max-width: 781px) {
	.sw-specimen {
		max-width: 340px;
	}
}

/* --- Field notes ---------------------------------------------------------- */

.wp-block-columns.sw-fieldnotes__cols {
	margin-bottom: 0;
}

.sw-fieldnote {
	border-top: 1px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--40);
}

.sw-fieldnote > p {
	margin-block: 0;
}

.sw-fieldnote__figure {
	margin-bottom: var(--wp--preset--spacing--30) !important;
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--figure);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

/* --- Numbered factsheet contents ------------------------------------------ */

.sw-numbered {
	border-top: 2px solid var(--wp--preset--color--brand);
	padding-top: var(--wp--preset--spacing--50);
}

.sw-numbered > * {
	margin-block: 0;
}

.sw-numbered > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* --- Species spotlight ---------------------------------------------------- */

.sw-plate img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--specimen);
	box-shadow: var(--wp--custom--shadow--plate);
}

.sw-plate figcaption {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.sw-binomial {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.sw-binomial em {
	font-weight: 400;
}

.sw-authority {
	display: inline-block;
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: 0;
}

/* Table style "Specimen label": a museum label with ruled rows. */
.wp-block-table.is-style-label {
	margin-block: var(--wp--preset--spacing--60) 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--field-line);
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-table.is-style-label table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.is-style-label td {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 0.7rem 0;
	vertical-align: top;
}

.wp-block-table.is-style-label tr:first-child td {
	border-top: 0;
}

.wp-block-table.is-style-label td:first-child {
	width: 32%;
	padding-right: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
}

/* --- Plate gallery -------------------------------------------------------- */

.sw-plates__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.sw-plates__row > .wp-block-image {
	margin: 0;
}

.sw-plate-card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--shell);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--plate);
}

.sw-plate-card img {
	display: block;
	width: 100%;
	height: clamp(260px, 30vw, 400px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

.sw-plate-card figcaption {
	margin: var(--wp--preset--spacing--40) 0 0;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.sw-plate-card figcaption strong {
	color: var(--wp--preset--color--contrast);
}

/* On phones the plates become a swipeable row with the next one peeking. */
@media (max-width: 781px) {
	.sw-plates__row {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--ink-line) transparent;
		padding-bottom: var(--wp--preset--spacing--30);
	}

	.sw-plates__row > .sw-plate-card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

/* --- Researchers ---------------------------------------------------------- */

.wp-block-columns.sw-people__cols {
	margin-bottom: 0;
}

.wp-block-columns.sw-people__cols > .wp-block-column {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--panel);
}

.sw-person {
	background: var(--wp--preset--color--shell);
	border: 1px solid var(--wp--preset--color--line);
}

.sw-person > *,
.sw-paper-card > * {
	margin-block: 0;
}

.sw-person > * + *,
.sw-paper-card > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

.sw-person__initials {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--wp--preset--spacing--50) !important;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: 0.04em;
}

.sw-person__role,
.sw-paper-card__label {
	font-weight: 600;
}

.sw-paper-card {
	background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent), transparent 55%);
}

.sw-paper-card .sw-textlink {
	margin-top: var(--wp--preset--spacing--50) !important;
}

.sw-dark .sw-textlink a {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Take part ------------------------------------------------------------ */

.wp-block-columns.sw-takepart__cols {
	margin-bottom: 0;
}

.wp-block-columns.sw-takepart__cols > .sw-panel {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
}

.sw-panel > * {
	margin-block: 0;
}

.sw-panel > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.sw-panel > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50);
}

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

.sw-footer__head {
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--on-dark-strong);
	font-weight: 700;
}

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

.sw-footer__list li + li {
	margin-top: 0.55rem;
}

.sw-footer__logo img {
	height: auto;
}

.sw-footer__base p {
	margin: 0;
}

/* --- Scroll reveal --------------------------------------------------------
   Cards rise into place as they enter the viewport. Pure CSS: no observer
   script, nothing to fail, and nothing at all under reduced motion.
   ---------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sw-fieldnote,
		.sw-numbered,
		.sw-plate-card,
		.sw-person,
		.sw-paper-card,
		.sw-panel {
			animation: sw-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}
	}
}

@keyframes sw-rise {
	from {
		opacity: 0;
		translate: 0 28px;
	}
}

/* --- Gallery page ----------------------------------------------------------
   Core crops gallery images to fill each row and overlays the caption on the
   image. Specimen plates and drawings must be seen whole, so each image sits
   uncropped in a paper frame of the same shape, with the caption and any
   species link underneath. Applies to any Gallery block given the class
   sw-gallery (the Gallery page's does).
   ---------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images.sw-gallery figure.wp-block-image {
	flex-direction: column;
	justify-content: flex-start;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--shell);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-gallery.has-nested-images.sw-gallery figure.wp-block-image::before {
	display: none;
}

.wp-block-gallery.has-nested-images.sw-gallery figure.wp-block-image img {
	flex: none !important;
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: contain !important;
	mix-blend-mode: multiply;
}

.wp-block-gallery.has-nested-images.sw-gallery figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
	background: none;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: left;
	text-shadow: none;
	overflow: visible;
}

.wp-block-gallery.sw-gallery .sw-species-link {
	padding: 0;
	background: none;
}

.sw-gallery-note {
	margin-top: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--ink-muted);
}

/* =========================================================================
   SEOWard skin
   The page borrows the look of the thing SEOWard writes for: a search
   results page. Results are set in Arial (Google's face) at Google's
   proportions, link blue for titles, green for addresses. One accent,
   magenta, is kept for measuring: the 600 px cut line and the strike
   through what SEOWard leaves out. No cards, shadows or gradients.
   Every value is a theme.json preset or custom token.
   ======================================================================= */

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

.sw-wordmark a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sw-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
}

.sw-header-download .wp-block-button__link {
	padding: 0.55rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

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

/* clip, not hidden: the long sample title may run past the column into the
   page margin on wide screens, but never makes the page scroll sideways. */
.sw-intro {
	overflow-x: clip;
}

.sw-intro-title {
	max-width: 13ch;
	font-size: var(--wp--preset--font-size--display);
}

.sw-intro-lead {
	max-width: 52ch;
	line-height: 1.5;
}

.sw-intro-meta {
	max-width: 46ch;
}

.sw-intro-specimen {
	container-type: inline-size;
	min-width: 0;
}

.sw-measured-caption {
	max-width: 46ch;
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
}

/* --- Specimen ([seoward_preview]) -------------------------------------------
   1em is one Google title (20px Arial), scaled so the 30em ruler fills the
   column: 100cqi / 31 leaves room for the "600 px" label. Everything inside
   is in em, so the cut line, the ruler and both titles stay in proportion at
   any size. Readouts and labels are set in the body face at fixed, legible
   sizes, because they carry the point in words.

   The one animation on the page plays once: the cut line draws in, the long
   title types across the ruler and turns magenta as it passes the line (the
   cut words are an <s>), its readout appears, then this page's own title
   types in and stops well short of the line. Without motion it simply shows
   the finished state.
   ---------------------------------------------------------------------- */

.sw-measured {
	--sw-t0: 300ms;
	position: relative;
	font-family: var(--wp--preset--font-family--serp);
	font-size: clamp(9px, calc(100cqi / 31), 1.25rem);
	color: var(--wp--preset--color--contrast);
}

.sw-measured p {
	margin: 0;
}

.sw-ruler {
	position: relative;
	width: 30em;
	height: 1.5em;
	background-image:
		linear-gradient(to right, var(--wp--preset--color--ink-muted) 1px, transparent 1px),
		linear-gradient(to right, var(--wp--preset--color--line) 1px, transparent 1px);
	background-repeat: repeat-x;
	background-size: 5em 0.5em, 1em 0.3em;
	background-position: 0 100%, 0 100%;
	border-bottom: 1px solid var(--wp--preset--color--ink-muted);
}

.sw-ruler > span {
	position: absolute;
	top: 0;
	padding-left: 3px;
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Ends on the line, so it can never pass the content edge. */
.sw-ruler > .sw-ruler-end {
	right: 0;
	padding: 0 4px 0 0;
	color: var(--wp--preset--color--measure);
	font-weight: 700;
}

.sw-ruler > .sw-tick-500 {
	display: none;
}

.sw-measured-rows {
	position: relative;
	width: 30em;
	padding-top: 1em;
}

.sw-ruler-limit {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	border-left: 2px solid var(--wp--preset--color--measure);
	transform-origin: top;
	animation: sw-draw 600ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--sw-t0) both;
}

.sw-measured-row + .sw-measured-row {
	margin-top: 1.4em;
}

.sw-measured-label {
	margin-bottom: 0.35rem !important;
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
}

.sw-measured-site {
	font-size: 0.7em;
	line-height: 1.3;
}

.sw-measured-site cite {
	color: var(--wp--preset--color--ink-soft);
	font-style: normal;
}

.sw-measured-title {
	color: var(--wp--preset--color--primary);
	line-height: 1.35;
	white-space: nowrap;
}

.sw-measured-title s {
	color: var(--wp--preset--color--measure);
	text-decoration-thickness: 2px;
}

.sw-type {
	display: inline-block;
	vertical-align: bottom;
	overflow: hidden;
	white-space: nowrap;
	max-width: none;
}

.sw-measured-readout {
	margin-top: 0.35rem !important;
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
}

.sw-measured-row--long .sw-measured-readout {
	color: var(--wp--preset--color--measure);
}

@media (prefers-reduced-motion: no-preference) {
	.sw-measured-row--long .sw-type {
		width: 0;
		animation:
			sw-type 2600ms steps(var(--sw-n)) calc(var(--sw-t0) + 700ms) forwards,
			sw-caret 2600ms step-end calc(var(--sw-t0) + 700ms);
	}

	.sw-measured-row--long .sw-measured-readout {
		animation: sw-fade 400ms ease-out calc(var(--sw-t0) + 3400ms) both;
	}

	.sw-measured-row:not(.sw-measured-row--long) {
		animation: sw-fade 300ms ease-out calc(var(--sw-t0) + 3700ms) both;
	}

	.sw-measured-row:not(.sw-measured-row--long) .sw-type {
		width: 0;
		animation:
			sw-type 1500ms steps(var(--sw-n)) calc(var(--sw-t0) + 4000ms) forwards,
			sw-caret 1500ms step-end calc(var(--sw-t0) + 4000ms);
	}

	.sw-measured-row:not(.sw-measured-row--long) .sw-measured-readout {
		animation: sw-fade 400ms ease-out calc(var(--sw-t0) + 5600ms) both;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sw-ruler-limit {
		animation: none;
	}
}

@keyframes sw-draw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes sw-type {
	from { width: 0; }
	to { width: var(--sw-w); }
}

/* A text cursor while typing, gone when it stops. */
@keyframes sw-caret {
	0% { box-shadow: 2px 0 0 0 currentColor; }
	100% { box-shadow: none; }
}

@keyframes sw-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --- What it does: the heading as a search box ------------------------------ */

.sw-query.wp-block-heading {
	display: flex;
	align-items: center;
	gap: 0.75em;
	max-width: 36rem;
	padding: 0.7em 1.1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18);
	font-family: var(--wp--preset--font-family--serp);
	font-size: var(--wp--preset--font-size--subhead);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
}

/* The magnifier, drawn by a mask so it takes the text colour. */
.sw-query.wp-block-heading::before,
.wp-block-list.sw-related li::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background: var(--wp--preset--color--ink-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16a6.5 6.5 0 0 0 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16a6.5 6.5 0 0 0 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sw-query-count {
	padding-left: 1.4rem;
}

/* --- Rich results ------------------------------------------------------------ */

.sw-results {
	column-gap: var(--wp--preset--spacing--80) !important;
}

.sw-result {
	scroll-margin-top: 96px;
}

.sw-result p,
.sw-result h3,
.sw-result ul {
	margin: 0;
}

.sw-result-address {
	color: var(--wp--preset--color--address);
	font-family: var(--wp--preset--font-family--serp);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.sw-result-title.wp-block-heading {
	margin: 0.1rem 0 0.3rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serp);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

.sw-result:target .sw-result-title {
	background: var(--wp--preset--color--tint);
}

.sw-result-snippet {
	margin-bottom: 0.9rem !important;
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--serp);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The pictures: each one a small piece of what the feature produces. */
.sw-result :where(.sw-rich-template, .sw-rich-printed, .sw-rich-faq, .sw-rich-card, .sw-rich-redirect, .sw-rich-flags, .sw-rich-tree) {
	font-family: var(--wp--preset--font-family--serp);
	font-size: 0.9375rem;
}

.sw-rich-template code {
	display: inline-block;
	padding: 0.2em 0.5em;
	border-radius: 4px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}

.sw-rich-printed {
	margin-top: 0.5rem !important;
	padding-left: 1.4em;
	position: relative;
	color: var(--wp--preset--color--primary);
	font-size: 1.125rem !important;
}

.sw-rich-printed::before {
	content: "";
	position: absolute;
	left: 0.25em;
	top: 0.1em;
	width: 0.6em;
	height: 0.6em;
	border-left: 2px solid var(--wp--preset--color--line);
	border-bottom: 2px solid var(--wp--preset--color--line);
}

.wp-block-list.sw-rich-faq,
.wp-block-list.sw-rich-flags,
.wp-block-list.sw-rich-tree,
.wp-block-list.sw-related,
.wp-block-list.sw-cut {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.sw-rich-faq li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.2rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.wp-block-list.sw-rich-faq li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-list.sw-rich-faq li::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.3em;
	border-right: 2px solid var(--wp--preset--color--ink-muted);
	border-bottom: 2px solid var(--wp--preset--color--ink-muted);
	transform: rotate(45deg) translateY(-25%);
}

.sw-rich-card {
	max-width: 320px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
}

.sw-rich-card .wp-block-image {
	margin: 0;
	aspect-ratio: 1200 / 630;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sw-rich-card .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sw-rich-card-meta {
	padding: 0.55rem 0.75rem;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8125rem !important;
	line-height: 1.4;
}

.sw-rich-card-meta strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.sw-rich-redirect {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.sw-rich-redirect span:first-child {
	color: var(--wp--preset--color--ink-muted);
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--measure);
}

.sw-rich-redirect span:last-child {
	color: var(--wp--preset--color--address);
	font-weight: 700;
}

.sw-rich-redirect mark {
	padding: 0.25em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--shell);
	font-size: 0.8125rem;
	font-weight: 700;
}

.wp-block-list.sw-rich-flags li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.sw-flag {
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--success-tint);
	color: var(--wp--preset--color--success);
	font-size: 0.8125rem;
	font-weight: 700;
}

.sw-flag--warn {
	background: var(--wp--preset--color--warn-bg);
	color: var(--wp--preset--color--warn);
}

.sw-flag--bad {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 12%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--danger);
}

.wp-block-list.sw-rich-tree li {
	position: relative;
	padding: 0.15rem 0 0.15rem 1.6rem;
	color: var(--wp--preset--color--address);
}

.wp-block-list.sw-rich-tree li:first-child {
	padding-left: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.wp-block-list.sw-rich-tree li:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0.4rem;
	top: 0;
	width: 0.8rem;
	height: 0.85rem;
	border-left: 1px solid var(--wp--preset--color--field-line);
	border-bottom: 1px solid var(--wp--preset--color--field-line);
}

/* --- Related searches ---------------------------------------------------------- */

.sw-related-title.wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
}

.wp-block-list.sw-related {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.wp-block-list.sw-related li {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--serp);
	font-size: 0.9375rem;
}

.wp-block-list.sw-related li b {
	color: var(--wp--preset--color--contrast);
}

/* --- What it leaves out: the blue band -------------------------------------- */

.sw-band a {
	color: inherit;
}

.wp-block-list.sw-cut {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.9em;
	max-width: 62rem;
}

.wp-block-list.sw-cut li {
	color: var(--wp--preset--color--shell);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-decoration: line-through;
	text-decoration-color: var(--wp--preset--color--measure-light);
	text-decoration-thickness: 0.09em;
}

/* --- Install steps --------------------------------------------------------- */

.wp-block-list.sw-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sw-step;
}

.wp-block-list.sw-steps li {
	position: relative;
	padding-left: 3.5rem;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	counter-increment: sw-step;
}

.wp-block-list.sw-steps li + li {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-list.sw-steps li::before {
	content: counter(sw-step);
	position: absolute;
	top: -0.35rem;
	left: 0;
	color: var(--wp--preset--color--primary);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wp-block-list.sw-steps strong {
	display: block;
	color: var(--wp--preset--color--contrast);
}

/* --- People also ask -------------------------------------------------------
   Questions in the search results' own accordion style: one column, Arial
   questions, a chevron that turns when open.
   ---------------------------------------------------------------------- */

.sw-paa {
	max-width: 44rem;
}

.sw-faq {
	border-top: 1px solid var(--wp--preset--color--line);
}

.sw-faq .wp-block-details {
	padding: 18px 0;
}

.sw-faq .wp-block-details summary {
	align-items: center;
	font-family: var(--wp--preset--font-family--serp);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: 0;
}

.sw-faq .wp-block-details summary::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.25em;
	border-right: 2px solid var(--wp--preset--color--ink-soft);
	border-bottom: 2px solid var(--wp--preset--color--ink-soft);
	transform: rotate(45deg) translateY(-25%);
	transition: transform 150ms ease-out;
}

.sw-faq .wp-block-details[open] summary::after {
	content: "";
	transform: rotate(225deg) translateY(-25%);
}

.sw-faq .wp-block-details > *:not(summary) {
	font-family: var(--wp--preset--font-family--serp);
	font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
	.sw-faq .wp-block-details summary::after {
		transition: none;
	}
}

/* --- Get SEOWard: a knowledge panel ------------------------------------------ */

.sw-download-title.wp-block-heading {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	letter-spacing: -0.04em;
}

.sw-kpanel {
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--base);
}

.sw-kpanel-head {
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.sw-kpanel-head .wp-block-image {
	margin: 0;
}

.sw-kpanel-head img {
	display: block;
	border-radius: 8px;
}

.sw-kpanel p {
	margin: 0;
}

.sw-kpanel-name {
	font-size: var(--wp--preset--font-size--title-small);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.sw-kpanel-kind {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
}

.sw-release-buttons {
	margin-bottom: var(--wp--preset--spacing--50);
}

.sw-release-buttons .wp-block-button,
.sw-release-buttons .wp-block-button__link {
	width: 100%;
	text-align: center;
}

.sw-release-facts {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.sw-release-facts > div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

.sw-release-facts dt {
	color: var(--wp--preset--color--ink-muted);
}

.sw-release-facts dd {
	margin: 0;
	font-weight: 600;
}

.sw-release-notes-title {
	margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--medium);
}

.sw-release-notes {
	margin: 0;
	padding-left: 1.2em;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.sw-release-notes li + li {
	margin-top: 6px;
}

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

.sw-footer-name {
	font-weight: 800;
	letter-spacing: -0.03em;
}

.wp-block-list.sw-footlinks {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:target {
	scroll-margin-top: 96px;
}

/* --- Small screens ---------------------------------------------------------- */

@media (max-width: 600px) {
	/* One header row: name and menu. The hero carries the download button.
	   Two classes because core's .wp-block-buttons display: flex comes later
	   at equal specificity. */
	.sw-hide-sm,
	.wp-block-buttons.sw-hide-sm {
		display: none;
	}

	.sw-release-facts > div {
		grid-template-columns: 6.5rem 1fr;
	}

	/* At phone scale the site line is under 9px: the label says enough. */
	.sw-measured-site {
		display: none;
	}

	/* A 44px target for the menu buttons, without moving them. */
	.sw-nav .wp-block-navigation__responsive-container-open,
	.sw-nav .wp-block-navigation__responsive-container-close {
		padding: 10px;
		margin: -10px;
	}
}

/* The Download link in the menu is for phones, where the header button is
   hidden. Shown in the open overlay too. */
.sw-nav .sw-only-sm {
	display: none;
}

.sw-nav .is-menu-open .sw-only-sm {
	display: flex;
}