/*
 * siteupwell: the single stylesheet (tokens, base, components).
 * Tokens follow docs/BUILD.md §6.1; additions are recorded in docs/DECISIONS.md §8.
 */

/*
 * Urbanist variable font (200–800), self-hosted, OFL (assets/fonts/OFL.txt).
 * Two subsets: English pages only need "latin" (preloaded); "latin-ext" loads on
 * demand for Turkish characters such as ğ, ş, İ. Where both ranges claim a character, the
 * face defined last is tried first, so latin-ext leaves out ı (U+0131): only the latin file
 * has it, and the "KVKK aydınlatma metni" link in every footer would load latin-ext.
 */
@font-face {
	font-family: 'Urbanist';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/urbanist-latin.woff2') format('woff2');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
		U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ==========================================================================
   Tokens (BUILD §6.1 + consolidated design values; table in DECISIONS §8)
   ========================================================================== */

:root {
	/* Color (BUILD §6.1) */
	--ink: #0e0e0e;
	--paper: #ffffff;
	--ivory: #f5f3ee;
	--muted: #6a6a6a;
	--muted-2: #8c8c8c;
	--muted-dark: #a3a3a3;
	--text-2: #3a3a3a;
	--line: #dcd8cf;
	--line-soft: #ece9e2;
	--line-dark: #2a2a2a;
	--accent: #ffd12e;
	--good: #2fbf71;
	--warn: #f2b705;
	--bad: #e5484d;
	--note-bg: #fffbea;

	/* Color additions from the design */
	--on-dark: #e6e6e6;
	--line-on-dark: rgb(255 255 255 / 0.25);
	--bad-bg: #fdecec;
	--bad-ink: #9b1c1f;
	--header-bg: rgb(255 255 255 / 0.88);

	/* Shadows and rings */
	--shadow-feature: 0 60px 110px -70px rgb(0 0 0 / 0.45);
	--shadow-pill: 0 1px 6px rgb(0 0 0 / 0.18);
	--ring-hairline: 0 0 0 1px rgb(0 0 0 / 0.07);
	--focus-ring: 0 0 0 4px rgb(14 14 14 / 0.12);

	/* Layout */
	--container: 1360px;
	--gutter: clamp(16px, 4vw, 56px);
	--section-y: clamp(72px, 9vw, 136px);
	--section-y-sm: clamp(56px, 7vw, 96px);
	--section-y-lg: clamp(80px, 10vw, 160px);
	--hero-top: clamp(48px, 7vw, 104px);
	--flow-xl: clamp(48px, 6vw, 80px);
	--flow-lg: clamp(40px, 5vw, 64px);
	--flow-md: clamp(32px, 4vw, 52px);
	--flow-sm: clamp(24px, 3vw, 36px);

	/* Spacing scale */
	--s-0-5: 2px;
	--s-1: 4px;
	--s-1-5: 6px;
	--s-2: 8px;
	--s-2-5: 10px;
	--s-3: 12px;
	--s-3-5: 14px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 28px;
	--s-8: 32px;
	--s-10: 40px;
	--s-12: 48px;
	--s-14: 56px;
	--s-16: 64px;
	--s-20: 80px;

	/* Radii */
	--radius-md: 14px;
	--radius: 16px;
	--radius-lg: 18px;
	--pill: 999px;

	/* Type: family and sizes */
	--font: 'Urbanist', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
	--h1: clamp(3.2rem, 8.6vw, 8.75rem);
	--h1-xl: clamp(3.6rem, 11vw, 11rem);
	--h-display: clamp(3rem, 7vw, 7rem);
	--h2: clamp(2.6rem, 5vw, 4.75rem);
	--h2-sm: clamp(2.4rem, 4.4vw, 4rem);
	--h3-lg: clamp(2.2rem, 3.4vw, 3rem);
	--h3: clamp(1.8rem, 3vw, 2.75rem);
	--stat: clamp(3.5rem, 6vw, 5.5rem);
	--stat-sm: clamp(2rem, 3.4vw, 3rem);
	--price: clamp(3.5rem, 5vw, 4.75rem);
	--price-sm: 48px;
	--title-lg: 34px;
	--title: 26px;
	--title-sm: 20px;
	--lead: clamp(17px, 1.5vw, 20px);
	--body-lg: 18px;
	--body: 16px;
	--body-sm: 15px;
	--ui: 14px;
	--small: 13px;
	--label: 12px;
	--micro: 11px;

	/* Type: line heights */
	--lh-display: 0.9;
	--lh-numeral: 0.85;
	--lh-heading: 0.98;
	--lh-tight: 1;
	--lh-snug: 1.1;
	--lh-list: 1.4;
	--lh-body: 1.5;
	--lh-prose: 1.65;

	/* Type: tracking */
	--tr-display: -0.06em;
	--tr-heading: -0.05em;
	--tr-title: -0.04em;
	--tr-tight: -0.03em;
	--tr-meta: 0.04em;
	--tr-chip: 0.08em;
	--tr-btn: 0.12em;
	--tr-label: 0.16em;

	/* Controls */
	--tap: 44px;
	--control-h: 52px;
	--control-h-sm: 44px;
	--input-h: 56px;
	--dot: 44px;
	--dot-sm: 38px;
	--header-h: 73px;
	--sticky-top: 96px;

	/* Motion */
	--ease: ease;
	--ease-spin: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast: 0.25s;
	--dur: 0.35s;
	--dur-slow: 0.8s;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

/* Anchors and focused elements stop below the sticky header (WCAG 2.4.11). :root beats
   core's admin-bar rule on html. */
:root {
	scroll-padding-top: calc(
		var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--s-2)
	);
}

/* The header's own controls sit inside that padding, though the sticky header keeps them in
   view: Chrome took them for hidden and scrolled the page about half a screen up on every
   focus there (Shift+Tab back into the header). The opposite margin cancels the padding for
   them, and for the open menu's links (its first link starts 4px inside the padding). The
   menu panel scrolls on its own on short screens, so it takes the same padding back: inside
   it the two cancel too. With JavaScript only: without it the header stops being sticky
   below 980px and the menu is a plain list. */
.js :is(.suw-skip, .suw-header__bar a, .suw-header__bar button, .suw-mobile-menu a) {
	scroll-margin-top: calc(
		-1 * (var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--s-2))
	);
}

.js .suw-mobile-menu {
	scroll-padding-top: calc(
		var(--header-h) + var(--wp-admin--admin-bar--height, 0px) + var(--s-2)
	);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--body);
	font-weight: 500;
	/* As in the design: text blocks set their own line-height; everything else stays normal. */
	line-height: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Readable default for running text in content (core blocks); components set their own. */
main :where(p, li, dd, blockquote, figcaption) {
	line-height: var(--lh-body);
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd,
blockquote {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: 300;
	text-wrap: balance;
}

/* Chromium balances no paragraph that holds a forced break, so in a two-tone heading the part
   after the <br> wrapped as plain text and could end on one word ("first.", "now.", "site.").
   pretty keeps a one-word last line off where it can. The parts that are inline blocks (the
   grey em, Block styles; .suw-guide-ink) are paragraphs of their own and stay balanced. */
:is(h1, h2, h3):has(> br) {
	text-wrap: pretty;
}

:is(h1, h2, h3):has(> br) > * {
	text-wrap: balance;
}

a {
	color: inherit;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

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

.suw-section--dark :focus-visible,
.is-style-suw-section-dark :focus-visible,
.suw-footer :focus-visible {
	outline-color: var(--paper);
}

/* Visually hidden until focused: the first stop for keyboard users. It is the header's first
   child (header.php), so the sticky header is its containing block: it shows at the top of
   the screen wherever the page is scrolled, and below the admin bar through the header's own
   offset. Its z-index counts inside the header's (50). */
.suw-skip {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100;
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: var(--s-3) var(--s-4);
	border-radius: var(--pill);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--small);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.suw-skip:focus {
	transform: none;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

.suw-container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.suw-section--ivory {
	background: var(--ivory);
}

.suw-section--dark {
	background: var(--ink);
	color: var(--ivory);
}

/* ==========================================================================
   Typography utilities
   ========================================================================== */

.suw-label {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.suw-section--dark .suw-label,
.is-style-suw-section-dark .suw-label,
.is-style-suw-section-dark .is-style-suw-label {
	color: var(--muted-dark);
}

.suw-lead {
	font-size: var(--lead);
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--muted);
}

/* Two-part display heading: a grey first part and an ink second part. A word wider than the
   line breaks instead of pushing the page sideways ("gerektiriyorsa." at 390px with WCAG
   1.4.12 text spacing); a word that fits never breaks. The display block style does the same. */
.suw-display {
	font-size: var(--h2);
	font-weight: 300;
	line-height: var(--lh-heading);
	letter-spacing: var(--tr-heading);
	overflow-wrap: anywhere;
}

.suw-display--h1 {
	font-size: var(--h1);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
}

.suw-display__a {
	color: var(--muted-2);
}

.suw-section--dark .suw-lead,
.is-style-suw-section-dark .suw-lead,
.is-style-suw-section-dark .is-style-suw-lead {
	color: var(--muted-dark);
}

.suw-section--dark .suw-display__b,
.is-style-suw-section-dark .suw-display__b {
	color: var(--paper);
}

/* ==========================================================================
   Links and motion helpers (.lk, .suw-hit, .arrow, .lift, .portrait)
   ========================================================================== */

/* Underline that draws from left to right on hover and focus; stays on the current page. */
.lk {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size var(--dur) var(--ease);
}

.lk:hover,
.lk:focus-visible,
.lk[aria-current='page'] {
	background-size: 100% 1px;
}

/* Hit area for a small standalone link: a 44px tap target on touch screens (BUILD §20),
   as the footer links have (DECISIONS §8). The ::before is invisible, 44px tall and at
   least 44px wide, centred on the link, so the link and its .lk underline look the same.
   Not for links inside running text. Neighbours need a 44px pitch, or the later area
   covers part of the earlier one. */
@media (pointer: coarse) {
	.suw-hit {
		position: relative;
	}

	.suw-hit::before {
		content: '';
		position: absolute;
		inset: calc((100% - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2);
	}
}

.arrow svg {
	transition: transform var(--dur) var(--ease);
}

.arrow:hover svg,
.arrow:focus-visible svg {
	transform: rotate(45deg);
}

.lift {
	transition: transform var(--dur) var(--ease);
}

.lift:hover {
	transform: translateY(-4px);
}

.portrait img {
	transition: transform var(--dur-slow) var(--ease);
}

.portrait:hover img {
	transform: scale(1.02);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.suw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: var(--control-h);
	padding: var(--s-1) var(--s-1) var(--s-1) var(--s-5);
	border: 0;
	border-radius: var(--pill);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.suw-btn__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
}

.suw-btn--sm {
	gap: var(--s-2-5);
	min-height: var(--control-h-sm);
	padding: var(--s-0-5) var(--s-0-5) var(--s-0-5) var(--s-4);
	font-size: var(--label);
}

.suw-btn--sm .suw-btn__icon {
	width: var(--dot-sm);
	height: var(--dot-sm);
}

/* Primary: ink pill, yellow arrow circle. */
.suw-btn--primary {
	background: var(--ink);
	color: var(--paper);
}

.suw-btn--primary .suw-btn__icon {
	background: var(--accent);
	color: var(--ink);
}

/* Accent: yellow pill, ink circle (current page state and dark-band forms). */
.suw-btn--accent {
	background: var(--accent);
	color: var(--ink);
	font-weight: 800;
}

.suw-btn--accent .suw-btn__icon {
	background: var(--ink);
	color: var(--paper);
}

/* Secondary on light: white pill with an ink outline and ink circle.
   Outlined buttons are 2px taller than filled ones, as in the design. */
.suw-btn--secondary {
	border: 1px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
}

.suw-btn--secondary .suw-btn__icon {
	background: var(--ink);
	color: var(--paper);
}

/* Secondary on dark: outlined pill with a white circle. */
.suw-btn--on-dark {
	border: 1px solid var(--ivory);
	background: transparent;
	color: var(--paper);
}

.suw-btn--on-dark .suw-btn__icon {
	background: var(--paper);
	color: var(--ink);
}

/* Forced colours paint the fills of the pill and its circle as Canvas: an outline keeps the
   pill (over the border of the outlined styles), and the circle is filled in the link or button
   text colour with its icon in the background colour. !important: the styles above and the
   blocks colour the circle with two- and three-class selectors. */
@media (forced-colors: active) {
	.suw-btn:not(:focus-visible) {
		outline: 1px solid;
		outline-offset: -1px;
	}

	.suw-btn__icon {
		forced-color-adjust: none;
		background: LinkText !important;
		color: Canvas !important;
	}

	button.suw-btn .suw-btn__icon {
		background: ButtonText !important;
		color: ButtonFace !important;
	}
}

/* ==========================================================================
   Chips, badges, cards
   ========================================================================== */

.suw-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: 0 var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--paper);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-chip);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.suw-chip[aria-pressed='true'],
.suw-chip[aria-current='page'],
input:checked + .suw-chip {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Hover fills only where there is a pointer that hovers: on a touch screen the hover state
   stays after a tap, so an unchecked chip would still look checked. */
@media (hover: hover) {
	.suw-chip:hover {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--paper);
	}
}

/* Forced colours drop the ink fill that marks a selected chip or tab, so every selected
   state gets an inset ring in the text colour instead; blocks don't repeat it. The ring is
   the border of an ::after, not an outline: the focus outline (:focus-visible) shows on a
   selected chip or tab too, and the box keeps its size. */
@media (forced-colors: active) {
	.suw-chip[aria-pressed='true'],
	.suw-chip[aria-current='page'],
	.suw-chip[aria-selected='true'],
	input:checked + .suw-chip,
	.suw-compare__tab[aria-selected='true'] {
		position: relative;
	}

	.suw-chip[aria-pressed='true']::after,
	.suw-chip[aria-current='page']::after,
	.suw-chip[aria-selected='true']::after,
	input:checked + .suw-chip::after,
	.suw-compare__tab[aria-selected='true']::after {
		content: '';
		position: absolute;
		inset: 1px;
		border: 2px solid CanvasText;
		border-radius: inherit;
		pointer-events: none;
	}
}

.suw-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1-5);
	padding: var(--s-1-5) var(--s-2-5);
	border-radius: var(--pill);
	font-size: var(--micro);
	font-weight: 800;
	letter-spacing: var(--tr-label);
	line-height: 1;
	text-transform: uppercase;
}

.suw-badge--accent {
	background: var(--accent);
	color: var(--ink);
}

.suw-badge--dark {
	background: var(--ink);
	color: var(--paper);
}

.suw-badge--dark::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.suw-card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
}

.suw-card--ivory {
	background: var(--ivory);
}

/* Hairline grid: 1px gaps over a line-colored background. Cells are white with ink text, also
   on a dark section; a cell whose heading holds a link (the whole cell is the link, Patterns ›
   Cells) fills on hover. A link in a cell's text is an in-text link and fills nothing. */
.suw-cells {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}

.suw-cells > * {
	background: var(--paper);
	color: var(--ink);
	transition: background-color var(--dur) var(--ease);
}

.suw-cells > :has(:where(.wp-block-heading) a):hover {
	background: var(--ivory);
}

/* ==========================================================================
   Header (BUILD §7.1)
   ========================================================================== */

.suw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--header-bg);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line-soft);
}

.admin-bar .suw-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.suw-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-3-5) var(--gutter);
}

.suw-logo {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--tap);
	color: var(--ink);
	font-size: 24px; /* component constant: header logo */
	font-weight: 600;
	letter-spacing: var(--tr-heading);
	text-decoration: none;
}

.suw-logo__dot {
	width: 8px;
	height: 8px;
	margin-top: var(--s-2);
	border-radius: 50%;
	background: var(--accent);
}

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

.suw-nav__link {
	position: relative;
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--ink);
}

/* 44px hit area around the 12px link, with no visual change (BUILD §20). */
.suw-nav__link::before {
	content: '';
	position: absolute;
	inset: -14px -6px;
}

.suw-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-2-5);
}

/* Editor-only preview language switch (DECISIONS §1). The other language's link is --text-2:
   --muted is 4.2:1 on the 88% white header where it passes over a dark section (4.5:1 asked). */
.suw-lang {
	display: flex;
	gap: var(--s-0-5);
}

.suw-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--s-2);
	border-radius: var(--pill);
	color: var(--text-2);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-decoration: none;
}

.suw-lang__btn[aria-current='true'] {
	background: var(--ink);
	color: var(--paper);
}

.suw-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

.suw-mobile-menu {
	display: none;
	flex-direction: column;
	padding: var(--s-1) var(--gutter) var(--s-5);
	border-top: 1px solid var(--line-soft);
}

/* The open panel (with JavaScript) lies over the page under the sticky header, and scrolls
   inside itself on short or zoomed screens. */
.suw-mobile-menu.is-open {
	max-height: calc(100dvh - var(--header-h) - var(--wp-admin--admin-bar--height, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.suw-mobile-menu__nav {
	display: flex;
	flex-direction: column;
}

.suw-mobile-menu__link {
	display: flex;
	align-items: center;
	min-height: 56px;
	border-bottom: 1px solid var(--line-soft);
	color: var(--ink);
	font-size: 22px; /* component constant: mobile menu link */
	font-weight: 400;
	letter-spacing: var(--tr-tight);
	text-decoration: none;
}

.suw-mobile-menu__link[aria-current='page'] {
	font-weight: 600;
}

.suw-mobile-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--control-h);
	margin-top: var(--s-4);
	border-radius: var(--pill);
	background: var(--ink);
	color: var(--paper);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	text-decoration: none;
}

/* Range syntax leaves no gap between the two layouts at fractional (zoomed) widths. */
@media (width <= 980px) {
	.suw-nav {
		display: none;
	}

	.suw-menu-toggle {
		display: inline-flex;
	}

	/* Without JavaScript the menu stays open as a plain list, and the header stops being
	   sticky so the list does not pin half the screen. */
	.no-js .suw-header {
		position: relative;
	}

	.no-js .suw-menu-toggle {
		display: none;
	}

	.no-js .suw-mobile-menu,
	.suw-mobile-menu.is-open {
		display: flex;
	}

	/* The open panel is an overlay (user decision, 2026-10-31): out of the page flow, under the
	   header and over the content, so opening and closing the menu moves nothing. It keeps the
	   header's look: the same translucent white and blur, and a hairline at its foot where the
	   grown header's border used to be. A blur inside an element that has its own blur can't
	   see the page behind it (backdrop root), so while the menu is open the header's
	   background and blur move to its ::before; closed, the header is untouched. The padding
	   keeps the items clear of the safe areas. */
	.suw-mobile-menu.is-open {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
		padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
		padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
		border-bottom: 1px solid var(--line-soft);
		background: var(--header-bg);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	.suw-header:has(.suw-mobile-menu.is-open) {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.suw-header:has(.suw-mobile-menu.is-open)::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--header-bg);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

@media (width <= 560px) {
	.suw-header__cta {
		display: none;
	}
}

/* Editor-only switch: no room for it next to the full menu just above the breakpoint. */
@media (980px < width <= 1120px) {
	.suw-lang {
		display: none;
	}
}

/* The admin bar scrolls away on small screens, so the sticky header goes back to the top. */
@media (width <= 600px) {
	.admin-bar .suw-header {
		top: 0;
	}
}

/* ==========================================================================
   Footer (BUILD §7.2)
   ========================================================================== */

.suw-footer {
	overflow: hidden;
	border-top: 1px solid var(--line-dark);
	background: var(--ink);
	color: var(--ivory);
}

.suw-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: var(--s-10) var(--s-8);
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--flow-xl) var(--gutter) var(--s-8);
}

.suw-footer__brand,
.suw-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.suw-footer__logo {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: 28px; /* component constant: footer logo */
	font-weight: 600;
	letter-spacing: var(--tr-heading);
}

.suw-footer__logo .suw-logo__dot {
	margin-top: var(--s-2-5);
}

.suw-footer__tag {
	color: var(--muted-dark);
	font-size: var(--ui);
	font-weight: 500;
	line-height: var(--lh-body);
}

.suw-footer__markets {
	color: var(--on-dark);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.suw-footer__title {
	color: var(--muted-dark);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.suw-footer__link {
	align-self: flex-start;
	color: var(--on-dark);
	font-size: var(--ui);
	font-weight: 600;
	/* Urbanist's "normal" line height, written out: Firefox resolves 1lh below with the
	   fallback font before Urbanist loads and keeps that value. */
	line-height: 1.2;
}

/* Touch screens: 44px tap targets on a 44px pitch (BUILD §20; DECISIONS §8). The hit area
   is a pseudo-element, so the .lk underline stays under the text. */
@media (pointer: coarse) {
	.suw-footer__link {
		position: relative;
	}

	/* 44px tall, and at least 44px wide, centred on the link. */
	.suw-footer__link::before {
		content: '';
		position: absolute;
		inset: calc((100% - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2);
	}

	/* Link box (1lh + the 2px .lk padding) + column gap + margin = 44px. */
	.suw-footer__link + .suw-footer__link {
		margin-top: calc(var(--tap) - 1lh - 2px - var(--s-3));
	}
}

.suw-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-6);
	max-width: var(--container);
	margin-inline: auto;
	padding: var(--s-5) var(--gutter);
	border-top: 1px solid var(--line-dark);
	color: var(--muted-dark);
	font-size: var(--small);
	font-weight: 500;
}

/* Giant wordmark: sized to fit 360–1920px without overflowing (decorative). */
.suw-footer__wordmark {
	display: flex;
	align-items: flex-end;
	gap: 1.5vw;
	max-width: var(--container);
	margin-inline: auto;
	padding: 0 var(--gutter);
	overflow: hidden;
}

.suw-footer__wordmark-text {
	color: var(--ivory);
	font-size: clamp(4.5rem, 19vw, 17rem);
	font-weight: 600;
	line-height: 0.78;
	letter-spacing: -0.075em;
	transform: translateY(10%);
}

.suw-footer__wordmark-dot {
	flex: none;
	width: clamp(14px, 2.4vw, 34px);
	height: clamp(14px, 2.4vw, 34px);
	margin-bottom: 4%;
	border-radius: 50%;
	background: var(--accent);
}

/* ==========================================================================
   Block styles (BUILD §9; registered in inc/block-styles.php)
   ========================================================================== */

.wp-block-group.is-style-suw-section,
.wp-block-group.is-style-suw-section-ivory,
.wp-block-group.is-style-suw-section-dark {
	padding: var(--section-y) var(--gutter);
}

.wp-block-group.is-style-suw-section-ivory {
	background: var(--ivory);
}

.wp-block-group.is-style-suw-section-dark {
	background: var(--ink);
	color: var(--ivory);
}

.wp-block-group.is-style-suw-card {
	padding: var(--flow-sm);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--paper);
}

/* Draft note: visible in the editor and on staging only (hidden on production, phase 7). */
.wp-block-group.is-style-suw-note {
	max-width: 820px;
	padding: var(--s-4) var(--s-5);
	border: 1px dashed var(--ink);
	border-radius: var(--radius-md);
	background: var(--note-bg);
	color: var(--text-2);
	font-size: var(--body-sm);
	line-height: var(--lh-body);
}

/* "Short answer" box in guides: ivory with a yellow left rule. */
.wp-block-group.is-style-suw-short-answer {
	padding: var(--s-6) var(--s-6);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	background: var(--ivory);
	font-size: var(--body-lg);
	line-height: var(--lh-body);
}

/* Two-tone display heading: italic (em) marks the grey first part in the editor. A word wider
   than the line breaks, as in .suw-display. */
.wp-block-heading.is-style-suw-display {
	font-size: var(--h2);
	font-weight: 300;
	line-height: var(--lh-heading);
	letter-spacing: var(--tr-heading);
	overflow-wrap: anywhere;
}

.wp-block-heading.is-style-suw-display em {
	font-style: normal;
	color: var(--muted-2);
}

/* Each part of a two-tone heading is balanced on its own (h1–h4 have text-wrap: balance): the
   part before the line break is an inline block. Otherwise the longer part sets the width the
   whole heading balances to, and the grey part can leave one word on a line ("From standard /
   site" at 360px becomes "From / standard site"). */
.wp-block-heading em:has(+ br) {
	display: inline-block;
}

/* Line height as in the design (normal); main gives other paragraphs 1.5. A label that wraps is
   balanced, so no word is left alone on its last line. */
p.is-style-suw-label {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: var(--tr-label);
	line-height: normal;
	text-transform: uppercase;
	color: var(--muted);
	text-wrap: balance;
}

p.is-style-suw-lead {
	max-width: 28em;
	font-size: var(--lead);
	line-height: var(--lh-body);
	color: var(--muted);
	text-wrap: pretty;
}

/* Lists: every style works on ul and ol (core/list renders .wp-block-list). */
.wp-block-list.is-style-suw-check,
.wp-block-list.is-style-suw-lined {
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-suw-check > li {
	position: relative;
	padding-left: var(--s-6);
}

.wp-block-list.is-style-suw-check > li::before {
	content: '';
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--suw-icon-check-bold) center / contain no-repeat;
	mask: var(--suw-icon-check-bold) center / contain no-repeat;
}

.wp-block-list.is-style-suw-lined > li {
	padding-block: var(--s-3);
	border-bottom: 1px solid var(--line);
}

/* Buttons: same pill and arrow circle as .suw-btn; the circle is drawn by ::after. */
.wp-block-button[class*='is-style-suw-'] .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	min-height: var(--control-h);
	padding: var(--s-1) var(--s-1) var(--s-1) var(--s-5);
	border-radius: var(--pill);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-button[class*='is-style-suw-'] .wp-block-button__link::after {
	content: '';
	flex: none;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
	background:
		var(--suw-btn-arrow) center / 16px no-repeat,
		var(--suw-btn-circle);
	transition: transform var(--dur) var(--ease);
}

.wp-block-button[class*='is-style-suw-'] .wp-block-button__link:hover::after,
.wp-block-button[class*='is-style-suw-'] .wp-block-button__link:focus-visible::after {
	transform: rotate(45deg);
}

.wp-block-button.is-style-suw-primary .wp-block-button__link {
	--suw-btn-circle: var(--accent);
	--suw-btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	background: var(--ink);
	color: var(--paper);
}

.wp-block-button.is-style-suw-secondary .wp-block-button__link {
	--suw-btn-circle: var(--ink);
	--suw-btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	border: 1px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
}

.wp-block-button.is-style-suw-on-dark .wp-block-button__link {
	--suw-btn-circle: var(--paper);
	--suw-btn-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	border: 1px solid var(--ivory);
	background: transparent;
	color: var(--paper);
}

/* Forced colours paint the pill and the circle as Canvas, and the arrow is an image in a fixed
   colour: an outline keeps the pill (over the border of the outlined styles), and the circle is
   filled in the link colour with the arrow (or calendar) cut out of it. */
@media (forced-colors: active) {
	.wp-block-button[class*='is-style-suw-'] .wp-block-button__link:not(:focus-visible) {
		outline: 1px solid;
		outline-offset: -1px;
	}

	.wp-block-button[class*='is-style-suw-'] .wp-block-button__link::after {
		forced-color-adjust: none;
		background: LinkText;
		mask:
			var(--suw-btn-arrow) center / 16px no-repeat exclude,
			linear-gradient(#000 0 0);
	}
}

/* ==========================================================================
   404 (BUILD §18.4)
   ========================================================================== */

.suw-404__title {
	margin-top: var(--s-6);
}

.suw-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	margin-top: var(--flow-md);
}

/* ==========================================================================
   Turkish view marker (DECISIONS §1): editors only, printed by the plugin's View class
   ========================================================================== */

.suw-tr-stale {
	position: fixed;
	bottom: var(--s-4);
	left: var(--s-4);
	z-index: 100;
	max-width: calc(100vw - 2 * var(--s-4));
	max-height: 50vh;
	overflow: auto;
	border-radius: var(--radius-md);
	background: var(--ink);
	box-shadow: var(--shadow-pill);
	color: var(--paper);
	font-size: var(--small);
}

.suw-tr-stale summary {
	min-height: var(--tap);
	padding: var(--s-3) var(--s-4);
	font-weight: 700;
	cursor: pointer;
}

.suw-tr-stale ul {
	margin: 0;
	padding: 0 var(--s-4) var(--s-3);
	list-style: none;
}

.suw-tr-stale li + li {
	margin-top: var(--s-1);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

	/* The hover lift is movement, so it goes, wherever .lift is used. */
	.lift:hover {
		transform: none;
	}
}

/* ==========================================================================
   Patterns (phase 4): page sections built from core blocks by inc/patterns.php.
   Shared by every page; how to use them: artifacts/specs/faz4/_pattern-conventions.md.
   Page-only rules go in the page regions below, never here.
   ========================================================================== */

/* Line icons from the design (Lucide paths). Masks take the text colour; the button, pill and
   FAQ icons ("-ink", "-paper") are backgrounds, so they carry their colour. Cell icons are the
   .suw-icon--{name} list under "Cells". */
:root {
	--suw-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--suw-icon-check-bold: 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='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--suw-icon-check-bold-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--suw-icon-file: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
	--suw-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
	--suw-icon-plus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	--suw-icon-arrow-up-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
	--suw-icon-calendar-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E0E0E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	--suw-icon-calendar-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

/* ---------- Sections and container ----------
   A pattern section is a <section> group in a section style (white, ivory, dark) holding a
   .suw-container: the container brings the gutter and the 1248px content width, as in every
   block of the plugin, so a section with a container child drops its own side padding. A
   section without one keeps the style's gutter. */
.wp-block-group:is(
		.is-style-suw-section,
		.is-style-suw-section-ivory,
		.is-style-suw-section-dark
	):has(> .suw-container) {
	padding-inline: 0;
}

/* Section padding: the block style gives var(--section-y) top and bottom; these change it. */
.wp-block-group.suw-pt-0 {
	padding-top: 0;
}

.wp-block-group.suw-pb-0 {
	padding-bottom: 0;
}

.wp-block-group.suw-pt-hero {
	padding-top: var(--hero-top);
}

.wp-block-group.suw-pt-sm {
	padding-top: var(--section-y-sm);
}

.wp-block-group.suw-pb-sm {
	padding-bottom: var(--section-y-sm);
}

.wp-block-group.suw-py-sm {
	padding-block: var(--section-y-sm);
}

.wp-block-group.suw-pt-lg {
	padding-top: var(--section-y-lg);
}

.wp-block-group.suw-pb-lg {
	padding-bottom: var(--section-y-lg);
}

.wp-block-group.suw-py-lg {
	padding-block: var(--section-y-lg);
}

.wp-block-group.suw-pb-flow-lg {
	padding-bottom: var(--flow-lg);
}

.wp-block-group.suw-pb-flow-xl {
	padding-bottom: var(--flow-xl);
}

/* Component constant: the closing CTA of Home and Inspection. */
.wp-block-group.suw-pb-cta {
	padding-bottom: clamp(64px, 7vw, 104px);
}

/* Component constant from the design: a hero band that ends close to what follows (Work), and
   the padding of the Services blocks, which use the custom property. */
:root {
	--suw-pb-hero: clamp(40px, 5vw, 72px);
}

.wp-block-group.suw-pb-hero {
	padding-bottom: var(--suw-pb-hero);
}

/* ---------- Vertical rhythm ----------
   Flow groups add no space between blocks (blockGap stays off), so a block that needs space
   above it takes one of these. */
.suw-mt-2 {
	margin-top: var(--s-2);
}

.suw-mt-3 {
	margin-top: var(--s-3);
}

.suw-mt-4 {
	margin-top: var(--s-4);
}

.suw-mt-5 {
	margin-top: var(--s-5);
}

.suw-mt-6 {
	margin-top: var(--s-6);
}

.suw-mt-7 {
	margin-top: var(--s-7);
}

.suw-mt-8 {
	margin-top: var(--s-8);
}

.suw-mt-10 {
	margin-top: var(--s-10);
}

.suw-mt-flow-sm {
	margin-top: var(--flow-sm);
}

.suw-mt-flow-md {
	margin-top: var(--flow-md);
}

.suw-mt-flow-lg {
	margin-top: var(--flow-lg);
}

.suw-mt-flow-xl {
	margin-top: var(--flow-xl);
}

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

/* Items spread across one row, wrapping when they don't fit. */
.suw-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2) var(--s-6);
}

/* Columns of at least 420px (380px narrow) that stack below. */
.suw-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: var(--s-7) var(--s-16);
}

.suw-cols--narrow {
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

.suw-cols--loose {
	gap: var(--s-10) var(--s-20);
}

.suw-cols--start {
	align-items: start;
}

.suw-cols--center {
	align-items: center;
}

.suw-cols--end {
	align-items: end;
}

/* Two columns of at least 460px (Home › inspection + sample report; report spec P4). */
.suw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
	gap: var(--s-14) var(--s-20);
	align-items: center;
}

/* ---------- Section head ---------- */

/* A label over the H2, as the blocks draw theirs. */
.suw-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.suw-section-head--center {
	align-items: center;
	text-align: center;
}

/* A head beside a link (or a short text), bottoms aligned. --loose: the heroes' wider gaps,
   e.g. a lead beside filter chips (Work, Pricing, Guides). */
.suw-head-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--s-4) var(--s-10);
}

.suw-head-row.suw-head-row--loose {
	gap: var(--s-6) var(--s-12);
}

/* ---------- Display headings ----------
   The display style sets var(--h2). A font size preset (theme.json, picked in the editor or
   set by a pattern) changes the size with !important; these rules add the leading and
   tracking of that size. Two classes each, so they follow the display style's (0,2,0).
   hero-xl keeps the design's tracking, a component constant: --tr-display (-0.06em) is 0.9px
   per letter wider at 176px, past the token rounding (DECISIONS §8.1). */
.wp-block-heading.has-hero-xl-font-size {
	line-height: var(--lh-numeral);
	letter-spacing: -0.065em;
}

.wp-block-heading:is(.has-hero-font-size, .has-display-font-size, .has-number-font-size) {
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
}

.wp-block-heading:is(.has-heading-font-size, .has-heading-sm-font-size) {
	line-height: var(--lh-heading);
	letter-spacing: var(--tr-heading);
}

.wp-block-heading:is(
	.has-subheading-lg-font-size,
	.has-subheading-font-size,
	.has-number-sm-font-size
) {
	line-height: var(--lh-tight);
	letter-spacing: var(--tr-heading);
}

.wp-block-heading:is(.has-title-lg-font-size, .has-title-font-size, .has-title-sm-font-size) {
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-title);
}

/* The closing CTA heading of Home and Inspection sits between --h1 and --h-display. */
.wp-block-heading.suw-display-cta {
	font-size: clamp(3.2rem, 8vw, 8rem); /* component constant: closing CTA (Home, Inspection) */
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
}

/* On dark the ink part of a two-tone heading is white, as in the design. */
.is-style-suw-section-dark .wp-block-heading.is-style-suw-display {
	color: var(--paper);
}

/* ---------- Text ---------- */

/* The heroes' wider leads, as in the design (the lead style stops at 28em): --mid 30em
   (Inspection, Pricing, Guides), --wide 32em (About, Start). */
p.is-style-suw-lead.suw-lead--mid {
	max-width: 30em;
}

p.is-style-suw-lead.suw-lead--wide {
	max-width: 32em;
}

/* A small label, 11px and bold: "Deliverables", "Best for", the payment terms. */
p.is-style-suw-label.suw-label--sm {
	font-size: var(--micro);
	font-weight: 700;
}

/* ---------- Links in pattern text ----------
   The .lk underline that draws on hover and focus. Inline links in a sentence are ink and
   bold, so they stand apart from the muted text without the underline (WCAG 1.4.1); on dark
   they are paper. Sentences that hold a link: .suw-more, the lead, a cell's text and the About
   principles' lines (on-page SEO §2: the Pricing CTA, Work hero, Inspection and About links). */
:is(.is-style-suw-link, .suw-crumb, .suw-more, .is-style-suw-lead, .suw-about-row__text) a,
.suw-cell > p a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: background-size var(--dur) var(--ease);
}

:is(.is-style-suw-link, .suw-crumb, .suw-more, .is-style-suw-lead, .suw-about-row__text)
	a:is(:hover, :focus-visible),
.suw-cell > p a:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}

/* The crumb's site name is ink, so the link stands apart from the muted label (WCAG 1.4.1); the
   Legal template's crumb (page-legal.php) takes the same class. */
.suw-crumb a {
	color: var(--ink);
}

/* A muted line with a bold link, e.g. the FAQ's "write to us". */
.suw-more {
	color: var(--muted);
	font-size: var(--body);
}

:is(.suw-more, .is-style-suw-lead, .suw-about-row__text) a,
.suw-cell > p a {
	color: var(--ink);
	font-weight: 700;
}

/* Cells stay white on a dark section, so their links stay ink. */
.is-style-suw-section-dark .suw-more,
.is-style-suw-section-dark .suw-crumb a,
.is-style-suw-section-dark :is(.suw-more, .is-style-suw-lead) a {
	color: var(--paper);
}

/* Standalone link with an arrow ("All services →"); the arrow is decoration. */
p.is-style-suw-link {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	line-height: normal;
	text-transform: uppercase;
}

p.is-style-suw-link a::after {
	content: '\00a0\2192';
	content: '\00a0\2192' / '';
}

/* 44px tap area on touch screens, as .suw-hit gives the blocks' small links. */
@media (pointer: coarse) {
	:is(p.is-style-suw-link, .suw-crumb) a {
		position: relative;
	}

	:is(p.is-style-suw-link, .suw-crumb) a::before {
		content: '';
		position: absolute;
		inset: calc((100% - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2);
	}
}

/* ---------- Tags and chips ---------- */

/* Tag: a small outlined pill (process steps, platform years). Fills: --dark, --accent, --ivory. */
p.is-style-suw-tag {
	width: fit-content;
	padding: var(--s-1-5) var(--s-3);
	border: 1px solid currentColor;
	border-radius: var(--pill);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	line-height: normal;
	text-transform: uppercase;
}

p.is-style-suw-tag.suw-tag--dark {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

p.is-style-suw-tag.suw-tag--accent {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--ink);
}

p.is-style-suw-tag.suw-tag--ivory {
	border-color: var(--ivory);
	background: var(--ivory);
	color: var(--ink);
}

/* Chips: list items as pills in a wrapping row, ink on white also on a dark section. A chip
   holding a link is clickable as a whole. */
.wp-block-list.is-style-suw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-suw-chips > li {
	position: relative;
	padding: var(--s-2-5) var(--s-4);
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--paper);
	color: var(--ink);
	font-size: var(--body-sm);
	font-weight: 600;
	line-height: var(--lh-list);
	transition:
		background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.wp-block-list.is-style-suw-chips > li > a {
	color: inherit;
	text-decoration: none;
}

.wp-block-list.is-style-suw-chips > li > a::after {
	content: '';
	position: absolute;
	inset: min(0px, (100% - var(--tap)) / 2) 0;
	border-radius: var(--pill);
}

/* Only where a pointer hovers: on a touch screen the hover stays after a tap on a jump chip. */
@media (hover: hover) {
	.wp-block-list.is-style-suw-chips > li:has(> a:hover) {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--paper);
	}
}

/* ---------- Pills ----------
   suw-pills: list items as ivory pills, each led by a 32px circle: a check on yellow, or the
   item's number on ink (a suw-pills__num span, aria-hidden, at the start of the item; Pricing).
   6px around the circle makes the pill 44px tall (--tap), as the pricing block's pills. The
   circle has a margin rather than a gap, and is inline-flex, so the block editor (which wraps an
   item's text in a div) shows the same pill. */
.wp-block-list.suw-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding: 0;
	list-style: none;
}

.suw-pills > li {
	display: flex;
	align-items: center;
	padding: var(--s-1-5) var(--s-4) var(--s-1-5) var(--s-1-5);
	border-radius: var(--pill);
	background: var(--ivory);
	color: var(--ink);
	font-size: var(--small);
	font-weight: 700;
	line-height: normal;
}

.suw-pills > li::before,
.suw-pills__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--s-8);
	height: var(--s-8);
	margin-right: var(--s-2-5);
	border-radius: 50%;
	vertical-align: middle;
}

.suw-pills > li::before {
	content: '';
	background:
		var(--suw-icon-check-bold-ink) center / 15px no-repeat,
		var(--accent);
}

.suw-pills > li:has(.suw-pills__num)::before {
	content: none;
}

.suw-pills__num {
	background: var(--ink);
	color: var(--paper);
	font-size: var(--label);
	font-weight: 800;
}

/* Forced colours paint the fills as Canvas: an outline draws the pill, and the circle is filled
   in the text colour with the check (or the number) in the background colour. */
@media (forced-colors: active) {
	.suw-pills > li {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.suw-pills > li::before {
		forced-color-adjust: none;
		background: CanvasText;
		mask:
			var(--suw-icon-check-bold) center / 15px no-repeat exclude,
			linear-gradient(#000 0 0);
	}

	.suw-pills__num {
		forced-color-adjust: none;
		background: CanvasText;
		color: Canvas;
	}
}

/* ---------- Lists ---------- */

/* Rows under a hairline with an icon (✓ or →) centred on the text. The rows keep the design's
   normal line height (main gives other list items 1.5). */
.wp-block-list:is(.is-style-suw-check-lined, .is-style-suw-arrow-lined, .is-style-suw-numbered) {
	padding: 0;
	list-style: none;
}

.wp-block-list:is(.is-style-suw-check-lined, .is-style-suw-arrow-lined) > li {
	position: relative;
	padding: var(--s-4) 0 var(--s-4) calc(18px + var(--s-3-5));
	border-bottom: 1px solid var(--line);
	font-size: var(--body-lg);
	line-height: normal;
}

.wp-block-list:is(.is-style-suw-check-lined, .is-style-suw-arrow-lined) > li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px; /* component constant: list icon */
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--suw-list-icon) center / contain no-repeat;
	mask: var(--suw-list-icon) center / contain no-repeat;
	translate: 0 -50%;
}

.wp-block-list.is-style-suw-check-lined {
	--suw-list-icon: var(--suw-icon-check);
}

.wp-block-list.is-style-suw-arrow-lined {
	--suw-list-icon: var(--suw-icon-arrow-right);
}

/* A mask icon is its background seen through the mask, and forced colours paint backgrounds as
   Canvas: the icons take the text colour instead. */
@media (forced-colors: active) {
	.wp-block-list:is(.is-style-suw-check, .is-style-suw-check-lined, .is-style-suw-arrow-lined)
		> li::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* Numbered rows (01, 02 …) under a hairline; the number hangs and sits on the baseline. 18px
   above and below the text as in the design (a component constant): rows 59px apart, the
   design's 60px with its 19px text. The ol already tells screen readers the order, so the
   number is decoration. In the block editor the item's text sits in a div: editor.css keeps it
   beside the number there. */
.wp-block-list.is-style-suw-numbered {
	counter-reset: suw-item;
	border-top: 1px solid var(--line);
}

.wp-block-list.is-style-suw-numbered > li {
	padding: 18px 0 18px calc(24px + var(--s-4));
	border-bottom: 1px solid var(--line);
	font-size: var(--body-lg);
	line-height: normal;
	text-indent: calc(-24px - var(--s-4));
	counter-increment: suw-item;
}

.wp-block-list.is-style-suw-numbered > li::before {
	content: counter(suw-item, decimal-leading-zero);
	content: counter(suw-item, decimal-leading-zero) / '';
	display: inline-block;
	width: 24px; /* component constant: row number */
	margin-right: var(--s-4);
	color: var(--muted);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-chip);
	text-indent: 0;
}

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

/* Core sizes the width presets (25 … 75%) with the block gap, calc(N% - gap * (1 - N/100)),
   which falls back to 0.5em while blockGap is off: the custom property holds the real gap, so
   two 50% buttons fit on one row. */
.wp-block-buttons {
	--wp--style--block-gap: var(--s-3);
	gap: var(--s-3);
}

/* Light: white pill, yellow circle; the main button of the dark CTA bands. */
.suw-btn--light {
	background: var(--paper);
	color: var(--ink);
}

.suw-btn--light .suw-btn__icon {
	background: var(--accent);
	color: var(--ink);
}

.wp-block-button.is-style-suw-light .wp-block-button__link {
	--suw-btn-circle: var(--accent);
	--suw-btn-arrow: var(--suw-icon-arrow-up-ink);
	background: var(--paper);
	color: var(--ink);
}

/* "suw-icon-calendar" on a button swaps the arrow for a calendar (call buttons). */
.wp-block-button.suw-icon-calendar .wp-block-button__link {
	--suw-btn-arrow: var(--suw-icon-calendar-ink);
}

.wp-block-button.is-style-suw-secondary.suw-icon-calendar .wp-block-button__link {
	--suw-btn-arrow: var(--suw-icon-calendar-paper);
}

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

.suw-faq {
	border-top: 1px solid var(--ink);
}

.suw-faq > .wp-block-details {
	border-bottom: 1px solid var(--line);
}

/* The question is centred in a row of at least 76px. The toggle is positioned, not a flex
   item, so a browser that ignores display on <summary> (older Safari) only loses the centring. */
.suw-faq > .wp-block-details > summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 76px; /* component constant: FAQ row */
	padding: var(--s-2) calc(var(--dot-sm) + var(--s-6)) var(--s-2) 0;
	font-size: var(--title-sm);
	font-weight: 500;
	letter-spacing: var(--tr-tight);
	line-height: var(--lh-snug);
	list-style: none;
	cursor: pointer;
}

.suw-faq > .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.suw-faq > .wp-block-details > summary::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--dot-sm);
	height: var(--dot-sm);
	margin-top: calc(var(--dot-sm) / -2);
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--suw-icon-plus-ink) center / 14px no-repeat;
	transition: transform var(--dur) var(--ease);
}

.suw-faq > .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

/* The plus is an ink image, lost on a dark system background: in forced colours it is a text
   glyph in the system text colour (the circle is a border, which forced colours keep). */
@media (forced-colors: active) {
	.suw-faq > .wp-block-details > summary::after {
		content: '+';
		content: '+' / '';
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		font-weight: 300;
		line-height: 1;
	}
}

.suw-faq > .wp-block-details > :not(summary) {
	padding-right: calc(var(--dot-sm) + var(--s-6));
	color: var(--muted);
}

.suw-faq > .wp-block-details > :last-child:not(summary) {
	padding-bottom: var(--s-6);
}

/* ---------- Stats (core blocks have no <dl>) ----------
   Four across while four 220px cells fit, two across below that: never a 3 + 1 orphan
   (DECISIONS §8). The first cell's left rule falls outside the clipped row. */
.suw-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(25%, (880px - 100%) * 999, 50%), 1fr));
	overflow: hidden;
	border-top: 1px solid var(--ink);
}

.suw-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-2-5);
	margin-left: -1px;
	padding: var(--s-6) var(--s-6) 0;
	border-left: 1px solid var(--line);
}

.suw-stat__value {
	font-size: var(--stat);
	font-weight: 200;
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
}

@media (width <= 600px) {
	.suw-stat {
		padding: var(--s-5) var(--s-3-5) 0;
	}
}

/* ---------- Cells: a hairline grid under an ink rule ----------
   suw-cells--numbered counts the cells (01, 02 …); suw-icon--{name} draws an icon top right
   (top left with suw-cells--icon-left); a link in the cell's heading makes the whole cell
   clickable. A link in the cell's text is an in-text link (Links in pattern text). :where()
   keeps these rules' specificity as it was before they were limited to the heading. */
.wp-block-group.suw-cells {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	border-width: 1px 0;
	border-top-color: var(--ink);
}

.suw-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3-5);
	min-height: 260px; /* component constant: cell */
	padding: var(--s-8) var(--s-7);
}

.suw-cell > .wp-block-heading {
	margin-top: auto;
	font-size: var(--title);
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-title);
}

.suw-cell > p {
	color: var(--muted);
	font-size: var(--body-sm);
}

.suw-cells--numbered {
	counter-reset: suw-cell;
}

.suw-cells--numbered > .suw-cell {
	counter-increment: suw-cell;
}

/* The first row holds the number and the icon, so it is as tall as the icon. */
.suw-cell[class*='suw-icon--']::before {
	content: '';
	min-height: 30px;
}

.suw-cells--numbered > .suw-cell::before {
	content: counter(suw-cell, decimal-leading-zero);
	content: counter(suw-cell, decimal-leading-zero) / '';
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
}

.suw-cell[class*='suw-icon--']::after {
	content: '';
	position: absolute;
	top: var(--s-8);
	right: var(--s-7);
	width: 30px; /* component constant: cell icon */
	height: 30px;
	background: currentColor;
	-webkit-mask: var(--suw-icon) center / contain no-repeat;
	mask: var(--suw-icon) center / contain no-repeat;
	pointer-events: none;
}

.suw-cell :where(.wp-block-heading) a {
	color: inherit;
	text-decoration: none;
}

.suw-cell :where(.wp-block-heading) a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.suw-cell :where(.wp-block-heading) a:focus-visible {
	outline: none;
}

.suw-cell :where(.wp-block-heading) a:focus-visible::after {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

@media (width <= 600px) {
	.suw-cell {
		min-height: 0;
		padding: var(--s-6) var(--s-5);
	}

	.suw-cell[class*='suw-icon--']::after {
		top: var(--s-6);
		right: var(--s-5);
	}
}

/* suw-cells--icon-left: the icon top left, over the row the cell keeps for it (Pricing, About). */
.suw-cells--icon-left > .suw-cell[class*='suw-icon--']::after {
	right: auto;
	left: var(--s-7);
}

@media (width <= 600px) {
	.suw-cells--icon-left > .suw-cell[class*='suw-icon--']::after {
		left: var(--s-5);
	}
}

/* Forced colours paint every background as Canvas: the hairlines (the grid's background in
   1px gaps) would vanish, and so would the icons (a background seen through a mask). The grid
   keeps a CanvasText background and its cells take the forced colours again; the icons take the
   text colour. */
@media (forced-colors: active) {
	.suw-cells,
	.wp-block-group.suw-cells {
		forced-color-adjust: none;
		border-color: CanvasText;
		background-color: CanvasText;
	}

	.suw-cells > * {
		forced-color-adjust: auto;
	}

	.suw-cell[class*='suw-icon--']::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

/* Cell icons, suw-icon--{name}: Lucide paths from the design, stroke 1.3. Home and Services
   (gauge … home), Inspection (file-text … split), Pricing (rotate-cw … monitor), About (globe …
   eye). A new icon is one more rule here. */
.suw-icon--gauge {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E");
}

.suw-icon--search {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

.suw-icon--layout {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E");
}

.suw-icon--bag {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 14H5L6 7Z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}

.suw-icon--gem {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}

.suw-icon--home {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V8l7-5 7 5v13'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E");
}

.suw-icon--file-text {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h5'/%3E%3C/svg%3E");
}

.suw-icon--list-check {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h13'/%3E%3Cpath d='M3 12h9'/%3E%3Cpath d='M3 18h5'/%3E%3Cpath d='m17 15 3 3 3-6'/%3E%3C/svg%3E");
}

.suw-icon--video {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3Crect width='14' height='12' x='2' y='6' rx='2'/%3E%3C/svg%3E");
}

.suw-icon--split {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3h5v5'/%3E%3Cpath d='M8 3H3v5'/%3E%3Cpath d='M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3'/%3E%3Cpath d='m15 9 6-6'/%3E%3C/svg%3E");
}

.suw-icon--rotate-cw {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}

.suw-icon--shield-check {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.suw-icon--monitor {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
}

.suw-icon--globe {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.suw-icon--users {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.suw-icon--calendar-check {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
}

.suw-icon--eye {
	--suw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* ---------- Closing CTA bands (suw_cta_band, suw_cta_form) ---------- */

.suw-cta__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.suw-cta__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-6);
	justify-self: end;
}

.suw-cta__aside--or {
	gap: var(--s-3-5);
}

/* ==========================================================================
   Page: home (patterns/home-*.php). Only the Home agent edits this region.
   ========================================================================== */

/* Hero: the form keeps to the end of its column. */
.suw-home-hero .wp-block-suw-lead-form {
	justify-self: end;
}

/* Approach: "Renew." and "Rebuild." side by side under an ink rule, split by a hairline. */
.suw-home-approach {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: var(--s-12) 0;
	border-top: 1px solid var(--ink);
}

.suw-home-approach__col {
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
	padding: var(--s-10) var(--gutter) 0 0;
}

.suw-home-approach__col + .suw-home-approach__col {
	padding: var(--s-10) 0 0 var(--gutter);
	border-left: 1px solid var(--line);
}

/* ==========================================================================
   Page: inspection (patterns/inspection-*.php). Only the Inspection agent edits this region.
   ========================================================================== */

/* Hero: the crumb, the H1, the lead and the form, 28px apart, beside the dial (suw/dial). */
.suw-inspection-hero__intro {
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
	min-width: 0;
}

/* Quick facts: lighter values than the Home stats (design: weight 300, line height 1). */
.suw-inspection-facts .suw-stat__value {
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--tr-heading);
}

/* How it works: three steps under an ink rule. Three across while three 260px steps fit,
   stacked below that: never two plus one. A counter numbers them (01–03); the headings
   already read in order, so the number is decoration. */
.suw-inspection-steps {
	display: grid;
	grid-template-columns: repeat(
		auto-fit,
		minmax(clamp((100% - 2 * var(--s-10)) / 3 - 1px, (860px - 100%) * 999, 100%), 1fr)
	);
	gap: var(--s-10);
	counter-reset: suw-step;
}

.suw-inspection-step {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding-top: var(--s-7);
	border-top: 1px solid var(--ink);
	counter-increment: suw-step;
}

.suw-inspection-step::before {
	content: counter(suw-step, decimal-leading-zero);
	content: counter(suw-step, decimal-leading-zero) / '';
	color: var(--muted-2);
	font-size: clamp(4rem, 7vw, 6.5rem); /* component constant: step numeral (design) */
	font-weight: 200;
	line-height: var(--lh-numeral);
	letter-spacing: var(--tr-display);
}

.suw-inspection-step__text {
	max-width: 26em;
	color: var(--muted);
}

/* What you get: four hairline cells, four across from 1200px, two from 600px, stacked
   below: never three plus one. The icon stands top left (the shared cell puts it top right)
   and the cells keep their height on phones, as in the design. */
.wp-block-group.suw-inspection-deliverables {
	grid-template-columns: minmax(0, 1fr);
}

@media (width >= 600px) {
	.wp-block-group.suw-inspection-deliverables {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width >= 1200px) {
	.wp-block-group.suw-inspection-deliverables {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wp-block-group.suw-inspection-deliverables > .suw-cell {
	min-height: 250px; /* component constant: deliverable cell (design) */
	padding: var(--s-8) var(--s-7);
}

.wp-block-group.suw-inspection-deliverables > .suw-cell::after {
	top: var(--s-8);
	right: auto;
	left: var(--s-7);
}

.wp-block-group.suw-inspection-deliverables > .suw-cell.suw-inspection-cell--dark {
	background: var(--ink);
	color: var(--ivory);
}

.suw-cell.suw-inspection-cell--dark > .wp-block-heading {
	color: var(--paper);
}

.suw-cell.suw-inspection-cell--dark > p {
	color: var(--muted-dark);
}

/* Its text links "which package" to Pricing: paper, as in-text links on dark, and so is the
   focus ring, which is ink elsewhere on this white section and would not show on the cell. */
.suw-cell.suw-inspection-cell--dark > p a {
	color: var(--paper);
}

.suw-cell.suw-inspection-cell--dark > p a:focus-visible {
	outline-color: var(--paper);
}

/* ==========================================================================
   Page: services (patterns/services-*.php). Only the Services agent edits this region.
   ========================================================================== */

/* Hero: the six services as jump chips (#service-1 … #service-6); CSS numbers them, so the
   number stays out of the link text. */
.wp-block-list.is-style-suw-chips.suw-services-jump {
	justify-self: end;
	gap: var(--s-1-5);
	counter-reset: suw-jump;
}

.wp-block-list.is-style-suw-chips.suw-services-jump > li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-height: var(--tap);
	padding: 0 var(--s-4);
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-chip);
	line-height: normal;
	text-transform: uppercase;
	counter-increment: suw-jump;
}

.wp-block-list.is-style-suw-chips.suw-services-jump > li::before {
	content: counter(suw-jump, decimal-leading-zero);
	content: counter(suw-jump, decimal-leading-zero) / '';
	opacity: 0.55; /* component constant: chip number */
}

/* Platforms: the sub beside the head, then two cards of at least 440px. */
.suw-services-sub {
	max-width: 32em;
	color: var(--muted);
}

.suw-services-plats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
	gap: var(--s-5);
}

.wp-block-group.is-style-suw-card.suw-services-plat {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	padding: clamp(28px, 3vw, 40px); /* component constant: platform card */
	border-radius: var(--radius-lg);
}

.suw-row.suw-services-plat__head {
	align-items: baseline;
	gap: var(--s-4);
}

.suw-services-plat__text {
	max-width: 30em;
	color: var(--text-2);
}

.suw-services-plat__ideal {
	display: flex;
	flex-direction: column;
	gap: var(--s-2-5);
}

/* "Best for": smaller check rows under an ink rule. */
.wp-block-list.is-style-suw-check-lined.suw-services-checks {
	--suw-list-icon: var(--suw-icon-check-bold);
	border-top: 1px solid var(--ink);
}

.wp-block-list.is-style-suw-check-lined.suw-services-checks > li {
	padding: var(--s-3) 0 var(--s-3) calc(14px + var(--s-2-5));
	border-bottom-color: var(--line-soft);
	font-size: var(--body-sm);
	font-weight: 600;
}

.wp-block-list.is-style-suw-check-lined.suw-services-checks > li::before {
	width: 14px; /* component constant: small list icon */
	height: 14px;
}

/* The lead co-founder, at the foot of the card. */
.suw-more.suw-services-plat__lead {
	margin-top: auto;
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-chip);
}

/* The note under the cards; its link ends in an arrow (decoration). */
.suw-more.suw-services-note {
	color: var(--text-2);
	font-size: var(--body-sm);
	font-weight: 600;
}

.suw-services-note a::after {
	content: '\00a0\2192';
	content: '\00a0\2192' / '';
}

/* Service blocks: six articles under an ink rule. CSS numbers them 01–06 and draws the yellow
   dot; the number is the block's place on the page, so it is decoration. */
.suw-services-areas {
	counter-reset: suw-service;
}

.suw-cols.suw-services-item {
	gap: var(--s-8) var(--s-20);
	padding-block: var(--suw-pb-hero);
	border-top: 1px solid var(--ink);
	counter-increment: suw-service;
}

.suw-services-item__intro,
.suw-services-item__outs,
.suw-services-item__scope {
	display: flex;
	flex-direction: column;
}

.suw-services-item__intro {
	gap: var(--s-5);
}

.suw-services-item__intro::before {
	content: counter(suw-service, decimal-leading-zero);
	content: counter(suw-service, decimal-leading-zero) / '';
	align-self: flex-start;
	padding-right: calc(var(--s-3-5) + 8px);
	/* component constant: the 8px dot, as the logo's */
	background: radial-gradient(closest-side, var(--accent) 92%, transparent) right center / 8px 8px
		no-repeat;
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
}

.suw-services-item__pitch {
	max-width: 24em;
	color: var(--muted);
}

.suw-services-item__outs {
	gap: var(--s-2-5);
	margin-top: var(--s-2);
}

/* Deliverables: ivory chips with a file icon. */
.wp-block-list.is-style-suw-chips.suw-services-outs {
	gap: var(--s-1-5);
}

.wp-block-list.is-style-suw-chips.suw-services-outs > li {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3-5);
	border: 0;
	background: var(--ivory);
	font-size: var(--ui);
	line-height: normal;
}

.wp-block-list.is-style-suw-chips.suw-services-outs > li::before {
	content: '';
	flex: none;
	width: 13px; /* component constant: file icon */
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--suw-icon-file) center / contain no-repeat;
	mask: var(--suw-icon-file) center / contain no-repeat;
}

/* The icon is a background seen through a mask, which forced colours paint as Canvas. */
@media (forced-colors: active) {
	.wp-block-list.is-style-suw-chips.suw-services-outs > li::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}
}

.suw-services-item__scope {
	gap: var(--s-3-5);
}

/* "Included in: …" beside "See pricing". */
.suw-row.suw-services-item__pk {
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-2);
}

.suw-services-item__in {
	color: var(--muted);
	font-size: var(--small);
	font-weight: 600;
}

.suw-services-item__in strong {
	color: var(--ink);
	font-weight: 700;
}

/* Tools: columns from 320px, as in the design, and a tighter head. */
.suw-cols.suw-services-tools {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.suw-services-tools > .suw-section-head {
	gap: var(--s-3-5);
}

/* 44px tap area on touch screens for the card's small standalone link, as .suw-hit. */
@media (pointer: coarse) {
	.suw-services-plat__lead a {
		position: relative;
	}

	.suw-services-plat__lead a::before {
		content: '';
		position: absolute;
		inset: calc((100% - var(--tap)) / 2) min(0px, (100% - var(--tap)) / 2);
	}
}

/* ==========================================================================
   Page: work (patterns/work-*.php). Only the Work agent edits this region.
   ========================================================================== */

/* None: the hero uses shared classes (suw-pb-hero, the hero-xl preset, suw-head-row--loose). */

/* ==========================================================================
   Page: pricing (patterns/pricing-*.php). Only the Pricing agent edits this region.
   ========================================================================== */

/* Add-ons: rows under an ink rule, each ending in its "on request" tag (Paketler L235–240). */
p.suw-pricing-addons__sub {
	color: var(--muted);
}

.wp-block-list.suw-pricing-addons {
	padding: 0;
	border-top: 1px solid var(--ink);
	list-style: none;
}

.suw-pricing-addons > li {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--body-lg);
	line-height: normal;
}

/* The tag fills the auto column. In the block editor the row's text sits in one div, which
   then takes the whole row; the float (ignored on a grid item) and a margin rather than a gap
   keep the tag at the end of the row there too. */
.suw-pricing-addons__q {
	float: right;
	margin-left: var(--s-4);
	color: var(--muted);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

/* Guarantees and the payment box, below the add-ons in the same band. */
.suw-pricing-guarantees {
	margin-top: clamp(64px, 8vw, 112px); /* component constant: Paketler L228 stack gap */
}

/* The three cells and the three payment terms: three across above 980px, one below, never
   2 + 1 (DECISIONS §8). The package cards above switch at the same width. */
.suw-pricing-guarantees .wp-block-group.suw-cells,
.suw-pricing-pay {
	grid-template-columns: minmax(0, 1fr);
}

@media (width > 980px) {
	.suw-pricing-guarantees .wp-block-group.suw-cells,
	.suw-pricing-pay {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* As tall as their text, which follows the icon row (the icon sits top left over that row:
   suw-cells--icon-left). */
.suw-pricing-guarantees .suw-cell {
	min-height: 0;
}

.suw-pricing-guarantees .suw-cell > .wp-block-heading {
	margin-top: 0;
}

/* Payment terms: a label over each value in an ivory box (core blocks have no <dl>). */
.suw-pricing-pay {
	display: grid;
	gap: var(--s-4) var(--s-12);
	padding: var(--s-6) var(--s-7);
	border-radius: var(--radius);
	background: var(--ivory);
}

.suw-pricing-pay__item {
	display: flex;
	flex-direction: column;
	gap: var(--s-1-5);
}

.suw-pricing-pay__value {
	font-weight: 600;
	line-height: normal;
}

/* ==========================================================================
   Page: guides (patterns/guides-*.php). Only the Guides agent edits this region.
   ========================================================================== */

/* Featured: the white band under the article; the block draws the ink rule above it. */
.wp-block-group.suw-guides-featured {
	padding-bottom: clamp(64px, 8vw, 112px); /* component constant: Guides featured band */
}

/* A band whose block renders nothing (no published guide yet; no card while "Show coming
   soon" is off) closes up instead of leaving an empty white or ivory gap. */
.wp-block-group.suw-guides-featured:not(:has(.suw-guides__feature)),
.wp-block-group.suw-guides-grid:not(:has(.suw-guides__list)) {
	padding-block: 0;
}

/* ==========================================================================
   Page: about (patterns/about-*.php). Only the About agent edits this region.
   ========================================================================== */

/* Together and Principles: rows under an ink rule, the title beside its line; a row stacks
   when two 340px columns don't fit (320px with --narrow). The title's size is the
   heading-sm preset; its number (a counter, decoration: the order is in the text) hangs in
   front of the first line, on its baseline. */
.suw-about-rows {
	counter-reset: suw-about-row;
	border-top: 1px solid var(--ink);
}

.suw-about-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	align-items: baseline;
	gap: var(--s-3) var(--s-12);
	padding-block: var(--flow-sm);
	border-bottom: 1px solid var(--line);
	counter-increment: suw-about-row;
}

.suw-about-rows--narrow > .suw-about-row {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.suw-about-row__title {
	padding-left: calc(18px + var(--s-6));
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: var(--tr-heading);
	text-indent: calc(-18px - var(--s-6));
}

.suw-about-row__title::before {
	content: counter(suw-about-row, decimal-leading-zero);
	content: counter(suw-about-row, decimal-leading-zero) / '';
	display: inline-block;
	width: 18px; /* component constant: row number */
	margin-right: var(--s-6);
	color: var(--muted);
	font-size: var(--label);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
	text-indent: 0;
	white-space: nowrap;
}

/* The grey "×" between the two halves of a Together title. */
.suw-about-row__title em {
	font-style: normal;
	color: var(--muted-2);
}

.suw-about-row__text {
	color: var(--muted);
}

/* Manifesto: the statement in white with a grey first part, at most 18 characters wide. */
.suw-about-quote {
	max-width: 18ch;
	color: var(--paper);
	font-size: clamp(2.4rem, 5.6vw, 5.5rem); /* component constant: manifesto */
	font-weight: 300;
	line-height: var(--lh-tight);
	letter-spacing: -0.055em; /* component constant, as the founders' names */
	text-wrap: balance;
}

.suw-about-quote p {
	line-height: inherit;
}

.suw-about-quote em {
	font-style: normal;
	color: var(--muted-2);
}

/* How we work: four cells, never 3 + 1 (the design's 280px cells: four across from 1123px of
   content, two from 561px, one below). The icon sits top left: suw-cells--icon-left. */
.wp-block-group.suw-cells.suw-about-cells {
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				clamp(25% - 1px, (1123px - 100%) * 999, 50% - 1px),
				min(100%, (561px - 100%) * 999)
			),
			1fr
		)
	);
}

/* ==========================================================================
   Page: start (patterns/start-*.php). Only the Start agent edits this region.
   ========================================================================== */

/* None: the hero lead is the shared suw-lead--wide. */

/* ==========================================================================
   Page: guide (single.php, archive.php, template-parts/guide-author.php). The guide article:
   the header, the contents beside the text, the article text and the author box; the article
   styles editors pick in the post editor (the short answer's label, the dotted list); and a
   category archive's empty state. The archives' hero, chips and grid are the Guides page's
   (Page: guides, the block). editor.css mirrors the article text for the post editor. Only
   the guide templates' agent edits this region.
   ========================================================================== */

/* Header: the crumb, the H1 (at most 15 characters a line), the lead, then the author, date
   and reading time under an ink rule. */
.suw-guide-head {
	padding: var(--hero-top) 0 var(--flow-lg);
}

.suw-guide-head .suw-crumb {
	line-height: normal;
}

.suw-guide-head__title {
	max-width: 15ch;
	margin-top: var(--s-7);
	font-size: clamp(2.8rem, 6.4vw, 6.5rem); /* component constant: guide article H1 */
	font-weight: 300;
	line-height: var(--lh-heading);
	letter-spacing: -0.055em; /* component constant, as the About manifesto */
}

.suw-guide-head__lead {
	max-width: 34em;
	margin-top: var(--flow-sm);
	color: var(--text-2);
	font-size: var(--lead);
	font-weight: 500;
	text-wrap: pretty;
}

.suw-guide-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4) var(--s-8);
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--ink);
	color: var(--muted);
	font-size: var(--small);
	font-weight: 600;
}

.suw-guide-meta__author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.suw-guide-meta__who {
	display: flex;
	flex-direction: column;
	gap: var(--s-0-5);
}

.suw-guide-meta__name {
	color: var(--ink);
	font-size: var(--body-sm);
}

.suw-guide-meta__role {
	font-size: var(--label);
}

/* The square avatar files are already cropped to the face. */
.suw-guide-meta__avatar,
.suw-guide-author__avatar {
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.suw-guide-meta__avatar {
	width: 44px; /* component constant: header avatar */
	height: 44px;
}

/* Body: the contents (240px) beside the text (at most 720px), 80px apart; one column at 900px
   and below, where the toc block stops being sticky (BUILD.md §6.4). The text of an article
   without a contents list keeps to the second column. */
.suw-guide-body {
	display: grid;
	grid-template-columns: 240px minmax(0, 720px); /* component constants: contents, measure */
	gap: var(--s-20);
	padding-bottom: var(--section-y);
}

.suw-guide-body__main {
	min-width: 0;
}

.suw-guide-body--no-toc > .suw-guide-body__main {
	grid-column: 2;
}

@media (width <= 900px) {
	.suw-guide-body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-10);
	}

	.suw-guide-body--no-toc > .suw-guide-body__main {
		grid-column: auto;
	}
}

/* Article text (the post content). Blocks of a section are 16px apart; a section's H2 and
   the boxes (the short answer, the in-article CTA and the other blocks of the site) have
   40px around them. */
.suw-guide-content > * + * {
	margin-top: var(--s-4);
}

.suw-guide-content > * + h3 {
	margin-top: var(--s-7);
}

.suw-guide-content > * + :is(h2, .wp-block-group, [class*='wp-block-suw-']),
.suw-guide-content > :is(.wp-block-group, [class*='wp-block-suw-']) + * {
	margin-top: var(--s-10);
}

/* Paragraphs and lists in a style of their own (Lead, Label, Check marks…) keep that style. */
.suw-guide-content > p:not([class*='is-style-']),
.suw-guide-content > :is(ul, ol):not([class*='is-style-']) {
	color: var(--text-2);
	font-size: var(--body-lg);
	font-weight: 500;
	line-height: var(--lh-prose);
}

.suw-guide-content > :is(ul, ol):not([class*='is-style-']) {
	padding-left: var(--s-6);
}

.suw-guide-content > :is(ul, ol):not([class*='is-style-']) > li + li {
	margin-top: var(--s-2);
}

/* Section headings: the design's own size, between --h3 and --title-lg. */
.suw-guide-content > h2 {
	font-size: clamp(1.8rem, 2.8vw, 2.4rem); /* component constant: guide article H2 */
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-title);
}

.suw-guide-content > h3 {
	font-size: var(--title-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-tight);
}

/* Links an editor puts in the text: ink and underlined, apart from the grey text by more than
   colour (WCAG 1.4.1). Links that blocks print carry their own class and look. */
.suw-guide-content :is(p, li) a:not([class]) {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.suw-guide-content :is(p, li) a:not([class]):is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

/* "The short answer" box (the group style, site.css › Block styles): its first block is the
   label, a paragraph in the Label style, 11px, heavy and ink here, 12px above the answer. */
.wp-block-group.is-style-suw-short-answer > * + * {
	margin-top: var(--s-3);
}

.wp-block-group.is-style-suw-short-answer > p.is-style-suw-label {
	color: var(--ink);
	font-size: var(--micro);
	font-weight: 800;
}

/* "Dots, lined" (core/list, inc/block-styles.php): rows under an ink rule, split by soft
   hairlines, an 8px dot on the middle of each row's first line. */
.wp-block-list.is-style-suw-dot-lined {
	padding: 0;
	border-top: 1px solid var(--ink);
	list-style: none;
}

.wp-block-list.is-style-suw-dot-lined > li {
	position: relative;
	padding: var(--s-3-5) 0 var(--s-3-5) calc(var(--s-2) + var(--s-3));
	border-bottom: 1px solid var(--line-soft);
	font-size: var(--body-lg);
	font-weight: 600;
	line-height: var(--lh-body);
}

.wp-block-list.is-style-suw-dot-lined > li::before {
	content: '';
	position: absolute;
	top: calc(var(--s-3-5) + 0.5lh - var(--s-1));
	left: 0;
	width: var(--s-2); /* component constant: list dot */
	height: var(--s-2);
	border-radius: 50%;
	background: currentColor;
}

/* Forced colours paint backgrounds as Canvas: the dot takes the text colour. */
@media (forced-colors: active) {
	.wp-block-list.is-style-suw-dot-lined > li::before {
		forced-color-adjust: none;
		background: CanvasText;
	}
}

/* "Sources" (core/group, inc/block-styles.php): the list of sources that ends a guide, left
   out of the reading time (Guides::minutes()). Muted and smaller under a hairline; its heading
   or bold label stays ink, its links stay underlined, and a long address wraps instead of
   widening the page. */
.wp-block-group.is-style-suw-sources {
	padding-top: var(--s-6);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: var(--body-sm);
	line-height: var(--lh-body);
}

.wp-block-group.is-style-suw-sources > * + * {
	margin-top: var(--s-3);
}

.wp-block-group.is-style-suw-sources > h2 {
	color: var(--ink);
	font-size: var(--title-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-tight);
}

.wp-block-group.is-style-suw-sources strong {
	color: var(--ink);
}

.wp-block-group.is-style-suw-sources > :is(ul, ol) {
	padding-left: var(--s-6);
}

.wp-block-group.is-style-suw-sources li + li {
	margin-top: var(--s-1-5);
}

.wp-block-group.is-style-suw-sources a:not([class]) {
	font-weight: 500;
	overflow-wrap: anywhere;
}

/* Author box: the photo, "Written by", the name and bio, and "Meet the team →", under an ink
   rule; the link wraps below on narrow screens. */
.suw-guide-author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-5);
	margin-top: var(--s-10);
	padding-top: var(--s-7);
	border-top: 1px solid var(--ink);
}

.suw-guide-author__avatar {
	width: 72px; /* component constant: author box photo */
	height: 72px;
}

/* 220px (the design's 260px less 40px) keeps the photo and the text side by side at 360px. */
.suw-guide-author__text {
	display: flex;
	flex: 1 1 220px; /* component constant */
	flex-direction: column;
	gap: var(--s-1-5);
}

.suw-guide-author__label {
	color: var(--muted);
	font-size: var(--micro);
	font-weight: 700;
	letter-spacing: var(--tr-label);
	line-height: normal;
	text-transform: uppercase;
}

.suw-guide-author__name {
	font-size: var(--title-sm);
	font-weight: 600;
	letter-spacing: var(--tr-tight);
	line-height: normal;
}

.suw-guide-author__bio {
	color: var(--text-2);
	font-size: var(--body-sm);
	font-weight: 500;
}

.suw-guide-author__team {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
}

/* Category archive H1 (archive.php): its ink part is an inline block like the grey part
   (Block styles), so each part balances on its own: no word left alone on a phone. */
.wp-block-heading .suw-guide-ink {
	display: inline-block;
}

/* Category archive without a card ("Show coming soon" off, nothing published): the empty
   state on the ivory band, and a link to every guide (archive.php). */
.suw-guide-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-5);
}

.suw-guide-empty__text {
	font-size: var(--title);
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-tight);
}

.suw-guide-empty__all {
	font-size: var(--small);
	font-weight: 700;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
}

/* ==========================================================================
   Consent banner (Faz 10): the cookie banner, the Cookie settings dialog and the footer's
   "Cookie settings" button. The plugin's Consent class prints them only while the banner
   setting is on. Its head bootstrap sets html[data-suw-consent] to ask, granted or denied
   before the first paint, so the banner shows from the first frame and nothing shifts.
   Without JavaScript the attribute is missing, and all of it stays hidden.
   ========================================================================== */

/* A card at the bottom right, on phones the full width less the gutters. Not modal: the page
   stays usable. Above the header (50); the WhatsApp button (40) hides while it shows. The
   transparent outline draws its edge in forced colours, which drop the shadow. */
.suw-consent {
	position: fixed;
	inset-inline-end: var(--gutter);
	bottom: var(--gutter);
	z-index: 60;
	display: none;
	flex-direction: column;
	gap: var(--s-3);
	width: min(100% - 2 * var(--gutter), 26rem); /* component constant: banner width */
	max-height: 50dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-6);
	border-radius: var(--radius-lg);
	outline: 1px solid transparent;
	background: var(--paper);
	box-shadow: var(--shadow-feature), var(--ring-hairline);
	color: var(--ink);
}

html[data-suw-consent='ask'] .suw-consent {
	display: flex;
}

/* The open mobile menu reaches the bottom of the screen: the banner waits until it closes. */
html[data-suw-consent='ask']:has(.suw-mobile-menu.is-open) .suw-consent {
	display: none;
}

.suw-consent__title {
	font-size: var(--title-sm);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-tight);
}

.suw-consent__text {
	color: var(--text-2);
	font-size: var(--body-sm);
	line-height: var(--lh-body);
}

/* Accept, Reject and Settings look the same (D11): one row from 375px, stacked below. */
.suw-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: var(--s-1);
}

/* Text-only pills: the padding that makes room for the arrow circle is evened out. */
.suw-consent .suw-btn,
.suw-consent-dialog .suw-btn {
	justify-content: center;
	padding-inline: var(--s-4);
}

.suw-consent__actions .suw-btn {
	flex: 1 1 auto;
}

/* Stacked, the buttons need more height: up to 60% of the screen keeps them all in view. */
@media (width < 375px) {
	.suw-consent {
		max-height: 60dvh;
	}

	.suw-consent__actions {
		flex-direction: column;
	}
}

/* Its .suw-hit area keeps a 44px pitch to the buttons above. */
.suw-consent__policy {
	align-self: flex-start;
	margin-top: var(--s-1);
	font-size: var(--small);
	font-weight: 600;
}

/* While the banner shows, the end of the page can scroll clear of it and focused elements
   stop above it (WCAG 2.4.11, technique C43); consent.js measures it into --suw-consent-h. */
@media (height > 30em) {
	html[data-suw-consent='ask'] {
		scroll-padding-bottom: calc(var(--suw-consent-h, 0px) + var(--s-4));
	}

	html[data-suw-consent='ask'] .suw-footer {
		padding-bottom: var(--suw-consent-h, 0px);
	}
}

/* Short or zoomed screens (WCAG 1.4.10): the banner joins the page at the top, where the DOM
   has it, instead of covering the screen. */
@media (height <= 30em) {
	.suw-consent {
		position: static;
		width: auto;
		max-height: none;
		margin: var(--s-4) var(--gutter);
		box-shadow: var(--ring-hairline);
	}
}

/* Cookie settings: a modal dialog in the top layer, scrolling inside on short screens. Its
   width replaces the browser's own cap, so it keeps the page's gutters on phones too. */
.suw-consent-dialog {
	width: min(100% - 2 * var(--gutter), 32rem); /* component constant: dialog width */
	max-width: none;
	max-height: calc(100dvh - 2 * var(--gutter));
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	outline: 1px solid transparent;
	background: var(--paper);
	box-shadow: var(--shadow-feature), var(--ring-hairline);
	color: var(--ink);
}

/* --ink at 50%, written out: older browsers don't pass custom properties to ::backdrop. */
.suw-consent-dialog::backdrop {
	background: rgb(14 14 14 / 0.5);
}

.suw-consent-dialog__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-8) var(--s-6) var(--s-6);
}

/* Room on the right for the close button. */
.suw-consent-dialog__title {
	padding-inline-end: var(--s-10);
	font-size: var(--title);
	font-weight: 400;
	line-height: var(--lh-snug);
	letter-spacing: var(--tr-tight);
}

.suw-consent-dialog__text {
	color: var(--text-2);
	font-size: var(--body-sm);
	line-height: var(--lh-body);
}

/* A link in a sentence is ink and bold, as in the patterns' text (WCAG 1.4.1). */
.suw-consent-dialog__text a {
	color: var(--ink);
	font-weight: 700;
}

.suw-consent-dialog__cat {
	display: flex;
	flex-direction: column;
	gap: var(--s-1-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--line-soft);
}

.suw-consent-dialog__name {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	font-size: var(--body);
	font-weight: 700;
}

/* "Always on": a status in words, not a disabled box that the keyboard would skip. */
.suw-consent-dialog__on {
	color: var(--muted);
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

/* The box is 24px and its label a 44px row, so the whole row is the target. */
.suw-consent-dialog__field {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.suw-consent-dialog__field input {
	flex: none;
	width: var(--s-6);
	height: var(--s-6);
	margin: 0;
	accent-color: var(--ink);
	cursor: pointer;
}

.suw-consent-dialog__field label {
	min-height: var(--tap);
	cursor: pointer;
}

.suw-consent-dialog__save {
	align-self: flex-start;
	margin-top: var(--s-2);
}

@media (width <= 560px) {
	.suw-consent-dialog__save {
		align-self: stretch;
	}
}

.suw-consent-dialog__close {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}

@media (hover: hover) {
	.suw-consent-dialog__close:hover {
		background: var(--ivory);
	}
}

/* "Cookie settings" in the footer's Legal column, after the legal links (D18): a button that
   looks like those links. Without JavaScript nothing could open the dialog, so it hides. */
.suw-consent-open {
	padding: 0 0 2px;
	border: 0;
	text-align: start;
	cursor: pointer;
}

html:not([data-suw-consent]) .suw-consent-open {
	display: none;
}

@media print {
	html[data-suw-consent] .suw-consent,
	.suw-consent-open {
		display: none;
	}
}

/* ==========================================================================
   WhatsApp button (Faz 10, template-parts/whatsapp-button.php): a 52px ink circle at the
   bottom right with WhatsApp's own white glyph, unchanged, and the logo's yellow dot on the
   circle's edge, clear of the glyph (D12). Below the header (50) and the cookie banner (60).
   ========================================================================== */

.suw-wa-fab {
	position: fixed;
	inset-inline-end: var(--s-4);
	bottom: max(var(--s-4), env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h);
	height: var(--control-h);
	border-radius: 50%;
	background: var(--ink);
	box-shadow: var(--shadow-pill);
}

.suw-wa-fab__icon {
	width: var(--s-6);
	height: var(--s-6);
}

/* On the circle's edge at 45°: (1 − cos 45°) / 2 = 14.64% of the circle, less half the dot. */
.suw-wa-fab__dot {
	position: absolute;
	top: calc(14.64% - var(--s-1));
	right: calc(14.64% - var(--s-1));
	width: var(--s-2);
	height: var(--s-2);
	border-radius: 50%;
	background: var(--accent);
}

/* A white ring inside an ink one: visible on light and dark backgrounds alike. */
.suw-wa-fab:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--ink);
}

/* Hidden, and out of the tab order, while the cookie banner asks (two fixed boxes never
   stack), while the mobile menu is open, while the footer, which has its own WhatsApp link,
   is on screen (site.js, "wa"), and on touch screens while a text field has focus, when the
   on-screen keyboard takes the room. */
html[data-suw-consent='ask'] .suw-wa-fab,
html:has(.suw-mobile-menu.is-open) .suw-wa-fab,
.suw-wa-fab.is-away {
	visibility: hidden;
	opacity: 0;
}

@media (pointer: coarse) {
	html:has(textarea:focus, select:focus) .suw-wa-fab,
	html:has(input:focus:not([type='checkbox'], [type='radio'])) .suw-wa-fab {
		visibility: hidden;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.suw-wa-fab {
		transition:
			opacity var(--dur-fast) var(--ease),
			visibility var(--dur-fast) var(--ease);
	}
}

/* While the button shows, focused elements stop above it (WCAG 2.4.11, technique C43). */
html:not([data-suw-consent='ask']):has(.suw-wa-fab) {
	scroll-padding-bottom: calc(var(--control-h) + 2 * var(--s-4));
}

/* Forced colours would paint the circle as Canvas under the white glyph: it keeps its own. */
@media (forced-colors: active) {
	.suw-wa-fab {
		forced-color-adjust: none;
	}
}

@media print {
	.suw-wa-fab {
		display: none;
	}
}