/* ==========================================================================
   Prime Child — design tokens + premium primitives
   Change the tokens in :root and the whole site rebrands.
   ========================================================================== */

:root {
	/* --- Brand — sampled pixel-for-pixel from the Aluformix logo ------
	   The mark is two colours only: a deep navy "A" and a brushed
	   aluminium "F". There is no red in it, so there is none here. */
	--pw-primary:        #14508C;   /* logo's brightest blue — links, actions */
	--pw-primary-dark:   #103868;   /* logo core blue                          */
	--pw-primary-darker: #10284C;   /* logo deep navy                          */
	--pw-primary-light:  #E6EDF5;
	--pw-accent:         #14508C;   /* action colour — kept as its own token
	                                   so section accents can move independently */
	--pw-accent-dark:    #103868;
	/* Navy on navy is invisible: dark sections raise the brand blue instead
	   of introducing a second hue. */
	--pw-accent-on-dark: #7FB2F0;

	/* --- Brushed aluminium — the logo's "FORMIX" --------------------- */
	--pw-steel:          #8B9197;   /* mid metal — rules, icons, meta text */
	--pw-steel-light:    #C3C8CC;   /* highlight edge                      */
	--pw-silver:         #E8EBEE;   /* lightest band                       */
	/* Chrome sheen lifted off the logo's bevelled "F". */
	--pw-metal: linear-gradient(135deg, #6F767D 0%, #C3C8CC 22%, #EDF0F2 38%,
	                                    #9AA1A8 55%, #D6DADD 74%, #7C838A 100%);

	/* --- Neutrals ---------------------------------------------------- */
	--pw-ink:            #0B1B33;   /* headings */
	--pw-body:           #4A5568;   /* body copy */
	--pw-muted:          #8A9099;
	--pw-bg:             #FFFFFF;
	--pw-surface:        #F4F6F8;   /* alternating section bg — cool grey */
	--pw-cream:          #E8EBEE;   /* second alt band (silver, not cream) */
	--pw-surface-dark:   #0B1B33;
	--pw-border:         #DFE3E8;

	/* --- Type -------------------------------------------------------- */
	/* Catalogue uses Canva Sans (proprietary). Figtree is the closest
	   free/self-hostable match; Inter carries the body copy. */
	--pw-font-head: 'Figtree', 'Archivo', system-ui, sans-serif;
	--pw-font-body: 'Inter', 'Figtree', system-ui, -apple-system, sans-serif;

	--pw-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
	--pw-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	--pw-h3: clamp(1.4rem, 1.15rem + 1vw, 2rem);
	--pw-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
	--pw-lead: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);

	/* --- Layout ------------------------------------------------------ */
	--pw-container: 1240px;
	--pw-gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
	--pw-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* --- Surface treatment ------------------------------------------- */
	--pw-radius:    10px;
	--pw-radius-lg: 18px;
	--pw-shadow-sm: 0 1px 2px rgba(14, 22, 33, .06), 0 2px 8px rgba(14, 22, 33, .05);
	--pw-shadow-md: 0 4px 12px rgba(14, 22, 33, .08), 0 12px 32px rgba(14, 22, 33, .08);
	--pw-shadow-lg: 0 12px 24px rgba(14, 22, 33, .10), 0 32px 64px rgba(14, 22, 33, .12);
	--pw-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
	font-family: var(--pw-font-body);
	color: var(--pw-body);
	background: var(--pw-bg);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pw-font-head);
	font-weight: 800;
	color: var(--pw-ink);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 .5em;
}

/* The catalogue sets its big statements in uppercase — use on hero H1/H2 */
.pw-display {
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.02;
}

/* Two-tone headline: wrap the emphasised words in <span> */
.pw-display span { color: var(--pw-primary); }
.pw-dark .pw-display span { color: var(--pw-accent-on-dark); }

h1 { font-size: var(--pw-h1); }
h2 { font-size: var(--pw-h2); }
h3 { font-size: var(--pw-h3); }
h4 { font-size: var(--pw-h4); }

p { text-wrap: pretty; }

a { color: var(--pw-primary); text-decoration: none; transition: color .2s var(--pw-ease); }
a:hover { color: var(--pw-primary-dark); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid var(--pw-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--pw-primary); color: #fff; }

img { max-width: 100%; height: auto; }

/* Elementor container width, driven by our token */
.e-con, .elementor-section.elementor-section-boxed > .elementor-container {
	--container-max-width: var(--pw-container);
}

/* --------------------------------------------------------------------------
   Utility classes — apply from Elementor's "CSS Classes" field
   -------------------------------------------------------------------------- */

.pw-section   { padding-block: var(--pw-section-y); }
.pw-surface   { background: var(--pw-surface); }
.pw-cream-bg  { background: var(--pw-cream); }
.pw-dark      { background: var(--pw-surface-dark); color: #BCC5D6; }
.pw-dark :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* --- Brand motif: the angled panel -------------------------------------
   The logo's "A" is a hard diagonal against a brushed-metal "F"; the wedge
   below is that shape, filled navy with an aluminium leading edge.
   .pw-angle-red is the old catalogue name — kept as an alias because it is
   already baked into Elementor HTML widgets stored in the database. */

.pw-angle,
.pw-angle-red {
	/* The wedge is a fixed width, not a percentage. A percentage diagonal
	   grows with the element, so the same rule that looks right in a narrow
	   column swallows the first 200px of a full-width band. */
	--pw-angle-w: 84px;
	--pw-angle-bevel: 22px;
	position: relative;
	background: var(--pw-primary-darker);
	color: #fff;
	clip-path: polygon(var(--pw-angle-w) 0, 100% 0, 100% 100%, 0 100%);
}
/* The bevel: a metal sliver running down the diagonal. */
.pw-angle::before,
.pw-angle-red::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--pw-metal);
	clip-path: polygon(
		var(--pw-angle-w) 0,
		calc(var(--pw-angle-w) + var(--pw-angle-bevel)) 0,
		var(--pw-angle-bevel) 100%,
		0 100%
	);
	pointer-events: none;
}
.pw-angle :is(h1, h2, h3, h4, h5, h6),
.pw-angle-red :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* Brushed-aluminium fill — for rules, dividers and CTA sheen */
.pw-metal { background: var(--pw-metal); }

/* Thin rule under a heading — used throughout the site */
.pw-rule::after {
	content: '';
	display: block;
	width: 68px;
	height: 4px;
	margin-top: .85rem;
	background: var(--pw-accent);
}
.pw-rule.pw-rule--center::after { margin-inline: auto; }
/* On navy the flat blue rule disappears — switch it to metal. */
.pw-dark .pw-rule::after { background: var(--pw-metal); }

/* Left keyline for stat/feature blocks */
.pw-keyline { border-left: 4px solid var(--pw-accent); padding-left: 1.25rem; }
.pw-dark .pw-keyline { border-left-color: var(--pw-steel); }

/* Small uppercase label above a heading */
.pw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--pw-font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-primary);
}
.pw-eyebrow::before {
	content: '';
	width: 2.2em;
	height: 2px;
	background: var(--pw-accent);
}
/* On navy the brand blue is unreadable — the eyebrow goes to metal. */
.pw-dark .pw-eyebrow { color: var(--pw-steel-light); }
.pw-dark .pw-eyebrow::before { background: var(--pw-metal); }

.pw-lead { font-size: var(--pw-lead); color: var(--pw-body); }

/* Hero: dark gradient scrim so white text stays legible over any photo */
.pw-hero-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(14,22,33,.88) 0%, rgba(14,22,33,.62) 45%, rgba(14,22,33,.15) 100%);
	pointer-events: none;
	z-index: 0;
}
.pw-hero-overlay > .e-con-inner,
.pw-hero-overlay > .elementor-container { position: relative; z-index: 1; }

/* Card lift on hover — put on any Elementor container acting as a card */
.pw-card {
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	box-shadow: var(--pw-shadow-sm);
	overflow: hidden;
	transition: transform .35s var(--pw-ease), box-shadow .35s var(--pw-ease), border-color .35s var(--pw-ease);
}
.pw-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--pw-shadow-lg);
	border-color: transparent;
}
.pw-card img { transition: transform .6s var(--pw-ease); }
.pw-card:hover img { transform: scale(1.06); }

/* Accent bar that grows on hover — for product/industry cards */
.pw-card-bar { position: relative; }
.pw-card-bar::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	height: 4px; width: 0;
	background: var(--pw-accent);
	transition: width .4s var(--pw-ease);
}
.pw-card-bar:hover::after { width: 100%; }

/* Client logo strip — grayscale until hover */
.pw-logo-grid img {
	filter: grayscale(1);
	opacity: .55;
	transition: filter .3s var(--pw-ease), opacity .3s var(--pw-ease);
}
.pw-logo-grid img:hover { filter: grayscale(0); opacity: 1; }

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

.elementor-button,
.pw-btn {
	font-family: var(--pw-font-body);
	font-weight: 600;
	letter-spacing: .02em;
	border-radius: var(--pw-radius);
	transition: transform .25s var(--pw-ease), box-shadow .25s var(--pw-ease), background-color .25s var(--pw-ease);
}
.elementor-button:hover, .pw-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--pw-shadow-md);
}

/* --------------------------------------------------------------------------
   Sticky header — .pw-header on the Elementor header container
   -------------------------------------------------------------------------- */

.pw-header {
	position: sticky;
	top: 0;
	z-index: 999;
	transition: background-color .35s var(--pw-ease), box-shadow .35s var(--pw-ease), padding .35s var(--pw-ease);
}
.pw-header.is-stuck {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 var(--pw-border), var(--pw-shadow-sm);
	padding-block: .4rem;
}

/* --------------------------------------------------------------------------
   Scroll reveal — add .pw-reveal in Elementor's CSS Classes field
   -------------------------------------------------------------------------- */

/* Gated on .pw-js so the content stays visible when JavaScript is off or
   fails to load — without this, everything below the fold never appears. */
.pw-js .pw-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s var(--pw-ease), transform .7s var(--pw-ease);
	will-change: opacity, transform;
}
.pw-js .pw-reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children of a grid: .pw-reveal-stagger on the parent */
.pw-reveal-stagger > * { transition-delay: calc(var(--pw-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pw-js .pw-reveal { opacity: 1; transform: none; transition: none; }
	.pw-card:hover, .elementor-button:hover, .pw-btn:hover { transform: none; }
	.pw-card img, .pw-card:hover img { transition: none; transform: none; }
	/* The metal CTA still changes state, it just stops animating the change. */
	.pw-btn--accent::before, .elementor-button::before { transition: none; }
}

/* ==========================================================================
   Theme templates (archive.php / single-*.php)
   These replace Elementor Pro's Theme Builder for listing + detail pages.
   ========================================================================== */

.pw-container {
	width: min(100% - (var(--pw-gutter) * 2), var(--pw-container));
	margin-inline: auto;
}

/* --- Page hero ---------------------------------------------------------- */

.pw-page-hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
	background: var(--pw-surface-dark);
	background-size: cover;
	background-position: center;
	color: #C3CCD9;
}
.pw-page-hero > .pw-container { position: relative; z-index: 1; }
.pw-page-hero h1 { color: #fff; margin-bottom: .35em; }
.pw-page-hero .pw-lead { color: #C3CCD9; max-width: 60ch; margin: 0; }

/* --- Breadcrumb --------------------------------------------------------- */

.pw-breadcrumb { margin-bottom: 1.25rem; }
.pw-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	letter-spacing: .02em;
}
.pw-breadcrumb li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.55); }
.pw-breadcrumb li:not(:last-child)::after { content: '/'; color: rgba(255,255,255,.3); }
.pw-breadcrumb a { color: rgba(255,255,255,.75); }
.pw-breadcrumb a:hover { color: var(--pw-accent); }
.pw-breadcrumb [aria-current] { color: var(--pw-accent); }

/* --- Category filter pills ---------------------------------------------- */

.pw-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem);
}
.pw-filter__item {
	padding: .5rem 1.15rem;
	border: 1px solid var(--pw-border);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--pw-body);
	background: #fff;
	transition: color .25s var(--pw-ease), background-color .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
.pw-filter__item:hover { border-color: var(--pw-primary); color: var(--pw-primary); }
.pw-filter__item.is-active {
	background: var(--pw-primary);
	border-color: var(--pw-primary);
	color: #fff;
}

/* --- Archive grid ------------------------------------------------------- */

.pw-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
}

.pw-card__link { display: block; color: inherit; }
.pw-card__link:hover { color: inherit; }

.pw-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pw-surface);
}
.pw-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--pw-primary-light), var(--pw-surface));
}

.pw-card__body { padding: 1.5rem 1.5rem 1.75rem; }
.pw-card__meta {
	display: inline-block;
	margin-bottom: .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-primary);
}
.pw-card__title { font-size: var(--pw-h4); margin-bottom: .5rem; }
.pw-card:hover .pw-card__title { color: var(--pw-primary); }
.pw-card__excerpt { font-size: .95rem; margin: 0 0 1rem; }
.pw-card__cta {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .88rem;
	font-weight: 600;
	color: var(--pw-primary);
}
.pw-card__cta::after { content: '\2192'; transition: transform .3s var(--pw-ease); }
.pw-card:hover .pw-card__cta::after { transform: translateX(4px); }

/* --- Single entry prose -------------------------------------------------- */

.pw-entry { max-width: 78ch; }
.pw-entry > * + * { margin-top: 1.15em; }
.pw-entry :is(h2, h3, h4) { margin-top: 1.8em; }
.pw-entry img { border-radius: var(--pw-radius); }
.pw-entry ul, .pw-entry ol { padding-left: 1.35em; }
.pw-entry li + li { margin-top: .4em; }
.pw-entry blockquote {
	margin-inline: 0;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 3px solid var(--pw-accent);
	font-size: var(--pw-lead);
	color: var(--pw-ink);
}
.pw-entry table { width: 100%; border-collapse: collapse; }
.pw-entry :is(th, td) { padding: .7rem .9rem; border: 1px solid var(--pw-border); text-align: left; }
.pw-entry th { background: var(--pw-surface); color: var(--pw-ink); font-weight: 600; }

/* Wide content must scroll inside itself, never the page */
.pw-entry .wp-block-table, .pw-entry pre { overflow-x: auto; }

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

.pw-related { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.pw-related h2 { margin-bottom: 1.5rem; }

/* --- Pagination ---------------------------------------------------------- */

.pw-pagination { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pw-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}
.pw-pagination :is(.page-numbers) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: .75rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	font-weight: 600;
	color: var(--pw-body);
	background: #fff;
}
.pw-pagination .page-numbers:hover { border-color: var(--pw-primary); color: var(--pw-primary); }
.pw-pagination .page-numbers.current {
	background: var(--pw-primary);
	border-color: var(--pw-primary);
	color: #fff;
}

.pw-empty {
	padding: 3rem 0;
	text-align: center;
	color: var(--pw-muted);
	font-size: var(--pw-lead);
}

/* ==========================================================================
   Inner page layout — prose plus a sticky conversion rail
   ========================================================================== */

.pw-page-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	align-items: start;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.pw-page-layout .pw-entry { max-width: 72ch; }

.pw-aside { position: sticky; top: 120px; display: grid; gap: 1.5rem; }

.pw-aside__card {
	padding: 1.75rem;
	background: var(--pw-primary-dark);
	color: rgba(255, 255, 255, .8);
	border-radius: var(--pw-radius-lg);
	border-top: 4px solid var(--pw-accent);
}
.pw-aside__card p { font-size: .93rem; margin: 0 0 1.25rem; }
.pw-aside__card .pw-aside__title { color: #fff; }
.pw-aside__title { font-size: 1.15rem; margin-bottom: .75rem; }

.pw-aside__nav {
	padding: 1.6rem 1.75rem;
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
}
.pw-aside__nav ul { margin: 0; padding: 0; list-style: none; }
.pw-aside__nav li + li { margin-top: .1rem; }
.pw-aside__nav a {
	display: block;
	padding: .5rem 0;
	font-size: .93rem;
	font-weight: 600;
	color: var(--pw-ink);
	border-bottom: 1px solid var(--pw-border);
}
.pw-aside__nav li:last-child a { border-bottom: 0; }
.pw-aside__nav a:hover { color: var(--pw-accent); }

@media (max-width: 900px) {
	.pw-page-layout { grid-template-columns: 1fr; }
	.pw-aside { position: static; }
}

/* ==========================================================================
   Contact page + enquiry form
   ========================================================================== */

.pw-contact {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr);
	align-items: start;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.pw-contact__form h2 { margin-bottom: 1.75rem; }
.pw-contact__form .pw-eyebrow { margin-bottom: .9rem; }

.pw-contact__card {
	padding: 1.9rem 1.75rem;
	background: var(--pw-surface);
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	border-top: 4px solid var(--pw-accent);
}
.pw-contact__head { font-size: 1.25rem; margin-bottom: 1.35rem; }
.pw-contact__item + .pw-contact__item {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--pw-border);
}
.pw-contact__label {
	display: block;
	margin-bottom: .2rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-muted);
}
.pw-contact__item address { font-style: normal; }
.pw-contact__item a { font-weight: 600; }
.pw-contact__map { margin-top: 1.5rem; border-radius: var(--pw-radius-lg); overflow: hidden; }

/* --- Form ---------------------------------------------------------------- */

.pw-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 0 1.25rem;
}
.pw-field { margin: 0 0 1.15rem; }
.pw-field label {
	display: block;
	margin-bottom: .4rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--pw-ink);
}
.pw-field label span { color: var(--pw-accent); }

.pw-field :is(input, select, textarea) {
	width: 100%;
	padding: .8rem .9rem;
	font-family: inherit;
	font-size: .97rem;
	color: var(--pw-ink);
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	transition: border-color .2s var(--pw-ease), box-shadow .2s var(--pw-ease);
}
.pw-field :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--pw-primary);
	box-shadow: 0 0 0 3px rgba(20, 72, 129, .14);
}
.pw-field textarea { resize: vertical; min-height: 130px; }

.pw-field__hint { display: block; margin-top: .4rem; font-size: .82rem; color: var(--pw-muted); }

/* The consent checkbox sits inline with its wording, not above it. */
.pw-field--check label {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	font-weight: 500;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--pw-body);
	cursor: pointer;
}
.pw-field--check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: .15rem;
	accent-color: var(--pw-primary);
}
.pw-field--check label span { color: inherit; }

/* File inputs render their own button; the padded box around it is wrong. */
.pw-field input[type="file"] { padding: .55rem .6rem; font-size: .9rem; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.pw-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pw-notice {
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
	border-radius: var(--pw-radius);
	border-left: 4px solid;
	font-size: .95rem;
}
.pw-notice--ok    { background: #EAF6EE; border-color: #1E7F45; color: #14532D; }
.pw-notice--error { background: #FCEDEC; border-color: var(--pw-accent); color: #7A1512; }

.pw-footer__gst { display: block; margin-top: .5rem; font-size: .85rem; opacity: .75; }

@media (max-width: 900px) {
	.pw-contact { grid-template-columns: 1fr; }
}

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

.pw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--pw-radius);
	font-family: var(--pw-font-body);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
}
.pw-btn--lg      { padding: 1.05rem 2.2rem; font-size: 1.05rem; }
.pw-btn--accent  { background: var(--pw-accent); color: #fff; }
.pw-btn--accent:hover  { background: var(--pw-accent-dark); color: #fff; }
.pw-btn--primary { background: var(--pw-primary); color: #fff; }
.pw-btn--primary:hover { background: var(--pw-primary-dark); color: #fff; }
.pw-btn--ghost   { border-color: rgba(255,255,255,.55); color: #fff; }
.pw-btn--ghost:hover   { background: #fff; border-color: #fff; color: var(--pw-primary-dark); }

/* A blue button on a navy band reads as a hole. Inside .pw-dark the primary
   action switches to brushed aluminium with navy text — the logo's own
   contrast, and the highest-contrast CTA available in this palette.
   ------------------------------------------------------------------------
   CSS cannot transition a gradient, so animating this by swapping
   background-image on hover made the metal vanish in a single frame while
   background-color was still fading in — the button flashed a washed-out
   grey before it reached white. The metal is therefore a separate layer that
   fades out over the white beneath it, which is a real, interpolatable
   transition. Keep both halves in step if you touch either. */
/* :not(.elementor-widget) matters. Elementor copies the CSS classes onto the
   widget wrapper as well as the button inside it, so without this the wrapper
   grew its own metal layer behind the real one — and because the wrapper is
   reset to border-radius:0, it showed as a sharp-cornered slab poking out
   from behind the rounded button. The Elementor buttons are styled by their
   own rules further down. */
.pw-dark .pw-btn--accent:not(.elementor-widget),
.pw-angle .pw-btn--accent:not(.elementor-widget) {
	position: relative;
	isolation: isolate;          /* so the layer below can sit above the bg */
	background: #fff;            /* the hover destination, painted underneath */
	color: var(--pw-primary-darker);
	text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.pw-dark .pw-btn--accent:not(.elementor-widget)::before,
.pw-angle .pw-btn--accent:not(.elementor-widget)::before {
	content: '';
	position: absolute;
	/* -2px so the layer covers the transparent 2px border the same way the
	   element's own background does; inset:0 would leave a dark hairline. */
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: var(--pw-metal);
	transition: opacity .3s var(--pw-ease);
}
.pw-dark .pw-btn--accent:not(.elementor-widget):hover::before,
.pw-angle .pw-btn--accent:not(.elementor-widget):hover::before { opacity: 0; }

.pw-center { margin-top: 2.75rem; text-align: center; }

/* ==========================================================================
   Top bar + header
   ========================================================================== */

.pw-topbar {
	background: var(--pw-primary-darker);
	color: rgba(255,255,255,.72);
	font-size: .82rem;
}
.pw-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-block: .55rem;
}
.pw-topbar__tag { letter-spacing: .06em; text-transform: uppercase; }
.pw-topbar__contact { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pw-topbar a { color: rgba(255,255,255,.82); }
.pw-topbar a:hover { color: var(--pw-accent); }

.pw-header { background: #fff; border-bottom: 1px solid var(--pw-border); }
.pw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .9rem;
}
.pw-brand { display: inline-flex; align-items: center; }
/* Stacked lockup (mark over wordmark) needs real height to stay legible. */
.pw-brand__logo { display: block; width: auto; height: clamp(48px, 4vw, 68px); }
.pw-brand__text {
	font-family: var(--pw-font-head);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--pw-primary-dark);
	letter-spacing: -.02em;
}

.pw-nav { display: flex; align-items: center; gap: 1.75rem; }
.pw-menu {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pw-menu li { position: relative; }
.pw-menu a {
	display: inline-block;
	padding: .4rem 0;
	font-size: .95rem;
	font-weight: 600;
	color: var(--pw-primary-dark);
}
.pw-menu a:hover,
.pw-menu .current-menu-item > a,
.pw-menu .current_page_item > a { color: var(--pw-accent); }

/* Second level */
.pw-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	z-index: 20;
	min-width: 230px;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	box-shadow: var(--pw-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s var(--pw-ease), transform .2s var(--pw-ease), visibility .2s;
}
.pw-menu li:hover > .sub-menu,
.pw-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.pw-menu .sub-menu a { display: block; padding: .5rem 1rem; font-weight: 500; }

.pw-navtoggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
	cursor: pointer;
}
.pw-navtoggle__bars,
.pw-navtoggle__bars::before,
.pw-navtoggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--pw-primary-dark);
	transition: transform .3s var(--pw-ease), opacity .2s var(--pw-ease);
}
.pw-navtoggle__bars::before { content: ''; transform: translateY(-6px); }
.pw-navtoggle__bars::after  { content: ''; transform: translateY(4px); }
.pw-navtoggle[aria-expanded="true"] .pw-navtoggle__bars { background: transparent; }
.pw-navtoggle[aria-expanded="true"] .pw-navtoggle__bars::before { transform: rotate(45deg); }
.pw-navtoggle[aria-expanded="true"] .pw-navtoggle__bars::after  { transform: rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.pw-hero {
	position: relative;
	background: var(--pw-primary-darker) center/cover no-repeat;
	color: #fff;
	overflow: hidden;
}
.pw-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(0,1,48,.94) 0%, rgba(0,1,48,.78) 42%, rgba(0,1,48,.34) 78%, rgba(0,1,48,.5) 100%);
}
.pw-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	padding-block: clamp(4rem, 2.5rem + 8vw, 8.5rem);
}
/* Deliberately smaller than the global h1 so the headline holds three lines
   instead of five and the machinery behind it stays readable. */
.pw-hero__title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem);
	color: #fff;
	margin-bottom: .5em;
}
/* Scoped to .pw-hero__title so these beat the generic `.pw-display span`
   rule, which would otherwise paint every line dark blue on a dark hero. */
.pw-hero__title .pw-hero__line { display: block; text-wrap: nowrap; color: #fff; }
.pw-hero__title .pw-hero__line--accent { color: #7FB2F0; }

/* Very narrow screens: let the long lines wrap rather than overflow. */
@media (max-width: 420px) {
	.pw-hero__line { text-wrap: balance; }
}
.pw-hero__lead {
	max-width: 62ch;
	font-size: var(--pw-lead);
	color: rgba(255,255,255,.86);
	margin-bottom: 2rem;
}
.pw-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.pw-hero__pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5rem;
	margin: 0;
	list-style: none;
	/* Clear the diagonal plus the bevel, whatever width the band is. */
	padding: 1.5rem 2rem 1.5rem calc(var(--pw-angle-w, 84px) + var(--pw-angle-bevel, 22px) + 1.5rem);
}
/* The strip reads as one line of claims separated by rules, the way the
   the client writes it: "800–4,000 MT | Complete line integration | …" */
.pw-hero__pillar {
	position: relative;
	flex: 0 1 auto;
	padding: .55rem 0;
	font-family: var(--pw-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.pw-hero__pillar + .pw-hero__pillar::before {
	content: '';
	position: absolute;
	left: -1.25rem;
	top: .7rem;
	bottom: .7rem;
	width: 1px;
	background: rgba(255, 255, 255, .3);
}

/* ==========================================================================
   Stats strip
   ========================================================================== */

.pw-stats { background: var(--pw-primary-dark); color: #fff; }
.pw-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}
.pw-stat { display: flex; flex-direction: column; gap: .3rem; }
.pw-stat__num {
	font-family: var(--pw-font-head);
	font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
}
.pw-stat__label { font-size: .92rem; color: rgba(255,255,255,.72); }

/* ==========================================================================
   Section heads
   ========================================================================== */

.pw-sechead { margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }
.pw-sechead h2 { margin-bottom: 0; }
.pw-sechead .pw-eyebrow { margin-bottom: .9rem; }
.pw-sechead--center { text-align: center; }
.pw-sechead--center .pw-eyebrow { justify-content: center; }
.pw-sechead--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	align-items: end;
	gap: 2rem;
}
.pw-sechead__note { margin: 0; color: var(--pw-body); }
.pw-dark .pw-sechead__note, .pw-dark .pw-lead { color: rgba(255,255,255,.78); }

/* ==========================================================================
   Split (about)
   ========================================================================== */

.pw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	align-items: center;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.pw-split__media img {
	display: block;
	width: 100%;
	border-radius: var(--pw-radius-lg);
	box-shadow: var(--pw-shadow-md);
}
.pw-split__copy h2 { margin-bottom: 1.25rem; }
.pw-split__copy .pw-eyebrow { margin-bottom: .9rem; }
.pw-split__copy p { margin-bottom: 1rem; }

.pw-ticklist {
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: .6rem 1.5rem;
}
.pw-ticklist li {
	position: relative;
	padding-left: 1.7rem;
	font-weight: 600;
	color: var(--pw-ink);
}
.pw-ticklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: .55rem;
	height: .55rem;
	background: var(--pw-accent);
	transform: rotate(45deg);
}

/* ==========================================================================
   Mission / vision / values
   ========================================================================== */

.pw-mv {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
.pw-mv__head {
	font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
	margin-bottom: .6rem;
}
.pw-mv__item p { margin: 0; font-size: var(--pw-lead); }

.pw-values {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
	padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-top: 1px solid rgba(19, 40, 72, .14);
}
.pw-values__label {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-accent);
}
.pw-values__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pw-values__list li {
	font-family: var(--pw-font-head);
	font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
	font-weight: 700;
	color: var(--pw-primary-dark);
}

/* ==========================================================================
   Integrated-line benefits (inside the dark process section)
   ========================================================================== */

.pw-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
	margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
	padding-top: clamp(2rem, 1.25rem + 2vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.pw-benefit__title {
	font-size: 1.05rem;
	color: #fff;
	margin-bottom: .45rem;
	padding-left: .9rem;
	border-left: 3px solid var(--pw-accent);
}
.pw-benefit__text { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .74); }

/* ==========================================================================
   Category grid
   ========================================================================== */

.pw-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: clamp(1rem, .6rem + 1vw, 1.5rem);
}
.pw-cat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.75rem;
	min-height: 160px;
	padding: 1.6rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	border-left: 4px solid var(--pw-accent);
	color: var(--pw-ink);
	transition: transform .3s var(--pw-ease), box-shadow .3s var(--pw-ease), background-color .3s var(--pw-ease);
}
.pw-cat:hover {
	transform: translateY(-4px);
	box-shadow: var(--pw-shadow-lg);
	background: var(--pw-primary-dark);
	color: #fff;
}
.pw-cat__name {
	font-family: var(--pw-font-head);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}
.pw-cat__count { font-size: .82rem; color: var(--pw-muted); }
.pw-cat:hover .pw-cat__count { color: rgba(255,255,255,.7); }

/* ==========================================================================
   Process
   ========================================================================== */

.pw-process { position: relative; background-size: cover; background-position: center; }
.pw-process__scrim { position: absolute; inset: 0; background: rgba(0,1,48,.9); }
.pw-process__inner { position: relative; z-index: 1; }

.pw-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: clamp(1rem, .6rem + 1vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.pw-step {
	padding: 1.5rem 1.25rem;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--pw-radius);
	transition: background-color .3s var(--pw-ease), border-color .3s var(--pw-ease);
}
.pw-step:hover { background: rgba(255,255,255,.1); border-color: var(--pw-accent); }
.pw-step__num {
	display: block;
	font-family: var(--pw-font-head);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--pw-accent);
	margin-bottom: .4rem;
}
.pw-step__label { font-size: .95rem; font-weight: 600; color: #fff; }

/* ==========================================================================
   Why grid
   ========================================================================== */

.pw-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: clamp(1.25rem, .75rem + 1.5vw, 2rem);
}
.pw-why {
	padding: 1.9rem 1.75rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	border-top: 4px solid var(--pw-primary);
	transition: transform .3s var(--pw-ease), box-shadow .3s var(--pw-ease), border-top-color .3s var(--pw-ease);
}
.pw-why:hover { transform: translateY(-4px); box-shadow: var(--pw-shadow-md); border-top-color: var(--pw-accent); }
.pw-why__title { font-size: 1.15rem; margin-bottom: .5rem; }
.pw-why__text { margin: 0; font-size: .95rem; }

/* ==========================================================================
   Applications
   ========================================================================== */

.pw-app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: clamp(.75rem, .5rem + .8vw, 1.15rem);
}
.pw-app {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 1.5rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	color: var(--pw-ink);
	transition: background-color .3s var(--pw-ease), color .3s var(--pw-ease), border-color .3s var(--pw-ease);
}
.pw-app__title { font-size: 1.02rem; margin: 0; }
.pw-app__arrow { color: var(--pw-accent); transition: transform .3s var(--pw-ease); }
.pw-app:hover { background: var(--pw-primary); border-color: var(--pw-primary); color: #fff; }
.pw-app:hover .pw-app__title { color: #fff; }
.pw-app:hover .pw-app__arrow { color: #fff; transform: translateX(5px); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.pw-cta { background: var(--pw-primary-darker); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.pw-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.pw-cta h2 { margin-bottom: .5rem; }
.pw-cta .pw-lead { margin: 0; max-width: 52ch; }

/* ==========================================================================
   Footer
   ========================================================================== */

.pw-footer { background: var(--pw-primary-dark); color: rgba(255,255,255,.7); }
.pw-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.pw-footer__col--brand { grid-column: span 1; }
.pw-footer__brand {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 1.25rem;
}
.pw-footer__brand:focus-visible { outline: 2px solid var(--pw-accent-on-dark); outline-offset: 4px; border-radius: 8px; }
.pw-footer__logo {
	display: block;
	width: auto;
	max-width: 180px;
	height: auto;
	margin-bottom: 0;
	background: #ffffff;
	padding: 8px 14px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: transform .25s var(--pw-ease), box-shadow .25s var(--pw-ease);
}
.pw-footer__brand:hover .pw-footer__logo {
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.pw-footer__wordmark {
	display: block;
	font-family: var(--pw-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 1rem;
}
.pw-footer__blurb { font-size: .92rem; margin: 0; }
.pw-footer__head {
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.1rem;
}
.pw-footer__list { margin: 0; padding: 0; list-style: none; }
.pw-footer__list li + li { margin-top: .55rem; }
.pw-footer__list a, .pw-footer__contact { color: rgba(255,255,255,.72); font-size: .92rem; }
.pw-footer__list a:hover, .pw-footer__contact:hover { color: var(--pw-accent); }
.pw-footer__address { font-style: normal; font-size: .92rem; margin-bottom: .9rem; }
.pw-footer__contact { display: block; margin-bottom: .35rem; }

.pw-footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.pw-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-block: 1.25rem;
	font-size: .85rem;
}
.pw-footer__tagline { color: var(--pw-accent); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.pw-hero__inner { grid-template-columns: 1fr; }
	/* Below the desktop layout the wedge costs more than it earns. */
	.pw-hero__pillars { flex-direction: column; gap: 0; padding: 1.4rem 1.5rem; clip-path: none; }
	.pw-hero__pillars::before { display: none; }
	.pw-hero__pillar { flex: 1 1 auto; }
	.pw-hero__pillar + .pw-hero__pillar::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
	.pw-sechead--split { grid-template-columns: 1fr; align-items: start; }
}

/* The primary menu carries eight top-level items plus a CTA, so it needs more
   room than the old six-item menu did — the drawer takes over below 1080px. */
@media (max-width: 1080px) {
	.pw-navtoggle { display: block; }
	.pw-header__inner { flex-wrap: wrap; }
	.pw-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		width: 100%;
		padding: 1rem 0 .5rem;
	}
	.pw-nav.is-open { display: flex; }
	.pw-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.pw-menu > li { border-bottom: 1px solid var(--pw-border); }
	.pw-menu a { padding: .8rem 0; }

	/* Branches start collapsed in the drawer and open from the toggle button —
	   eight always-open sub-menus would be an unusable wall of links. */
	.pw-menu .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
	.pw-menu .menu-item-has-children > a { flex: 1; }
	.pw-menu .sub-menu {
		position: static;
		display: none;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 .5rem 1rem;
	}
	.pw-menu .menu-item-has-children.is-open > .sub-menu { display: block; }
	.pw-submenu-toggle { display: inline-flex; }

	.pw-nav__cta { margin-top: .75rem; }
	.pw-topbar__inner { justify-content: center; text-align: center; }
	.pw-topbar__tag { display: none; }
	/* Give the sentence the whole row — squeezed beside the link and the close
	   button it wrapped to five lines and pushed the header off the screen. */
	.pw-announce__inner { flex-wrap: wrap; justify-content: center; text-align: center; }
	.pw-announce__text { flex: 1 1 100%; order: 2; }
	.pw-announce__link { order: 3; }
	.pw-announce__close { order: 1; margin-left: auto; }
}

/* ==========================================================================
   Elementor compatibility
   --------------------------------------------------------------------------
   A CSS class set on an Elementor widget lands on the widget *wrapper*, while
   the heading/paragraph/button sits inside it, and Elementor styles those
   inner elements directly. Each design class therefore needs an explicit rule
   for the inner element - `inherit` is not enough, because the wrapper has no
   type styles of its own to inherit from.
   ========================================================================== */

/* --- Headings ------------------------------------------------------------ */

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--pw-font-head);
	font-weight: 800;
	color: var(--pw-ink);
	line-height: 1.1;
}

.elementor-widget.pw-eyebrow { display: block; }
.elementor-widget.pw-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-family: var(--pw-font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-primary);
}
.elementor-widget.pw-eyebrow .elementor-heading-title::before {
	content: '';
	width: 2.2em;
	height: 2px;
	background: var(--pw-accent);
}
.pw-dark .elementor-widget.pw-eyebrow .elementor-heading-title { color: var(--pw-steel-light); }

.elementor-widget.pw-display .elementor-heading-title {
	font-size: var(--pw-h2);
	text-transform: uppercase;
	letter-spacing: .005em;
	line-height: 1.02;
}
.elementor-widget.pw-display .elementor-heading-title span { color: var(--pw-primary); }
.e-con.pw-dark .elementor-widget-heading .elementor-heading-title,
.e-con.pw-dark .elementor-widget.pw-display .elementor-heading-title,
.e-con.pw-dark .elementor-widget.pw-eyebrow .elementor-heading-title { color: #fff; }
.e-con.pw-dark .elementor-widget.pw-eyebrow .elementor-heading-title { color: var(--pw-steel-light); }
.e-con.pw-dark .elementor-widget-text-editor,
.e-con.pw-dark .elementor-widget.pw-lead .elementor-widget-container { color: rgba(255,255,255,.78); }
.pw-dark .elementor-widget.pw-display .elementor-heading-title span { color: var(--pw-accent-on-dark); }

.elementor-widget.pw-hero__title .elementor-heading-title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem);
	color: #fff;
}
.elementor-widget.pw-hero__title .elementor-heading-title .pw-hero__line { display: block; color: #fff; }
.elementor-widget.pw-hero__title .elementor-heading-title .pw-hero__line--accent { color: #7FB2F0; }

/* The red rule belongs under the heading text, not the widget box. */
.elementor-widget.pw-rule::after { display: none; }
.elementor-widget.pw-rule .elementor-heading-title::after {
	content: '';
	display: block;
	width: 68px;
	height: 4px;
	margin-top: .85rem;
	background: var(--pw-accent);
}
.elementor-widget.pw-mv__head .elementor-heading-title { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); }
.elementor-widget.pw-why__title .elementor-heading-title { font-size: 1.15rem; }

/* --- Body copy ----------------------------------------------------------- */

.elementor-widget.pw-hero__lead .elementor-widget-container {
	max-width: 62ch;
	font-size: var(--pw-lead);
	color: rgba(255, 255, 255, .86);
}
.elementor-widget.pw-lead .elementor-widget-container { font-size: var(--pw-lead); }
.pw-dark .elementor-widget-text-editor { color: rgba(255, 255, 255, .78); }
.elementor-widget.pw-why__text .elementor-widget-container { font-size: .95rem; }
.elementor-widget.pw-sechead__note .elementor-widget-container { color: var(--pw-body); }

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

/* The button classes sit on the widget wrapper, which would otherwise pick up
   the plain .pw-btn styling and draw a second button around the real one. */
.elementor-widget[class*="pw-btn"] {
	background: none;
	border: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
}

.elementor-widget[class*="pw-btn"] .elementor-button,
.elementor .elementor-widget[class*="pw-btn"] .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--pw-radius);
	font-family: var(--pw-font-body);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	background-image: none;
	transition: transform .25s var(--pw-ease), box-shadow .25s var(--pw-ease), background-color .25s var(--pw-ease);
}
.elementor-widget[class*="pw-btn"] .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--pw-shadow-md); }
.elementor-widget.pw-btn--accent  .elementor-button,
.elementor .elementor-widget.pw-btn--accent .elementor-button { background-color: var(--pw-accent); color: #fff; }
.elementor-widget.pw-btn--accent  .elementor-button:hover { background-color: var(--pw-accent-dark); }
.elementor-widget.pw-btn--primary .elementor-button,
.elementor .elementor-widget.pw-btn--primary .elementor-button { background-color: var(--pw-primary); color: #fff; }
.elementor-widget.pw-btn--primary .elementor-button:hover { background-color: var(--pw-primary-dark); }
.elementor-widget.pw-btn--ghost   .elementor-button,
.elementor .elementor-widget.pw-btn.pw-btn--ghost .elementor-button { background-color: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
/* The hover must repeat the longer of the two selectors above it. Written with
   only the short one it scored 4 classes against the base rule's 5 and never
   applied, so the ghost button never filled in on hover. */
.elementor-widget.pw-btn--ghost .elementor-button:hover,
.elementor .elementor-widget.pw-btn.pw-btn--ghost .elementor-button:hover { background-color: #fff; border-color: #fff; color: var(--pw-primary-dark); }
.elementor-widget.pw-btn--lg      .elementor-button { padding: 1.05rem 2.2rem; font-size: 1.05rem; }
/* Metal CTA inside dark bands — mirrors the .pw-dark .pw-btn--accent rule,
   including the fade-out layer. See the comment there for why the gradient
   cannot simply be swapped on hover. */
.pw-dark .elementor-widget.pw-btn--accent .elementor-button,
.e-con.pw-dark .elementor-widget.pw-btn--accent .elementor-button {
	position: relative;
	isolation: isolate;
	background-color: #fff;
	background-image: none;
	color: var(--pw-primary-darker);
	text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.pw-dark .elementor-widget.pw-btn--accent .elementor-button::before,
.e-con.pw-dark .elementor-widget.pw-btn--accent .elementor-button::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: var(--pw-metal);
	transition: opacity .3s var(--pw-ease);
}
.pw-dark .elementor-widget.pw-btn--accent .elementor-button:hover::before,
.e-con.pw-dark .elementor-widget.pw-btn--accent .elementor-button:hover::before { opacity: 0; }

/* --- Containers ---------------------------------------------------------- */

.e-con.pw-surface  { background-color: var(--pw-surface); }
.e-con.pw-cream-bg { background-color: var(--pw-cream); }
.e-con.pw-stats    { background-color: var(--pw-primary-dark); }
.e-con.pw-stats .pw-stat__num   { color: #fff; }
.e-con.pw-stats .pw-stat__label { color: rgba(255,255,255,.72); }

/* Why-us cards are containers, so restate the card treatment at that level. */
.e-con.pw-why {
	padding: 1.9rem 1.75rem;
	background-color: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	border-top: 4px solid var(--pw-primary);
	transition: transform .3s var(--pw-ease), box-shadow .3s var(--pw-ease), border-top-color .3s var(--pw-ease);
}
.e-con.pw-why:hover { transform: translateY(-4px); box-shadow: var(--pw-shadow-md); border-top-color: var(--pw-accent); }
.e-con.pw-keyline { border-left: 4px solid var(--pw-accent); padding-left: 1.25rem; }

.elementor-widget.pw-split__media img {
	border-radius: var(--pw-radius-lg);
	box-shadow: var(--pw-shadow-md);
}


/* ==========================================================================
   Mobile
   --------------------------------------------------------------------------
   `overflow-x: hidden` on the body means anything too wide is silently
   clipped rather than producing a scrollbar, so overflow shows up as cut-off
   text instead of a stray scroll. These rules stop that happening.
   ========================================================================== */

@media (max-width: 767px) {

	/* The hero lines are nowrap on desktop to force the catalogue's 3-line
	   break. On a phone that overflows and gets clipped mid-word. */
	.pw-hero__line,
	.pw-hero__title .pw-hero__line,
	.elementor-widget.pw-hero__title .elementor-heading-title .pw-hero__line {
		white-space: normal;
		text-wrap: balance;
	}
	.pw-hero__title,
	.elementor-widget.pw-hero__title .elementor-heading-title {
		font-size: clamp(1.7rem, 7.2vw, 2.3rem);
		letter-spacing: 0;
	}
	.pw-hero__lead,
	.elementor-widget.pw-hero__lead .elementor-widget-container {
		font-size: 1rem;
		line-height: 1.55;
	}
	.pw-hero__inner { padding-block: 3rem; }
	/* Buttons stack full width so they line up instead of ending raggedly. */
	.pw-hero__actions { flex-direction: column; align-items: stretch; }
	.pw-hero__actions .pw-btn { width: 100%; }
	.elementor-widget[class*="pw-btn"] { width: 100%; }
	.elementor-widget[class*="pw-btn"] .elementor-widget-container { width: 100%; }
	.elementor-widget[class*="pw-btn"] .elementor-button { width: 100%; }

	/* Stats: two-up reads better than one very long column, and the red
	   keyline needs the page gutter or it sits on the screen edge. */
	.pw-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem 1rem;
		padding-inline: var(--pw-gutter);
	}
	.pw-stat__num   { font-size: 1.7rem; }
	.pw-stat__label { font-size: .8rem; line-height: 1.35; }
	.pw-keyline     { padding-left: .9rem; }

	/* Section headings */
	.pw-display,
	.elementor-widget.pw-display .elementor-heading-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
	.pw-sechead { margin-bottom: 1.75rem; }

	/* Shortcode grids inside Elementor need the gutter too */
	.e-con .pw-cat-grid,
	.e-con .pw-app-grid,
	.e-con .pw-archive-grid,
	.e-con .pw-steps,
	.e-con .pw-benefits { padding-inline: var(--pw-gutter); }

	.pw-cat-grid, .pw-app-grid, .pw-archive-grid { grid-template-columns: minmax(0, 1fr); }
	.pw-steps    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-benefits { grid-template-columns: minmax(0, 1fr); }
	.pw-values__list { gap: .5rem 1.25rem; }

	/* Long words (product names, emails) must not push the layout wide */
	.pw-card__title, .pw-app__title, .pw-cat__name,
	.pw-entry, .pw-footer__contact { overflow-wrap: anywhere; }

	/* Tables scroll inside themselves rather than stretching the page */
	.pw-entry table { display: block; overflow-x: auto; white-space: nowrap; }

	.pw-contact, .pw-page-layout { gap: 2rem; }
	.pw-aside { position: static; }
	.pw-footer__grid { gap: 2rem; }
}

@media (max-width: 480px) {
	.pw-steps { grid-template-columns: minmax(0, 1fr); }
	.pw-stats__grid { grid-template-columns: minmax(0, 1fr); }
}

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

@media print {
	.pw-header, .pw-no-print, footer { display: none !important; }
	body { color: #000; }
}

/* ==========================================================================
   Content-master components
   --------------------------------------------------------------------------
   Everything below renders the repeating structures in the ALUFORMIX content
   master: the equipment families, the machine blocks inside them, the
   22-stage process, the FAQ accordion and the various scope lists.
   ========================================================================== */

/* --- Announcement bar ---------------------------------------------------- */

.pw-announce {
	background: var(--pw-primary-dark);
	color: rgba(255, 255, 255, .92);
	font-size: .88rem;
}
.pw-announce[hidden] { display: none; }
.pw-announce__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: .6rem;
}
.pw-announce__text { flex: 1; }
.pw-announce__link {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.pw-announce__link:hover { color: var(--pw-steel-light); }
.pw-announce__close {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: rgba(255, 255, 255, .7);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}
.pw-announce__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.pw-topbar__download { font-weight: 600; }

/* --- Sub-menu toggle (added by theme.js) --------------------------------- */

.pw-submenu-toggle {
	display: none;   /* desktop opens sub-menus on hover; the drawer turns this on */
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--pw-primary-dark);
}
.pw-submenu-toggle span {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .2s var(--pw-ease);
}
.pw-submenu-toggle[aria-expanded="true"] span { transform: translateY(2px) rotate(225deg); }

/* --- Equipment family cards ---------------------------------------------- */

.pw-family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}
.pw-family {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 2rem 1.85rem 1.75rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	box-shadow: var(--pw-shadow-sm);
	transition: transform .3s var(--pw-ease), box-shadow .3s var(--pw-ease), border-color .3s var(--pw-ease);
}
/* The metal hairline is the family card's brand cue — it grows on hover. */
.pw-family::before {
	content: '';
	display: block;
	width: 44px;
	height: 4px;
	border-radius: 2px;
	background: var(--pw-metal);
	transition: width .3s var(--pw-ease);
}
.pw-family:hover {
	transform: translateY(-4px);
	box-shadow: var(--pw-shadow-md);
	border-color: var(--pw-steel-light);
}
.pw-family:hover::before { width: 88px; }
.pw-family__title { margin: 0; font-size: 1.25rem; color: var(--pw-ink); }
.pw-family__text { margin: 0; flex: 1; font-size: .95rem; color: var(--pw-body); }
.pw-family__cta { font-size: .85rem; font-weight: 700; color: var(--pw-primary); }
.pw-family:hover .pw-family__cta { color: var(--pw-primary-dark); }

.pw-dark .pw-family { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.pw-dark .pw-family__title { color: #fff; }
.pw-dark .pw-family__text { color: #BCC5D6; }
.pw-dark .pw-family__cta { color: var(--pw-accent-on-dark); }

/* --- Machine blocks ------------------------------------------------------- */

.pw-machines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	/* Only some machines have photography, so stretched rows would leave a
	   half-empty card beside a full one. Each card takes its own height. */
	align-items: start;
	gap: 1.75rem;
	margin-top: 3rem;
}
.pw-machine {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	box-shadow: var(--pw-shadow-sm);
	transition: box-shadow .3s var(--pw-ease), transform .3s var(--pw-ease);
}
/* Brushed edge along the top of every machine card. A pseudo-element rather
   than border-image, which cancels border-radius in every engine. */
.pw-machine::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--pw-metal);
	z-index: 1;
}
.pw-machine:hover { transform: translateY(-3px); box-shadow: var(--pw-shadow-md); }

/* The flagship machine in a family spans the grid and reads as a feature. */
.pw-machine--feature { grid-column: 1 / -1; }
.pw-machine--feature .pw-machine__body { padding: 2.4rem 2.2rem; }
.pw-machine--feature .pw-machine__title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.pw-machine--feature .pw-machine__list { columns: 2; column-gap: 2.5rem; }

.pw-machine__media { display: block; overflow: hidden; background: var(--pw-silver); }
.pw-machine__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s var(--pw-ease);
}
.pw-machine:hover .pw-machine__media img { transform: scale(1.04); }

.pw-machine__body { display: flex; flex-direction: column; gap: .85rem; padding: 1.9rem 1.75rem; }
.pw-machine__title { margin: 0; font-size: 1.2rem; color: var(--pw-ink); }
.pw-machine__text { margin: 0; font-size: .95rem; }
.pw-machine__list { margin: 0; padding: 0; list-style: none; }
.pw-machine__list li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .4rem;
	font-size: .9rem;
	color: var(--pw-body);
	break-inside: avoid;
}
/* A flat steel square. The brushed gradient is six stops wide and turns to
   visual noise at 8px — it belongs on surfaces, not on bullets. */
.pw-machine__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .6em;
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--pw-steel);
}
.pw-machine__link { font-size: .85rem; font-weight: 700; margin-top: auto; }

/* --- 22-stage process ---------------------------------------------------- */

.pw-stages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1.1rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}
.pw-stage {
	display: flex;
	gap: .9rem;
	padding: 1.15rem 1.2rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
}
.pw-stage__num {
	flex: none;
	font-family: var(--pw-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pw-steel);
}
.pw-stage__body { display: flex; flex-direction: column; gap: .2rem; }
.pw-stage__name { font-weight: 700; font-size: .95rem; color: var(--pw-ink); }
.pw-stage__text { font-size: .85rem; color: var(--pw-body); line-height: 1.55; }

/* Same list on a navy band. */
.pw-dark .pw-stage { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.pw-dark .pw-stage__name { color: #fff; }
.pw-dark .pw-stage__text { color: #BCC5D6; }
.pw-dark .pw-stage__num {
	background: var(--pw-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- FAQ accordion -------------------------------------------------------- */

.pw-faq { margin-top: 2.5rem; border-top: 1px solid var(--pw-border); }
.pw-faq__item { border-bottom: 1px solid var(--pw-border); }
.pw-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	font-family: var(--pw-font-head);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--pw-ink);
	cursor: pointer;
	list-style: none;
}
.pw-faq__q::-webkit-details-marker { display: none; }
.pw-faq__q::after {
	content: '';
	flex: none;
	width: 11px;
	height: 11px;
	margin-top: .45em;
	margin-left: auto;
	border-right: 2px solid var(--pw-primary);
	border-bottom: 2px solid var(--pw-primary);
	transform: rotate(45deg);
	transition: transform .25s var(--pw-ease);
}
.pw-faq__item[open] .pw-faq__q { color: var(--pw-primary); }
.pw-faq__item[open] .pw-faq__q::after { transform: translateY(4px) rotate(225deg); }
.pw-faq__a { padding: 0 3rem 1.4rem 0; }
.pw-faq__a p { margin: 0; }

/* --- Generic tiles -------------------------------------------------------- */

.pw-tiles { display: grid; gap: 1.5rem; margin-top: 3rem; }
.pw-tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pw-tiles--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pw-tiles--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pw-tile {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.85rem 1.7rem;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-left: 3px solid var(--pw-primary);
	border-radius: var(--pw-radius);
	box-shadow: var(--pw-shadow-sm);
	transition: transform .3s var(--pw-ease), box-shadow .3s var(--pw-ease), border-left-color .3s var(--pw-ease);
}
a.pw-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--pw-shadow-md);
	border-left-color: var(--pw-steel);
}
.pw-tile__title { margin: 0; font-size: 1.1rem; color: var(--pw-ink); }
.pw-tile__text { margin: 0; flex: 1; font-size: .93rem; color: var(--pw-body); }
.pw-tile__cta { font-size: .82rem; font-weight: 700; color: var(--pw-primary); }

.pw-dark .pw-tile {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .14);
	border-left-color: var(--pw-steel);
}
.pw-dark .pw-tile__title { color: #fff; }
.pw-dark .pw-tile__text { color: #BCC5D6; }
.pw-dark .pw-tile__cta { color: var(--pw-accent-on-dark); }

/* --- Checklists ----------------------------------------------------------- */

.pw-checks { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem 2.5rem; }
.pw-checks--1 { grid-template-columns: minmax(0, 1fr); }
.pw-checks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pw-checks--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pw-checks li {
	position: relative;
	padding-left: 1.9rem;
	font-size: .96rem;
	color: var(--pw-body);
}
.pw-checks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: 7px;
	height: 12px;
	border-right: 2.5px solid var(--pw-primary);
	border-bottom: 2.5px solid var(--pw-primary);
	transform: rotate(42deg);
}
.pw-dark .pw-checks li { color: #BCC5D6; }
.pw-dark .pw-checks li::before { border-color: var(--pw-steel-light); }

/* --- Numbered method list -------------------------------------------------- */

.pw-method {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1.5rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}
.pw-method__item { display: flex; gap: 1.1rem; }
.pw-method__num {
	flex: none;
	font-family: var(--pw-font-head);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--pw-steel-light);
}
.pw-method__body { display: flex; flex-direction: column; gap: .35rem; }
.pw-method__name { font-family: var(--pw-font-head); font-weight: 700; font-size: 1.05rem; color: var(--pw-ink); }
.pw-method__text { font-size: .93rem; color: var(--pw-body); }
.pw-dark .pw-method__name { color: #fff; }
.pw-dark .pw-method__text { color: #BCC5D6; }
.pw-dark .pw-method__num { color: var(--pw-steel); }

/* --- Footer legal row ------------------------------------------------------ */

.pw-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pw-footer__legal-list a { color: rgba(255, 255, 255, .62); }
.pw-footer__legal-list a:hover { color: #fff; }

/* --- 404 ------------------------------------------------------------------- */

.pw-404-search { max-width: 460px; margin: 2.5rem auto 0; }
.pw-404-search input[type="search"] {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	font: inherit;
}

@media (max-width: 720px) {
	.pw-machine--feature .pw-machine__list { columns: 1; }
	.pw-faq__a { padding-right: 0; }
}

/* ==========================================================================
   HANDHELD LAYER
   --------------------------------------------------------------------------
   This block is deliberately last in the file.

   The component blocks above ("Content-master components") were appended after
   the original Responsive section, so several of their base rules silently
   outranked the mobile rules meant to override them — same specificity, later
   in the source. The announcement bar is the clearest case: the 1080px query
   gives .pw-announce__text `flex: 1 1 100%` so the sentence gets its own row,
   and the component block 300 lines further down resets it to `flex: 1`, which
   wins. On a 390px screen the sentence was therefore squeezed into a ~150px
   column between the close button and the CTA and ran to five lines, pushing
   the logo most of the way down the first screen.

   Anything mobile-specific added from here on belongs in this layer.
   ========================================================================== */

:root {
	/* Height reserved for the sticky action bar; 0 until the bar exists. */
	--pw-actionbar-h: 0px;

	/* A button-weight version of the brushed metal.
	   The display gradient runs down to #6F767D and #7C838A, which carry the
	   navy button label at 3.2:1 and 3.8:1 — under the 4.5:1 the label needs.
	   Every stop here clears 9:1 while keeping the same sheen. */
	--pw-metal-btn: linear-gradient(135deg, #CBD0D5 0%, #EDF0F2 24%, #FFFFFF 40%,
	                                        #C9CED3 56%, #F2F4F6 76%, #CFD4D9 100%);
}

.pw-icon { flex: none; display: inline-block; vertical-align: middle; }

/* The drawer is a fixed panel parked off the right edge while closed, and a
   fixed element still counts toward the document's scrollable overflow. `clip`
   rather than `hidden` because hidden on the root turns it into a scroll
   container, which would break the sticky header. */
html { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Contrast repairs — these are not mobile-only, but they were found while
   auditing the phone layout and the fix is the same everywhere.
   -------------------------------------------------------------------------- */

/* The brand blue is one step off the navy it sits on: as a hover colour on the
   top bar it measures 1.8:1 and in the footer 1.4:1, so hovering a link made it
   fade out rather than light up. Dark surfaces hover to the lifted blue. */
.pw-topbar a:hover,
.pw-footer__list a:hover,
.pw-footer__contact:hover { color: var(--pw-accent-on-dark); }

/* Same substitution for the metal CTA fill. */
.pw-dark .pw-btn--accent::before,
.pw-angle .pw-btn--accent::before,
.pw-dark .elementor-widget.pw-btn--accent .elementor-button::before,
.e-con.pw-dark .elementor-widget.pw-btn--accent .elementor-button::before {
	background: var(--pw-metal-btn);
}

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.pw-announce { font-size: .82rem; }
	.pw-announce__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: .25rem .75rem;
		padding-block: .5rem;
		text-align: left;
	}
	.pw-announce__text {
		flex: none;
		grid-column: 1;
		grid-row: 1;
		line-height: 1.35;
		/* Two lines is the most this bar may cost; the full sentence still
		   reads on the contact page it links to. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.pw-announce__link {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		min-height: 34px;
		display: inline-flex;
		align-items: center;
		font-size: .8rem;
		white-space: nowrap;
	}
	.pw-announce__close {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		margin: 0;
		font-size: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */

.pw-topbar__contact { align-items: center; gap: .35rem 1.25rem; }
.pw-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 34px;
}
.pw-topbar__item .pw-icon { width: 15px; height: 15px; opacity: .75; flex: none; }
.pw-topbar__label { display: none; }

@media (max-width: 1080px) {
	.pw-topbar { font-size: .8rem; }
	.pw-topbar__inner {
		flex-wrap: nowrap;
		justify-content: center;
		gap: 1.25rem;
		padding-block: .35rem;
	}
	.pw-topbar__contact { flex-wrap: nowrap; gap: 1.25rem; }
	.pw-topbar__item { min-height: 40px; }

	/* The address itself is swapped for a label. It is the one string here
	   whose length the theme does not control — the staging install carries
	   sales@violet-mallard-509003.hostingersite.com, which wrapped the bar to a
	   second line and cost ~40px of the first screen. A label cannot. */
	.pw-topbar__item .pw-topbar__label { display: inline; }
	.pw-topbar__item .pw-topbar__value { display: none; }
	.pw-topbar__item[href^="tel:"] .pw-topbar__value { display: inline; }

	.pw-topbar__download span { display: none; }
	.pw-topbar__download { padding-inline: .35rem; }
}

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

/* Everything that exists only for the drawer is hidden by default and turned
   on inside the ≤1080px block: the panel chrome ("Menu" bar and its close
   button) and the contact list that closes it. They live in the same <nav> as
   the desktop menu, so without this the desktop header renders a stray "Menu"
   label before the links and the phone/email pair after the CTA. */
.pw-header__actions,
.pw-header__call,
.pw-nav__head,
.pw-nav__close,
.pw-nav__contact { display: none; }

@media (max-width: 1080px) {
	/* No wrapping: logo left, actions right, drawer overlaid. The old
	   `flex-wrap: wrap` existed so the inline nav could take a second row,
	   which the off-canvas drawer no longer needs. */
	.pw-header__inner {
		flex-wrap: nowrap;
		gap: .75rem;
		padding-block: .55rem;
	}
	.pw-brand__logo { height: 42px; }

	/* The drawer lives inside .pw-header, which is a z-index: 999 stacking
	   context — so the drawer's own z-index only ranks it against its siblings
	   inside that context, and the scrim (z-index 1000 on <body>) painted over
	   the open panel, tinting the whole thing navy. Lifting the header above
	   the scrim puts the drawer above it too. */
	.pw-header { z-index: 1002; }

	/* .is-stuck applies backdrop-filter, and a backdrop-filter establishes a
	   containing block for fixed-position descendants: past 40px of scroll the
	   drawer would have anchored to the header strip instead of the viewport
	   and rendered as a ~60px-tall sliver. A solid bar costs less on a phone
	   GPU anyway. */
	.pw-header.is-stuck {
		backdrop-filter: none;
		background: #fff;
	}

	.pw-header__actions { display: flex; align-items: center; gap: .5rem; }
	.pw-header__call {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--pw-border);
		border-radius: var(--pw-radius);
		color: var(--pw-primary-dark);
	}
	.pw-header__call .pw-icon { width: 20px; height: 20px; }
	.pw-navtoggle { display: block; flex: none; }

	/* ---- Off-canvas drawer ---- */
	.pw-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(86vw, 360px);
		max-width: 100%;
		padding: 0 0 max(1.25rem, env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: #fff;
		box-shadow: -12px 0 40px rgba(11, 27, 51, .22);
		transform: translateX(101%);
		visibility: hidden;
		/*
		 * visibility is stepped, not interpolated: hiding is delayed by the
		 * length of the slide so the panel is still painted on its way out,
		 * and showing happens at 0s so it is focusable the instant .is-open
		 * lands. Transitioning it over .3s instead left it computing as
		 * `hidden` for the first frames, and a hidden element silently
		 * refuses focus() — the drawer opened with focus still on the
		 * hamburger behind it, so the next Tab went into the page underneath.
		 */
		transition: transform .3s var(--pw-ease), visibility 0s linear .3s;
	}
	.pw-nav.is-open {
		transform: none;
		visibility: visible;
		transition: transform .3s var(--pw-ease), visibility 0s;
	}

	.pw-navscrim {
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgba(11, 27, 51, .5);
		backdrop-filter: blur(2px);
	}
	.pw-navscrim[hidden] { display: none; }

	/* Locking the document is what stops the page scrolling behind the panel. */
	html.pw-nav-open, html.pw-nav-open body { overflow: hidden; }

	.pw-nav__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .75rem 1.25rem;
		background: var(--pw-primary-darker);
		color: #fff;
	}
	.pw-nav__title {
		font-family: var(--pw-font-head);
		font-size: .8rem;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
	}
	.pw-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-right: -.5rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: rgba(255, 255, 255, .8);
		font-size: 1.7rem;
		line-height: 1;
		cursor: pointer;
	}
	.pw-nav__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }

	.pw-menu { padding-inline: 1.25rem; }
	.pw-menu > li { border-bottom: 1px solid var(--pw-border); }
	.pw-menu > li:last-child { border-bottom: 0; }
	/* 48px rows: the audit found 32 tap targets under Google's minimum, most
	   of them menu and footer links sitting at 18–23px. */
	.pw-menu a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: .35rem 0;
		font-size: 1rem;
	}
	.pw-menu .sub-menu {
		padding: 0 0 .5rem .9rem;
		border-left: 2px solid var(--pw-border);
		margin-left: .1rem;
	}
	.pw-menu .sub-menu a { min-height: 44px; font-size: .95rem; color: var(--pw-body); }
	.pw-menu .sub-menu a:hover { color: var(--pw-accent); }
	.pw-submenu-toggle { width: 48px; height: 48px; flex: none; }

	.pw-nav__cta {
		margin: 1.25rem 1.25rem 0;
		min-height: 52px;
		font-size: 1rem;
	}

	.pw-nav__contact {
		display: flex;
		flex-direction: column;
		gap: .25rem;
		margin: 1.25rem 1.25rem 0;
		padding-top: 1rem;
		border-top: 1px solid var(--pw-border);
	}
	.pw-nav__contact a {
		display: flex;
		align-items: center;
		gap: .6rem;
		min-height: 44px;
		font-size: .92rem;
		font-weight: 600;
		color: var(--pw-primary-dark);
		overflow-wrap: anywhere;
	}
	.pw-nav__contact .pw-icon { flex: none; color: var(--pw-steel); }
}

/* --------------------------------------------------------------------------
   Sticky action bar
   -------------------------------------------------------------------------- */

.pw-actionbar { display: none; }

@media (max-width: 900px) {
	:root { --pw-actionbar-h: 60px; }

	.pw-actionbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1px;
		background: var(--pw-border);
		border-top: 1px solid var(--pw-border);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -2px 14px rgba(11, 27, 51, .10);
	}
	.pw-actionbar__btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .15rem;
		min-height: 59px;
		padding: .4rem .25rem;
		background: #fff;
		color: var(--pw-primary-dark);
		font-family: var(--pw-font-body);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .02em;
		line-height: 1;
	}
	.pw-actionbar__btn .pw-icon { width: 20px; height: 20px; }
	.pw-actionbar__btn.is-primary { background: var(--pw-accent); color: #fff; }
	.pw-actionbar__btn.is-primary .pw-icon { transform: rotate(-45deg); }

	/* Reserve the strip so the last footer row is never sitting under it.
	   Keyed on the body class rather than the media query alone: the bar hides
	   itself when there is no real number and no WhatsApp to offer, and an
	   unconditional 60px would then be 60px of blank page. */
	body.pw-has-actionbar { padding-bottom: var(--pw-actionbar-h); }

	/* The drawer and its scrim cover the whole screen; the bar underneath
	   would poke through the scrim and look like a rendering fault. */
	html.pw-nav-open .pw-actionbar { display: none; }
}

/* --------------------------------------------------------------------------
   Page gutter inside Elementor
   --------------------------------------------------------------------------
   The theme's own templates use .pw-container, which reserves --pw-gutter on
   both sides. Elementor sections do not: a boxed container centres a
   1240px-wide .e-con-inner, so on a desktop viewport the margin appears for
   free — and on a 390px phone the inner collapses to the full 390px with zero
   padding, putting every heading and paragraph hard against the screen edge.
   Since 27 of the 28 pages are Elementor documents, that was the whole site.

   max() rather than a flat value so a container the client deliberately gave
   more padding keeps it; only the ones sitting at 0 are lifted to the gutter.
   The padding goes on the inner element, so full-bleed section backgrounds
   still run edge to edge.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.elementor .e-con.e-parent > .e-con-inner,
	.elementor .e-con-full.e-parent {
		padding-left: max(var(--pw-gutter), var(--padding-left, 0px));
		padding-right: max(var(--pw-gutter), var(--padding-right, 0px));
	}

	/* Shortcode grids already add the gutter themselves at ≤767px; with the
	   container now supplying it too they would be indented twice. */
	.e-con .pw-cat-grid,
	.e-con .pw-app-grid,
	.e-con .pw-archive-grid,
	.e-con .pw-steps,
	.e-con .pw-benefits,
	.e-con .pw-stats__grid { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   Phone layout — density, rhythm and tap targets
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	:root {
		/* 3.5rem between every band is a lot of empty navy on a 390px screen —
		   the homepage measured 12,569px tall, about fifteen screens. */
		--pw-section-y: clamp(2.75rem, 1.75rem + 4vw, 7.5rem);
		--pw-h3: clamp(1.25rem, 1.1rem + 1vw, 2rem);
	}

	/* The eyebrow's leading dash is a flex item, so a two-line label left it
	   stranded beside the first line with the text hanging off it. Let the
	   label wrap as a block and keep the dash inline on the first line.
	   :not(.elementor-widget) matters — the class sits on the Elementor widget
	   wrapper as well as on the heading inside it, and styling both pseudo-
	   elements draws the dash twice. */
	.pw-eyebrow:not(.elementor-widget),
	.elementor-widget.pw-eyebrow .elementor-heading-title {
		display: block;
		/* 12px is the floor; below that a letter-spaced uppercase label stops
		   being readable on a phone even as decoration. */
		font-size: .75rem;
		letter-spacing: .1em;
		line-height: 1.5;
		text-wrap: balance;
		/* Hanging indent: the dash sits in the margin and every wrapped line
		   lines up under the first word rather than under the dash. */
		padding-left: 2.15em;
		text-indent: -2.15em;
	}
	.pw-eyebrow:not(.elementor-widget)::before,
	.elementor-widget.pw-eyebrow .elementor-heading-title::before {
		display: inline-block;
		width: 1.6em;
		margin-right: .55em;
		vertical-align: middle;
	}

	.pw-hero__inner { padding-block: 2.5rem 2.75rem; }
	.pw-hero__lead,
	.elementor-widget.pw-hero__lead .elementor-widget-container {
		font-size: .98rem;
		line-height: 1.6;
	}
	.pw-hero__pillars { padding: 1.1rem 1.25rem; }
	.pw-hero__pillar { font-size: .95rem; padding: .45rem 0; }

	/* Stacked full-width buttons need less air between them than the desktop
	   row does, and 52px is the comfortable thumb height. */
	.pw-hero__actions { gap: .6rem; }
	.pw-hero__actions .pw-btn,
	.elementor-widget[class*="pw-btn"] .elementor-button { min-height: 52px; }

	.pw-sechead { margin-bottom: 1.5rem; }
	.pw-lead, .elementor-widget.pw-lead .elementor-widget-container { font-size: 1rem; }

	/* Cards and tiles: tighter padding buys back a screen and a half. */
	.pw-family, .e-con.pw-why, .pw-why { padding: 1.4rem 1.25rem; }
	.pw-family-grid { gap: 1rem; margin-top: 1.75rem; }
	.pw-app { padding: 1rem 1.15rem; }

	/* The announcement's own CTA repeats the header button and the action bar's
	   "Enquire" three rows apart. On a phone it is a third copy of the same
	   link and a 22px tap target; the sentence alone does the job. */
	.pw-announce__link { display: none; }
	.pw-announce__text { -webkit-line-clamp: 3; }

	/* Anything that behaves as a row in a list gets a real tap target. */
	.pw-footer__list a,
	.pw-footer__legal-list a,
	.pw-footer__contact,
	.pw-breadcrumb a,
	.pw-breadcrumb span,
	.pw-cat__name,
	.pw-app { min-height: 44px; display: flex; align-items: center; }

	/* ---- Footer ---- */
	.pw-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem 1.25rem;
		padding-block: 2.5rem 2rem;
	}
	/* The brand block carries a logo, a paragraph and the address — it needs
	   the full width; the four link menus pair up beneath it. */
	.pw-footer__col--brand { grid-column: 1 / -1; }
	.pw-footer__logo { max-width: 150px; margin-bottom: .9rem; }
	.pw-footer__blurb { font-size: .88rem; }
	.pw-footer__head { font-size: .75rem; margin-bottom: .5rem; }
	.pw-footer__list li + li { margin-top: 0; }
	.pw-footer__list a { font-size: .88rem; line-height: 1.35; }
	.pw-footer__contact { margin-bottom: 0; }
	.pw-footer__bar-inner { justify-content: flex-start; gap: .25rem; font-size: .8rem; }

	/* ---- Forms ---- */
	/* iOS Safari zooms the whole page in when a focused field is under 16px,
	   and never zooms back out. */
	.pw-form input, .pw-form select, .pw-form textarea,
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="search"], select, textarea { font-size: 16px; }
	.pw-form label { font-size: .9rem; }
	.pw-form button[type="submit"] { width: 100%; min-height: 52px; }
}

/* A 768px tablet in portrait is held in two hands, not driven with a mouse, so
   the row minimums run all the way up to the drawer breakpoint rather than
   stopping at the phone one. */
@media (max-width: 1080px) {
	.pw-footer__list a,
	.pw-footer__legal-list a,
	.pw-footer__contact,
	.pw-menu a { min-height: 44px; display: flex; align-items: center; }

	/* "View machine" links on the equipment family pages, and the tel/mailto
	   rows in the contact rail — both measured 20–23px. */
	.pw-machine__link,
	.pw-contact__item a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* The label already makes the whole sentence tappable; this just stops the
	   box itself being a 18px target for anyone aiming at it. */
	.pw-field--check input[type="checkbox"] {
		width: 22px;
		height: 22px;
		flex: none;
	}
	.pw-field--check label { display: flex; align-items: flex-start; gap: .65rem; }
}

/* And on any coarse pointer regardless of width — a touchscreen laptop or a
   tablet in landscape is still a finger. */
@media (pointer: coarse) {
	.pw-menu a, .pw-footer__list a, .pw-footer__legal-list a,
	.pw-actionbar__btn, .pw-topbar__item { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Reduced motion + print, for the pieces added above
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pw-nav { transition: none; }
}

@media print {
	.pw-actionbar, .pw-navscrim { display: none !important; }
	body { padding-bottom: 0; }
}

/* ==========================================================================
   Client content additions — Aug 2026
   --------------------------------------------------------------------------
   Photographs on the line flow, the alloy and spares accordions, the homepage
   video facade and the Projects layout drawing. Appended after the handheld
   layer, so the mobile rules for each live here beside their desktop base
   rather than back up in the media queries.
   ========================================================================== */

/* --- A step in the flow that has a photograph ---------------------------- */

/*
 * Only six of the twenty-one steps have a photograph so far, and a CSS grid
 * stretches every card in a row to match the tallest. That left the plain
 * steps as tall empty boxes beside a photographed one. Letting each card take
 * its natural height is the honest layout while the rest of the photography is
 * still coming — and it stays correct once every step has an image.
 */
.pw-stages--photo { gap: 1.25rem; align-items: start; }
.pw-stage { align-items: flex-start; align-content: flex-start; }

/*
 * A step with a photograph becomes a small grid: the image spans the full
 * width of the card, and the number and body sit in a row beneath it. Laying
 * this out with flex-wrap put the number below the photo but let the body drift
 * to the bottom of a stretched card, leaving a hole between the two.
 */
.pw-stage.has-photo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	gap: 0 .9rem;
	padding: 0 0 1.15rem;
	overflow: hidden;
}
.pw-stage__photo {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	/* A fixed frame: the supplied shots run from 1280x556 to 1086x1448, and
	   without one the rows go ragged and the numbering stops lining up. */
	height: 168px;
	object-fit: cover;
	margin-bottom: 1.15rem;
}
.pw-stage.has-photo > .pw-stage__num { grid-column: 1; margin-left: 1.2rem; }
.pw-stage.has-photo > .pw-stage__body { grid-column: 2; padding-right: 1.2rem; }

/* --- Alloy accordion ------------------------------------------------------ */

/* Two text cells in the left column and the chevron pinned to the right, so a
   long character line ("Electrical conductor — 61% IACS") wraps under the alloy
   code instead of shoving the chevron onto a line of its own. */
.pw-alloys .pw-alloy__q {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	column-gap: .85rem;
	row-gap: .2rem;
}
.pw-alloy__code { grid-column: 1; }
.pw-alloy__character { grid-column: 1; }
.pw-alloys .pw-alloy__q::after {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin-top: 0;
}
/* Side by side once there is room for both on one line. */
@media (min-width: 560px) {
	.pw-alloys .pw-alloy__q { grid-template-columns: auto minmax(0, 1fr) auto; }
	.pw-alloy__character { grid-column: 2; }
	.pw-alloys .pw-alloy__q::after { grid-column: 3; }
}
.pw-alloy__code {
	font-family: var(--pw-font-head);
	font-weight: 800;
	color: var(--pw-ink);
}
.pw-alloy__character {
	font-family: var(--pw-font-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pw-steel);
}
.pw-alloy[open] .pw-alloy__code { color: var(--pw-primary); }
.pw-alloy__best {
	margin: 1.1rem 0 .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pw-steel);
}
/* The equipment consequence is the part that matters to a machinery buyer, so
   it is set apart from the application list rather than trailing it. */
.pw-alloy__line {
	margin-top: 1.2rem;
	font-size: .93rem;
	color: var(--pw-body);
}

/* --- Spares accordion ----------------------------------------------------- */

.pw-spares__count {
	margin-left: auto;
	margin-right: 1rem;
	font-family: var(--pw-font-body);
	font-size: .78rem;
	font-weight: 600;
	color: var(--pw-steel);
	white-space: nowrap;
}
.pw-spares__table { overflow-x: auto; }
.pw-spares__table table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: .9rem;
}
.pw-spares__table th,
.pw-spares__table td {
	padding: .7rem .9rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--pw-border);
}
.pw-spares__table thead th {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pw-steel);
	border-bottom-color: var(--pw-steel-light);
}
.pw-spares__table tbody th { font-weight: 700; color: var(--pw-ink); }
.pw-spares__table tbody td { color: var(--pw-body); }
.pw-spares__note {
	margin-top: 1.5rem;
	max-width: 70ch;
	font-size: .9rem;
	color: var(--pw-muted);
}

/* --- Homepage video facade ------------------------------------------------ */

.pw-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pw-radius-lg);
	background: var(--pw-surface-dark);
	box-shadow: var(--pw-shadow-md);
}
.pw-video__poster,
.pw-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.pw-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 1rem;
	border: 0;
	background: linear-gradient(180deg, rgba(11,27,51,.15) 0%, rgba(11,27,51,.65) 100%);
	color: #fff;
	font-family: var(--pw-font-body);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .3s var(--pw-ease);
}
.pw-video__play:hover { background-color: rgba(11, 27, 51, .25); }
.pw-video__icon {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--pw-metal-btn);
	box-shadow: 0 6px 24px rgba(11, 27, 51, .35);
	position: relative;
}
.pw-video__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--pw-primary-darker);
}
.pw-video.is-playing .pw-video__play,
.pw-video.is-playing .pw-video__poster { display: none; }

/* --- Projects: line layout drawing ---------------------------------------- */

.pw-layout { margin: 0; }
.pw-layout img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius-lg);
	background: #fff;
}
.pw-layout figcaption {
	margin-top: .9rem;
	font-size: .88rem;
	color: var(--pw-muted);
}

/*
 * Sections whose content the client has not supplied yet collapse entirely —
 * heading, lead and padding included — rather than leaving an empty band. The
 * marker is emitted by prime_child_section_placeholder(); see the note there.
 */
.e-con:has(.pw-video-empty),
.e-con:has(.pw-layout-empty) { display: none !important; }

@media (max-width: 767px) {
	.pw-stage__photo { height: 190px; }
	.pw-stages--photo { gap: 1rem; }
	.pw-alloy__character { font-size: .7rem; }
	.pw-spares__count { display: none; }
	.pw-video__icon { width: 56px; height: 56px; }
	.pw-video__play { font-size: .92rem; }
}

/* --- Support launcher ----------------------------------------------------- *
 * One round button in the corner, shaped like a person in a headset, opening
 * into a choice: the assistant, or the guided enquiry. Where the assistant is
 * not configured the same button renders on its own (--solo) and goes straight
 * to the enquiry panel, which is why the positioning is shared.
 * -------------------------------------------------------------------------- */

.pw-launch,
.pw-launch__fab--solo {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: clamp(1rem, 2vw, 2rem);
	z-index: 997;
}
.pw-launch {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .65rem;
}

.pw-launch__fab {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pw-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 28px rgba(11, 27, 51, .28);
	transition: transform .25s var(--pw-ease), background-color .25s var(--pw-ease);
}
.pw-launch__fab:hover,
.pw-launch__fab:focus-visible { transform: translateY(-2px); background: var(--pw-accent-dark); color: #fff; }
.pw-launch__fab .pw-icon { width: 26px; height: 26px; }

/* The icon becomes a close cross while the menu is open, so one button does
   both jobs and the corner never carries two controls. */
.pw-launch__fab-icon,
.pw-launch__fab-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s var(--pw-ease), transform .2s var(--pw-ease);
}
.pw-launch__fab-x {
	position: absolute;
	font-size: 1.9rem;
	line-height: 1;
	opacity: 0;
	transform: rotate(-45deg);
}
.pw-launch.is-open .pw-launch__fab-icon { opacity: 0; transform: rotate(45deg); }
.pw-launch.is-open .pw-launch__fab-x { opacity: 1; transform: rotate(0); }

.pw-launch__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: .5rem;
}
.pw-launch__menu[hidden] { display: none; }

.pw-launch__item {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 46px;
	padding: 0 1.15rem 0 .55rem;
	border: 1px solid var(--pw-border);
	border-radius: 999px;
	background: #fff;
	color: var(--pw-primary-darker);
	font-family: var(--pw-font-body);
	font-size: .92rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(11, 27, 51, .18);
	animation: pw-launch-in .22s var(--pw-ease) both;
	transition: background-color .2s var(--pw-ease), color .2s var(--pw-ease), border-color .2s var(--pw-ease);
}
.pw-launch__item:nth-child(2) { animation-delay: .05s; }
.pw-launch__item:hover,
.pw-launch__item:focus-visible {
	background: var(--pw-primary-darker);
	color: #fff;
	border-color: var(--pw-primary-darker);
}

.pw-launch__ico {
	flex: none;
	display: inline-flex;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--pw-surface);
	color: var(--pw-accent);
	transition: background-color .2s var(--pw-ease), color .2s var(--pw-ease);
}
.pw-launch__item:hover .pw-launch__ico,
.pw-launch__item:focus-visible .pw-launch__ico { background: rgba(255, 255, 255, .16); color: #fff; }

@keyframes pw-launch-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pw-launch__item { animation: none; }
	.pw-launch__fab { transition: background-color .25s var(--pw-ease); }
	.pw-launch__fab:hover { transform: none; }
}

/* --- Quick enquiry panel -------------------------------------------------- */

.pw-quick {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: calc(clamp(1rem, 2vw, 2rem) + 64px);
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: min(92vw, 400px);
	max-height: min(78vh, 620px);
	overflow: hidden;
	background: #fff;
	border-radius: var(--pw-radius-lg);
	box-shadow: 0 24px 64px rgba(11, 27, 51, .3);
}
.pw-quick[hidden] { display: none; }

.pw-quick__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: var(--pw-primary-darker);
	color: #fff;
}
.pw-quick__eyebrow {
	margin: 0 0 .2rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-steel-light);
}
.pw-quick__title { margin: 0; font-family: var(--pw-font-head); font-size: 1.05rem; font-weight: 800; }
.pw-quick__close {
	flex: none;
	width: 36px;
	height: 36px;
	margin: -.35rem -.4rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba(255, 255, 255, .8);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.pw-quick__close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.pw-quick__progress { height: 3px; background: var(--pw-border); }
.pw-quick__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pw-accent);
	transition: width .3s var(--pw-ease);
}

.pw-quick__body, .pw-quick__done { padding: 1.25rem; overflow-y: auto; }
.pw-quick__step { margin: 0; padding: 0; border: 0; }
.pw-quick__q {
	padding: 0;
	margin-bottom: .9rem;
	font-family: var(--pw-font-head);
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--pw-ink);
}
.pw-quick__options { display: flex; flex-direction: column; gap: .5rem; }
.pw-quick__option {
	min-height: 46px;
	padding: .6rem 1rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
	color: var(--pw-ink);
	font-family: var(--pw-font-body);
	font-size: .95rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s var(--pw-ease), background-color .2s var(--pw-ease);
}
.pw-quick__option:hover { border-color: var(--pw-accent); background: var(--pw-primary-light); }
.pw-quick__option.is-chosen { border-color: var(--pw-accent); background: var(--pw-primary-light); }

.pw-quick__label {
	display: block;
	margin: .85rem 0 .3rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--pw-ink);
}
.pw-quick__input {
	width: 100%;
	min-height: 46px;
	padding: .6rem .8rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	font: inherit;
	/* 16px so iOS Safari does not zoom the page in on focus. */
	font-size: 16px;
}
.pw-quick__consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: 1rem 0;
	font-size: .88rem;
	color: var(--pw-body);
}
.pw-quick__consent input { width: 22px; height: 22px; flex: none; }
.pw-quick__submit { width: 100%; min-height: 52px; }
.pw-quick__submit[disabled] { opacity: .6; cursor: wait; }

.pw-quick__error {
	margin: .9rem 0 0;
	padding: .7rem .85rem;
	border-radius: var(--pw-radius);
	background: #FDECEC;
	color: #8A1C1C;
	font-size: .88rem;
}
.pw-quick__done-title { margin: 0 0 .5rem; font-family: var(--pw-font-head); font-weight: 800; color: var(--pw-ink); }
.pw-quick__back {
	margin: 0;
	padding: .85rem 1.25rem;
	border: 0;
	border-top: 1px solid var(--pw-border);
	background: none;
	color: var(--pw-primary);
	font-family: var(--pw-font-body);
	font-size: .88rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

/* --- Assistant panel ------------------------------------------------------ *
 * Same furniture as the quick panel — navy head, white body, bottom sheet on a
 * phone — so the two feel like one support surface rather than two products.
 * -------------------------------------------------------------------------- */

.pw-ai {
	position: fixed;
	right: clamp(1rem, 2vw, 2rem);
	bottom: calc(clamp(1rem, 2vw, 2rem) + 70px);
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: min(94vw, 420px);
	max-height: min(80vh, 660px);
	overflow: hidden;
	background: #fff;
	border-radius: var(--pw-radius-lg);
	box-shadow: 0 24px 64px rgba(11, 27, 51, .3);
}
.pw-ai[hidden] { display: none; }

.pw-ai__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
	background: var(--pw-primary-darker);
	color: #fff;
}
.pw-ai__avatar {
	flex: none;
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
}
.pw-ai__id { flex: 1 1 auto; min-width: 0; }
.pw-ai__title {
	margin: 0;
	font-family: var(--pw-font-head);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}
.pw-ai__sub { margin: .1rem 0 0; font-size: .76rem; color: rgba(255, 255, 255, .72); }
.pw-ai__close {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba(255, 255, 255, .8);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.pw-ai__close:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* The back arrow belongs to the phone layout, where the panel is the whole
   screen. On the desktop bubble there is nothing to go back to. */
.pw-ai__back {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	margin-left: -.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.pw-ai__back .pw-icon { width: 22px; height: 22px; }
.pw-ai__back:active { background: rgba(255, 255, 255, .16); }

.pw-ai__log {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: 1rem;
	overflow-y: auto;
	background: var(--pw-surface);
	overscroll-behavior: contain;
}

.pw-ai__msg {
	max-width: 88%;
	padding: .6rem .85rem;
	border-radius: 14px;
	font-size: .92rem;
	line-height: 1.55;
}
.pw-ai__msg p { margin: 0; }
.pw-ai__msg--bot {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--pw-border);
	border-bottom-left-radius: 4px;
	color: var(--pw-body);
}
.pw-ai__msg--me {
	align-self: flex-end;
	background: var(--pw-primary-darker);
	border-bottom-right-radius: 4px;
	color: #fff;
}
.pw-ai__msg--bot a {
	color: var(--pw-accent-dark);
	text-decoration: underline;
	word-break: break-word;
}

.pw-ai__typing { display: flex; gap: 5px; align-items: center; padding: .8rem .85rem; }
.pw-ai__typing span {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--pw-steel);
	animation: pw-ai-dot 1.1s infinite ease-in-out;
}
.pw-ai__typing span:nth-child(2) { animation-delay: .15s; }
.pw-ai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pw-ai-dot {
	0%, 60%, 100% { opacity: .35; transform: none; }
	30%           { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
	.pw-ai__typing span { animation: none; opacity: .6; }
}

.pw-ai__rate { display: flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .76rem; color: var(--pw-muted); }
.pw-ai__rate.is-done { padding: .1rem 0; }
.pw-ai__rate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--pw-muted);
	line-height: 1;
	cursor: pointer;
	opacity: .6;
	transition: opacity .2s var(--pw-ease), background-color .2s var(--pw-ease), color .2s var(--pw-ease);
}
.pw-ai__rate-btn .pw-icon { width: 15px; height: 15px; }
.pw-ai__rate-btn:hover,
.pw-ai__rate-btn:focus-visible { opacity: 1; background: var(--pw-surface); color: var(--pw-accent); }

.pw-ai__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.pw-ai__chip {
	padding: .42rem .8rem;
	border: 1px solid var(--pw-border);
	border-radius: 999px;
	background: #fff;
	color: var(--pw-primary-darker);
	font-family: var(--pw-font-body);
	font-size: .82rem;
	cursor: pointer;
	transition: border-color .2s var(--pw-ease), background-color .2s var(--pw-ease);
}
.pw-ai__chip:hover { border-color: var(--pw-accent); background: var(--pw-primary-light); }

.pw-ai__form {
	display: flex;
	align-items: flex-end;
	gap: .5rem;
	padding: .7rem .8rem;
	border-top: 1px solid var(--pw-border);
	background: #fff;
}
.pw-ai__input {
	flex: 1 1 auto;
	max-height: 120px;
	padding: .6rem .75rem;
	border: 1px solid var(--pw-border);
	border-radius: 12px;
	font-family: var(--pw-font-body);
	font-size: .92rem;
	line-height: 1.45;
	resize: none;
}
.pw-ai__input:focus { outline: 2px solid var(--pw-accent); outline-offset: 1px; }
.pw-ai__send {
	flex: none;
	display: inline-flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 12px;
	background: var(--pw-accent);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s var(--pw-ease);
}
.pw-ai__send:hover { background: var(--pw-accent-dark); color: #fff; }

/* Inside the conversation, under the greeting — read once, then scrolled away. */
.pw-ai__note {
	margin: -.15rem .35rem .15rem;
	padding: 0;
	color: var(--pw-muted);
	font-size: .72rem;
	line-height: 1.5;
	text-align: center;
}

.pw-ai__human {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .6rem .9rem;
	border-top: 1px solid var(--pw-border);
	background: var(--pw-surface);
}
.pw-ai__human-label { margin-right: .2rem; color: var(--pw-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.pw-ai__human-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .32rem .7rem;
	border: 1px solid var(--pw-border);
	border-radius: 999px;
	background: #fff;
	color: var(--pw-primary-darker);
	font-size: .82rem;
	font-weight: 600;
}
.pw-ai__human-btn:hover { border-color: var(--pw-accent); color: var(--pw-accent); }
.pw-ai__human-btn .pw-icon { width: 15px; height: 15px; }
/* Once the assistant has handed over, the human row stops being a footnote. */
.pw-ai__human.is-urgent { background: var(--pw-primary-light); }
.pw-ai__human.is-urgent .pw-ai__human-btn { border-color: var(--pw-accent); }

@media (max-width: 900px) {
	/*
	 * The trigger used to be hidden here on the theory that the action bar's
	 * "Enquire" covered it. It did open the panel — but "Enquire" reads as a
	 * link to the contact page, so on a phone there was no visible way to find
	 * the quick enquiry at all. The launcher now sits just above the action
	 * bar, and the bar's button still opens the same panel.
	 */
	.pw-launch,
	.pw-launch__fab--solo {
		right: 1rem;
		bottom: calc(var(--pw-actionbar-h) + .75rem + env(safe-area-inset-bottom));
	}
	body:not(.pw-has-actionbar) .pw-launch,
	body:not(.pw-has-actionbar) .pw-launch__fab--solo { bottom: calc(.75rem + env(safe-area-inset-bottom)); }

	.pw-launch__fab,
	.pw-launch__fab--solo { width: 52px; height: 52px; }

	/* With a panel open the launcher is just clutter behind it. */
	html.pw-quick-open .pw-launch,
	html.pw-quick-open .pw-launch__fab--solo,
	html.pw-ai-open .pw-launch { display: none; }

	/* ---------------------------------------------------------------------
	 * Both panels take the whole phone screen.
	 *
	 * They used to be bottom sheets capped at 88vh, which left the sticky
	 * header painted on top of them — .pw-header is raised to z-index 1002 in
	 * this same media query so the nav drawer can clear its scrim, and the
	 * panels sat at 999 underneath it. The assistant's own title was hidden
	 * behind the site logo.
	 *
	 * Full screen fixes the stacking and is the better answer anyway: on a
	 * phone a conversation should feel like an app you stepped into, not a
	 * tray stuck to the bottom of a web page. The back arrow and the hardware
	 * back button both step out of it.
	 * ------------------------------------------------------------------- */
	.pw-quick,
	.pw-ai {
		inset: 0;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;      /* keeps the input above the browser's URL bar */
		max-width: none;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		z-index: 10050;
		animation: pw-app-rise .26s var(--pw-ease) both;
	}

	@keyframes pw-app-rise {
		from { opacity: 0; transform: translateY(18px); }
		to   { opacity: 1; transform: none; }
	}

	html.pw-quick-open, html.pw-quick-open body,
	html.pw-ai-open, html.pw-ai-open body {
		overflow: hidden;
		overscroll-behavior: none;
	}

	/* --- the assistant, as an app ------------------------------------- */

	.pw-ai__head {
		gap: .6rem;
		padding: .7rem .9rem;
		padding-top: calc(.7rem + env(safe-area-inset-top));
		background: linear-gradient(180deg, #14508C 0%, var(--pw-primary-darker) 100%);
		box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
	}
	.pw-ai__back { display: inline-flex; }
	.pw-ai__close { display: none; }
	.pw-ai__avatar { width: 32px; height: 32px; }
	.pw-ai__title { font-size: 1.02rem; }
	.pw-ai__sub { font-size: .72rem; }

	.pw-ai__log {
		gap: .55rem;
		padding: .9rem .85rem 1.1rem;
		-webkit-overflow-scrolling: touch;
	}
	.pw-ai__msg {
		max-width: 84%;
		padding: .62rem .85rem;
		border-radius: 18px;
		font-size: .95rem;
	}
	.pw-ai__msg--bot {
		border-bottom-left-radius: 6px;
		box-shadow: 0 1px 2px rgba(11, 27, 51, .05);
	}
	.pw-ai__msg--me { border-bottom-right-radius: 6px; }

	.pw-ai__chip { padding: .5rem .9rem; font-size: .85rem; }

	.pw-ai__form {
		gap: .45rem;
		padding: .6rem .7rem;
		padding-bottom: calc(.6rem + env(safe-area-inset-bottom) * .5);
	}
	.pw-ai__input {
		padding: .65rem .9rem;
		border-radius: 22px;
		/* 16px exactly: anything smaller and iOS Safari zooms the whole page
		   in the moment the field takes focus. */
		font-size: 16px;
	}
	.pw-ai__send {
		width: 46px;
		height: 46px;
		border-radius: 50%;
	}

	.pw-ai__note { font-size: .68rem; }

	/* One slim row, no shouting label — the three icons say what they are. */
	.pw-ai__human {
		gap: .4rem;
		padding: .45rem .7rem;
		padding-bottom: calc(.45rem + env(safe-area-inset-bottom));
	}
	.pw-ai__human-label { display: none; }
	.pw-ai__human-btn {
		flex: 1 1 0;
		justify-content: center;
		min-height: 38px;
		padding: .4rem .5rem;
		font-size: .8rem;
	}

	/* --- quick enquiry, same treatment -------------------------------- */

	.pw-quick__head { padding-top: calc(1.1rem + env(safe-area-inset-top)); }
	.pw-quick__body, .pw-quick__done { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
	.pw-quick__input { font-size: 16px; }
	.pw-quick__option { min-height: 46px; }
}

@media print {
	.pw-quick, .pw-ai, .pw-launch, .pw-launch__fab--solo { display: none !important; }
}

/* ==========================================================================
   Parent-theme reset repairs
   --------------------------------------------------------------------------
   Hello Elementor's reset.css contains:

       [type=button]:focus, [type=button]:hover, [type=submit]:focus,
       [type=submit]:hover, button:focus, button:hover
       { background-color:#c36; color:#fff }

   #c36 is a pink that appears nowhere in this brand, and `button:focus` scores
   (0,1,1), which beats a plain component class at (0,1,0). So every button on
   the site turned pink the moment it was focused or tapped — the enquiry
   form's submit, the menu toggle, the announcement close, the quick-enquiry
   options. It was invisible in review because a mouse user rarely leaves a
   button focused, but on a phone a tap focuses.

   Each button is restored to its own intended state below, at (0,2,0) or
   better. Neutralising the parent rule wholesale is not an option: it would
   also strip the deliberate hover background off the accent buttons.
   ========================================================================== */

.pw-quick__option:hover,
.pw-quick__option:focus { background-color: var(--pw-primary-light); color: var(--pw-ink); }
.pw-quick__option.is-chosen { background-color: var(--pw-primary-light); color: var(--pw-ink); }
.pw-quick__close:hover,
.pw-quick__close:focus { background-color: rgba(255, 255, 255, .14); color: #fff; }
.pw-quick__back:hover,
.pw-quick__back:focus { background-color: transparent; color: var(--pw-primary); }
.pw-quick__open:hover,
.pw-quick__open:focus { background-color: var(--pw-accent-dark); color: #fff; }

.pw-navtoggle:hover,
.pw-navtoggle:focus { background-color: #fff; color: var(--pw-primary-dark); }
.pw-nav__close:hover,
.pw-nav__close:focus { background-color: rgba(255, 255, 255, .12); color: #fff; }
.pw-announce__close:hover,
.pw-announce__close:focus { background-color: rgba(255, 255, 255, .12); color: #fff; }
.pw-submenu-toggle:hover,
.pw-submenu-toggle:focus { background-color: transparent; color: var(--pw-primary-dark); }
.pw-video__play:hover,
.pw-video__play:focus { background-color: rgba(11, 27, 51, .25); color: #fff; }

button.pw-btn--accent:hover,
button.pw-btn--accent:focus,
input[type="submit"].pw-btn--accent:hover,
input[type="submit"].pw-btn--accent:focus { background-color: var(--pw-accent-dark); color: #fff; }
button.pw-btn--primary:hover,
button.pw-btn--primary:focus { background-color: var(--pw-primary-dark); color: #fff; }

/* The same reset gives every button `display: inline-block`, which outranks
   the user-agent's `[hidden] { display: none }`. Anything hidden through the
   HTML attribute — the quick panel's Back control, its completion message —
   stayed on screen. */
[hidden] { display: none !important; }

/* --- Projects: layout card, then the process flow ------------------------- */

/* The card used to be one big <button>. Now the drawing is its own zoom
   trigger (an anchor, so no-JS still opens the file) and only the body below
   advances to the process flow — two controls, two affordances. */
.pw-layoutcard {
	display: grid;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--pw-radius-lg);
	background: rgba(255, 255, 255, .05);
	text-align: left;
	transition: transform .3s var(--pw-ease), border-color .3s var(--pw-ease), background-color .3s var(--pw-ease);
}
.pw-layoutcard:hover,
.pw-layoutcard:focus-within {
	transform: translateY(-3px);
	border-color: var(--pw-steel);
	background-color: rgba(255, 255, 255, .08);
}
.pw-layoutcard__media { display: block; position: relative; }
a.pw-layoutcard__media { cursor: zoom-in; }
.pw-layoutcard__media img { display: block; width: 100%; height: auto; }
/* The drawing is white; on the dark card it reads as a lit sheet. */
a.pw-layoutcard__media img { background: #fff; }
.pw-layoutcard__hint {
	position: absolute;
	right: .75rem;
	bottom: .75rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: rgba(11, 27, 51, .78);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	pointer-events: none;
}
.pw-layoutcard__hint::before {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3M11 8v6M8 11h6"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3M11 8v6M8 11h6"/></svg>') center / contain no-repeat;
}
/* Until the drawing arrives the card still opens the flow — it says so
   plainly rather than pretending to be an image that failed to load. */
.pw-layoutcard__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: 1.5rem;
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px),
		rgba(255, 255, 255, .03);
	color: var(--pw-steel-light);
	font-size: .9rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
}
.pw-layoutcard__body {
	display: block;
	width: 100%;
	padding: 1.5rem 1.6rem;
	border: 0;
	background: transparent;
	font-family: var(--pw-font-body);
	text-align: left;
	cursor: pointer;
}
.pw-layoutcard__body:focus-visible { outline: 2px solid var(--pw-accent-on-dark); outline-offset: -4px; }
.pw-layoutcard__title {
	display: block;
	font-family: var(--pw-font-head);
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
}
.pw-layoutcard__text {
	display: block;
	margin-top: .4rem;
	font-size: .93rem;
	color: #BCC5D6;
}
.pw-layoutcard__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1rem;
	font-size: .92rem;
	font-weight: 700;
	color: var(--pw-accent-on-dark);
}
.pw-layoutcard__body:hover .pw-layoutcard__cta span,
.pw-layoutcard__body:focus .pw-layoutcard__cta span { transform: translateX(4px); }
.pw-layoutcard__cta span { transition: transform .25s var(--pw-ease); }

/* --- Layout zoom viewer ----------------------------------------------------
   Full-screen overlay for the general-arrangement drawing. The image pans by
   drag / one-finger touch and zooms by wheel or pinch; everything is driven
   from assets/js/theme.js (initLayoutZoom). */
.pw-zoom {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	background: rgba(8, 15, 28, .96);
	touch-action: none;
	overscroll-behavior: contain;
}
.pw-zoom__stage {
	position: relative;
	flex: 1;
	overflow: hidden;
	cursor: grab;
}
.pw-zoom__stage.is-panning { cursor: grabbing; }
.pw-zoom__img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	background: #fff;
	transform-origin: 0 0;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}
.pw-zoom__bar {
	position: absolute;
	top: max(.9rem, env(safe-area-inset-top));
	right: max(.9rem, env(safe-area-inset-right));
	z-index: 2;
	display: flex;
	gap: .5rem;
}
.pw-zoom__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 10px;
	background: rgba(11, 27, 51, .85);
	color: #fff;
	font-family: var(--pw-font-body);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.pw-zoom__btn:hover,
.pw-zoom__btn:focus { background: rgba(255, 255, 255, .18); color: #fff; }
.pw-zoom__hint {
	position: absolute;
	bottom: max(1rem, env(safe-area-inset-bottom));
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	padding: .4rem .9rem;
	border-radius: 999px;
	background: rgba(11, 27, 51, .8);
	color: #C7D0E0;
	font-size: .8rem;
	letter-spacing: .03em;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .4s var(--pw-ease);
}
.pw-zoom__hint.is-faded { opacity: 0; }
body.pw-zoom-open { overflow: hidden; }

.pw-projflow__back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	margin-bottom: 1.25rem;
	padding: 0 1rem 0 .75rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: var(--pw-font-body);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}
.pw-projflow__back:hover,
.pw-projflow__back:focus { background-color: rgba(255, 255, 255, .12); color: #fff; }
.pw-projflow .pw-stages { margin-top: 0; }

/* ==========================================================================
   Alloy and spares accordions — make them look like the dropdowns they are
   --------------------------------------------------------------------------
   They worked from the start: seven <details>, all opening on tap. But they
   inherited the FAQ styling — a hairline rule and an 11px chevron away at the
   right edge — and on a phone that reads as a list of headings, not as seven
   things you can open. Nobody tapped them because nothing said "tap me".

   Each row is now a card with a border and a chevron in a circle, which is the
   affordance people actually recognise.
   ========================================================================== */

.pw-alloys,
.pw-spares { display: grid; gap: .7rem; }

.pw-alloys .pw-faq__item,
.pw-spares .pw-faq__item {
	border: 1px solid var(--pw-border);
	border-bottom: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
	box-shadow: var(--pw-shadow-sm);
	transition: border-color .25s var(--pw-ease), box-shadow .25s var(--pw-ease);
}
.pw-alloys .pw-faq__item:hover,
.pw-spares .pw-faq__item:hover {
	border-color: var(--pw-steel-light);
	box-shadow: var(--pw-shadow-md);
}
.pw-alloys .pw-faq__item[open],
.pw-spares .pw-faq__item[open] { border-color: var(--pw-accent); }

.pw-alloys .pw-faq__q,
.pw-spares .pw-faq__q { padding: 1rem 1.1rem; }
.pw-alloys .pw-faq__a,
.pw-spares .pw-faq__a { padding: 0 1.1rem 1.25rem; }

/* The chevron becomes a circular control rather than a stray tick mark. The
   base rule draws it from two rotated borders, so those are reset first. */
.pw-alloys .pw-faq__q::after,
.pw-spares .pw-faq__q::after {
	width: 32px;
	height: 32px;
	margin-top: 0;
	border: 1px solid var(--pw-border);
	border-radius: 50%;
	background: var(--pw-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
	transform: none;
	transition: transform .25s var(--pw-ease), background-color .25s var(--pw-ease), border-color .25s var(--pw-ease);
}
.pw-alloys .pw-faq__item[open] .pw-faq__q::after,
.pw-spares .pw-faq__item[open] .pw-faq__q::after {
	transform: rotate(180deg);
	border-color: var(--pw-accent);
	background-color: var(--pw-primary-light);
}

/* The alloy code stays the anchor; the character line sits under it in grey. */
.pw-alloys .pw-alloy__q { align-items: center; }
.pw-alloy__code { font-size: 1.08rem; }

@media (max-width: 767px) {
	.pw-alloys .pw-faq__q,
	.pw-spares .pw-faq__q { padding: .9rem 1rem; font-size: 1rem; }
	.pw-alloys .pw-faq__a,
	.pw-spares .pw-faq__a { padding: 0 1rem 1.1rem; }
	.pw-alloys .pw-faq__q::after,
	.pw-spares .pw-faq__q::after { width: 30px; height: 30px; }
}

/* Breathing room inside an open alloy: the "Best suited to" label was sitting
   flush against the paragraph above it, and the line-implication note flush
   against the last application. */
.pw-alloys .pw-alloy__a > p:first-child { margin-bottom: 1.25rem; }
.pw-alloy__best { margin: 0 0 .75rem; }
.pw-alloys .pw-checks { margin: 0; }
.pw-alloy__line { margin-top: 1.5rem; }

/* ---------------------------------------------------------------
 * Enquiry uploader
 *
 * Files upload as they are chosen rather than on submit, so every tile
 * carries its own state: queued, uploading, processing, done or failed.
 * "Processing" exists because the bar filling only means the bytes have
 * left the browser — the server still has to check and store them, and a
 * bar sitting at 100% with nothing happening reads as a hang.
 * ------------------------------------------------------------- */
.pw-upload { display: block; }

.pw-upload__drop {
	position: relative;
	margin-top: .5rem;
	padding: 1.1rem 1.15rem;
	border: 1px dashed var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
	transition: border-color .2s var(--pw-ease), background .2s var(--pw-ease);
}
.pw-upload__drop.is-over {
	border-color: var(--pw-accent);
	background: var(--pw-surface, #F4F6F8);
}
.pw-upload__drop input[type="file"] { display: block; max-width: 100%; }
.pw-upload__drop input[type="file"]:disabled { opacity: .5; cursor: not-allowed; }

.pw-upload__prompt {
	display: block;
	margin-top: .6rem;
	color: var(--pw-muted);
	font-size: .875rem;
}

.pw-upload__count {
	margin: .7rem 0 0;
	font-size: .875rem;
	font-weight: 600;
	color: var(--pw-ink);
}

.pw-upload__error {
	margin: .6rem 0 0;
	padding: .6rem .8rem;
	border-left: 3px solid #B3261E;
	background: #FDF2F1;
	color: #8C1D18;
	font-size: .875rem;
}

.pw-upload__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .7rem;
	margin: .8rem 0 0;
	padding: 0;
	list-style: none;
}

.pw-upload__item {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .55rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
}
.pw-upload__item[data-state="failed"] { border-color: #E5A9A4; background: #FDF2F1; }
.pw-upload__item[data-state="done"]   { border-color: #BFD4E8; }

.pw-upload__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--pw-silver);
}
.pw-upload__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Drawings and archives have no preview — mark the tile instead of leaving
   an empty grey square that looks like a broken image. */
.pw-upload__thumb.is-file::after {
	content: "";
	width: 18px;
	height: 22px;
	border: 2px solid var(--pw-muted);
	border-radius: 2px;
}

.pw-upload__body { flex: 1 1 auto; min-width: 0; }

.pw-upload__name {
	display: block;
	overflow: hidden;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pw-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pw-upload__meta {
	display: block;
	margin-top: .15rem;
	font-size: .78rem;
	color: var(--pw-muted);
}
.pw-upload__item[data-state="failed"] .pw-upload__meta { color: #8C1D18; }

.pw-upload__bar {
	display: block;
	height: 3px;
	margin-top: .4rem;
	border-radius: 2px;
	background: var(--pw-border);
	overflow: hidden;
}
.pw-upload__bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--pw-accent);
	transition: width .18s linear;
}
.pw-upload__item[data-state="done"] .pw-upload__bar > span { background: #2E7D32; }
.pw-upload__item[data-state="failed"] .pw-upload__bar > span { background: #B3261E; }

/* Indeterminate while the server works: there is no percentage to report. */
.pw-upload__item[data-state="processing"] .pw-upload__bar > span {
	animation: pw-upload-wait 1.1s ease-in-out infinite;
}
@keyframes pw-upload-wait {
	0%, 100% { opacity: .35; }
	50%      { opacity: 1; }
}

.pw-upload__remove {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pw-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.pw-upload__remove:hover { background: var(--pw-silver); color: var(--pw-ink); }

@media (prefers-reduced-motion: reduce) {
	.pw-upload__bar > span { transition: none; }
	.pw-upload__item[data-state="processing"] .pw-upload__bar > span { animation: none; }
}

/* ---------------------------------------------------------------
 * Packaging & storage flow diagram
 *
 * The client's own four-step drawing, redrawn at page scale. Each step is
 * an illustration beside its text, so the picture carries the mechanism
 * and the words stay selectable, translatable and indexable.
 *
 * Steps alternate side on desktop and stack on narrow screens, where the
 * connecting rule runs down the left instead of between the pair.
 * ------------------------------------------------------------- */
.pw-flowdiag { margin: 0 auto; max-width: 62rem; }

.pw-flowdiag__infeed {
	margin: 0 0 1.4rem;
	text-align: center;
}
.pw-flowdiag__infeed span {
	display: inline-block;
	padding: .4rem 1.1rem;
	border: 1px solid var(--pw-border);
	border-radius: 100px;
	background: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-accent);
}
/* The arrow into the first step. */
.pw-flowdiag__infeed::after {
	content: "";
	display: block;
	width: 1px;
	height: 1.4rem;
	margin: .5rem auto -1.4rem;
	background: var(--pw-border);
}

.pw-flowdiag__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pw-fd;
}

.pw-flowdiag__step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: 1.6rem;
	align-items: center;
	padding: 1.4rem 0;
}
.pw-flowdiag__step + .pw-flowdiag__step { border-top: 1px solid var(--pw-border); }

/* The arrow linking one step to the next. */
.pw-flowdiag__step + .pw-flowdiag__step::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 1px solid var(--pw-border);
	border-bottom: 1px solid var(--pw-border);
	background: var(--pw-surface, #F4F6F8);
	transform: translateX(-50%) rotate(45deg);
}

.pw-flowdiag__art {
	padding: .9rem;
	border: 1px solid var(--pw-border);
	border-radius: var(--pw-radius);
	background: #fff;
}
.pw-flowdiag__art svg { display: block; width: 100%; height: auto; }

.pw-flowdiag__name {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin: 0 0 .45rem;
	font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem);
	line-height: 1.3;
}
.pw-flowdiag__num {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 700;
	color: var(--pw-accent);
	font-variant-numeric: tabular-nums;
}
.pw-flowdiag__num::before { content: "0"; }

.pw-flowdiag__text { margin: 0; color: var(--pw-body, inherit); }

/* The HMI panel from step 3, with the client's own figures. */
.pw-flowdiag__readout {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .9rem 0 0;
	padding: .8rem;
	border-radius: var(--pw-radius);
	background: var(--pw-ink);
}
.pw-flowdiag__readout > div {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	padding: .28rem .6rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .08);
}
.pw-flowdiag__readout dt {
	margin: 0;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}
.pw-flowdiag__readout dd {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

/* --- the drawings themselves --- */
.pw-fd-machine   { fill: #B3261E; }
.pw-fd-plate     { fill: #fff; }
.pw-fd-brand     { fill: #B3261E; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .08em; }
.pw-fd-film      { fill: #E5A9A4; }
.pw-fd-filmcore  { fill: #B3261E; }
.pw-fd-web       { stroke: var(--pw-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pw-fd-roll      { fill: var(--pw-silver); stroke: var(--pw-border); }
.pw-fd-bundle    { fill: var(--pw-silver); stroke: var(--pw-muted); }
.pw-fd-bundle.is-wrapped { fill: #D7E3F1; stroke: var(--pw-accent); }
.pw-fd-screen    { fill: var(--pw-ink); }
.pw-fd-reading   { fill: #7FD18C; font: 700 15px/1 ui-monospace, monospace; }
.pw-fd-screenlabel { fill: rgba(255, 255, 255, .6); font: 700 8px/1 system-ui, sans-serif; letter-spacing: .14em; }
.pw-fd-cell      { fill: var(--pw-accent); }
.pw-fd-panel     { fill: var(--pw-ink); }
.pw-fd-row       { fill: rgba(127, 178, 240, .45); }
.pw-fd-barcode   { stroke: var(--pw-ink); stroke-width: 1.6; }
.pw-fd-basket    { fill: #fff; stroke: var(--pw-muted); }
.pw-fd-basketline { stroke: var(--pw-accent); stroke-width: 1.4; }
.pw-fd-arrow     { stroke: var(--pw-muted); stroke-width: 1.6; }
.pw-fd-arrowhead { fill: none; stroke: var(--pw-muted); stroke-width: 1.6; }
.pw-fd-slot      { fill: #fff; stroke: var(--pw-border); }
.pw-fd-stored    { fill: var(--pw-silver); }

@media (max-width: 720px) {
	.pw-flowdiag__step {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.pw-flowdiag__step + .pw-flowdiag__step::before { left: 2rem; }
}
.pw-fd-rail  { fill: var(--pw-border); }
.pw-fd-stem  { stroke: var(--pw-accent); stroke-width: 1.4; }