/* =========================================================================
   Sector page — template-sector.php (the four pages under /sectors/).
   Scoped to .sn — mobile-first, min-width media queries only.
   Tokens mirror home.css / sectors.css (Billi Brand Book 2026).
   ========================================================================= */

.sn {
	/* Billi Brand Book 2026 palette */
	--sn-navy: #181d46;      /* Billi Blue — signature colour */
	--sn-lightblue: #90cdeb; /* button hover state */
	--sn-cta-blue: #90cdeb;  /* button on dark media, as on the homepage cards */
	--sn-cta-blue-dk: #ffffff;
	--sn-grey: #eaeaea;      /* primary grey — borders, rules */
	--sn-band-grey: #f5f5f5;
	--sn-band-blue: #f1f5f5; /* Green Grey */
	--sn-text: #000;
	--sn-muted: #75757b;
	--sn-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--sn-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.sn { --sn-gutter: 40px; }
}

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

.sn img { max-width: 100%; height: auto; display: block; }

.sn-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--sn-gutter);
	padding-right: var(--sn-gutter);
}

/* WYSIWYG output: neutralise whatever tags the admin used so headings /
   paragraphs inherit the wrapper's type styles. */
.sn [class*='__heading'] :is(h1, h2, h3, h4, p),
.sn [class*='__title'] :is(h1, h2, h3, h4, p),
.sn .sn-section-heading :is(h1, h2, h3, h4, p),
.sn .sn-section-intro :is(h1, h2, h3, h4, p) {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.sn [class*='__text'] p,
.sn [class*='__intro'] p { margin: 0 0 0.6em; }

.sn [class*='__text'] p:last-child,
.sn [class*='__intro'] p:last-child { margin-bottom: 0; }

.sn a:focus-visible,
.sn summary:focus-visible {
	outline: 2px solid var(--sn-navy);
	outline-offset: 2px;
}

/* The theme sets a global `a { font-weight: 600 }` and fades links on hover.
   Card-sized links here wrap whole blocks of body copy, so both have to be
   neutralised — the elements inside set their own weight, and the cards have
   their own hover treatment. */
.sn .sn-system__link,
.sn .sn-case__link,
.sn a.sn-resource { font-weight: 400; }

.sn .sn-system__link:hover,
.sn .sn-case__link:hover,
.sn a.sn-resource:hover,
.sn .sn-hero__eyebrow a:hover { opacity: 1; }

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

/* Brand buttons: 2px corners (sharper-corner direction, Aug 2026), 16px Regular. */
.sn .sn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover. */
.sn .sn-btn:hover { opacity: 1; }

/* --sn-blue is the same hex as navy, so the hover inverts rather than
   darkening, matching the homepage. */
.sn .sn-btn--blue { background: var(--sn-navy); color: #fff; }
.sn .sn-btn--blue:hover { background: #fff; color: var(--sn-navy); box-shadow: inset 0 0 0 1px var(--sn-navy); }

.sn .sn-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.sn .sn-btn--ghost:hover {
	background: #fff;
	color: var(--sn-navy);
	box-shadow: inset 0 0 0 1px #fff;
}

/* ---- Shared section scaffolding ----------------------------------------- */

.sn-section-heading {
	color: var(--sn-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 16px;
}

.sn-section-intro {
	font-size: 16px;
	line-height: 1.5;
	max-width: 720px;
	margin-bottom: 28px;
}

/* When no intro follows, the heading owns the gap to the grid below. */
.sn-section-heading:last-child { margin-bottom: 28px; }

@media (min-width: 900px) {
	.sn-section-heading { font-size: 32px; margin-bottom: 18px; }
	.sn-section-heading:last-child { margin-bottom: 40px; }
	.sn-section-intro { font-size: 17px; margin-bottom: 40px; }
}

/* ---- Icons --------------------------------------------------------------- */

.sn-icon { width: 24px; height: 24px; display: block; }

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

/* Content is centred in the band, with the copy inside left-aligned: the
   overlay is solid at the left edge, so indenting the text would drop it
   onto the exposed image. Inner padding is symmetric so the centring holds
   rather than being pulled off by an uneven top/bottom. */
.sn-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 420px;
	background: var(--sn-navy);
	overflow: hidden;
}

.sn-hero__media,
.sn-hero__media img,
.sn-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sn-hero__media { z-index: -2; }

/* Billi Blue wash: solid at the left so copy always clears the image,
   fading out to the right. Mirrors the homepage solution cards. */
.sn-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(24, 29, 70, 0.35) 0%, rgba(24, 29, 70, 0.85) 100%),
		linear-gradient(90deg, rgba(24, 29, 70, 0.9) 0%, rgba(24, 29, 70, 0.55) 55%, rgba(24, 29, 70, 0.3) 100%);
}

.sn-hero__inner {
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.sn-hero__content { max-width: 720px; color: #fff; }

.sn-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sn-hero__eyebrow a {
	color: var(--sn-lightblue);
	text-decoration: none;
}

.sn-hero__eyebrow a:hover { color: #fff; }

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 700 this rule
   carried from the DIN era made browsers synthesise one. */
.sn-hero__heading {
	margin: 0;
	color: #fff;
	font-size: 34px;
	line-height: 1.1;
}

.sn-hero__intro {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.5;
}

.sn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* On the hero the navy pill would sink into the overlay — use the brighter
   CTA blue, as the homepage solution cards do. */
.sn-hero .sn-btn--blue { background: var(--sn-cta-blue); color: var(--sn-navy); }
.sn-hero .sn-btn--blue:hover { background: var(--sn-cta-blue-dk); color: var(--sn-navy); box-shadow: none; }

@media (min-width: 768px) {
	.sn-hero { min-height: 480px; }
	.sn-hero__inner { padding-top: 64px; padding-bottom: 64px; }
	.sn-hero__heading { font-size: 46px; }
}

@media (min-width: 1100px) {
	.sn-hero { min-height: 540px; }
	.sn-hero__heading { font-size: 56px; }
	.sn-hero__intro { font-size: 18px; max-width: 620px; }
}

/* ---- Why Billi ----------------------------------------------------------- */

.sn-why { padding: 48px 0; }

.sn-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.sn-why__card {
	background: var(--sn-band-blue);
	border-radius: 4px;
	padding: 24px 22px;
}

.sn-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border-radius: 2px;
	background: var(--sn-lightblue);
	color: var(--sn-navy);
}

.sn-why__title {
	color: var(--sn-navy);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 8px;
}

.sn-why__text {
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 600px) {
	.sn-why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sn-why { padding: 80px 0; }
	.sn-why__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.sn-why__card { padding: 28px 26px; }
}

/* ---- Recommended systems -------------------------------------------------- */

.sn-systems {
	background: var(--sn-band-grey);
	padding: 48px 0;
}

.sn-systems__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sn-system {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
}

.sn-system__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.sn-system__media {
	aspect-ratio: 4 / 3;
	background: #fff;
	padding: 16px;
	overflow: hidden;
}

/* Double class: the .sn img { height:auto } reset above beats a single
   class selector, so the fitted sizing needs the extra specificity.
   Product shots are cut-outs on white — `contain` keeps the whole tap in
   frame, where `cover` would crop the spout and the base off. */
.sn .sn-system__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.4s ease;
}

.sn-system__link:hover .sn-system__img { transform: scale(1.03); }

.sn-system__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}

.sn-system__capacity {
	margin: 0;
	color: var(--sn-navy);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Environment leads — the roadmap is explicit that model names mean
   nothing to buyers, so the model sits beneath in muted small type. */
.sn-system__environment {
	margin: 8px 0 0;
	color: var(--sn-navy);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}

.sn-system__model {
	margin: 6px 0 0;
	color: var(--sn-muted);
	font-size: 15px;
}

.sn-system__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
}

.sn-system__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--sn-navy);
	font-size: 16px;
	font-weight: 600;
}

.sn-system__cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sn-system__link:hover .sn-system__cta { text-decoration: underline; }

@media (min-width: 700px) {
	.sn-systems__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sn-systems { padding: 80px 0; }
	.sn-systems__grid { grid-template-columns: repeat(3, 1fr); }
	.sn-system__body { padding: 26px; }
}

/* ---- Sector resources ------------------------------------------------------ */

.sn-resources { padding: 48px 0; }

.sn-resources__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.sn-resource {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--sn-grey);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.sn-resource:hover {
	border-color: var(--sn-navy);
	background: var(--sn-band-blue);
}

.sn-resource__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 2px;
	background: var(--sn-band-blue);
	color: var(--sn-navy);
}

a.sn-resource:hover .sn-resource__icon { background: #fff; }

.sn-resource__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.sn-resource__title {
	color: var(--sn-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.sn-resource__text {
	color: var(--sn-muted);
	font-size: 15px;
	line-height: 1.4;
}

.sn-resource__chevron {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--sn-navy);
	transition: transform 0.2s ease;
}

a.sn-resource:hover .sn-resource__chevron { transform: translateX(3px); }

@media (min-width: 700px) {
	.sn-resources__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sn-resources { padding: 80px 0; }
	.sn-resources__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---- Proof / case studies --------------------------------------------------- */

.sn-cases {
	background: var(--sn-band-blue);
	padding: 48px 0;
}

.sn-cases__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sn-case {
	background: #fff;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
}

.sn-case__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.sn-case__media {
	aspect-ratio: 16 / 10;
	background: var(--sn-band-grey);
	overflow: hidden;
}

.sn .sn-case__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sn-case__link:hover .sn-case__img { transform: scale(1.03); }

.sn-case__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}

.sn-case__client {
	margin: 0;
	color: var(--sn-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.sn-case__descriptor {
	margin: 6px 0 0;
	color: var(--sn-muted);
	font-size: 15px;
}

.sn-case__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.5;
}

.sn-case__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--sn-navy);
	font-size: 16px;
	font-weight: 600;
}

.sn-case__cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sn-case__link:hover .sn-case__cta { text-decoration: underline; }

@media (min-width: 700px) {
	.sn-cases__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.sn-cases { padding: 80px 0; }
	.sn-cases__grid { grid-template-columns: repeat(3, 1fr); }
	.sn-case__body { padding: 26px; }
}

/* ---- FAQs ------------------------------------------------------------------- */

.sn-faqs { padding: 48px 0; }

.sn-faqs__list { border-top: 1px solid var(--sn-grey); }

.sn-faq { border-bottom: 1px solid var(--sn-grey); }

.sn-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 2px;
	color: var(--sn-navy);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

.sn-faq__q::-webkit-details-marker { display: none; }

.sn-faq__icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--sn-navy);
	transition: transform 0.2s ease;
}

.sn-faq[open] .sn-faq__icon { transform: rotate(45deg); }

.sn-faq__a {
	padding: 0 2px 20px;
	font-size: 16px;
	line-height: 1.5;
	max-width: 860px;
}

@media (min-width: 900px) {
	.sn-faqs { padding: 80px 0; }
	.sn-faq__q { font-size: 19px; padding: 22px 2px; }
	.sn-faq__a { padding-bottom: 24px; }
}

/* ---- Enquiry ------------------------------------------------------------------

   The closing section is the product pages' .pd-enquiry, reused wholesale
   rather than restyled here. See template-parts/sector/enquiry.php for why;
   its styles come from css/product.css, enqueued alongside this file. */