/* ==========================================================================
   AlaEnergies
   Palette is derived from the company logo (orange chevron over a blue-to-green
   swoosh), not from the internal platform theme.
   ========================================================================== */

:root {
	/* Brand, taken from the mark */
	--flame:        #EE7326;
	/* Darker than the logo orange on purpose: this is the colour used for small
	   text (eyebrows, prose links), and the brand orange only reaches 3.4:1 on
	   the paper ground. This clears 4.5:1. */
	--flame-deep:   #B14E14;
	--amber:        #F6A81F;
	--leaf:         #4E9E42;
	--tide:         #2C7BC0;

	/* Ground */
	--ink:          #0E211F;
	--ink-2:        #16302C;
	--ink-3:        #1F413B;
	--paper:        #F1F2EE;
	--paper-2:      #E7E9E3;
	--card:         #FBFBF8;
	--rule:         #D3D8D0;
	--rule-soft:    #E1E5DE;
	--text:         #17231F;
	--muted:        #5C6B64;
	--muted-light:  #9FB0A8;

	/* Type */
	--display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
	--mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	/* The wordmark had its own rounded face; that was a whole extra font
	   download for eight letters. It uses the display face until the real
	   logo artwork is uploaded, at which point this is moot. */
	--round:   var(--display);

	--shell:   1180px;
	--gutter:  clamp(1.25rem, 4vw, 2.5rem);
	--section: clamp(4rem, 9vw, 7.5rem);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

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

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: .75rem 1.25rem;
	z-index: 999;
	font-family: var(--mono);
	font-size: .8rem;
}
.skip:focus { left: 0; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --------------------------------------------------------------- type ---- */

.eyebrow {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--flame-deep);
	margin: 0 0 1.5rem;
}
.eyebrow--light { color: var(--amber); }

.hero__title,
.section__title,
.page__title,
.cta__title {
	font-family: var(--display);
	font-variation-settings: 'wdth' 112;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: .98;
	text-wrap: balance;
	margin: 0;
}

.hero__title { font-size: clamp(2.2rem, 5.1vw, 4.15rem); line-height: .96; }
.section__title { font-size: clamp(1.85rem, 3.6vw, 3rem); }
.page__title { font-size: clamp(2.1rem, 5vw, 3.9rem); }
.cta__title { font-size: clamp(1.9rem, 4vw, 3.2rem); }

/* ----------------------------------------------------------- masthead ---- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--rule-soft);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 74px;
}

.masthead__logo { text-decoration: none; display: inline-flex; }

.lockup { display: inline-flex; align-items: center; gap: .6rem; }
.lockup__mark { width: 42px; height: 34px; display: block; }
.lockup__word {
	font-family: var(--round);
	font-variation-settings: 'wdth' 100;
	font-weight: 800;
	font-size: 1.26rem;
	letter-spacing: -.03em;
	line-height: 1;
}
.lockup__ala { color: var(--flame); }
.lockup__energies { color: var(--leaf); }

.lockup--footer .lockup__mark { width: 48px; height: 38px; }
.lockup--footer .lockup__word { font-size: 1.45rem; }
.lockup--footer .lockup__energies { color: #7FC55E; }

.masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.navlist {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.navlist__item > a {
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .005em;
	text-decoration: none;
	color: var(--text);
	padding: .35rem 0;
	border-bottom: 2px solid transparent;
	transition: border-color .18s var(--ease), color .18s var(--ease);
	white-space: nowrap;
}
.navlist__item > a:hover { color: var(--flame-deep); border-bottom-color: var(--flame); }
.navlist .current-menu-item > a { border-bottom-color: var(--flame); }

.navlist__item { position: relative; }

.navlist__trigger {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: .35rem 0;
	cursor: pointer;
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: .92rem;
	color: var(--text);
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.navlist__trigger:hover { color: var(--flame-deep); border-bottom-color: var(--flame); }
.navlist__trigger[aria-expanded="true"] { color: var(--flame-deep); border-bottom-color: var(--flame); }

.navlist__chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.navlist__trigger[aria-expanded="true"] .navlist__chev { transform: rotate(180deg); }

.dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	width: min(30rem, 88vw);
	background: var(--card);
	border: 1px solid var(--rule);
	border-radius: 10px;
	box-shadow: 0 26px 60px -30px rgba(14,33,31,.55), 0 2px 8px -4px rgba(14,33,31,.2);
	padding: .6rem;
	z-index: 120;
}
.dropdown[hidden] { display: none; }

/* little pointer up to the trigger */
.dropdown::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: var(--card);
	border-left: 1px solid var(--rule);
	border-top: 1px solid var(--rule);
	transform: rotate(45deg);
}

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

.dropdown__link {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: .7rem .75rem;
	border-radius: 7px;
	text-decoration: none;
	transition: background .16s var(--ease);
}
.dropdown__link:hover { background: var(--paper-2); }

.dropdown__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(238,115,38,.12);
	color: var(--flame-deep);
}
.dropdown__icon .icon { width: 19px; height: 19px; }

.dropdown__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.dropdown__label {
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 650;
	font-size: .95rem;
	color: var(--text);
	line-height: 1.25;
}
.dropdown__desc { font-size: .84rem; color: var(--muted); line-height: 1.4; }

.dropdown__all {
	display: block;
	margin-top: .35rem;
	padding: .7rem .75rem .45rem;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--flame-deep);
	text-decoration: none;
}
.dropdown__all:hover { color: var(--flame); }

/* ------------------------------------------------------ language picker -- */

.langpicker { position: relative; }

.langpicker__trigger {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: .34rem .6rem .34rem .5rem;
	cursor: pointer;
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: .82rem;
	color: var(--text);
	transition: border-color .18s var(--ease), color .18s var(--ease);
}
.langpicker__trigger:hover,
.langpicker__trigger[aria-expanded="true"] { border-color: var(--flame); color: var(--flame-deep); }
.langpicker__trigger .navlist__chev { width: 13px; height: 13px; }

.langpicker__code { letter-spacing: .04em; }

.flag {
	width: 21px;
	height: 14px;
	border-radius: 2px;
	flex: 0 0 auto;
	display: block;
	/* the pale edge of a flag needs a boundary against a pale header */
	box-shadow: 0 0 0 1px rgba(14,33,31,.16);
}

.dropdown--lang {
	width: 15rem;
	left: auto;
	right: 0;
	transform: none;
}
.dropdown--lang::before { left: auto; right: 26px; }

.dropdown__heading {
	font-family: var(--mono);
	font-size: .66rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: .35rem .75rem .5rem;
}

.langpicker__option {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .6rem .75rem;
	border-radius: 7px;
	text-decoration: none;
	transition: background .16s var(--ease);
}
.langpicker__option:hover { background: var(--paper-2); }

.langpicker__name {
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: .95rem;
	color: var(--text);
	flex: 1 1 auto;
}
.langpicker__option.is-current .langpicker__name { color: var(--flame-deep); }
.langpicker__tick { width: 16px; height: 16px; color: var(--flame); flex: 0 0 auto; }

.masthead__toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	background: none;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: .45rem .9rem;
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text);
	cursor: pointer;
}
.masthead__toggle-bars { display: grid; gap: 3px; }
.masthead__toggle-bars i { display: block; width: 16px; height: 2px; background: var(--text); }

/* --------------------------------------------------------------- btns ---- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--flame);
	/* Ink, not white. White on the brand orange measures 2.95:1 and fails AA;
	   ink on the same orange is 5.67:1, so the logo colour survives and the
	   label is legible. */
	color: var(--ink);
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .005em;
	text-decoration: none;
	padding: .85rem 1.5rem;
	border: 1px solid var(--flame);
	border-radius: 999px;
	transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
/* Hover darkens only as far as ink still clears 4.5:1 against it. */
.btn:hover { background: #E0651C; border-color: #E0651C; transform: translateY(-1px); }
.btn--sm { padding: .55rem 1.1rem; font-size: .87rem; }
.btn--light { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn--light:hover { background: #FFBB3C; border-color: #FFBB3C; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.link-arrow {
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	color: var(--text);
	border-bottom: 2px solid var(--rule);
	padding-bottom: 2px;
	transition: border-color .18s var(--ease), color .18s var(--ease);
}
.link-arrow::after { content: ' \2192'; }
.link-arrow:hover { color: var(--flame-deep); border-bottom-color: var(--flame); }

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

.hero--image {
	position: relative;
	isolation: isolate;
	color: #fff;
	min-height: clamp(28rem, 62vh, 40rem);
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 7vw, 5rem);
}

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The headline has to stay legible whatever the photograph is doing behind it. */
.hero--image::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(8,20,18,.94) 0%, rgba(8,20,18,.78) 38%, rgba(8,20,18,.42) 70%, rgba(8,20,18,.30) 100%);
}

.hero__inner { width: 100%; }
.hero__title { color: #fff; max-width: 17ch; }
.hero__lead { max-width: 46rem; margin-top: 1.5rem; }
.hero__lead p { margin: 0; font-size: clamp(1.06rem, 1.3vw, 1.22rem); line-height: 1.6; color: #D8E4DD; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }

.section--flow { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--paper-2); }

/* --------------------------------------------------------------- flow ---- */

.flow { display: block; width: 100%; max-width: 1080px; height: auto; margin-inline: auto; }

.flow__ground { stroke: var(--rule); stroke-width: 1.25; }
.flow__water  { fill: none; stroke: var(--tide); stroke-width: 1.5; opacity: .5; }

/* Base: every part of the drawing is line work on a light fill. */
.flow__stage path,
.flow__stage rect,
.flow__stage line,
.flow__stage circle {
	fill: none;
	stroke: var(--muted);
	stroke-width: 1.9;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Secondary detail sits back so the silhouettes stay readable. */
.flow__detail { stroke-width: 1.2 !important; opacity: .75; }

.flow__hull      { fill: rgba(44,123,192,.08) !important; stroke: var(--tide) !important; }
.flow__tank      { fill: rgba(238,115,38,.08) !important; stroke: var(--flame) !important; }
.flow__tank-roof { stroke: var(--flame) !important; }
.flow__tank-band { stroke: var(--flame) !important; stroke-width: 1 !important; opacity: .45; }

.flow__lpg       { fill: rgba(78,158,66,.09) !important; stroke: var(--leaf) !important; }
.flow__lpg-seam  { stroke: var(--leaf) !important; stroke-width: 1 !important; opacity: .5; }
.flow__lpg-leg   { stroke: var(--leaf) !important; stroke-width: 1.5 !important; }

.flow__cab,
.flow__trailer   { fill: rgba(246,168,31,.12) !important; stroke: #B07C10 !important; }
.flow__wheel     { fill: var(--paper) !important; stroke: var(--muted) !important; stroke-width: 1.7 !important; }
.flow__hub       { fill: var(--muted); stroke: none; }

.flow__canopy    { fill: rgba(238,115,38,.14) !important; stroke: var(--flame) !important; }
.flow__pump      { fill: rgba(238,115,38,.08) !important; stroke: var(--flame) !important; }
.flow__cylinder  { fill: rgba(78,158,66,.11) !important; stroke: var(--leaf) !important; }

.flow__arrows path { fill: none; stroke: var(--tide); stroke-width: 1.6; }
.flow__arrows .flow__head { fill: var(--tide); stroke: none; }

.flow__labels text {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .18em;
	fill: var(--text);
}
.flow__labels .flow__sub {
	font-size: 11px;
	letter-spacing: .14em;
	fill: var(--muted);
}

.flow__caption {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
	margin: 1rem 0 0;
}

/* ----------------------------------------------------------- sections ---- */

.section { padding-block: var(--section); }
/* The masthead is sticky, so anchored sections must stop clear of it. */
.section[id], .prose .heading { scroll-margin-top: 6rem; }
.section--rule { border-top: 1px solid var(--rule); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); }

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__intro { margin-top: 1.5rem; }
.section__intro p { margin: 0 0 1rem; font-size: clamp(1.04rem, 1.2vw, 1.16rem); color: var(--muted); }
.section__intro--light p { color: #A8BEB4; }

.section__more { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }

/* ------------------------------------------------------- who we serve ---- */

.segments__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.segments__title {
	font-family: var(--display);
	font-variation-settings: 'wdth' 106;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0;
}

.segments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.segments__item {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: clamp(1.35rem, 2.4vw, 1.85rem) clamp(.9rem, 1.6vw, 1.35rem);
	border-left: 1px solid var(--rule-soft);
}
.segments__item:first-child { border-left: 0; }

.segments__icon { color: var(--flame-deep); line-height: 0; }
.segments__icon .icon { width: 27px; height: 27px; }

.segments__label {
	font-family: var(--display);
	font-variation-settings: 'wdth' 100;
	font-weight: 600;
	font-size: clamp(.88rem, .95vw, .97rem);
	line-height: 1.35;
	text-wrap: pretty;
}

/* -------------------------------------------------------------- cards ---- */

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 1.9rem);
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--rule-soft);
	border-radius: 6px;
	overflow: hidden;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -22px rgba(14,33,31,.55); border-color: var(--rule); }

.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.card:hover .card__img { transform: scale(1.04); }

.card__body { padding: clamp(1.15rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: .7rem; }

.card__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--display);
	font-variation-settings: 'wdth' 104;
	font-weight: 700;
	font-size: 1.14rem;
	letter-spacing: -.012em;
	line-height: 1.2;
	margin: 0;
}
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--flame-deep); }

.card__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(238,115,38,.12);
	color: var(--flame-deep);
}
.card__icon .icon { width: 18px; height: 18px; }

.card__text p { margin: 0; font-size: .97rem; color: var(--muted); line-height: 1.62; }

/* on the dark band */
.card--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.card--dark:hover { border-color: rgba(255,255,255,.28); box-shadow: 0 14px 34px -20px rgba(0,0,0,.7); }
.card--dark .card__title { color: #fff; }
.card--dark .card__title a:hover { color: var(--amber); }
.card--dark .card__text p { color: #A8BEB4; }
.card--dark .card__icon { background: rgba(246,168,31,.16); color: var(--amber); }
.card--dark .card__media { background: var(--ink-2); }

.link-arrow--light { color: #E4EDE7; border-bottom-color: rgba(255,255,255,.3); }
.link-arrow--light:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* ----------------------------------------------------------- the site ---- */

.section--dark {
	background: var(--ink);
	color: #E4EDE7;
}
.section--dark .section__title { color: #fff; }




/* ---------------------------------------------------------- key facts ---- */

.section--facts { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); }

.facts {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.facts__item { display: flex; flex-direction: column; gap: .3rem; }
.facts__label {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}
.facts__value {
	margin: 0;
	font-family: var(--display);
	font-variation-settings: 'wdth' 104;
	font-weight: 700;
	font-size: clamp(1.02rem, 1.4vw, 1.24rem);
	letter-spacing: -.015em;
	line-height: 1.25;
	text-wrap: pretty;
}

/* Registration and licence detail, shown only once it exists. */
.footer__registry {
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	font-family: var(--mono);
	font-size: .76rem;
	line-height: 1.7;
	color: #8CA89B;
}

/* The stock set was shot in different light; a shared grade makes the grid
   read as one system until real photography replaces it. */
.card__img, .standards__img {
	filter: saturate(.92) contrast(1.04) brightness(1.01);
}
.hero__img { filter: saturate(.95) contrast(1.03); }

/* ---------------------------------------------------------- standards ---- */

.standards {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.standards__body { margin-top: 1.75rem; }
.standards__side { display: flex; flex-direction: column; gap: clamp(1.25rem, 2vw, 1.75rem); }
.standards__figure { margin: 0; border-radius: 6px; overflow: hidden; }
.standards__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.standards__head-icon { display: inline-grid; place-items: center; vertical-align: -.35em; color: var(--leaf); }
.standards__head-icon .icon { width: 17px; height: 17px; }
.standards__body p { margin: 0 0 1.25rem; color: var(--muted); }

/* The regulatory bodies used to be listed by name here. A visitor does not
   need the roll call - they need to know the operation is licensed. */
.assurance {
	background: var(--card);
	border: 1px solid var(--rule-soft);
	border-top: 3px solid var(--leaf);
	border-radius: 6px;
	padding: clamp(1.35rem, 2.4vw, 1.9rem);
}
.assurance__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(78,158,66,.13);
	color: #35702C;
	margin-bottom: 1rem;
}
.assurance__icon .icon { width: 22px; height: 22px; }

.assurance__title {
	font-family: var(--display);
	font-variation-settings: 'wdth' 104;
	font-weight: 700;
	font-size: 1.16rem;
	letter-spacing: -.015em;
	margin: 0 0 .7rem;
}
.assurance__body p { margin: 0 0 .8rem; font-size: .97rem; line-height: 1.65; color: var(--muted); }
.assurance__body p:last-child { margin-bottom: 0; }
.assurance__note {
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--mono);
	font-size: .76rem;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--muted);
}


/* ---------------------------------------------------------------- cta ---- */

.cta {
	background: var(--ink);
	color: #E4EDE7;
	text-align: center;
}
.cta__inner { max-width: 46rem; margin-inline: auto; }
.cta__title { color: #fff; }
.cta__body { margin: 1.5rem 0 2.25rem; }
.cta__body p { margin: 0 0 1rem; color: #A8BEB4; font-size: clamp(1.02rem, 1.15vw, 1.14rem); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------------------------------------------------- interior pages ---- */

.page__head {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
	border-bottom: 1px solid var(--rule);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.page__standfirst {
	font-size: clamp(1.12rem, 1.6vw, 1.4rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 44rem;
	margin: 1.5rem 0 0;
}
.page--404 { padding-bottom: var(--section); }

.prose { max-width: 44rem; padding-bottom: var(--section); }
/* A panel follows the copy on this page, so the full section gap doubles up. */
.page--has-panel .prose { padding-bottom: clamp(2rem, 4vw, 3rem); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.4rem; }
.prose h2 {
	font-family: var(--display);
	font-variation-settings: 'wdth' 106;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 3rem 0 1.1rem;
}
/* Section headings on the long pages carry the same icon as the menu entry
   that links to them, so a reader arriving from the dropdown lands somewhere
   recognisable. */
.prose .heading {
	display: flex;
	align-items: center;
	gap: .75rem;
	scroll-margin-top: 6rem;
}
.heading__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(238,115,38,.12);
	color: var(--flame-deep);
}
.heading__icon .icon { width: 22px; height: 22px; }
.heading__text { min-width: 0; }

.prose h3 {
	font-family: var(--display);
	font-variation-settings: 'wdth' 104;
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: -.01em;
	margin: 2.25rem 0 .75rem;
}
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .55rem; }
.prose a { color: var(--flame-deep); text-underline-offset: 3px; }
.prose blockquote {
	margin: 2rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 3px solid var(--flame);
	font-size: 1.15rem;
	color: var(--muted);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }


/* ------------------------------------------------------- enquiry form ---- */

.enquiry {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.enquiry__intro p { color: var(--muted); margin: 0 0 1rem; }
.enquiry__intro .section__title { margin-bottom: 1.25rem; }
.enquiry__promise {
	font-family: var(--mono);
	font-size: .78rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--flame-deep) !important;
	border-top: 1px solid var(--rule);
	padding-top: 1rem;
	margin-top: 1.5rem !important;
}

.form {
	background: var(--card);
	border: 1px solid var(--rule-soft);
	border-radius: 6px;
	padding: clamp(1.35rem, 2.5vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}
.field__req { color: var(--flame-deep); }

.field__input {
	font-family: var(--body);
	font-size: 1rem;
	color: var(--text);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: .7rem .8rem;
	width: 100%;
	transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field__input:focus {
	outline: none;
	border-color: var(--flame);
	box-shadow: 0 0 0 3px var(--brand-ring, rgba(238,115,38,.18));
}
.field__input--area { resize: vertical; min-height: 8rem; line-height: 1.6; }
.field__input::placeholder { color: var(--muted-light); }

.field__note { margin: 0; font-size: .87rem; color: var(--muted); }

/* Off-screen rather than display:none, so bots that skip hidden fields still
   see it as fillable. */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form__submit { align-self: flex-start; }
.form__submit[disabled] { opacity: .6; cursor: default; }

.form__status {
	font-size: .95rem;
	line-height: 1.55;
	padding: .8rem 1rem;
	border-radius: 4px;
	border-left: 3px solid var(--rule);
}
.form__status--ok   { background: rgba(78,158,66,.1);  border-left-color: var(--leaf);  color: #2F6A28; }
.form__status--bad  { background: rgba(176,52,28,.09); border-left-color: #B0341C;      color: #8E2B16; }
.form__status--busy { background: var(--paper-2);      border-left-color: var(--muted); color: var(--muted); }

.form__fallback { margin: 0; font-size: .9rem; color: var(--muted); }
.form__fallback a { color: var(--flame-deep); }

/* ------------------------------------------------------------ contact ---- */

.contact {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.contact__card {
	background: var(--card);
	border: 1px solid var(--rule-soft);
	border-radius: 4px;
	padding: clamp(1.5rem, 2.4vw, 2rem);
}
.contact__head {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1.1rem;
}
.contact__primary { margin: 0 0 1rem; font-size: 1.12rem; }
.contact__primary a { color: var(--flame-deep); text-underline-offset: 3px; }
.contact__list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.contact__list li { margin-bottom: .4rem; font-family: var(--mono); font-size: .95rem; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { color: var(--flame-deep); }
.contact__address { font-style: normal; line-height: 1.7; margin: 0 0 1rem; text-wrap: pretty; }
.contact__hint { margin: 0; font-size: .93rem; color: var(--muted); }

/* ------------------------------------------------------------- footer ---- */

.footer {
	background: var(--ink);
	color: #A8BEB4;
	padding-top: clamp(3rem, 6vw, 4.5rem);
	margin-top: 0;
}
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__legal {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #CFE0D6;
	margin: 1.25rem 0 .5rem;
}
.footer__note { margin: 0; font-size: .88rem; color: #8CA89B; max-width: 22rem; }
.footer__head {
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #8CA89B;
	margin: 0 0 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .55rem; }
.footer__list a {
	text-decoration: none;
	font-size: .95rem;
	border-bottom: 1px solid transparent;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.footer__list a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.footer__address { font-style: normal; font-size: .95rem; line-height: 1.7; margin: 0; text-wrap: pretty; }

.footer__base {
	border-top: 1px solid rgba(255,255,255,.09);
	padding-block: 1.5rem 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 2rem;
}
.footer__base p { margin: 0; font-size: .82rem; color: #8CA89B; }
.footer__disclaimer { max-width: 34rem; }

/* --------------------------------------------------------- animation ---- */

.draw { stroke-dashoffset: 0; }

.js .flow .draw {
	stroke-dasharray: var(--len) var(--len);
	stroke-dashoffset: var(--len);
}
.js .flow.is-drawn .draw {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.5s var(--ease) var(--delay, 0s);
}
.js .flow .flow__labels,
.js .flow .flow__arrows .flow__head,
.js .flow .flow__ground {
	opacity: 0;
	transition: opacity .7s var(--ease) 1.1s;
}
.js .flow.is-drawn .flow__labels,
.js .flow.is-drawn .flow__arrows .flow__head,
.js .flow.is-drawn .flow__ground { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.js .flow .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
	.js .flow .flow__labels,
	.js .flow .flow__arrows .flow__head,
	.js .flow .flow__ground { opacity: 1; }
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1000px) {
	.cards, .cards--three { grid-template-columns: repeat(2, 1fr); }
	.segments { grid-template-columns: repeat(3, 1fr); }
	.facts { grid-template-columns: repeat(2, 1fr); }
	.segments__item:nth-child(3n + 1) { border-left: 0; }
	.segments__item:nth-child(n + 4) { border-top: 1px solid var(--rule-soft); }
	.standards { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.hero__top { grid-template-columns: 1fr; align-items: start; }
	.contact { grid-template-columns: 1fr; }
	.enquiry { grid-template-columns: 1fr; }
	.form__row { grid-template-columns: 1fr; }

	.masthead__toggle { display: inline-flex; }
	.masthead__inner { flex-wrap: wrap; }
	.masthead__nav {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: .25rem;
		width: 100%;
		padding-bottom: 1.25rem;
	}
	.masthead__nav.is-open { display: flex; }
	.navlist { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
	.navlist > .navlist__item { width: 100%; border-top: 1px solid var(--rule-soft); }
	.navlist__item > a { display: block; padding: .85rem 0; border-bottom: 0; font-size: 1rem; }
	.masthead__cta { margin-top: .85rem; align-self: flex-start; }
	.langpicker { width: 100%; margin-top: .85rem; }
	.langpicker__trigger { width: 100%; justify-content: flex-start; padding: .7rem 0; border: 0; font-size: 1rem; }
	.langpicker__trigger .navlist__chev { margin-left: auto; }
	.dropdown--lang { width: 100%; right: auto; }

	.navlist__item { width: 100%; }
	.navlist__trigger {
		width: 100%;
		justify-content: space-between;
		padding: .85rem 0;
		font-size: 1rem;
		border-bottom: 0;
	}
	.dropdown {
		position: static;
		transform: none;
		width: 100%;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--rule);
		border-radius: 0;
		padding: 0 0 .5rem .5rem;
		margin-bottom: .5rem;
		background: transparent;
	}
	.dropdown::before { display: none; }
	.dropdown__link { padding: .6rem .25rem; }
	.dropdown__all { padding-left: .25rem; }
}

/* The plan and locator scale with the viewport, so their SVG type has to grow
   in user units or it lands at roughly 6px on a phone. */
@media (max-width: 720px) {
	/* Scaled to the full width of a phone the diagram is a 98px strip with
	   6px labels. It keeps a usable minimum width and scrolls inside its own
	   container instead - the page itself never scrolls sideways. */
	.flow__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
	.flow { min-width: 680px; }
	.flow__labels text { font-size: 26px; letter-spacing: .1em; }
	.flow__labels .flow__sub { font-size: 20px; }
}

@media (max-width: 560px) {
	.cards, .cards--three { grid-template-columns: 1fr; }
	.segments { grid-template-columns: repeat(2, 1fr); }
	.facts { grid-template-columns: 1fr; }
	.segments__item:nth-child(n) { border-left: 1px solid var(--rule-soft); border-top: 1px solid var(--rule-soft); }
	.segments__item:nth-child(odd) { border-left: 0; }
	.segments__item:nth-child(-n + 2) { border-top: 0; }
	.footer__grid { grid-template-columns: 1fr; }
	.flow__caption { text-align: left; }
}

@media print {
	.masthead, .cta, .skip { display: none; }
	body { background: #fff; }
}