/*
Theme Name: Selena Group Corporation
Theme URI: https://selenagroupco.com
Description: Selena Group Corporation — "The Field Set": industrial/technical on a Swiss grid. Roboto Slab carries the headings, Manrope does the work, Fira Code labels the data. Cool concrete grounds, graphite ink, hi-vis safety yellow as a fill only. Built on Twenty Twenty-Five.
Author: Selena Group Corporation
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: selena-group
*/

/* ==========================================================================
   Selena Group Corporation — component layer
   Direction: THE FIELD SET. A general contractor's capabilities sheet, not a
   home-services brochure. Structure comes from rules and a visible grid, never
   from cards. Radius 0 everywhere. No shadows. No gradients. No blue.

   The signature device is the FIELD TAG (.sg-tag): graphite text on a hi-vis
   fill inside a graphite hairline. hi-vis is a FILL-ONLY token — it never
   carries text as a foreground colour, which is why its own low contrast
   against white is never load-bearing.

   Tokens live in site/design/tokens.json -> assets/tokens.css (:root vars).
   NO raw hex belongs in this file, so site/build/audit-a11y.py stays
   authoritative for WCAG 2.1 AA.
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: var(--sg-white);
	color: var(--sg-graphite);
}

/* Hard edges are the direction. Nothing rounds. */
.wp-block-button__link,
.wp-block-details,
.sg-panel,
.sg-ph,
.sg-tag,
input, select, textarea, button { border-radius: var(--sg-radius-none); }

/* --------------------------------------------------------------------------
   0. SKIP LINK — WCAG 2.4.1
   -------------------------------------------------------------------------- */
.sg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .85rem 1.25rem;
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
}
.sg-skip:focus {
	left: var(--sg-space-30);
	top: var(--sg-space-30);
}

/* --------------------------------------------------------------------------
   1. FOCUS — WCAG 2.4.7. Two rings so it always clears 3:1 against its ground.
   -------------------------------------------------------------------------- */
/* The ring's colour is chosen by the GROUND IT IS DRAWN ON, not by the element.
   With outline-offset positive, a ring around a dark button on a light section
   still sits on the light section — so a hi-vis ring there would be 1.60:1 and
   fail 1.4.11. Light grounds get graphite; dark bands get hi-vis. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sg-graphite);
	outline-offset: 2px;
}
.sg-band-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.sg-utility :where(a, button):focus-visible,
.sg-footer :where(a, button):focus-visible,
.sg-panel :where(a, button):focus-visible {
	outline-color: var(--sg-hivis);
}

/* The fixed action bar has no surrounding ground of its own — the two halves
   butt against each other and against the page edge. Draw the ring INSIDE each
   half instead, against its own fill, where contrast is known. */
.sg-mobilebar a:focus-visible { outline-offset: -3px; }
.sg-mobilebar__call:focus-visible  { outline-color: var(--sg-hivis); }
.sg-mobilebar__quote:focus-visible { outline-color: var(--sg-graphite); }

/* --------------------------------------------------------------------------
   2. THE FIELD TAG — the signature device.
   Graphite on hi-vis, inside a graphite hairline. Used only where it carries
   real information: a service area, a founding year, a licence status, a gap
   that still needs the owner's input.
   -------------------------------------------------------------------------- */
.sg-tag {
	display: inline-block;
	margin: 0 0 var(--sg-space-30);
	padding: .3rem .6rem;
	border: 1px solid var(--sg-graphite);
	background: var(--sg-hivis);
	color: var(--sg-graphite);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	font-weight: var(--sg-weight-medium);
	letter-spacing: var(--sg-tracking-label);
	line-height: 1.3;
	text-transform: uppercase;
}
/* On a dark band the hairline flips so the chip keeps a visible boundary. */
.sg-band-dark .sg-tag,
.sg-panel .sg-tag { border-color: var(--sg-hivis); }

/* --------------------------------------------------------------------------
   3. THE SECTION LABEL — mono, tracked, sitting on a graphite rule.
   Replaces the reflexive all-caps sans eyebrow. Carries a number where the
   content is genuinely sequential.
   -------------------------------------------------------------------------- */
.sg-label {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin: 0 0 var(--sg-space-30);
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--sg-graphite);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	font-weight: var(--sg-weight-medium);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	color: var(--sg-graphite);
}
.sg-band-dark .sg-label,
.sg-panel .sg-label {
	color: var(--sg-on-dark);
	border-bottom-color: var(--sg-hivis);
}

/* An inline run of hard facts, separated by rules. Never invented numbers. */
/* Separators are typographic rather than structural: a bordered flex row leaves
   an orphaned rule at the start of a wrapped line, a middle dot does not. */
.sg-specline {
	margin: var(--sg-space-40) 0 0;
	padding: var(--sg-space-30) 0 0;
	border-top: 1px solid var(--sg-hairline);
	list-style: none;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	line-height: 1.9;
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	color: var(--sg-slate);
}
.sg-specline > * { display: inline; }
.sg-specline > * + *::before {
	content: "·";
	margin: 0 .7rem;
	color: var(--sg-rule);
}
.sg-band-dark .sg-specline { color: var(--sg-on-dark-mut); border-top-color: var(--sg-steel); }
.sg-band-dark .sg-specline > * + *::before { color: var(--sg-on-dark-mut); }

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
.sg-lede {
	max-width: 46ch;
	font-size: var(--sg-text-md);
	line-height: var(--sg-leading-normal);
	color: var(--sg-slate);
}
.sg-band-dark .sg-lede { color: var(--sg-on-dark-mut); }

.sg-h-hero {
	font-size: var(--sg-text-4xl) !important;
	line-height: var(--sg-leading-tight);
	letter-spacing: var(--sg-tracking-display);
	/* Let the grid column set the measure, and balance the rag rather than
	   tuning a ch-width against one viewport. */
	max-width: 24ch;
	text-wrap: balance;
}
.sg-pagehero h1 { text-wrap: balance; }
.sg-measure { max-width: 62ch; }

/* --------------------------------------------------------------------------
   5. BANDS + SECTIONS — width is a tool, not a constant. Sections differ in
   ground and in vertical air by role.
   -------------------------------------------------------------------------- */
.sg-section {
	padding-block: var(--sg-space-80);
	background: var(--sg-white);
}
.sg-section--concrete { background: var(--sg-concrete); }
.sg-section--mortar   { background: var(--sg-mortar); }
.sg-section--tight    { padding-block: var(--sg-space-60); }

.sg-band-dark {
	padding-block: var(--sg-space-80);
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
}
.sg-band-dark :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--sg-on-dark); }
.sg-band-dark .sg-muted { color: var(--sg-on-dark-mut); }
.sg-band-dark a { color: var(--sg-on-dark); }

/* WordPress' flow layout stacks margins onto every direct child. Inside our own
   grid containers that fights the grid, so it is zeroed at the boundary. */
.sg-section-head > *,
.sg-hero-grid > *,
.sg-split > *,
.sg-cta-grid > * { margin-block: 0; }

/* Section head: the label rule pins to the top of the column and the heading
   hangs from the bottom, so the two columns bottom-align without leaving a void
   above a short heading. Deliberately asymmetric — not a centred title block. */
.sg-section-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sg-space-50) var(--sg-space-60);
	align-items: stretch;
	margin-bottom: var(--sg-space-60);
}
.sg-section-head > :first-child {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sg-space-40);
}
.sg-section-head > :last-child { align-self: end; }
.sg-section-head h2 { margin: 0; }
.sg-section-head .sg-lede { margin: 0; }
@media (max-width: 860px) {
	.sg-section-head { grid-template-columns: minmax(0, 1fr); }
	.sg-section-head > :first-child { gap: var(--sg-space-30); }
	.sg-section-head > :last-child { align-self: start; }
}

/* --------------------------------------------------------------------------
   6. HERO — asymmetric split. Copy on white at 7 columns, a graphite
   capabilities panel at 5. Not a centred hero, no pill badge.
   -------------------------------------------------------------------------- */
.sg-hero {
	padding-block: var(--sg-space-70) var(--sg-space-80);
	background: var(--sg-white);
	border-bottom: 1px solid var(--sg-hairline);
}
.sg-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sg-space-60);
	align-items: start;
}
@media (max-width: 980px) {
	.sg-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-50); }
	.sg-h-hero { max-width: none; }
}
.sg-hero h1 { margin: 0 0 var(--sg-space-40); }

/* The dark panel that sits opposite the hero copy. */
.sg-panel {
	padding: var(--sg-space-50);
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
}
.sg-panel :is(h2, h3, p, li) { color: var(--sg-on-dark); }
.sg-panel--steel { background: var(--sg-steel); }

/* A numbered capability list — mono numerals, hairline rules, no icons. */
.sg-caplist {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cap;
}
.sg-caplist li {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: .75rem;
	align-items: baseline;
	padding: .85rem 0;
	border-top: 1px solid var(--sg-steel);
	font-size: var(--sg-text-sm);
	line-height: var(--sg-leading-normal);
	counter-increment: cap;
}
.sg-caplist li:first-child { border-top: 0; padding-top: 0; }
.sg-caplist li::before {
	content: counter(cap, decimal-leading-zero);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	color: var(--sg-on-dark-mut);
}
.sg-panel--steel .sg-caplist li { border-top-color: var(--sg-slate); }

/* --------------------------------------------------------------------------
   7. CREDIBILITY STRIP — four hard facts, ruled, no invented numbers.
   -------------------------------------------------------------------------- */
.sg-credstrip {
	padding-block: var(--sg-space-50);
	background: var(--sg-mortar);
	border-bottom: 1px solid var(--sg-hairline);
}
.sg-cred {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-cred > li {
	padding: 0 var(--sg-space-40);
	border-left: 1px solid var(--sg-rule);
}
.sg-cred > li:first-child { padding-left: 0; border-left: 0; }
.sg-cred dt {
	margin: 0 0 .35rem;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	color: var(--sg-slate);
}
.sg-cred dd {
	margin: 0;
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md);
	font-weight: var(--sg-weight-bold);
	line-height: var(--sg-leading-snug);
	letter-spacing: var(--sg-tracking-heading);
	color: var(--sg-graphite);
}
@media (max-width: 860px) {
	.sg-cred { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-40) 0; }
	.sg-cred > li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
	.sg-cred { grid-template-columns: minmax(0, 1fr); }
	.sg-cred > li { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   8. SERVICE ROWS — the primary content pattern. A ruled register, not a row
   of identical icon cards: big slab numeral, name, description, scope tag.
   -------------------------------------------------------------------------- */
.sg-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: row;
	border-top: 2px solid var(--sg-graphite);
}
.sg-rows > li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2.5fr);
	gap: var(--sg-space-40);
	align-items: start;
	padding: var(--sg-space-40) 0;
	border-bottom: 1px solid var(--sg-hairline);
	counter-increment: row;
	transition: background var(--sg-motion-fast) var(--sg-motion-ease);
}
.sg-rows > li:hover { background: var(--sg-concrete); }
.sg-section--concrete .sg-rows > li:hover { background: var(--sg-white); }
.sg-rows .sg-rows__no {
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-lg);
	font-weight: var(--sg-weight-bold);
	line-height: 1;
	color: var(--sg-graphite);
}
.sg-rows .sg-rows__no::before { content: counter(row, decimal-leading-zero); }
.sg-rows h3 {
	margin: 0;
	font-size: var(--sg-text-md);
	line-height: var(--sg-leading-snug);
}
.sg-rows h3 a { text-decoration: none; }
.sg-rows h3 a:hover { text-decoration: underline; }
.sg-rows p {
	margin: 0;
	font-size: var(--sg-text-sm);
	line-height: var(--sg-leading-normal);
	color: var(--sg-slate);
}
.sg-rows .sg-rows__scope {
	margin: 0;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	color: var(--sg-slate);
	text-align: right;
}
@media (max-width: 1000px) {
	.sg-rows > li { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--sg-space-30); }
	.sg-rows > li > :nth-child(3) { grid-column: 2; }
	.sg-rows > li > :nth-child(4) { grid-column: 2; text-align: left; }
}

/* --------------------------------------------------------------------------
   9. SPEC TABLE — mono data rows with a dotted leader. Used for hours, NAP,
   project records and anything that reads better aligned than prose.
   -------------------------------------------------------------------------- */
.sg-specs { margin: 0; }
.sg-specs > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .75rem;
	align-items: baseline;
	padding: .6rem 0;
	border-bottom: 1px solid var(--sg-hairline);
}
.sg-specs dt {
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	color: var(--sg-slate);
}
.sg-specs dd {
	margin: 0;
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-semibold);
	color: var(--sg-graphite);
	text-align: right;
}
.sg-band-dark .sg-specs > div,
.sg-panel .sg-specs > div { border-bottom-color: var(--sg-steel); }
.sg-band-dark .sg-specs dt,
.sg-panel .sg-specs dt { color: var(--sg-on-dark-mut); }
.sg-band-dark .sg-specs dd,
.sg-panel .sg-specs dd { color: var(--sg-on-dark); }

/* -------------------------------------------------------------------------
   10. PLACEHOLDER FRAMES — labelled dashed slots with title-block corner
   marks. Deliberately obvious: real photography replaces these, and nothing
   here should be mistaken for a finished image.
   ------------------------------------------------------------------------- */
.sg-ph {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 13rem;
	margin: 0;
	padding: var(--sg-space-40);
	background: var(--sg-concrete);
	border: 2px dashed var(--sg-rule);
}
.sg-section--concrete .sg-ph { background: var(--sg-white); }
.sg-ph::before,
.sg-ph::after {
	content: "";
	position: absolute;
	width: .9rem;
	height: .9rem;
	border: 2px solid var(--sg-graphite);
}
.sg-ph::before { top: .45rem; left: .45rem; border-right: 0; border-bottom: 0; }
.sg-ph::after  { bottom: .45rem; right: .45rem; border-left: 0; border-top: 0; }
.sg-ph figcaption {
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	color: var(--sg-graphite);
}
.sg-ph figcaption span {
	display: block;
	margin-top: .35rem;
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-xs);
	color: var(--sg-slate);
}
.sg-ph--wide { min-height: 20rem; }

/* -------------------------------------------------------------------------
   11. GRIDS
   ------------------------------------------------------------------------- */
.sg-grid-2, .sg-grid-3 { display: grid; gap: var(--sg-space-40); }
.sg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
	.sg-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.sg-grid-2, .sg-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* A two-column split where the left column is a sticky heading. */
.sg-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: var(--sg-space-60);
	align-items: start;
}
@media (max-width: 900px) { .sg-split { grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-50); } }

/* -------------------------------------------------------------------------
   12. RULED POINT LIST — "why us" and process content. Rules, not cards.
   ------------------------------------------------------------------------- */
.sg-points { margin: 0; padding: 0; list-style: none; }
.sg-points > li {
	padding: var(--sg-space-40) 0;
	border-top: 1px solid var(--sg-hairline);
}
.sg-points > li:first-child { border-top: 2px solid var(--sg-graphite); }
.sg-points h3 {
	margin: 0 0 .4rem;
	font-size: var(--sg-text-md);
	line-height: var(--sg-leading-snug);
}
.sg-points p {
	margin: 0;
	max-width: 60ch;
	font-size: var(--sg-text-sm);
	color: var(--sg-slate);
	line-height: var(--sg-leading-normal);
}
.sg-band-dark .sg-points > li { border-top-color: var(--sg-steel); }
.sg-band-dark .sg-points > li:first-child { border-top-color: var(--sg-hivis); }
.sg-band-dark .sg-points p { color: var(--sg-on-dark-mut); }

/* A plain checklist, marked with a rule rather than a glyph. */
.sg-check { margin: 0; padding: 0; list-style: none; }
.sg-check li {
	position: relative;
	padding: .5rem 0 .5rem 1.5rem;
	font-size: var(--sg-text-sm);
	line-height: var(--sg-leading-normal);
	color: var(--sg-graphite);
}
.sg-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	width: .8rem;
	height: 2px;
	background: var(--sg-graphite);
}
.sg-band-dark .sg-check li, .sg-panel .sg-check li { color: var(--sg-on-dark); }
.sg-band-dark .sg-check li::before, .sg-panel .sg-check li::before { background: var(--sg-hivis); }

/* -------------------------------------------------------------------------
   13. BUTTONS — 44px minimum target (WCAG 2.5.5). Real hover/active states.
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--sg-target-min);
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-bold);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background var(--sg-motion-base) var(--sg-motion-ease),
	            color var(--sg-motion-base) var(--sg-motion-ease),
	            border-color var(--sg-motion-base) var(--sg-motion-ease);
}
.sg-btn-primary .wp-block-button__link {
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
	border-color: var(--sg-graphite);
}
.sg-btn-primary .wp-block-button__link:hover,
.sg-btn-primary .wp-block-button__link:active {
	background: var(--sg-steel);
	border-color: var(--sg-steel);
}
.sg-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--sg-graphite);
	border-color: var(--sg-graphite);
}
.sg-btn-outline .wp-block-button__link:hover,
.sg-btn-outline .wp-block-button__link:active {
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
}
/* On the dark bands the fills invert. */
.sg-band-dark .sg-btn-primary .wp-block-button__link {
	background: var(--sg-white);
	color: var(--sg-graphite);
	border-color: var(--sg-white);
}
.sg-band-dark .sg-btn-primary .wp-block-button__link:hover {
	background: var(--sg-hivis);
	border-color: var(--sg-hivis);
	color: var(--sg-graphite);
}
.sg-band-dark .sg-btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--sg-on-dark);
	border-color: var(--sg-on-dark);
}
.sg-band-dark .sg-btn-outline .wp-block-button__link:hover {
	background: var(--sg-on-dark);
	color: var(--sg-graphite);
}
.wp-block-buttons { gap: var(--sg-space-30); }

/* -------------------------------------------------------------------------
   14. UTILITY BAR + HEADER
   ------------------------------------------------------------------------- */
.sg-utility {
	padding-block: .55rem;
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
}
.sg-utility p { margin: 0; color: var(--sg-on-dark); font-size: inherit; }
.sg-utility a { color: var(--sg-on-dark); }
@media (max-width: 780px) {
	.sg-utility .sg-utility-hours { display: none; }
	/* Keep the licence claim, drop the qualifiers, so it stays one line. */
	.sg-utility .sg-utility-long { display: none; }
}

.sg-header {
	padding-block: var(--sg-space-30);
	background: var(--sg-white);
	border-bottom: 2px solid var(--sg-graphite);
	position: relative;
	z-index: 5;
}
.sg-header-inner { gap: var(--sg-space-40); }

/* Wordmark lockup. Text-only by design until a real logo exists. */
.sg-brand { gap: .85rem; align-items: center; }
.sg-logo a, .sg-logo {
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md);
	font-weight: var(--sg-weight-bold);
	letter-spacing: var(--sg-tracking-heading);
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sg-graphite);
}
.sg-brandsub {
	margin: .2rem 0 0;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	color: var(--sg-slate);
}
@media (max-width: 600px) { .sg-brandsub { display: none; } }

.sg-header-right { gap: var(--sg-space-40); align-items: center; }
.sg-nav .wp-block-navigation__container { gap: var(--sg-space-40); }
.sg-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sg-target-min);
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-semibold);
	text-decoration: none;
	color: var(--sg-graphite);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color var(--sg-motion-fast) var(--sg-motion-ease);
}
.sg-nav a:hover { border-bottom-color: var(--sg-hivis); }
.sg-nav .current-menu-item > a { border-bottom-color: var(--sg-graphite); }
.sg-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--sg-graphite);
	background: var(--sg-white);
	padding: .35rem 0;
}
.sg-nav .wp-block-navigation__submenu-container a {
	min-height: var(--sg-target-min);
	padding: .55rem 1rem;
}
/* The submenu chevron ships as a 10px button. Give it a real target without
   changing where the glyph sits. */
.sg-nav .wp-block-navigation-submenu__toggle,
.sg-nav .wp-block-navigation__submenu-icon {
	min-width: var(--sg-target-min);
	min-height: var(--sg-target-min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* --- Mobile overlay menu -------------------------------------------------
   The navigation block's own layout (flex, justified right) is composed for the
   desktop bar; inside the full-screen overlay it leaves the items ragged and
   right-aligned. The overlay gets its own left-aligned, ruled treatment. */
/* Size only — NOT display. WordPress toggles these buttons' display at its own
   breakpoint, and setting display here forced the hamburger to show on desktop. */
.sg-nav .wp-block-navigation__responsive-container-open,
.sg-nav .wp-block-navigation__responsive-container-close {
	min-width: var(--sg-target-min);
	min-height: var(--sg-target-min);
	align-items: center;
	justify-content: center;
	color: var(--sg-graphite);
}
.sg-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sg-white);
	padding: var(--sg-space-40) var(--sg-gutter) var(--sg-space-70);
}
.sg-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: stretch;
	justify-content: flex-start;
	padding-top: var(--sg-space-40);
}
.sg-nav .is-menu-open .wp-block-navigation__container,
.sg-nav .is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	gap: 0;
	align-items: stretch;
	border: 0;
	padding: 0;
	background: transparent;
}
.sg-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.sg-nav .is-menu-open a {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	min-height: var(--sg-target-min);
	padding: .7rem 0;
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md);
	font-weight: var(--sg-weight-bold);
	letter-spacing: var(--sg-tracking-heading);
	border-bottom: 1px solid var(--sg-hairline);
	border-top: 0;
}
.sg-nav .is-menu-open a:hover { border-bottom-color: var(--sg-graphite); }
/* Child services read as a sub-register, indented and set in the body face. */
.sg-nav .is-menu-open .wp-block-navigation__submenu-container a {
	padding-left: var(--sg-space-40);
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-medium);
	color: var(--sg-slate);
}
.sg-nav .is-menu-open .wp-block-navigation-submenu__toggle {
	min-width: 0;
	min-height: 0;
	padding: 0 .5rem;
}
.sg-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

.sg-header-phone { margin: 0; text-align: right; line-height: 1.2; }
.sg-header-phone small {
	display: block;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	color: var(--sg-slate);
}
.sg-header-phone a {
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md);
	font-weight: var(--sg-weight-bold);
	color: var(--sg-graphite);
	text-decoration: none;
}
.sg-header-phone a:hover { text-decoration: underline; }
@media (max-width: 1080px) { .sg-header-phone { display: none; } }
@media (max-width: 900px)  {
	/* Outranks WordPress' own .wp-block-buttons.is-layout-flex display rule.
	   Below 900px the fixed action bar carries the same two CTAs. */
	.sg-header .sg-header-right .sg-header-cta { display: none; }
	.sg-header-inner { gap: var(--sg-space-30); }
}

/* -------------------------------------------------------------------------
   15. CTA BAND
   ------------------------------------------------------------------------- */
.sg-cta-band { padding-block: var(--sg-space-70); }
.sg-cta-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--sg-space-60);
	align-items: center;
}
.sg-cta-band h2 { margin: 0 0 var(--sg-space-30); max-width: 18ch; }
@media (max-width: 900px) { .sg-cta-grid { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------------
   16. NOTES — the visible [NEEDS SERGEI] brackets. Load-bearing gaps stay on
   the page until the owner fills them; they are not decoration.
   ------------------------------------------------------------------------- */
.sg-note {
	margin: var(--sg-space-40) 0;
	padding: var(--sg-space-40);
	background: var(--sg-concrete);
	border-left: 4px solid var(--sg-hivis);
	border-top: 1px solid var(--sg-rule);
	border-right: 1px solid var(--sg-rule);
	border-bottom: 1px solid var(--sg-rule);
	font-size: var(--sg-text-sm);
	line-height: var(--sg-leading-normal);
	color: var(--sg-graphite);
}
.sg-note strong {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   17. FAQ — native details/summary, no ARIA-only widget.
   ------------------------------------------------------------------------- */
.sg-faq { border-top: 2px solid var(--sg-graphite); }
.sg-faq details { border-bottom: 1px solid var(--sg-hairline); }
.sg-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sg-space-30);
	min-height: var(--sg-target-min);
	padding: var(--sg-space-30) 0;
	cursor: pointer;
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md);
	font-weight: var(--sg-weight-bold);
	color: var(--sg-graphite);
	list-style: none;
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after {
	content: "+";
	font-family: var(--sg-font-mono);
	font-weight: var(--sg-weight-regular);
	color: var(--sg-slate);
}
.sg-faq details[open] summary::after { content: "\2212"; }
.sg-faq details > :not(summary) {
	margin: 0 0 var(--sg-space-40);
	max-width: 68ch;
	font-size: var(--sg-text-sm);
	color: var(--sg-slate);
	line-height: var(--sg-leading-relaxed);
}

/* -------------------------------------------------------------------------
   18. LEGAL / PROSE PAGES
   ------------------------------------------------------------------------- */
.sg-prose { max-width: 68ch; }
.sg-prose h2 {
	margin: var(--sg-space-50) 0 var(--sg-space-30);
	padding-top: var(--sg-space-30);
	border-top: 1px solid var(--sg-hairline);
	font-size: var(--sg-text-lg);
}
.sg-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.sg-prose p, .sg-prose li { line-height: var(--sg-leading-relaxed); }
.sg-prose ul { padding-left: 1.15rem; }
.sg-prose li { margin-bottom: .35rem; }

/* Page hero for interior pages — lighter than the home hero. */
.sg-pagehero {
	padding-block: var(--sg-space-60) var(--sg-space-50);
	background: var(--sg-concrete);
	border-bottom: 1px solid var(--sg-hairline);
}
.sg-pagehero h1 { margin: 0 0 var(--sg-space-30); max-width: 26ch; }
/* The page hero has no opposite column, so a body-copy measure leaves it
   huddled in the left third. Give the lede a wider line here specifically. */
.sg-pagehero .sg-lede { max-width: 62ch; }
.sg-pagehero > *, .sg-pagehero .wp-block-group > * { margin-inline: 0; }
.sg-pagehero .sg-lede { margin: 0; }
.sg-crumb {
	margin: 0 0 var(--sg-space-30);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	color: var(--sg-slate);
}
.sg-crumb a { color: var(--sg-slate); }

/* -------------------------------------------------------------------------
   19. FORMS — Fluent Forms, restyled to the system. WCAG 1.4.11 boundaries,
   3.3.1 inline errors, 3.3.2 real labels, 2.5.5 targets.
   ------------------------------------------------------------------------- */
.sg-formwrap {
	padding: var(--sg-space-50);
	background: var(--sg-white);
	border: 2px solid var(--sg-graphite);
}
.sg-section--concrete .sg-formwrap { background: var(--sg-white); }

.fluentform .ff-el-input--label label,
.sg-formwrap label {
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-semibold);
	color: var(--sg-graphite);
	letter-spacing: 0;
}
.fluentform .ff-el-input--label.ff-el-is-required label::after { color: var(--sg-danger); }
.fluentform .ff-el-help-message,
.sg-formwrap .ff-el-help-message {
	font-size: var(--sg-text-xs);
	color: var(--sg-slate);
	line-height: var(--sg-leading-normal);
}
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=url],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea {
	min-height: var(--sg-target-min);
	padding: .7rem .8rem;
	background: var(--sg-white);
	border: 1px solid var(--sg-rule);
	border-radius: var(--sg-radius-none);
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-base);
	color: var(--sg-graphite);
	box-shadow: none;
	transition: border-color var(--sg-motion-fast) var(--sg-motion-ease);
}
.fluentform textarea { min-height: 8rem; }
.fluentform :is(input, select, textarea):hover { border-color: var(--sg-graphite); }
.fluentform :is(input, select, textarea):focus-visible {
	border-color: var(--sg-graphite);
	outline: 3px solid var(--sg-graphite);
	outline-offset: 1px;
}
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error select,
.fluentform .ff-el-is-error textarea { border-color: var(--sg-danger); border-width: 2px; }
.fluentform .error, .fluentform .text-danger, .fluentform .ff-el-is-error .error {
	color: var(--sg-danger);
	font-size: var(--sg-text-xs);
	font-weight: var(--sg-weight-semibold);
}
.fluentform .ff-message-success, .ff_submit_success {
	padding: var(--sg-space-40);
	border: 2px solid var(--sg-success);
	background: var(--sg-white);
	color: var(--sg-success);
}
.fluentform .ff-btn-submit {
	min-height: var(--sg-target-min);
	padding: 1rem 1.9rem;
	background: var(--sg-graphite);
	color: var(--sg-on-dark);
	border: 2px solid var(--sg-graphite);
	border-radius: var(--sg-radius-none);
	font-family: var(--sg-font-body);
	font-size: var(--sg-text-sm);
	font-weight: var(--sg-weight-bold);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--sg-motion-base) var(--sg-motion-ease);
}
.fluentform .ff-btn-submit:hover { background: var(--sg-steel); border-color: var(--sg-steel); }
.fluentform .ff-el-form-check-label { font-weight: var(--sg-weight-regular); font-size: var(--sg-text-sm); }
.fluentform input[type=checkbox], .fluentform input[type=radio] {
	width: 1.5rem; height: 1.5rem;   /* 24px — WCAG 2.2 SC 2.5.8 minimum */
	flex: 0 0 auto;
	accent-color: var(--sg-graphite);
	border: 1px solid var(--sg-rule);
}
/* 2.5.5 — the clickable label gives the control its 44px target. */
.fluentform .ff-el-form-check { min-height: var(--sg-target-min); display: flex; align-items: center; gap: .5rem; }

@media (max-width: 620px) {
	.sg-formwrap { padding: var(--sg-space-40) var(--sg-space-30); }
	/* Fluent Forms lays multi-input rows (First/Last name) out side by side with
	   a min-width floor; below ~620px that is wider than the panel. Stack them. */
	.fluentform .ff-t-container { flex-wrap: wrap; margin-left: 0; margin-right: 0; }
	.fluentform .ff-t-cell {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.fluentform fieldset { min-width: 0; }
	/* The submit label does not wrap, so its min-content width sets the panel's
	   floor. Full width on a phone is better UX anyway. */
	.fluentform .ff-btn-submit {
		width: 100%;
		padding-inline: var(--sg-space-30);
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
   20. FOOTER
   ------------------------------------------------------------------------- */
.sg-footer {
	padding-block: var(--sg-space-70) var(--sg-space-50);
	background: var(--sg-graphite);
	color: var(--sg-on-dark-mut);
	border-top: 4px solid var(--sg-hivis);
}
.sg-footer :is(p, li) { color: var(--sg-on-dark-mut); font-size: var(--sg-text-sm); }
.sg-footer a { color: var(--sg-on-dark); text-decoration: none; }
.sg-footer a:hover { text-decoration: underline; }
.sg-footer-brand {
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-md) !important;
	font-weight: var(--sg-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--sg-tracking-heading);
	color: var(--sg-on-dark) !important;
	margin: 0 0 .25rem;
}
.sg-footer-phone a {
	font-family: var(--sg-font-display);
	font-size: var(--sg-text-lg);
	font-weight: var(--sg-weight-bold);
	color: var(--sg-on-dark);
}
.sg-footer-index {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sg-space-40);
}
.sg-footer-index h3 {
	margin: 0 0 var(--sg-space-30);
	padding-bottom: .4rem;
	border-bottom: 1px solid var(--sg-steel);
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	font-weight: var(--sg-weight-medium);
	letter-spacing: var(--sg-tracking-label);
	text-transform: uppercase;
	color: var(--sg-on-dark);
}
.sg-footer-index ul { margin: 0; padding: 0; list-style: none; }
.sg-footer-index li { margin-bottom: .25rem; }
/* Padding + the gap between rows keeps every footer link clear of SC 2.5.8's
   24px minimum without inflating the footer to 44px-per-row. */
.sg-footer-index a { display: inline-block; min-height: 1.75rem; padding: .45rem 0; }
@media (max-width: 700px) { .sg-footer-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .sg-footer-index { grid-template-columns: minmax(0, 1fr); } }

.sg-footer-baseline {
	margin-top: var(--sg-space-50);
	padding-top: var(--sg-space-30);
	border-top: 1px solid var(--sg-steel);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sg-space-30) var(--sg-space-40);
	justify-content: space-between;
	font-family: var(--sg-font-mono);
	font-size: var(--sg-text-2xs);
	letter-spacing: var(--sg-tracking-wide);
	text-transform: uppercase;
}
.sg-footer-baseline p { margin: 0; font-size: inherit !important; }
.sg-footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--sg-space-40); }
.sg-footer-legal a {
	display: inline-flex;
	align-items: center;
	min-height: var(--sg-target-min);
}

/* The licence / insurance line the old site never carried. */
.sg-licence {
	margin: var(--sg-space-30) 0 0;
	padding-top: var(--sg-space-30);
	border-top: 1px solid var(--sg-steel);
	font-size: var(--sg-text-xs) !important;
	line-height: var(--sg-leading-normal);
}

/* -------------------------------------------------------------------------
   20b. SMALL-SCREEN RHYTHM — the band spacing is composed for desktop; a phone
   needs the same hierarchy at roughly half the vertical cost.
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.sg-section, .sg-band-dark { padding-block: var(--sg-space-60); }
	.sg-section--tight { padding-block: var(--sg-space-50); }
	.sg-hero { padding-block: var(--sg-space-50) var(--sg-space-60); }
	.sg-pagehero { padding-block: var(--sg-space-50) var(--sg-space-40); }
	.sg-cta-band { padding-block: var(--sg-space-60); }
	.sg-footer { padding-block: var(--sg-space-60) var(--sg-space-40); }
	.sg-section-head { margin-bottom: var(--sg-space-50); }
	.sg-panel { padding: var(--sg-space-40); }
	.sg-lede { max-width: none; }
	.sg-rows > li { padding: var(--sg-space-30) 0; }
}

/* -------------------------------------------------------------------------
   21. MOBILE ACTION BAR — 44px targets, hidden on desktop.
   ------------------------------------------------------------------------- */
.sg-mobilebar { display: none; }
@media (max-width: 900px) {
	.sg-mobilebar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 40;
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-top: 2px solid var(--sg-graphite);
	}
	.sg-mobilebar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--sg-target-min);
		padding: .85rem .5rem;
		font-family: var(--sg-font-body);
		font-size: var(--sg-text-sm);
		font-weight: var(--sg-weight-bold);
		letter-spacing: var(--sg-tracking-wide);
		text-transform: uppercase;
		text-decoration: none;
	}
	.sg-mobilebar__call  { background: var(--sg-graphite); color: var(--sg-on-dark); }
	.sg-mobilebar__quote { background: var(--sg-hivis); color: var(--sg-graphite); }
	/* Reserve the bar's real height (44px target + padding + border) so it never
	   sits on top of the last line of a section. */
	body { padding-bottom: calc(var(--sg-target-min) + 1.9rem); }
}

/* -------------------------------------------------------------------------
   22. MOTION — the system is near-static by design. Honour the preference
   anyway (WCAG 2.3.3).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   23. PRINT — estimates and scopes get printed. Make that not embarrassing.
   ------------------------------------------------------------------------- */
@media print {
	.sg-utility, .sg-header, .sg-footer, .sg-mobilebar, .sg-skip { display: none !important; }
	.sg-band-dark, .sg-panel { background: var(--sg-white) !important; color: var(--sg-graphite) !important; }
	.sg-band-dark :is(h1,h2,h3,p,li) { color: var(--sg-graphite) !important; }
}

/* === sg-ph photo support (added 2026-08-27, Pass 1) === */
.sg-ph.has-photo { padding: 0; border-style: solid; overflow: hidden; background: var(--sg-white); }
.sg-ph.has-photo::before,
.sg-ph.has-photo::after { display: none; }
.sg-ph.has-photo img { display: block; width: 100%; height: 15rem; flex: 0 0 auto; object-fit: cover; }
.sg-ph.has-photo figcaption { padding: var(--sg-space-40); }