/* Harris Thermal — V1 industry page family (11 pages)
   EXTRACTED VERBATIM from V1: the inline <style> block of the V1 industry pages
   Wave 1 migration. Rules are byte-identical to V1 apart from the changes
   noted below; no design decision was taken here. */
/* ONE change from V1: the per-page hero image URL in `.px-hero .bg` is now
   --px-hero-bg, set per page from front-matter (plan S4.2). Everything else
   is byte-identical. */
/* 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}}


/* ============================================================================
   WAVE 5.5 - additions for the Data Center industry pillar
   (/data-center-cooling-equipment/), commercial reframe 2026-08-29.

   ALL THREE ARE INERT ON THE OTHER 11 INDUSTRY PAGES. None of their selectors
   matches any markup on those pages, so page-industry.css keeps rendering them
   byte-for-byte as before and CP-2 oracle parity is unaffected. Every value
   below comes from the existing tokens (--ht-navy, --ht-blue-bright, --ht-line,
   --ht-muted, --ht-bg-soft, --ht-radius) and reuses the family's established
   spacing, radius, shadow and 920px/820px breakpoints. No new design language.

   REMOVED IN THE REFRAME, because nothing references them any more: .px-table /
   .px-table-note (the application matrix and materials tables are gone),
   .px-flow* (the four-stage architecture cards are replaced by .px-loop below)
   and .px-why h3 (the Engineering and Who-We-Work-With card sections are gone).
   The family's own .px-why h4 rule, used by the other industry pages, is
   untouched.
   ========================================================================== */

/* --- FAQ accordion ---------------------------------------------------------
   NOT a new component: byte-identical to the block page-product.css,
   page-interior.css and page-nuclear.css already carry. The industry family
   simply never had a page with FAQs. Kept as a copy rather than lifted into a
   shared sheet because the V1-derived family sheets are self-contained by
   construction (page-industries-served.css records the same duplication for
   .px-inds); consolidating all four is a separate, sitewide change. */
.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}

/* --- Compact cooling-loop strip --------------------------------------------
   Replaces the four-card architecture diagram the reframe retired. The
   commercial page only needs to place Harris on the loop, not teach the loop,
   so this is one line of chips - IT/TCS -> CDU -> facility water -> heat
   rejection - with the facility-water stage marked as the Harris zone and every
   other stage left plain, so the strip cannot read as whole-system supply.

   Flex with wrap rather than a fixed grid: each <li> carries its own connector,
   so when the row wraps on a narrow screen the arrow stays attached to the chip
   it belongs to instead of dangling at a line end. The connector is a
   decorative pseudo-element, so the reading order for assistive technology is
   the ordered list itself, and the <ol> carries the aria-label. */
.px-loop{list-style:none;margin:0 auto;padding:0;max-width:940px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 8px}
.px-loop li{display:flex;align-items:center;gap:8px}
.px-loop .step{display:block;background:#fff;border:1px solid var(--ht-line);border-radius:999px;padding:12px 24px;font-size:.9rem;font-weight:700;color:var(--ht-navy);white-space:nowrap;box-shadow:0 4px 12px rgba(2,26,71,.06)}
.px-loop li:not(:last-child)::after{content:"→";color:var(--ht-blue-bright);font-size:1.1rem;font-weight:700;line-height:1}
.px-loop li.is-harris .step{background:var(--ht-blue-bright);border-color:var(--ht-blue-bright);color:#fff;box-shadow:0 8px 20px rgba(29,111,209,.32)}
.px-loop-key{max-width:760px;margin:20px auto 0;color:var(--ht-muted);font-size:.92rem;text-align:center}

/* --- Four-up equipment cards -----------------------------------------------
   .px-types is a 3-column grid, which leaves a 3+1 orphan for the four
   equipment categories. This modifier makes it a 2x2 so the four read as one
   set, and it inherits the single-column stack from the family's existing
   920px rule. Scoped to the modifier, so the unmodified .px-types used by this
   page and the other 11 industry pages is unchanged. */
@media(min-width:921px){.px-types.px-types-quad{grid-template-columns:repeat(2,1fr)}}

/* --- .px-checks carrying a label and a one-line description ----------------
   The Data Center thermal-energy-storage section uses the family's EXISTING
   checkmark list rather than a new component, but each item needs a label with
   a short explanation under it. Both rules are scoped to the .px-checks-detail
   modifier, so the plain .px-checks used by the other 11 industry pages - and
   by this page's own #mission-critical list - is untouched and CP-2 oracle
   parity is unaffected. Single column because the list sits in the narrower
   column of a .px-split, where the family's default two columns would leave the
   descriptions too tight to read. */
.px-checks.px-checks-detail{grid-template-columns:1fr;gap:20px;margin:24px 0 22px}
.px-checks.px-checks-detail li{font-weight:400;font-size:.93rem;line-height:1.5;color:var(--ht-muted)}
.px-checks.px-checks-detail li strong{display:block;font-weight:800;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ht-navy);margin-bottom:5px}
.px-checks.px-checks-detail li::before{top:1px}
}