/* Harris Thermal — V1 interior page family (13 pages)
   EXTRACTED VERBATIM from V1: the inline <style> block of the V1 interior 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}
/* WAVE 6.6 CLOSEOUT, 2026-08-31. Opt-in modifier for a FIGURE rather than a
   photograph - currently one element sitewide, the 1885 Harris Ice Machine
   Works illustration in the /about-us/ Heritage section.
   The rule above crops every .px-photo img to a fixed 440px landscape box
   (object-fit:cover). That is right for the 4:3 shop photographs it was written
   for and wrong for a 562x844 portrait illustration, where it would discard
   about 44% of the artwork - the "PORTLAND, 1885." caption first. This lets the
   image keep its own aspect ratio, complete, capped so it cannot tower over the
   text column it sits beside. Nothing without the class is affected.

   WIDTH IS DEFINITE ON PURPOSE. The first version used width:auto/height:auto
   with a max-height cap. That gives an UNLOADED img no box at all, and this one
   sits inside .px-reveal (opacity:0 until the scroll observer fires), so at
   1440 Chrome never triggered the lazy load - measured 0x0, no network request
   for the file. width:100% + max-width gives the box a definite width before
   load, and height:auto against the width/height attributes then gives it a
   definite height, so the lazy load fires reliably and nothing shifts when it
   arrives. max-width 346px is the 520px height cap expressed as a width at this
   image's 562:844 ratio - the rendered result is identical, the box is not. */
.px-photo.is-artwork img{width:100%;max-width:346px;height:auto;display:block;margin:0 auto;object-fit:contain}
@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}
}

.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}
.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}}
.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}}
/* hub cards (image) */
.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}
.px-ind:hover{transform:translateY(-5px);box-shadow:var(--ht-shadow-lg)}
.px-ind .thumb{height:220px;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:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.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)}
.px-ind .more::after{content:" →"}
@media(max-width:820px){.px-inds{grid-template-columns:1fr}}
/* stats row */
.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.7rem;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}}
/* faq accordion */
.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}
.px-faq .a table{border-collapse:collapse;margin:10px 0;width:100%}
.px-faq .a th,.px-faq .a td{border:1px solid var(--ht-line);padding:8px 12px;text-align:center;font-size:.9rem}
.px-faq .a th{background:var(--ht-bg-soft);color:var(--ht-navy)}
/* logo strip */
.px-logos{display:flex;gap:44px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:36px}
.px-logos img{height:64px;width:auto;object-fit:contain}
/* content figure */
.px-fig{max-width:760px;margin:32px auto;border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:18px;background:#fff;box-shadow:0 6px 20px rgba(2,26,71,.06)}


/* Wave 5. Left-aligned lead paragraph for a hub page's intro, with a readable
   measure. New class, used only by /products-services/ - no existing page
   carries it, so no approved page can change. */
.px-intro{max-width:82ch;margin:0;color:var(--ht-muted);font-size:1.04rem;line-height:1.75}

/* ===================================================== TEXT / PROSE PAGES */
/* Wave 5. Long-form text pages (purchase-order terms, the confirmation page)
   live in THIS sheet rather than a second one, so the button component stays
   single-sourced: .px-btn above is the light-background primary button, and a
   separate text sheet would have had to duplicate it. The shared .ht-btn in
   chrome.css is white-on-navy for the DARK CTA band, so it is not usable on a
   white page.

   No existing page carries .ht-textpage / .ht-prose / .ht-center, so adding
   these rules cannot change any approved page - CP-2 proves it. */
.ht-textpage{padding:56px 0 8px;font-family:var(--ht-font);color:var(--ht-ink);line-height:1.7}

/* A measure that stays readable for continuous prose. Legal text is read
   linearly, so it gets a tighter column than the page container. */
.ht-textpage .ht-prose{max-width:82ch}

.ht-textpage h2{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.01em;color:var(--ht-navy);line-height:1.2;margin:44px 0 14px}
.ht-textpage h3{font-size:clamp(1.1rem,1.7vw,1.3rem);font-weight:700;color:var(--ht-navy);line-height:1.3;margin:32px 0 10px}
.ht-textpage > .ht-wrap > .ht-prose > :first-child{margin-top:0}

.ht-textpage p{margin:0 0 18px}
.ht-textpage strong{font-weight:700;color:var(--ht-navy)}
.ht-textpage a{color:var(--ht-blue);text-decoration:none}
.ht-textpage a:hover{text-decoration:underline;text-underline-offset:3px}
.ht-textpage a:focus-visible{outline:2px solid var(--ht-blue-bright);outline-offset:2px;border-radius:2px}

/* Numbered clauses. The counter is the browser's own <ol> numbering - the
   markup is a real ordered list, so clause numbers survive copy/paste and are
   announced by screen readers. */
.ht-textpage ol{margin:0 0 22px;padding-left:2.4em}
.ht-textpage ol > li{margin:0 0 18px;padding-left:.3em}
.ht-textpage ol > li::marker{font-weight:700;color:var(--ht-navy)}
.ht-textpage ul{margin:0 0 22px;padding-left:1.6em}
.ht-textpage ul > li{margin:0 0 8px}

/* A short centred block — used by the confirmation page, whose V1 design is a
   centred sentence plus one button. */
.ht-textpage .ht-center{max-width:62ch;margin:0 auto;text-align:center}
.ht-textpage .ht-center p{font-size:1.06rem;color:var(--ht-ink)}
.ht-textpage .ht-center .ht-btn{margin-top:10px}

@media(max-width:560px){
  .ht-textpage{padding-top:36px}
  .ht-textpage ol{padding-left:1.5em}
}