/* ============================================================
   INDUSTRIAL & COUNCIL FACILITY WORKS — tabbed section
   ============================================================ */

/* Self-contained box sizing so the section never depends on the
   global reset being present. */
.es-icw,
.es-icw *,
.es-icw *::before,
.es-icw *::after { box-sizing: border-box; }

.es-icw {
	padding: 100px 0 54px;
	background: var(--off-white);
	/* The site applies `section { overflow-x: clip }` to stop sideways
	   scroll. This section opts out of that so nothing inside it is
	   clipped - the tab row does its own horizontal scrolling. */
	overflow: visible;
}

/* ---- section padding override -----------------------------------
   The homepage sets one vertical rhythm on every non-hero <section>:
   padding-top/bottom 100px on desktop and 60px on phones, both
   !important. The service-area line is the last thing in this section,
   so that padding is the gap underneath it. Override it with a higher
   specificity than the global rule so the gap can be tighter. */
section.es-icw:not(.sf-feature-bar):not([class*="hero"]) {
	padding-top: 100px !important;
	padding-bottom: 54px !important;
}
@media (max-width: 700px) {
	section.es-icw:not(.sf-feature-bar):not([class*="hero"]) {
		padding-top: 56px !important;
		padding-bottom: 36px !important;
	}
}

/* ---- header ---------------------------------------------------- */
.es-icw__head {
	max-width: 860px;
	margin: 0 auto 40px;
	text-align: center;
}
.es-icw__head .section-label { justify-content: center; }
.es-icw__head .section-title { margin-bottom: 14px; }
.es-icw__head .section-sub {
	margin: 0 auto;
	max-width: 660px;
}

/* ---- tab bar --------------------------------------------------- */
.es-icw__tabwrap { position: relative; }
.es-icw__tabs {
	display: flex;
	justify-content: flex-start;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 36px;
	padding: 6px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 50, 30, .05);
	/* Scrolls rather than overflowing if the tabs ever get too wide. */
	overflow-x: auto;
	scrollbar-width: none;
}
.es-icw__tabs::-webkit-scrollbar { display: none; }
.es-icw__tab {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--text-main);
	font-family: 'Oswald', sans-serif;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 12px 18px;
	min-height: 44px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: background-color .2s ease, color .2s ease;
}
.es-icw__tab:hover { background: rgba(0, 77, 44, .07); color: var(--green); }
.es-icw__tab[aria-selected="true"] { background: var(--green); color: var(--white); }
.es-icw__tab[aria-selected="true"]:hover { background: var(--green-dark); color: var(--white); }
.es-icw__tab i { font-size: .85em; margin-right: 8px; opacity: .9; }

/* The full label is shown on desktop; phones use the short one so more
   tabs fit on screen. The button's aria-label always carries the full
   name, and the short label is a subset of it. */
.es-icw__tab-s { display: none; }

/* Focus ring reads against the pale tab bar in both states. */
.es-icw__tab:focus { outline: 3px solid var(--green); outline-offset: 3px; }
.es-icw__tab:focus:not(:focus-visible) { outline: none; }
.es-icw__tab:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---- panel ----------------------------------------------------- */
.es-icw__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
	gap: 44px;
	align-items: center;
	padding: 40px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 24px;
	box-shadow: 0 14px 40px -18px rgba(0, 50, 30, .16);
	animation: es-icw-in .28s cubic-bezier(.2, .7, .3, 1) both;
}
.es-icw__panel[hidden] { display: none; }

@keyframes es-icw-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* Staggered entrance for the panel contents. */
@keyframes es-icw-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.es-icw__panel .es-icw__title,
.es-icw__panel .es-icw__benefits li,
.es-icw__panel .es-icw__note {
	animation: es-icw-rise .3s cubic-bezier(.2, .7, .3, 1) both;
}
.es-icw__panel .es-icw__benefits li:nth-child(2) { animation-delay: .05s; }
.es-icw__panel .es-icw__benefits li:nth-child(3) { animation-delay: .1s; }
.es-icw__panel .es-icw__benefits li:nth-child(4) { animation-delay: .15s; }
.es-icw__panel .es-icw__note { animation-delay: .12s; }

/* ---- heading + badge ----------------------------------------- */
.es-icw__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
}
.es-icw__badge {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--green);
	color: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.es-icw__heading {
	font-family: 'Oswald', sans-serif;
	font-size: clamp(20px, 2.1vw, 26px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.22;
	color: var(--green);
	margin: 0;
}

/* ---- benefits -------------------------------------------------- */
.es-icw__benefits {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	gap: 18px;
}
.es-icw__benefits li { display: block; }

/* The icon sits on the label line, so it always reads as part of the
   heading rather than as an image that has to be squeezed into a box. */
.es-icw__bhead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 5px;
}
.es-icw__bhead i {
	flex: 0 0 auto;
	color: var(--green);
	font-size: 15px;
	line-height: 1;
}
.es-icw__benefits strong {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--green);
	line-height: 1.25;
}
.es-icw__bbody {
	display: block;
	font-family: 'Barlow', sans-serif;
	font-size: .95rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-muted);
}

/* ---- optional callout under the bullets ------------------------ */
.es-icw__note {
	margin: 0 0 24px;
	padding: 14px 16px;
	background: var(--green-pale);
	border: 1px solid #cfe6d9;
	border-left: 3px solid var(--green);
	border-radius: 10px;
	font-family: 'Barlow', sans-serif;
	font-size: .9rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-main);
}
.es-icw__note strong { font-weight: 600; color: var(--green); }

/* The brand orange (#F8991D) with white text is only 2.2:1. Dark green on the
   same orange is 6.3:1, so the button keeps the exact brand colour and still
   meets WCAG AA. (The site-wide .btn-orange is 2.2:1 - flagged for review.) */
.es-icw__cta {
	margin-top: 0;
	background: var(--orange);
	color: var(--green-dark);
}
.es-icw__cta:hover {
	background: var(--orange-dk);
	color: var(--green-dark);
}
.es-icw__ctanote {
	margin: 10px 0 0;
	font-family: 'Barlow', sans-serif;
	font-size: .84rem;
	font-weight: 300;
	color: var(--text-muted);
}

/* ---- media ----------------------------------------------------- */
.es-icw__media { margin: 0; }
.es-icw__photo { position: relative; display: block; }

/* A green card peeking out behind the photo gives it depth, without
   relying on a hover effect to do the work. */
.es-icw__photo::before {
	content: '';
	position: absolute;
	top: 16px;
	left: 16px;
	right: -16px;
	bottom: -16px;
	background: var(--green);
	border-radius: 20px;
}
.es-icw__media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	background: var(--green-pale);
	box-shadow: 0 24px 48px -24px rgba(0, 50, 30, .45);
}
.es-icw__cap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 0;
	font-family: 'Barlow', sans-serif;
	font-size: .84rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--text-muted);
}
.es-icw__cap::before {
	content: '';
	flex: 0 0 auto;
	width: 22px;
	height: 2px;
	background: var(--orange);
}

/* Fade the photo in only when JS is running (see .es-icw--js). */
.es-icw--js .es-icw__media img { opacity: 0; transition: opacity .35s ease; }
.es-icw--js .es-icw__media img.is-ready { opacity: 1; }

/* ---- service link row ------------------------------------------ */
.es-icw__services {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.es-icw__services a {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 58px;
	padding: 12px 18px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	font-family: 'Oswald', sans-serif;
	font-size: .88rem;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--green);
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.es-icw__services a:hover {
	border-color: var(--green);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 50, 30, .08);
}
/* The icon sits inline with the label rather than inside a fixed square -
   Font Awesome glyphs have very different proportions, so a box always
   leaves some of them looking lost. */
.es-icw__services .es-icw__sicon {
	flex: 0 0 auto;
	color: var(--green);
	font-size: 1.05em;
	line-height: 1;
}
.es-icw__services .es-icw__stext { flex: 1 1 auto; min-width: 0; }
.es-icw__services a > i {
	color: var(--green);
	transition: transform .2s ease;
	margin-left: auto;
}
.es-icw__services a:hover i { transform: translateX(4px); }
.es-icw__services a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---- extra links + trust strip --------------------------------- */
.es-icw__more {
	text-align: center;
	margin: 24px 0 0;
	font-family: 'Barlow', sans-serif;
	font-size: .92rem;
	font-weight: 300;
	color: var(--text-muted);
}
.es-icw__more a {
	color: var(--green);
	font-weight: 500;
	text-decoration: underline;
}
.es-icw__more a:hover { color: var(--green-dark); }
.es-icw__more a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.es-icw__trust {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 0;
	font-family: 'Oswald', sans-serif;
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.es-icw__trust li { display: inline-flex; align-items: center; }
.es-icw__trust li + li::before {
	content: '\00b7';
	margin: 0 14px;
	color: var(--orange);
}

/* ---- service area (local SEO) ---------------------------------- */
.es-icw__area {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 9px;
	margin: 20px 0 0;
	font-family: 'Barlow', sans-serif;
	font-size: .87rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-muted);
}
.es-icw__area i { color: var(--green); font-size: .95em; flex: 0 0 auto; margin-top: 4px; }

/* ---- tablet ---------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 701px) {
	/* Two columns, so "Driveway Security" never wraps to two lines. */
	.es-icw__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.es-icw { padding: 72px 0 44px; }
	.es-icw__panel {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 26px;
	}
	.es-icw__media { order: -1; }  /* image above the copy */
	.es-icw__photo img { border-radius: 16px; }
	.es-icw__photo::before { border-radius: 16px; }
	.es-icw__services { grid-template-columns: 1fr; }
	/* tighter tabs so all four still fit without scrolling */
	.es-icw__tab { padding: 12px 13px; font-size: .74rem; letter-spacing: .03em; }
	.es-icw__tab i { margin-right: 6px; }

	/* The tab bar stays where it is in the flow. It used to stick while you
	   scrolled a tall panel, but the section is long, so the bar carried on
	   following you down past the tab content and over the service links. */
	.es-icw__tabwrap {
		position: relative;
		top: auto;
		z-index: auto;
	}
	.es-icw__tabs { box-shadow: 0 6px 18px rgba(0, 50, 30, .12); }
}

/* ---- phone ----------------------------------------------------- */
@media (max-width: 700px) {
	.es-icw { padding: 56px 0 36px; }
	.es-icw__head { margin-bottom: 28px; }
	.es-icw__tabs {
		width: 100%;
		border-radius: 14px;
		scroll-snap-type: x proximity;
	}
	.es-icw__tab { scroll-snap-align: start; flex: 0 0 auto; }

	/* On a phone the row scrolls, so make every option look like a real
	   button and make the selected one unmistakable. */
	.es-icw__tab {
		background: var(--green-pale);
		border: 1px solid #cfe6d9;
		color: var(--green);
		min-height: 48px;
		padding: 12px 14px;
		font-size: .78rem;
	}
	.es-icw__tab-t { display: none; }
	.es-icw__tab-s { display: inline; }
	.es-icw__tab:hover { background: #dceee2; color: var(--green); }
	.es-icw__tab[aria-selected="true"] {
		background: var(--green);
		border-color: var(--green);
		color: var(--white);
		box-shadow: 0 4px 12px rgba(0, 77, 44, .32);
	}
	.es-icw__tab[aria-selected="true"]:hover { background: var(--green-dark); }

	/* Fade plus a chevron on the right edge, so it is obvious the row
	   scrolls and there are more tabs off-screen. */
	.es-icw__tabwrap::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 58px;
		pointer-events: none;
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23004D2C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 15px 15px no-repeat,
			linear-gradient(to right, rgba(255, 255, 255, 0), var(--white) 78%);
	}
	.es-icw__panel { padding: 20px; border-radius: 18px; }
	.es-icw__title { gap: 12px; margin-bottom: 20px; }
	.es-icw__badge { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }

	/* Each benefit becomes its own card, so a phone screen reads as a
	   short list of cards rather than one long block of text. */
	.es-icw__benefits { gap: 10px; margin-bottom: 22px; }
	.es-icw__benefits li {
		background: var(--off-white);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 13px 14px;
	}
	.es-icw__bhead { gap: 8px; margin-bottom: 4px; }
	.es-icw__bhead i { font-size: 14px; }
	.es-icw__benefits strong { font-size: .9rem; }
	.es-icw__bbody { font-size: .9rem; }

	.es-icw__note { padding: 12px 14px; font-size: .87rem; }
	.es-icw__cta { width: 100%; justify-content: center; }

	/* Trust points become a single row of pills you can swipe. */
	.es-icw__trust {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.es-icw__trust::-webkit-scrollbar { display: none; }
	.es-icw__trust li {
		flex: 0 0 auto;
		background: var(--white);
		border: 1px solid var(--border);
		border-radius: 99px;
		padding: 7px 14px;
		font-size: .64rem;
		letter-spacing: .1em;
	}
	.es-icw__trust li + li::before { display: none; }

	.es-icw__services a { min-height: 52px; padding: 12px 16px; }
	.es-icw__area { text-align: left; justify-content: flex-start; font-size: .84rem; }
}

/* ---- no-JS fallback --------------------------------------------
   The JS adds .es-icw--js to the section root. When scripting is off
   that class is never added, so these rules apply instead: every panel
   is shown stacked and the (non-functional) tab bar is hidden.
   Written this way rather than inside <noscript> so no parser can
   promote the fallback styles into a live stylesheet. */
.es-icw:not(.es-icw--js) .es-icw__tabs { display: none !important; }
.es-icw:not(.es-icw--js) .es-icw__panel[hidden] {
	display: grid !important;
	margin-bottom: 24px;
}

/* ---- reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.es-icw__panel,
	.es-icw__panel .es-icw__title,
	.es-icw__panel .es-icw__benefits li,
	.es-icw__panel .es-icw__note { animation: none !important; }
	.es-icw__tab,
	.es-icw__services a,
	.es-icw__services i,
	.es-icw__media img { transition: none !important; }
	.es-icw__services a:hover,
	.es-icw__services a:hover i { transform: none !important; }
}