/* ============================================================================
   Skagit River Steel & Recycling — Design System
   Built by WebCrafters Solutions Ltd.
   Industrial • premium • clean • trustworthy • locally grounded
   ----------------------------------------------------------------------------
   Brand color CSS variables are injected from the Theme Options page via an
   inline <style> in the <head> (see inc/theme-options.php > srs_dynamic_css()).
   The values below are the design fallbacks used if options are empty.
   ============================================================================ */

:root {
	/* Brand — sampled from the client logo (royal blue) + industrial accents */
	--srs-brand:        #0f22a0;   /* logo royal blue */
	--srs-brand-2:      #0a1450;   /* deep navy for dark sections / overlays */
	--srs-accent:       #f5820a;   /* industrial safety orange (CTAs) */
	--srs-accent-dark:  #d96e00;
	--srs-ink:          #171b26;   /* body text */
	--srs-muted:        #5c6472;   /* secondary text */
	--srs-line:         #e4e7ee;   /* hairlines / borders */
	--srs-bg:           #ffffff;
	--srs-bg-alt:       #f5f7fb;   /* light section background */
	--srs-steel:        #eef1f6;   /* steel tint panels */

	/* Type */
	--srs-font-head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--srs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Rhythm */
	--srs-container: 1200px;
	--srs-container-wide: 1360px;
	--srs-gap: clamp(1.5rem, 4vw, 4rem);
	--srs-radius: 10px;
	--srs-radius-lg: 18px;
	--srs-shadow: 0 10px 30px -12px rgba(10, 20, 80, .28);
	--srs-shadow-sm: 0 4px 14px -6px rgba(10, 20, 80, .22);
	--srs-transition: .25s cubic-bezier(.2, .7, .3, 1);
}

/* ---------- Reset-ish base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--srs-font-body);
	color: var(--srs-ink);
	background: var(--srs-bg);
	line-height: 1.65;
	font-size: 1.02rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--srs-brand); text-decoration: none; transition: color var(--srs-transition); }
a:hover { color: var(--srs-accent-dark); }
:focus-visible { outline: 3px solid var(--srs-accent); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
	font-family: var(--srs-font-head);
	line-height: 1.05;
	color: var(--srs-brand-2);
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: .01em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h4 { font-size: clamp(1.12rem, 2vw, 1.35rem); color: var(--srs-ink); }
p { margin: 0 0 1.1rem; }
strong { color: var(--srs-brand-2); }

/* ---------- Layout helpers ---------- */
.srs-container { width: 100%; max-width: var(--srs-container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.srs-container--wide { max-width: var(--srs-container-wide); }
.srs-section { padding-block: clamp(3.2rem, 7vw, 6rem); }
.srs-section--tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.srs-section--alt { background: var(--srs-bg-alt); }
.srs-section--dark { background: var(--srs-brand-2); color: #dfe4f5; }

/* Bright accent band — a vibrant orange section that separates two darker
   neighbours (e.g. a CTA between a dark band and the dark footer). */
.srs-section--accent { background: linear-gradient(135deg, var(--srs-accent) 0%, var(--srs-accent-dark) 100%); color: #2b1a00; position: relative; overflow: hidden; }
.srs-section--accent::before {
	content: ""; position: absolute; top: -140px; right: -120px; width: 420px; height: 420px;
	background: radial-gradient(circle at center, rgba(255,255,255,.22), transparent 70%); pointer-events: none;
}
.srs-section--accent > * { position: relative; }
.srs-section--accent h1, .srs-section--accent h2, .srs-section--accent h3 { color: var(--srs-brand-2); }
.srs-section--accent p, .srs-section--accent .srs-lead { color: #3a2500; }
.srs-section--accent .srs-eyebrow { color: var(--srs-brand-2); }
.srs-section--accent .srs-eyebrow::before { background: var(--srs-brand-2); }

/* Faded background image (Content Section widget). Image sits above the solid
   section colour; a scrim fades it so text stays readable. */
.srs-section--hasbg { position: relative; isolation: isolate; overflow: hidden; }
.srs-section__bg { position: absolute; inset: 0; z-index: -2; }
.srs-section__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.srs-section--hasbg::after { content: ""; position: absolute; inset: 0; z-index: -1; }
/* Dark sections → navy scrim. Horizontal so the text side (left) stays dark and
   readable while the photo shows through on the right. */
.srs-section--dark.srs-section--ovl-strong::after { background: linear-gradient(90deg, rgba(10,20,80,.97) 0%, rgba(10,20,80,.95) 62%, rgba(10,20,80,.6) 100%); }
.srs-section--dark.srs-section--ovl-medium::after { background: linear-gradient(90deg, rgba(10,20,80,.96) 0%, rgba(10,20,80,.93) 60%, rgba(10,20,80,.34) 100%); }
.srs-section--dark.srs-section--ovl-subtle::after { background: linear-gradient(90deg, rgba(10,20,80,.94) 0%, rgba(10,20,80,.82) 58%, rgba(10,20,80,.2) 100%); }
/* Light sections → white scrim */
.srs-section--hasbg:not(.srs-section--dark).srs-section--ovl-strong::after { background: rgba(255,255,255,.9); }
.srs-section--hasbg:not(.srs-section--dark).srs-section--ovl-medium::after { background: rgba(255,255,255,.8); }
.srs-section--hasbg:not(.srs-section--dark).srs-section--ovl-subtle::after { background: rgba(255,255,255,.62); }
.srs-section--dark h1, .srs-section--dark h2, .srs-section--dark h3 { color: #fff; }
.srs-grid { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); }
.srs-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--srs-font-head); text-transform: uppercase;
	letter-spacing: .16em; font-weight: 600; font-size: .82rem;
	color: var(--srs-accent-dark);
}
.srs-eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--srs-accent); display: inline-block; }
.srs-section--dark .srs-eyebrow { color: var(--srs-accent); }
.srs-lead { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--srs-muted); max-width: 62ch; }
.srs-center { text-align: center; }
.srs-center .srs-lead { margin-inline: auto; }
.srs-measure { max-width: 68ch; }

/* ---------- Buttons ---------- */
.srs-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .04em;
	font-weight: 600; font-size: 1.02rem; line-height: 1;
	padding: .95rem 1.7rem; border-radius: var(--srs-radius);
	border: 2px solid transparent; cursor: pointer;
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), background var(--srs-transition), color var(--srs-transition);
	will-change: transform;
}
.srs-btn svg { width: 1.05em; height: 1.05em; }
.srs-btn--primary { background: var(--srs-accent); color: #1b1200; box-shadow: var(--srs-shadow-sm); }
.srs-btn--primary:hover { background: var(--srs-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--srs-shadow); }
.srs-btn--brand { background: var(--srs-brand); color: #fff; }
.srs-btn--brand:hover { background: var(--srs-brand-2); color: #fff; transform: translateY(-2px); }
.srs-btn--ghost { background: transparent; border-color: currentColor; color: var(--srs-brand-2); }
.srs-btn--ghost:hover { background: var(--srs-brand-2); color: #fff; border-color: var(--srs-brand-2); }
.srs-btn--light { background: #fff; color: var(--srs-brand-2); }
.srs-btn--light:hover { background: var(--srs-accent); color: #1b1200; transform: translateY(-2px); }
.srs-btn--lg { padding: 1.1rem 2.1rem; font-size: 1.12rem; }
.srs-btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ============================================================================
   Header / Navigation
   ============================================================================ */
.srs-topbar {
	background: var(--srs-brand-2); color: #cdd4ee;
	font-size: .86rem; letter-spacing: .02em;
}
/* Top bar aligns to the same width as the header so the phone lines up with the logo. */
.srs-topbar .srs-container { max-width: var(--srs-container-wide); }
.srs-topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem 2rem; padding-block: .7rem; }
.srs-topbar a { color: #eef1ff; font-weight: 500; }
.srs-topbar a:hover { color: var(--srs-accent); }
.srs-topbar__phone { justify-self: start; }
.srs-topbar__center { justify-self: center; display: flex; flex-wrap: wrap; gap: .5rem 2.75rem; align-items: center; justify-content: center; }
.srs-topbar__right { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.srs-topbar__phone a, .srs-topbar__center span, .srs-topbar__center a { display: inline-flex; align-items: center; gap: .55rem; }
.srs-topbar__phone svg, .srs-topbar__center svg { opacity: .8; }
.srs-topbar__social { display: flex; gap: .9rem; align-items: center; }
.srs-topbar__social a { display: inline-flex; }
.srs-topbar__social svg { width: 18px; height: 18px; }

/* "We're Hiring — Careers" secondary CTA in the top bar (distinct from the orange Contact CTA) */
.srs-topbar a.srs-topbar__cta {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .05em;
	font-weight: 700; font-size: .8rem; line-height: 1; white-space: nowrap;
	padding: .5rem .95rem; border-radius: 6px;
	background: #fff; color: var(--srs-brand-2);
	transition: background var(--srs-transition), color var(--srs-transition), transform var(--srs-transition);
}
.srs-topbar a.srs-topbar__cta:hover { background: var(--srs-accent); color: #1b1200; transform: translateY(-1px); }
.srs-topbar__cta svg { width: 15px; height: 15px; }

.srs-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--srs-line);
	transition: box-shadow var(--srs-transition);
}
.srs-header.is-stuck { box-shadow: 0 8px 24px -14px rgba(10,20,80,.4); }
.srs-header .srs-container { max-width: var(--srs-container-wide); }
.srs-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding-block: .7rem; }
.srs-logo { justify-self: start; }
.srs-logo img { max-height: 56px; width: auto; }
/* Vector logo: constrain by width so the wide horizontal lockup isn't tiny. */
.srs-logo__link { display: inline-block; line-height: 0; }
.srs-logo__link img { width: clamp(200px, 22vw, 268px); height: auto; max-height: none; }
.srs-logo .srs-logo__text { font-family: var(--srs-font-head); font-weight: 700; text-transform: uppercase; color: var(--srs-brand); font-size: 1.5rem; line-height: 1; letter-spacing: .01em; }
.srs-logo .srs-logo__text small { display: block; font-size: .62rem; letter-spacing: .18em; color: var(--srs-muted); font-weight: 600; }

.srs-nav { display: flex; align-items: center; gap: 1rem; justify-self: center; }
.srs-menu { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; }
.srs-menu a {
	display: block; font-family: var(--srs-font-head); text-transform: uppercase;
	font-weight: 600; letter-spacing: .03em; font-size: .98rem; white-space: nowrap;
	color: var(--srs-brand-2); padding: .55rem .7rem; border-radius: 8px;
	position: relative;
}
.srs-menu a:hover, .srs-menu .current-menu-item > a, .srs-menu .current_page_item > a { color: var(--srs-accent-dark); background: var(--srs-steel); }
.srs-menu .menu-item-has-children > a::after { content: "▾"; font-size: .7em; margin-left: .35em; opacity: .6; }
.srs-menu .sub-menu {
	list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: 0;
	background: #fff; box-shadow: var(--srs-shadow); border-radius: var(--srs-radius);
	min-width: 220px; display: none; z-index: 20; border: 1px solid var(--srs-line);
}
.srs-menu li { position: relative; }
.srs-menu li:hover > .sub-menu, .srs-menu li:focus-within > .sub-menu { display: block; }
.srs-menu .sub-menu a { color: var(--srs-ink); font-size: .95rem; }

.srs-header__cta { display: inline-flex; justify-self: end; }
.srs-nav-toggle { display: none; background: var(--srs-brand); color: #fff; border: 0; border-radius: 8px; padding: .6rem .75rem; cursor: pointer; }
.srs-nav-toggle svg { width: 24px; height: 24px; display: block; }

/* ============================================================================
   Hero
   ============================================================================ */
.srs-hero { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: var(--srs-brand-2); }
.srs-hero__media { position: absolute; inset: 0; z-index: -2; }
.srs-hero__media img, .srs-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.srs-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(10,20,80,.55) 0%, rgba(10,20,64,.72) 55%, rgba(8,14,50,.9) 100%),
		linear-gradient(90deg, rgba(8,14,50,.75) 0%, rgba(8,14,50,.15) 70%);
}
.srs-hero__inner { padding-block: clamp(4rem, 12vw, 8.5rem); max-width: 820px; }
.srs-hero h1 { color: #fff; margin-bottom: .35em; }
.srs-hero__sub { font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.5rem); color: var(--srs-accent); margin-bottom: 1rem; }
.srs-hero__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #e7ebff; max-width: 60ch; margin-bottom: 1.8rem; }
.srs-hero__badges { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.18); }
.srs-hero__badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: #eef1ff; }
.srs-hero__badge svg { width: 20px; height: 20px; color: var(--srs-accent); flex: 0 0 auto; }

/* ---------- Page hero (Elementor widget variant) ---------- */
.srs-hero--page { display: flex; align-items: center; }
/* Positioned so the text always paints above the bottom shape. */
.srs-hero--page .srs-hero__inner { width: 100%; position: relative; z-index: 2; }
.srs-hero--tall  { min-height: clamp(460px, 68vh, 680px); }
.srs-hero--xtall { min-height: clamp(560px, 84vh, 900px); }
/* Content directly after a page hero starts tight against it — no dead band.
   :has() is progressive: unsupported browsers just keep the normal padding. */
.elementor-section:has(.srs-hero--page) + .elementor-section .srs-section {
	padding-top: clamp(2.2rem, 4.5vw, 3.6rem);
}
/* Leave room so the fade never washes over the text. */
.srs-hero--faded .srs-hero__inner { padding-bottom: clamp(5rem, 10vw, 8rem); }

/* Restyled hero text: accent rule, tighter eyebrow, stronger headline. */
.srs-hero__text { position: relative; padding-left: clamp(1rem, 2.2vw, 1.6rem); }
.srs-hero__text::before {
	content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
	width: 4px; border-radius: 2px;
	background: linear-gradient(180deg, var(--srs-accent), rgba(245,130,10,.15));
}
.srs-hero--page .srs-hero__sub {
	font-size: clamp(.8rem, 1.3vw, .92rem);
	letter-spacing: .18em; margin-bottom: .7rem;
}
.srs-hero--page h1, .srs-hero--page h2 {
	font-size: clamp(2.3rem, 5.4vw, 4rem);
	text-transform: uppercase; margin-bottom: .5rem;
	text-shadow: 0 2px 24px rgba(4, 8, 30, .45);
}
.srs-hero--page .srs-hero__lead {
	font-size: clamp(1.05rem, 1.9vw, 1.35rem);
	color: #eef1ff; margin-bottom: 0; max-width: 52ch;
	text-shadow: 0 1px 14px rgba(4, 8, 30, .4);
}
.srs-hero--page .srs-breadcrumbs { margin-bottom: 1.4rem; }

/* Bottom fade — the hero dissolves into the section below, so there is no
   edge at all. Same smoothstep ramp as the reasons-slider seam: a plain 2-stop
   gradient reads as a visible band, this eases in and out. */
.srs-hero__fade {
	position: absolute; left: 0; right: 0; bottom: 0;
	height: clamp(90px, 16vw, 200px);
	z-index: 1; pointer-events: none;
}
.srs-hero--faded-white .srs-hero__fade {
	background: linear-gradient(180deg,
		rgba(255,255,255,0)     0%,
		rgba(255,255,255,.028)  10%,
		rgba(255,255,255,.104)  20%,
		rgba(255,255,255,.216)  30%,
		rgba(255,255,255,.352)  40%,
		rgba(255,255,255,.5)    50%,
		rgba(255,255,255,.648)  60%,
		rgba(255,255,255,.784)  70%,
		rgba(255,255,255,.896)  80%,
		rgba(255,255,255,.972)  90%,
		rgba(255,255,255,1)     100%);
}
.srs-hero--faded-alt .srs-hero__fade {
	background: linear-gradient(180deg,
		rgba(245,247,251,0)     0%,
		rgba(245,247,251,.028)  10%,
		rgba(245,247,251,.104)  20%,
		rgba(245,247,251,.216)  30%,
		rgba(245,247,251,.352)  40%,
		rgba(245,247,251,.5)    50%,
		rgba(245,247,251,.648)  60%,
		rgba(245,247,251,.784)  70%,
		rgba(245,247,251,.896)  80%,
		rgba(245,247,251,.972)  90%,
		rgba(245,247,251,1)     100%);
}
/* Track an admin-changed page background where the browser supports it. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.srs-hero--faded-white .srs-hero__fade {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--srs-bg) 0%,    transparent) 0%,
			color-mix(in srgb, var(--srs-bg) 2.8%,  transparent) 10%,
			color-mix(in srgb, var(--srs-bg) 10.4%, transparent) 20%,
			color-mix(in srgb, var(--srs-bg) 21.6%, transparent) 30%,
			color-mix(in srgb, var(--srs-bg) 35.2%, transparent) 40%,
			color-mix(in srgb, var(--srs-bg) 50%,   transparent) 50%,
			color-mix(in srgb, var(--srs-bg) 64.8%, transparent) 60%,
			color-mix(in srgb, var(--srs-bg) 78.4%, transparent) 70%,
			color-mix(in srgb, var(--srs-bg) 89.6%, transparent) 80%,
			color-mix(in srgb, var(--srs-bg) 97.2%, transparent) 90%,
			var(--srs-bg) 100%);
	}
	.srs-hero--faded-alt .srs-hero__fade {
		background: linear-gradient(180deg,
			color-mix(in srgb, var(--srs-bg-alt) 0%,    transparent) 0%,
			color-mix(in srgb, var(--srs-bg-alt) 2.8%,  transparent) 10%,
			color-mix(in srgb, var(--srs-bg-alt) 10.4%, transparent) 20%,
			color-mix(in srgb, var(--srs-bg-alt) 21.6%, transparent) 30%,
			color-mix(in srgb, var(--srs-bg-alt) 35.2%, transparent) 40%,
			color-mix(in srgb, var(--srs-bg-alt) 50%,   transparent) 50%,
			color-mix(in srgb, var(--srs-bg-alt) 64.8%, transparent) 60%,
			color-mix(in srgb, var(--srs-bg-alt) 78.4%, transparent) 70%,
			color-mix(in srgb, var(--srs-bg-alt) 89.6%, transparent) 80%,
			color-mix(in srgb, var(--srs-bg-alt) 97.2%, transparent) 90%,
			var(--srs-bg-alt) 100%);
	}
}

/* ============================================================================
   Cards / grids
   ============================================================================ */
.srs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.srs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.srs-cols-4 { grid-template-columns: repeat(4, 1fr); }

.srs-card {
	background: #fff; border: 1px solid var(--srs-line); border-radius: var(--srs-radius-lg);
	padding: 1.7rem; box-shadow: var(--srs-shadow-sm);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), border-color var(--srs-transition);
	height: 100%;
}
.srs-card:hover { transform: translateY(-4px); box-shadow: var(--srs-shadow); border-color: #cfd6ea; }
.srs-card__icon {
	width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--srs-brand), var(--srs-brand-2));
	color: #fff; margin-bottom: 1rem;
}
.srs-card__icon svg { width: 28px; height: 28px; }
.srs-card h3 { margin-bottom: .4rem; font-size: 1.3rem; color: var(--srs-brand-2); }
.srs-card p { color: var(--srs-muted); margin-bottom: 0; font-size: .98rem; }

/* ============================================================================
   Why Choose Us — bright, on-brand redesign
   ============================================================================ */
.srs-why {
	background:
		radial-gradient(120% 80% at 50% -10%, #eaf0ff 0%, rgba(234,240,255,0) 60%),
		var(--srs-bg-alt);
}
.srs-why__head { margin-bottom: clamp(2.2rem, 4vw, 3rem); }
.srs-why__title { margin: 0; color: var(--srs-brand-2); }
/* Small orange accent bar above the title */
.srs-why__accent {
	display: block; width: 54px; height: 4px; border-radius: 2px;
	background: var(--srs-accent);
	margin: 0 auto 1.1rem;
}

/* Image-synced reasons slider — one block: photo left, text panel right,
   with the fade only at the seam where the two meet. */
.srs-reasons__stage {
	position: relative; overflow: hidden;
	display: grid;
	grid-template-columns: 2fr 1fr;
	border-radius: var(--srs-radius-lg);
	box-shadow: var(--srs-shadow);
	min-height: clamp(440px, 46vw, 560px);
	background: var(--srs-brand-2);
}
.srs-reasons__media { position: relative; overflow: hidden; }
.srs-reasons__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0;
	/* Gentle symmetric ease — plain `ease` front-loads the change and reads abrupt. */
	transition: opacity .85s cubic-bezier(.4, 0, .2, 1);
}
.srs-reasons__img.is-active { opacity: 1; }

/* Seam fade: photo dissolves into the panel colour on its inner edge only.
   Stops follow a smoothstep curve — a plain 2-stop ramp reads as a visible
   edge, this eases in and out so there's no discernible start to the fade.
   Declared as variables so the horizontal (card beside) and vertical (card
   below / stacked) layouts share one curve. Fallback first, then color-mix so
   the fade tracks an admin-changed brand colour. */
/* The photo runs behind the whole block, including under the card, so the card
   can stay translucent. The seam ramp therefore stops well short of opaque —
   it only darkens enough to seat the glass panel. Smoothstep curve as before. */
.srs-reasons {
	--srs-seam-x: linear-gradient(90deg,
		rgba(10,20,80,0)     30%,
		rgba(10,20,80,.013)  37%,
		rgba(10,20,80,.047)  44%,
		rgba(10,20,80,.097)  51%,
		rgba(10,20,80,.158)  58%,
		rgba(10,20,80,.225)  65%,
		rgba(10,20,80,.292)  72%,
		rgba(10,20,80,.353)  79%,
		rgba(10,20,80,.403)  86%,
		rgba(10,20,80,.437)  93%,
		rgba(10,20,80,.45)   100%);
	--srs-seam-y: linear-gradient(180deg,
		rgba(10,20,80,0)     34%,
		rgba(10,20,80,.013)  41%,
		rgba(10,20,80,.047)  47%,
		rgba(10,20,80,.097)  53%,
		rgba(10,20,80,.158)  60%,
		rgba(10,20,80,.225)  66%,
		rgba(10,20,80,.292)  73%,
		rgba(10,20,80,.353)  80%,
		rgba(10,20,80,.403)  87%,
		rgba(10,20,80,.437)  94%,
		rgba(10,20,80,.45)   100%);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.srs-reasons {
		--srs-seam-x: linear-gradient(90deg,
			color-mix(in srgb, var(--srs-brand-2) 0%,    transparent) 30%,
			color-mix(in srgb, var(--srs-brand-2) 1.3%,  transparent) 37%,
			color-mix(in srgb, var(--srs-brand-2) 4.7%,  transparent) 44%,
			color-mix(in srgb, var(--srs-brand-2) 9.7%,  transparent) 51%,
			color-mix(in srgb, var(--srs-brand-2) 15.8%, transparent) 58%,
			color-mix(in srgb, var(--srs-brand-2) 22.5%, transparent) 65%,
			color-mix(in srgb, var(--srs-brand-2) 29.2%, transparent) 72%,
			color-mix(in srgb, var(--srs-brand-2) 35.3%, transparent) 79%,
			color-mix(in srgb, var(--srs-brand-2) 40.3%, transparent) 86%,
			color-mix(in srgb, var(--srs-brand-2) 43.7%, transparent) 93%,
			color-mix(in srgb, var(--srs-brand-2) 45%,   transparent) 100%);
		--srs-seam-y: linear-gradient(180deg,
			color-mix(in srgb, var(--srs-brand-2) 0%,    transparent) 34%,
			color-mix(in srgb, var(--srs-brand-2) 1.3%,  transparent) 41%,
			color-mix(in srgb, var(--srs-brand-2) 4.7%,  transparent) 47%,
			color-mix(in srgb, var(--srs-brand-2) 9.7%,  transparent) 53%,
			color-mix(in srgb, var(--srs-brand-2) 15.8%, transparent) 60%,
			color-mix(in srgb, var(--srs-brand-2) 22.5%, transparent) 66%,
			color-mix(in srgb, var(--srs-brand-2) 29.2%, transparent) 73%,
			color-mix(in srgb, var(--srs-brand-2) 35.3%, transparent) 80%,
			color-mix(in srgb, var(--srs-brand-2) 40.3%, transparent) 87%,
			color-mix(in srgb, var(--srs-brand-2) 43.7%, transparent) 94%,
			color-mix(in srgb, var(--srs-brand-2) 45%,   transparent) 100%);
	}
}
.srs-reasons__scrim {
	position: absolute; inset: 0; pointer-events: none;
	background: var(--srs-seam-x);
}

/* Glass card — translucent so the photo stays visible through it.
   The glass lives on a pseudo-element rather than the panel itself so it can be
   masked to a soft edge without fading the text along with it. The pseudo
   overhangs the panel by --srs-feather and the fade happens across that
   overhang, so the glass is already at full strength everywhere text sits. */
.srs-reasons__content { --srs-feather: clamp(90px, 10vw, 170px); }
.srs-reasons__content::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(10, 20, 80, .34);
	backdrop-filter: blur(16px) saturate(125%);
	-webkit-backdrop-filter: blur(16px) saturate(125%);
}
/* Without backdrop-filter the photo behind would render sharp under the text,
   so lean on a heavier tint for contrast instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.srs-reasons__content::before { background: rgba(10, 20, 80, .74); }
}

/* Position: card beside the photo (photo spans the full block behind it). */
.srs-reasons--side .srs-reasons__media { position: absolute; inset: 0; }
.srs-reasons--side .srs-reasons__content { grid-column: 2; }
.srs-reasons--side .srs-reasons__content::before {
	left: calc(-1 * var(--srs-feather));
	-webkit-mask-image: linear-gradient(90deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
		rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
		rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
		rgba(0,0,0,1)   var(--srs-feather));
	mask-image: linear-gradient(90deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
		rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
		rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
		rgba(0,0,0,1)   var(--srs-feather));
}

/* Position: card over the bottom of the photo. */
.srs-reasons--bottom .srs-reasons__stage { grid-template-columns: 1fr; }
.srs-reasons--bottom .srs-reasons__media { position: absolute; inset: 0; }
.srs-reasons--bottom .srs-reasons__scrim { background: var(--srs-seam-y); }
.srs-reasons--bottom .srs-reasons__content {
	align-self: end;               /* hug the bottom instead of filling the block */
	justify-content: flex-end;
	padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.6rem, 4vw, 3rem);
}
.srs-reasons--bottom .srs-reasons__content::before {
	top: calc(-1 * var(--srs-feather));
	-webkit-mask-image: linear-gradient(180deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
		rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
		rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
		rgba(0,0,0,1)   var(--srs-feather));
	mask-image: linear-gradient(180deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
		rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
		rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
		rgba(0,0,0,1)   var(--srs-feather));
}
.srs-reasons--bottom .srs-reasons__slides {
	min-height: clamp(235px, 24vw, 290px);
	max-width: 760px;
}
.srs-reasons--bottom .srs-reasons__slide h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.srs-reasons--bottom .srs-reasons__slide p { font-size: .98rem; }

.srs-reasons__content {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(1.6rem, 2.6vw, 2.4rem);
	color: #fff;
}
.srs-reasons__slides { position: relative; flex: 0 1 auto; min-height: clamp(355px, 38vw, 450px); }
.srs-reasons__slide {
	position: absolute; inset: 0 auto auto 0; width: 100%;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.srs-reasons__slide.is-active {
	opacity: 1; visibility: visible; transform: none;
	transition: opacity .45s ease .1s, transform .45s ease .1s;
}
.srs-reasons__icon {
	width: 54px; height: 54px; margin-bottom: 1rem; border-radius: 12px;
	display: grid; place-items: center;
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.35);
	color: var(--srs-accent);
}
.srs-reasons__icon svg { width: 28px; height: 28px; }
.srs-reasons__slide h3 { color: #fff; margin-bottom: .6rem; font-size: clamp(1.55rem, 2.4vw, 2.1rem); }
.srs-reasons__slide p { color: rgba(255,255,255,.88); margin-bottom: 0; font-size: .95rem; }

/* Control bar — sits below the block, outside both the photo and the card. */
.srs-reasons__nav {
	display: flex; align-items: center; gap: 1rem;
	margin-top: 1.6rem;
}
.srs-reasons__arrow {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer; border: none;
	background: linear-gradient(135deg, #2f4bf2 0%, var(--srs-brand) 100%);
	color: #fff;
	box-shadow: 0 10px 20px -8px rgba(15, 34, 160, .55);
	transition: transform var(--srs-transition), background var(--srs-transition), box-shadow var(--srs-transition);
}
.srs-reasons__arrow svg { width: 20px; height: 20px; }
.srs-reasons__arrow--prev svg { transform: scaleX(-1); }
.srs-reasons__arrow:hover {
	background: linear-gradient(135deg, var(--srs-accent) 0%, var(--srs-accent-dark) 100%);
	transform: scale(1.08);
	box-shadow: 0 12px 24px -8px rgba(245, 130, 10, .6);
}
.srs-reasons__dots { display: flex; align-items: center; gap: .5rem; margin-inline: auto; }
.srs-reasons__dot {
	position: relative; overflow: hidden;
	width: 9px; height: 9px; border-radius: 50%; padding: 0; border: none; cursor: pointer;
	background: var(--srs-line);
	transition: background var(--srs-transition), width var(--srs-transition), border-radius var(--srs-transition);
}
.srs-reasons__dot:hover { background: #c3ccdf; }
.srs-reasons__dot.is-active { width: 26px; border-radius: 5px; background: var(--srs-accent); }

/* While autoplaying, the active dot becomes a progress track that fills. */
.srs-reasons.is-auto .srs-reasons__dot.is-active { background: var(--srs-line); }
.srs-reasons.is-auto .srs-reasons__dot.is-active::after {
	content: ""; position: absolute; inset: 0; border-radius: 5px;
	background: var(--srs-accent);
	transform-origin: left; transform: scaleX(0);
	animation: srs-dotfill var(--srs-autoplay, 6s) linear forwards;
}
.srs-reasons.is-paused .srs-reasons__dot.is-active::after { animation-play-state: paused; }
@keyframes srs-dotfill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
	.srs-reasons__arrow:hover { transform: none; }
	.srs-reasons__slide { transition: opacity .3s ease; }
}
/* Stacked: photo on top, panel below — seam fade flips to vertical. */
@media (max-width: 860px) {
	/* Both positions collapse to the same overlay: photo fills, card hugs the bottom. */
	.srs-reasons__stage { grid-template-columns: 1fr; min-height: clamp(500px, 118vw, 620px); }
	.srs-reasons--side .srs-reasons__media,
	.srs-reasons--bottom .srs-reasons__media { position: absolute; inset: 0; }
	.srs-reasons__scrim { background: var(--srs-seam-y); }
	.srs-reasons--side .srs-reasons__content,
	.srs-reasons--bottom .srs-reasons__content {
		grid-column: 1;
		align-self: end;
		justify-content: flex-end;
		padding: clamp(1.4rem, 5vw, 2rem);
	}
	/* Feather flips to vertical for the stacked overlay. */
	.srs-reasons--side .srs-reasons__content::before,
	.srs-reasons--bottom .srs-reasons__content::before {
		left: 0;
		top: calc(-1 * var(--srs-feather));
		-webkit-mask-image: linear-gradient(180deg,
			rgba(0,0,0,0) 0,
			rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
			rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
			rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
			rgba(0,0,0,1)   var(--srs-feather));
		mask-image: linear-gradient(180deg,
			rgba(0,0,0,0) 0,
			rgba(0,0,0,.10) calc(var(--srs-feather) * .25),
			rgba(0,0,0,.35) calc(var(--srs-feather) * .5),
			rgba(0,0,0,.72) calc(var(--srs-feather) * .75),
			rgba(0,0,0,1)   var(--srs-feather));
	}
	.srs-reasons__slides,
	.srs-reasons--bottom .srs-reasons__slides { min-height: 300px; max-width: none; }
}

/* Service card with image */
.srs-service {
	position: relative; border-radius: var(--srs-radius-lg); overflow: hidden;
	min-height: 320px; display: flex; align-items: flex-end; color: #fff;
	box-shadow: var(--srs-shadow-sm); isolation: isolate;
}
.srs-service img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s ease; }
.srs-service::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,20,64,0) 30%, rgba(8,14,50,.92) 100%); }
.srs-service:hover img { transform: scale(1.06); }
.srs-service__body { padding: 1.6rem; }
.srs-service__body h3 { color: #fff; margin-bottom: .35rem; }
.srs-service__body p { color: #dfe4f5; font-size: .95rem; margin-bottom: .9rem; }
.srs-service__link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--srs-font-head); text-transform: uppercase; font-weight: 600; letter-spacing: .05em; color: var(--srs-accent); }
.srs-service__link::after { content: "→"; transition: transform var(--srs-transition); }
.srs-service:hover .srs-service__link::after { transform: translateX(4px); }

/* Reasons / feature list */
.srs-reason { display: flex; gap: 1rem; align-items: flex-start; }
.srs-reason__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--srs-steel); color: var(--srs-brand); }
.srs-section--dark .srs-reason__icon { background: rgba(255,255,255,.08); color: var(--srs-accent); }
.srs-reason__icon svg { width: 26px; height: 26px; }
.srs-reason h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.srs-reason p { color: var(--srs-muted); margin-bottom: 0; font-size: .96rem; }
.srs-section--dark .srs-reason p { color: #c4cbe6; }

/* ============================================================================
   Community / Stewardship — image + text, with stewardship cards beneath
   ============================================================================ */
.srs-community__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(1.8rem, 4vw, 3.6rem);
	align-items: center;
}
.srs-community__media {
	position: relative; margin: 0;
	border-radius: var(--srs-radius-lg);
	overflow: hidden;
	box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
}
.srs-community__media img {
	width: 100%; height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
/* Slight navy wash so the photo sits inside the dark section rather than on it. */
.srs-community__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(150deg, rgba(10,20,80,.18) 0%, rgba(10,20,80,0) 40%, rgba(10,20,80,.55) 100%);
}
.srs-community__badge {
	position: absolute; left: clamp(.9rem, 2vw, 1.4rem); bottom: clamp(.9rem, 2vw, 1.4rem);
	z-index: 1;
	display: flex; align-items: center; gap: .8rem;
	padding: .75rem 1.1rem .75rem .8rem;
	border-radius: 12px;
	background: rgba(8, 14, 50, .55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	/* Beat the global `figcaption/.wp-caption-text { text-align: center }` rule. */
	text-align: left;
	margin: 0;
}
.srs-community__badge-icon {
	flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
	display: grid; place-items: center;
	background: rgba(245, 130, 10, .18);
	border: 1px solid rgba(245, 130, 10, .45);
	color: var(--srs-accent);
}
.srs-community__badge-icon svg { width: 20px; height: 20px; }
.srs-community__badge-text { display: flex; flex-direction: column; gap: .12rem; text-align: left; }
.srs-community__badge-text strong {
	color: #fff;
	font-family: var(--srs-font-head); font-size: 1.05rem; line-height: 1.1;
}
.srs-community__badge-text > span { font-size: .82rem; color: rgba(255, 255, 255, .78); line-height: 1.3; }
.srs-community__text p:last-child { margin-bottom: 0; }
.srs-community__text .srs-lead { color: #eaeefc; max-width: none; }

@media (max-width: 860px) {
	.srs-community__grid { grid-template-columns: 1fr; }
}

/* Materials / chips */
.srs-chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.srs-chips li {
	background: #fff; border: 1px solid var(--srs-line); border-left: 4px solid var(--srs-accent);
	padding: .55rem .95rem; border-radius: 8px; font-weight: 600; color: var(--srs-brand-2);
	font-size: .95rem; box-shadow: var(--srs-shadow-sm);
}
.srs-section--alt .srs-chips li { background: #fff; }

/* ============================================================================
   Materials / Commercial services — spec-sheet card + numbered list
   (replaces the pill chips on the homepage "Scrap Metal Recycling" section;
   .srs-chips above is still used by interior page content, so it stays)
   ============================================================================ */
.srs-matcard {
	background: #fff;
	border: 1px solid var(--srs-line);
	border-radius: var(--srs-radius-lg);
	box-shadow: var(--srs-shadow-sm);
	padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
}
.srs-matlist {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr);
	column-gap: clamp(1rem, 2.5vw, 2.2rem);
}
.srs-matlist li {
	display: flex; align-items: center; gap: .8rem;
	padding: .62rem .1rem;
	border-bottom: 1px solid var(--srs-line);
	font-weight: 600; font-size: .97rem;
	color: var(--srs-brand-2);
	transition: color var(--srs-transition);
}
.srs-matlist li:last-child { border-bottom: none; }
.srs-matlist__icon {
	flex: 0 0 auto;
	width: 36px; height: 36px; border-radius: 10px;
	display: grid; place-items: center;
	background: rgba(245, 130, 10, .1);
	border: 1px solid rgba(245, 130, 10, .3);
	color: var(--srs-accent);
	transition: background var(--srs-transition), color var(--srs-transition), transform var(--srs-transition);
}
.srs-matlist__icon svg { width: 19px; height: 19px; }
.srs-matlist li:hover { color: var(--srs-brand); }
.srs-matlist li:hover .srs-matlist__icon {
	background: var(--srs-accent); color: #fff; transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce) {
	.srs-matlist li:hover .srs-matlist__icon { transform: none; }
}

.srs-commcard {
	background: var(--srs-brand-2);
	border-radius: var(--srs-radius-lg);
	box-shadow: var(--srs-shadow);
	padding: clamp(1.5rem, 3vw, 2.3rem);
	color: #dfe4f5;
}
.srs-commcard__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--srs-font-head); text-transform: uppercase;
	letter-spacing: .16em; font-weight: 600; font-size: .78rem;
	color: var(--srs-accent); margin-bottom: .5rem;
}
.srs-commcard__eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--srs-accent); }
.srs-commcard h3 { color: #fff; margin-bottom: .5rem; }
.srs-commcard > p { color: rgba(255, 255, 255, .78); margin-bottom: 1.2rem; }

.srs-numlist { counter-reset: srsnum; list-style: none; margin: 0; padding: 0; }
.srs-numlist li {
	counter-increment: srsnum;
	display: flex; align-items: center; gap: 1rem;
	padding: .8rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
	color: #fff; font-weight: 600; font-size: .98rem;
	transition: padding-left var(--srs-transition);
}
.srs-numlist li:last-child { border-bottom: none; padding-bottom: 0; }
.srs-numlist li::before {
	content: counter(srsnum, decimal-leading-zero);
	flex: 0 0 auto; min-width: 2.2ch;
	font-family: var(--srs-font-head); font-weight: 700; font-size: 1.15rem;
	color: var(--srs-accent); letter-spacing: .02em;
}
.srs-numlist li:hover { padding-left: .35rem; }
@media (prefers-reduced-motion: reduce) {
	.srs-numlist li:hover { padding-left: 0; }
}
@media (max-width: 460px) {
	.srs-matlist { grid-template-columns: 1fr; }
}

/* Definition columns for materials with headings */
.srs-matcol h4 { color: var(--srs-brand); border-bottom: 2px solid var(--srs-steel); padding-bottom: .5rem; margin-bottom: .9rem; }
.srs-matcol ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.4rem; }
.srs-matcol li { padding: .3rem 0 .3rem 1.4rem; position: relative; break-inside: avoid; color: var(--srs-ink); }
.srs-matcol li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 8px; background: var(--srs-accent); border-radius: 2px; }

/* ============================================================================
   Stat / trust band
   ============================================================================ */
.srs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.srs-stat__num { font-family: var(--srs-font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; color: var(--srs-accent); line-height: 1; }
.srs-stat__label { font-weight: 600; color: #dfe4f5; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; margin-top: .4rem; }

/* Fancy stat cards (icon + number + label) */
.srs-statband__head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.srs-statband__head h2 { margin: 0; }
.srs-statcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.srs-statcard {
	position: relative;
	text-align: center;
	padding: 2.2rem 1.35rem 1.9rem;
	border-radius: var(--srs-radius-lg);
	background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
	border: 1px solid rgba(255,255,255,.12);
	overflow: hidden;
	transition: transform var(--srs-transition), border-color var(--srs-transition), box-shadow var(--srs-transition);
}
.srs-statcard::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--srs-accent), transparent);
	background-size: 200% 100%;
	opacity: .8;
	animation: srs-statshimmer 3.5s linear infinite;
}
.srs-statcard:hover { transform: translateY(-6px); border-color: rgba(245,130,10,.5); box-shadow: 0 20px 44px -20px rgba(0,0,0,.65); }
.srs-statcard__icon {
	width: 62px; height: 62px; margin: 0 auto 1.1rem;
	display: grid; place-items: center; border-radius: 50%;
	color: var(--srs-accent);
	background: rgba(245,130,10,.12);
	border: 1px solid rgba(245,130,10,.35);
	transition: transform var(--srs-transition), background var(--srs-transition);
}
.srs-statcard:hover .srs-statcard__icon { transform: scale(1.06); background: rgba(245,130,10,.2); }
.srs-statcard__icon svg { width: 28px; height: 28px; }

/* Staggered icon pop-in when the cards scroll into view */
.srs-statcard.is-in .srs-statcard__icon { animation: srs-iconpop .6s cubic-bezier(.2,.8,.3,1.15) backwards; }
.srs-statcards .srs-statcard:nth-child(1).is-in .srs-statcard__icon { animation-delay: .05s; }
.srs-statcards .srs-statcard:nth-child(2).is-in .srs-statcard__icon { animation-delay: .18s; }
.srs-statcards .srs-statcard:nth-child(3).is-in .srs-statcard__icon { animation-delay: .31s; }
.srs-statcards .srs-statcard:nth-child(4).is-in .srs-statcard__icon { animation-delay: .44s; }
@keyframes srs-iconpop {
	0%   { opacity: 0; transform: scale(.35) translateY(8px); }
	60%  { opacity: 1; transform: scale(1.12) translateY(0); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes srs-statshimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.srs-statcard::before { animation: none; }
	.srs-statcard.is-in .srs-statcard__icon { animation: none; }
}
.srs-statcard__num { font-family: var(--srs-font-head); font-size: clamp(2.6rem, 5vw, 3.7rem); font-weight: 700; color: #fff; line-height: 1; }
.srs-statcard__label { margin-top: .55rem; font-weight: 600; color: #c4cbe6; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }

/* ============================================================================
   CTA band
   ============================================================================ */
.srs-cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--srs-brand); color: #fff; border-radius: var(--srs-radius-lg); }
.srs-cta-band--full { border-radius: 0; }
.srs-cta-band__media { position: absolute; inset: 0; z-index: -2; }
.srs-cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.srs-cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,34,160,.94), rgba(10,20,80,.82)); }
.srs-cta-band__inner { padding: clamp(2.4rem, 5vw, 4rem); display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem 2.5rem; align-items: center; }
.srs-cta-band h2 { color: #fff; margin-bottom: .4rem; }
.srs-cta-band p { color: #e2e7ff; margin-bottom: 0; }
.srs-cta-band__actions { display: flex; flex-direction: column; gap: .8rem; }
@media (max-width: 800px){ .srs-cta-band__inner { grid-template-columns: 1fr; } }

/* ============================================================================
   Contact section
   ============================================================================ */
.srs-contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.srs-info-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.1rem; }
.srs-info-list li { display: flex; gap: .9rem; align-items: flex-start; }
.srs-info-list__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--srs-steel); color: var(--srs-brand); display: grid; place-items: center; }
.srs-info-list__icon svg { width: 22px; height: 22px; }
.srs-info-list__label { font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--srs-muted); }
.srs-info-list__value { font-weight: 600; color: var(--srs-brand-2); font-size: 1.05rem; display: block; }
.srs-info-list__sub { display: block; font-size: .92rem; color: var(--srs-muted); font-weight: 500; margin-top: .1rem; }
.srs-map { border-radius: var(--srs-radius-lg); overflow: hidden; box-shadow: var(--srs-shadow-sm); border: 1px solid var(--srs-line); }
.srs-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.srs-map--placeholder { min-height: 340px; display: grid; place-items: center; background: var(--srs-steel); color: var(--srs-muted); text-align: center; padding: 2rem; }

/* Contact form */
.srs-form { display: grid; gap: 1rem; }
.srs-form .srs-field { display: grid; gap: .35rem; }
.srs-form label { font-weight: 600; color: var(--srs-brand-2); font-size: .92rem; }
.srs-form input:not([type="submit"]):not([type="button"]), .srs-form select, .srs-form textarea {
	font: inherit; width: 100%; padding: .8rem .9rem; border: 1.5px solid var(--srs-line); border-radius: 8px;
	background: #fff; color: var(--srs-ink); transition: border-color var(--srs-transition), box-shadow var(--srs-transition);
}
.srs-form input:not([type="submit"]):not([type="button"]):focus, .srs-form select:focus, .srs-form textarea:focus { border-color: var(--srs-brand); box-shadow: 0 0 0 3px rgba(15,34,160,.12); outline: none; }
.srs-form textarea { min-height: 130px; resize: vertical; }
.srs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.srs-form__note { font-size: .82rem; color: var(--srs-muted); }
.srs-form__msg { padding: .9rem 1.1rem; border-radius: 8px; font-weight: 600; }
.srs-form__msg--ok { background: #e7f7ec; color: #12653a; border: 1px solid #b6e2c6; }
.srs-form__msg--err { background: #fdecec; color: #a11919; border: 1px solid #f3c2c2; }

/* ============================================================================
   Page hero (interior pages)
   ============================================================================ */
.srs-pagehead { position: relative; color: #fff; overflow: hidden; isolation: isolate; background: var(--srs-brand-2); }
.srs-pagehead__media { position: absolute; inset: 0; z-index: -2; }
.srs-pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.srs-pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,20,80,.72), rgba(8,14,50,.86)); }
.srs-pagehead__inner { padding-block: clamp(3rem, 8vw, 5.5rem); }
.srs-pagehead h1 { color: #fff; margin-bottom: .3rem; }
.srs-pagehead__sub { color: var(--srs-accent); font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.35rem); }
.srs-breadcrumbs { font-size: .85rem; color: #c4cbe6; margin-bottom: 1rem; }
.srs-breadcrumbs a { color: #fff; }
.srs-breadcrumbs span { opacity: .6; margin: 0 .4rem; }

/* ============================================================================
   Prose (default content / fallback for Gutenberg + Elementor-free pages)
   ============================================================================ */
.srs-prose { max-width: 74ch; }
.srs-prose > * + * { margin-top: 1.1rem; }
.srs-prose h2 { margin-top: 2.2rem; }
.srs-prose h3 { margin-top: 1.8rem; color: var(--srs-brand); }
.srs-prose ul, .srs-prose ol { padding-left: 1.3rem; }
.srs-prose li { margin-bottom: .4rem; }
.srs-prose img { border-radius: var(--srs-radius); margin-block: 1.5rem; }
.srs-prose blockquote { border-left: 4px solid var(--srs-accent); padding-left: 1.2rem; color: var(--srs-muted); font-style: italic; margin-inline: 0; }

/* Two-column intro (media + text) */
.srs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.srs-split--media-right { direction: ltr; }
.srs-split__media img, .srs-split__media video { border-radius: var(--srs-radius-lg); box-shadow: var(--srs-shadow); width: 100%; }
.srs-figure { border-radius: var(--srs-radius-lg); overflow: hidden; box-shadow: var(--srs-shadow); }

/* Framed single image (Content Section media style "framed") — accent frame +
   dotted texture behind a rounded photo. */
.srs-split__media--framed { position: relative; isolation: isolate; padding: 1.5rem 1.5rem 0 0; }
.srs-split__media--framed .srs-framedimg { position: relative; z-index: 2; margin: 0; border-radius: var(--srs-radius-lg); overflow: hidden; box-shadow: var(--srs-shadow); }
.srs-split__media--framed .srs-framedimg img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.srs-split__media--framed:hover .srs-framedimg img { transform: scale(1.05); }
/* Reuse the showcase frame/dots accents; nudge for this container. */
.srs-split__media--framed .srs-showcase__frame { top: 0; right: 0; width: 55%; height: 60%; }
.srs-split__media--framed .srs-showcase__dots { left: -12px; bottom: 18px; }
.srs-split__media--framed .srs-imgcluster__badge { position: absolute; left: -14px; bottom: 34px; z-index: 4; }

/* ============================================================================
   Elementor interop — theme widgets render full-bleed sections, so Elementor's
   own section/column padding and width must not fight the theme's .srs-container
   ============================================================================ */
.srs-page-content .elementor-section.elementor-section-boxed > .elementor-container { max-width: none; }
.srs-page-content .elementor-widget-srs_content_section,
.srs-page-content .elementor-widget-srs_page_hero,
.srs-page-content .elementor-widget-srs_reasons { width: 100%; }
.srs-page-content .elementor-widget-wrap { padding: 0; }
.srs-page-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; }
/* Elementor sets its own text colour/size on widget wrappers; let the theme win. */
.srs-page-content .elementor-widget-srs_content_section .srs-section--dark p { color: #c4cbe6; }

/* Icon tile grid — a full-width grid of centred tiles (icon on top, label below).
   Deliberately distinct from the .srs-matlist spec-card so adjacent material
   sections read differently. */
.srs-icongrid {
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1rem;
}
.srs-icongrid li {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: .85rem;
	background: #fff; border: 1px solid var(--srs-line); border-radius: var(--srs-radius-lg);
	padding: 1.5rem 1rem; box-shadow: var(--srs-shadow-sm);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), border-color var(--srs-transition);
}
.srs-icongrid li:hover { transform: translateY(-4px); box-shadow: var(--srs-shadow); border-color: #cfd6ea; }
.srs-icongrid__icon {
	width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
	background: linear-gradient(135deg, var(--srs-brand), var(--srs-brand-2)); color: #fff;
	box-shadow: 0 6px 16px -8px rgba(15, 34, 160, .6);
}
.srs-icongrid__icon svg { width: 26px; height: 26px; }
.srs-icongrid__label {
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .03em;
	font-weight: 600; font-size: .95rem; color: var(--srs-brand-2); line-height: 1.15;
}
.srs-section--alt .srs-icongrid li { background: #fff; }
.srs-section--dark .srs-icongrid li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.srs-section--dark .srs-icongrid__label { color: #eef1ff; }
.srs-section--dark .srs-icongrid__icon { background: linear-gradient(135deg, var(--srs-accent), var(--srs-accent-dark)); color: #1b1200; }
@media (max-width: 560px) { .srs-icongrid { grid-template-columns: repeat(2, 1fr); } }

/* Icon pills — horizontal rounded pills with an accent icon circle on the left.
   A third, distinct material-list treatment (vs .srs-matlist rows and
   .srs-icongrid tiles). Reads best on a dark section. */
.srs-iconpills {
	list-style: none; margin: 1.7rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem;
}
.srs-iconpills li {
	display: flex; align-items: center; gap: .9rem;
	background: #fff; border: 1px solid var(--srs-line); border-radius: 999px;
	padding: .5rem 1.1rem .5rem .5rem; box-shadow: var(--srs-shadow-sm);
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .02em;
	font-weight: 600; font-size: .95rem; color: var(--srs-brand-2); line-height: 1.15;
	transition: transform var(--srs-transition), box-shadow var(--srs-transition);
}
.srs-iconpills li:hover { transform: translateX(4px); box-shadow: var(--srs-shadow); }
.srs-iconpills__icon {
	flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center; background: var(--srs-accent); color: #1b1200;
	box-shadow: 0 6px 14px -6px rgba(245, 130, 10, .7);
}
.srs-iconpills__icon svg { width: 22px; height: 22px; }
.srs-section--dark .srs-iconpills li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #eef1ff; }

/* Icon cards — a full-width grid of cards with an icon badge on the left,
   a growing accent bar and a lift on hover. Used for the C&D / Farm sections. */
.srs-iconcards {
	list-style: none; margin: 1.7rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
}
.srs-iconcards li {
	position: relative; overflow: hidden;
	display: flex; align-items: center; gap: 1rem;
	background: #fff; border: 1px solid var(--srs-line); border-radius: var(--srs-radius-lg);
	padding: 1.15rem 1.25rem; box-shadow: var(--srs-shadow-sm);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), border-color var(--srs-transition);
}
.srs-iconcards li::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: var(--srs-accent); transform: scaleY(0); transform-origin: top;
	transition: transform var(--srs-transition);
}
.srs-iconcards li:hover { transform: translateY(-4px); box-shadow: var(--srs-shadow); border-color: #cfd6ea; }
.srs-iconcards li:hover::before { transform: scaleY(1); }
.srs-iconcards__icon {
	flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--srs-brand), var(--srs-brand-2)); color: #fff;
	box-shadow: 0 6px 16px -8px rgba(15, 34, 160, .6);
	transition: transform var(--srs-transition);
}
.srs-iconcards li:hover .srs-iconcards__icon { transform: rotate(-6deg) scale(1.06); }
.srs-iconcards__icon svg { width: 26px; height: 26px; }
.srs-iconcards__label {
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .02em;
	font-weight: 600; font-size: 1rem; color: var(--srs-brand-2); line-height: 1.2;
}
/* Grey-section variant (Farm) — orange icon badges for a distinct-but-related look. */
.srs-section--alt .srs-iconcards__icon { background: linear-gradient(135deg, var(--srs-accent), var(--srs-accent-dark)); color: #1b1200; box-shadow: 0 6px 16px -8px rgba(245, 130, 10, .7); }
.srs-section--dark .srs-iconcards li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.srs-section--dark .srs-iconcards__label { color: #eef1ff; }
@media (prefers-reduced-motion: reduce) {
	.srs-iconcards li:hover .srs-iconcards__icon { transform: none; }
}
@media (max-width: 560px) { .srs-iconcards { grid-template-columns: 1fr; } }

/* Plain variant of the materials list (no icon tiles) for generic lists. */
.srs-matlist--plain li { gap: .6rem; }
.srs-matlist--plain li::before {
	content: ""; flex: 0 0 auto;
	width: 8px; height: 8px; border-radius: 2px;
	background: var(--srs-accent); transform: rotate(45deg);
}
.srs-section--dark .srs-matcard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.srs-section--dark .srs-matlist li { color: #eef1ff; border-bottom-color: rgba(255,255,255,.12); }
/* When the image sits on the left, flip the text column's order. */
.srs-split__text--second { order: 2; }

/* ============================================================================
   About Company intro — layered image cluster + aligned text (enterprise look)
   ============================================================================ */
.srs-about-intro { position: relative; overflow: hidden; }
.srs-about-intro::before {
	content: ""; position: absolute; top: -120px; right: -140px; width: 420px; height: 420px;
	background: radial-gradient(circle at center, rgba(15,34,160,.06), transparent 70%); z-index: 0; pointer-events: none;
}
.srs-about-intro__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center;
}
.srs-about-intro__text > * + * { margin-top: 1.05rem; }
.srs-about-intro__text h2 { margin-top: .5rem; }
.srs-about-intro__text .srs-btn-row { margin-top: 1.6rem; }

/* Feature checklist */
.srs-featurelist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.srs-featurelist li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--srs-brand-2); }
.srs-featurelist svg { width: 22px; height: 22px; color: var(--srs-accent); flex: 0 0 auto; }

/* Image cluster */
.srs-imgcluster { position: relative; padding: 1.6rem 2.4rem 3rem 0; isolation: isolate; }
.srs-imgcluster__main { position: relative; z-index: 2; margin: 0; border-radius: var(--srs-radius-lg); overflow: hidden; box-shadow: var(--srs-shadow); }
.srs-imgcluster__main img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.srs-imgcluster:hover .srs-imgcluster__main img { transform: scale(1.06); }

/* offset accent frame behind, top-left */
.srs-imgcluster__frame {
	position: absolute; top: 0; left: -18px; width: 58%; height: 62%; z-index: 1;
	border: 3px solid var(--srs-accent); border-radius: var(--srs-radius-lg); opacity: .55;
}
/* dotted texture, top-right */
.srs-imgcluster__dots {
	position: absolute; top: -6px; right: 6px; width: 120px; height: 96px; z-index: 1;
	background-image: radial-gradient(var(--srs-brand) 2px, transparent 2.5px);
	background-size: 15px 15px; opacity: .22;
}
/* overlapping detail image, bottom-right */
.srs-imgcluster__sub {
	position: absolute; right: 0; bottom: 0; z-index: 3; width: 45%; margin: 0;
	border-radius: var(--srs-radius); overflow: hidden; border: 6px solid #fff;
	box-shadow: var(--srs-shadow);
}
.srs-imgcluster__sub img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* floating heritage badge, bottom-left */
.srs-imgcluster__badge {
	position: absolute; left: -14px; bottom: 46px; z-index: 4;
	display: flex; align-items: center; gap: .75rem;
	background: var(--srs-brand-2); color: #fff; padding: .95rem 1.25rem;
	border-radius: var(--srs-radius); box-shadow: var(--srs-shadow);
}
.srs-imgcluster__num { font-family: var(--srs-font-head); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--srs-accent); }
.srs-imgcluster__lbl { font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; line-height: 1.15; font-weight: 600; }

/* ============================================================================
   Media slider (image carousel) — Elementor "Media Slider" widget
   ============================================================================ */
.srs-split--slider { gap: clamp(2rem, 5vw, 4.5rem); }
.srs-mslider { position: relative; isolation: isolate; padding: 1.4rem 1.4rem 0 0; }
/* offset accent frame behind, top-right */
.srs-mslider__frame {
	position: absolute; top: 0; right: 0; width: 62%; height: 60%; z-index: 0;
	border: 3px solid var(--srs-accent); border-radius: var(--srs-radius-lg); opacity: .5;
}
.srs-mslider__viewport {
	position: relative; z-index: 1; overflow: hidden;
	border-radius: var(--srs-radius-lg); box-shadow: var(--srs-shadow);
	background: var(--srs-brand-2);
}
.srs-mslider__track { display: flex; transition: transform .6s cubic-bezier(.5, .05, .2, 1); will-change: transform; }
.srs-mslider__slide { position: relative; flex: 0 0 100%; margin: 0; }
.srs-mslider__slide img {
	display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transform: scale(1.001);
}
/* Ken Burns on the active slide for a premium feel. */
.srs-mslider.is-live .srs-mslider__slide.is-active img { animation: srs-kenburns 7s ease-out both; }
@keyframes srs-kenburns { from { transform: scale(1.001); } to { transform: scale(1.09); } }
.srs-mslider__cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 2.6rem 1.3rem 1.1rem; color: #fff;
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .04em;
	font-weight: 600; font-size: 1.02rem;
	background: linear-gradient(180deg, rgba(8,14,50,0) 0%, rgba(8,14,50,.85) 100%);
}
/* Arrows */
.srs-mslider__nav {
	position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
	width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--srs-brand-2);
	display: grid; place-items: center; box-shadow: var(--srs-shadow-sm);
	transition: background var(--srs-transition), color var(--srs-transition), transform var(--srs-transition);
}
.srs-mslider__nav:hover { background: var(--srs-accent); color: #1b1200; }
.srs-mslider__nav svg { width: 24px; height: 24px; }
.srs-mslider__nav--prev { left: .7rem; }
.srs-mslider__nav--prev svg { transform: rotate(180deg); }
.srs-mslider__nav--next { right: .7rem; }
.srs-mslider__nav:hover { transform: translateY(-50%) scale(1.06); }
/* Slide counter */
.srs-mslider__count {
	position: absolute; z-index: 3; top: 1.4rem; right: .6rem;
	background: var(--srs-accent); color: #1b1200; border-radius: 999px;
	padding: .35rem .85rem; font-family: var(--srs-font-head); font-weight: 700;
	font-size: .85rem; letter-spacing: .06em; box-shadow: var(--srs-shadow-sm);
	display: inline-flex; gap: .3rem; align-items: center;
}
.srs-mslider__sep { opacity: .55; }
/* Dots */
.srs-mslider__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.srs-mslider__dot {
	width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
	background: var(--srs-line); transition: background var(--srs-transition), transform var(--srs-transition);
}
.srs-mslider__dot:hover { background: var(--srs-muted); }
.srs-mslider__dot.is-active { background: var(--srs-accent); transform: scale(1.25); }
.srs-section--dark .srs-mslider__dot { background: rgba(255,255,255,.28); }
.srs-section--dark .srs-mslider__dot.is-active { background: var(--srs-accent); }
@media (prefers-reduced-motion: reduce) {
	.srs-mslider__track { transition: none; }
	.srs-mslider.is-live .srs-mslider__slide.is-active img { animation: none; }
}
@media (max-width: 860px) {
	.srs-mslider { padding: 1rem 1rem 0 0; }
	.srs-mslider__slide img { aspect-ratio: 3 / 2; }
}

/* ============================================================================
   Feature Showcase — framed image + numbered feature list (editorial "why us")
   ============================================================================ */
.srs-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
@media (max-width: 900px) { .srs-showcase { grid-template-columns: 1fr; } }

/* media */
.srs-showcase__media { position: relative; isolation: isolate; padding: 1.6rem 1.6rem 0 0; }
.srs-showcase__img { position: relative; z-index: 2; margin: 0; border-radius: var(--srs-radius-lg); overflow: hidden; box-shadow: var(--srs-shadow); }
.srs-showcase__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.srs-showcase__media:hover .srs-showcase__img img { transform: scale(1.05); }
.srs-showcase__frame { position: absolute; top: 0; right: 0; width: 56%; height: 62%; z-index: 1; border: 3px solid var(--srs-accent); border-radius: var(--srs-radius-lg); opacity: .55; }
.srs-showcase__dots { position: absolute; left: -12px; bottom: 22px; width: 116px; height: 92px; z-index: 0; background-image: radial-gradient(currentColor 2px, transparent 2.5px); background-size: 15px 15px; opacity: .16; color: var(--srs-brand); }
.srs-section--dark .srs-showcase__dots { color: #fff; opacity: .18; }
.srs-showcase__badge { position: absolute; left: -14px; bottom: 40px; z-index: 3; display: flex; align-items: center; gap: .75rem; background: var(--srs-accent); color: #1b1200; padding: .9rem 1.2rem; border-radius: var(--srs-radius); box-shadow: var(--srs-shadow); }
.srs-showcase__badge-num { font-family: var(--srs-font-head); font-weight: 700; font-size: 2.1rem; line-height: 1; }
.srs-showcase__badge-lbl { font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; line-height: 1.15; font-weight: 600; }

/* numbered feature list */
.srs-featurenum { list-style: none; margin: 1.7rem 0 0; padding: 0; }
.srs-featurenum li { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.15rem 0; border-top: 1px solid var(--srs-line); }
.srs-featurenum li:first-child { border-top: 0; padding-top: .3rem; }
.srs-section--dark .srs-featurenum li { border-top-color: rgba(255,255,255,.14); }
.srs-featurenum__marker {
	flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center;
	font-family: var(--srs-font-head); font-weight: 700; font-size: 1.45rem; color: var(--srs-accent);
	background: rgba(245, 130, 10, .1); border: 1.5px solid rgba(245, 130, 10, .38);
	transition: background var(--srs-transition), color var(--srs-transition), transform var(--srs-transition);
}
.srs-featurenum__marker svg { width: 26px; height: 26px; }
.srs-featurenum li:hover .srs-featurenum__marker { background: var(--srs-accent); color: #1b1200; transform: translateY(-2px); }
.srs-featurenum__body h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.srs-featurenum__body p { margin: 0; font-size: .96rem; }
@media (prefers-reduced-motion: reduce) {
	.srs-showcase__media:hover .srs-showcase__img img { transform: none; }
	.srs-featurenum li:hover .srs-featurenum__marker { transform: none; }
}

/* ============================================================================
   Service Area Map (Leaflet) — full-bleed map + area list
   ============================================================================ */
.srs-servicemap-section { position: relative; overflow: hidden; }
/* The container overlaps the map, so let the mouse pass through its empty area
   to the map beneath — otherwise it swallows hover on every pin except the ones
   out in the exposed strip. Only the list itself re-captures pointer events. */
.srs-servicemap-section .srs-container { position: relative; z-index: 2; pointer-events: none; }
.srs-servicemap__list { max-width: 44%; pointer-events: auto; }

/* Area list */
.srs-arealist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.4rem; }
.srs-arealist li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--srs-brand-2); }
.srs-arealist li svg { width: 20px; height: 20px; color: var(--srs-accent); flex: 0 0 auto; }
.srs-section--dark .srs-arealist li { color: #eef1ff; }

/* Full-bleed map: fills the block height, runs to the right viewport edge. */
.srs-servicemap__map { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; z-index: 1; }
.srs-servicemap-section--map-left .srs-servicemap__map { right: auto; left: 0; }
.srs-servicemap, .srs-servicemap__canvas { width: 100%; height: 100%; }
.srs-servicemap { position: relative; }
.srs-servicemap__canvas { background: var(--srs-steel); }

/* Fade the map into the section on the inner (left), top and bottom edges;
   the right edge stays at the viewport for a clean full-bleed. */
.srs-servicemap__fade {
	position: absolute; inset: 0; z-index: 450; pointer-events: none;   /* fades tiles; markers (600) & tooltips (650) stay crisp */
	background:
		linear-gradient(90deg,  var(--srs-bg) 0%, rgba(255,255,255,0) 38%),
		linear-gradient(180deg, var(--srs-bg) 0%, rgba(255,255,255,0) 15%),
		linear-gradient(0deg,   var(--srs-bg) 0%, rgba(255,255,255,0) 15%);
}
.srs-section--alt .srs-servicemap__fade {
	background:
		linear-gradient(90deg,  var(--srs-bg-alt) 0%, rgba(245,247,251,0) 38%),
		linear-gradient(180deg, var(--srs-bg-alt) 0%, rgba(245,247,251,0) 15%),
		linear-gradient(0deg,   var(--srs-bg-alt) 0%, rgba(245,247,251,0) 15%);
}
.srs-section--dark .srs-servicemap__fade {
	background:
		linear-gradient(90deg,  var(--srs-brand-2) 0%, rgba(10,20,80,0) 38%),
		linear-gradient(180deg, var(--srs-brand-2) 0%, rgba(10,20,80,0) 15%),
		linear-gradient(0deg,   var(--srs-brand-2) 0%, rgba(10,20,80,0) 15%);
}
/* When the map sits on the left, fade its right (inner) edge instead. */
.srs-servicemap-section--map-left .srs-servicemap__fade {
	background:
		linear-gradient(270deg, var(--srs-bg) 0%, rgba(255,255,255,0) 38%),
		linear-gradient(180deg, var(--srs-bg) 0%, rgba(255,255,255,0) 15%),
		linear-gradient(0deg,   var(--srs-bg) 0%, rgba(255,255,255,0) 15%);
}
.srs-servicemap-section--map-left.srs-section--dark .srs-servicemap__fade {
	background:
		linear-gradient(270deg, var(--srs-brand-2) 0%, rgba(10,20,80,0) 38%),
		linear-gradient(180deg, var(--srs-brand-2) 0%, rgba(10,20,80,0) 15%),
		linear-gradient(0deg,   var(--srs-brand-2) 0%, rgba(10,20,80,0) 15%);
}

/* Leaflet chrome tuned to the brand */
.srs-servicemap .leaflet-container { font-family: var(--srs-font-body); background: var(--srs-steel); }
.srs-servicemap .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.75); }

@media (max-width: 900px) {
	/* Stack: content first, then the map as a normal full-width block below. */
	.srs-servicemap-section { min-height: 0 !important; display: flex; flex-direction: column; }
	.srs-servicemap-section .srs-container { pointer-events: auto; order: 1; }
	.srs-servicemap__map { position: relative; width: 100%; height: 340px; margin-top: 2rem; order: 2; }
	.srs-servicemap__list { max-width: none; }
	.srs-servicemap__fade { display: none; }
}
@media (max-width: 480px) { .srs-arealist { grid-template-columns: 1fr; } }

/* Custom brand pin markers */
.srs-map-pin-wrap { background: none; border: 0; }
.srs-map-pin { display: block; width: 30px; height: 40px; color: var(--srs-brand); filter: drop-shadow(0 4px 6px rgba(10,20,80,.4)); transition: transform .2s ease; transform-origin: 50% 100%; }
.srs-map-pin svg { width: 100%; height: 100%; fill: currentColor; }
.srs-map-pin__dot { fill: #fff; }
.srs-map-pin-wrap:hover .srs-map-pin { transform: scale(1.15); }
.srs-map-pin--home { color: var(--srs-accent); }
.srs-map-pin--home::after {
	content: ""; position: absolute; left: 50%; top: 34px; width: 10px; height: 10px; margin-left: -5px;
	border-radius: 50%; background: var(--srs-accent); opacity: .6;
	animation: srs-pin-pulse 1.8s ease-out infinite;
}
@keyframes srs-pin-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.4); opacity: 0; } }
.srs-map-tip { background: var(--srs-brand-2); color: #fff; border: 0; border-radius: 6px; font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; font-weight: 600; box-shadow: var(--srs-shadow-sm); }
.srs-map-tip::before { border-top-color: var(--srs-brand-2); }
@media (prefers-reduced-motion: reduce) { .srs-map-pin--home::after { animation: none; } }

/* ============================================================================
   Product Grid (Metal Sales catalogue) — category cards with icon bullets
   ============================================================================ */
.srs-prodcard { display: flex; flex-direction: column; }
.srs-prodcard__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.srs-prodcard__head .srs-card__icon { margin-bottom: 0; width: 46px; height: 46px; }
.srs-prodcard__head .srs-card__icon svg { width: 24px; height: 24px; }
.srs-prodcard__head h3 { margin: 0; font-size: 1.2rem; }
.srs-prodlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.srs-prodlist li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: var(--srs-ink); font-size: .97rem; }
.srs-prodlist li svg { width: 17px; height: 17px; color: var(--srs-accent); flex: 0 0 auto; }
.srs-section--dark .srs-prodlist li { color: #eef1ff; }
.srs-prodcard__note { margin: .9rem 0 0; font-size: .84rem; color: var(--srs-muted); font-style: italic; }
.srs-prodgrid__foot { margin: 1.6rem 0 0; font-size: .84rem; color: var(--srs-muted); text-align: center; }
.srs-section--dark .srs-prodcard__note, .srs-section--dark .srs-prodgrid__foot { color: #c4cbe6; }

/* "Capability groups" style — a borderless group with a header + wrapping pills.
   Distinct from the bordered spec cards; reads best on a dark band. */
.srs-prodgroups { align-items: start; }
.srs-prodgroup__head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.srs-section:not(.srs-section--dark) .srs-prodgroup__head { border-bottom-color: var(--srs-line); }
.srs-prodgroup__icon {
	flex: 0 0 auto; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--srs-accent), var(--srs-accent-dark)); color: #1b1200;
	box-shadow: 0 6px 16px -8px rgba(245, 130, 10, .7);
}
.srs-prodgroup__icon svg { width: 26px; height: 26px; }
.srs-prodgroup__head h3 { margin: 0; font-size: 1.35rem; }
.srs-prodpills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.srs-prodpills li {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .55rem 1rem; border-radius: 999px;
	background: #fff; border: 1px solid var(--srs-line); box-shadow: var(--srs-shadow-sm);
	font-weight: 600; font-size: .96rem; color: var(--srs-brand-2);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition);
}
.srs-prodpills li:hover { transform: translateY(-2px); box-shadow: var(--srs-shadow); }
.srs-prodpills li svg { width: 15px; height: 15px; color: var(--srs-accent); flex: 0 0 auto; }
.srs-section--dark .srs-prodpills li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #eef1ff; }

/* ============================================================================
   Member / partner logo wall
   ============================================================================ */
.srs-logogrid__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.srs-logogrid__head h2, .srs-logogrid__head h3 { margin: 0; }
.srs-logogrid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: clamp(1rem, 2vw, 1.5rem);
}
.srs-logogrid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.srs-logogrid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.srs-logogrid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.srs-logogrid__link {
	position: relative; overflow: hidden;
	display: grid; place-items: center; text-align: center;
	/* Fixed ratio => every card is exactly the same width AND height. */
	aspect-ratio: 2 / 1;
	padding: clamp(1.1rem, 2.4vw, 1.9rem);
	background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
	border: 1px solid var(--srs-line);
	border-radius: var(--srs-radius-lg);
	box-shadow: var(--srs-shadow-sm);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), border-color var(--srs-transition);
}
/* Brand rule that wipes in on hover, matching the Why Choose Us cards. */
a.srs-logogrid__link::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--srs-brand), var(--srs-accent));
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--srs-transition);
}
a.srs-logogrid__link:hover::before { transform: scaleX(1); }
a.srs-logogrid__link:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 44px -22px rgba(15, 34, 160, .38);
	border-color: #cfd6ea;
}
a.srs-logogrid__link:focus-visible { transform: translateY(-5px); }
/* Logos are pre-normalised onto one canvas, so contain-fitting places them identically. */
.srs-logogrid__link img {
	width: 100%; height: 100%;
	object-fit: contain;
	transition: filter var(--srs-transition), opacity var(--srs-transition), transform var(--srs-transition);
}
a.srs-logogrid__link:hover img { transform: scale(1.04); }
/* Mixed-colour third-party logos read more consistently muted, colour on hover. */
.srs-logogrid--muted .srs-logogrid__link img { filter: grayscale(1); opacity: .68; }
.srs-logogrid--muted a.srs-logogrid__link:hover img,
.srs-logogrid--muted a.srs-logogrid__link:focus-visible img { filter: none; opacity: 1; }
/* Name plate shown until a logo is supplied. */
.srs-logogrid__name {
	font-family: var(--srs-font-head); text-transform: uppercase;
	font-weight: 700; font-size: clamp(.95rem, 1.5vw, 1.1rem); line-height: 1.2;
	letter-spacing: .03em; color: var(--srs-brand-2);
	max-width: 22ch;
}
.srs-logogrid__item.is-placeholder .srs-logogrid__link {
	background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
	border-style: dashed;
}
.srs-section--dark .srs-logogrid__link { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.srs-section--dark .srs-logogrid__name { color: #fff; }
@media (prefers-reduced-motion: reduce) {
	a.srs-logogrid__link:hover { transform: none; }
	a.srs-logogrid__link:hover img { transform: none; }
}
@media (max-width: 860px) {
	.srs-logogrid--cols-3, .srs-logogrid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.srs-logogrid { grid-template-columns: 1fr; }
}

/* Notice / placeholder flag for client review */
.srs-notice {
	border: 1px dashed var(--srs-accent); background: #fff8ef; color: #7a4a00;
	border-radius: var(--srs-radius); padding: 1rem 1.2rem; font-size: .95rem;
}
.srs-notice strong { color: #a35a00; }
body.logged-in .srs-notice::before { content: "⚑ Editor note — "; font-weight: 700; }

/* ============================================================================
   Footer
   ============================================================================ */
.srs-footer {
	position: relative;
	background: var(--srs-brand-2);
	color: #b9c1e0;
	padding-top: clamp(3rem, 6vw, 4.75rem);
}
/* Thin brand rule across the very top of the footer. */
.srs-footer::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--srs-brand) 0%, var(--srs-accent) 55%, var(--srs-brand) 100%);
}
.srs-footer a { color: #dfe4f5; }
.srs-footer a:hover { color: var(--srs-accent); }
.srs-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
	gap: clamp(1.8rem, 3.5vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}
.srs-footer__logo img { max-height: 52px; width: auto; margin-bottom: 1.1rem; }
.srs-footer__logo .srs-logo__link { display: inline-block; line-height: 0; margin-bottom: 1.1rem; }
.srs-footer__logo .srs-logo__link img { width: clamp(190px, 20vw, 240px); height: auto; max-height: none; margin-bottom: 0; }
.srs-footer__col--brand p { font-size: .95rem; line-height: 1.7; max-width: 42ch; }
.srs-footer h4 {
	color: #fff; text-transform: uppercase; letter-spacing: .1em;
	font-size: .9rem; margin-bottom: 1.15rem;
	display: flex; align-items: center; gap: .6rem;
}
/* Small accent tick before each column heading. */
.srs-footer h4::before {
	content: ""; width: 16px; height: 2px; background: var(--srs-accent); flex: 0 0 auto;
}
.srs-footer__menu { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.srs-footer__menu a {
	display: inline-block; padding: .18rem 0; font-size: .95rem;
	transition: transform var(--srs-transition), color var(--srs-transition);
}
.srs-footer__menu a:hover { transform: translateX(3px); }
.srs-footer__contact { display: grid; gap: .9rem; font-size: .95rem; padding: 0; margin: 0; }
.srs-footer__contact li { display: flex; gap: .75rem; align-items: flex-start; list-style: none; }
.srs-footer__contact svg { width: 17px; height: 17px; color: var(--srs-accent); flex: 0 0 auto; margin-top: .28rem; }
.srs-footer__contact ul { padding: 0; margin: 0; }

/* "Part of the ABC Recycling family" lockup */
.srs-footer__abc {
	display: flex; align-items: center; gap: 1rem;
	margin-top: 1.5rem; padding: 1rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--srs-radius);
	background: rgba(255, 255, 255, .04);
	max-width: 26rem;
}
.srs-footer__abc img { width: 74px; height: auto; flex: 0 0 auto; opacity: .95; }
.srs-footer__abc span {
	font-size: .84rem; line-height: 1.45; color: #c9d1ec;
	font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .06em;
}

.srs-footer__social { display: flex; gap: .7rem; margin-top: 1.4rem; }
.srs-footer__social a {
	width: 40px; height: 40px; border-radius: 10px;
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
	display: grid; place-items: center;
	transition: background var(--srs-transition), transform var(--srs-transition), border-color var(--srs-transition);
}
.srs-footer__social a:hover { background: var(--srs-accent); border-color: var(--srs-accent); transform: translateY(-2px); }
.srs-footer__social svg { width: 20px; height: 20px; }
.srs-footer__bar {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-block: 1.4rem;
	display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
	justify-content: space-between; align-items: center;
	font-size: .85rem; color: #97a1c8;
}
.srs-footer__bar a { text-decoration: underline; text-underline-offset: 2px; }
.srs-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; list-style: none; padding: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.srs-footer__menu a:hover { transform: none; }
	.srs-footer__social a:hover { transform: none; }
}
.srs-credit { opacity: .85; }
.srs-credit-fallback {
	background: var(--srs-brand-2); color: #97a1c8;
	text-align: center; font-size: .85rem;
	padding: 1rem clamp(1.1rem, 4vw, 2rem);
}
.srs-credit-fallback a { color: #dfe4f5; text-decoration: underline; text-underline-offset: 2px; }

/* Floating mobile call bar */
.srs-callbar { display: none; }

/* ============================================================================
   WP core / accessibility
   ============================================================================ */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.srs-skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--srs-accent); color: #1b1200; padding: .7rem 1.2rem; font-weight: 700; border-radius: 0 0 8px 0; }
.srs-skip-link:focus { left: 0; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: .3rem 1.4rem 1rem 0; }
.alignright { float: right; margin: .3rem 0 1rem 1.4rem; }
.wp-caption-text, figcaption { font-size: .85rem; color: var(--srs-muted); text-align: center; margin-top: .4rem; }

/* Reveal on scroll */
.srs-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.srs-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.srs-reveal { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto; }
	.srs-service img { transition: none; }
}

/* ============================================================================
   Responsive
   ============================================================================ */
@media (max-width: 1000px) {
	.srs-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.srs-stats { grid-template-columns: repeat(2, 1fr); }
	.srs-statcards { grid-template-columns: repeat(2, 1fr); }
	.srs-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.srs-topbar__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
	.srs-topbar__phone, .srs-topbar__center, .srs-topbar__right { justify-self: center; }
	.srs-topbar__center { gap: .35rem 1.6rem; }
	.srs-header__inner { display: flex; justify-content: space-between; }
	.srs-header__cta { display: none; }
	.srs-nav-toggle { display: inline-flex; }
	.srs-menu {
		position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px); flex-direction: column;
		background: #fff; padding: 5rem 1.2rem 2rem; gap: .2rem; box-shadow: -10px 0 40px -10px rgba(10,20,80,.4);
		transform: translateX(100%); transition: transform var(--srs-transition); overflow-y: auto; z-index: 90;
	}
	.srs-menu.is-open { transform: none; }
	.srs-menu a { font-size: 1.15rem; padding: .8rem .6rem; border-bottom: 1px solid var(--srs-line); border-radius: 0; }
	.srs-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: 1rem; min-width: 0; }
	.srs-nav-backdrop { position: fixed; inset: 0; background: rgba(8,14,50,.5); z-index: 80; opacity: 0; visibility: hidden; transition: opacity var(--srs-transition); }
	.srs-nav-backdrop.is-open { opacity: 1; visibility: visible; }
	.srs-split, .srs-contact-grid { grid-template-columns: 1fr; }
	.srs-about-intro__grid { grid-template-columns: 1fr; gap: 2.6rem; }
	.srs-imgcluster { padding: 1rem 2rem 2.6rem 0; max-width: 560px; }
	.srs-cols-2, .srs-cols-3 { grid-template-columns: 1fr; }
	.srs-card--feature { grid-column: span 1; }
	.srs-callbar {
		display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
		box-shadow: 0 -6px 20px -8px rgba(0,0,0,.35);
	}
	.srs-callbar a { flex: 1; text-align: center; padding: .95rem; font-family: var(--srs-font-head); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: .5rem; }
	.srs-callbar a:first-child { background: var(--srs-accent); color: #1b1200; }
	.srs-callbar a:last-child { background: var(--srs-brand); color: #fff; }
	.srs-callbar svg { width: 20px; height: 20px; }
	body { padding-bottom: 3.4rem; }
}
@media (max-width: 560px) {
	.srs-cols-4 { grid-template-columns: 1fr; }
	.srs-matcol ul { columns: 1; }
	.srs-form__row { grid-template-columns: 1fr; }
	.srs-footer__grid { grid-template-columns: 1fr; }
}

/* Elementor.
   A blanket `.elementor-page .srs-container { max-width: none }` used to live
   here so Elementor controlled width on Elementor pages. The theme's own
   Elementor widgets now render .srs-container themselves, so that reset made
   those pages full-bleed instead of boxed like the rest of the site. Width is
   left to .srs-container; individual widgets go edge-to-edge via their own
   full-bleed section backgrounds, exactly as the hardcoded homepage does. */
.srs-elementor-canvas .srs-site-main { padding: 0; }

/* ============================================================================
   Contact page — info panel, form panel, Contact Form 7 styling
   ========================================================================== */
.srs-contact-split { position: relative; }
.srs-contact-split .elementor-column-wrap,
.srs-contact-split .elementor-widget-wrap { align-content: start; }

/* --- Contact info panel --- */
.srs-contactinfo { max-width: 30rem; }
.srs-contactinfo__title { margin: .35rem 0 .5rem; }
.srs-contactinfo .srs-lead { margin-bottom: 1.5rem; }
.srs-contactinfo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.srs-contactinfo__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.srs-contactinfo__ic {
	width: 46px; height: 46px; flex: none; border-radius: 12px;
	display: grid; place-items: center;
	background: linear-gradient(150deg, var(--srs-brand) 0%, var(--srs-brand-2) 100%);
	color: #fff; box-shadow: 0 6px 16px rgba(15,34,160,.18);
}
.srs-contactinfo__ic svg { width: 22px; height: 22px; }
.srs-contactinfo__label { display: block; font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--srs-accent); font-weight: 700; margin-bottom: .15rem; }
.srs-contactinfo__val { font-size: 1.05rem; line-height: 1.5; color: var(--srs-ink); font-weight: 500; }
.srs-contactinfo__val a { color: var(--srs-brand-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--srs-transition), color var(--srs-transition); }
.srs-contactinfo__val a:hover { color: var(--srs-brand); border-bottom-color: currentColor; }
.srs-contactinfo__cta { margin-top: 1.6rem; }
.srs-contactinfo__corp {
	margin-top: 1.8rem; padding: 1.1rem 1.25rem; border-radius: 14px;
	background: #fff; border: 1px solid var(--srs-line); box-shadow: 0 8px 24px rgba(10,20,80,.05);
}
.srs-contactinfo__corp-title { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--srs-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; font-weight: 700; color: var(--srs-brand-2); margin-bottom: .5rem; }
.srs-contactinfo__corp-title svg { width: 18px; height: 18px; color: var(--srs-accent); }
.srs-contactinfo__corp p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--srs-muted); }
.srs-contactinfo__corp a { color: var(--srs-brand); text-decoration: none; }
.srs-contactinfo__corp a:hover { text-decoration: underline; }

/* --- Contact form panel --- */
.srs-contactform--panel {
	background: #fff; border: 1px solid var(--srs-line); border-radius: 18px;
	padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: 0 20px 50px rgba(10,20,80,.10);
}
.srs-contactform__title { margin: .35rem 0 .5rem; }
.srs-contactform .srs-lead { margin-bottom: 1.4rem; font-size: 1.05rem; }
.srs-req { color: var(--srs-accent); }
.srs-opt { color: var(--srs-muted); font-weight: 400; font-size: .85em; }

/* --- Contact Form 7 output normalisation --- */
.srs-contactform .wpcf7 { margin: 0; }
.srs-form--cf7 .wpcf7-form-control-wrap { display: block; }
.srs-form--cf7 select.wpcf7-form-control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a1450' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .95rem center; padding-right: 2.4rem; }
.srs-form--cf7 input.srs-btn { width: auto; }
.srs-form--cf7 .srs-btn-row { margin-top: .3rem; }
.wpcf7-not-valid-tip { color: #a11919; font-size: .82rem; font-weight: 600; margin-top: .3rem; display: block; }
.srs-form--cf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #e0b4b4; box-shadow: 0 0 0 3px rgba(161,25,25,.08); }
.wpcf7-response-output { margin: 1.2rem 0 0 !important; padding: .9rem 1.1rem !important; border-radius: 10px !important; border-width: 1px !important; font-weight: 600; font-size: .95rem; }
.wpcf7 form.sent .wpcf7-response-output { background: #e7f7ec; border-color: #b6e2c6 !important; color: #12653a; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: #fdecec; border-color: #f3c2c2 !important; color: #a11919; }
.wpcf7-spinner { margin: 0 0 0 .8rem; background-color: var(--srs-brand); }
.srs-contactform .wpcf7-form.submitting .srs-btn { opacity: .7; pointer-events: none; }

@media (max-width: 1024px) {
	.srs-contactinfo { max-width: none; }
}
@media (max-width: 767px) {
	.srs-contactform--panel { padding: 1.3rem; }
}

/* ============================================================================
   Value Cards (Careers "Our Culture & Values")
   ========================================================================== */
.srs-valuecards__head { max-width: 760px; margin-bottom: 2.4rem; }
.srs-valuecards__head.srs-center { margin-inline: auto; }
.srs-valuecards__head h2, .srs-valuecards__head h3 { margin: .4rem 0 .8rem; }
.srs-valuecards__intro > p { color: var(--srs-muted); font-size: 1.06rem; line-height: 1.7; margin: 0 0 .9rem; }
.srs-valuecards__intro > p:last-child { margin-bottom: 0; }
.srs-section--dark .srs-valuecards__intro > p { color: #cdd4ea; }

.srs-valuecards { display: grid; gap: 1.4rem; }
.srs-valuecards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.srs-valuecards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.srs-valuecards--cols-4 { grid-template-columns: repeat(4, 1fr); }

.srs-valuecard {
	background: #fff; border: 1px solid var(--srs-line); border-radius: 16px;
	padding: 1.7rem 1.6rem; box-shadow: 0 10px 30px rgba(10,20,80,.05);
	transition: transform var(--srs-transition), box-shadow var(--srs-transition), border-color var(--srs-transition);
}
.srs-valuecard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(10,20,80,.12); border-color: transparent; }
.srs-valuecard__icon {
	display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
	background: linear-gradient(150deg, var(--srs-brand) 0%, var(--srs-brand-2) 100%);
	color: #fff; box-shadow: 0 8px 18px rgba(15,34,160,.22); margin-bottom: 1.1rem;
}
.srs-valuecard__icon svg { width: 26px; height: 26px; }
.srs-valuecard:nth-child(4n+2) .srs-valuecard__icon { background: linear-gradient(150deg, var(--srs-accent) 0%, var(--srs-accent-dark, #c8630a) 100%); box-shadow: 0 8px 18px rgba(245,130,10,.28); }
.srs-valuecard__title { font-size: 1.24rem; margin: 0 0 .5rem; color: var(--srs-brand-2); }
.srs-valuecard__text { margin: 0; color: var(--srs-muted); line-height: 1.65; font-size: 1rem; }

.srs-section--dark .srs-valuecard { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none; }
.srs-section--dark .srs-valuecard__title { color: #fff; }
.srs-section--dark .srs-valuecard__text { color: #cdd4ea; }

@media (max-width: 960px) {
	.srs-valuecards--cols-3, .srs-valuecards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.srs-valuecards { grid-template-columns: 1fr !important; }
}
