/* Harris Thermal — the /nuclear/ page (V1's one styling variant)
   EXTRACTED VERBATIM from V1: the inline <style> block of nuclear/index.html.
   Wave 2 migration. Loaded INSTEAD OF a family sheet, not on top of one:
   the plan (S2.1, Wave 2) assumed nuclear = page-interior.css + additions, but
   measurement shows nuclear REDEFINES selectors the interior sheet also sets
   (.px-ind with different metrics, .px-stat .n at 1.6rem vs 1.7rem) and
   deliberately omits interior's hub-card hover-zoom rules. Stacking the two
   sheets would give nuclear's cards a hover behaviour V1 does not have, so the
   page gets its own byte-exact sheet via the existing familyCss mechanism.
   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}}

/* WAVE 6.6 OWNER REVIEW, 2026-08-31 - article/CTA callout composition.
   .px-callout is used in TWO modes. On the twelve industry and nuclear pages the
   right column holds a single button; on the five product pages it holds a
   .facts stat grid that fills its column naturally. Only the button mode had the
   reported problem: the button sat at the LEFT edge of a 423px column, leaving
   246px of dead space to its right (measured at 1440, button centre 123px left
   of its column centre).
   This block is therefore carried by page-industry.css and page-nuclear.css -
   the two sheets that serve the button-mode pages - and deliberately NOT by
   page-product.css, whose .facts composition does not have the problem and whose
   five pages are still under CP-2 zero-tolerance pixel parity.
   1.4fr -> 1.75fr moves the split from 56/40 to 61/35 of the usable content
   width, inside the approved 60-65 / 35-40 band. The CTA cell then centres its
   button both ways and stretches to full height so the hairline reads as an
   editorial rule between article and action rather than a stray border. The
   rule uses the same rgba-white family as the existing decorative circle; no new
   token, no gradient, no image, no animation.
   :has() targets the button cell without touching markup on twelve pages, so
   nothing in the content zone changes and CP-1/CP-19 are untouched.
   Below 821px the existing single-column stack is unchanged - the divider and
   centring are desktop-only, so the mobile CTA keeps its current placement. */
@media(min-width:821px){
  .px-callout{grid-template-columns:1.75fr 1fr}
  .px-callout > div:has(> .px-btn){align-self:stretch;display:flex;align-items:center;justify-content:center;border-left:1px solid rgba(255,255,255,.14);position:relative}
}

/* 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}
}

/* equipment group cards */
.px-type ul{list-style:none;margin:0;padding:0}
.px-type ul li{margin:0 0 12px;color:var(--ht-muted);font-size:.92rem;line-height:1.5}
.px-type ul li strong{color:var(--ht-navy);display:block;font-size:.97rem}
/* why panels */
.px-whys{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.px-why{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:24px 24px 26px;box-shadow:0 6px 20px rgba(2,26,71,.06)}
.px-why h4{font-size:1rem;font-weight:800;color:var(--ht-navy);margin:0 0 8px}
.px-why p{color:var(--ht-muted);font-size:.9rem;margin:0}
@media(max-width:920px){.px-whys{grid-template-columns:1fr}}
/* materials band */
.px-mats{background:linear-gradient(115deg,var(--ht-navy) 0%,var(--ht-blue) 100%);border-radius:var(--ht-radius);color:#fff;padding:44px 48px;box-shadow:var(--ht-shadow-lg);position:relative;overflow:hidden}
.px-mats::before{content:"";position:absolute;right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.07)}
.px-mats h3{font-size:1.4rem;font-weight:800;margin:0 0 18px;position:relative}
.px-mats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;position:relative}
.px-mats li{position:relative;padding-left:26px;color:#d5e0f2;font-size:.94rem;font-weight:500}
.px-mats li::before{content:"✓";position:absolute;left:0;color:#7db4f7;font-weight:800}
@media(max-width:820px){.px-mats{padding:34px 26px}.px-mats ul{grid-template-columns:1fr}}

/* nuclear page extras */
.px-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.px-stat{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:24px 18px;text-align:center;box-shadow:0 6px 20px rgba(2,26,71,.06)}
.px-stat .n{font-size:1.6rem;font-weight:800;color:var(--ht-navy);letter-spacing:-.02em}
.px-stat .l{font-size:.8rem;color:var(--ht-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
@media(max-width:820px){.px-stats{grid-template-columns:1fr 1fr}}
.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);display:flex;flex-direction:column}
.px-ind .thumb{height:250px;overflow:hidden}
.px-ind .thumb img{width:100%;height:100%;object-fit:cover}
.px-ind .body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.px-ind .tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ht-blue-bright);margin-bottom:8px}
.px-ind h3{font-size:1.2rem;font-weight:800;color:var(--ht-navy);margin:0 0 10px;letter-spacing:-.01em}
.px-ind p{color:var(--ht-muted);font-size:.93rem;flex:1;margin:0 0 14px}
.px-ind .more{font-weight:700;font-size:.9rem;color:var(--ht-blue-bright)}
@media(max-width:820px){.px-inds{grid-template-columns:1fr}}
.px-faq{max-width:860px;margin:0 auto}
.px-faq details{background:#fff;border:1px solid var(--ht-line);border-radius:12px;margin-bottom:14px;box-shadow:0 4px 14px rgba(2,26,71,.05);overflow:hidden}
.px-faq summary{padding:20px 24px;font-weight:700;color:var(--ht-navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.02rem}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";font-size:1.5rem;color:var(--ht-blue-bright);flex-shrink:0;line-height:1}
.px-faq details[open] summary::after{content:"–"}
.px-faq .a{padding:0 24px 22px;color:var(--ht-muted);font-size:.96rem}
.px-faq .a p{margin:0 0 12px}