/* =========================================================================
   Segment page — template-segment.php (Billi for hospitality, Billi for work,
   Billi rental).
   Scoped to .sg — mobile-first, min-width media queries only.
   Tokens mirror home.css / sector-page.css (Billi Brand Book 2026, with the
   sharper corners agreed after the client review of 27 Aug 2026).
   ========================================================================= */

.sg {
	/* Billi Brand Book 2026 palette */
	--sg-navy: #181d46;      /* Billi Blue — signature colour */
	--sg-lightblue: #90cdeb; /* button hover / accents on navy */
	--sg-grey: #eaeaea;      /* borders, rules */
	--sg-band-grey: #f5f5f5;
	--sg-band-blue: #f1f5f5; /* Green Grey */
	--sg-text: #000;
	--sg-muted: #75757b;
	--sg-gutter: 20px;

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

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

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

/* framework.css sets a global `img { width: 100%; max-width: 100% }`. A scoped
   max-width does NOT undo it — the property you do not declare still comes from
   the global rule — so width has to be reset explicitly. The legacy pages
   relied on width/height attributes pasted into the WYSIWYG, which this
   replaces. */
.sg img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

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


/* ---- WYSIWYG output -----------------------------------------------------
   The copy comes across from the legacy content_panel fields, so it arrives as
   whatever tags the admin used. Neutralise the headings so they inherit the
   wrapper's type styles, and give lists and links a house look.

   The namespace sits inside :where() (18 Sep 2026). Written as
   `.sg [class*='__text'] ...` these base rules scored (0,2,1) and beat the
   navy band's own `.sg-highlight__text` overrides at (0,1,1), so the band's
   subheadings rendered navy on navy and its links never turned light blue.
   At (0,1,1) the band rules, which come later in this file, win on order. */

:where(.sg) [class*='__text'] > :first-child { margin-top: 0; }
:where(.sg) [class*='__text'] > :last-child { margin-bottom: 0; }

:where(.sg) [class*='__text'] p { margin: 0 0 0.85em; }

:where(.sg) [class*='__text'] :is(h2, h3, h4) {
	margin: 1.4em 0 0.5em;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sg-navy);
}

:where(.sg) [class*='__text'] ul,
:where(.sg) [class*='__text'] ol {
	margin: 0 0 0.9em;
	padding-left: 1.15em;
}

:where(.sg) [class*='__text'] li { margin: 0 0 0.45em; }

:where(.sg) [class*='__text'] a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

:where(.sg) [class*='__text'] a:hover { opacity: 1; color: var(--sg-navy); }

/* Images pasted inline in the legacy copy: stop them dictating the column. */
:where(.sg) [class*='__text'] img {
	margin: 1em 0;
	border-radius: 4px;
	max-width: min(560px, 100%);
}


/* ---- Buttons ------------------------------------------------------------
   css/desktop.css:349 carries a global `a:hover { opacity: 0.7 }` that fades
   whole buttons theme-wide, so every button here opts out explicitly. */

.sg .sg-btn {
	display: inline-block;
	padding: 13px 28px;
	border: 0;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sg .sg-btn:hover,
.sg .sg-btn:focus-visible { opacity: 1; }

.sg .sg-btn--blue { background: var(--sg-navy); color: #fff; }

.sg .sg-btn--blue:hover,
.sg .sg-btn--blue:focus-visible {
	background: #fff;
	color: var(--sg-navy);
	box-shadow: inset 0 0 0 1px var(--sg-navy);
}

/* On dark media / the navy bands. */
.sg .sg-btn--light { background: var(--sg-lightblue); color: var(--sg-navy); }

.sg .sg-btn--light:hover,
.sg .sg-btn--light:focus-visible {
	background: #fff;
	color: var(--sg-navy);
	box-shadow: none;
}

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

.sg .sg-btn--ghost:hover,
.sg .sg-btn--ghost:focus-visible {
	background: #fff;
	color: var(--sg-navy);
	box-shadow: none;
}


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

.sg-section-heading {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--sg-navy);
}

@media (min-width: 900px) {
	.sg-section-heading { font-size: 34px; }
}

.sg-section-intro {
	margin: 12px 0 0;
	max-width: 66ch;
	font-size: 17px;
	line-height: 1.55;
	color: var(--sg-muted);
}

.sg-section-intro p { margin: 0 0 0.6em; }
.sg-section-intro p:last-child { margin-bottom: 0; }


/* ---- Hero ---------------------------------------------------------------
   Same construction as the sector pages: media, navy scrim, content over it.
   The legacy template printed the title straight onto the featured image with
   an editor-chosen hex, which failed on any light photograph. */

.sg-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	padding: 48px 0 40px;
	background: var(--sg-navy);
	overflow: hidden;
}

@media (min-width: 900px) {
	.sg-hero {
		min-height: 460px;
		padding: 96px 0 72px;
	}
}

.sg-hero__media {
	position: absolute;
	inset: 0;
}

.sg-hero__media .sg-hero__media-el,
.sg-hero__media img,
.sg-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sg-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(24, 29, 70, 0.88) 0%,
		rgba(24, 29, 70, 0.72) 45%,
		rgba(24, 29, 70, 0.35) 100%
	);
}

.sg-hero__inner {
	position: relative;
	width: 100%;
}

.sg-hero__content { max-width: 640px; }

.sg-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sg-lightblue);
}

/* 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 600 this rule used
   to carry made the browser synthesise one. */
.sg-hero__heading {
	margin: 0;
	font-size: 32px;
	line-height: 1.12;
	color: #fff;
}

@media (min-width: 900px) {
	.sg-hero__heading { font-size: 52px; }
}

.sg-hero__intro {
	margin: 16px 0 0;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.sg-hero__intro p { margin: 0 0 0.6em; }
.sg-hero__intro p:last-child { margin-bottom: 0; }

.sg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.sg-hero__actions:empty { display: none; }


/* ---- Lede ---------------------------------------------------------------
   Held to a readable measure. The legacy pages ran the opening paragraphs the
   full width of the container, at roughly 180 characters a line on a wide
   screen. */

.sg-lede { padding: 40px 0 8px; }

@media (min-width: 900px) {
	.sg-lede { padding: 72px 0 16px; }
}

.sg-lede__text {
	max-width: 74ch;
	font-size: 17px;
	line-height: 1.6;
}

.sg-lede__text > :first-child { margin-top: 0; }
.sg-lede__text > :last-child { margin-bottom: 0; }
.sg-lede__text p { margin: 0 0 0.9em; }


/* ---- Feature rows ------------------------------------------------------- */

.sg-feature { padding: 40px 0; }

@media (min-width: 900px) {
	.sg-feature { padding: 64px 0; }
}

.sg-feature--grey { background: var(--sg-band-grey); }
.sg-feature--blue { background: var(--sg-band-blue); }

.sg-feature__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

@media (min-width: 900px) {
	.sg-feature__inner {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}

	/* Source order is copy then picture, so the default row is copy-left. The
	   flip moves the picture across without reordering the markup, which keeps
	   the reading order sensible for a screen reader. */
	.sg-feature--flip .sg-feature__body { order: 2; }
	.sg-feature--flip .sg-feature__media { order: 1; }

	.sg-feature--wide .sg-feature__inner { grid-template-columns: 1fr; }
}

/* Grid items default to min-width:auto, which lets a wide picture push its
   track past the viewport on a narrow screen. */
.sg-feature__body,
.sg-feature__media { min-width: 0; }

.sg-feature--wide .sg-feature__body { max-width: 74ch; }

.sg-feature__heading {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sg-navy);
}

@media (min-width: 900px) {
	.sg-feature__heading { font-size: 30px; }
}

.sg-feature__text {
	font-size: 16px;
	line-height: 1.6;
}

/* The legacy pages mixed landscape and portrait photography freely. Left
   uncapped, the one 789×1117 shot rendered 907px tall and made its band nearly
   twice the height of its neighbours, so the page lurched as you scrolled.
   Capping the height and cropping keeps the rhythm without cropping a
   landscape picture at all. */
.sg-feature__img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: 4px;
}


/* ---- Highlight ----------------------------------------------------------
   The one proposition each page is really selling. */

.sg-highlight {
	padding: 44px 0;
	background: var(--sg-navy);
	color: #fff;
}

@media (min-width: 900px) {
	.sg-highlight { padding: 80px 0; }
}

.sg-highlight__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.sg-highlight__inner { grid-template-columns: 1.05fr 1fr; gap: 64px; }
	.sg-highlight--plain .sg-highlight__inner { grid-template-columns: 1fr; }
}

.sg-highlight__body,
.sg-highlight__media { min-width: 0; }

.sg-highlight--plain .sg-highlight__body { max-width: 80ch; }

.sg-highlight__heading {
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: #fff;
}

@media (min-width: 900px) {
	.sg-highlight__heading { font-size: 36px; }
}

.sg-highlight__text {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.sg-highlight__text :is(h2, h3, h4) { color: #fff; }

.sg-highlight__text a { color: var(--sg-lightblue); }
.sg-highlight__text a:hover { opacity: 1; color: #fff; }

.sg-highlight__img {
	width: 100%;
	border-radius: 4px;
}


/* ---- Numbered steps ----------------------------------------------------- */

.sg-steps {
	counter-reset: sg-step;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

@media (min-width: 640px) {
	.sg-steps { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
}

.sg-step {
	counter-increment: sg-step;
	position: relative;
	min-width: 0;
	padding-left: 44px;
}

.sg-step::before {
	content: counter(sg-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sg-lightblue);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--sg-navy);
}

.sg-step__title {
	margin: 4px 0 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}

.sg-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}


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

.sg-systems { padding: 48px 0; }

@media (min-width: 900px) {
	.sg-systems { padding: 80px 0; }
}

.sg-systems__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 32px;
}

@media (min-width: 640px) {
	.sg-systems__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.sg-systems__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

.sg-system {
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--sg-grey);
	border-radius: 4px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sg-system:hover {
	border-color: var(--sg-navy);
	box-shadow: 0 6px 24px rgba(24, 29, 70, 0.08);
}

.sg .sg-system__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.sg .sg-system__link:hover { opacity: 1; }

.sg-system__media {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	background: var(--sg-band-blue);
	border-radius: 4px;
	overflow: hidden;
}

.sg-system__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
}

.sg-system__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sg-navy);
}

/* The card is a link and the theme sets `a { font-weight: 600 }` globally, so
   the summary inherits semi-bold without this. */
.sg-system__text {
	margin: 8px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sg-muted);
}

.sg-system__more {
	display: inline-block;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sg-navy);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}


/* ---- FAQs ---------------------------------------------------------------
   Replaces an accordion that was pasted into a WYSIWYG as raw HTML with its
   own <style> block. */

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

@media (min-width: 900px) {
	.sg-faqs { padding: 80px 0; }
}

.sg-faqs__list {
	max-width: 900px;
	margin: 28px 0 0;
	border-top: 1px solid var(--sg-grey);
}

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

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

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

.sg-faq__q:hover { color: #000; }

.sg-faq__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

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

.sg-faq__a {
	padding: 0 0 20px;
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sg-muted);
}

.sg-faq__a > :first-child { margin-top: 0; }
.sg-faq__a > :last-child { margin-bottom: 0; }
.sg-faq__a p { margin: 0 0 0.75em; }

.sg-faq__a a {
	color: var(--sg-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sg-faq__a a:hover { opacity: 1; }


/* ---- Enquiry ------------------------------------------------------------
   Reuses .pd-enquiry from product.css for the Gravity Forms styling; only the
   surrounding layout is defined here. */

.sg-enquiry { padding: 48px 0; }

@media (min-width: 900px) {
	.sg-enquiry { padding: 80px 0; }
}

.sg-enquiry__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.sg-enquiry__inner { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}

.sg-enquiry__intro,
.sg-enquiry__form { min-width: 0; }

.sg-enquiry__heading {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.18;
	color: var(--sg-navy);
}

@media (min-width: 900px) {
	.sg-enquiry__heading { font-size: 34px; }
}

.sg-enquiry__text {
	max-width: 60ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sg-muted);
}

.sg-enquiry__media { margin-top: 24px; }

.sg-enquiry__img {
	width: 100%;
	max-width: min(360px, 100%);
	border-radius: 4px;
}