/* Harris Thermal — the /industries-served/ hub page (V1 styling variant)
   EXTRACTED VERBATIM from V1: the inline <style> block of
   industries-served/index.html. Wave 2 migration, page-scoped by approval.
   Its hub-card block (.px-inds/.px-ind) is one of THREE hand-duplicated
   drifts of the same component in V1 (interior: 220px thumbs, 1.2rem h3;
   nuclear: 250px thumbs, no hover zoom; this page: 230px thumbs, 1.25rem h3,
   hover zoom). The drift is V1's and is deliberately NOT normalised - each
   variant stays byte-exact in its own sheet. Loaded via the existing
   familyCss key on this page only.
   ONE change from V1, same as every family sheet: the hero image URL in
   .px-hero .bg is now var(--px-hero-bg), set from front-matter. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ht-font);color:var(--ht-ink);line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ht-blue);text-decoration:none}
a:hover{color:var(--ht-blue-bright)}

/* APPROVED V2 SITEWIDE HERO ALIGNMENT (2026-08-24): .px-hero is a flex
   container, which made its .ht-wrap a shrink-to-fit flex item - the wrap
   collapsed to its content width and auto margins centered THAT box, leaving
   the hero content group 236px right of the shared 1200px content grid at
   1440px (a V1 quirk on every page). width:100% restores normal container
   behaviour so the eyebrow/h1/lead/CTAs start at the same grid edge as the
   header - the same approved fix the homepage carries. Content width, type,
   line breaks, hero height and mobile padding unchanged; below ~1250px the
   wrap was already full-width. */
.px-hero .ht-wrap{width:100%}

/* Photo hero */
.px-hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.px-hero .bg{position:absolute;inset:0;background:var(--px-hero-bg) center/cover no-repeat;z-index:-2;transform:scale(1.04);animation:px-kb 16s ease-in-out infinite alternate}
@keyframes px-kb{from{transform:scale(1.04)}to{transform:scale(1.1)}}
.px-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,26,71,.93) 0%,rgba(2,26,71,.74) 45%,rgba(2,26,71,.28) 100%);z-index:-1}
.px-hero-inner{padding:96px 0;max-width:680px}
.px-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9dc1f5;background:rgba(29,111,209,.18);border:1px solid rgba(157,193,245,.35);padding:7px 16px;border-radius:999px;margin-bottom:22px}
.px-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.px-hero h1 em{font-style:normal;color:#7db4f7}
.px-hero p.lead{font-size:1.12rem;color:#d5e0f2;max-width:560px;margin-bottom:32px}
.px-ctas{display:flex;gap:14px;flex-wrap:wrap}
.px-btn{display:inline-block;font-weight:700;padding:15px 30px;border-radius:9px;font-size:1rem;transition:transform .15s,background .15s;text-decoration:none}
.px-btn-primary{background:var(--ht-blue-bright);color:#fff!important;box-shadow:0 6px 20px rgba(29,111,209,.45)}
.px-btn-primary:hover{background:#2b7fe3;transform:translateY(-2px)}
.px-btn-ghost{background:rgba(255,255,255,.1);color:#fff!important;border:1px solid rgba(255,255,255,.35)}
.px-btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}

/* Sections */
section.px-block{padding:92px 0}
section.px-block.soft{background:var(--ht-bg-soft)}
.px-sec-head{max-width:760px;margin:0 auto 52px;text-align:center}
.px-kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ht-blue-bright);margin-bottom:12px}
.px-sec-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:var(--ht-navy);line-height:1.18;margin-bottom:14px}
.px-sec-head p{color:var(--ht-muted);font-size:1.04rem}

/* Split intro */
.px-split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.px-split h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:var(--ht-navy);line-height:1.18;margin-bottom:18px}
.px-split p{color:var(--ht-muted);margin-bottom:16px}
.px-checks{list-style:none;margin:22px 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.px-checks li{position:relative;padding-left:30px;font-weight:600;font-size:.95rem;color:var(--ht-ink)}
.px-checks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--ht-blue-bright);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>') center/contain no-repeat}
.px-photo{position:relative}
.px-photo img{border-radius:var(--ht-radius);box-shadow:var(--ht-shadow-lg);width:100%;height:440px;object-fit:cover}
.px-photo .px-badge{position:absolute;left:-26px;bottom:32px;background:var(--ht-navy);color:#fff;border-radius:12px;padding:18px 24px;box-shadow:var(--ht-shadow-lg)}
.px-photo .px-badge .n{font-size:1.6rem;font-weight:800;color:#7db4f7}
.px-photo .px-badge .l{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#c8d4ea}
@media(max-width:920px){.px-split{grid-template-columns:1fr;gap:44px}.px-photo .px-badge{left:16px}}

/* Product type cards */
.px-types{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.px-type{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:30px 28px;box-shadow:0 10px 30px rgba(2,26,71,.08);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.px-type:hover{transform:translateY(-5px);box-shadow:var(--ht-shadow-lg)}
.px-type .ico{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,var(--ht-blue) 0%,var(--ht-blue-bright) 100%);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 6px 16px rgba(29,111,209,.3)}
.px-type .ico svg{width:24px;height:24px;fill:#fff}
.px-type h3{font-size:1.15rem;font-weight:800;color:var(--ht-navy);margin-bottom:10px;letter-spacing:-.01em}
.px-type p{color:var(--ht-muted);font-size:.93rem;flex:1}
@media(max-width:920px){.px-types{grid-template-columns:1fr}}

/* Highlight callout */
.px-callout{background:linear-gradient(115deg,var(--ht-navy) 0%,var(--ht-blue) 100%);border-radius:var(--ht-radius);color:#fff;padding:46px 48px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;box-shadow:var(--ht-shadow-lg);position:relative;overflow:hidden}
.px-callout::before{content:"";position:absolute;right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.07)}
.px-callout h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin-bottom:10px;position:relative}
.px-callout p{color:#c8d8f2;position:relative}
.px-callout .facts{display:grid;gap:14px;position:relative}
.px-callout .fact .n{font-size:1.5rem;font-weight:800;color:#7db4f7}
.px-callout .fact .l{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#c8d4ea}
@media(max-width:820px){.px-callout{grid-template-columns:1fr;padding:36px 28px}}

/* Gallery */
.px-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.px-gitem{position:relative;border-radius:var(--ht-radius);overflow:hidden;box-shadow:0 10px 30px rgba(2,26,71,.10);aspect-ratio:7/4;display:block}
.px-gitem img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.px-gitem:hover img{transform:scale(1.07)}
.px-gitem .cap{position:absolute;inset:auto 0 0 0;padding:36px 18px 14px;background:linear-gradient(transparent,rgba(2,26,71,.9));color:#fff;font-size:.86rem;font-weight:600;opacity:0;transform:translateY(8px);transition:all .25s}
.px-gitem:hover .cap{opacity:1;transform:translateY(0)}
@media(max-width:920px){.px-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.px-gallery{grid-template-columns:1fr}}

/* Scroll reveal */
.px-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.px-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .px-reveal{opacity:1;transform:none;transition:none}
  .px-hero .bg{animation:none}
}

/* Industry cards */
.px-inds{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.px-ind{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);overflow:hidden;box-shadow:0 10px 30px rgba(2,26,71,.08);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;scroll-margin-top:120px}
.px-ind:hover{transform:translateY(-5px);box-shadow:var(--ht-shadow-lg)}
.px-ind .thumb{height:230px;overflow:hidden}
.px-ind .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.px-ind:hover .thumb img{transform:scale(1.06)}
.px-ind .body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.px-ind h3{font-size:1.25rem;font-weight:800;color:var(--ht-navy);margin-bottom:10px;letter-spacing:-.01em}
.px-ind p{color:var(--ht-muted);font-size:.94rem;flex:1;margin-bottom:16px}
.px-ind .more{font-weight:700;font-size:.92rem;color:var(--ht-blue-bright)}
.px-ind .more::after{content:" →"}
@media(max-width:820px){.px-inds{grid-template-columns:1fr}}