/* Harris Thermal — the homepage's own design layer.
   EXTRACTED VERBATIM from V1: the homepage's inline <style>, minus the four
   blocks that duplicated shared files. Wave 3 reconciliation.

   DROPPED as duplicates (verified rule-by-rule as value-identical first):
     :root tokens        -> src/css/tokens.css   (same values, --ht- names)
     reset + .wrap       -> src/css/base.css + .ht-wrap in chrome.css
     topbar / header /
     nav / mobile menu   -> src/css/chrome.css
     footer              -> src/css/chrome.css

   KEPT here because V1 genuinely differs from the shared component and
   migration must not change either one:
     .btn family  - 15px 30px padding (shared .ht-btn: 14px 28px); primary is
                    blue-bright on white text (shared: white on navy); ghost
                    carries backdrop-filter. Page-scoped on purpose.
     .cta-band    - 80px padding and no margin-top (shared .ht-cta-band:
                    64px + 48px margin), a larger h2 clamp, and a second
                    decorative ::after circle the shared band does not have.

   RENAMES, no value change: homepage --token -> --ht-token; .wrap -> .ht-wrap;
   .reveal -> .px-reveal so the shared reveal.js drives it (every family sheet
   already carries its own .px-reveal block - this follows that pattern).
   var(--shadow) and var(--white) were homepage-only tokens; --shadow is
   inlined as its literal value, --white was used only by the dropped body{}. */

/* ===== Hero ===== */
/* PROPOSED ALIGNMENT (homepage proof, awaiting approval): .hero is a flex
   container, which makes its .ht-wrap a shrink-to-fit flex item - the wrap
   collapsed to its 728px content width and its auto margins centered THAT box,
   so the hero group sat ~236px right of the shared 1200px content grid the
   header uses. width:100% restores normal container behaviour: the 1200px box
   centers and the hero content group (eyebrow, h1, lead, CTAs) starts at the
   same grid edge as the header logo. Group moves as one block; width, type,
   line breaks, height and vertical spacing unchanged. Mobile unchanged - below
   1248px the wrap was already full-width, so the standard 24px padding rules. */
.hero .ht-wrap{width:100%}
.hero{position:relative;min-height:640px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;z-index:-2;transform:scale(1.04);animation:kenburns 14s ease-in-out infinite alternate}
.hero .slide.active{opacity:1}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,26,71,.92) 0%,rgba(2,26,71,.72) 45%,rgba(2,26,71,.25) 100%);z-index:-1}
.hero-inner{padding:110px 0 130px;max-width:680px}
.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}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:#7db4f7}
.hero p.lead{font-size:1.13rem;color:#d5e0f2;max-width:560px;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:700;padding:15px 30px;border-radius:9px;font-size:1rem;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:var(--ht-blue-bright);color:#fff;box-shadow:0 6px 20px rgba(29,111,209,.45)}
.btn-primary:hover{background:#2b7fe3;color:#fff;transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;transform:translateY(-2px)}
.hero-dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.hero-dots button{width:34px;height:4px;border-radius:2px;border:0;background:rgba(255,255,255,.3);cursor:pointer;transition:background .2s}
.hero-dots button.active{background:#fff}

/* ===== Stats band ===== */
.stats{background:transparent;position:relative;z-index:5}
.stats .ht-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ht-line);border:1px solid var(--ht-line);border-radius:var(--ht-radius);overflow:hidden;margin-top:-58px;box-shadow:var(--ht-shadow-lg)}
.stat{background:#fff;padding:30px 20px;text-align:center}
.stat .num{font-size:2.1rem;font-weight:800;color:var(--ht-navy);letter-spacing:-.02em}
.stat .lbl{font-size:.85rem;color:var(--ht-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
@media(max-width:800px){.stats .ht-wrap{grid-template-columns:repeat(2,1fr)}}
/* APPROVED (2026-08-24): small-screen-only stat value size so "EST. 1885"
   (156px at the full 2.1rem face) and "7 ACRES" (136px) hold ONE line in the
   130px cell content box at 390px. Smallest reduction that fits with margin;
   desktop and tablet sizing untouched. 560px is the design system's existing
   small-screen breakpoint (footer, gallery). Weight, colours, borders, label
   size, padding and column count unchanged. */
@media(max-width:560px){.stat .num{font-size:1.75rem}}

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

/* Who we are split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split .kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ht-blue-bright);margin-bottom:12px}
.split h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:var(--ht-navy);line-height:1.18;margin-bottom:18px}
.split p{color:var(--ht-muted);margin-bottom:16px}
.split ul.checks{list-style:none;margin:22px 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.split ul.checks li{position:relative;padding-left:30px;font-weight:600;font-size:.95rem;color:var(--ht-ink)}
.split ul.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}
.photo-stack{position:relative}
.photo-stack .main-img{border-radius:var(--ht-radius);box-shadow:var(--ht-shadow-lg);width:100%;height:460px;object-fit:cover}
.photo-stack .badge{position:absolute;left:-26px;bottom:32px;background:var(--ht-navy);color:#fff;border-radius:12px;padding:20px 26px;box-shadow:var(--ht-shadow-lg)}
.photo-stack .badge .b-num{font-size:1.7rem;font-weight:800;color:#7db4f7}
.photo-stack .badge .b-lbl{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#c8d4ea}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:44px}.photo-stack .badge{left:16px}}

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

/* Industry chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.chip{background:#fff;border:1px solid var(--ht-line);border-radius:999px;padding:10px 22px;font-weight:600;font-size:.92rem;color:var(--ht-navy);transition:all .15s;box-shadow:0 2px 8px rgba(2,26,71,.05)}
.chip:hover{background:var(--ht-navy);color:#fff;border-color:var(--ht-navy);transform:translateY(-2px)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.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}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gitem:hover img{transform:scale(1.07)}
.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:.88rem;font-weight:600;opacity:0;transform:translateY(8px);transition:all .25s}
.gitem:hover .cap{opacity:1;transform:translateY(0)}
@media(max-width:920px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:linear-gradient(115deg,var(--ht-navy) 0%,var(--ht-blue) 100%);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.06)}
.cta-band::after{content:"";position:absolute;right:60px;bottom:-160px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.05)}
.cta-band .ht-wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.cta-band p{color:#c8d8f2;max-width:520px}

/* 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}
  .hero .slide{animation:none}
}