/*
Theme Name: NCODER
Theme URI: https://example.com/
Author: NCODER
Description: NCODER 官网主题：资料中心、产品中心与品牌页面。经典 PHP 主题，不依赖第三方 CDN。
Version: 1.16.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: ncoder
Tags: custom-logo, custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------------------------
   Design tokens
   Brand colours come from the customizer and override these defaults
   through the :root declaration printed by inc/settings.php.
   --------------------------------------------------------------- */

:root {
	--wgl-primary: #2072b1;
	--wgl-primary-hover: #1a5e93;
	--wgl-primary-deep: #0e3a5c;
	--wgl-accent: #e4edf6;
	--wgl-page-bg: #f0f3f6;
	--wgl-card-bg: #ffffff;
	--wgl-border: #e5e5e5;
	--wgl-text: #1a1a1a;
	--wgl-text-muted: #666666;
	--wgl-radius: 8px;
	--wgl-radius-sm: 4px;
	--wgl-container: 1458px;
	--wgl-container-wide: 1640px;
	--wgl-gutter: 20px;
	--wgl-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
	--wgl-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--wgl-shadow: 0 2px 10px rgba(14, 58, 92, 0.06);
	--wgl-shadow-hover: 0 10px 26px rgba(14, 58, 92, 0.14);
	/*
	 * Lines a full-bleed band up with the page container: above 1200px the
	 * container is capped, so the inset is the leftover margin plus the
	 * gutter, and below it the container is the viewport and the gutter wins.
	 */
	--wgl-inset: max(var(--wgl-gutter), calc((100vw - var(--wgl-container)) / 2 + var(--wgl-gutter)));
}

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

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

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

body {
	margin: 0;
	background-color: var(--wgl-page-bg);
	color: var(--wgl-text);
	font-family: var(--wgl-font);
	font-size: 16px;
	line-height: 1.7;
	overflow-wrap: break-word;
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--wgl-primary);
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	line-height: 1.3;
	font-weight: 600;
}

p {
	margin: 0 0 1em;
}

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

:focus-visible {
	outline: 2px solid var(--wgl-primary);
	outline-offset: 2px;
}

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

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

.wgl-container {
	width: 100%;
	max-width: var(--wgl-container);
	margin: 0 auto;
	padding: 0 var(--wgl-gutter);
}

.wgl-container--wide {
	max-width: var(--wgl-container-wide);
}

.wgl-main {
	padding: 0 0 90px;
}

.wgl-section {
	padding: 60px 0;
}

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

.wgl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wgl-card-bg);
	border-bottom: 1px solid var(--wgl-border);
}

.wgl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 78px;
}

.wgl-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.wgl-header__brand img {
	max-height: 46px;
	width: auto;
}

.wgl-header__site-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wgl-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.wgl-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	font-size: 16px;
	font-weight: 500;
	white-space: nowrap;
	border-radius: var(--wgl-radius-sm);
}

.wgl-nav__link:hover {
	background: var(--wgl-accent);
}

.wgl-nav__link[aria-current="page"] {
	color: var(--wgl-primary);
	font-weight: 600;
}

/*
 * The current-page marker hugs the label instead of the box. As an inset
 * shadow it was drawn at the bottom of the 44px hit area — twenty pixels
 * below the text — so it read as a stray line floating under the menu rather
 * than as "you are here". The mobile drawer deliberately has no marker: its
 * links are full width rows, where a bar under the text looks like a broken
 * border.
 */
@media (min-width: 1025px) {
	.wgl-nav__link[aria-current="page"]::after {
		content: "";
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 8px;
		height: 2px;
		background: var(--wgl-primary);
	}
}

.wgl-header__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wgl-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.wgl-icon-button:hover {
	background: var(--wgl-accent);
}

.wgl-nav-toggle {
	display: none;
}

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

.wgl-hero {
	position: relative;
	display: flex;
	align-items: center;
	background-color: var(--wgl-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.wgl-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* A single flat overlay: a wide low contrast gradient over the brand
	   colour produced visible banding on 8 bit displays. */
	background: rgba(14, 58, 92, 0.72);
}

.wgl-hero--small {
	min-height: 220px;
}

.wgl-hero--medium {
	min-height: 340px;
}

.wgl-hero--large {
	min-height: 520px;
}

.wgl-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wgl-container);
	margin: 0 auto;
	padding: 60px var(--wgl-gutter);
}

.wgl-hero--small .wgl-hero__inner {
	padding-top: 40px;
	padding-bottom: 40px;
}

.wgl-hero__title {
	margin: 0;
	font-size: 56px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.wgl-hero__subtitle {
	max-width: 720px;
	margin: 12px 0 0;
	font-size: 18px;
	opacity: 0.9;
}

.wgl-hero .wgl-button {
	margin-top: 24px;
}

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

.wgl-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--wgl-radius-sm);
	background: var(--wgl-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wgl-button:hover,
.wgl-button:focus {
	background: var(--wgl-primary-hover);
	color: #fff;
}

/* A small grow on hover, so every call to action answers the pointer. */
.wgl-button:hover,
.wgl-button:focus-visible {
	transform: scale(1.05);
}

.wgl-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--wgl-primary);
}

.wgl-button--ghost:hover {
	background: var(--wgl-accent);
	color: var(--wgl-primary);
}

.wgl-button--light {
	background: #fff;
	color: var(--wgl-primary);
}

.wgl-button--light:hover {
	background: var(--wgl-accent);
	color: var(--wgl-primary);
}

/* ---------------------------------------------------------------
   Resource center: tabs, search, list
   --------------------------------------------------------------- */

.wgl-resources {
	padding-top: 56px;
}

/* Resource tabs: labels on a rule, not buttons. The active one carries the
   brand underline, the same mark the section headings use. */
.wgl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wgl-border);
}

.wgl-tabs__item {
	flex: 0 1 auto;
	margin-bottom: -1px;
}

.wgl-tabs__link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-height: 46px;
	padding: 0;
	border-bottom: 2px solid transparent;
	color: var(--wgl-text-muted);
	font-size: 17px;
}

.wgl-tabs__link:hover {
	color: var(--wgl-primary);
}

.wgl-tabs__link[aria-current="page"] {
	border-bottom-color: var(--wgl-primary);
	color: var(--wgl-text);
	font-weight: 600;
}

.wgl-tabs__count {
	color: var(--wgl-text-muted);
	font-family: var(--wgl-font-mono);
	font-size: 13px;
}

.wgl-resource-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--wgl-border);
}

.wgl-resource-toolbar__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-right: auto;
}

.wgl-search-form {
	display: flex;
	align-items: stretch;
	width: min(100%, 460px);
}

.wgl-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--wgl-border);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	background: #fff;
}

.wgl-search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: var(--wgl-primary);
	color: #fff;
	cursor: pointer;
}

.wgl-search-form__submit:hover {
	background: var(--wgl-primary-hover);
}

.wgl-select {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wgl-border);
	border-radius: 2px;
	background: #fff;
}

.wgl-doc-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wgl-doc-row {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 28px;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius);
	box-shadow: var(--wgl-shadow);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wgl-doc-row:hover {
	box-shadow: var(--wgl-shadow-hover);
	transform: translateY(-2px);
}

.wgl-doc-row__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wgl-radius-sm);
	background: var(--wgl-accent);
	color: var(--wgl-primary);
}

.wgl-doc-row__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wgl-doc-row__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.wgl-doc-row__title a:hover {
	color: var(--wgl-primary);
}

.wgl-doc-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-doc-row__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wgl-doc-row__model {
	font-family: var(--wgl-font-mono);
	letter-spacing: 0.02em;
}

.wgl-doc-row__aside {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

.wgl-doc-row__date {
	color: var(--wgl-text-muted);
	font-size: 15px;
	white-space: nowrap;
}

.wgl-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	background: var(--wgl-primary);
	color: #fff;
	border-radius: var(--wgl-radius-sm);
	font-size: 15px;
	white-space: nowrap;
	transition: transform 0.2s ease, background 0.2s ease;
}

.wgl-download:hover,
.wgl-download:focus {
	background: var(--wgl-primary-hover);
	color: #fff;
	transform: scale(1.05);
}

.wgl-empty {
	padding: 56px 32px;
	text-align: center;
	background: var(--wgl-card-bg);
	border: 1px dashed var(--wgl-border);
	border-radius: var(--wgl-radius);
}

.wgl-empty__title {
	margin: 0 0 8px;
	font-size: 20px;
}

.wgl-empty__text {
	margin: 0 0 24px;
	color: var(--wgl-text-muted);
}

.wgl-suggestions {
	margin-top: 32px;
	text-align: left;
}

.wgl-suggestions__title {
	margin: 0 0 12px;
	font-size: 16px;
}

.wgl-result-summary {
	margin: 0 0 24px;
	color: var(--wgl-text-muted);
}

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

.wgl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.wgl-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius-sm);
}

.wgl-pagination__link:hover {
	border-color: var(--wgl-primary);
	color: var(--wgl-primary);
}

.wgl-pagination__link[aria-current="page"] {
	background: var(--wgl-primary);
	border-color: var(--wgl-primary);
	color: #fff;
}

.wgl-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 44px;
	color: var(--wgl-text-muted);
}

/* ---------------------------------------------------------------
   Content pages
   --------------------------------------------------------------- */

.wgl-card {
	padding: 40px;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius);
	box-shadow: var(--wgl-shadow);
}

.wgl-prose {
	max-width: 860px;
}

.wgl-prose h2 {
	margin-top: 1.6em;
	font-size: 26px;
}

.wgl-prose h3 {
	margin-top: 1.4em;
	font-size: 20px;
}

.wgl-prose ul,
.wgl-prose ol {
	padding-left: 1.4em;
}

.wgl-prose img {
	border-radius: var(--wgl-radius);
}

.wgl-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 28px 0;
}

.wgl-gallery img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--wgl-radius);
	border: 1px solid var(--wgl-border);
}

.wgl-gallery--wide {
	grid-template-columns: repeat(2, 1fr);
}

.wgl-gallery--wide img {
	height: 280px;
}

/* Studio product shots are white background portraits: fit them inside the
   cell instead of cropping, which would leave mostly empty white cards. */
.wgl-gallery--products img {
	object-fit: contain;
	background: #fff;
	padding: 14px;
	height: 260px;
}

@media (max-width: 768px) {
	.wgl-gallery,
	.wgl-gallery--wide {
		grid-template-columns: 1fr;
	}

	.wgl-gallery img,
	.wgl-gallery--wide img {
		height: 200px;
	}
}

.wgl-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 18px 0;
	list-style: none;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-breadcrumb li::after {
	content: "/";
	margin-left: 8px;
	color: var(--wgl-border);
}

.wgl-breadcrumb li:last-child::after {
	content: "";
	margin: 0;
}

.wgl-placeholder {
	padding: 104px 0 120px;
	text-align: center;
}

.wgl-placeholder__kicker {
	margin: 0 0 18px;
	color: var(--wgl-primary);
	font-family: var(--wgl-font-mono);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.wgl-placeholder__title {
	margin: 0 0 18px;
	font-size: 38px;
	font-weight: 600;
}

.wgl-placeholder__text {
	max-width: 620px;
	margin: 0 auto 28px;
	color: var(--wgl-text-muted);
	font-size: 16px;
	line-height: 1.9;
}

/* ---------------------------------------------------------------
   Blocks
   --------------------------------------------------------------- */

.wgl-block {
	padding: 60px 0;
}

.wgl-block--flush {
	padding: 0;
}

.wgl-block-error {
	padding: 24px;
	border: 1px dashed #d63638;
	border-radius: var(--wgl-radius);
	color: #d63638;
}

/* ---------------------------------------------------------------
   Home page bands
   The layout follows the reference site's rhythm: a photographic
   banner, paired feature cards, a deep brand product band with a
   floating selector card, an industry grid and an about band.
   --------------------------------------------------------------- */

.wgl-hero--home {
	/* Tall enough to fill the first screen together with the paired feature
	   cards, capped so an ultra tall window does not get a giant banner. */
	min-height: clamp(520px, 56vh, 640px);
}

.wgl-hero--home::after {
	background: linear-gradient(90deg, rgba(8, 38, 62, 0.92) 0%, rgba(14, 58, 92, 0.78) 42%, rgba(14, 58, 92, 0.42) 100%);
}

.wgl-hero--home .wgl-hero__title,
.wgl-carousel .wgl-hero__title {
	font-size: 54px;
	line-height: 1.18;
	letter-spacing: 0.02em;
}

.wgl-hero--home .wgl-hero__subtitle,
.wgl-carousel .wgl-hero__subtitle {
	max-width: 640px;
	margin-top: 18px;
	font-size: 19px;
	opacity: 0.92;
}

/* ---------------------------------------------------------------
   Home carousel
   The slides are stacked and cross faded with opacity, so the first
   slide stays readable when the enhancement script never runs.
   --------------------------------------------------------------- */

.wgl-carousel {
	position: relative;
	background: var(--wgl-primary-deep);
	color: #fff;
	overflow: hidden;
}

.wgl-carousel__viewport {
	position: relative;
	min-height: clamp(520px, 56vh, 640px);
}

.wgl-carousel__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background-color: var(--wgl-primary-deep);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.wgl-carousel__slide.is-active {
	opacity: 1;
}

/* The banner photograph is an <img> so the browser can pick a phone sized
   file from srcset; a CSS background always downloaded the desktop
   original. It fills the slide the way `background-size: cover` did. */
.wgl-carousel__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wgl-carousel__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Over the photograph, under the copy. */
	z-index: 1;
	background: linear-gradient(90deg, rgba(8, 38, 62, 0.92) 0%, rgba(14, 58, 92, 0.78) 42%, rgba(14, 58, 92, 0.42) 100%);
}

.wgl-carousel__slide .wgl-hero__inner {
	z-index: 2;
}

/* Transparent PNG cut-outs are shown whole on the brand colour instead of
   being cropped to the height of the banner, which would cut the product
   shot in half. */
.wgl-carousel__slide--product .wgl-carousel__image {
	object-fit: contain;
	object-position: right 6% center;
}

.wgl-carousel__slide--product::after {
	background: linear-gradient(90deg, rgba(8, 38, 62, 0.94) 0%, rgba(14, 58, 92, 0.8) 45%, rgba(14, 58, 92, 0.25) 100%);
}

.wgl-carousel .wgl-button {
	margin-top: 24px;
}

.wgl-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(14, 58, 92, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.wgl-carousel__arrow:hover,
.wgl-carousel__arrow:focus {
	background: rgba(14, 58, 92, 0.85);
}

.wgl-carousel__arrow--prev {
	left: 20px;
}

.wgl-carousel__arrow--next {
	right: 20px;
}

.wgl-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 8px;
	/* The row spans the whole slide, so it must not swallow the clicks
	   meant for the arrows that sit beside it on narrow screens. */
	pointer-events: none;
}

.wgl-carousel__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.wgl-carousel__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transition: background 0.2s ease, transform 0.2s ease;
}

.wgl-carousel__dot:hover::before {
	background: rgba(255, 255, 255, 0.75);
}

.wgl-carousel__dot[aria-current="true"]::before {
	background: #fff;
	transform: scale(1.3);
}

.wgl-button--arrow {
	gap: 14px;
	padding: 0 26px;
	min-height: 48px;
	font-size: 16px;
}

.wgl-button--arrow svg {
	transition: transform 0.2s ease;
}

.wgl-button--arrow:hover svg {
	transform: translateX(4px);
}

.wgl-section-head {
	position: relative;
	margin: 0 0 34px;
	padding-top: 24px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* The brand rule above the heading: the one mark every section shares. */
.wgl-section-head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--wgl-primary);
}

.wgl-section-head--light {
	color: #fff;
}

/* Paired feature cards */
.wgl-feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	/* The section above already contributes its own top padding; stacking a
	   second 90px here left a 150px void under the banner on a laptop
	   screen, which pushed the cards below the fold. */
	padding: 0;
}

.wgl-feature-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 240px;
	padding: 40px 44px;
	background: var(--wgl-accent);
	border-radius: 2px;
	overflow: hidden;
}

/* The decorative wash is a layer of its own, so hovering can zoom the
   background without moving the copy. */
.wgl-feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 84% 22%, rgba(32, 114, 177, 0.20) 0, transparent 44%),
		linear-gradient(115deg, rgba(32, 114, 177, 0.12) 0, transparent 58%);
	transition: transform 0.45s ease;
	pointer-events: none;
}

.wgl-feature-card:hover::before,
.wgl-feature-card:focus-within::before {
	transform: scale(1.25);
}

.wgl-feature-card::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 260px;
	height: 260px;
	border: 1px solid rgba(32, 114, 177, 0.16);
	border-radius: 50%;
	box-shadow: 0 0 0 40px rgba(32, 114, 177, 0.05);
	transition: transform 0.45s ease;
	pointer-events: none;
}

.wgl-feature-card:hover::after,
.wgl-feature-card:focus-within::after {
	transform: scale(1.22) translate(-14px, -14px);
}

.wgl-feature-card__title {
	position: relative;
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 600;
}

.wgl-feature-card__text {
	position: relative;
	max-width: 420px;
	margin: 0 0 26px;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.75;
}

.wgl-feature-card .wgl-button {
	position: relative;
	margin-top: auto;
}

/* Deep brand product band */
.wgl-band--deep {
	position: relative;
	margin-top: 90px;
	padding: 70px 0 150px;
	background: var(--wgl-primary-deep);
	color: #fff;
	overflow: hidden;
}

.wgl-band--deep::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.10) 0, transparent 32%),
		radial-gradient(circle at 82% 78%, rgba(255, 255, 255, 0.08) 0, transparent 34%);
	pointer-events: none;
}

.wgl-product-band {
	position: relative;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) minmax(0, 420px);
	gap: 48px;
	align-items: center;
}

.wgl-product-band__label {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
}

.wgl-product-band__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 600;
}

.wgl-product-band__model {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--wgl-font-mono);
	font-size: 15px;
}

.wgl-product-band__list {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	color: rgba(255, 255, 255, 0.9);
	font-size: 15px;
	line-height: 2;
}

.wgl-product-band__list li::before {
	content: "·";
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.6);
}

.wgl-product-band__image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wgl-product-band__image img {
	max-height: 320px;
	width: auto;
	filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.45));
}

/* Selector card that overlaps the deep band */
.wgl-selector {
	position: relative;
	z-index: 2;
	margin: -80px auto 0;
	padding: 34px 40px 38px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 18px 40px rgba(14, 58, 92, 0.16);
}

.wgl-selector__title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
}

.wgl-selector__text {
	margin: 0 0 22px;
	color: var(--wgl-text-muted);
	font-size: 15px;
}

.wgl-selector__form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.wgl-selector__field {
	flex: 1 1 180px;
	min-width: 150px;
}

.wgl-selector__field label {
	display: block;
	margin-bottom: 6px;
	color: var(--wgl-text-muted);
	font-size: 13px;
}

.wgl-selector__field select,
.wgl-selector__field input {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius-sm);
	background: #f7f7fa;
}

.wgl-selector__submit {
	align-self: flex-end;
}

/*
 * The industries the company serves, on the home page.
 *
 * Deliberately not a grid: seven industries with no photos, no meaningful
 * order and often the same document count were being dressed up as cards,
 * tiles and a ruled table, and every version read as a patch stitched onto
 * the page. They are a two column index instead: a rule per entry, the
 * name set large enough to carry the section, and an arrow that answers
 * the pointer.
 */
.wgl-industry-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 72px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wgl-industry-list > li {
	display: flex;
}

.wgl-industry-list__item {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wgl-border);
	color: var(--wgl-text);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: color 0.2s ease, border-color 0.2s ease;
}

/* The arrow sits at the end of the rule rather than beside the name, so the
   rows scan as a list of destinations. */
.wgl-industry-list__item svg {
	flex: 0 0 auto;
	color: var(--wgl-border);
	transition: color 0.2s ease, transform 0.2s ease;
}

.wgl-industry-list__name {
	flex: 1 1 auto;
	min-width: 0;
}

/* The one piece of information worth carrying: how many product series
   serve that industry. It differs per row, so it never reads as filler. */
.wgl-industry-list__meta {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
	color: var(--wgl-text-muted);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
}

.wgl-industry-list__item:hover,
.wgl-industry-list__item:focus-visible {
	color: var(--wgl-primary);
	border-bottom-color: var(--wgl-primary);
}

.wgl-industry-list__item:hover .wgl-industry-list__meta,
.wgl-industry-list__item:focus-visible .wgl-industry-list__meta {
	color: var(--wgl-primary);
}

.wgl-industry-list__item:hover svg,
.wgl-industry-list__item:focus-visible svg {
	color: var(--wgl-primary);
	transform: translateX(4px);
}

/* A section heading with its own entry on the right, used by the home page
   application list. */
.wgl-band-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.wgl-band-head .wgl-section-head {
	margin-bottom: 0;
}

.wgl-band-head__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding-bottom: 6px;
	color: var(--wgl-text-muted);
	font-size: 15px;
	transition: color 0.2s ease;
}

.wgl-band-head__more:hover,
.wgl-band-head__more:focus {
	color: var(--wgl-primary);
}

.wgl-band-head__more svg {
	transition: transform 0.2s ease;
}

.wgl-band-head__more:hover svg,
.wgl-band-head__more:focus svg {
	transform: translateX(4px);
}

/* About band */
.wgl-about-band {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	align-items: stretch;
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

.wgl-about-band__media {
	position: relative;
	background: var(--wgl-accent);
}

/* The image carries the height: with no image configured the column simply
   disappears instead of leaving an empty panel. */
.wgl-about-band__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 440px;
	object-fit: cover;
}

.wgl-about-band__body {
	align-self: center;
	padding: 0 0 0 64px;
}

.wgl-about-band__title {
	position: relative;
	margin: 0 0 22px;
	padding-top: 24px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* A short brand rule instead of a bare heading, which is what made the band
   read as a plain block of text. */
.wgl-about-band__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--wgl-primary);
}

.wgl-about-band__text {
	max-width: 60ch;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.95;
}

.wgl-about-band__text p {
	margin: 0 0 14px;
}

/* The opening paragraph is the lead, so it carries the darker ink. */
.wgl-about-band__text > p:first-child {
	color: var(--wgl-text);
	font-size: 17px;
	line-height: 1.85;
}

.wgl-about-band__text h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 16px;
	color: var(--wgl-text);
	font-size: 17px;
	font-weight: 600;
}

.wgl-about-band__text h3::before {
	content: "";
	width: 3px;
	height: 16px;
	background: var(--wgl-primary);
}

/* Two columns keep the four advantages from turning the band into a wall of
   text on a wide screen. */
.wgl-about-band__text ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 26px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.wgl-about-band__text li {
	position: relative;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.7;
}

.wgl-about-band__text li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	background: var(--wgl-primary);
}

.wgl-about-band__text li strong {
	color: var(--wgl-text);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Company film
   The profile's story told with the cameras inside the workshop.
   The player only fetches metadata until it is played, and the poster
   frame carries the first impression, so the clip never lands in the
   page load.
   --------------------------------------------------------------- */

.wgl-section--about-film {
	padding: 0 0 76px;
}

.wgl-film {
	margin: 0;
	border: 1px solid var(--wgl-border);
	background: var(--wgl-primary-deep);
}

.wgl-film__player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: var(--wgl-primary-deep);
}

/* ---------------------------------------------------------------
   Product centre
   --------------------------------------------------------------- */

/* Model legend on the list page */
.wgl-naming {
	margin: 0 0 60px;
}

.wgl-naming__body {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 28px 48px;
	align-items: start;
	padding: 30px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wgl-border);
	border-radius: 0;
	box-shadow: none;
}

.wgl-naming__model {
	margin: 0;
	color: var(--wgl-primary);
	font-family: var(--wgl-font-mono);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.wgl-naming__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.7;
}

.wgl-naming__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--wgl-border);
}

.wgl-naming__index {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 20px;
	color: var(--wgl-primary);
	font-family: var(--wgl-font-mono);
	font-size: 12px;
	font-weight: 600;
}

.wgl-naming__note {
	margin: 12px 0 0;
	color: var(--wgl-text-muted);
	font-size: 13px;
}

.wgl-naming__list--inline {
	margin-top: 0;
}

/* Series tree and cards */
.wgl-products {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.wgl-products__tree {
	position: sticky;
	top: 100px;
}

.wgl-products__group + .wgl-products__group {
	margin-top: 22px;
}

.wgl-products__group-title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
}

.wgl-products__tree-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--wgl-border);
}

.wgl-products__tree-list a {
	display: block;
	margin-left: -1px;
	padding: 8px 0 8px 16px;
	border-left: 2px solid transparent;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-products__tree-list a:hover,
.wgl-products__tree-list a:focus {
	border-left-color: var(--wgl-primary);
	color: var(--wgl-primary);
}

.wgl-products__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

/* Filter summary: the home page selector sends its series, bore and keyword
   here, and the list below shows the series that matched. */
.wgl-products__filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 20px;
	background: var(--wgl-accent);
	border-radius: var(--wgl-radius);
}

.wgl-products__filter-text {
	margin: 0;
	font-weight: 600;
}

.wgl-products__filter-clear {
	font-size: 15px;
}

.wgl-product-card__models {
	margin: 14px 0 0;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-product-card {
	display: flex;
	flex-direction: column;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: 2px;
	box-shadow: none;
	overflow: hidden;
	scroll-margin-top: 100px;
	transition: border-color 0.3s ease;
}

.wgl-product-card:hover {
	border-color: var(--wgl-primary);
}

.wgl-product-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 210px;
	padding: 18px;
	/* The series photos come from the printed manual, so they carry a light
	   background: a white plate keeps them from looking pasted on. */
	background: var(--wgl-card-bg);
	border-bottom: 1px solid var(--wgl-border);
}

.wgl-product-card__media img {
	max-width: 100%;
	max-height: 174px;
	width: auto;
	height: auto;
}

.wgl-product-card__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	color: var(--wgl-primary);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.wgl-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 26px 28px 28px;
}

.wgl-product-card__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.4;
}

.wgl-product-card__tagline {
	margin: 0 0 16px;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-product-card__list {
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	color: #4a4a55;
	font-size: 14px;
	line-height: 1.8;
}

.wgl-product-card__list li {
	position: relative;
	padding-left: 18px;
}

.wgl-product-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wgl-primary);
}

.wgl-product-card__more {
	align-self: flex-start;
	margin-top: auto;
}

.wgl-products__cta {
	margin: 48px 0 0;
}

/* Series detail page */
.wgl-product {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.wgl-product__nav {
	position: sticky;
	top: 100px;
}

.wgl-product__nav-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--wgl-border);
}

.wgl-product__nav-list a {
	display: block;
	margin-left: -1px;
	padding: 8px 0 8px 16px;
	border-left: 2px solid transparent;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-product__nav-list a:hover,
.wgl-product__nav-list a:focus {
	border-left-color: var(--wgl-primary);
	color: var(--wgl-primary);
}

.wgl-product__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius-sm);
	font-size: 14px;
}

.wgl-product__back:hover,
.wgl-product__back:focus {
	border-color: var(--wgl-primary);
	color: var(--wgl-primary);
}

.wgl-product-section {
	padding: 34px 0;
	border-top: 1px solid var(--wgl-border);
	scroll-margin-top: 100px;
}

.wgl-product-section:first-child {
	padding-top: 0;
	border-top: 0;
}

.wgl-product-section__title {
	margin: 0 0 24px;
	font-size: 26px;
	font-weight: 600;
}

.wgl-spec-group__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.wgl-spec-group__title:first-child {
	margin-top: 0;
}

.wgl-spec-group__title::before {
	content: "";
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--wgl-primary);
}

.wgl-spec-table {
	width: 100%;
	margin: 0 0 8px;
	border: 1px solid var(--wgl-border);
	border-collapse: collapse;
	background: var(--wgl-card-bg);
}

.wgl-spec-table th,
.wgl-spec-table td {
	padding: 13px 18px;
	border-bottom: 1px solid var(--wgl-border);
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

.wgl-spec-table tr:last-child th,
.wgl-spec-table tr:last-child td {
	border-bottom: 0;
}

.wgl-spec-table th {
	width: 34%;
	background: #f7f9fb;
	color: var(--wgl-text-muted);
	font-weight: 500;
}

.wgl-product-overview {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.wgl-product-overview__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 24px;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: var(--wgl-radius);
}

.wgl-product-overview__media img {
	max-width: 100%;
	max-height: 320px;
	width: auto;
	height: auto;
}

.wgl-product-overview__text {
	color: #4a4a55;
	line-height: 1.9;
}

.wgl-product-overview__text p:last-child {
	margin-bottom: 0;
}

.wgl-product-overview__list {
	margin: 20px 0 26px;
	padding: 0;
	list-style: none;
}

/* The series link and the product trial button sit on one row. */
.wgl-product-overview__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
}

.wgl-product-overview__list li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 24px;
	font-size: 14px;
	line-height: 1.7;
}

.wgl-product-overview__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wgl-primary);
	box-shadow: 0 0 0 4px rgba(32, 114, 177, 0.14);
}

.wgl-product-applications {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wgl-product-applications li {
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--wgl-accent);
	color: var(--wgl-primary);
	font-size: 14px;
	font-weight: 500;
}

.wgl-products__cards--related {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.wgl-products__cards--related .wgl-product-card__media {
	height: 150px;
}

.wgl-products__cards--related .wgl-product-card__media img {
	max-height: 118px;
}

.wgl-products__cards--related .wgl-product-card__list {
	display: none;
}

.wgl-product-downloads + .wgl-product-downloads {
	margin-top: 32px;
}

.wgl-product-downloads__more {
	margin: 14px 0 0;
	font-size: 14px;
}

/* Floating quick actions: the phone number and back to top */
.wgl-actions {
	position: fixed;
	right: 24px;
	bottom: 28px;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.wgl-actions a,
.wgl-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(14, 58, 92, 0.9);
	color: #fff;
	box-shadow: 0 8px 18px rgba(11, 45, 71, 0.28);
}

.wgl-actions a,
.wgl-actions button {
	cursor: pointer;
}

.wgl-actions a:hover,
.wgl-actions button:hover {
	background: var(--wgl-primary);
	color: #fff;
}

.wgl-actions button[hidden] {
	display: none;
}

/*
 * The inquiry button sits above the phone chip. Its label appears on hover or
 * keyboard focus — on a touch screen the first tap must open the form, not
 * uncover a label — and the icon alone carries it everywhere else.
 */
.wgl-actions__inquiry {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wgl-actions__inquiry-label {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translate(10px, -50%);
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--wgl-card-bg);
	color: var(--wgl-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(14, 58, 92, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

@media (hover: hover) {
	.wgl-actions__inquiry:hover .wgl-actions__inquiry-label,
	.wgl-actions__inquiry:focus-visible .wgl-actions__inquiry-label {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
	}
}

/*
 * The phone chip is deliberately not a link: it answers hover and tap, so the
 * number can be read and dialled by hand instead of the browser offering to
 * open a dial dialogue. On a touch screen the tap is what opens it — leaving
 * the number on show put a pill on top of the page for the whole visit.
 */
.wgl-actions__phone {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wgl-actions__phone-number {
	position: absolute;
	right: calc(100% + 12px);
	top: 50%;
	transform: translate(10px, -50%);
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--wgl-card-bg);
	color: var(--wgl-text);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgba(14, 58, 92, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/*
 * The number is revealed by what the visitor does: pointing at the chip with
 * a real pointer, or tapping it on a touch screen (the script flips
 * aria-expanded). A touch screen latches :hover on the element it tapped
 * last, so the hover rule is scoped to pointers — otherwise the pill stayed
 * on show after the second tap.
 */
.wgl-actions__phone:focus-visible .wgl-actions__phone-number,
.wgl-actions__phone[aria-expanded="true"] .wgl-actions__phone-number {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

@media (hover: hover) {
	.wgl-actions__phone:hover .wgl-actions__phone-number {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
	}
}

@media (max-width: 1200px) {
	.wgl-product-band {
		grid-template-columns: 160px minmax(0, 1fr) minmax(0, 320px);
		gap: 32px;
	}
}

@media (max-width: 1024px) {
	.wgl-feature-grid {
		gap: 24px;
	}

	.wgl-product-band {
		grid-template-columns: minmax(0, 1fr);
		text-align: left;
	}

	.wgl-product-band__image {
		justify-content: flex-start;
	}

	.wgl-product-band__image img {
		max-height: 240px;
	}

	.wgl-about-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.wgl-about-band__media img {
		min-height: 300px;
	}

	.wgl-about-band__body {
		padding: 36px 32px 40px;
	}

	.wgl-about-band__text ul {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-bottom: 24px;
	}

	/* Product pages: the tree and the anchor nav become horizontal rows. */
	.wgl-naming__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.wgl-products {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.wgl-products__tree {
		position: static;
	}

	.wgl-products__tree-list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 18px;
		border-left: 0;
	}

	.wgl-products__tree-list a {
		margin-left: 0;
		padding: 6px 0;
		border-left: 0;
	}

	.wgl-product {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.wgl-product__nav {
		position: static;
	}

	.wgl-product__nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 18px;
		margin-bottom: 16px;
		border-left: 0;
	}

	.wgl-product__nav-list a {
		margin-left: 0;
		padding: 6px 0;
		border-left: 0;
	}

	.wgl-product-overview {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.wgl-products__cards--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.wgl-hero--home .wgl-hero__title,
	.wgl-carousel .wgl-hero__title {
		font-size: 32px;
	}

	.wgl-hero--home,
	.wgl-carousel__viewport {
		min-height: 380px;
	}

	.wgl-carousel .wgl-hero__subtitle {
		font-size: 16px;
	}

	/* On phones the arrows drop down beside the dots: centred on the slide
	   they would sit on top of the headline, which wraps to several lines. */
	.wgl-carousel__arrow {
		top: auto;
		bottom: 6px;
		width: 40px;
		height: 40px;
		margin-top: 0;
	}

	.wgl-carousel__arrow--prev {
		left: 10px;
	}

	.wgl-carousel__arrow--next {
		right: 10px;
	}

	.wgl-carousel__dots {
		bottom: 12px;
	}

	/* The cut-out is scaled down and pushed under the copy, so the headline
	   stays on flat brand colour on narrow screens. */
	.wgl-carousel__slide--product .wgl-carousel__image {
		top: auto;
		left: auto;
		right: 6%;
		bottom: 96px;
		width: 42%;
		height: auto;
	}

	/* ...and the veil is stronger, so the copy keeps its contrast where it
	   still crosses the cut-out. */
	.wgl-carousel__slide--product::after {
		background: linear-gradient(90deg, rgba(8, 38, 62, 0.96) 0%, rgba(12, 50, 80, 0.9) 52%, rgba(14, 58, 92, 0.6) 100%);
	}

	.wgl-feature-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wgl-feature-card {
		padding: 28px 24px;
	}

	.wgl-band--deep {
		padding: 48px 0 120px;
	}

	.wgl-selector {
		margin-top: -60px;
		padding: 24px 20px 28px;
	}

	.wgl-selector__field {
		flex: 1 1 100%;
	}

	.wgl-actions {
		right: 14px;
		bottom: 16px;
	}
}

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

.wgl-footer {
	background: var(--wgl-primary-deep);
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
}

.wgl-footer a:hover {
	color: #fff;
}

.wgl-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	padding: 60px 0 40px;
}

.wgl-footer__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: 18px;
}

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

.wgl-footer__list li {
	margin-bottom: 10px;
}

.wgl-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.wgl-to-top[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
   About page
   --------------------------------------------------------------- */

/* The breadcrumb already carries the gap under the banner, so the profile
   band starts immediately and only adds room below. */
.wgl-section--about {
	padding: 56px 0 64px;
}

/* Without a picture the profile band keeps a single column instead of
   leaving an empty panel next to the copy. */
.wgl-about-band--text {
	grid-template-columns: minmax(0, 1fr);
}

/* Key figures: set in the technical face, separated by rules instead of a
   repeated accent bar on every figure. */
.wgl-stat-band {
	padding: 56px 0;
	background: var(--wgl-primary-deep);
	color: #fff;
}

.wgl-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wgl-stat {
	position: relative;
	padding-left: 30px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.wgl-stat:first-child {
	padding-left: 22px;
	border-left: 0;
}

/* Only the first figure keeps the brand accent bar; the rest of the row is
   separated by the hairlines above. */
.wgl-stat:not(:first-child)::before {
	content: none;
}

.wgl-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 3px;
	height: 42px;
	border-radius: 2px;
	background: var(--wgl-primary);
}

.wgl-stat__value {
	display: block;
	font-family: var(--wgl-font-mono);
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.wgl-stat__label {
	display: block;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.68);
	font-size: 14px;
}

/* Capability columns: numbered, on hairline rules, no cards. */
.wgl-capability-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	counter-reset: wgl-capability;
}

/* Four points leave an orphan in a three column row, so they are laid out as
   a balanced 2 x 2 instead. Browsers without `:has()` keep the default grid. */
.wgl-capability-grid:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wgl-capability {
	padding: 30px 40px 36px 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wgl-border);
	border-radius: 0;
	box-shadow: none;
	counter-increment: wgl-capability;
}

.wgl-capability::before {
	content: counter( wgl-capability, decimal-leading-zero );
	display: block;
	margin-bottom: 16px;
	color: var(--wgl-primary);
	font-family: var(--wgl-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
}

/*
 * The divider is a property of a *column*, not of "every following sibling".
 * The old `+` rule was written for the three column grid and then applied to
 * the 2 x 2 layout as well, so the entry that starts the second row — a left
 * column — picked up the rule and 40px of padding too, and the left column no
 * longer lined up with itself. Media queries keep the three patterns apart,
 * so no rule needs to be undone with a more specific selector later.
 */
@media (min-width: 1025px) {
	.wgl-capability-grid > .wgl-capability:nth-child(3n + 2),
	.wgl-capability-grid > .wgl-capability:nth-child(3n + 3) {
		padding-left: 40px;
		border-left: 1px solid var(--wgl-border);
	}

	/* Exactly four entries: a 2 x 2 grid, so only the right column carries it. */
	.wgl-capability-grid:has(> :nth-child(4):last-child) > .wgl-capability {
		padding-left: 0;
		border-left: 0;
	}

	.wgl-capability-grid:has(> :nth-child(4):last-child) > .wgl-capability:nth-child(2n) {
		padding-left: 40px;
		border-left: 1px solid var(--wgl-border);
	}
}

/* Tablet: two columns whatever the count, so the divider follows the parity. */
@media (max-width: 1024px) and (min-width: 769px) {
	.wgl-capability-grid > .wgl-capability:nth-child(2n) {
		padding-left: 40px;
		border-left: 1px solid var(--wgl-border);
	}
}

.wgl-capability__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 600;
}

.wgl-capability__text {
	margin: 0;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.85;
}

/* Company history: one rail, year on the left of every entry. */
.wgl-timeline {
	position: relative;
	margin: 0;
	padding: 4px 0 4px 40px;
	list-style: none;
}

.wgl-timeline::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--wgl-border);
}

.wgl-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 24px;
	padding-bottom: 30px;
}

.wgl-timeline__item:last-child {
	padding-bottom: 0;
}

.wgl-timeline__item::before {
	content: "";
	position: absolute;
	left: -34px;
	top: 9px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--wgl-primary);
	box-shadow: 0 0 0 4px rgba(32, 114, 177, 0.14);
}

.wgl-timeline__year {
	color: var(--wgl-primary);
	font-family: var(--wgl-font-mono);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

.wgl-timeline__event {
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.85;
}

.wgl-timeline__note {
	margin: -6px 0 26px;
	color: var(--wgl-text-muted);
	font-size: 13px;
}

/* Team photo */
.wgl-team {
	max-width: 1100px;
	margin: 0 auto;
}

.wgl-team__figure {
	margin: 0;
}

.wgl-team__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.wgl-team__note {
	margin: 20px 0 0;
	color: var(--wgl-text-muted);
	font-size: 14px;
	text-align: center;
}

/* Vision, mission and values */
.wgl-culture {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}

.wgl-culture__item {
	padding: 0 36px 0 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.wgl-culture__item + .wgl-culture__item {
	padding-left: 36px;
	border-left: 1px solid var(--wgl-border);
}

.wgl-culture__title {
	position: relative;
	margin: 0 0 16px;
	padding-top: 18px;
	font-size: 19px;
	font-weight: 600;
}

.wgl-culture__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: var(--wgl-primary);
}

.wgl-culture__text {
	margin: 0;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.85;
}

.wgl-culture__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wgl-culture__list li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 20px;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.8;
}

.wgl-culture__list li:last-child {
	margin-bottom: 0;
}

.wgl-culture__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wgl-primary);
}

/* Closing call to action */
.wgl-section--about-cta {
	padding-top: 0;
}

.wgl-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 40px 44px;
	background: var(--wgl-accent);
	border-radius: 2px;
}

.wgl-cta__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
}

.wgl-cta__text {
	max-width: 62ch;
	margin: 0;
	color: #4a4a55;
	font-size: 15px;
}

.wgl-cta .wgl-button {
	flex: 0 0 auto;
}

@media (max-width: 1024px) {
	.wgl-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.wgl-stat__value {
		font-size: 38px;
	}

	.wgl-capability-grid,
	.wgl-culture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.wgl-section--about {
		padding-bottom: 40px;
	}

	.wgl-stat-band {
		padding: 36px 0;
	}

	.wgl-stat__value {
		font-size: 32px;
	}

	.wgl-stat::before {
		height: 32px;
	}

	.wgl-capability-grid,
	.wgl-culture {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* The rail moves to the far left and the year sits above its event, which
	   keeps the dates readable on a phone. */
	.wgl-timeline {
		padding-left: 30px;
	}

	.wgl-timeline::before {
		left: 5px;
	}

	.wgl-timeline__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 2px;
	}

	.wgl-timeline__item::before {
		left: -30px;
		top: 6px;
		width: 9px;
		height: 9px;
	}

	.wgl-timeline__year {
		font-size: 18px;
	}

	.wgl-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 30px 24px;
	}

	.wgl-cta__title {
		font-size: 21px;
	}
}

/* ---------------------------------------------------------------
   Page banner

   Every page opens on the brand navy: the heading, the positioning line
   and the breadcrumb on the left, and the page's own photograph framed on
   the right where it has one worth showing. The banner this replaces put
   one shared photograph behind every page and washed it over with a flat
   overlay, which is what made the pages read as one template.
   --------------------------------------------------------------- */

.wgl-hero--page {
	display: block;
	min-height: 0;
	background-color: var(--wgl-primary-deep);
}

.wgl-hero--page::after {
	content: none;
}

/*
 * Photographic banner: the page's own picture sits behind the type under a
 * flat brand overlay, which is how every inner page looked before the band.
 * The type is lifted above the overlay so the flat wash never dims it.
 */
.wgl-hero--page-banner {
	min-height: 340px;
	background-color: var(--wgl-primary);
	background-size: cover;
	background-position: center;
}

.wgl-hero--page-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(14, 58, 92, 0.72);
}

.wgl-hero--page-banner .wgl-page-head {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 1fr);
	min-height: 340px;
}

/* A utility page keeps the banner short, the way the small banner did. */
.wgl-hero--page-banner.wgl-hero--page-compact,
.wgl-hero--page-banner.wgl-hero--page-compact .wgl-page-head {
	min-height: 240px;
}

.wgl-page-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 47%);
	align-items: center;
}

/* No photograph, or a banner with only a heading: one column. */
.wgl-hero--page-plain .wgl-page-head {
	grid-template-columns: minmax(0, 1fr);
}

.wgl-page-head__text {
	padding: 78px 56px 64px var(--wgl-inset);
}

.wgl-hero--page .wgl-hero__title {
	margin: 0;
	font-size: 54px;
	line-height: 1.1;
}

.wgl-hero--page .wgl-hero__subtitle {
	max-width: 34ch;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 1.8;
	opacity: 1;
}

.wgl-hero--page .wgl-breadcrumb {
	margin: 34px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.68);
}

.wgl-hero--page .wgl-breadcrumb a {
	color: inherit;
}

.wgl-hero--page .wgl-breadcrumb a:hover,
.wgl-hero--page .wgl-breadcrumb a:focus {
	color: #fff;
}

.wgl-hero--page .wgl-breadcrumb li::after {
	color: rgba(255, 255, 255, 0.32);
}

/* A heading only banner needs far less room than a full band. */
.wgl-hero--page-compact .wgl-page-head__text {
	padding-top: 52px;
	padding-bottom: 46px;
}

.wgl-hero--page-compact .wgl-hero__title {
	font-size: 38px;
}

.wgl-page-head__media {
	align-self: stretch;
	margin: 0;
	min-height: 380px;
	overflow: hidden;
}

.wgl-page-head__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

/* ---------------------------------------------------------------
   R&D and manufacturing page

   The page is built from bands rather than cards: the company profile
   sets a lead paragraph against a portrait photo, the research points sit
   on hairline rules, every production step carries its own photo, and the
   photos left over close the page as a wall.
   --------------------------------------------------------------- */

/* Company profile */
.wgl-section--manufacturing {
	padding: 76px 0 0;
	background: var(--wgl-card-bg);
}

.wgl-mfg-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
	gap: 64px;
	/*
	 * The photo stretches to the height of the copy instead of standing
	 * taller than it: a portrait frame beside four lines of text left the
	 * profile looking unbalanced.
	 */
	align-items: stretch;
}

/* No second photo in the gallery: the profile keeps one column instead of
   leaving an empty panel beside the copy. */
.wgl-mfg-intro--text {
	grid-template-columns: minmax(0, 1fr);
}

.wgl-manufacturing-intro {
	max-width: 66ch;
	color: #4a4a55;
	font-size: 16px;
	line-height: 1.95;
}

.wgl-manufacturing-intro > :first-child {
	margin-top: 0;
}

.wgl-manufacturing-intro > :last-child {
	margin-bottom: 0;
}

/* The opening paragraph is the lead: it carries the weight the rest of the
   block only supports. The rule above it is the same mark the section
   headings use, so the two read as one system. */
.wgl-manufacturing-intro > p:first-child {
	color: #16212c;
	font-size: 19px;
	line-height: 1.8;
}

.wgl-manufacturing-intro > p:first-child::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-bottom: 26px;
	background: var(--wgl-primary);
}

.wgl-manufacturing-intro h3 {
	margin: 26px 0 12px;
	font-size: 18px;
	font-weight: 600;
}

.wgl-manufacturing-intro ul {
	margin: 0;
	padding-left: 20px;
}

.wgl-manufacturing-intro li {
	margin-bottom: 8px;
}

.wgl-mfg-intro__media {
	margin: 0;
	min-height: 280px;
	overflow: hidden;
}

.wgl-mfg-intro__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Research points sit on the white band the profile opened. */
.wgl-section--research {
	padding: 64px 0 0;
	background: var(--wgl-card-bg);
}

/* Production steps: numbered, because the order is the point. Each step
   carries the workshop photo that shows it, so the section reads as a
   sequence rather than a list next to an empty half page. */
.wgl-section--process {
	padding: 72px 0 88px;
	background: var(--wgl-card-bg);
}

.wgl-process {
	position: relative;
	counter-reset: wgl-process;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One hairline rail runs behind the step markers. */
.wgl-process::before {
	content: "";
	position: absolute;
	top: 28px;
	bottom: 24px;
	left: 23px;
	width: 1px;
	background: var(--wgl-border);
}

.wgl-process__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 6px 40px;
	/*
	 * Centred rather than top aligned: the step photo sets the row height,
	 * so a two line caption would otherwise float above a pool of white.
	 */
	align-items: center;
	padding: 30px 0;
	border-bottom: 1px solid var(--wgl-border);
}

.wgl-process__item:first-child {
	padding-top: 0;
}

.wgl-process__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wgl-process__item--photo {
	grid-template-columns: 64px minmax(0, 1fr) minmax(0, 272px);
}

.wgl-process__index {
	counter-increment: wgl-process;
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 2px;
	background: var(--wgl-primary);
	color: #fff;
	font-family: var(--wgl-font-mono);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.wgl-process__index::before {
	content: counter( wgl-process, decimal-leading-zero );
}

.wgl-process__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
}

.wgl-process__text {
	margin: 0;
	max-width: 56ch;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.85;
}

.wgl-process__media {
	margin: 0;
	overflow: hidden;
}

.wgl-process__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Workshop photos. The frames come from a phone and a drone, so their
   aspect ratios differ; a fixed ratio keeps the grid from turning into a
   ragged staircase. */
.wgl-section--shop {
	padding: 72px 0 84px;
}

.wgl-shop-gallery {
	display: grid;
	/*
	 * `auto-fit` rather than `auto-fill`: the empty tracks collapse, so two
	 * photos stretch across the row instead of leaving a hole where a third
	 * one would have gone.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px;
}

.wgl-shop-gallery__item {
	margin: 0;
	overflow: hidden;
	background: var(--wgl-card-bg);
	border-radius: 2px;
	box-shadow: none;
}

.wgl-shop-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	/* Two photos stretch across the whole row, so they are capped before
	   they turn into billboards. */
	max-height: 420px;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.wgl-page-head__text {
		padding: 64px 40px 54px var(--wgl-inset);
	}
}

@media (max-width: 1024px) {
	.wgl-page-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.wgl-page-head__text {
		padding: 56px var(--wgl-inset) 48px;
	}

	.wgl-page-head__media,
	.wgl-page-head__media img {
		min-height: 0;
	}

	.wgl-page-head__media img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.wgl-mfg-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.wgl-mfg-intro__media {
		min-height: 0;
	}

	.wgl-mfg-intro__media img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.wgl-process__item--photo {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.wgl-process__media {
		grid-column: 2 / -1;
		margin-top: 8px;
	}
}

@media (max-width: 768px) {
	.wgl-hero--page .wgl-hero__title {
		font-size: 34px;
	}

	.wgl-page-head__text {
		padding: 44px var(--wgl-inset) 38px;
	}

	.wgl-section--manufacturing {
		padding-top: 52px;
	}

	.wgl-section-head {
		font-size: 24px;
	}

	.wgl-process::before {
		left: 19px;
	}

	.wgl-process__item {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 4px 20px;
		padding: 26px 0;
	}

	.wgl-process__index {
		width: 40px;
		height: 40px;
		font-size: 13px;
	}

	.wgl-process__media {
		grid-column: 1 / -1;
	}

	.wgl-stat {
		padding-left: 22px;
	}

	.wgl-stat__value {
		font-size: 32px;
	}
}

/* ---------------------------------------------------------------
   Contact page
   --------------------------------------------------------------- */

/* The breadcrumb already carries the gap under the banner. */
.wgl-section--contact {
	padding: 56px 0 64px;
}

.wgl-contact-intro {
	max-width: 820px;
	margin-bottom: 32px;
	color: #4a4a55;
	font-size: 16px;
	line-height: 1.9;
}

.wgl-contact-intro > :first-child {
	margin-top: 0;
}

/* `auto-fit` keeps the two cards side by side on a desktop and lets a single
   card take the whole row when the section only has one. */
.wgl-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

.wgl-contact-card {
	padding: 30px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wgl-border);
	border-radius: 0;
	box-shadow: none;
}

/* The inquiry card is the action, so it carries the brand tint. */
.wgl-contact-card--action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 28px 30px 30px;
	background: var(--wgl-accent);
}

.wgl-contact-card__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
}

.wgl-contact-card__text {
	margin: 0 0 22px;
	color: #3d4c5a;
	font-size: 15px;
	line-height: 1.85;
}

.wgl-contact-list {
	margin: 0;
}

.wgl-contact-list__item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--wgl-border);
}

.wgl-contact-list__item:first-child {
	padding-top: 0;
	border-top: 0;
}

.wgl-contact-list dt {
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-contact-list dd {
	margin: 0;
	color: var(--wgl-text);
	font-size: 15px;
	line-height: 1.7;
	word-break: break-word;
}

/* Opening hours can hold more than one line, so each line keeps its own row. */
.wgl-contact-list__line {
	display: block;
}

.wgl-contact-departments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wgl-contact-department {
	padding: 22px 0 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wgl-border);
	border-radius: 0;
	box-shadow: none;
}

.wgl-contact-department__name {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 600;
}

.wgl-contact-department__line {
	margin: 0 0 6px;
	color: #4a4a55;
	font-size: 15px;
	line-height: 1.7;
	word-break: break-word;
}

.wgl-contact-department__line:last-child {
	margin-bottom: 0;
}

.wgl-contact-visit {
	max-width: 820px;
	color: #4a4a55;
	font-size: 16px;
	line-height: 1.9;
}

.wgl-contact-visit > :first-child {
	margin-top: 0;
}

@media (max-width: 768px) {
	.wgl-contact-card {
		padding: 24px 20px;
	}

	/* The label sits above its value rather than in a narrow column, which
	   keeps long addresses from being squeezed. */
	.wgl-contact-list__item {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

/* ---------------------------------------------------------------
   Applications
   --------------------------------------------------------------- */

/* The breadcrumb already carries the gap under the banner. */
.wgl-section--applications {
	padding: 56px 0 64px;
}

/* The profile block below adds its own spacing, so an industry without
   profile text does not leave a void behind. */
.wgl-section--application {
	padding: 56px 0 0;
}

.wgl-section--applications-cta,
.wgl-section--application-cta {
	padding-top: 0;
}

.wgl-application-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

/*
 * Industries were seven identical icon cards, then numbered columns. The
 * number said nothing a reader needed — the industry name is the whole
 * message — so the counter is gone and the column is carried by the hairline
 * grid and by a hover that visibly moves.
 */
.wgl-application-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-height: 0;
	/*
	 * Every column keeps the same side padding. The first column used to run
	 * to the container edge, which left its copy jammed against the page
	 * margin — and against the edge of the white panel that appears on hover.
	 */
	padding: 26px 32px 30px;
	border-top: 1px solid var(--wgl-border);
	color: var(--wgl-text);
	transition:
		color 0.25s ease,
		background 0.35s ease,
		transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.35s ease;
}

.wgl-application-card:nth-child(4n + 2),
.wgl-application-card:nth-child(4n + 3),
.wgl-application-card:nth-child(4n + 4) {
	border-left: 1px solid var(--wgl-border);
}

/*
 * The hover is three moves at once, so it cannot be missed: a brand rule
 * sweeps across the top hairline, a pale brand wash fades in behind the
 * column, and the name slides. Nothing reflows and the column never leaves
 * the grid, so the list stays readable while the pointer travels.
 */
.wgl-application-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	/* Above the wash, which is painted later in the box order. */
	z-index: 1;
	height: 4px;
	background: var(--wgl-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wgl-application-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(32, 114, 177, 0.09) 0%, rgba(32, 114, 177, 0.02) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.wgl-application-card:hover::before,
.wgl-application-card:focus-visible::before {
	transform: scaleX(1);
}

.wgl-application-card:hover::after,
.wgl-application-card:focus-visible::after {
	opacity: 1;
}

/*
 * The column lifts off the hairline grid as a white panel, which is the move
 * that reads from across the room; the sweeping rule, the wash and the sliding
 * copy follow it up. `z-index` keeps the lifted panel and its shadow above the
 * neighbouring columns instead of being overlapped by them.
 */
.wgl-application-card:hover,
.wgl-application-card:focus-visible {
	z-index: 2;
	color: var(--wgl-primary);
	background: var(--wgl-card-bg);
	transform: translateY(-4px);
	box-shadow: var(--wgl-shadow-hover);
}

/* The copy and the link sit above the wash. */
.wgl-application-card__name,
.wgl-application-card__meta,
.wgl-application-card__more {
	position: relative;
	z-index: 1;
}

.wgl-application-card__name {
	font-size: 19px;
	font-weight: 600;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wgl-application-card:hover .wgl-application-card__name,
.wgl-application-card:focus-visible .wgl-application-card__name {
	transform: translateX(6px);
}

.wgl-application-card__meta {
	color: var(--wgl-text-muted);
	font-size: 14px;
}

.wgl-application-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	color: var(--wgl-primary);
	font-size: 14px;
	font-weight: 500;
}

.wgl-application-card__more svg {
	transition: transform 0.3s ease;
}

.wgl-application-card:hover .wgl-application-card__more svg,
.wgl-application-card:focus-visible .wgl-application-card__more svg {
	transform: translateX(10px);
}

/* The industry profile is operator written, so it stays a readable column. */
.wgl-application-profile {
	max-width: 80ch;
	padding-bottom: 40px;
}

.wgl-application-profile .wgl-section-head {
	margin-bottom: 18px;
}

@media (max-width: 1024px) {
	.wgl-application-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

@media (max-width: 768px) {
	.wgl-section--applications {
		padding-bottom: 40px;
	}

	/* The detail page section holds the breadcrumb only. */
	.wgl-section--application {
		padding-bottom: 0;
	}

	.wgl-application-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.wgl-application-card {
		min-height: 0;
		padding: 26px 24px;
	}

	.wgl-application-card__name {
		font-size: 19px;
	}
}

/* ---------------------------------------------------------------
   Navigation submenu
   --------------------------------------------------------------- */

.wgl-nav__group {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wgl-nav__caret {
	display: inline-flex;
	margin-left: 4px;
	color: var(--wgl-text-muted);
}

/* The right chevron becomes a caret by turning it a quarter turn. */
.wgl-nav__caret svg {
	transform: rotate(90deg);
}

.wgl-nav__submenu {
	position: absolute;
	top: 100%;
	left: 8px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	min-width: 190px;
	margin: 0;
	padding: 8px 0;
	background: var(--wgl-card-bg);
	border: 1px solid var(--wgl-border);
	border-radius: 2px;
	box-shadow: var(--wgl-shadow-hover);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.wgl-nav__group:hover .wgl-nav__submenu,
.wgl-nav__group:focus-within .wgl-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wgl-nav__submenu-link {
	display: block;
	width: 100%;
	padding: 10px 18px;
	border: 0;
	background: transparent;
	color: var(--wgl-text);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.wgl-nav__submenu-link:hover,
.wgl-nav__submenu-link:focus-visible {
	background: var(--wgl-accent);
	color: var(--wgl-primary);
}

/* ---------------------------------------------------------------
   Inquiry modal
   --------------------------------------------------------------- */

/* Keeps the page behind the dialog still while it is open. */
.wgl-modal-open,
.wgl-modal-open body {
	overflow: hidden;
}

.wgl-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.wgl-modal[hidden] {
	display: none;
}

.wgl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 58, 92, 0.55);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.wgl-modal.is-open .wgl-modal__overlay {
	opacity: 1;
}

.wgl-modal__panel {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: calc(100vh - 32px);
	padding: 26px 32px 22px;
	background: var(--wgl-card-bg);
	border-radius: 3px;
	box-shadow: 0 24px 60px rgba(14, 58, 92, 0.28);
	overflow-y: auto;
	/* Scrolling inside the dialog must not carry on into the page behind. */
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.wgl-modal.is-open .wgl-modal__panel {
	opacity: 1;
	transform: none;
}

.wgl-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wgl-text-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.wgl-modal__close:hover,
.wgl-modal__close:focus-visible {
	background: var(--wgl-accent);
	color: var(--wgl-primary);
}

.wgl-modal__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 600;
}

.wgl-modal__intro {
	max-width: 60ch;
	margin: 0 0 16px;
	color: var(--wgl-text-muted);
	font-size: 14px;
}

/* Honeypot: reachable by a bot filling every input, invisible to people. */
.wgl-inquiry-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wgl-inquiry-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 20px;
}

.wgl-inquiry-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

/* Label and its error message share one line: the message used to reserve a
   line of its own under every field, which is what made the dialog too tall
   for a laptop screen. */
.wgl-inquiry-form__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.wgl-inquiry-form__field label {
	font-size: 14px;
	font-weight: 500;
}

.wgl-inquiry-form__required {
	margin-left: 3px;
	color: #c0392b;
}

.wgl-inquiry-form__optional {
	margin-left: 4px;
	color: var(--wgl-text-muted);
	font-weight: 400;
}

.wgl-inquiry-form__field input,
.wgl-inquiry-form__field select,
.wgl-inquiry-form__field textarea {
	width: 100%;
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid var(--wgl-border);
	border-radius: 2px;
	background: var(--wgl-card-bg);
	color: var(--wgl-text);
	font-size: 15px;
}

.wgl-inquiry-form__field textarea {
	min-height: 66px;
	padding: 12px 14px;
	line-height: 1.7;
	resize: vertical;
}

/* The message field takes the full width of the same grid. */
.wgl-inquiry-form__field--wide {
	grid-column: 1 / -1;
}

.wgl-inquiry-form__field input:focus,
.wgl-inquiry-form__field select:focus {
	border-color: var(--wgl-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(32, 114, 177, 0.14);
}

.wgl-inquiry-form__error {
	color: #c0392b;
	font-size: 12px;
	font-style: normal;
	text-align: right;
}

.wgl-inquiry-form__hint {
	margin: 10px 0 0;
	color: var(--wgl-text-muted);
	font-size: 13px;
}

.wgl-inquiry-form__status {
	display: none;
	margin: 10px 0 0;
	font-size: 14px;
}

.wgl-inquiry-form__status:not(:empty) {
	display: block;
}

.wgl-inquiry-form__status.is-error {
	color: #c0392b;
}

.wgl-inquiry-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 14px;
}

.wgl-inquiry-form__actions .wgl-button[disabled] {
	opacity: 0.65;
	cursor: progress;
}

@media (max-width: 1024px) {
	/* Inside the mobile panel the submenu is a plain indented list. */
	.wgl-nav[data-open="true"] .wgl-nav__group {
		display: block;
		width: 100%;
	}

	.wgl-nav[data-open="true"] .wgl-nav__caret {
		display: none;
	}

	.wgl-nav[data-open="true"] .wgl-nav__submenu {
		position: static;
		min-width: 0;
		padding: 0 0 8px 16px;
		border: 0;
		box-shadow: none;
		background: transparent;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.wgl-nav[data-open="true"] .wgl-nav__submenu-link {
		padding: 10px 0;
		color: var(--wgl-text-muted);
	}
}

@media (max-width: 768px) {
	.wgl-modal {
		align-items: flex-start;
		padding: 12px;
	}

	.wgl-modal__panel {
		max-height: calc(100vh - 24px);
		padding: 22px 18px 18px;
	}

	.wgl-modal__title {
		font-size: 20px;
	}

	.wgl-inquiry-form__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.wgl-inquiry-form__actions .wgl-button {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */

@media (max-width: 1200px) {
	:root {
		--wgl-container: 100%;
	}

	.wgl-hero__title {
		font-size: 44px;
	}
}

@media (max-width: 1024px) {
	.wgl-nav {
		display: none;
	}

	.wgl-nav-toggle {
		display: inline-flex;
	}

	.wgl-nav[data-open="true"] {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--wgl-gutter) 20px;
		background: var(--wgl-card-bg);
		border-bottom: 1px solid var(--wgl-border);
		box-shadow: var(--wgl-shadow);
	}

	.wgl-nav[data-open="true"] .wgl-nav__link {
		justify-content: flex-start;
		box-shadow: none;
	}

	.wgl-resources {
		padding-top: 60px;
	}

	.wgl-doc-row__aside {
		gap: 16px;
	}

	.wgl-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 15px;
	}

	/* Product pages */
	.wgl-products__cards,
	.wgl-products__cards--related,
	.wgl-naming__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.wgl-product-section__title {
		font-size: 22px;
	}

	.wgl-spec-table th {
		width: 42%;
	}

	.wgl-spec-table th,
	.wgl-spec-table td {
		padding: 11px 14px;
		font-size: 13px;
	}

	.wgl-naming__body {
		padding: 24px 20px;
	}

	.wgl-naming__model {
		font-size: 17px;
	}

	.wgl-hero__title {
		font-size: 32px;
	}

	.wgl-hero--large {
		min-height: 340px;
	}

	.wgl-tabs {
		gap: 10px;
		margin-bottom: 28px;
	}

	.wgl-tabs__link {
		min-height: 44px;
		padding: 0 18px;
		font-size: 16px;
	}

	.wgl-resource-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.wgl-resource-toolbar__filters {
		margin-right: 0;
	}

	.wgl-search-form {
		width: 100%;
	}

	.wgl-doc-row {
		flex-wrap: wrap;
		gap: 14px;
		padding: 18px;
	}

	.wgl-doc-row__body {
		flex: 1 1 calc(100% - 64px);
	}

	.wgl-doc-row__aside {
		width: 100%;
		justify-content: space-between;
		padding-top: 4px;
		border-top: 1px solid var(--wgl-border);
	}

	.wgl-card {
		padding: 24px;
	}

	.wgl-footer__top {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 0 24px;
	}

}

@media (max-width: 430px) {
	.wgl-doc-row__aside {
		flex-wrap: wrap;
	}

	.wgl-download {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
   Entrance motion
   Progressive enhancement only: the hidden start state is applied
   through the `wgl-js` class the script sets on <html>, and it only
   animates opacity and transform so the content stays in the layout
   (and readable) when the script never runs.
   --------------------------------------------------------------- */

.wgl-js .wgl-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: var(--wgl-reveal-delay, 0s);
}

.wgl-js .wgl-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wgl-js .wgl-reveal,
	.wgl-js .wgl-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.wgl-carousel__slide,
	.wgl-carousel__arrow,
	.wgl-carousel__dot::before,
	.wgl-button,
	.wgl-button--arrow svg,
	.wgl-download,
	.wgl-product-card,
	.wgl-feature-card::before,
	.wgl-feature-card::after,
	.wgl-application-card,
	.wgl-application-card::before,
	.wgl-application-card::after,
	.wgl-application-card__name,
	.wgl-application-card__more svg,
	.wgl-nav__submenu,
	.wgl-modal__overlay,
	.wgl-modal__panel,
	.wgl-actions__phone-number {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Numbered grids, narrower screens

   The research points, the core capabilities, the industry entries and
   the home page application entries are all numbered columns separated by
   hairlines. Two columns keeps the separators meaningful on a tablet; one
   column moves the rule from the left edge to the top edge, which is what
   the base styles already draw.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wgl-capability-grid,
	.wgl-culture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wgl-industry-list__item {
		font-size: 20px;
	}
}

@media (max-width: 768px) {
	.wgl-capability,
	.wgl-capability + .wgl-capability,
	.wgl-culture__item,
	.wgl-culture__item + .wgl-culture__item,
	.wgl-application-card,
	.wgl-application-card:nth-child(4n + 2),
	.wgl-application-card:nth-child(4n + 3),
	.wgl-application-card:nth-child(4n + 4) {
		padding-left: 0;
		border-left: 0;
	}

	.wgl-band-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		margin-bottom: 26px;
	}

	.wgl-industry-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.wgl-industry-list__item {
		padding: 16px 0;
		font-size: 19px;
	}
}