/*
Theme Name: Fiftyport
Theme URI: https://example.com/fiftyport
Author: Fiftyport Procurement Services
Description: Block theme for Fiftyport Procurement Services, a US-based sourcing agent for industrial and pharmaceutical equipment parts. Includes brand colors and fonts, an editable one-page home, a working quote-request form that saves every lead in the dashboard, and a contact-details settings page.
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.4.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiftyport
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, editor-style, block-patterns
*/

/* ------------------------------------------------------------------
   Palette tokens (etw-palette:start). Same colors as theme.json, as RGB
   triplets for see-through shades, plus a few derived tints.
------------------------------------------------------------------ */
:root {
	--etw-ink-rgb: 13 35 54;
	--etw-harbor-rgb: 10 102 153;
	--etw-harbor-deep-rgb: 7 79 126;
	--etw-signal-rgb: 255 116 69;
	--etw-signal-text-rgb: 178 53 22;
	--etw-paper-rgb: 239 234 226;
	--etw-sky-rgb: 143 211 245;
	--etw-signal-hover: #FF8A61;
	--etw-signal-soft: #FFE6DC;
	--etw-signal-wash: #FFF2EC;
	--etw-signal-light: #FFB091;
	--etw-signal-ink: #8C3316;
	--etw-error-field: #FFF7F3;
	--etw-prose: #1D3141;
	--etw-focus: var(--wp--preset--color--harbor);
	--etw-focus-dark: var(--wp--preset--color--signal);
	/* Phone and tablet versions of the photo overlays (text stacks full width) */
	--etw-ov-hero-m: linear-gradient(180deg, rgba(13,35,54,0.9) 0%, rgba(7,79,126,0.86) 50%, rgba(7,79,126,0.7) 100%);
	--etw-ov-band-m: linear-gradient(180deg, rgba(7,79,126,0.1) 0px, rgba(7,79,126,0.3) 130px, rgba(13,35,54,0.9) 232px, rgba(13,35,54,0.94) 100%);
	--etw-ov-cta-m: linear-gradient(180deg, rgba(7,79,126,0.95) 0%, rgba(7,79,126,0.9) 100%);
	--etw-ov-page-m: linear-gradient(180deg, rgba(13,35,54,0.93) 0%, rgba(7,79,126,0.88) 100%);
	/* Wide tablets and small laptops (1024-1279px): text runs further across the photo */
	--etw-ov-hero-t: linear-gradient(90deg, rgba(13,35,54,0.95) 0%, rgba(7,79,126,0.9) 60%, rgba(10,102,153,0.6) 100%);
	--etw-ov-page-t: linear-gradient(90deg, rgba(13,35,54,0.95) 0%, rgba(7,79,126,0.91) 60%, rgba(7,79,126,0.72) 100%);
}
/* etw-palette:end */

/* ------------------------------------------------------------------
   0. Base
------------------------------------------------------------------ */
:root {
	--etw-radius-s: var(--wp--custom--radius--s, 8px);
	--etw-radius-m: var(--wp--custom--radius--m, 14px);
	--etw-radius-l: var(--wp--custom--radius--l, 22px);
	--etw-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--etw-line: var(--wp--preset--color--line);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }

.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--etw-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Focus ring: brand color on light sections, accent on dark ones */
.etw-dark, .has-ink-background-color, .has-harbor-background-color, .has-harbor-deep-background-color, .etw-footer { --etw-focus: var(--etw-focus-dark); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

img { height: auto; }

/* ------------------------------------------------------------------
   1. Header
------------------------------------------------------------------ */
.etw-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s, box-shadow 0.3s;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would
   trap the full-screen mobile menu inside the header's box. */
.etw-header-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(var(--etw-paper-rgb) / 0.94);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
}
.admin-bar .etw-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .etw-header-wrap { top: 46px; } }
@media (max-width: 600px) { .admin-bar .etw-header-wrap { top: 0; } }

.etw-header-wrap.is-scrolled {
	border-bottom-color: var(--etw-line);
	box-shadow: 0 6px 24px -18px rgb(var(--etw-ink-rgb) / 0.35);
}
.etw-header { min-height: 72px; }
.etw-header .wp-block-site-logo img { display: block; }

.etw-header .wp-block-navigation a:not(.wp-element-button) { color: var(--wp--preset--color--ink); }
.etw-header .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.4rem; }

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--paper) !important;
	padding: 1.5rem clamp(1rem, 5vw, 2.5rem);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
}

@media (max-width: 599px) {
	.etw-header .etw-header-cta { display: none; }
}

/* ------------------------------------------------------------------
   2. Shared section styles
------------------------------------------------------------------ */
.etw-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}
.etw-section-head { margin-bottom: var(--wp--preset--spacing--50); }
.etw-section-head > * { max-width: 44rem; }
.etw-section-head.has-text-align-center > *,
.etw-section-head.is-centered > * { margin-inline: auto; text-align: center; }

.etw-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal-text);
	margin-bottom: 0.75rem;
}
.has-ink-background-color .etw-eyebrow { color: var(--wp--preset--color--signal); }
.has-harbor-deep-background-color .etw-eyebrow { color: var(--wp--preset--color--dusk); }
.has-harbor-background-color .etw-eyebrow { color: var(--wp--preset--color--white); }

.etw-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
	max-width: 40rem;
}
.has-ink-background-color .etw-lead,
.has-ink-background-color .etw-muted { color: var(--wp--preset--color--mist); }
.has-harbor-background-color .etw-lead { color: var(--wp--preset--color--white); }
.etw-muted { color: var(--wp--preset--color--slate); }
.etw-small { font-size: var(--wp--preset--font-size--small); }

/* Written out in full (no :where) so the block editor applies it too */
.has-ink-background-color h1,
.has-ink-background-color h2,
.has-ink-background-color h3,
.has-ink-background-color h4,
.has-ink-background-color summary,
.has-harbor-background-color h1,
.has-harbor-background-color h2,
.has-harbor-background-color h3,
.has-harbor-background-color h4,
.has-harbor-background-color summary,
.has-harbor-deep-background-color h1,
.has-harbor-deep-background-color h2,
.has-harbor-deep-background-color h3,
.has-harbor-deep-background-color h4,
.has-harbor-deep-background-color summary { color: var(--wp--preset--color--white); }
.has-ink-background-color a:not(.wp-element-button),
.has-harbor-background-color a:not(.wp-element-button) { color: var(--wp--preset--color--white); }

/* ------------------------------------------------------------------
   3. Buttons
------------------------------------------------------------------ */
.wp-element-button, .wp-block-button__link {
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--etw-ease), box-shadow 0.2s;
}
.wp-block-button__link:hover { transform: translateY(-1px); }

.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--etw-signal-hover);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 10px 24px -12px rgb(var(--etw-signal-rgb) / 0.7);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--harbor);
	border: 1.5px solid currentColor;
	padding: calc(0.85em - 1.5px) calc(1.4em - 1.5px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--tide);
	color: var(--wp--preset--color--harbor-deep);
}

.wp-block-button.is-style-ghost-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	padding: calc(0.85em - 1.5px) calc(1.4em - 1.5px);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--wp--preset--color--white);
}

.etw-arrow-link a { text-decoration: none; font-weight: 600; }
.etw-arrow-link a::after { content: " →"; transition: margin 0.2s; }
.etw-arrow-link a:hover::after { margin-left: 0.25em; }

/* ------------------------------------------------------------------
   4. Hero
------------------------------------------------------------------ */
.etw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(3rem, 7vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
	background-image:
		linear-gradient(to bottom, rgb(var(--etw-paper-rgb) / 0) 0%, var(--wp--preset--color--paper) 92%),
		radial-gradient(rgb(var(--etw-harbor-rgb) / 0.14) 1px, transparent 1.3px);
	background-size: auto, 22px 22px;
}
/* Soft floating orbs behind the hero */
.etw-hero::before,
.etw-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}
.etw-hero::before {
	width: min(40rem, 90vw); aspect-ratio: 1;
	top: -16rem; right: -8rem;
	background: radial-gradient(circle, rgb(var(--etw-harbor-rgb) / 0.2), rgb(var(--etw-harbor-rgb) / 0) 65%);
}
.etw-hero::after {
	width: min(32rem, 80vw); aspect-ratio: 1;
	bottom: -15rem; left: -10rem;
	background: radial-gradient(circle, rgb(var(--etw-signal-rgb) / 0.17), rgb(var(--etw-signal-rgb) / 0) 65%);
}
.etw-hero h1 { max-width: none; margin-top: 0; }
.etw-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--harbor);
}
.etw-hero .etw-lead { max-width: 36rem; }
.etw-hero-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.etw-hero-note strong { color: var(--wp--preset--color--ink); }

.etw-route-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-l);
	box-shadow: var(--wp--preset--shadow--lift);
	padding: clamp(1.25rem, 2.5vw, 2rem);
}
.etw-route-card .etw-card-kicker {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--harbor);
	background: var(--wp--preset--color--tide);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	margin: 0;
}
.etw-route {
	list-style: none;
	padding: 0 !important;
	margin: 1.25rem 0 0;
}
.etw-route li {
	position: relative;
	padding: 0 0 1.15rem 2.4rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.etw-route li strong {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.etw-route li:last-child { padding-bottom: 0; }
.etw-route li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.15rem;
	width: 1.35rem; height: 1.35rem;
	border-radius: 50%;
	border: 2px solid var(--etw-line);
	background: var(--wp--preset--color--surface);
	box-sizing: border-box;
	z-index: 1;
}
.etw-route li::after {
	content: "";
	position: absolute;
	left: calc(0.675rem - 1px); top: 1.5rem; bottom: 0;
	width: 2px;
	background: var(--etw-line);
}
.etw-route li:last-child::after { display: none; }
.etw-route li:nth-child(-n+2)::before {
	border-color: var(--wp--preset--color--harbor);
	background: var(--wp--preset--color--harbor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.etw-route li:nth-child(-n+2)::after { background: var(--wp--preset--color--harbor); }
.etw-route li:nth-child(3)::before {
	border-color: var(--wp--preset--color--signal);
	box-shadow: 0 0 0 4px rgb(var(--etw-signal-rgb) / 0.18);
}
.etw-route-card .etw-card-foot {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--etw-line);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
}

/* ------------------------------------------------------------------
   5. Facts strip
------------------------------------------------------------------ */
.etw-facts {
	border-top: 1px solid var(--etw-line);
	border-bottom: 1px solid var(--etw-line);
}
.etw-fact {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	line-height: 1.3;
}
.etw-fact .wp-block-image { margin: 0; flex-shrink: 0; }
.etw-fact .wp-block-image img { width: 22px; height: 22px; }
.etw-fact p { margin: 0; }

/* ------------------------------------------------------------------
   6. Cards
------------------------------------------------------------------ */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-m);
	padding: clamp(1.25rem, 2.2vw, 1.75rem);
	height: 100%;
	transition: border-color 0.3s, box-shadow 0.3s var(--etw-ease), transform 0.3s var(--etw-ease);
}
.wp-block-group.is-style-card > :first-child { margin-top: 0; }
.wp-block-group.is-style-card h3 { margin-top: 1rem; margin-bottom: 0.5rem; }
.wp-block-group.is-style-card p { color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	html:not(.etw-motion) .wp-block-group.is-style-card:hover {
		border-color: rgb(var(--etw-harbor-rgb) / 0.35);
		box-shadow: var(--wp--preset--shadow--soft);
		transform: translateY(-2px);
	}
}
.wp-block-column > .wp-block-group.is-style-card { height: 100%; }

.etw-icon { margin: 0 !important; }
.etw-icon img {
	width: 44px !important;
	height: 44px;
	padding: 10px;
	box-sizing: border-box;
	background: var(--wp--preset--color--tide);
	border-radius: 12px;
}

/* Dark card variants */
.has-ink-background-color .wp-block-group.is-style-card,
.has-harbor-background-color .wp-block-group.is-style-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}
.has-ink-background-color .wp-block-group.is-style-card p { color: var(--wp--preset--color--mist); }
.has-ink-background-color .etw-icon img { background: rgb(var(--etw-signal-rgb) / 0.14); }

/* Feature (pharma) card */
.etw-feature {
	border-radius: var(--etw-radius-l);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	height: 100%;
}
.etw-feature p { color: var(--wp--preset--color--white); }
.etw-feature .etw-icon img { background: rgba(255, 255, 255, 0.12); }
.etw-badge {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	margin: 0 !important;
}

/* Category tiles */
.etw-tile {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-m);
	padding: 1rem 1.1rem;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}
.etw-tile .wp-block-image { margin: 0; flex-shrink: 0; }
.etw-tile .wp-block-image img { width: 24px; height: 24px; }
.etw-tile p { margin: 0; }

/* Callout note */
.etw-note {
	border-left: 3px solid var(--wp--preset--color--signal);
	background: var(--wp--preset--color--surface);
	border-radius: 0 var(--etw-radius-s) var(--etw-radius-s) 0;
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}
.etw-note strong { color: var(--wp--preset--color--ink); }

/* ------------------------------------------------------------------
   7. Process steps
------------------------------------------------------------------ */
.etw-step-num,
.wp-block-group.is-style-card .etw-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	color: var(--wp--preset--color--signal) !important;
	margin: 0 !important;
}
.etw-step h3 { font-size: var(--wp--preset--font-size--large); margin-top: 1rem !important; }

/* ------------------------------------------------------------------
   8. Lists with marks
------------------------------------------------------------------ */
ul.is-style-checks, ul.is-style-crosses { list-style: none; padding-left: 0 !important; }
ul.is-style-checks li, ul.is-style-crosses li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}
ul.is-style-checks li::before, ul.is-style-crosses li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.3em;
	width: 1.15rem; height: 1.15rem;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.72rem;
}
ul.is-style-checks li::before {
	background-color: var(--wp--preset--color--tide);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6699' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
ul.is-style-crosses li::before {
	background-color: var(--etw-signal-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B23516' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.has-harbor-background-color ul.is-style-checks li::before,
.has-ink-background-color ul.is-style-checks li::before {
	background-color: rgba(255, 255, 255, 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7445' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   9. FAQ (Details block)
------------------------------------------------------------------ */
.wp-block-details { border-top: 0; }
.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.01em;
	padding-right: 2.5rem;
	position: relative;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.25rem; top: 50%;
	width: 1.6rem; height: 1.6rem;
	margin-top: -0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--tide) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6699' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
	transition: transform 0.25s var(--etw-ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--slate); max-width: 44rem; }
.wp-block-details[open] > summary { margin-bottom: 0.6rem; }

/* ------------------------------------------------------------------
   10. Quote form
------------------------------------------------------------------ */
.etw-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-l);
	box-shadow: var(--wp--preset--shadow--lift);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}
.etw-quote-form { margin: 0; }
.etw-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.1rem;
}
@media (max-width: 640px) { .etw-form-grid { grid-template-columns: 1fr; } }
.etw-field { display: grid; gap: 0.35rem; align-content: start; }
.etw-field.is-wide { grid-column: 1 / -1; }
.etw-field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.etw-req { color: var(--wp--preset--color--signal-text); }
.etw-opt { font-weight: 400; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--x-small); }
.etw-field input,
.etw-field select,
.etw-field textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1.5px solid var(--etw-line);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.etw-field textarea { resize: vertical; min-height: 8rem; }
.etw-field input:focus,
.etw-field select:focus,
.etw-field textarea:focus {
	outline: none;
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--harbor);
	box-shadow: 0 0 0 4px rgb(var(--etw-harbor-rgb) / 0.15);
}
.etw-field.has-error input,
.etw-field.has-error textarea,
.etw-field.has-error select { border-color: var(--wp--preset--color--signal-text); background: var(--etw-error-field); }
.etw-consent { margin-top: 1.1rem; }
.etw-consent label {
	display: flex; gap: 0.6rem; align-items: flex-start;
	font-weight: 400; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--slate);
}
.etw-consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--wp--preset--color--harbor); flex-shrink: 0; }
.etw-consent.has-error label { color: var(--wp--preset--color--signal-text); }
.etw-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }
.etw-form-actions .etw-submit {
	border: 0; cursor: pointer;
	background: var(--wp--preset--color--harbor);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	border-radius: 10px;
	padding: 0.95em 1.6em;
}
.etw-form-actions .etw-submit:hover { background: var(--wp--preset--color--harbor-deep); }
.etw-form-actions .etw-submit[disabled] { opacity: 0.7; cursor: progress; }
.etw-form-note { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); }
.etw-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.etw-form-notice {
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}
.etw-form-notice.is-success { background: var(--wp--preset--color--tide); border: 1px solid rgb(var(--etw-harbor-rgb) / 0.35); color: var(--wp--preset--color--harbor-deep); }
.etw-form-notice.is-error { background: var(--etw-signal-wash); border: 1px solid rgb(var(--etw-signal-text-rgb) / 0.4); color: var(--etw-signal-ink); }

/* ------------------------------------------------------------------
   11. Contact details list
------------------------------------------------------------------ */
.etw-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.etw-contact li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	grid-template-rows: auto auto;
	column-gap: 0.75rem;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
}
.etw-contact .etw-inline-icon { width: 1.25rem; height: 1.25rem; grid-row: 1 / 3; color: var(--wp--preset--color--harbor); align-self: start; margin-top: 0.15rem; }
.etw-contact__label { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.etw-contact__value { color: var(--wp--preset--color--ink); font-weight: 500; }
.has-ink-background-color .etw-contact .etw-inline-icon { color: var(--wp--preset--color--signal); }
.has-ink-background-color .etw-contact__label { color: var(--wp--preset--color--mist); }
.has-ink-background-color .etw-contact__value { color: var(--wp--preset--color--white); }
.etw-admin-hint {
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--etw-signal-wash);
	color: var(--etw-signal-ink);
	border: 1px dashed rgb(var(--etw-signal-text-rgb) / 0.5);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
}
.etw-admin-hint a:not(.wp-element-button), [class*="-background-color"] .etw-admin-hint a:not(.wp-element-button), .etw-dark .etw-admin-hint a:not(.wp-element-button) { color: var(--etw-signal-ink); text-decoration: underline; }   /* readable on the light hint, also inside the dark footer */

/* ------------------------------------------------------------------
   12. Footer
------------------------------------------------------------------ */
.etw-footer { font-size: var(--wp--preset--font-size--small); }
.etw-footer h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mist) !important;
	font-weight: 600;
	margin-bottom: 1rem;
}
.etw-footer .etw-footer-links { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.55rem; }
.etw-footer a { text-decoration: none; }
.etw-footer a:hover { text-decoration: underline; }
.etw-footer .etw-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--mist);
}

/* ------------------------------------------------------------------
   13. Blog / page templates
------------------------------------------------------------------ */
.etw-page-header { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--40); }
.etw-prose h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.etw-prose h3 { margin-top: 1.75rem; }
.etw-prose p, .etw-prose li { color: var(--etw-prose); }
.wp-block-post-template.etw-post-list > li { border-bottom: 1px solid var(--etw-line); padding-bottom: 1.5rem; }

/* ------------------------------------------------------------------
   14. Reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Mobile-only "Request a quote" link inside the navigation overlay */
.etw-header .wp-block-navigation .etw-nav-quote { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .etw-nav-quote { display: flex; }

/* FAQ intro stays in view while reading answers (wide screens) */
@media (min-width: 782px) {
	.etw-faq-intro { position: sticky; top: 110px; align-self: flex-start; }
}

/* Quote form fieldsets */
.etw-fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.etw-fieldset legend {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	padding: 0;
	margin-bottom: 0.9rem;
}
.etw-fieldset + .etw-fieldset { border-top: 1px solid var(--etw-line); padding-top: 1.5rem; }
.etw-form-legend { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); }
.etw-prose > .etw-lead { max-width: var(--wp--style--global--content-size, 760px); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.wp-block-navigation__responsive-container.is-menu-open .etw-nav-quote a { color: var(--wp--preset--color--signal-text) !important; }

/* ==================================================================
   15. Floating tiles & interaction layer
   Everything below only switches on when assets/js/theme.js (or the
   tiny head script) adds .etw-motion to <html>, and never for visitors
   who ask their device for reduced motion. The editor is unaffected.
================================================================== */

/* ---- Hero chips (floating tiles around the request card) ---- */
.etw-float-stage { position: relative; }
.etw-chip {
	align-items: center;
	width: max-content;
	max-width: 100%;
	margin: 0 !important;
	padding: 0.5rem 1rem 0.5rem 0.55rem;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--etw-line);
	border-radius: 999px;
	box-shadow: 0 2px 4px rgb(var(--etw-ink-rgb) / 0.05), 0 16px 32px -16px rgb(var(--etw-ink-rgb) / 0.3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
	z-index: 2;
}
.etw-chip p { margin: 0; white-space: nowrap; }
.etw-chip .wp-block-image { margin: 0; flex-shrink: 0; }
.etw-chip .wp-block-image img {
	width: 28px !important; height: 28px;
	padding: 5px; box-sizing: border-box;
	background: var(--wp--preset--color--tide);
	border-radius: 50%;
}
/* Chips sit on the card's edges and padding, never over its text:
   A top-left corner, B beside the card's label row, C under the bottom edge. */
@media (min-width: 782px) {
	.etw-float-stage { padding: 2rem 0 3.25rem; }
	.etw-chip { position: absolute; font-size: var(--wp--preset--font-size--x-small); }
	.etw-chip--a { top: 0.25rem; left: -1.25rem; }
	.etw-chip--b { top: calc(2rem + clamp(1.25rem, 2.5vw, 2rem) - 0.35rem); right: -1rem; }
	.etw-chip--c { bottom: 0.25rem; right: 10%; }
}
@media (min-width: 1200px) {
	.etw-chip { font-size: var(--wp--preset--font-size--small); }
	.etw-chip--a { left: -2rem; }
	.etw-chip--b { top: calc(2rem + clamp(1.25rem, 2.5vw, 2rem) - 0.55rem); right: -2rem; }
}
@media (max-width: 781px) {
	.etw-float-stage { display: flex; flex-wrap: wrap; gap: 0.5rem; }
	.etw-float-stage > .etw-route-card { flex: 1 1 100%; margin-bottom: 0.5rem; }
	.etw-chip { font-size: var(--wp--preset--font-size--x-small); padding: 0.4rem 0.8rem 0.4rem 0.45rem; }
	.etw-chip .wp-block-image img { width: 24px !important; height: 24px; padding: 4px; }
}

/* ---- Entrance: hide hero content until the script animates it in.
        Failsafe: shows anyway after 2.5 s if the script never runs. ---- */
@keyframes etw-failsafe { to { opacity: 1; } }
.etw-loading .etw-hero .wp-block-column > *,
.etw-loading .etw-float-stage > * {
	opacity: 0;
	animation: etw-failsafe 0.4s ease 2.5s forwards;
}

/* ---- Scroll reveals ---- */
.etw-motion .etw-rv,
.etw-motion .etw-tilt,
.etw-motion .etw-chip,
.etw-motion .etw-float-stage .etw-route-card {
	transition:
		transform 0.7s var(--etw-ease),
		box-shadow 0.4s ease,
		border-color 0.3s ease,
		opacity 0.8s var(--etw-ease) var(--rv-delay, 0ms),
		translate 0.95s var(--etw-ease) var(--rv-delay, 0ms),
		scale 0.95s var(--etw-ease) var(--rv-delay, 0ms);
}
.etw-motion .etw-rv:not(.is-in) { opacity: 0; translate: 0 32px; scale: 0.97; }
.etw-motion .etw-float-stage .etw-rv:not(.is-in) { translate: 0 22px; scale: 0.92; }

/* Headlines rise word by word */
.etw-motion .etw-split-ready .etw-w {
	display: inline-block;
	opacity: 0;
	translate: 0 0.55em;
	transition:
		opacity 0.6s var(--etw-ease) calc(var(--rv-delay, 0ms) + var(--i, 0) * 45ms),
		translate 0.8s var(--etw-ease) calc(var(--rv-delay, 0ms) + var(--i, 0) * 45ms);
}
.etw-motion .etw-split-ready.is-in .etw-w { opacity: 1; translate: 0 0; }

/* ---- Idle floating (tiles, chips and fact pills bob gently) ---- */
@keyframes etw-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 var(--bob, -6px); }
}
.etw-chip { --bob: -9px; }
.etw-tile { --bob: -5px; }
.etw-fact { --bob: -3px; }
.etw-motion .etw-float {
	animation: etw-bob var(--bob-dur, 6s) ease-in-out var(--bob-delay, 0s) infinite;
}
.etw-motion .etw-float.is-paused,
.etw-motion .etw-float.is-tilting { animation-play-state: paused; }

/* Fact strip items become small floating pills */
.etw-fact {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--etw-line);
	border-radius: 999px;
	padding: 0.5rem 0.95rem 0.5rem 0.75rem;
}

/* ---- 3D tilt + light that follows the cursor (mouse / trackpad only) ---- */
.etw-tilt {
	position: relative;
	transform:
		perspective(900px)
		rotateX(var(--rx, 0deg))
		rotateY(var(--ry, 0deg))
		translateY(var(--lift, 0px));
	will-change: transform;
}
.etw-motion .etw-tilt.is-tilting {
	--lift: -6px;
	box-shadow: var(--wp--preset--shadow--lift);
	transition-duration: 0.15s, 0.4s, 0.3s, 0.8s, 0.95s, 0.95s;
}
.wp-block-group.is-style-card.etw-tilt.is-tilting,
.etw-tile.etw-tilt.is-tilting { border-color: rgb(var(--etw-harbor-rgb) / 0.4); }
.etw-tilt::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--etw-harbor-rgb) / 0.1), transparent 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.etw-tilt.is-tilting::after { opacity: 1; }
.has-ink-background-color .etw-tilt::after,
.etw-feature.etw-tilt::after {
	background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 60%);
}

/* ---- Hero parallax (mouse position drives --px / --py from -1 to 1) ---- */
.etw-motion .etw-hero::before {
	transform: translate3d(calc(var(--px, 0) * -28px), calc(var(--py, 0) * -20px), 0);
	animation: etw-drift-a 18s ease-in-out infinite alternate;
	transition: transform 1.2s var(--etw-ease);
}
.etw-motion .etw-hero::after {
	transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 16px), 0);
	animation: etw-drift-b 22s ease-in-out infinite alternate;
	transition: transform 1.2s var(--etw-ease);
}
@keyframes etw-drift-a { from { translate: 0 0; } to { translate: -4rem 3rem; } }
@keyframes etw-drift-b { from { translate: 0 0; } to { translate: 5rem -2rem; } }
.etw-motion .etw-float-stage .etw-route-card {
	transform: perspective(1200px) rotateY(calc(var(--px, 0) * 3.5deg)) rotateX(calc(var(--py, 0) * -3deg));
}
.etw-motion .etw-chip { transform: translate3d(calc(var(--px, 0) * var(--depth, 14px)), calc(var(--py, 0) * var(--depth, 14px)), 0); }
.etw-chip--a { --depth: 12px; }
.etw-chip--b { --depth: 6px; }
.etw-chip--c { --depth: 9px; }

/* ---- Live request card: steps advance on their own, pause on hover ---- */
@keyframes etw-pulse {
	0% { box-shadow: 0 0 0 0 rgb(var(--etw-signal-rgb) / 0.45); }
	100% { box-shadow: 0 0 0 10px rgb(var(--etw-signal-rgb) / 0); }
}
.etw-route.is-live li:nth-child(n)::before {
	border-color: var(--etw-line);
	background: var(--wp--preset--color--surface);
	box-shadow: none;
	animation: none;
	transition: background-color 0.4s ease, border-color 0.4s ease;
}
.etw-route.is-live li:nth-child(n)::after { background: var(--etw-line); transition: background-color 0.6s ease; }
.etw-route.is-live li.is-done:nth-child(n)::before {
	border-color: var(--wp--preset--color--harbor);
	background: var(--wp--preset--color--harbor) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.etw-route.is-live li.is-done:nth-child(n)::after { background: var(--wp--preset--color--harbor); }
.etw-route.is-live li.is-active:nth-child(n)::before {
	border-color: var(--wp--preset--color--signal);
	animation: etw-pulse 1.6s ease-out infinite;
}
.etw-route.is-live li strong { transition: color 0.3s ease; }
.etw-route.is-live li.is-active strong { color: var(--wp--preset--color--harbor); }

/* ---- Process: steps light up one after another ---- */
.etw-step { position: relative; }
.etw-motion .etw-steps-live .etw-step::before {
	content: "";
	position: absolute;
	top: 0; left: 1px; right: 1px;
	height: 3px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, var(--wp--preset--color--signal), var(--etw-signal-light));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.9s var(--etw-ease);
}
.etw-motion .etw-steps-live .etw-step.is-lit::before { transform: scaleX(1); }
.etw-motion .etw-steps-live .etw-step .etw-step-num { transition: color 0.5s ease, text-shadow 0.6s ease; }
.etw-motion .etw-steps-live .etw-step:not(.is-lit) .etw-step-num { color: rgba(255, 255, 255, 0.3) !important; }
.etw-motion .etw-steps-live .etw-step.is-lit .etw-step-num { text-shadow: 0 0 22px rgb(var(--etw-signal-rgb) / 0.5); }

/* ---- Spotlight that follows the cursor on dark sections ---- */
.etw-spotlight { position: relative; isolation: isolate; }
.etw-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(36rem circle at var(--sx, 75%) var(--sy, 0%), rgb(var(--etw-harbor-rgb) / 0.55), transparent 65%);
}

/* ---- Magnetic buttons ---- */
.etw-magnetic { transition: translate 0.45s var(--etw-ease), transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }

/* ---- Navigation: animated underline and current section ---- */
.etw-header .wp-block-navigation a:not(.wp-element-button):hover { text-decoration: none; }
.etw-header .wp-block-navigation-item__content { position: relative; }
.etw-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--signal);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--etw-ease);
}
.etw-header .wp-block-navigation-item__content:hover::after,
.etw-header .wp-block-navigation-item__content.is-active::after { transform: scaleX(1); }
.etw-header .wp-block-navigation a.is-active:not(.wp-element-button) { color: var(--wp--preset--color--harbor); }

/* ---- Header: reading progress bar; hides while scrolling down on phones ---- */
.etw-js .etw-header-wrap::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--wp--preset--color--signal);
	transform-origin: left;
	transform: scaleX(var(--etw-progress, 0));
	pointer-events: none;
}
.etw-header-wrap { transition: border-color 0.3s, box-shadow 0.3s, translate 0.4s var(--etw-ease); }
.etw-header-wrap.is-hidden { translate: 0 -110%; }

/* ---- FAQ: animated open/close (height handled by script) ---- */
.wp-block-details { box-sizing: border-box; }

/* ---- Floating "Request a quote" button on phones ---- */
.etw-fab {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 14px 30px -12px rgb(var(--etw-signal-rgb) / 0.85), 0 4px 10px rgb(var(--etw-ink-rgb) / 0.18);
	opacity: 0;
	visibility: hidden;
	translate: 0 24px;
	transition: opacity 0.3s ease, translate 0.45s var(--etw-ease), visibility 0s linear 0.45s;
}
.etw-fab::after { content: "→"; font-weight: 700; }
.etw-fab.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.45s var(--etw-ease), visibility 0s; }
@media (min-width: 782px) { .etw-fab { display: none; } }

/* ---- Print: always show everything ---- */
@media print {
	.etw-rv, .etw-split-ready .etw-w, .etw-loading .etw-hero .wp-block-column > * { opacity: 1 !important; translate: none !important; scale: none !important; }
	.etw-fab, .etw-hero::before, .etw-hero::after { display: none !important; }
}

/* Badge text stays dark on orange (beats the feature card's paragraph color) */
.etw-feature .etw-badge, p.etw-badge { color: var(--wp--preset--color--ink); }

/* ==================================================================
   16. Alignment & typography pass (v1.2)
================================================================== */

/* Balanced headings and no single-word last lines */
h1, h2, h3, h4, summary, legend, .etw-route strong { text-wrap: balance; }
p, li, .etw-lead { text-wrap: pretty; }

/* Two-column sections stack below 1024px instead of 782px, so nothing gets cramped */
@media (max-width: 1023px) {
	.wp-block-columns.etw-stack-md { flex-wrap: wrap !important; row-gap: var(--wp--preset--spacing--50); }
	.wp-block-columns.etw-stack-md > .wp-block-column { flex-basis: 100% !important; flex-grow: 1; }
	.etw-hero .etw-float-stage { max-width: 36rem; }
	.etw-faq-intro { position: static; }
}
/* Headings in side columns (FAQ, quote) sized for their narrower column */
.etw-stack-md > .wp-block-column > h2 { font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.75rem); }

/* Card grids: equal columns, and inside every row the icon, heading and text line up */
.etw-cards {
	display: grid;
	grid-template-columns: repeat(var(--etw-cols, 3), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.etw-cards > * { margin: 0 !important; }
.etw-cards--4 { --etw-cols: 4; }
.etw-cards--3 { --etw-cols: 3; }
.etw-cards--5 { --etw-cols: 5; gap: var(--wp--preset--spacing--20); }
@media (max-width: 1199px) {
	.etw-cards--5 { --etw-cols: 2; }
	.etw-cards--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
	.etw-cards--4 { --etw-cols: 2; }
}
@media (max-width: 781px) { .etw-cards--3 { --etw-cols: 1; } }
@media (max-width: 599px) { .etw-cards--4, .etw-cards--5 { --etw-cols: 1; } }
.etw-cards > .is-style-card > * { margin: 0 !important; }
.etw-cards > .is-style-card > h3 { margin: 1rem 0 0.5rem !important; }
@supports (grid-template-rows: subgrid) {
	.etw-cards > .is-style-card {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-content: start;
	}
}

/* Facts strip: pills centred as one group, even gaps when they wrap */
.etw-facts .wp-block-group.alignwide { justify-content: center !important; gap: 0.75rem !important; }
.etw-fact { padding: 0.45rem 0.9rem 0.45rem 0.7rem; }

/* Consistent text size inside every card and tile */
.wp-block-group.is-style-card li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
}
.etw-feature p:not(.etw-badge),
.etw-feature li { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

/* One tracking value for small uppercase labels */
.etw-card-kicker, .etw-badge, .etw-contact__label, .etw-footer h2 { letter-spacing: 0.12em; }

/* Lines */
.etw-route li::after { bottom: -0.2rem; }            /* timeline now meets the next dot */
.etw-motion .etw-steps-live .etw-step::before {        /* top bar sits on the card edge */
	top: -1px; left: -1px; right: -1px;
	border-radius: var(--etw-radius-m) var(--etw-radius-m) 0 0;
}
@media (min-width: 1024px) {
	.etw-stack-md .wp-block-column > .wp-block-details:first-child { padding-top: 0; } /* first question level with the heading */
}

/* Form: inputs in the same row always line up, even when a label wraps */
.etw-field:not(.etw-consent) { display: flex; flex-direction: column; justify-content: flex-end; }

/* Header: tablets get the menu button instead of a wrapped menu */
@media (min-width: 600px) and (max-width: 1023px) {
	.etw-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.etw-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.etw-header-cta .wp-block-button__link { white-space: nowrap; }

/* Hero headline scales with its column (not the window), so "Your procurement" always stays together */
.etw-hero .wp-block-column:first-child { container-type: inline-size; }
.etw-hero h1 { font-size: clamp(2.05rem, 10.4cqi, 4.5rem); }

/* Facts: 5 in a row on wide screens, a balanced 3 + 2 below that, a tidy list on phones */
@media (max-width: 1279px) {
	.etw-facts .wp-block-group.alignwide { max-width: 50rem; margin-inline: auto !important; }
}
@media (max-width: 599px) {
	.etw-fact { flex: 1 1 100%; }
}

/* Form controls share one height (date and select fields included) and the brand font */
.etw-quote-form input, .etw-quote-form select, .etw-quote-form textarea, .etw-quote-form button { font-family: inherit; }
.etw-field input:not([type="checkbox"]), .etw-field select { height: 2.875rem; }

/* 1024–1199px: the card is too narrow for a chip beside its label, so B and C share the bottom edge */
@media (min-width: 1024px) and (max-width: 1199px) {
	.etw-chip--b { top: auto; right: auto; bottom: 0.5rem; left: 0; }
	.etw-chip--c { right: 0; }
}
@media (min-width: 1200px) and (max-width: 1339px) { .etw-chip--b { right: -1.25rem; } }
@media (min-width: 782px) and (max-width: 1023px) {
	.etw-chip--a { top: -0.25rem; left: -0.75rem; --depth: 8px; }
	.etw-chip--c { --depth: 6px; }
}

/* ==================================================================
   17. Photography (v1.3)
   Photos sit in Cover blocks, so each one can be replaced from the
   editor (select the section > Replace). The overlay color is part of
   the block; these rules set type color, spacing and motion on top.
================================================================== */

/* ---- Type on photo sections (same colors as the dark sections) ---- */
.etw-dark h1,
.etw-dark h2,
.etw-dark h3,
.etw-dark h4,
.etw-dark summary { color: var(--wp--preset--color--white); }
.etw-dark h1 em,
.etw-dark h2 em { font-style: normal; color: var(--wp--preset--color--sky); }
.etw-dark .etw-eyebrow { color: var(--wp--preset--color--dusk); }
.etw-dark .etw-lead,
.etw-dark .etw-muted { color: rgba(255, 255, 255, 0.9); }
.etw-dark a:not(.wp-element-button) { color: var(--wp--preset--color--white); }
.etw-dark ul.is-style-checks li { color: rgba(255, 255, 255, 0.9); }
.etw-dark ul.is-style-checks li::before {
	background-color: rgba(255, 255, 255, 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB38F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.etw-dark .wp-block-separator { color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.2); opacity: 1; }
.etw-dark .etw-contact .etw-inline-icon { color: var(--wp--preset--color--dusk); }
.etw-dark .etw-contact__label { color: var(--wp--preset--color--mist); }
.etw-dark .etw-contact__value { color: var(--wp--preset--color--white); }
.etw-dark .etw-tilt::after {
	background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 60%);
}

/* Cover blocks: our own spacing instead of the block's 1em / 430px defaults */
.wp-block-cover.etw-section,
.wp-block-cover.etw-cta-band,
.wp-block-cover.etw-photo-band {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-left: 0;   /* the inner container already carries the site's side padding */
	padding-right: 0;
}
.wp-block-cover.etw-cta-band { min-height: 0; }
.etw-cta-band .etw-lead { color: var(--wp--preset--color--white); }
.wp-block-cover > .wp-block-cover__inner-container > .alignwide { margin-inline: auto; }

/* ---- Hero on the harbor photo ---- */
.wp-block-cover.etw-hero {
	min-height: clamp(34rem, 84vh, 54rem);
	padding-top: clamp(3rem, 7vw, 6.5rem);
	padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
	padding-left: 0;
	padding-right: 0;
	background: var(--wp--preset--color--ink);
}
.wp-block-cover.etw-hero::before,
.wp-block-cover.etw-hero::after { display: none; }
.etw-hero.etw-dark .etw-lead { color: rgba(255, 255, 255, 0.92); }
.etw-hero.etw-dark .etw-hero-note { color: rgba(255, 255, 255, 0.88); }
.etw-hero.etw-dark .etw-hero-note strong { color: var(--wp--preset--color--white); }
.etw-hero .etw-route-card { color: var(--wp--preset--color--ink); }
.etw-hero .etw-route-card p.etw-card-kicker { color: var(--wp--preset--color--harbor); }
.etw-hero .etw-route-card p.etw-card-foot { color: var(--wp--preset--color--slate); }
.etw-hero .etw-chip { color: var(--wp--preset--color--ink); }
.etw-hero .etw-route-card { box-shadow: 0 2px 6px rgb(var(--etw-ink-rgb) / 0.12), 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
/* Stacked (tablet and phone): text runs full width, so the overlay goes top to bottom */
@media (max-width: 1023px) {
	.wp-block-cover.etw-hero { min-height: 0; }
	.etw-hero > .wp-block-cover__background {
		background: var(--etw-ov-hero-m) !important;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.etw-hero > .wp-block-cover__background { background: var(--etw-ov-hero-t) !important; }
}

/* ---- How it works: glass cards over the night terminal ---- */
.etw-dark .wp-block-group.is-style-card {
	background: rgb(var(--etw-ink-rgb) / 0.52);
	border-color: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(8px) saturate(1.15);
	backdrop-filter: blur(8px) saturate(1.15);
}
.etw-dark .wp-block-group.is-style-card p:not(.etw-step-num) { color: var(--wp--preset--color--mist); }
.etw-dark .wp-block-group.is-style-card.etw-tilt.is-tilting { border-color: rgba(255, 255, 255, 0.3); }

/* ---- Photo band (aerial) ---- */
.wp-block-cover.etw-photo-band { min-height: clamp(26rem, 46vw, 36rem); }
.etw-band-inner > * { max-width: 36rem; }
.etw-band-inner > h2 { margin-top: 0; }
.etw-band-inner > .etw-band-pills { max-width: 64rem; gap: 0.6rem; margin-top: var(--wp--preset--spacing--40); }
.etw-glass-pill {
	margin: 0 !important;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: rgb(var(--etw-ink-rgb) / 0.5);
	border: 1px solid rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	--bob: -5px;
}
.etw-glass-pill::before {
	content: "";
	display: inline-block;
	width: 0.5rem; height: 0.5rem;
	margin-right: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--dusk);
	vertical-align: 0.08em;
}
@media (max-width: 781px) {
	/* Phones: the photo shows in a window at the top, the text sits on ink below */
	.wp-block-cover.etw-photo-band { align-items: flex-end; padding-top: 15rem; background-color: var(--wp--preset--color--ink); }
	.wp-block-cover.etw-photo-band > .wp-block-cover__image-background,
	.etw-motion .wp-block-cover.etw-photo-band.etw-parallax > .wp-block-cover__image-background { top: 0; bottom: auto; height: 17rem; transform: none; }
	.etw-photo-band > .wp-block-cover__background {
		background: var(--etw-ov-band-m) !important;
	}
	.etw-glass-pill { flex: 1 1 100%; }
}

/* ---- Call to action on the skyline ---- */
@media (max-width: 781px) {
	.etw-cta-band > .wp-block-cover__background {
		background: var(--etw-ov-cta-m) !important;
	}
}

/* ---- Quote section: sunset photo panel beside the form ---- */
.wp-block-cover.etw-photo-panel {
	min-height: 100%;
	height: 100%;
	align-items: flex-start;
	padding: 13.5rem clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--etw-radius-l);
	box-shadow: var(--wp--preset--shadow--lift);
}
/* The photo fills a window at the top of the panel; the text sits on ink below it */
.wp-block-cover.etw-photo-panel { background-color: var(--wp--preset--color--ink); }
.etw-photo-panel > .wp-block-cover__image-background { height: 16.5rem; bottom: auto; }
.etw-photo-panel h2 { font-size: clamp(1.875rem, 1.1rem + 1.9vw, 2.75rem); margin-top: 0; }
.etw-photo-panel .etw-eyebrow { margin-top: 0; }
@media (max-width: 1023px) {
	.wp-block-cover.etw-photo-panel { height: auto; }
}

/* ---- Spotlight inside photo sections: sits above the overlay, below the text ---- */
.wp-block-cover.etw-spotlight::before {
	z-index: 2;
	background: radial-gradient(34rem circle at var(--sx, 75%) var(--sy, 0%), rgb(var(--etw-sky-rgb) / 0.13), transparent 65%);
}
.wp-block-cover.etw-spotlight > .wp-block-cover__inner-container { z-index: 3; }

/* ---- Motion on photos (only with .etw-motion, never for reduced motion) ---- */
/* Scroll parallax: the photo moves a little slower than the page */
.etw-motion .etw-parallax > .wp-block-cover__image-background {
	top: -9%;
	bottom: auto;
	height: 118%;
	transform: translate3d(0, var(--shift, 0px), 0);
	will-change: transform;
}
/* Hero: slow drift plus a light response to the pointer */
@keyframes etw-drift-photo { from { scale: 1.02; } to { scale: 1.08; } }
.etw-motion .etw-hero > .wp-block-cover__image-background {
	top: -3%; left: -3%;
	width: 106%; height: 106%;
	transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
	transition: transform 1.4s var(--etw-ease);
	animation: etw-drift-photo 26s ease-in-out infinite alternate;
	will-change: transform;
}
@media print {
	.wp-block-cover__background { opacity: 0.35; }
}

/* ==================================================================
   18. Fiftyport (v2.0)
================================================================== */
.etw-footer-slogan {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	margin-bottom: 0;
}
.etw-footer-slogan + .etw-muted { max-width: 26rem; }

/* ==================================================================
   19. Inner pages (v2.1)
================================================================== */

/* ---- Photo header on inner pages ---- */
.wp-block-cover.etw-page-hero {
	min-height: clamp(22rem, 36vw, 28rem);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	padding-left: 0;
	padding-right: 0;
	background-color: var(--wp--preset--color--ink);
}
.etw-page-hero-inner > * { max-width: 46rem; }
.etw-page-hero h1 {
	font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.75rem);
	line-height: 1.05;
	margin-top: 0.35rem;
	margin-bottom: 0;
}
.etw-page-hero .etw-lead { color: rgba(255, 255, 255, 0.92); margin-top: 1rem; }
.etw-breadcrumb {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--mist);
	margin: 0 0 1.25rem !important;
}
.etw-dark .etw-breadcrumb a { color: var(--wp--preset--color--mist); text-decoration: none; }
.etw-dark .etw-breadcrumb a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
@media (max-width: 781px) {
	.etw-page-hero > .wp-block-cover__background {
		background: var(--etw-ov-page-m) !important;
	}
}

@media (min-width: 782px) and (max-width: 1279px) {
	.etw-page-hero > .wp-block-cover__background { background: var(--etw-ov-page-t) !important; }
}

/* ---- Content blocks used on the inner pages ---- */
.etw-wide-row, .etw-link-row { margin-top: var(--wp--preset--spacing--40); }
.etw-link-row .etw-arrow-link, .etw-link-row p { margin: 0; }
.etw-on-dark a { color: var(--wp--preset--color--white); }
.etw-feature .etw-arrow-link { margin-top: 1.25rem; }
.etw-info-card + .etw-info-card { margin-top: var(--wp--preset--spacing--30); }
.wp-block-column > .wp-block-group.is-style-card.etw-info-card { height: auto; }
.etw-info-card > h3:first-child { margin-top: 0; }
.etw-info-card ul { margin-bottom: 0; }
.etw-info-card h3 + ul { margin-top: 0.75rem; }
.etw-info-card ul + h3 { margin-top: 1.5rem; }

/* What we don't do / limits */
.etw-limits {
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-m);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--wp--preset--color--paper);
}
.etw-limits h3 { margin-top: 0; }
.etw-limits ul { margin-bottom: 0; }

/* Narrow text blocks inside a wide section */
.etw-narrow > * { max-width: 46rem; }
.etw-narrow h3 { margin-top: 0; }

/* How it works: step rows */
.etw-steps-detail { display: grid; gap: 0; }
.etw-step-row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0 clamp(1rem, 3vw, 2.5rem);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--etw-line);
}
.etw-step-row:last-child { border-bottom: 1px solid var(--etw-line); }
.etw-step-row > .etw-step-num { font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); color: var(--wp--preset--color--signal-text) !important; }
.etw-step-body > * { max-width: 44rem; }
.etw-step-body h3 { margin-top: 0 !important; font-size: var(--wp--preset--font-size--x-large); }
.etw-step-body p { color: var(--wp--preset--color--slate); }
.etw-step-body ul { margin: 0.75rem 0 0; }
.etw-step-get {
	margin-top: 1rem !important;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--tide);
	border-radius: var(--etw-radius-s);
	color: var(--wp--preset--color--harbor-deep) !important;
	font-size: var(--wp--preset--font-size--small);
}
.etw-step-get strong { color: var(--wp--preset--color--harbor-deep); }
@media (max-width: 599px) {
	.etw-step-row { grid-template-columns: 1fr; }
	.etw-step-row > .etw-step-num { margin-bottom: 0.5rem !important; }
}

/* Pricing: example quote */
.etw-quote-sample {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--etw-line);
	border-radius: var(--etw-radius-l);
	box-shadow: var(--wp--preset--shadow--lift);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.etw-quote-sample > * { margin-top: 0; margin-bottom: 0; }
.etw-quote-sample__tag {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--harbor);
	background: var(--wp--preset--color--tide);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
}
.etw-quote-sample h3 { margin: 1rem 0 0.75rem !important; font-size: var(--wp--preset--font-size--large); }
.etw-quote-row {
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--etw-line);
	font-size: var(--wp--preset--font-size--small);
}
.etw-quote-row p { margin: 0; }
.etw-quote-row p:last-child { color: var(--wp--preset--color--slate); text-align: right; }
.etw-quote-row.is-total { border-top: 2px solid var(--wp--preset--color--ink); }
.etw-quote-row.is-total p:last-child { color: var(--wp--preset--color--ink); }
.etw-quote-sample__note { margin-top: 0.75rem !important; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--slate); }

/* About: company details */
.etw-company-list { margin: 0; display: grid; gap: 0; }
.etw-company-list > div {
	display: grid;
	grid-template-columns: minmax(8rem, 34%) 1fr;
	gap: 1rem;
	padding: 0.8rem 0;
	border-top: 1px solid var(--etw-line);
	font-size: var(--wp--preset--font-size--small);
}
.etw-company-list > div:last-child { border-bottom: 1px solid var(--etw-line); }
.etw-company-list dt { color: var(--wp--preset--color--slate); font-weight: 600; }
.etw-company-list dd { margin: 0; color: var(--wp--preset--color--ink); }

/* FAQ page groups */
.etw-faq-group .wp-block-column > h2 { margin-top: 0; }
.etw-faq-group + .etw-faq-group { border-top: 1px solid var(--etw-line); }

/* ---- Header: dropdown for "What we source" ---- */
.etw-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 15rem !important;
	padding: 0.5rem !important;
	border: 1px solid var(--etw-line) !important;
	border-radius: var(--etw-radius-m);
	background: var(--wp--preset--color--surface) !important;
	box-shadow: var(--wp--preset--shadow--lift);
}
.etw-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.75rem !important;
	border-radius: var(--etw-radius-s);
	font-size: var(--wp--preset--font-size--small);
}
.etw-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--tide); }
.etw-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.etw-header .wp-block-navigation .is-current-parent > .wp-block-navigation-item__content { color: var(--wp--preset--color--harbor); }
.etw-header .wp-block-navigation .wp-block-navigation__submenu-container a.is-active { color: var(--wp--preset--color--harbor); font-weight: 600; }
.etw-header .wp-block-navigation-submenu__toggle { margin-left: 0.2rem; }
/* Mobile overlay: the dropdown's links show as an indented list */
.etw-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0 1rem !important;
	background: transparent !important;
}

/* Full-width pages: sections sit edge to edge, like the home page */
.etw-page-content > * { margin-block-start: 0; margin-block-end: 0; }

/* Mobile menu: "What we source" and its two pages line up with the other links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-left: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0.25rem 0 0.25rem 1rem !important;
	gap: 0.25rem;
	border-left: 2px solid var(--etw-line) !important;
	margin-left: 0.15rem;
	width: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 500;
	padding: 0.35rem 0 !important;
}

/* ------------------------------------------------------------------
   20. Version 2.3: industry cards, process timeline, supply routes
------------------------------------------------------------------ */

/* ---- Industry cards: icon, kicker, title, text, link ---- */
@supports (grid-template-rows: subgrid) {
	.etw-industries > .is-style-card { grid-row: span 5; }
}
.etw-industry > .etw-card-kicker {
	margin-top: 1rem !important;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal-text) !important;
}
.etw-cards > .etw-industry > h3 { margin: 0.35rem 0 0.5rem !important; }
.etw-industry > .etw-arrow-link { margin-top: 0.85rem !important; align-self: end; font-size: var(--wp--preset--font-size--small); }

/* ---- Process as a timeline (home) ---- */
.etw-timeline {
	--node: 3rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 clamp(1rem, 2vw, 2rem);
	margin-top: var(--wp--preset--spacing--50) !important;
}
.etw-timeline::before,
.etw-timeline::after {
	content: "";
	position: absolute;
	left: calc(var(--node) / 2);
	right: 0;
	top: calc(var(--node) / 2 - 1px);
	height: 2px;
	border-radius: 2px;
}
.etw-timeline::before { background: rgba(255, 255, 255, 0.18); }
.etw-timeline::after { background: linear-gradient(90deg, var(--wp--preset--color--signal), var(--etw-signal-light)); }
.etw-motion .etw-timeline.etw-steps-live::after { transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--etw-ease); }
.etw-motion .etw-timeline.etw-steps-live.is-run::after { transform: scaleX(1); }
.etw-timeline > .etw-step { position: relative; margin: 0 !important; padding: 0; }
.etw-timeline > .etw-step::before { display: none !important; }
.etw-timeline .etw-step-num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--node);
	height: var(--node);
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white) !important;
	font-size: 1rem !important;
	letter-spacing: 0.02em;
}
.etw-timeline .etw-step h3 { margin: 1.25rem 0 0.4rem !important; font-size: var(--wp--preset--font-size--large); }
/* lighter than Mist: this text sits on the photo, not on a card */
.etw-timeline .etw-step p:not(.etw-step-num) { margin: 0; color: #D7E5EC; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.etw-motion .etw-timeline.etw-steps-live .etw-step .etw-step-num { transition: border-color 0.5s ease, box-shadow 0.6s ease, color 0.5s ease; }
.etw-motion .etw-timeline.etw-steps-live .etw-step:not(.is-lit) .etw-step-num { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.55) !important; }
.etw-motion .etw-timeline.etw-steps-live .etw-step.is-lit .etw-step-num { box-shadow: 0 0 0 6px rgb(var(--etw-signal-rgb) / 0.16); text-shadow: none; }
@media (max-width: 1023px) {
	.etw-timeline { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--40); max-width: 40rem; }
	.etw-timeline::before, .etw-timeline::after { display: none; }
	.etw-timeline > .etw-step { padding-left: calc(var(--node) + 1.25rem); min-height: var(--node); }
	.etw-timeline .etw-step-num { position: absolute; left: 0; top: 0; }
	.etw-timeline .etw-step h3 { margin-top: 0.6rem !important; }
	.etw-timeline > .etw-step:not(:last-child)::after {
		content: "";
		position: absolute;
		left: calc(var(--node) / 2 - 1px);
		top: var(--node);
		bottom: calc(-1 * var(--wp--preset--spacing--40));
		width: 2px;
		background: linear-gradient(var(--wp--preset--color--signal), var(--etw-signal-light));
	}
}

/* ---- How it works page: the step rows become a vertical timeline ---- */
.etw-steps-detail .etw-step-row { position: relative; border-top: 0; }
.etw-steps-detail .etw-step-row:last-child { border-bottom: 0; }
.etw-steps-detail .etw-step-row > .etw-step-num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 2px solid var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink) !important;
	font-size: 1.15rem !important;
}
.etw-steps-detail .etw-step-row:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.75rem - 1px);
	top: calc(var(--wp--preset--spacing--40) + 3.5rem);
	bottom: calc(-1 * var(--wp--preset--spacing--40));
	width: 2px;
	background: linear-gradient(var(--wp--preset--color--signal), var(--etw-signal-light));
}
@media (max-width: 599px) {
	.etw-steps-detail .etw-step-row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1rem; }
	.etw-steps-detail .etw-step-row > .etw-step-num { margin-bottom: 0 !important; }
}

/* ---- Supply routes diagram ---- */
.etw-supply { position: relative; overflow: hidden; isolation: isolate; }
.etw-supply::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 55% 55%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse at 55% 55%, #000 25%, transparent 75%);
	pointer-events: none;
}
.etw-routes-map {
	--gap: clamp(2rem, 4vw, 3.5rem);
	--tick: 1.55rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--gap);
	margin-top: var(--wp--preset--spacing--50) !important;
}
.etw-routes-map > * { margin: 0 !important; }
.etw-route-node,
.etw-route-option {
	position: relative;
	background: rgb(var(--etw-harbor-deep-rgb) / 0.32);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--etw-radius-m, 14px);
	padding: 1rem 1.2rem;
	transition: border-color 0.3s, background-color 0.3s;
}
.etw-route-node > *, .etw-route-option > * { margin: 0 !important; }
.etw-route-node p, .etw-route-option p { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }
.etw-route-node p.etw-card-kicker {
	margin-bottom: 0.35rem !important;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--dusk);
}
.etw-route-node:last-child { border-color: rgb(var(--etw-signal-rgb) / 0.55); }
.etw-route-option h3 { font-size: var(--wp--preset--font-size--base, 1rem); line-height: 1.3; margin-bottom: 0.2rem !important; }
.etw-route-node:hover, .etw-route-option:hover { border-color: rgb(var(--etw-signal-rgb) / 0.65); background: rgb(var(--etw-harbor-deep-rgb) / 0.5); }
.etw-route-list { position: relative; display: grid; gap: 0.75rem; }
.etw-route-list > * { margin: 0 !important; }   /* flow-layout margins would break the connector line */
.etw-route-hub {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 11rem;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--signal);
	background: var(--wp--preset--color--ink);
	box-shadow: 0 0 0 10px rgb(var(--etw-signal-rgb) / 0.08);
	text-align: center;
}
.etw-route-hub > * { margin: 0 !important; }
.etw-route-hub .etw-route-hub-mark img { width: 72px !important; height: auto; }
.etw-route-hub-name { margin-top: 0.6rem !important; font-family: var(--wp--preset--font-family--heading); font-weight: 800; color: var(--wp--preset--color--white); }
.etw-route-hub-note { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--mist); }
/* connectors (desktop) */
.etw-route-start::after,
.etw-route-hub::after,
.etw-route-option::before,
.etw-route-option:not(:last-child)::after,
.etw-route-end::before {
	content: "";
	position: absolute;
	background: var(--wp--preset--color--signal);
	pointer-events: none;
}
.etw-route-start::after { top: calc(50% - 1px); left: 100%; width: var(--gap); height: 2px; }
.etw-route-hub::after { top: calc(50% - 1px); left: calc(100% + 2px); width: calc(var(--gap) / 2); height: 2px; }
.etw-route-option::before { top: calc(var(--tick) - 1px); left: calc(var(--gap) / -2 - 1px); width: calc(var(--gap) / 2); height: 2px; }
.etw-route-option:not(:last-child)::after { top: var(--tick); bottom: calc(-0.75rem - var(--tick)); left: calc(var(--gap) / -2 - 1px); width: 2px; }
.etw-route-end::before { top: calc(50% - 1px); right: 100%; width: var(--gap); height: 2px; }
.etw-route-end::after {
	content: "";
	position: absolute;
	top: calc(50% - 7px);
	left: -12px;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--wp--preset--color--signal);
}
.etw-route-foot-row { margin-top: var(--wp--preset--spacing--40) !important; }
.etw-route-foot { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); }
@media (max-width: 1023px) {
	.etw-routes-map { grid-template-columns: minmax(0, 1fr); row-gap: 2.75rem; max-width: 34rem; }
	.etw-route-hub { justify-self: center; width: 11rem; }
	.etw-route-start::after, .etw-route-hub::after, .etw-route-list::after {
		content: "";
		position: absolute;
		top: 100%;
		left: calc(50% - 1px);
		width: 2px;
		height: 2.75rem;
		background: var(--wp--preset--color--signal);
	}
	.etw-route-hub::after { top: calc(100% + 2px); height: calc(2.75rem - 2px); }
	.etw-route-option::before, .etw-route-option:not(:last-child)::after, .etw-route-end::before { display: none; }
	.etw-route-end::after { top: -12px; left: calc(50% - 7px); border-width: 11px 7px 0 7px; border-color: var(--wp--preset--color--signal) transparent transparent transparent; }
}
@media (min-width: 600px) and (max-width: 1023px) {
	.etw-routes-map { max-width: 40rem; }
	.etw-route-list { grid-template-columns: 1fr 1fr; }
}

/* ---- Header and footer: the 50 logo ---- */
.etw-header .wp-block-site-logo img { width: 230px; height: auto; }
@media (max-width: 599px) {
	.etw-header .wp-block-site-logo img { width: 188px !important; }
}