/* ── Tokens (shared with homepage template) ── */
.hab{
	--ink:#0B2A4A;--blue:#1854A8;--blue-deep:#0C3D82;--blue-wash:#EAF2FD;--blue-mid:#2E6FD6;
	--green:#0E8F5E;--green-wash:#E7F6EF;--green-deep:#0A6E48;
	--clay:#F26A1B;--clay-wash:#FFF0E5;
	--paper:#F4F7FB;--line:#E4EAF1;--muted:#5B7291;
	--fd:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	--wrap:1680px;--r:12px;--r-lg:20px;--r-pill:999px;
	font-family:var(--fb);color:var(--ink)
}
.hab *{box-sizing:border-box;margin:0;padding:0}
.hab-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.hab-sec{padding:clamp(48px,6vw,80px) 0}
.hab-sec__h{font-family:var(--fd);font-size:clamp(22px,2.8vw,32px);font-weight:700;
	text-align:center;color:var(--ink);margin-bottom:12px;line-height:1.2}
.hab-sec__sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}
.hab-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--blue);margin-bottom:12px}
.hab-eyebrow--center{text-align:center}

/* ── HERO (Leeford: full-width facility image + play button, then "About Us") ── */
.hab-hero{position:relative}
.hab-hero__media{position:relative;height:clamp(300px,42vw,560px);
	background-color:var(--blue-deep);
	background-image:linear-gradient(135deg,var(--blue-deep),var(--blue-mid));
	background-size:cover;background-position:center;
	display:flex;align-items:center;justify-content:center}
/* When a photo URL is set it's layered on top of the gradient in the inline
   style; if that photo 404s, the gradient below shows instead of grey. */
.hab-hero__media.is-empty{background-image:linear-gradient(135deg,var(--blue-deep),var(--blue-mid))}
.hab-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,26,54,.15),rgba(6,26,54,.35))}
.hab-hero__phlabel{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 46px));z-index:2;
	display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.7)}
.hab-hero__phlabel svg{width:46px;height:46px}
.hab-hero__phlabel span{font-family:var(--fd);font-size:13px;font-weight:600}
.hab-hero__play{position:relative;z-index:3;width:62px;height:62px;border-radius:50%;background:var(--blue);
	display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
	box-shadow:0 10px 30px -6px rgba(0,0,0,.4);transition:.16s}
.hab-hero__play svg{width:26px;height:26px;margin-left:3px}
.hab-hero__play:not(.hab-hero__play--static):hover{transform:scale(1.08);background:var(--blue-deep)}
.hab-hero__play--static{background:rgba(255,255,255,.9);color:var(--blue)}
.hab-hero__brandtag{position:absolute;right:24px;bottom:18px;z-index:3;background:rgba(255,255,255,.92);
	border-radius:10px;padding:8px 14px;box-shadow:0 6px 18px -6px rgba(0,0,0,.3)}
.hab-hero__brandtag .hml-logo__word{font-size:18px}
.hab-hero__title{text-align:center;padding:34px 24px 4px}
.hab-hero__title h1{font-family:var(--fd);font-size:clamp(28px,3.6vw,40px);font-weight:700;color:var(--ink);margin:0}

/* ── JOURNEY ── */
.hab-journey{background:#fff}
.hab-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hab-2col__text .hab-eyebrow{margin-bottom:10px}
.hab-2col__text h2{font-family:var(--fd);font-size:clamp(20px,2.4vw,28px);font-weight:700;
	color:var(--ink);margin-bottom:20px;line-height:1.2}
.hab-2col__text p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:14px}
.hab-2col__img img{width:100%;border-radius:var(--r-lg);box-shadow:0 20px 60px -12px rgba(18,36,70,.18);
	display:block;aspect-ratio:4/3;object-fit:cover}
/* Images that fell back to the branded SVG placeholder: contain + soft border,
   so a missing photo reads as an intentional blank tile, never a broken icon. */
.hab-img--ph{object-fit:contain!important;background:var(--blue-wash);
	border:1px solid var(--line);box-shadow:none!important;padding:8%}

/* ── MESSAGE ── */
.hab-message{background:var(--blue-wash);padding:clamp(44px,5vw,64px) 0}
.hab-message .hab-eyebrow{margin-bottom:20px}
.hab-message__card{
	max-width:680px;margin:0 auto;background:#fff;border-radius:var(--r-lg);
	padding:clamp(28px,4vw,48px);text-align:center;
	box-shadow:0 8px 32px -8px rgba(18,36,70,.12)
}
.hab-message__avatar{
	width:110px;height:110px;border-radius:50%;overflow:hidden;
	margin:0 auto 20px;border:4px solid var(--blue);
	box-shadow:0 0 0 4px var(--blue-wash)
}
.hab-message__avatar img{width:100%;height:100%;object-fit:cover}
.hab-message__quote{
	font-family:var(--fd);font-size:clamp(15px,1.8vw,18px);font-style:normal;
	color:var(--ink);line-height:1.7;margin-bottom:20px
}
.hab-message__quote em{color:var(--blue);font-style:normal;font-weight:600}
.hab-message__sig strong{display:block;font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink)}
.hab-message__sig span{font-size:13px;color:var(--muted)}

/* ── WHAT WE DO ── */
.hab-what{background:var(--paper)}
.hab-what .hab-eyebrow{margin-bottom:10px}
.hab-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.hab-card{background:#fff;border-radius:var(--r-lg);padding:28px 22px;border:1px solid var(--line);
	transition:.2s;text-align:center}
.hab-card:hover{box-shadow:0 8px 28px -8px rgba(18,36,70,.14);transform:translateY(-4px)}
.hab-card__icon{width:52px;height:52px;background:var(--blue-wash);border-radius:14px;
	display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--blue)}
.hab-card h3{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:8px}
.hab-card p{font-size:14px;color:var(--muted);line-height:1.6}

/* ── VISION / MISSION / VALUES ── */
.hab-vmc{background:#fff}
.hab-vmc .hab-eyebrow{margin-bottom:10px}
.hab-vmc .hab-sec__h{margin-bottom:10px}
.hab-vmc .hab-sec__sub{margin-bottom:0}
.hab-vmc__row{
	display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
	align-items:center;margin-top:clamp(32px,4vw,48px)
}
.hab-vmc__row:first-of-type{margin-top:clamp(28px,3.5vw,40px)}
.hab-vmc__row--rev .hab-vmc__img{order:2}
.hab-vmc__row--rev .hab-vmc__text{order:1}
.hab-vmc__img img{width:100%;border-radius:var(--r-lg);object-fit:cover;
	aspect-ratio:4/3;display:block;box-shadow:0 12px 40px -10px rgba(18,36,70,.16)}
.hab-vmc__badge{
	display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;background:var(--blue-wash);color:var(--blue);
	padding:6px 14px;border-radius:var(--r-pill);margin-bottom:14px
}
.hab-vmc__badge--green{background:var(--green-wash);color:var(--green-deep)}
.hab-vmc__badge--clay{background:var(--clay-wash);color:var(--clay)}
.hab-vmc__text h3{font-family:var(--fd);font-size:clamp(18px,2vw,22px);font-weight:700;
	color:var(--ink);margin-bottom:14px;line-height:1.3}
.hab-vmc__text p{color:var(--muted);font-size:15px;line-height:1.75}
.hab-vmc__list{list-style:none;margin-top:14px}
.hab-vmc__list li{padding:10px 0 10px 28px;position:relative;font-size:15px;
	color:var(--muted);line-height:1.6;border-bottom:1px solid var(--line)}
.hab-vmc__list li:last-child{border-bottom:0}
.hab-vmc__list li::before{
	content:"✓";position:absolute;left:0;top:10px;
	color:var(--green);font-weight:700;font-size:14px
}
.hab-vmc__list li strong{color:var(--ink)}

/* ── CERTIFICATIONS ── */
.hab-certs{background:var(--paper)}
.hab-certs .hab-eyebrow{margin-bottom:10px}
.hab-certs__row{
	display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:36px
}
.hab-cert{flex:0 0 auto}
.hab-cert__inner{
	width:120px;height:120px;border-radius:50%;
	background:#fff;border:2px solid var(--blue);
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	box-shadow:0 6px 20px -6px rgba(18,36,70,.16);transition:.18s
}
.hab-cert:hover .hab-cert__inner{transform:translateY(-3px);box-shadow:0 12px 28px -8px rgba(18,36,70,.22)}
.hab-cert__inner strong{font-family:"Poppins",sans-serif;font-size:15px;font-weight:800;
	color:var(--blue-deep);letter-spacing:.03em}
.hab-cert__inner span{font-size:12px;font-weight:600;color:var(--green-deep);margin-top:3px}

/* ── LOCATIONS STRIP ── */
.hab-locs{background:var(--ink);padding:clamp(28px,3.5vw,44px) 0;text-align:center}
.hab-locs__label{font-size:13px;font-weight:600;color:rgba(255,255,255,.6);
	letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px}
.hab-locs__pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hab-loc-pill{
	display:inline-flex;align-items:center;gap:6px;
	background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
	color:#fff;font-size:14px;font-weight:600;
	padding:9px 18px;border-radius:var(--r-pill);text-decoration:none;transition:.18s
}
.hab-loc-pill:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── CTA BAND ── */
.hab-cta{
	background:linear-gradient(135deg,var(--green-deep) 0%,var(--green) 100%);
	padding:clamp(48px,6vw,80px) 0;text-align:center
}
.hab-cta h2{font-family:var(--fd);font-size:clamp(22px,3vw,34px);font-weight:800;
	color:#fff;margin-bottom:12px}
.hab-cta p{font-size:16px;color:rgba(255,255,255,.82);margin-bottom:28px}
.hab-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hab-btn{
	display:inline-flex;align-items:center;gap:8px;font-family:var(--fb);
	font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--r-pill);
	text-decoration:none;border:2px solid transparent;transition:.18s;cursor:pointer
}
.hab-btn--white{background:#fff;color:var(--green-deep)}
.hab-btn--white:hover{background:var(--green-wash);color:var(--green-deep)}
.hab-btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hab-btn--outline:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* ── RESPONSIVE ── */
/* Tablet: 4-card grid → 2, keep two-column story rows a touch tighter */
@media(max-width:1024px){
	.hab-cards{grid-template-columns:repeat(2,1fr)}
}
/* Stack point: story + VMC rows go single-column, text always leads */
@media(max-width:900px){
	.hab-2col,.hab-vmc__row{grid-template-columns:1fr;gap:26px}
	/* On mobile the image should sit BELOW its text for every row (reading flow) */
	.hab-2col__text{order:1}
	.hab-2col__img{order:2}
	.hab-vmc__img{order:2!important}
	.hab-vmc__text{order:1!important}
	.hab-vmc__img img,.hab-2col__img img{aspect-ratio:16/10;max-height:340px}
}
@media(max-width:560px){
	.hab-cards{grid-template-columns:1fr;gap:14px}
	.hab-hero__media{height:clamp(220px,52vw,320px)}
	.hab-hero__title{padding:24px 20px 0}
	.hab-hero__title h1{font-size:clamp(24px,7vw,30px)}
	.hab-hero__brandtag{right:12px;bottom:12px;padding:6px 10px}
	.hab-hero__brandtag .hml-logo__word{font-size:15px}
	.hab-message__card{padding:24px 18px}
	.hab-message__avatar{width:88px;height:88px}
	.hab-certs__row{gap:12px}
	.hab-cert__inner{width:88px;height:88px}
	.hab-cert__inner strong{font-size:13px}
	.hab-cta__btns{flex-direction:column;align-items:stretch}
	.hab-cta__btns .hab-btn{justify-content:center}
	.hab-loc-pill{font-size:13px;padding:8px 14px}
}