/* === Home (Unit 2) === */
/* Every rule is scoped under body.home so nothing here ever touches other pages. */

.home .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Hero ---------- */
.home .home-hero .text-box{max-width:640px}
.home .home-hero-eyebrow{display:flex;align-items:center;gap:10px;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:13px;margin-bottom:1em}
.home .home-hero-eyebrow .eyebrow-dash{display:inline-block;width:28px;height:2px;background:#069A70;flex:0 0 auto}
.home .home-hero h1{color:#fff;font-size:46px;line-height:1.18;margin-bottom:.5em;text-shadow:0 2px 20px rgba(5,31,48,.45)}
.home .home-hero-sub{color:#fff;opacity:.94;font-size:17px;max-width:560px;margin-bottom:1.7em;text-shadow:0 1px 8px rgba(5,31,48,.35)}
.home .home-hero-btns{margin-bottom:1.3em}
.home .home-hero-call{color:#fff;opacity:.92;font-size:14px;margin-bottom:0}
.home .home-hero-call a{color:#fff;font-weight:600;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px;padding:4px 2px}

/* Buttons inside the hero / final-CTA stacks: matched size, real tap targets, no
   Flatsome margin so the ux_stack gap is the only spacing. */
.home .home-hero-btns .button,
.home .final-cta-btns .button{
	min-height:52px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 28px;
	font-size:15px;
	line-height:1.3;
}
.home .home-hero .button:focus-visible,
.home .final-cta .button:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:549px){
	.home .home-hero-btns.stack,
	.home .final-cta-btns.stack{width:100%}
	.home .home-hero-btns .button,
	.home .final-cta-btns .button{width:100%}
}

/* Tablet: shorter heading/body so the fixed-height banner never overflows */
@media (max-width:849px){
	.home .home-hero-eyebrow{font-size:12px}
	.home .home-hero h1{font-size:33px}
	.home .home-hero-sub{font-size:15px}
}
@media (max-width:549px){
	.home .home-hero h1{font-size:26px}
	.home .home-hero-sub{font-size:15px;max-width:none}
}

/* ---------- Trust bar ---------- */
.home .trust-bar{background:transparent}
.home .trust-card{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(5,31,48,.2),0 2px 10px rgba(5,31,48,.08);position:relative;z-index:5;padding:28px 0 4px}
@media (min-width:1025px){
	.home .trust-card{margin-top:-48px}
}
/* Force every item to the same top edge with icon-left / text-right, regardless
   of how many lines the text wraps to. */
.home .trust-item{display:flex;flex-direction:column;justify-content:flex-start;transition:transform .2s ease}
.home .trust-item:hover{transform:translateY(-2px)}
.home .trust-item .col-inner{display:flex;align-items:center;gap:14px}
.home .icon-badge{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#EAF1F6;display:flex;align-items:center;justify-content:center;color:#0B4A6F;box-shadow:inset 0 0 0 1px rgba(11,74,111,.08);transition:background-color .2s ease,color .2s ease}
.home .trust-item:hover .icon-badge{background:#057F5C;color:#fff}
.home .trust-text{margin:0;color:var(--color-text);font-size:15px}

@media (max-width:549px){
	.home .trust-card{margin:0 16px;width:auto;max-width:none;border-radius:10px;box-shadow:0 10px 30px rgba(5,31,48,.12)}
	.home .trust-item .col-inner{gap:10px}
	.home .icon-badge{width:44px;height:44px}
	.home .icon-badge svg{width:22px;height:22px}
	.home .trust-text{font-size:14px}
}

/* ---------- Section headers (eyebrow + H2, replaces the faint title lines) ---------- */
.home .section-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--color-secondary);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:13px;margin-bottom:.6em}
.home .section-eyebrow .eyebrow-dash{display:inline-block;width:24px;height:2px;background:var(--color-secondary)}
.home .section-heading{text-align:center}

/* ---------- What We Supply ---------- */
.home .wcs-intro{margin-left:auto;margin-right:auto;float:none}
.home .wcs-intro p{color:var(--color-text-muted);font-size:16px;max-width:680px;margin:0 auto}

/* Gutter lives on the outer (invisible) column as padding; the visual card is
   the col-inner, fully flush internally so the photo bleeds to its own edges.
   The 24px bottom padding also becomes the row-gap between wrapped card rows;
   the negative margin below cancels the trailing copy after the last row so
   the section-to-section gap matches every other transition on the page. */
.home .wcs-row{margin-bottom:-24px}
.home .wcs-row .col.wcs-card{padding:0 12px 24px 12px!important}
.home .wcs-card .col-inner{
	background:#fff;border:1px solid var(--color-border);border-radius:8px;overflow:hidden;
	display:flex;flex-direction:column;height:100%;padding:0!important;
	box-shadow:0 2px 8px rgba(11,74,111,.05),0 10px 24px rgba(11,74,111,.04);
	transition:transform .3s ease,box-shadow .3s ease;
}
.home .wcs-card:hover .col-inner{transform:translateY(-6px);box-shadow:0 4px 12px rgba(11,74,111,.08),0 22px 44px rgba(11,74,111,.16)}
.home .wcs-card img{transition:transform .5s ease;display:block;width:100%}
.home .wcs-card:hover img{transform:scale(1.08)}
.home .wcs-card .img{line-height:0}
.home .wcs-card-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1;position:relative}
.home .wcs-card-body h3{font-size:19px;margin-bottom:.4em}
.home .wcs-card-body h3 a{color:#0B4A6F}
.home .wcs-card-body h3 a:hover{color:var(--color-secondary-hover)}
.home .wcs-card-body p{color:var(--color-text-muted);font-size:15px;margin-bottom:.8em}
.home .wcs-card-body p:not(.wcs-card-link){flex:1}
.home .wcs-card-link{margin-bottom:0;margin-top:auto;flex:none}
.home .wcs-card-link a{color:var(--color-secondary);font-weight:600;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:8px 2px}
.home .wcs-card-link a:hover{color:var(--color-secondary-hover);text-decoration:underline}
.home .wcs-card-link a span{transition:transform .2s ease}
.home .wcs-card:hover .wcs-card-link a span{transform:translateX(3px)}

@media (max-width:549px){
	.home .wcs-row .col.wcs-card{padding:0 16px 24px 16px!important}
	.home .wcs-card-body{padding:16px 18px 20px}
	.home .wcs-card-body h3{font-size:18px}
}

/* ---------- Custom Hose Crimping feature ---------- */
.home .crimp-feature{position:relative;overflow:hidden}
.home .crimp-feature-img{position:relative}
.home .crimp-feature-img img{border-radius:8px;box-shadow:0 20px 50px rgba(11,74,111,.18),0 4px 14px rgba(11,74,111,.1)}
.home .crimp-checklist{list-style:none;margin:0 0 1.6em;padding:0}
.home .crimp-checklist li{display:flex;align-items:center;gap:10px;margin-bottom:.65em;color:var(--color-text);font-weight:500}
.home .crimp-checklist .check-icon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#E6F4EE;color:var(--color-secondary);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(5,127,92,.08)}

@media (max-width:549px){
	.home .crimp-feature-img img{box-shadow:0 10px 26px rgba(11,74,111,.16)}
}

/* ---------- Why Choose: light surface with a faint blueprint dot-grid ---------- */
.home .why-section{background-color:#F3F6F9;background-image:radial-gradient(rgba(11,74,111,.08) 1px, transparent 1px);background-size:24px 24px;position:relative}
.home .why-intro{margin-left:auto;margin-right:auto;float:none}
.home .why-intro p{color:var(--color-text-muted);font-size:16px;max-width:680px;margin:0 auto}
.home .why-intro a{color:var(--color-secondary);font-weight:600;text-decoration:none;white-space:nowrap}
.home .why-intro a:hover{color:var(--color-secondary-hover);text-decoration:underline}
.home .why-item{text-align:center}
.home .why-item .icon-badge{margin:0 auto 16px;box-shadow:0 8px 20px rgba(11,74,111,.12)}
.home .why-item:hover .icon-badge{background:#0B4A6F;color:#fff;transform:scale(1.06)}
.home .why-item h3{margin-bottom:.4em}
.home .why-item p{color:var(--color-text-muted);font-size:15px}

/* ---------- How It Works: numbered steps with a connecting line on desktop ---------- */
.home .how-section .steps-row{position:relative}
@media (min-width:850px){
	.home .how-section .steps-row::before{
		content:"";
		position:absolute;
		top:24px;
		left:16.6667%;
		right:16.6667%;
		height:2px;
		background-image:repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px);
		z-index:0;
	}
}
.home .step-item{text-align:center}
.home .step-number{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:#fff;font-family:inherit;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 22px rgba(11,74,111,.25)}
.home .step-item h3{margin-bottom:.4em}
.home .step-item p{color:var(--color-text-muted);font-size:15px}

@media (max-width:549px){
	.home .step-number{width:42px;height:42px;font-size:16px}
}

/* ---------- Final CTA band ---------- */
.home .final-cta p.final-cta-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:13px;margin-bottom:.8em}
.home .final-cta-eyebrow .eyebrow-dash{display:inline-block;width:24px;height:2px;background:#069A70}
.home .final-cta h2{color:#fff;font-size:34px;margin-bottom:.5em;text-shadow:0 2px 16px rgba(5,31,48,.4)}
.home .final-cta p{color:#fff;opacity:.94;font-size:16px;margin-bottom:1.5em}
.home .final-cta-btns{justify-content:center}

@media (max-width:549px){
	.home .final-cta h2{font-size:25px}
	.home .final-cta p{font-size:15px}
}