/*
Theme Name: Ag Worx — Waterline
Theme URI: https://ag-worx.co.nz
Author: Flick Media
Author URI: https://flickmedia.co.nz
Description: A block theme for Ag Worx, Matamata. Pool, spa, pumps, filtration and milk and water systems. The look borrows from the trade itself — plant-room labelling, pipe bore sizes, gauge faces and the colour bands on a pool test strip — and is carried by one signature device: the waterline.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agworx
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, custom-menu, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   HOW THIS FILE IS ORGANISED

   Colour, type scale, spacing and layout width all live in theme.json, not
   here, so the client can change them in Styles without touching code. This
   stylesheet is only the things theme.json cannot express: the section
   devices, the card behaviour, and the motion layer.

   Everything is prefixed aw- and hangs off a class the patterns apply, so
   nothing here leaks into third-party plugin markup.

   1.  Tokens and shared roles
   2.  The waterline eyebrow
   3.  Bands
   4.  Buttons and links
   5.  Header
   6.  Hero
   7.  Supplier rail
   8.  Gauges
   9.  Service cards
   10. Split bands
   11. Why / drawn icons
   12. Water testing
   13. Tables, details, forms
   14. Footer
   15. Motion
   16. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens and shared roles
   -------------------------------------------------------------------------- */

:root {
	--aw-ink:       var(--wp--preset--color--ink, #071026);
	--aw-ink-2:     var(--wp--preset--color--ink-2, #0D1B3C);
	--aw-ink-line:  rgba(22, 41, 81, 0.5);
	--aw-blue:      var(--wp--preset--color--blue, #0B23A6);
	--aw-blue-lift: var(--wp--preset--color--blue-lift, #1E44DF);
	--aw-aqua:      var(--wp--preset--color--aqua, #35C8F0);
	--aw-aqua-deep: var(--wp--preset--color--aqua-deep, #0C93C4);
	--aw-heading:   var(--wp--preset--color--heading, #0A1730);
	--aw-slate:     var(--wp--preset--color--slate, #55647A);
	--aw-line:      var(--wp--preset--color--line, #D3DFEC);
	--aw-mist:      var(--wp--preset--color--mist, #EAF0F7);
	--aw-mist-2:    var(--wp--preset--color--mist-2, #F3F7FB);
	--aw-paper:     var(--wp--preset--color--paper, #FBFCFE);

	--aw-display: var(--wp--preset--font-family--display, "Archivo", Arial, sans-serif);
	--aw-body:    var(--wp--preset--font-family--body, system-ui, sans-serif);
	--aw-mono:    var(--wp--preset--font-family--mono, ui-monospace, monospace);

	--aw-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--aw-header-h: 84px;
}

body { -webkit-font-smoothing: antialiased; }

/* Headings are set wide. Archivo is a variable font with a width axis, so
   this is a real optical width, not a synthetic stretch. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	font-variation-settings: "wdth" 112;
	text-wrap: balance;
}
h3, h4, .aw-card h3 { font-variation-settings: "wdth" 104; }

/* Mono is the instrument voice: hours, bore sizes, phone numbers, references. */
.aw-spec {
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-transform: uppercase;
}

.aw-lede { max-width: 56ch; }
.aw-measure { max-width: 60ch; }

:where(a):focus-visible,
:where(button):focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--aw-aqua);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   2. The waterline eyebrow

   A label on a rule that fills like a level gauge when it scrolls into view.
   The same device on every band is what makes the page read as one system.
   -------------------------------------------------------------------------- */

.aw-eyebrow {
	position: relative;
	display: block;
	margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
	padding-bottom: 0.7rem;
	color: var(--aw-blue);
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}
.aw-eyebrow::before,
.aw-eyebrow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
}
.aw-eyebrow::before { background: var(--aw-line); }
.aw-eyebrow::after {
	background: var(--aw-aqua);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.05s var(--aw-ease) 0.12s;
}
.is-in .aw-eyebrow::after,
.aw-eyebrow.is-in::after { transform: scaleX(1); }

.aw-on-dark .aw-eyebrow { color: var(--aw-aqua); }
.aw-on-dark .aw-eyebrow::before { background: rgba(255, 255, 255, 0.18); }

/* --------------------------------------------------------------------------
   3. Bands
   -------------------------------------------------------------------------- */

.aw-band { padding-block: var(--wp--preset--spacing--60, clamp(4rem, 9vw, 8.5rem)); }
.aw-band--tight { padding-block: var(--wp--preset--spacing--50, clamp(2.2rem, 4vw, 3.4rem)); }
.aw-band--mist { background-color: var(--aw-mist-2); }
.aw-band--ink { background-color: var(--aw-ink); }

/* One rule sets every text colour on a dark band, so a client who drops a
   new paragraph in does not have to remember to recolour it. */
.aw-on-dark { color: rgba(255, 255, 255, 0.78); }
.aw-on-dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.aw-on-dark :where(p, li, td, dd) { color: rgba(255, 255, 255, 0.78); }
.aw-on-dark :where(a):not(.wp-block-button__link) { color: var(--aw-aqua); }

/* --------------------------------------------------------------------------
   4. Buttons and links
   -------------------------------------------------------------------------- */

/* The fill rises from the bottom like a level, rather than wiping across. */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 2px solid var(--aw-blue);
	transition: transform 0.35s var(--aw-ease), box-shadow 0.35s var(--aw-ease), border-color 0.3s ease;
}
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--aw-blue-lift);
	transform: translateY(101%);
	transition: transform 0.45s var(--aw-ease);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -12px rgba(11, 35, 166, 0.6);
	color: #fff;
}
.wp-block-button__link:hover::after { transform: translateY(0); }

.wp-block-button.is-style-aw-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.42);
	color: #fff;
}
.wp-block-button.is-style-aw-ghost .wp-block-button__link::after { background: rgba(255, 255, 255, 0.12); }
.wp-block-button.is-style-aw-ghost .wp-block-button__link:hover {
	border-color: var(--aw-aqua);
	box-shadow: none;
}

/* Secondary button on a light band: outlined, filling from the bottom on
   hover like the solid one. Core's own outline style does not survive the
   theme's button border, so it is stated here rather than inherited. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--aw-blue);
	color: var(--aw-blue);
}
.wp-block-button.is-style-outline .wp-block-button__link::after { background: var(--aw-blue); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: #fff; }

.wp-block-button.is-style-aw-aqua .wp-block-button__link {
	background-color: var(--aw-aqua);
	border-color: var(--aw-aqua);
	color: var(--aw-ink);
}
.wp-block-button.is-style-aw-aqua .wp-block-button__link::after { background: #fff; }
.wp-block-button.is-style-aw-aqua .wp-block-button__link:hover { color: var(--aw-ink); }

/* A text link that draws its own underline. */
.aw-link a,
a.aw-link {
	display: inline-block;
	padding-bottom: 3px;
	color: var(--aw-blue);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	background-image: linear-gradient(var(--aw-aqua), var(--aw-aqua));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s var(--aw-ease);
}
.aw-link a:hover,
a.aw-link:hover { background-size: 100% 2px; }
.aw-on-dark .aw-link a { color: var(--aw-aqua); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.aw-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.aw-header.is-stuck {
	background: rgba(7, 16, 38, 0.93);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
}

.aw-header__inner {
	padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
	transition: padding 0.4s var(--aw-ease);
}
.aw-header.is-stuck .aw-header__inner { padding-block: 0.62rem; }

/* The mark sits on a light plate, the way it does on the shop's own signage.
   That keeps the wordmark legible over photography and over the navy header
   without recolouring the logo itself. */
.aw-header .wp-block-site-logo,
.aw-header .aw-logo {
	flex: none;
	padding: 7px 9px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.55);
	transition: padding 0.4s var(--aw-ease);
	line-height: 0;
}
.aw-header .wp-block-site-logo img,
.aw-header .aw-logo img {
	height: clamp(48px, 5.4vw, 68px);
	width: auto;
	transition: height 0.4s var(--aw-ease);
}
.aw-header.is-stuck .wp-block-site-logo,
.aw-header.is-stuck .aw-logo { padding: 5px 7px; }
.aw-header.is-stuck .wp-block-site-logo img,
.aw-header.is-stuck .aw-logo img { height: 42px; }

.aw-header .wp-block-navigation a {
	position: relative;
	padding-block: 0.35rem;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
	transition: color 0.25s ease;
}
.aw-header .wp-block-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--aw-aqua);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.38s var(--aw-ease);
}
.aw-header .wp-block-navigation a:hover,
.aw-header .wp-block-navigation .current-menu-item > a { color: #fff; }
.aw-header .wp-block-navigation a:hover::after,
.aw-header .wp-block-navigation .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* The phone number in the header is a spec, not a button, so it is set in
   mono like every other number on the site. */
.aw-header .aw-call a,
a.aw-call {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.72rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 2px;
	color: #fff;
	font-family: var(--aw-mono);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	background-image: none;
	transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.aw-header .aw-call a:hover,
a.aw-call:hover {
	background: var(--aw-aqua);
	border-color: var(--aw-aqua);
	color: var(--aw-ink);
}

/* The header's own waterline: scroll depth read as a rising level.
   Injected by waterline.js so no editor can delete it by accident. */
.aw-header__level {
	height: 2px;
	width: 0;
	background: var(--aw-aqua);
	box-shadow: 0 0 12px rgba(53, 200, 240, 0.9);
	transition: width 0.1s linear;
}

/* Mobile navigation overlay, restyled from the core default. */
.aw-header .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(7, 16, 38, 0.98);
	backdrop-filter: blur(14px);
	padding: clamp(2rem, 6vw, 3rem);
}
.aw-header .wp-block-navigation__responsive-container.is-menu-open a { font-size: 1.1rem; }
.aw-header .wp-block-navigation__responsive-container-open,
.aw-header .wp-block-navigation__responsive-container-close { color: #fff; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.aw-hero { isolation: isolate; overflow: hidden; }

/* A slow drift on the photograph, and a caustic light layer over it, the way
   sun moves on the surface of a pool. */
.aw-hero .wp-block-cover__image-background {
	transform: scale(1.06);
	animation: aw-drift 26s ease-in-out infinite alternate;
}
@keyframes aw-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.15) translate3d(-1.6%, -1.4%, 0); }
}

.aw-hero::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(38% 26% at 22% 28%, rgba(53, 200, 240, 0.22), transparent 70%),
		radial-gradient(30% 22% at 76% 62%, rgba(53, 200, 240, 0.14), transparent 72%),
		radial-gradient(26% 30% at 52% 88%, rgba(30, 68, 223, 0.20), transparent 70%);
	filter: blur(24px);
	animation: aw-caustics 22s ease-in-out infinite alternate;
}
@keyframes aw-caustics {
	from { transform: translate3d(-2%, 1%, 0) scale(1); }
	to   { transform: translate3d(3%, -2%, 0) scale(1.12); }
}

.aw-hero > .wp-block-cover__inner-container { z-index: 2; }

.aw-hero .aw-place {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.5rem;
	color: var(--aw-aqua);
	font-family: var(--aw-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.aw-hero .aw-place::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--aw-aqua);
	transform-origin: left;
	animation: aw-rule-in 1.1s var(--aw-ease) both;
}
@keyframes aw-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.aw-hero h1 { max-width: 15ch; }
.aw-hero .aw-lede { max-width: 52ch; color: rgba(255, 255, 255, 0.8); }

/* The spec rail: shop facts set like plant-room labelling. */
.aw-rail-facts {
	padding-left: clamp(1rem, 2vw, 2rem);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.aw-rail-facts .aw-spec { color: var(--aw-aqua); margin-bottom: 0.25rem; }
.aw-rail-facts p:not(.aw-spec) {
	margin: 0 0 1.4rem;
	color: #fff;
	font-family: var(--aw-display);
	font-variation-settings: "wdth" 100;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.35;
}
.aw-rail-facts p:last-child { margin-bottom: 0; }

/* The waterline itself: a real water surface where the hero meets the page.
   The canvas is injected by waterline.js and removed under reduced motion. */
.aw-waterline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 110px;
	z-index: 3;
	pointer-events: none;
}
.aw-waterline canvas { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   7. Supplier rail
   -------------------------------------------------------------------------- */

.aw-rail {
	overflow: hidden;
	background-color: var(--aw-paper);
	border-bottom: 1px solid var(--aw-line);
}
.aw-rail .aw-spec { color: var(--aw-slate); margin-bottom: 1.2rem; }

.aw-marquee {
	display: flex;
	width: max-content;
	animation: aw-marquee 46s linear infinite;
}
.aw-rail:hover .aw-marquee,
.aw-marquee:focus-within { animation-play-state: paused; }
@keyframes aw-marquee { to { transform: translateX(-50%); } }

.aw-marquee__set {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	padding-right: clamp(2.5rem, 6vw, 5.5rem);
}
.aw-marquee img {
	height: clamp(26px, 3.4vw, 40px);
	width: auto;
	filter: grayscale(1) contrast(0.7) opacity(0.55);
	transition: filter 0.45s ease, transform 0.45s var(--aw-ease);
}
.aw-marquee img:hover { filter: none; transform: scale(1.06); }

/* --------------------------------------------------------------------------
   8. Gauges
   -------------------------------------------------------------------------- */

/* The hairline between gauges is the grid gap showing the container colour
   through, so core's block-gap margins have to stay out of it. */
.aw-gauges > * { margin-block: 0; }
.aw-gauges {
	display: grid;
	gap: 1px;
	background: var(--aw-line);
	border: 1px solid var(--aw-line);
}
.aw-gauge {
	position: relative;
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	padding-bottom: clamp(2.4rem, 3.4vw, 3rem);
	background: var(--aw-paper);
}
.aw-gauge__row { gap: 0.3rem !important; align-items: baseline; }

.aw-gauge__n {
	margin: 0;
	font-family: var(--aw-display);
	font-variation-settings: "wdth" 118;
	font-size: clamp(2.4rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--aw-heading);
	font-variant-numeric: tabular-nums;
}
.aw-gauge__u {
	margin: 0;
	font-family: var(--aw-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--aw-aqua-deep);
}
.aw-gauge__k {
	margin: 0.55rem 0 0;
	color: var(--aw-slate);
	font-family: var(--aw-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* The level under each gauge — the waterline again, at reading scale. */
.aw-gauge::before,
.aw-gauge::after {
	content: "";
	position: absolute;
	left: clamp(1.4rem, 2.4vw, 1.9rem);
	right: clamp(1.4rem, 2.4vw, 1.9rem);
	bottom: clamp(1.4rem, 2.4vw, 1.9rem);
	height: 3px;
}
.aw-gauge::before { background: var(--aw-mist); }
.aw-gauge::after {
	background: linear-gradient(90deg, var(--aw-blue), var(--aw-aqua));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.4s var(--aw-ease);
}
.is-in .aw-gauge::after { transform: scaleX(1); }
.is-in .aw-gauge:nth-child(2)::after { transition-delay: 0.14s; }
.is-in .aw-gauge:nth-child(3)::after { transition-delay: 0.28s; }

/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */

.aw-card,
.wp-block-cover.aw-card {
	position: relative;
	height: 100%;
	border-radius: 2px;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	transition: transform 0.5s var(--aw-ease), box-shadow 0.5s var(--aw-ease), border-color 0.4s ease;
}
/* The preset card scrim is weighted to the very bottom, which is right for a
   tall card but leaves the text of a short one sitting in the thin part of the
   gradient. This second layer carries the density further up, so a card over a
   bright photograph — a lit shop interior, say — reads as well as one over a
   dark one. Barely visible on the dark cards, which are already legible. */
.aw-card > .wp-block-cover__background.has-card-scrim-gradient-background {
	background-image:
		linear-gradient(to top, rgba(7, 16, 38, 0.52) 0%, rgba(7, 16, 38, 0.34) 62%, rgba(7, 16, 38, 0) 94%),
		var(--wp--preset--gradient--card-scrim);
}

.aw-card:hover,
.aw-card:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 26px 50px -30px rgba(7, 16, 38, 0.55);
}

/* A rule that rises across the foot of the card on hover. */
.aw-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 4;
	width: 100%;
	height: 3px;
	background: var(--aw-aqua);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--aw-ease);
}
.aw-card:hover::after,
.aw-card:focus-within::after { transform: scaleX(1); }

.wp-block-cover.aw-card .wp-block-cover__image-background {
	transition: transform 1.1s var(--aw-ease);
}
.wp-block-cover.aw-card:hover .wp-block-cover__image-background { transform: scale(1.07); }

/* The cards without photography take a different treatment: a faint ruled
   ground, like the squared paper a pump gets sized on. */
.aw-card--plain {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--aw-line);
	background-color: var(--aw-paper);
	background-image:
		repeating-linear-gradient(0deg, rgba(11, 35, 166, 0.022) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(90deg, rgba(11, 35, 166, 0.022) 0 1px, transparent 1px 46px);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.aw-card--plain:hover { border-color: transparent; }

.aw-card .aw-idx {
	margin: 0 0 0.9rem;
	font-family: var(--aw-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--aw-aqua);
}
.aw-card--plain .aw-idx { color: var(--aw-aqua-deep); margin-bottom: auto; padding-bottom: 1.6rem; }

.aw-card h3 { margin-block: 0 0.55rem; }
.aw-card p { font-size: 0.97rem; max-width: 42ch; }

.aw-card .aw-go {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	font-family: var(--aw-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--aw-aqua);
	text-decoration: none;
	background-image: none;
}
.aw-card--plain .aw-go { color: var(--aw-blue); margin-top: auto; padding-top: 1.4rem; }
.aw-card .aw-go::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	transition: transform 0.45s var(--aw-ease);
	-webkit-mask: var(--aw-arrow) center / contain no-repeat;
	mask: var(--aw-arrow) center / contain no-repeat;
}
.aw-card:hover .aw-go::after { transform: translateX(6px); }

:root {
	--aw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Cards set their own internal rhythm. Core's block gap is sized for page
   sections and is much too loose inside a tile. */
.aw-card > * + *,
.aw-card .wp-block-cover__inner-container > * + * { margin-block-start: 0; }
.wp-block-cover.aw-card > .wp-block-cover__inner-container { gap: 0; }
.aw-card p + p { margin-block-start: 0.7rem; }

/* The card's own link covers the card, so the whole tile is clickable
   without nesting anchors. */
.aw-card .aw-go a {
	color: inherit;
	text-decoration: none;
	background-image: none;
}
.aw-card .aw-go a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

/* --------------------------------------------------------------------------
   10. Split bands
   -------------------------------------------------------------------------- */

.aw-frame {
	position: relative;
	height: 100%;
	min-height: clamp(340px, 34vw, 520px);
	overflow: hidden;
	border-radius: 2px;
}
.aw-frame img {
	position: absolute;
	left: 0;
	top: -9%;
	width: 100%;
	height: 118%;
	object-fit: cover;
	object-position: center 64%;
	will-change: transform;
}

/* A dimension bracket that draws itself, the way one does on a drawing. */
.aw-frame-wrap { position: relative; }
.aw-frame-wrap::before,
.aw-frame-wrap::after {
	content: "";
	position: absolute;
	left: -14px;
	top: -14px;
	background: var(--aw-aqua);
	transition: transform 1s var(--aw-ease) 0.2s;
}
.aw-frame-wrap::before { width: 2px; height: 96px; transform: scaleY(0); transform-origin: top; }
.aw-frame-wrap::after  { width: 96px; height: 2px; transform: scaleX(0); transform-origin: left; }
.is-in .aw-frame-wrap::before { transform: scaleY(1); }
.is-in .aw-frame-wrap::after  { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   10b. Photo strip
   -------------------------------------------------------------------------- */

/*
 * Three job photographs side by side. Every frame is cropped to the same
 * shape whatever the source file is, so a set shot on different days still
 * reads as one row.
 */
/* A photograph inside an accordion panel. The slot exists whether or not a
   panel has one yet: drop an Image block below the paragraph in any Details
   block and it sizes, crops and captions itself to match the rest. */
.aw-acc__shot {
	margin: 1.4rem 0 0;
	max-width: 34rem;
	overflow: hidden;
	border-radius: 2px;
}
.aw-acc__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 2px;
}
.aw-acc__shot figcaption,
.aw-acc__shot .wp-element-caption {
	margin-top: 0.7rem;
	padding-top: 0.55rem;
	border-top: 1px solid var(--aw-line);
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aw-slate);
	text-align: left;
}

/* A short line of encouragement above a pair of buttons. */
.aw-prompt {
	font-family: var(--aw-display);
	font-size: clamp(1.15rem, 1.6vw, 1.42rem);
	font-variation-settings: "wdth" 104;
	font-weight: 600;
	line-height: 1.3;
	color: var(--aw-heading);
	max-width: 30ch;
}
.aw-on-dark .aw-prompt { color: #fff; }

/* A single framed photograph used inside a split band. */
.aw-shot { margin: 0; overflow: hidden; border-radius: 2px; }
.aw-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
	transition: transform 0.7s var(--aw-ease);
}
.aw-shot:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.aw-shot img { transition: none; }
	.aw-shot:hover img { transform: none; }
}

/* A grid rather than a fixed row of columns, so a job set can be three photos
   now and six later without the markup changing shape. Works whether the
   children are Image blocks directly or Columns from an older page. */
.aw-shots {
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	grid-template-columns: 1fr;
}
.aw-shots > * { margin-block: 0 !important; }
@media (min-width: 640px)  { .aw-shots { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .aw-shots { grid-template-columns: repeat(3, 1fr); } }

.aw-shots > .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; }
.aw-shots .wp-block-image { margin: 0; }
.aw-shots .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
	transition: transform 0.7s var(--aw-ease);
}
.aw-shots .wp-block-image { overflow: hidden; border-radius: 2px; }
.aw-shots .wp-block-image:hover img { transform: scale(1.03); }

.aw-shots figcaption,
.aw-shots .wp-element-caption {
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--aw-line);
	font-family: var(--aw-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--aw-slate);
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.aw-shots .wp-block-image img { transition: none; }
	.aw-shots .wp-block-image:hover img { transform: none; }
}

/* Key/value rows, used for the capability list on dark bands. */
.aw-ticks { width: 100%; border-collapse: collapse; }
.aw-ticks td {
	padding: 0.95rem 0;
	border: 0;
	border-top: 1px solid var(--aw-ink-line);
	font-size: 0.97rem;
	vertical-align: top;
}
.aw-ticks tr:last-child td { border-bottom: 1px solid var(--aw-ink-line); }
.aw-ticks td:first-child {
	width: 7rem;
	padding-right: 1.2rem;
	font-family: var(--aw-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--aw-aqua);
	padding-top: 1.15rem;
}
.aw-ticks,
.aw-ticks table { border: 0; }

/* --------------------------------------------------------------------------
   11. Why / drawn icons
   -------------------------------------------------------------------------- */

.aw-why > * { margin-block: 0; }
.aw-why {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--aw-line);
	border-block: 1px solid var(--aw-line);
}
.aw-why__cell { padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--aw-paper); }
.aw-why__cell svg { width: 44px; height: 44px; margin-bottom: 1.4rem; }
.aw-why__cell svg * {
	fill: none;
	stroke: var(--aw-blue);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: var(--len, 230);
	stroke-dashoffset: var(--len, 230);
}
.is-in .aw-why__cell svg * {
	animation: aw-draw 1.5s var(--aw-ease) forwards;
	animation-delay: calc(var(--i, 0) * 0.16s);
}
@keyframes aw-draw { to { stroke-dashoffset: 0; } }
.aw-why__cell h3 { margin-block: 0 0.6rem; }
.aw-why__cell p { font-size: 0.98rem; margin: 0; }

/* --------------------------------------------------------------------------
   12. Water testing

   The only place the reagent colours appear, so they read as instrument
   colour rather than decoration.
   -------------------------------------------------------------------------- */

.aw-test { position: relative; overflow: hidden; }
.aw-test > * { position: relative; z-index: 1; }

.aw-rings {
	position: absolute;
	right: -8%;
	top: 50%;
	width: min(760px, 78vw);
	aspect-ratio: 1;
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}
.aw-rings span {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(53, 200, 240, 0.34);
	border-radius: 50%;
	transform: scale(0.18);
	opacity: 0;
}
.is-in .aw-rings span { animation: aw-ripple 6.5s ease-out infinite; }
.is-in .aw-rings span:nth-child(2) { animation-delay: 1.6s; }
.is-in .aw-rings span:nth-child(3) { animation-delay: 3.2s; }
.is-in .aw-rings span:nth-child(4) { animation-delay: 4.8s; }
@keyframes aw-ripple {
	0%   { transform: scale(0.18); opacity: 0; }
	12%  { opacity: 0.85; }
	100% { transform: scale(1); opacity: 0; }
}

.aw-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 2px;
}
.aw-strip div { text-align: center; }
.aw-strip .pad {
	display: block;
	position: relative;
	height: clamp(88px, 12vw, 124px);
	background: rgba(255, 255, 255, 0.09);
	border-radius: 1px;
	overflow: hidden;
}
.aw-strip .pad::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c);
	transform: translateY(100%);
	transition: transform 1.1s var(--aw-ease);
	transition-delay: calc(var(--i) * 0.17s);
}
.is-in .aw-strip .pad::after { transform: none; }
.aw-strip .lbl {
	display: block;
	margin-top: 0.6rem;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--aw-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   13. Tables, details, forms
   -------------------------------------------------------------------------- */

/* Spec tables read as data, so they are set in mono with figures aligned. */
.aw-table table,
table.aw-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--aw-mono);
	font-size: 0.86rem;
}
.aw-table :where(th, td) {
	padding: 0.95rem 1rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--aw-line);
}
.aw-table th {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aw-aqua-deep);
	border-bottom-color: var(--aw-heading);
}
.aw-table td { color: var(--aw-heading); font-variant-numeric: tabular-nums; }
.aw-table td:last-child { font-family: var(--aw-body); font-size: 0.93rem; color: var(--aw-slate); }
.aw-table tbody tr { transition: background 0.25s ease; }
.aw-table tbody tr:hover { background: var(--aw-mist-2); }
.aw-table figcaption { margin-top: 0.8rem; font-size: 0.85rem; }

/* Contact details: key on the left in mono, value on the right. */
.aw-dl table { width: 100%; border-collapse: collapse; }
.aw-dl :where(th, td) {
	padding: 1.05rem 0;
	border: 0;
	border-top: 1px solid var(--aw-line);
	vertical-align: top;
	text-align: left;
}
.aw-dl tr:last-child :where(th, td) { border-bottom: 1px solid var(--aw-line); }
.aw-dl td:first-child {
	width: 8rem;
	font-family: var(--aw-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aw-aqua-deep);
	padding-top: 1.25rem;
}
.aw-dl td:last-child { color: var(--aw-heading); font-weight: 500; }

/* Open / closed, driven by the shop's real hours in waterline.js. */
.aw-status {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.6rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--aw-line);
	border-radius: 999px;
	background: var(--aw-paper);
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aw-heading);
}
.aw-status .dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime, #7BC24A);
}
.aw-status .dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--lime, #7BC24A);
	animation: aw-pulse 2.4s ease-out infinite;
}
.aw-status[data-open="false"] .dot { background: var(--aw-slate); }
.aw-status[data-open="false"] .dot::after { display: none; }
@keyframes aw-pulse {
	0%   { transform: scale(0.6); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* Capability list, built on core's Details block so it stays editable. */
.aw-acc { border-top: 1px solid var(--aw-line); }
.aw-acc .wp-block-details {
	border-bottom: 1px solid var(--aw-line);
	padding: 0;
	background: none;
}
.aw-acc summary {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--aw-display);
	font-variation-settings: "wdth" 104;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--aw-heading);
	transition: color 0.25s ease;
}
.aw-acc summary::-webkit-details-marker,
.aw-acc summary::marker { display: none; content: ""; }
.aw-acc summary:hover { color: var(--aw-blue); }
.aw-acc summary::after {
	content: "";
	position: relative;
	margin-left: auto;
	width: 14px;
	height: 14px;
	flex: none;
	background:
		linear-gradient(var(--aw-blue), var(--aw-blue)) center / 14px 2px no-repeat,
		linear-gradient(var(--aw-blue), var(--aw-blue)) center / 2px 14px no-repeat;
	transition: transform 0.4s var(--aw-ease);
}
.aw-acc .wp-block-details[open] summary::after {
	background:
		linear-gradient(var(--aw-blue), var(--aw-blue)) center / 14px 2px no-repeat;
	transform: rotate(180deg);
}
.aw-acc .wp-block-details > :not(summary) { margin-block: 0; }
.aw-acc__body { overflow: hidden; }
.aw-acc__body p { padding-bottom: 1.5rem; margin: 0; max-width: 62ch; font-size: 0.98rem; }

/* Forms. Written against the markup every common form plugin produces
   (Contact Form 7, WPForms, Gravity Forms, Kadence Form) so whichever the
   site ends up using inherits the design. */
.aw-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--aw-line);
	border-radius: 2px;
	background: var(--aw-paper);
	color: var(--aw-heading);
	font-family: var(--aw-body);
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.aw-form textarea { min-height: 140px; resize: vertical; }
.aw-form :where(input, textarea, select):focus {
	border-color: var(--aw-aqua);
	box-shadow: 0 0 0 4px rgba(53, 200, 240, 0.18);
	outline: none;
}
.aw-form :where(input[type="submit"], button[type="submit"]) {
	width: auto;
	padding: 1.05rem 1.9rem;
	border: 2px solid var(--aw-blue);
	border-radius: 2px;
	background: var(--aw-blue);
	color: #fff;
	font-family: var(--aw-body);
	font-size: 0.97rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.35s var(--aw-ease);
}
.aw-form :where(input[type="submit"], button[type="submit"]):hover {
	background: var(--aw-blue-lift);
	border-color: var(--aw-blue-lift);
	transform: translateY(-2px);
}
.aw-form label { font-size: 0.9rem; font-weight: 500; color: var(--aw-heading); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.aw-footer { background: var(--aw-ink); }
.aw-footer .aw-logo,
.aw-footer .wp-block-site-logo {
	display: inline-block;
	padding: 7px 9px;
	border-radius: 2px;
	background: #fff;
	line-height: 0;
}
.aw-footer .aw-logo img,
.aw-footer .wp-block-site-logo img { height: 52px; width: auto; }
.aw-footer h4 {
	margin-block: 0 1rem;
	color: var(--aw-aqua);
	font-family: var(--aw-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-variation-settings: normal;
}
.aw-footer .wp-block-navigation,
.aw-footer .wp-block-page-list { flex-direction: column; gap: 0.55rem; }
.aw-footer a { text-decoration: none; transition: color 0.25s ease; }
.aw-footer a:hover { color: var(--aw-aqua); }

.aw-hours table { width: 100%; border-collapse: collapse; font-family: var(--aw-mono); font-size: 0.82rem; }
.aw-hours :where(th, td) {
	padding: 0.5rem 0;
	border: 0 !important;
	border-bottom: 1px solid var(--aw-ink-line) !important;
	color: rgba(255, 255, 255, 0.72);
	text-align: left;
}
.aw-hours td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.aw-footer__base {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--aw-ink-line);
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.45);
}
.aw-footer__base p { color: rgba(255, 255, 255, 0.45); margin: 0; }

/* --------------------------------------------------------------------------
   15. Motion

   One reveal class, used everywhere. Add `aw-reveal` to any block's
   Additional CSS class(es) field to make it rise into view, and `aw-d-1` to
   `aw-d-4` to stagger it against its neighbours.
   -------------------------------------------------------------------------- */

.aw-js .aw-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.85s var(--aw-ease), transform 0.85s var(--aw-ease);
}
.aw-js .aw-reveal.is-in { opacity: 1; transform: none; }
.aw-d-1 { transition-delay: 0.09s; }
.aw-d-2 { transition-delay: 0.18s; }
.aw-d-3 { transition-delay: 0.27s; }
.aw-d-4 { transition-delay: 0.36s; }

/* The hero's opening sequence: the headline unmasks line by line, then the
   supporting elements rise. */
.aw-js .aw-hero .aw-mask { display: block; overflow: hidden; padding-bottom: 0.04em; }
.aw-js .aw-hero .aw-mask > span { display: block; transform: translateY(105%); }
.aw-hero.is-ready .aw-mask > span {
	animation: aw-unmask 1.05s var(--aw-ease) both;
	animation-delay: var(--d, 0s);
}
@keyframes aw-unmask { to { transform: none; } }

.aw-js .aw-hero .aw-rise { opacity: 0; transform: translateY(26px); }
.aw-hero.is-ready .aw-rise {
	animation: aw-rise 0.95s var(--aw-ease) both;
	animation-delay: var(--d, 0s);
}
@keyframes aw-rise { to { opacity: 1; transform: none; } }

.aw-hero .aw-rise:nth-of-type(1) { --d: 0.15s; }
.aw-hero .aw-lede { --d: 0.68s; }
.aw-hero .wp-block-buttons { --d: 0.82s; }
.aw-rail-facts { --d: 0.95s; }

/* Skip link. */
.aw-skip {
	position: absolute;
	left: -9999px;
	z-index: 200;
	padding: 0.8rem 1.2rem;
	background: var(--aw-aqua);
	color: var(--aw-ink);
	font-weight: 600;
}
.aw-skip:focus { position: fixed; left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.aw-why { grid-template-columns: 1fr 1fr; }
	.aw-why__cell:last-child { grid-column: 1 / -1; }
	.aw-rail-facts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		margin-top: 2.5rem;
		padding-left: 0;
		padding-top: 1.6rem;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
	.aw-rail-facts p:not(.aw-spec) { margin-bottom: 0; }
	.aw-frame-wrap::before,
	.aw-frame-wrap::after { display: none; }
}

@media (max-width: 781px) {
	.aw-why { grid-template-columns: 1fr; }
	.aw-why__cell:last-child { grid-column: auto; }
	.aw-rail-facts { grid-template-columns: 1fr; gap: 1.1rem; }
	.aw-dl td:first-child { width: 6rem; }
	.aw-waterline { height: 64px; }
	.aw-card p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.aw-js .aw-reveal,
	.aw-js .aw-hero .aw-rise { opacity: 1 !important; transform: none !important; }
	.aw-js .aw-hero .aw-mask > span { transform: none !important; }
	.aw-eyebrow::after,
	.aw-gauge::after,
	.aw-frame-wrap::before,
	.aw-frame-wrap::after,
	.aw-strip .pad::after { transform: none !important; }
	.aw-waterline { display: none; }
	.aw-marquee { animation: none; }
}

/* --------------------------------------------------------------------------
   17. Inline icons

   Kept as masks rather than inline SVG so they take currentColor and stay
   out of the editable content.
   -------------------------------------------------------------------------- */

:root {
	--aw-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

.aw-call a::before,
a.aw-call::before,
.wp-block-button.has-phone-icon .wp-block-button__link::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--aw-phone) center / contain no-repeat;
	mask: var(--aw-phone) center / contain no-repeat;
}
/* The label needs to sit beside the icon rather than wrap under it. */
.aw-call a,
.wp-block-button.has-phone-icon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
}

/* --------------------------------------------------------------------------
   18. Block-markup corrections

   A handful of places where WordPress's own layout rules need adjusting for
   the design, kept together so they are easy to find later.
   -------------------------------------------------------------------------- */

/* The marquee has to escape the constrained content width or the loop seam
   lands in the middle of the viewport instead of off the edge. */
.aw-rail .aw-marquee { max-width: none; width: max-content; }

/* The site title only stands in when no logo has been set. Once a logo
   exists, core renders it and the title steps aside. */
.aw-header .wp-block-site-logo + .aw-header__title { display: none; }
.aw-header__title a { text-decoration: none; }

/* Page and post heroes: same device as the home hero, shorter. */
.aw-page-hero .wp-block-post-title { color: #fff; max-width: 16ch; }
.aw-page-hero .wp-block-post-excerpt,
.aw-page-hero .wp-block-post-excerpt p {
	margin-top: 1.3rem;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--wp--preset--font-size--lede, 1.2rem);
}
.aw-page-hero .wp-block-post-excerpt__more-text { display: none; }
.aw-page-hero .wp-block-post-date { color: var(--aw-aqua); }

.aw-crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	font-family: var(--aw-mono);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.aw-crumb a { color: var(--aw-aqua); text-decoration: none; }
.aw-crumb__here { color: rgba(255, 255, 255, 0.55); }

/* Numbering inside the capability list summaries. */
.aw-acc summary .n {
	font-family: var(--aw-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--aw-aqua-deep);
	flex: none;
}

/* Footer link lists. */
.aw-footer__list { list-style: none; margin: 0; padding: 0; }
.aw-footer__list li { margin: 0 0 0.55rem; }
.aw-footer .wp-block-navigation__container { gap: 0.55rem; }

/* Blog listing: the plain card again, at post scale. */
.aw-posts .aw-card--plain { min-height: 0; }
.aw-posts .wp-block-post-date {
	margin: 0 0 0.9rem;
	font-family: var(--aw-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aw-aqua-deep);
}
.aw-posts .wp-block-post-title a { text-decoration: none; }
.aw-posts .wp-block-post-title { margin-block: 0 0.6rem; }

/* Cover blocks used as cards need their inner container to fill the tile,
   otherwise the bottom-aligned content floats in the middle. */
.wp-block-cover.aw-card > .wp-block-cover__inner-container { width: 100%; }

/* Tables inside the theme's own wrappers should not inherit core's borders. */
.aw-ticks table,
.aw-dl table,
.aw-hours table,
.aw-table table { border-collapse: collapse; }
.wp-block-table.aw-ticks,
.wp-block-table.aw-dl,
.wp-block-table.aw-hours,
.wp-block-table.aw-table { margin-block: 0; overflow-x: auto; }

/* The theme's own bands supply their vertical rhythm, so core's block gap
   must not add a second helping between them. */
main > .aw-band,
main > .aw-rail,
main > .aw-hero,
.wp-block-post-content > .aw-band,
.wp-block-post-content > .aw-rail,
.wp-block-post-content > .aw-hero { margin-block: 0; }

/* A section heading and its eyebrow, held to a readable measure. Set with a
   max-width rather than a constrained layout so it behaves the same in the
   editor, on the front end and at every breakpoint. */
/* Section title blocks.
   The old constraint was 54ch measured on this element, whose font size is the
   body size — about 550px. A display heading at 3.3rem inside that box wraps to
   three lines when it only needs one or two. The width is now set in absolute
   terms, sized for the heading rather than for body copy, and any standfirst
   paragraph inside keeps its own reading measure. */
.aw-head { max-width: min(100%, 60rem); margin-inline: 0 auto; }
.aw-head > * { margin-block: 0; }
.aw-head > p:not(.aw-eyebrow) { max-width: 56ch; }
.aw-lede { margin-inline: 0 auto; }

/* The banner scrim is deliberately light now, so the weight it needs goes only
   where the type actually sits — along the foot of the hero — rather than
   flatly across the whole photograph. A wash of Ag Worx blue comes in from the
   right over the top. Two classes beat the one-class preset, so no !important
   is needed. */
.aw-hero > .wp-block-cover__background.has-hero-scrim-gradient-background {
	background-image:
		linear-gradient(to top, rgba(7, 16, 38, 0.88) 0%, rgba(7, 16, 38, 0.36) 46%, rgba(7, 16, 38, 0) 72%),
		linear-gradient(96deg, rgba(7, 16, 38, 0.68) 0%, rgba(7, 16, 38, 0.40) 38%, rgba(7, 16, 38, 0.06) 66%, rgba(7, 16, 38, 0) 82%),
		var(--wp--preset--gradient--hero-scrim);
}

/* Page banners put their type top-left, so the weight goes there instead. */
.aw-page-hero > .wp-block-cover__background.has-page-scrim-gradient-background {
	background-image:
		linear-gradient(105deg, rgba(7, 16, 38, 0.78) 0%, rgba(7, 16, 38, 0.28) 46%, rgba(7, 16, 38, 0) 72%),
		var(--wp--preset--gradient--page-scrim);
}

/* Titles inside a constrained hero would otherwise centre themselves once a
   max-width is applied. Keep them hard left, like every other heading. */
.aw-page-hero .wp-block-post-title,
.aw-page-hero .wp-block-post-excerpt,
.aw-hero h1 { margin-inline: 0 auto; }

/* Between the navigation's overlay breakpoint and the desktop layout the menu
   can crowd the phone number. Tighten it rather than let it wrap. */
@media (max-width: 1180px) {
	.aw-header .wp-block-navigation { font-size: 0.86rem; }
	.aw-header .wp-block-navigation .wp-block-navigation__container { gap: 1rem; }
}

/* The card style, available on any Group block from the style picker, so a
   client can build a new card row without asking for code. */
.wp-block-group.is-style-aw-card {
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	border: 1px solid var(--aw-line);
	border-radius: 2px;
	background-color: var(--aw-paper);
	background-image:
		repeating-linear-gradient(0deg, rgba(11, 35, 166, 0.022) 0 1px, transparent 1px 46px),
		repeating-linear-gradient(90deg, rgba(11, 35, 166, 0.022) 0 1px, transparent 1px 46px);
	transition: transform 0.5s var(--aw-ease), box-shadow 0.5s var(--aw-ease);
}
.wp-block-group.is-style-aw-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 26px 50px -30px rgba(7, 16, 38, 0.55);
}

/* Footer link columns read as a quiet list, with aqua kept for the hover.
   Without this they inherit the dark-band link colour and the whole footer
   turns bright blue. */
.aw-footer .aw-footer__list a { color: rgba(255, 255, 255, 0.72); }
.aw-footer .aw-footer__list a:hover { color: var(--aw-aqua); }

/* --------------------------------------------------------------------------
   19. The admin bar

   The header is fixed, so it ignores the margin WordPress adds to <html> for
   the admin bar and ends up underneath it. Only logged-in users ever see
   this, which is exactly the people editing the site.
   -------------------------------------------------------------------------- */

.admin-bar .aw-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .aw-header { top: 46px; }
}

/* --------------------------------------------------------------------------
   20. About and team

   Two more uses of the existing devices rather than two new ones: the
   timeline is the spec table with the year in the key column, and a person
   is the plain card with its auto margins turned off.
   -------------------------------------------------------------------------- */

/* Timeline: no header row, the year doing the work of one. */
.aw-timeline td:first-child {
	width: 7rem;
	color: var(--aw-aqua-deep);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.aw-timeline td:last-child { color: var(--aw-slate); }
.aw-timeline tbody tr:first-child :where(td) { border-top: 1px solid var(--aw-heading); }

/* A person reads top-down, so the card's auto margins — which push a service
   card's link to the foot — have to come off. */
/* The team grid. Any number of cards flows into it, so adding a sixth person
   in the editor needs no layout change: one column on a phone, two on a
   tablet, three on a desktop. */
.aw-team {
	display: grid;
	gap: clamp(1rem, 1.6vw, 1.5rem);
	grid-template-columns: 1fr;
}
.aw-team > * { margin-block: 0 !important; }
@media (min-width: 700px)  { .aw-team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .aw-team { grid-template-columns: repeat(3, 1fr); } }

.aw-person { justify-content: flex-start; }
.aw-person .aw-idx {
	margin-bottom: 0.9rem;
	padding-bottom: 0;
	color: var(--aw-aqua-deep);
	text-transform: none;
	letter-spacing: 0.12em;
}
.aw-person h3 { margin-block: 0 0.9rem; }
.aw-person p { max-width: 46ch; font-size: 0.97rem; }
.aw-person p + p { margin-block-start: 0.9rem; }
.aw-person:hover { transform: none; box-shadow: none; }
.aw-person::after { display: none; }

/* A photograph is optional. Drop an Image block in at the top of a card and
   it sits above the role, square-cropped, without any other change. */
.aw-person .wp-block-image {
	margin: 0 0 1.4rem;
	max-width: 84px;
}
.aw-person .wp-block-image img {
	aspect-ratio: 1;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   21. Two things WordPress's own markup makes awkward
   -------------------------------------------------------------------------- */

/* The header is fixed, so it occupies no space in the flow — but it is still a
   sibling, so the block-gap rule gives whatever follows it a top margin and the
   page background shows as a strip under the admin bar. The footer supplies its
   own padding and wants no gap above it either. */
.wp-site-blocks > .aw-header + * { margin-block-start: 0; }
.wp-site-blocks > .aw-footer { margin-block-start: 0; }

/* Core lets navigation links inherit their colour with
   `.wp-block-navigation:not(.has-text-color) .wp-block-navigation-item__content`,
   which is more specific than a plain descendant selector — so the links were
   inheriting body slate and disappearing into the header. Match that
   specificity and add one. */
.aw-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation-item__content,
.aw-header .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.88);
}
.aw-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation-item__content:hover,
.aw-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }

/* Submenus sit on the dark ground rather than core's default white card. */
.aw-header .wp-block-navigation__submenu-container {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 2px;
	background-color: var(--aw-ink-2);
	padding-block: 0.4rem;
}
.aw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 1.1rem;
	color: rgba(255, 255, 255, 0.82);
}
.aw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.aw-header .wp-block-navigation__submenu-icon { color: currentColor; }

/* --------------------------------------------------------------------------
   22. Pale supplier marks

   A few brands are drawn in very light greys. The rail's default treatment
   knocks logos back, which would erase those completely, so they are darkened
   instead and land at roughly the same weight as the rest.
   -------------------------------------------------------------------------- */

.aw-marquee img.is-pale {
	filter: grayscale(1) brightness(0.55) contrast(1.15) opacity(0.75);
}
.aw-marquee img.is-pale:hover { filter: none; }