/* 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 */
/* WAVE 6.6.1 HERO COMPOSITION NORMALISATION, 2026-09-07 (owner-approved after
   the Wave 6.6 hero audit). align-items: center -> flex-start.

   WHAT THIS DOES NOT CHANGE: min-height stays 520px, the hero still GROWS with
   its content, .px-hero-inner still carries padding:96px 0. No fixed height, no
   clamp, no clipping, no type shrinking.

   WHAT IT CHANGES: only the SHORT-CONTENT case. When the padded content group is
   TALLER than 520px - which is true for 33 of the 34 pages in this family at
   1440 - the flex item already filled the box and centring vs top-anchoring were
   identical, so those pages are byte-identical. When the content group is
   SHORTER than the 520px floor, centring used to push the copy down by
   (520 - innerHeight)/2: MEASURED +23px on /contact-us/ at 1440. The eyebrow
   then started at 119px instead of the 96px every other commercial page uses,
   which is exactly the "sits too low" the audit found.

   flex-start makes the upper content position CONSTANT at 96px across the whole
   family, at every width, whatever the copy length - which is the actual
   definition of one visual system. The unused lower image area is allowed to
   exist naturally, by owner instruction. */
.px-hero{position:relative;min-height:520px;display:flex;align-items:flex-start;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}
/* WAVE 6.6.1 DARK-BACKGROUND LINK CONTRAST, 2026-09-08 (owner-approved).
   Prose links inside the dark navy->blue components inherited the GLOBAL link
   colour from base.css, `a{color:var(--ht-blue)}` = #0e51a1. The gradient's own
   right-hand stop IS #0e51a1, so MEASURED contrast ran from 2.18:1 against the
   navy end down to 1.00:1 against the blue end - at which point the link is
   literally the same colour as the background it sits on. WCAG AA for normal
   text is 4.5:1.

   White reaches 16.92:1 / 7.75:1, so it clears AA across the whole gradient
   rather than only at the dark end. The underline is not decoration: colour
   alone must not be the only thing marking a link, and white text on a dark
   band would otherwise be indistinguishable from the body copy around it.

   SCOPED to these two dark components only. Links on white and light sections
   are untouched, and .px-btn buttons are explicitly excluded so button styling
   is unaffected. */
.px-callout p a:not(.px-btn),
.ht-cta-band p a:not(.px-btn){color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.px-callout p a:not(.px-btn):hover,
.ht-cta-band p a:not(.px-btn):hover{color:#fff;text-decoration-thickness:2px}
.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}
/* WAVE 7, 2026-09-09. FAQ-hub mobile table clipping - the pre-existing defect
   carried forward from the punch-list #2 review (status doc 13.7 item 3, backlog 6.2).

   MEASURED at a 390px viewport on /harris-thermal-transfer-products-faqs/: the
   bolt-torque table min-content width is 464px inside a 292px content box, so it
   rendered 464px wide with its right edge at x=513 against a 390px viewport. The
   parent .px-faq details{overflow:hidden} clipped the excess instead of scrolling
   it - maxScrollLeft was 0 - leaving 123px and 3 of the 8 columns UNREACHABLE. The
   page itself never scrolled (documentElement.scrollWidth stayed 390), so there was
   no way to reach them at all. Inherited from V1, which clips identically.

   THE SCROLL CONTAINER GOES ON .a, NOT ON THE TABLE. post.css solves the same
   problem for article tables with display:block;overflow-x:auto on the table
   itself, but that pattern is WRONG here: making this table a block box lets the
   inner anonymous table shrink-to-fit, and MEASURED at 1440 that collapses it from
   810px to 523px inside an 810px box - a visible regression on the approved desktop
   presentation. Scrolling .a instead leaves the table display:table;width:100%
   at every width, so it still stretches to fill wherever it fits.

   RESULT, measured: at 1440 and 1024 .a does not overflow, so nothing scrolls and
   the rendered geometry is exactly what it was - table 810px, columns
   180/85/85/85/85/75/107/107. At 390 .a gains 172px of scrollLeft, the last column
   comes fully into view, and documentElement.scrollWidth stays 390 - no page-level
   horizontal scroll. No column is dropped, no type is shrunk, no cell content is
   hidden, and the table markup is untouched, so the FAQPage JSON-LD built from the
   same source string is unchanged.

   SCOPE: .px-faq .a in this file only. /harris-thermal-transfer-products-faqs/ is
   the ONLY .px-faq page sitewide that contains a table - the four other pages with
   tables are Industry Insight articles already covered by post.css - so the sibling
   .px-faq blocks in page-industry.css, page-nuclear.css and page-product.css are
   deliberately NOT changed. On the other 15 page-interior pages the declaration is
   inert: with no overflowing child there is no scrollbar and no rendering change. */
.px-faq .a{overflow-x:auto}
.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 6.6.1 PUNCH LIST #2, 2026-09-08. The .px-fig BOX was already centred by
   `margin:32px auto`, but nothing centred the image INSIDE it. The TEMA figure is
   571px wide in a 760px box, so as a default-inline image it sat hard left:
   MEASURED 19px of gap on the left against 170px on the right at 1440 and 1024,
   and 19/130 at 768 - visibly off-centre. It only looked right at 390, where
   max-width forces it to fill the box.

   display:block + margin auto is the whole fix. max-width:100% and height:auto
   keep the existing responsive behaviour and aspect ratio, and prevent the figure
   overflowing on narrow screens. The graphic itself is untouched, and the caption
   below it keeps its own text-align:center. */
.px-fig img{display:block;margin:0 auto;max-width:100%;height:auto}


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