/*
 * Homepage — hero, proof bar and the section layouts that are not shared with
 * the industry pages. Registered as the "tfp-home" handle in
 * functions/function-home.php and loaded AFTER tfp-industry, whose --ind-*
 * variables (current live colours and fonts, rebrand behind .tfp-rebrand) it
 * reuses. No box-shadows, no gradients, radius 4px, colour fades only.
 */

/* ---- Hero: video behind a flat ink overlay ------------------------------ */

.home-hero {
	position: relative;
	overflow: hidden;
	background: var(--ind-ink);
	color: var(--ind-white);
}
.home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}
.home-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 53, 86, .78);                          /* dark-navy, fallback */
	background: color-mix(in srgb, var(--ind-ink) 78%, transparent);
}
.home-hero > .row {
	position: relative;
	z-index: 1;
	min-height: clamp(520px, 62vh, 700px);
	display: flex;
	align-items: center;
	padding: clamp(3rem, 7vw, 6rem) var(--ind-gutter);
}
.home-hero__copy { max-width: 700px; }
.home-hero__eyebrow { color: var(--ind-yellow); }
.home-hero__title {
	margin: 0 0 1.25rem;
	color: var(--ind-white);
	font-size: clamp(38px, 4.6vw, 64px);
	line-height: 1.04;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.home-hero__lead {
	margin: 0 0 1.75rem;
	max-width: 58ch;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.6;
	color: var(--ind-n200);
}
.home-hero__lead strong { color: var(--ind-white); font-weight: 600; }
.home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}
.home-hero__ctas .button { margin: 0; }
.home-hero__secondary { color: var(--ind-white); border-bottom-color: transparent; }
.home-hero__secondary:hover,
.home-hero__secondary:focus { color: var(--ind-yellow); border-bottom-color: var(--ind-yellow); }
.home-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ind-n200);
}
.home-hero__dot { color: rgba(255, 255, 255, .35); }

/* ---- Proof bar --------------------------------------------------------- */

.home-proof {
	background: var(--ind-ink);                                  /* navy (Danny, 2026-09-13: not the teal) */
	color: var(--ind-white);
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.home-proof > .row { padding-left: var(--ind-gutter); padding-right: var(--ind-gutter); }
.home-proof__list {
	list-style: none;
	margin: 0;
	padding: 2rem 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 1rem;
}
.home-proof__item {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	border-left: 3px solid var(--ind-yellow);
	padding-left: 1rem;
}
.home-proof__value {
	font-size: 34px;
	line-height: 38px;
	font-weight: 700;
	color: var(--ind-yellow);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
.home-proof__label { font-size: 15px; line-height: 22px; color: var(--ind-n200); }
@media (min-width: 768px) {
	.home-proof__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; padding: 2.75rem 0; }
	.home-proof__value { font-size: 48px; line-height: 50px; }
}

/* ---- Logo slider (the existing gallery block, made large) -------------- */

.home-logos-section { padding-bottom: calc(var(--ind-section-y) * .8); }
.home-logos__title {
	margin: 0 0 1.5rem;
	font-size: 22px;
	line-height: 28px;
}
.home-logos__sub { color: var(--ind-muted); font-weight: 400; }
.home-logos .renoun-gallery__item { margin: 0 .5rem; }
.home-logos .renoun-gallery__img-wrapper {
	max-height: none;
	height: 120px;
	padding: 0 1.75rem;
	justify-content: center;
}
.home-logos .renoun-gallery__img {
	width: auto;
	height: auto;
	max-height: 96px;
	max-width: 100%;
	object-fit: contain;
}
.home-logos .renoun-gallery__slider-navigation { margin-top: 1rem; }
/* Phones and small tablets (Danny, 2026-09-18: "the dots are almost as big as
 * the logos"). The slider was already 2-up here, but three nested paddings —
 * row 24 + column 24 + slider 45 a side — left it 204px of a 390px screen, so a
 * logo drew at about 54 x 41. The logo row now runs edge to edge, the logos get
 * the room, and the twelve pager dots drop from 18px to 8px. */
@media (max-width: 1023px) {
	.home-logos .slick-dots li,
	.home-logos .slick-dots li button { width: 10px; height: 10px; min-width: 0; min-height: 0; padding: 0; }
	.home-logos .slick-dots li { margin: 0 5px; }
}
@media (max-width: 767px) {
	.home-logos-section > .row + .row { padding-left: 0 !important; padding-right: 0 !important; }
	.home-logos-section > .row + .row > .column { padding-left: 0; padding-right: 0; }
	.home-logos .renoun-gallery__slider-container { padding-left: 0 !important; padding-right: 0 !important; }   /* the gallery block's own 45px a side */
	.home-logos .renoun-gallery__item { margin: 0 .25rem; }
	.home-logos .renoun-gallery__img-wrapper { height: 104px; padding: 0 .75rem; }
	.home-logos .renoun-gallery__img { max-height: 80px; }
	.home-logos .slick-dots li,
	.home-logos .slick-dots li button { width: 8px; height: 8px; }
	.home-logos .slick-dots li { margin: 0 4px; }
	.home-logos .renoun-gallery__slider-navigation { margin-top: .5rem; }
}

/* ---- Split section heads (head left, intro + link right) --------------- */

.home-split__aside { display: flex; flex-direction: column; justify-content: flex-end; }
.home-split__aside .ind-lead { margin-bottom: .75rem; }
.home-split__link { margin: 0 0 1.5rem; }
@media (min-width: 1024px) {
	.home-split__aside { padding-left: 2rem; padding-bottom: .25rem; }
	.home-split__aside .ind-lead { margin-bottom: .5rem; }
	.home-split__link { margin-bottom: 1.6rem; }
}

/* ---- Tiles: a 4-up on top of the industry 2 / 3 ------------------------- */

@media (min-width: 640px)  { .ind-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ind-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Full-bleed tile rows (Danny, 2026-09-13): the section head stays in the
 * content width, the cards run edge to edge behind a wider gutter. The parent
 * theme pins .row's max-width with !important, hence the same here. Case
 * studies use auto-fit so a fourth or fifth post simply joins the row. */
.ind-section > .row.home-bleed {
	max-width: none !important;
	width: 100%;
	padding-left: clamp(1.25rem, 3.5vw, 4rem);
	padding-right: clamp(1.25rem, 3.5vw, 4rem);
}
@media (min-width: 640px)  { .home-bleed .ind-tiles--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (min-width: 1280px) { .home-bleed .ind-tiles--3 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }

/* ---- People split ------------------------------------------------------ */

.home-people { background: var(--ind-n50); overflow: hidden; }
.home-people__benefits { margin-top: 2rem; }
.home-people .ind-benefits { grid-template-columns: 1fr; gap: 1.25rem; max-width: 560px; } /* a vertical list beside the photo, per the kit */
.home-people__media { margin-top: 2rem; display: flex; align-items: flex-end; justify-content: center; }
.home-people__img { width: 100%; height: auto; border-radius: var(--ind-radius); }
.home-people__media--cutout .home-people__img { border-radius: 0; max-height: 640px; width: auto; max-width: 100%; }
@media (min-width: 1024px) {
	.home-people > .row { align-items: stretch; }
	.home-people__media { margin-top: 0; }
	.home-people__media--cutout { margin-bottom: calc(var(--ind-section-y) * -1); }
}

/* ---- Process (steps + crew photo) --------------------------------------- */

.home-process__media { margin-top: 1.5rem; }
.home-process__img { width: 100%; height: auto; border-radius: var(--ind-radius); }
.home-process__tag { display: block; margin-top: .75rem; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ind-muted); }
.home-process__steps { margin-top: 2rem; }
@media (min-width: 1024px) {
	.home-process__media { margin-top: 0; padding-left: 2rem; }
	.home-process__steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.home-process__steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.home-process__steps--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- Industries chips --------------------------------------------------- */

.home-industries { background: var(--ind-n50); border-top: 1px solid var(--ind-n100); border-bottom: 1px solid var(--ind-n100); }
.home-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}
.home-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--ind-n200);
	border-radius: var(--ind-radius);
	background: var(--ind-white);
	color: var(--ind-ink);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	transition: var(--ind-fade);
}
.home-chip:hover,
.home-chip:focus { border-color: var(--ind-blue); color: var(--ind-blue); }
.home-chips__more { margin-left: .25rem; }

/* ---- Industries rail (photo cards; the chip grid's comparison, 2026-09-19) --
   Not a carousel: a native scroll-snap rail, no library, no autoplay. It took
   the chip grid's place on the homepage and its N50 band (.home-industries).

   Card size (Danny, 2026-09-19): the same as a solution card. The rail sits in
   the same .home-bleed row and column as the solution tiles, so its content
   box is exactly their grid's width and a card is (100% - 3 gaps) / 4 — four
   in view from 1024px, two from 640px like .ind-tiles--4. Then the rail alone
   is pulled out to the viewport's right edge (margin / padding of half the
   difference between the viewport and the column; the row is centred, so that
   is the distance to the edge) so the next card shows through the gutter and
   says "there is more". 100vw counts the scrollbar, hence the clip. */

.home-industries--rail { overflow-x: hidden; overflow-x: clip; }
.home-rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.home-rail__head .ind-section__head { margin-bottom: 0; }
.home-rail__tools { display: flex; align-items: center; gap: 1.25rem; flex: 0 0 auto; min-height: 44px; }
.home-rail__nav { display: flex; gap: .5rem; flex: 0 0 auto; }
.home-rail__nav[hidden] { display: none; }
.home-rail__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ind-n200);
	border-radius: var(--ind-radius);
	background: var(--ind-white);
	color: var(--ind-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: var(--ind-fade);
}
.home-rail__btn:hover:not(:disabled),
.home-rail__btn:focus-visible { border-color: var(--ind-blue); color: var(--ind-blue); }
.home-rail__btn:disabled { color: var(--ind-n200); cursor: default; }

.home-rail {
	--rail-gap: var(--ind-gap);
	--rail-show: 1.15;                     /* phones: one card and a slice of the next */
	list-style: none;
	margin: 0 calc((100% - 100vw) / 2) 0 0;
	padding: 0 calc((100vw - 100%) / 2) .75rem 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--rail-gap) * (var(--rail-show) - 1)) / var(--rail-show));
	column-gap: var(--rail-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--ind-n200) transparent;
}
@media (min-width: 640px)  { .home-rail { --rail-show: 2; } }
@media (min-width: 1024px) { .home-rail { --rail-show: 4; } }
.home-rail:focus-visible { outline: 2px solid var(--ind-blue); outline-offset: -2px; }
.home-rail__item { margin: 0; padding: 0; scroll-snap-align: start; }
.home-rail__item::before { content: none; }
.home-rail__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ind-n200);
	border-radius: var(--ind-radius);
	background: var(--ind-white);
	color: var(--ind-ink);
	overflow: hidden;
	text-decoration: none !important;
	transition: var(--ind-fade);
}
.home-rail__card:hover,
.home-rail__card:focus-visible { border-color: var(--ind-blue); color: var(--ind-blue); }
/* 16:10 like .ind-tile__img. The photo is taken out of flow: a portrait featured image (Outdoor Advertising
   is 2:3) would otherwise push its box, and so the whole row of cards, taller. */
.home-rail__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ind-n100); }
.home-rail__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.home-rail__body { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 72px; padding: 20px; }
.home-rail__title { font-weight: 700; font-size: 20px; line-height: 26px; }
.home-rail__arrow { flex: 0 0 auto; color: var(--ind-blue); }

/* ---- Testimonials ------------------------------------------------------
   Danny, 2026-09-26: one quote at a time, each with a gallery photo, on a flat
   navy band with an angled top edge (his reference; flat colour, no gradient),
   plus two ways into the gallery. A native scroll-snap track — no library, no
   autoplay (layouts/testimonials.php). Mobile first: photo over quote; from
   1024px photo left, quote right, the band running under both. */

/* The band runs straight into the next section (the navy form): no white strip between them (Danny, 2026-09-26). */
.ind-section.home-tq-section { padding-bottom: 0; }
.home-tq { position: relative; isolation: isolate; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }   /* room under the bar before the band ends (Danny, 2026-09-26) */
.home-tq::before {
	/* Full viewport width whatever the column is (html has overflow-x: clip, site-header.css). */
	content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; top: 18%; bottom: 0;
	background: var(--ind-ink);
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}
/* Desktop: the band starts at the slider's top edge and its angle clears the stars above the quote column
   (Danny, 2026-09-26: the first line sat across the edge); it still cuts behind the photo on the left. */
@media (min-width: 1024px) { .home-tq::before { top: 0; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); } }

.home-tq__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--ind-gap);
	margin: 0; padding: 0; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.home-tq__track::-webkit-scrollbar { display: none; }
.home-tq__track:focus-visible { outline: 2px solid var(--ind-yellow); outline-offset: 4px; }
.home-tq__slide { margin: 0; padding: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.home-tq__slide::before { content: none; }

.home-tq__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ind-radius); background: var(--ind-ink); }
.home-tq__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s ease-out; }
.home-tq__media:hover .home-tq__img, .home-tq__media:focus-visible .home-tq__img { transform: scale(1.03); }
.home-tq__media:focus-visible { outline: 3px solid var(--ind-yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .home-tq__img { transition: none; } .home-tq__media:hover .home-tq__img { transform: none; } }

.home-tq__body { margin: 0; flex: 1; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 0 .5rem; color: var(--ind-white); }
.home-tq__stars { display: block; flex: 0 0 auto; width: 116px; height: 20px; fill: var(--ind-yellow); }
/* The parent theme gives every blockquote a left rule and indent; reset. */
.home-tq__quote { margin: 0; padding: 0; border: 0; font-size: 19px; line-height: 1.6; color: var(--ind-white); text-wrap: pretty; }
.home-tq__by { display: flex; flex-direction: column; gap: .15rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.home-tq__name { font-weight: 700; color: var(--ind-white); }
.home-tq__context { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.home-tq__photo { margin: 0; font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .72); }
.home-tq__more { margin: 0; }
.home-tq__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ind-yellow) !important; text-decoration: none !important; }
.home-tq__more a:hover, .home-tq__more a:focus-visible { text-decoration: underline !important; }
.home-tq__slide--text .home-tq__body { padding-top: 2.5rem; }

/* Desktop: photo left, quote right; every slide the height of the tallest (the track's row). */
@media (min-width: 1024px) {
	.home-tq__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
	.home-tq__slide--text { grid-template-columns: minmax(0, 1fr); }
	.home-tq__slide--text .home-tq__body { max-width: 860px; margin: 0 auto; }
	.home-tq__media { aspect-ratio: 5 / 4; }
	.home-tq__body { padding: clamp(5rem, 9vw, 7.5rem) clamp(0rem, 3vw, 3rem) 1rem 0; gap: 1.25rem; }
	.home-tq__quote { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.5; }
}

/* The bar: prev · dots · next, and the gallery button — on the band, so white, never yellow (the form CTA follows). */
.home-tq__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; }
.home-tq__nav { display: flex; align-items: center; gap: .5rem; }
.home-tq__nav[hidden] { display: none; }
.home-tq__btn {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--ind-radius); background: transparent; color: var(--ind-white); cursor: pointer;
	transition: var(--ind-fade);
}
.home-tq__btn:hover:not(:disabled), .home-tq__btn:focus-visible { border-color: var(--ind-yellow); color: var(--ind-yellow); }
.home-tq__btn:disabled { opacity: .35; cursor: default; }
.home-tq__btn svg { display: block; width: 20px; height: 20px; }
.home-tq__dots { display: flex; }
.home-tq__dot { position: relative; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.home-tq__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background-color .15s ease-out; }
.home-tq__dot[aria-current="true"]::after { background: var(--ind-yellow); }
.home-tq__dot:focus-visible { outline: 2px solid var(--ind-yellow); outline-offset: -6px; border-radius: 6px; }
.home-tq__cta {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.5rem;
	border: 1px solid var(--ind-white); border-radius: var(--ind-radius); background: var(--ind-white);
	color: var(--ind-ink) !important; font-weight: 700; text-decoration: none !important; transition: var(--ind-fade);
}
.home-tq__cta:hover, .home-tq__cta:focus-visible { background: transparent; color: var(--ind-white) !important; }
@media (max-width: 639px) { .home-tq__cta { flex: 1 1 100%; } }

/* ---- Light version (html[data-theme="light"], the header toggle) ---------
 * Same page, light surfaces: a white wash over the hero video with ink type,
 * an N50 proof bar with navy numerals over the yellow rules, a light CTA.
 * Default (no attribute) is the navy hero above. */

html[data-theme="light"] .home-hero { background: var(--ind-white); color: var(--ind-ink); }
html[data-theme="light"] .home-hero__overlay { background: rgba(255, 255, 255, .84); background: color-mix(in srgb, var(--ind-white) 84%, transparent); }
html[data-theme="light"] .home-hero__eyebrow { color: var(--ind-blue); }
html[data-theme="light"] .home-hero__title { color: var(--ind-ink); }
html[data-theme="light"] .home-hero__lead { color: var(--ind-steel); }
html[data-theme="light"] .home-hero__lead strong { color: var(--ind-ink); }
html[data-theme="light"] .home-hero__secondary { color: var(--ind-blue); }
html[data-theme="light"] .home-hero__secondary:hover,
html[data-theme="light"] .home-hero__secondary:focus { color: var(--ind-ink); border-bottom-color: var(--ind-yellow); }
html[data-theme="light"] .home-hero__trust { color: var(--ind-muted); border-top-color: var(--ind-n200); }
html[data-theme="light"] .home-hero__dot { color: var(--ind-n200); }

html[data-theme="light"] .home-proof { background: var(--ind-n50); color: var(--ind-ink); border-top: 1px solid var(--ind-n100); border-bottom: 1px solid var(--ind-n100); }
html[data-theme="light"] .home-proof__value { color: var(--ind-ink); }
html[data-theme="light"] .home-proof__label { color: var(--ind-muted); }

/* People band in light: white panel over a white-washed site photo, ink type,
 * the accent and eyebrow in blue (yellow on white does not carry), the
 * benefit row on N50 so it separates from the white panel above it. */
html[data-theme="light"] .home-band__stage { background: var(--ind-white); color: var(--ind-ink); }
html[data-theme="light"] .home-band__overlay { background: rgba(255, 255, 255, .84); background: color-mix(in srgb, var(--ind-white) 84%, transparent); }
html[data-theme="light"] .home-band__panel::before { background: var(--ind-white); }
html[data-theme="light"] .home-band__eyebrow { color: var(--ind-blue); }
html[data-theme="light"] .home-band__eyebrow::before { background: var(--ind-yellow); }
html[data-theme="light"] .home-band__title { color: var(--ind-ink); }
html[data-theme="light"] .home-band__accent { color: var(--ind-blue); }
html[data-theme="light"] .home-band__prose,
html[data-theme="light"] .home-band__prose p { color: var(--ind-steel); }
html[data-theme="light"] .home-band__prose strong { color: var(--ind-ink); }
html[data-theme="light"] .home-band__btn { border-color: var(--ind-ink); color: var(--ind-ink); }
html[data-theme="light"] .home-band__btn:hover,
html[data-theme="light"] .home-band__btn:focus-visible { background: var(--ind-ink); border-color: var(--ind-ink); color: var(--ind-white); }
html[data-theme="light"] .home-band__tagline { color: var(--ind-ink); }
html[data-theme="light"] .home-band__benefits-row { background: var(--ind-n50); border-top-color: var(--ind-n100); border-bottom: 1px solid var(--ind-n100); }

html[data-theme="light"] .ind-section--cta { background: var(--ind-n100); }
html[data-theme="light"] .ind-section--cta .ind-eyebrow { color: var(--ind-blue); }
html[data-theme="light"] .ind-section--cta .ind-section__title { color: var(--ind-ink) !important; }
html[data-theme="light"] .ind-section--cta .ind-lead,
html[data-theme="light"] .ind-section--cta .ind-cta__prefer,
html[data-theme="light"] .ind-section--cta .ind-contact__label { color: var(--ind-steel); }
html[data-theme="light"] .ind-section--cta .ind-contact__value { color: var(--ind-blue); }
html[data-theme="light"] .ind-section--cta .ind-contact__value:hover,
html[data-theme="light"] .ind-section--cta .ind-contact__value:focus { color: var(--ind-ink); }
html[data-theme="light"] .ind-section--cta .ind-cta__secondary .ind-textlink { color: var(--ind-blue); }
html[data-theme="light"] .ind-section--cta .ind-form-card { border: 1px solid var(--ind-n200); }

/* ---- People band (second take: navy panel, photo behind, cutout, badges) --- */

.home-band { padding: 0; border-top: 0; overflow: hidden; }
.home-band__stage {
	position: relative;
	background: var(--ind-ink);
	color: var(--ind-white);
}
.home-band__bg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center;
}
.home-band__overlay {
	position: absolute; inset: 0;
	background: rgba(13, 53, 86, .72);
	background: color-mix(in srgb, var(--ind-ink) 72%, transparent);
}
.home-band__stage > .row { position: relative; z-index: 1; align-items: stretch; }
.home-band__copy { position: relative; }
.home-band__panel {
	position: relative;
	padding: clamp(2.5rem, 5vw, 4.5rem) var(--ind-gutter) clamp(2.5rem, 5vw, 4rem) 0;
}
/* The solid navy panel: runs to the left screen edge, ends in a slant. */
.home-band__panel::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -50vw; right: 0;
	background: var(--ind-ink);
	z-index: -1;
}
.home-band__eyebrow { color: var(--ind-yellow); display: flex; align-items: center; gap: .75rem; }
/* The band's way on to /our-process/ (2026-09-20). Outlined white on the navy panel: yellow is kept for "Speak with
   an Expert", one primary action per view. The theme's buttons are pills, so this one is too. */
.home-band__cta { margin: 1.75rem 0 0; }
.home-band__btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 48px;
	padding: 0 1.5rem;
	border: 2px solid var(--ind-white);
	border-radius: 999px;
	color: var(--ind-white);
	font-weight: 700;
	font-size: 17px;
	line-height: 1;
	text-decoration: none !important;
	transition: var(--ind-fade);
}
.home-band__btn:hover,
.home-band__btn:focus-visible { background: var(--ind-yellow); border-color: var(--ind-yellow); color: var(--ind-ink); }
.home-band__eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--ind-yellow); flex: none; }
.home-band__title {
	margin: 0 0 1.25rem;
	color: var(--ind-white);
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.home-band__accent { color: var(--ind-yellow); }
.home-band__prose { color: var(--ind-white); font-size: 17px; line-height: 1.6; max-width: 56ch; }
.home-band__prose p { margin-bottom: 1rem; color: var(--ind-white); } /* renoun sets p colour directly; inherit is not enough */
.home-band__prose strong { color: var(--ind-white); }
.home-band__media { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 320px; }
.home-band__people { display: block; width: auto; max-width: 100%; max-height: 560px; height: auto; margin-bottom: -1px; }
.home-band__tagline {
	position: absolute; right: var(--ind-gutter); top: clamp(1.5rem, 4vw, 3rem);
	margin: 0; max-width: 11ch;
	font-size: clamp(18px, 1.7vw, 24px); line-height: 1.3; font-style: italic; font-weight: 700;
	color: var(--ind-white); text-align: right;
}
.home-band__tagline::after { content: ""; display: block; width: 64px; height: 3px; margin: .6rem 0 0 auto; background: var(--ind-yellow); }

.home-band__benefits-row { background: var(--ind-white); padding-top: 2.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--ind-n100); }
.home-band__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.home-band__benefit { display: flex; gap: 1.25rem; align-items: flex-start; }
.home-band__badge {
	flex: none; width: 72px; height: 72px; border-radius: 50%;
	background: var(--ind-ink); color: var(--ind-white);
	display: inline-flex; align-items: center; justify-content: center;
}
.home-band__badge svg { width: 32px; height: 32px; }
.home-band__benefit-text { border-left: 3px solid var(--ind-yellow); padding-left: 1rem; }
.home-band__benefit-title { font-size: 20px; line-height: 26px; margin: 0 0 .35rem; }
.home-band__benefit-copy { margin: 0; font-size: 15px; line-height: 24px; color: var(--ind-muted); }

@media (min-width: 768px) {
	.home-band__benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
	.home-band__benefits-row { padding-top: 3rem; padding-bottom: 3rem; }
}
@media (min-width: 1024px) {
	.home-band__stage > .row { display: flex; }
	.home-band__panel { padding-right: clamp(2rem, 5vw, 5rem); height: 100%; display: flex; flex-direction: column; justify-content: center; }
	.home-band__panel::before { right: -110px; clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%); }
	.home-band__media { min-height: 520px; padding-left: 2rem; }
}
@media (max-width: 1023px) {
	.home-band__panel::before { right: -50vw; }
	.home-band__tagline { position: static; max-width: none; text-align: left; margin: 1.5rem 0 0; align-self: flex-start; }
	.home-band__tagline::after { margin-left: 0; }
	.home-band__media { flex-direction: column; align-items: stretch; }
	.home-band__people { align-self: center; max-height: 380px; }
}

/* ---- Hero, map variant (2026-09-18) --------------------------------------
 * "Your Trusted Partners for / Truly Turnkey Fall Protection Systems" beside
 * the North America network. The art is a WebP whose alpha was derived from the
 * source's luminance: the near-black background is simply transparent, so there
 * is no edge and no blend mode, and it follows whatever ink the hero has. The
 * pins are SVG, animated with keyframes only; nothing here needs a script.
 * ------------------------------------------------------------------------- */

.home-hero--map { isolation: isolate; }
.home-hero--map > .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2rem;
	min-height: clamp(480px, 58vh, 660px);
}
.home-hero--map > .row::before,
.home-hero--map > .row::after { content: none; }               /* Foundation's clearfix would become grid items */
.home-hero--map .home-hero__copy { max-width: 640px; width: auto; float: none; padding: 0; }

.home-hero__kicker {
	margin: 0 0 .5rem;
	color: var(--ind-yellow);
	font-family: var(--ind-display, inherit);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}
.home-hero--map .home-hero__title { font-size: clamp(40px, 4.4vw, 62px); }

.home-hero__map { display: none; }

@media (min-width: 640px) {
	.home-hero__map {
		display: block;
		position: relative;
		margin: 0;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: var(--ind-radius);
		background: var(--ind-ink);
	}
	.home-hero__map picture { display: contents; }
	.home-hero__map-img {
		position: absolute; inset: 0;
		width: 100%; height: 100%;
		object-fit: cover; object-position: center;
	}
	.home-hero__pins { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
}

@media (min-width: 1024px) {
	.home-hero--map > .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 3rem); }
	/* Equal air above and below: the theme leaves this row 48px on top and 96px underneath, which sat the whole hero high. */
	.home-hero--map > .row { padding-top: clamp(3.5rem, 5vw, 4.5rem) !important; padding-bottom: clamp(3.5rem, 5vw, 4.5rem) !important; }
	/* The map runs off the right edge of the content column; the clip on .home-hero trims it. */
	.home-hero__map { margin-right: calc(-1 * clamp(2rem, 8vw, 9rem)); aspect-ratio: 16 / 10; }
}

/* No yellow slice under the map hero (Danny, 2026-09-18: crossed out). The hero
 * meets the proof bar on a straight edge. */

/* theme.css still carries `.home #hero { padding-bottom: 3rem }` from the OLD
 * homepage hero, which shares the id: 48px of dead navy between this hero and
 * the proof bar. The row has its own padding. */
.home #hero.home-hero { padding-bottom: 0; }

/* Below 1024px the copy and the map stack. The base hero row is a 58vh-tall
 * box with its content centred, which is right for a full-bleed video and wrong
 * here: on a phone or tablet it put a band of empty navy above the headline.
 * So: no minimum height, content from the top, and the row's own padding
 * stated outright (the parent theme resets .row padding at small widths). */
@media (max-width: 1023px) {
	.home-hero--map > .row {
		min-height: 0;
		align-items: start;
		gap: 1.75rem;
		padding-top: clamp(2.25rem, 6vw, 3.5rem) !important;
		padding-bottom: clamp(2.25rem, 6vw, 3.5rem) !important;
		padding-left: var(--ind-gutter) !important;
		padding-right: var(--ind-gutter) !important;
	}
	.home-hero--map .home-hero__copy { max-width: 640px; }
	.home-hero--map .home-hero__trust { margin-top: 1.5rem; }
	/* Tablet: the map sits under the copy, held to a sensible width and centred. */
	.home-hero__map { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; aspect-ratio: 16 / 9; }
}

/* Pins */
.home-pin__dot { fill: #FFE98A; }
.home-pin__ring {
	fill: none; stroke: var(--ind-yellow); stroke-width: 2.5;
	transform-box: fill-box; transform-origin: center;
	opacity: 0;
	animation: home-pin-pulse 4.2s cubic-bezier(.2, .6, .35, 1) infinite;
	animation-delay: var(--d, 0s);
}
.home-pin--office .home-pin__ring { stroke-width: 3; animation-duration: 3.4s; }
.home-pin--office .home-pin__ring--2 { animation-delay: calc(var(--d, 0s) + 1.7s); }
.home-pin--lead .home-pin__ring { stroke-width: 4; }
.home-pin--lead .home-pin__dot { fill: #FFFFFF; }
.home-pin__label {
	fill: var(--ind-white);
	font: 700 22px/1 var(--ind-mono, sans-serif);
	letter-spacing: .06em; text-transform: uppercase;
	paint-order: stroke; stroke: rgba(6, 16, 30, .85); stroke-width: 6px; stroke-linejoin: round;
}
@keyframes home-pin-pulse {
	0%   { transform: scale(.35); opacity: 0; }
	12%  { opacity: .95; }
	70%  { opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* Reduced motion: the rings rest as a quiet halo, nothing moves. */
@media (prefers-reduced-motion: reduce) {
	.home-pin__ring { animation: none; opacity: .45; transform: none; }
	.home-pin__ring--2 { display: none; }
}

/* Light version (header toggle): white hero, the map keeps its ink as a card. */
html[data-theme="light"] .home-hero__kicker { color: var(--ind-blue); }
html[data-theme="light"] .home-hero__map { background: #0B1E32; }

/* ---- Rooftop Explorer promo (explorer_promo, 2026-09-27) --------------------
   The explorer's pale stage colour, its poster with the real hazard pins (deep links), one hazard card.
   Pins: white square, danger-red border, a stem down to the anchor; the carded hazard is filled, with
   the yellow ring the explorer uses for "selected". */

.home-explorer { background: #F1F3F5; border-top: 1px solid var(--ind-n100); border-bottom: 1px solid var(--ind-n100); }
.home-explorer__grid { align-items: center; row-gap: 2rem; }
.home-explorer__copy .ind-section__head { margin-bottom: 1rem; }
.home-explorer__accent { display: block; color: var(--ind-blue); }
.home-explorer__copy .ind-lead { margin: 0; }
.home-explorer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 1.75rem 0 0; }
.home-explorer__ctas .button { margin: 0; }
.home-explorer__points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--ind-n200); }
.home-explorer__points li { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ind-ink); }
.home-explorer__points li::before { content: none; }
.home-explorer__ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ind-blue); }

.home-explorer__media { position: relative; aspect-ratio: 16 / 9; background: #F1F3F5; border: 1px solid var(--ind-n200); border-radius: var(--ind-radius); overflow: hidden; }
.home-explorer__poster, .home-explorer__poster img { display: block; width: 100%; height: 100%; }
.home-explorer__poster img { object-fit: cover; max-width: none; }

.home-explorer__pins { list-style: none; margin: 0; padding: 0; }
.home-explorer__pins li { position: absolute; margin: 0; padding: 0; width: 0; height: 0; }
.home-explorer__pins li::before { content: none; }
.home-explorer__pin {
	position: absolute; left: -22px; bottom: 0; width: 44px; height: 62px;   /* 44px tap target; the stem ends on the anchor */
	display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; text-decoration: none !important; border: 0;
}
.home-explorer__pin span {
	display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
	background: #fff; border: 2px solid #B3261E; border-radius: var(--ind-radius);
	font: 600 13px/1 var(--ind-mono, monospace); color: var(--ind-ink); transition: var(--ind-fade);
}
.home-explorer__pin::after { content: ""; position: absolute; left: 21px; top: 36px; width: 2px; height: 23px; background: #B3261E; }
.home-explorer__pin::before { content: ""; position: absolute; left: 19px; bottom: -3px; width: 6px; height: 6px; background: #B3261E; border-radius: 50%; }
.home-explorer__pin:hover span { border-color: var(--ind-ink); }
.home-explorer__pin:focus-visible { outline: none; }
.home-explorer__pin:focus-visible span { outline: 2px solid var(--ind-blue); outline-offset: 2px; }
.home-explorer__pin.is-current span { background: #B3261E; color: #fff; outline: 3px solid var(--ind-yellow); outline-offset: 2px; }

.home-explorer__tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; background: #fff; border: 1px solid var(--ind-n200); border-radius: var(--ind-radius); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ind-ink); }
.home-explorer__tag .home-explorer__ico { width: 16px; height: 16px; }

.home-explorer__card { position: absolute; right: 12px; bottom: 12px; width: min(280px, 37%);   /* clear of pin 4 (HVAC, 55.6% across) */ padding: 16px; background: #fff; border: 1px solid var(--ind-n200); border-radius: var(--ind-radius); }
.home-explorer__card-title { display: flex; align-items: center; gap: 10px; margin: 0 0 .5rem; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ind-ink); }
.home-explorer__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 30px; height: 26px; border: 2px solid #B3261E; border-radius: var(--ind-radius); font-size: 12px; font-weight: 600; }
.home-explorer__card-sol { margin: 0 0 .75rem; font-size: 14px; line-height: 20px; color: var(--ind-text); }
.home-explorer__card-sol .ind-mono { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ind-blue); }
.home-explorer__card .ind-textlink { font-size: 15px; font-weight: 700; }

@media (max-width: 767px) {
	.home-explorer__media { aspect-ratio: auto; }
	.home-explorer__poster { aspect-ratio: 16 / 9; height: auto; }
	.home-explorer__pins { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; }
	.home-explorer__pin { transform: scale(.8); transform-origin: 50% 100%; }
	.home-explorer__card { position: static; width: auto; border: 0; border-top: 1px solid var(--ind-n200); border-radius: 0; }
	.home-explorer__tag { top: 8px; left: 8px; }
}

/* Navy take (style = navy): the ink band. On ink the accent and eyebrow are yellow (blue fails contrast
   there); the poster, pins and card keep their light look, which reads as a lit window into the model. */
.home-explorer--navy { background: var(--ind-ink); border-color: var(--ind-ink); }
.home-explorer--navy .ind-eyebrow { color: var(--ind-yellow); }
.home-explorer--navy .ind-section__title { color: var(--ind-white) !important; }
.home-explorer--navy .home-explorer__accent { color: var(--ind-yellow); }
.home-explorer--navy .home-explorer__copy .ind-lead { color: rgba(255, 255, 255, .86) !important; }
.home-explorer--navy .home-explorer__ctas .ind-textlink { color: var(--ind-white); border-bottom-color: var(--ind-yellow); }
.home-explorer--navy .home-explorer__ctas .ind-textlink:hover { color: var(--ind-yellow); }
.home-explorer--navy .home-explorer__points { border-top-color: rgba(255, 255, 255, .18); }
.home-explorer--navy .home-explorer__points li { color: var(--ind-white); }
.home-explorer--navy .home-explorer__points .home-explorer__ico { color: var(--ind-yellow); }
.home-explorer--navy .home-explorer__media { border-color: rgba(255, 255, 255, .18); }
.home-explorer--navy :focus-visible { outline-color: var(--ind-yellow); }