/* ==========================================================================
   COWBOY'S AC — "SOUTH TEXAS COMFORT PERFORMANCE SHOWROOM"
   Homepage design system (index.html only — inner pages use cwc/rich.css)
   --------------------------------------------------------------------------
   Palette is extracted from the established brand system in rich.css.
   --cool is a data-only accent used strictly for thermal storytelling
   (heat → controlled cool). Never used on brand/CTA elements.
   ========================================================================== */

:root{
  /* brand surfaces (identical values to rich.css) */
  --bg:#120c08; --bg-2:#0d0805; --surface:#1b120d; --surface-2:#241811; --surface-3:#2c1e15;
  --line:rgba(244,234,214,.10); --line-2:rgba(244,234,214,.16); --gold-line:rgba(232,176,74,.30);
  --gold:#e8b04a; --gold-soft:#f6cd78; --red:#e23c2c; --rust:#d9803a;
  --cream:#f4ead6; --text-2:rgba(244,234,214,.72); --text-3:rgba(244,234,214,.46);
  /* data-only thermal accent (cool state) */
  --cool:#9fd4d8; --cool-dim:rgba(159,212,216,.55);
  /* type system */
  --hero:'Big Shoulders Display','Oswald',sans-serif;   /* editorial display */
  --display:'Oswald',sans-serif;                        /* UI display (nav, buttons) */
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;      /* body */
  --mono:'Share Tech Mono',monospace;                   /* instrumentation */
  /* geometry */
  --r:6px; --r-lg:10px; --max:1240px; --gutter:clamp(1.1rem,4vw,2.2rem);
  --chamfer:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --ease:cubic-bezier(.22,1,.36,1);
  /* fine blueprint grid, used on technical sections */
  --gridline:rgba(244,234,214,.045);
}

/* Reveal timing (v4.3): trigger 40% of a viewport EARLY and fade in .55s.
   Was threshold .12 / rootMargin -6% / .8s, which only began the fade once a
   section was already 35% into view — at normal scroll speed a visitor blew
   past whole sections while they were still at opacity 0. Michael hit this on
   the live site and reported the new card section as missing. Measured: time
   fully-visible while on screen went 13% -> 38%. Push rootMargin to 60% if
   more reliability is wanted; that measured 50% but flattens the reveal. */

/* ---------- reset & base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--cream);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open,body.boot-lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,figure,blockquote{margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(4rem,9vw,7.5rem);position:relative}
.section[id],.sform{scroll-margin-top:84px}
.hp{position:absolute;left:-9999px;height:0;width:0;border:0;padding:0}

::selection{background:var(--red);color:#fff}

/* visible keyboard focus */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:fixed;top:.5rem;left:1rem;z-index:200;background:var(--gold);color:#241206;font-family:var(--display);text-transform:uppercase;padding:.5rem 1rem;transform:translateY(-200%);transition:transform .25s var(--ease)}
.skip:focus{transform:none}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.04;color:var(--cream)}
.h2{font-family:var(--hero);font-weight:700;font-size:clamp(2.1rem,4.6vw,3.6rem);letter-spacing:.005em;margin:.9rem 0 0}
.h2 em{font-style:normal;color:var(--red)}
.lede{font-size:clamp(1rem,1.25vw,1.13rem);color:var(--text-2);max-width:58ch;margin-top:1rem}
.tag{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.55rem;margin:0}
.tag__dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(226,60,44,.18)}
html.jsr .tag__dot{animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(226,60,44,.18)}50%{box-shadow:0 0 0 6px rgba(226,60,44,.05)}}
.sec-head{max-width:56rem}
.sec-head__index{font-family:var(--mono);font-size:.7rem;letter-spacing:.26em;color:var(--text-3);display:block;padding-bottom:.65rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}

/* ---------- buttons — machined, chamfered ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;padding:.85rem 1.6rem;border:1px solid transparent;cursor:pointer;clip-path:var(--chamfer);transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;position:relative}
.btn:active{transform:translateY(1px) scale(.985)}
.btn svg{width:16px;height:16px;flex:none}
.btn--lg{padding:1rem 2rem;font-size:1rem}
.btn--gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#241206}
.btn--gold:hover{background:linear-gradient(180deg,#ffdf9a,var(--gold-soft))}
.btn--red{background:linear-gradient(180deg,#f0503f,var(--red));color:#fff}
.btn--red:hover{background:linear-gradient(180deg,#ff6a58,#ef4433)}
.btn--ghost{border-color:var(--line-2);color:var(--cream);background:rgba(244,234,214,.02)}
.btn--ghost:hover{border-color:var(--gold-line);background:rgba(232,176,74,.07)}
.btn--block{width:100%}
@media (hover:hover){.btn--gold:hover,.btn--red:hover{transform:translateY(-2px)}}

/* ==========================================================================
   BOOT — system check loader
   ========================================================================== */
.boot{position:fixed;inset:0;z-index:400;background:var(--bg-2);display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease),visibility .5s}
.boot--done{opacity:0;visibility:hidden;pointer-events:none}
html:not(.jsr) .boot{display:none}
.boot__inner{width:min(30rem,86vw);text-align:left}
.boot__logo{height:64px;width:auto;margin-bottom:2rem}
.boot__lines{display:grid;gap:.4rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--text-2);min-height:6.2rem}
.boot__lines span{opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.boot__lines span.on{opacity:1;transform:none}
.boot__lines span:first-child{color:var(--gold)}
.boot__bar{height:2px;background:var(--line);margin-top:1.6rem;overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .3s linear}
.boot__temp{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--red);margin-top:.8rem}
.boot__temp em{font-style:normal;color:var(--cool)}

/* ==========================================================================
   UTILITY STRIP + HEADER
   ========================================================================== */
.util{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.82rem;position:relative;z-index:41}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.util__badges{display:flex;align-items:center;gap:1.2rem;color:var(--text-3);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap}
.util__badges b{color:var(--gold-soft);font-weight:400}
.util__phone{font-family:var(--display);font-weight:600;color:var(--cream);font-size:1rem}
.util__phone span{color:var(--text-3);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;margin-right:.5rem;text-transform:uppercase}
.util__phone:hover{color:var(--gold-soft)}

.hdr{position:sticky;top:0;z-index:40;background:rgba(13,8,5,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.4rem;height:68px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:1.9rem;margin:0 auto;list-style:none;padding:0}
.nav a{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;color:var(--text-2);position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--cream)}
.nav a:hover::after{transform:scaleX(1)}
.hdr .btn{padding:.6rem 1.15rem;font-size:.8rem}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--r)}
.burger span{width:20px;height:1.6px;background:var(--cream);transition:transform .3s var(--ease),opacity .3s}
body.nav-open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.mobile{position:fixed;inset:0;z-index:39;background:rgba(10,6,4,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:none;flex-direction:column;justify-content:center;gap:.3rem;padding:5rem var(--gutter)}
body.nav-open .mobile{display:flex}
.mobile a:not(.btn){font-family:var(--hero);font-weight:600;text-transform:uppercase;font-size:2rem;padding:.55rem 0;border-bottom:1px solid var(--line);letter-spacing:.02em}
.mobile a:not(.btn):hover{color:var(--gold-soft)}

/* ==========================================================================
   HERO — heat → controlled cool
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:min(88dvh,860px);display:flex;flex-direction:column;justify-content:center}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video{width:100%;height:115%;object-fit:cover;filter:saturate(.82) brightness(.52) contrast(1.06)}
/* thermal wash: JS eases this from hot to cool after boot */
.hero__thermal{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(226,60,44,.28),rgba(217,128,58,.12) 45%,transparent 70%);opacity:var(--heat,1);transition:opacity 2.4s var(--ease);mix-blend-mode:screen;pointer-events:none}
.hero__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(10,6,4,.95),rgba(10,6,4,.74) 52%,rgba(10,6,4,.45)),linear-gradient(0deg,rgba(13,8,5,.9),transparent 30%)}
.hero__air{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.55}
.hero__in{position:relative;z-index:4;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4.5vw,4rem);align-items:center;padding-block:clamp(2.5rem,5vw,4rem) clamp(4.5rem,7vw,6rem);width:min(1320px,100% - var(--gutter)*2)}
.hero__h1{font-family:var(--hero);font-weight:800;font-size:clamp(2.9rem,7vw,6rem);line-height:.96;letter-spacing:.005em;margin-top:1.2rem;text-wrap:balance}
.hero__h1 em{font-style:normal;color:var(--red);-webkit-text-stroke:0}
.hero__sub{margin-top:1.4rem;font-size:clamp(1.02rem,1.4vw,1.22rem);color:var(--text-2);max-width:42ch}
.hero__cta{margin-top:1.9rem;display:flex;gap:.8rem;flex-wrap:wrap}
.hero__trust{margin-top:1.5rem;font-size:.88rem;color:var(--text-2);max-width:46ch}
.hero__trust .stars{color:var(--gold);letter-spacing:2px}
.hero__trust b{color:var(--cream)}

/* instrument strip along hero base */
.hero__inst{position:absolute;left:0;right:0;bottom:0;z-index:5;border-top:1px solid var(--line);background:rgba(13,8,5,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero__inst-in{display:flex;align-items:center;gap:clamp(1.2rem,3.5vw,3rem);padding:.65rem 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--text-3);white-space:nowrap;overflow:hidden}
.hero__inst-in b{color:var(--gold-soft);font-weight:400}
.hero__scrollcue{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;color:var(--text-3)}
.hero__scrollcue i{width:1px;height:16px;background:var(--gold);display:inline-block;transform-origin:top}
html.jsr .hero__scrollcue i{animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* SERVICE CONSOLE (form) */
.sform{background:linear-gradient(168deg,rgba(36,24,17,.94),rgba(27,18,13,.94));border:1px solid var(--gold-line);padding:1.7rem;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.sform__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.sform h2{font-size:1.35rem;font-weight:600;letter-spacing:.03em}
.sform__status{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--cool);display:inline-flex;align-items:center;gap:.45rem}
.sform__status i{width:6px;height:6px;border-radius:50%;background:var(--cool)}
html.jsr .sform__status i{animation:pulse 2.2s infinite}
.sform__note{font-size:.82rem;color:var(--text-3);margin:.35rem 0 1.1rem}
.sform label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.35rem}
.fg{margin-bottom:.85rem}
.sform input:not(.hp),.sform select{width:100%;background:rgba(14,9,7,.65);border:1px solid var(--line);border-radius:var(--r);padding:.72rem .85rem;color:var(--cream);font-family:var(--sans);font-size:.92rem;transition:border-color .25s}
.sform input:focus,.sform select:focus{outline:none;border-color:var(--gold)}
.sform input::placeholder{color:rgba(244,234,214,.28)}
.sform .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fstatus{font-size:.8rem;min-height:1.1em;margin-bottom:.55rem;color:var(--gold)}
.fstatus.ok{color:#8fd18f}
.sform__fine{font-size:.74rem;color:var(--text-3);margin-top:.8rem;text-align:center}
.sform__fine a{color:var(--gold-soft)}
.sform select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}

/* ==========================================================================
   PROOF RAIL — telemetry
   ========================================================================== */
.rail{border-bottom:1px solid var(--line);background:var(--bg-2);position:relative}
.rail::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 119px,var(--gridline) 120px);pointer-events:none}
.rail__in{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.rail__cell{padding:1.6rem 1.2rem 1.4rem;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:.45rem}
.rail__cell:last-child{border-right:1px solid var(--line)}
.rail__num{font-family:var(--mono);font-size:1.7rem;color:var(--cream);line-height:1;display:flex;align-items:baseline;gap:.3rem}
.rail__num--sm{font-size:1.05rem;letter-spacing:.06em;line-height:1.25}
.rail__num b{font-weight:400}
.rail__star{color:var(--gold);font-size:1.1rem}
.rail__unit{font-size:.68rem;letter-spacing:.14em;color:var(--text-3)}
.rail__lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);line-height:1.6}
.rail__press{display:flex;align-items:center;gap:clamp(1.2rem,3.5vw,2.6rem);padding:.9rem 0;border-top:1px solid var(--line);position:relative;flex-wrap:wrap}
.rail__press span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--text-3)}
.rail__press img{height:28px;width:auto;opacity:.55;filter:grayscale(1) contrast(1.05);transition:opacity .3s,filter .3s}
.rail__press img:hover{opacity:1;filter:none}

/* ==========================================================================
   DIAGNOSIS
   ========================================================================== */
.diag{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.diag__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
.dbtn{background:var(--bg);padding:1.5rem 1.4rem 1.4rem;text-align:left;display:flex;flex-direction:column;gap:.3rem;transition:background .3s;position:relative;min-height:9.5rem}
.dbtn::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.dbtn:hover{background:var(--surface)}
.dbtn:hover::after{transform:scaleY(1)}
.dbtn.on{background:var(--surface-2)}
.dbtn.on::after{transform:scaleY(1)}
.dbtn svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.6rem}
.dbtn b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--cream)}
.dbtn span{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);line-height:1.7}
.dbtn--urgent svg{stroke:var(--red)}
.dbtn--urgent::after{background:var(--red)}
.diag__out{margin-top:1.6rem;border:1px solid var(--gold-line);background:linear-gradient(168deg,var(--surface-2),var(--surface));padding:1.5rem 1.6rem;clip-path:var(--chamfer)}
.diag__out p{color:var(--cream);font-size:1.02rem;max-width:60ch}
.diag__acts{display:flex;gap:.7rem;margin-top:1.1rem;flex-wrap:wrap}

/* ==========================================================================
   SERVICE LINEUP
   ========================================================================== */
.lineup{padding-bottom:clamp(2rem,4vw,3rem)}
.svc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2.6rem,5vw,4.2rem);border-bottom:1px solid var(--line)}
.svc:last-of-type{border-bottom:0}
.svc--flip .svc__media{order:2}
.svc__media{position:relative;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:4/3;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.svc__media img{width:100%;height:112%;object-fit:cover;filter:saturate(.9) contrast(1.03)}
.svc__cap{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gold-soft);background:rgba(13,8,5,.8);padding:.45rem .8rem;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.svc__no{font-family:var(--mono);font-size:.85rem;color:var(--text-3);letter-spacing:.2em;display:block;margin-bottom:.7rem}
.svc__no::after{content:"";display:inline-block;width:3rem;height:1px;background:var(--gold-line);vertical-align:middle;margin-left:.8rem}
.svc h3{font-family:var(--hero);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem)}
.svc h3 em{font-style:normal;color:var(--red)}
.svc p{color:var(--text-2);margin-top:1rem;max-width:56ch}
.svclist{list-style:none;margin-top:1.2rem;display:grid;gap:.5rem}
.svclist li{position:relative;padding-left:1.5rem;color:var(--text-2);font-size:.94rem}
.svclist li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:1px;background:var(--gold)}
.svc .btn{margin-top:1.5rem}

/* ==========================================================================
   TRANE SHOWROOM — blueprint
   ========================================================================== */
.trane{background:var(--bg-2);border-block:1px solid var(--line);overflow:hidden}
.trane__grid{position:absolute;inset:0;background:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(80% 90% at 70% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(80% 90% at 70% 50%,#000 30%,transparent 100%)}
.trane__in{position:relative;display:grid;grid-template-columns:1fr .9fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.trane__points{list-style:none;margin-top:1.6rem;display:grid;gap:1.1rem}
.trane__points li{border-left:2px solid var(--gold-line);padding-left:1.1rem;color:var(--text-2);font-size:.95rem}
.trane__points b{display:block;color:var(--cream);font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin-bottom:.15rem}
.trane .hero__cta{margin-top:2rem}
.trane__fig{position:relative}
.blueprint{width:100%;height:auto}
.bp{fill:none;stroke:var(--cool-dim);stroke-width:1.2}
.bp--frame{stroke:var(--cool)}
.bp--fins line{stroke:rgba(159,212,216,.32)}
.bp--callouts{stroke:var(--gold-line)}
.bp--callouts circle{fill:var(--gold);stroke:none}
.bp__fanring{stroke:var(--cool)}
.bp__txt text{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:var(--text-3)}
.bp__txt text:nth-child(n+4){fill:var(--cool-dim)}
html.jsr .bp__blades{transform-origin:230px 270px;animation:fanspin 14s linear infinite;animation-play-state:paused}
html.jsr .trane.in-view .bp__blades{animation-play-state:running}
@keyframes fanspin{to{transform:rotate(360deg)}}
.trane__cap{margin-top:1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--gold-soft);display:flex;align-items:center;gap:.6rem}
.trane__cap i{width:2rem;height:1px;background:var(--gold-line);display:inline-block}

/* ==========================================================================
   SYSTEM INTELLIGENCE — console
   ========================================================================== */
.intel__in{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.intel__price{display:flex;align-items:center;gap:1.4rem;margin-top:1.8rem;flex-wrap:wrap}
.intel__amt{font-family:var(--mono);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--cream);line-height:1}
.intel__amt sup{font-size:1.1rem;color:var(--gold)}
.intel__per{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--gold-soft)}
.intel__list{list-style:none;margin-top:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
.intel__list li{position:relative;padding-left:1.4rem;color:var(--text-2);font-size:.9rem}
.intel__list li::before{content:"";position:absolute;left:0;top:.55em;width:.65rem;height:1px;background:var(--red)}
.console{border:1px solid var(--gold-line);background:linear-gradient(170deg,var(--surface-2),var(--bg-2));clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);position:sticky;top:90px}
.console__bar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--gold-soft)}
.console__bar em{font-style:normal;margin-left:auto;color:var(--text-3);font-size:.56rem}
.console__dot{width:7px;height:7px;border-radius:50%;background:var(--cool)}
html.jsr .console__dot{animation:pulse 2.4s infinite}
.console__main{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.console__stat{background:rgba(13,8,5,.85);padding:1.2rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.55rem}
.console__stat--wide{grid-column:1/-1}
.console__lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--text-3)}
.console__val{font-family:var(--mono);font-size:1.5rem;color:var(--cream);display:flex;align-items:center;gap:.6rem}
.console__val b{font-weight:400}
.console__val--ok{color:var(--cool);font-size:.95rem;letter-spacing:.12em}
.console__val--ok i{width:8px;height:8px;border-radius:50%;background:var(--cool);flex:none}
html.jsr .console__val--ok i{animation:pulse 2s infinite}
.console__meter{height:6px;background:rgba(244,234,214,.08);position:relative;overflow:hidden}
.console__meter i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));transition:width 1.2s var(--ease)}
.console__sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:var(--text-3)}
.console__feed{position:relative;min-height:3.4rem}
.console__feed p{font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--text-2);position:absolute;inset:0;opacity:0;transition:opacity .6s}
.console__feed p.on{opacity:1}
.console__fine{padding:.8rem 1.2rem;font-size:.68rem;color:var(--text-3);border-top:1px solid var(--line);font-style:italic}

/* ==========================================================================
   OFFERS & FINANCING
   ========================================================================== */
.offers{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--line)}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
.ocard{background:var(--bg);padding:1.7rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;position:relative;transition:background .3s}
.ocard:hover{background:var(--surface)}
.ocard::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.ocard:hover::after{transform:scaleX(1)}
.ocard--lead{grid-row:span 2;background:linear-gradient(170deg,var(--surface-2),var(--bg));justify-content:flex-end;min-height:16rem}
.ocard__amt{font-family:var(--hero);font-weight:800;font-size:2rem;color:var(--gold-soft);line-height:1}
.ocard--lead .ocard__amt{font-size:clamp(2.6rem,4vw,3.6rem)}
.ocard__amt--free{color:var(--rust)}
.ocard b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--cream);margin-top:.4rem}
.ocard p{font-size:.88rem;color:var(--text-2);max-width:34ch}
.ocard__go{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gold);margin-top:.9rem;opacity:.7;transition:opacity .3s}
.ocard:hover .ocard__go{opacity:1}
.ocard--band{grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);background:linear-gradient(90deg,var(--surface-2),var(--bg))}
.ocard--band .ocard__amt{font-size:clamp(2rem,3vw,2.6rem);flex:none}
.ocard__bandtxt{flex:1;min-width:14rem}
.ocard__bandtxt b{margin-top:0;display:block}
.ocard__bandtxt p{max-width:60ch}
.ocard--band .ocard__go{margin-top:0;flex:none}
.finrow{display:grid;grid-template-columns:1.2fr 1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:2.6rem;border:1px solid var(--line);background:linear-gradient(170deg,var(--surface),var(--bg-2));padding:clamp(1.5rem,3vw,2.2rem);clip-path:var(--chamfer)}
.finrow h3{font-family:var(--hero);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.finrow h3 em{font-style:normal;color:var(--red)}
.finrow p{color:var(--text-2);font-size:.92rem;margin-top:.6rem;max-width:48ch}
.finrow__partners{display:flex;flex-wrap:wrap;gap:.5rem}
.finrow__partners span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--gold-soft);border:1px solid var(--gold-line);padding:.5rem .9rem}

/* ==========================================================================
   COWBOYS CARES
   ========================================================================== */
.cares__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.cares__list{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.cares__list li{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.cares__list b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--cream);font-size:1.02rem}
.cares__list span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-align:right}
/* v7.5 · CREDENTIAL WALL — replaces the old flat cert chips */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin-top:3rem}
.cert{position:relative;border:1px solid var(--line-2);background:linear-gradient(170deg,var(--surface),var(--bg-2));clip-path:var(--chamfer);padding:1.05rem 1.15rem 1rem;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cert:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.cert__no{position:absolute;top:.7rem;right:.85rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;color:var(--text-3)}
.cert b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--cream);font-size:1rem;margin-bottom:.3rem;padding-right:2.6rem}
.cert__d{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);line-height:1.7;display:block}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.reviews{background:var(--bg-2);border-block:1px solid var(--line)}
.revgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.6rem}
.revq{background:var(--bg-2);padding:clamp(1.6rem,3vw,2.4rem);position:relative}
.revq--lead{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(170deg,var(--surface),var(--bg-2))}
.revq::before{content:"“";position:absolute;top:.6rem;right:1.2rem;font-family:var(--hero);font-size:4.5rem;color:rgba(232,176,74,.14);line-height:1}
.revq__stars{color:var(--gold);letter-spacing:3px;font-size:.85rem}
.revq p{color:var(--cream);margin:.9rem 0 1.1rem;font-size:1rem;max-width:46ch}
.revq--lead p{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5}
.revq footer{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.revq b{color:var(--gold-soft);font-family:var(--display);text-transform:uppercase;letter-spacing:.04em}
.revq footer span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-3)}

/* ==========================================================================
   SERVICE RANGE
   ========================================================================== */
.range__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.range__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 1.8rem;margin-top:2rem}
.areacol h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:.5rem;margin-bottom:.7rem;font-weight:400}
.areacol ul{list-style:none}
.areacol li{font-size:.86rem;color:var(--text-2);margin-bottom:.3rem}
.areacol li.hq{color:var(--gold-soft);font-weight:600}
.range__map svg{width:100%;height:auto}
.rm__rings circle,.rm__rings line{fill:none;stroke:var(--line-2);stroke-width:1}
.rm__sweep path{fill:rgba(232,176,74,.06);stroke:none;transform-origin:210px 216px}
html.jsr .range.in-view .rm__sweep path{animation:sweep 9s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.rm__pts circle{fill:var(--gold);opacity:.85}
.rm__pts .rm__hq{fill:var(--red)}
html.jsr .rm__hq{animation:pulse 2.4s infinite}
.rm__txt text{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;fill:var(--text-3)}
.rm__txt text:first-child{fill:var(--cream)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqsec{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.faq__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 0;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:1.02rem;letter-spacing:.03em;color:var(--cream);display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:color .25s}
.faq summary:hover{color:var(--gold-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--gold);font-size:1.3rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--gold-soft)}
.faq details p{padding:0 0 1.4rem;color:var(--text-2);max-width:60ch}
.faq details a{color:var(--gold-soft)}

/* ==========================================================================
   CONTACT + FINAL
   ========================================================================== */
.contact__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch}
.cinfo__rows{display:grid;gap:1.1rem;margin:1.8rem 0}
.cinfo__row b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--gold);margin-bottom:.25rem;font-weight:400}
.cinfo__row a,.cinfo__row span{color:var(--cream);font-size:1.04rem}
.cinfo__row a:hover{color:var(--gold-soft)}
.cmap{overflow:hidden;border:1px solid var(--line-2);min-height:340px;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.cmap iframe{width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.35) invert(.9) hue-rotate(180deg) contrast(.9)}

.final{position:relative;text-align:center;border-top:1px solid var(--line);overflow:hidden;padding-block:clamp(5rem,10vw,8.5rem)}
.final__thermal{position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 110%,rgba(226,60,44,.18),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg-2))}
.final__in{position:relative}
.final .tag{justify-content:center}
.final__h2{font-family:var(--hero);font-weight:800;font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;margin-top:1.2rem}
.final__h2 em{font-style:normal;color:var(--red)}
.final .lede{margin-inline:auto}
.final__cta{margin-top:2.2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   FOOTER + MOBILE BAR
   ========================================================================== */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-block:3.5rem 2rem}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2rem}
.footer__grid img{height:44px;width:auto;margin-bottom:1rem}
.footer p{color:var(--text-2);font-size:.9rem;max-width:24rem}
.footer h4{font-family:var(--mono);text-transform:uppercase;font-size:.66rem;letter-spacing:.2em;color:var(--gold);margin-bottom:1rem;font-weight:400}
.footer ul{list-style:none;display:grid;gap:.5rem}
.footer li,.footer__grid a{color:var(--text-2);font-size:.9rem}
.footer__grid a:hover{color:var(--gold-soft)}
.footer__bottom{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.76rem;color:var(--text-3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-family:var(--mono);letter-spacing:.04em}

.mobar{position:fixed;left:0;right:0;bottom:0;z-index:38;display:none;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.6rem var(--gutter);padding-bottom:max(.6rem,env(safe-area-inset-bottom));background:rgba(13,8,5,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}

/* ==========================================================================
   MOTION LAYER — calibration reveals (gated on html.jsr; no-JS stays visible)
   ========================================================================== */
html.jsr [data-cal],html.jsr [data-rail],html.jsr [data-svcblock]{opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.jsr .is-in{opacity:1 !important;transform:none !important}
/* blueprint stroke draw (JS sets dasharray; CSS animates offset when in view) */
html.jsr .bp{transition:stroke-dashoffset 1.6s var(--ease)}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .rail__in{grid-template-columns:repeat(3,1fr)}
  .rail__cell:nth-child(n+4){border-top:1px solid var(--line)}
  .rail__cell:nth-child(3n){border-right:1px solid var(--line)}
  .diag__grid{grid-template-columns:repeat(2,1fr)}
  .range__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero__in,.trane__in,.intel__in,.cares__in,.range__in,.faq__in,.contact__in{grid-template-columns:1fr}
  .hero{min-height:0}
  .hero__inst{position:relative;margin-top:0}
  .hero__in{padding-bottom:clamp(2.5rem,5vw,4rem)}
  .svc,.svc--flip{grid-template-columns:1fr}
  .svc--flip .svc__media{order:0}
  .ogrid{grid-template-columns:1fr 1fr}
  .ocard--lead{grid-row:auto;grid-column:1/-1;min-height:0}
  .revgrid{grid-template-columns:1fr}
  .revq--lead{grid-row:auto}
  .finrow{grid-template-columns:1fr}
  .console{position:static}
  .nav,.hdr .btn--gold,.hdr__call{display:none}
  .burger{display:flex}
  .util__badges{display:none}
  .mobar{display:grid}
  body{padding-bottom:70px}
  .hero__scrollcue{display:none}
}
@media (max-width:640px){
  .diag__grid{grid-template-columns:1fr}
  .ocard--band{flex-direction:column;align-items:flex-start;gap:.4rem}
  .ocard--band .ocard__go{margin-top:.9rem}
  .dbtn{min-height:0}
  .ogrid{grid-template-columns:1fr}
  .rail__in{grid-template-columns:1fr 1fr}
  .rail__cell:nth-child(n+3){border-top:1px solid var(--line)}
  .rail__cell:nth-child(2n){border-right:1px solid var(--line)}
  .intel__list{grid-template-columns:1fr}
  .console__main{grid-template-columns:1fr}
  .range__cols{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .hero__inst-in{flex-wrap:wrap;white-space:normal;gap:.6rem 1.4rem}
}
@media (max-width:460px){
  .footer__grid{grid-template-columns:1fr}
  .sform .row{grid-template-columns:1fr}
  .cares__list li{flex-direction:column;gap:.15rem;align-items:flex-start}
  .cares__list span{text-align:left}
}

/* ==========================================================================
   V3 — CINEMATIC LAYER (2026-07-20)
   Heat→cool skyline, thermal lens, dispatch console, cutaway house,
   crew compositing, grain. Same tokens; no new colors, no navy — ever.
   ========================================================================== */

/* ---------- south texas skyline (hero) ---------- */
.hero__sky{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none}
.sky{display:block;width:100%}
.sky--far{height:clamp(46px,7vw,96px);margin-bottom:calc(clamp(56px,8.5vw,118px)*-1)}
.sky--far path{fill:#171009;opacity:.85}
.sky--near{height:clamp(56px,8.5vw,118px)}
.sky__blocks{fill:#0d0805}
.sky__tower rect,.sky__tower line{fill:#0d0805;stroke:#0d0805;stroke-width:3}
.sky__tower ellipse{fill:#120b07;stroke:rgba(232,176,74,.35);stroke-width:1}
.sky__wins .win{fill:var(--gold);opacity:0;transition:opacity .5s var(--ease)}
html:not(.jsr) .sky__wins .win{opacity:.85}
.inst-temp b{color:var(--gold);font-weight:400;font-variant-numeric:tabular-nums}
.inst-temp{color:var(--text-2)}

/* ---------- thermal lens (pointer/touch heat-vision) ----------
   Michael, 2026-07-28: "i need the cursor follow to be much more subtle
   tone it down by 60 percent size and opacity." Done literally — 360px →
   144px (and the centring margin with it), and .lens.on from opacity 1 →
   0.4. Those are the only two numbers that control it; raise them together
   if it ever wants to come back up. The gradient stops are untouched so
   the heat→cool colour story is unchanged, just quieter. */
.lens{position:fixed;left:0;top:0;z-index:30;width:144px;height:144px;margin:-72px 0 0 -72px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle,rgba(226,60,44,.32) 0%,rgba(217,128,58,.20) 32%,rgba(232,176,74,.08) 55%,transparent 72%)}
.lens.on{opacity:.4}
.lens.cool{background:radial-gradient(circle,rgba(159,212,216,.26) 0%,rgba(159,212,216,.12) 38%,rgba(232,176,74,.05) 58%,transparent 72%)}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-60px;z-index:260;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- cowboys dispatch console ---------- */
.dispatch{position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.9rem,2.4vw,1.6rem);z-index:45;font-family:var(--mono);
  transform:translateY(140%);opacity:0;transition:transform .6s var(--ease),opacity .6s,visibility .6s;
  /* v4.0 fix — while parked it sat invisibly on top of the mobile .mobar
     "Book" button and swallowed the tap. Must not exist until it is shown. */
  visibility:hidden;pointer-events:none}
body.dispatch-ready .dispatch{transform:none;opacity:1;visibility:visible;pointer-events:auto}
.dispatch__pill{display:flex;align-items:center;gap:.75rem;background:rgba(19,12,8,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--gold-line);clip-path:var(--chamfer);padding:.62rem .95rem;cursor:pointer;transition:border-color .3s,background .3s}
.dispatch__pill:hover{border-color:var(--gold);background:rgba(28,17,10,.95)}
.dispatch__ping{position:relative;width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
html.jsr .dispatch__ping::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(226,60,44,.65);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}
.dispatch__pilltxt{display:flex;flex-direction:column;text-align:left;line-height:1.3}
.dispatch__pilltxt b{font-weight:400;font-size:.68rem;letter-spacing:.18em;color:var(--cream)}
.dispatch__pilltxt em{font-style:normal;font-size:.6rem;letter-spacing:.14em;color:var(--gold)}
.dispatch__clock{font-size:.72rem;color:var(--text-3);border-left:1px solid var(--line);padding-left:.75rem;font-variant-numeric:tabular-nums}
.dispatch__panel{position:absolute;right:0;bottom:calc(100% + .7rem);width:min(330px,calc(100vw - 2rem));background:rgba(16,10,7,.97);
  border:1px solid var(--gold-line);clip-path:var(--chamfer);padding:1rem 1rem .85rem;box-shadow:0 24px 60px rgba(5,2,1,.6)}
.dispatch__head{display:flex;align-items:center;gap:.55rem;font-size:.62rem;letter-spacing:.2em;color:var(--text-3);padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.7rem}
.dispatch__head i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.dispatch__head span{margin-left:auto;font-variant-numeric:tabular-nums}
.dispatch__line{font-family:var(--sans);font-size:.9rem;color:var(--text-2);margin-bottom:.8rem;line-height:1.5}
.dispatch__acts{display:grid;gap:.5rem}
.dispatch__fine{margin-top:.75rem;font-size:.6rem;letter-spacing:.16em;color:var(--gold);text-align:center}
@media (max-width:719px){
  .dispatch{right:.75rem;bottom:calc(64px + env(safe-area-inset-bottom) + .6rem)} /* clears .mobar */
  .dispatch__clock{display:none}
}

/* ---------- diagnosis: cutaway house + grid split ---------- */
.diag__split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:start;margin-top:2.4rem}
.diag__split .diag__grid{margin-top:0}
@media (max-width:960px){
  .diag__split{grid-template-columns:1fr}
  .house{max-width:520px}
}

/* ---------- crew — duotone compositing, broken grid ---------- */
.crew{background:linear-gradient(180deg,var(--bg) 0%,#150d08 60%,var(--bg) 100%);overflow:hidden}
.crew__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.6rem);margin-top:3rem}
/* roster changes: bump repeat() count to match the number of .crewcard figures */
.crewcard{position:relative;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.crewcard:nth-child(even){transform:translateY(clamp(.9rem,2.4vw,2.2rem))}
.crewcard img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.82);transition:filter .6s var(--ease)}
.crewcard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,rgba(226,60,44,.34),rgba(27,18,13,.55) 60%,rgba(13,8,5,.8));mix-blend-mode:multiply;transition:opacity .6s var(--ease);pointer-events:none}
.crewcard::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--line);clip-path:inherit;pointer-events:none}
@media (hover:hover){
  .crewcard:hover img{filter:grayscale(0) contrast(1.02) brightness(.96)}
  .crewcard:hover::before{opacity:.25}
}
.crewcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.75rem .8rem;background:linear-gradient(0deg,rgba(10,6,4,.92),transparent);display:flex;flex-direction:column;gap:.15rem}
.crewcard figcaption b{font-family:var(--display);font-weight:600;letter-spacing:.08em;font-size:.95rem;color:var(--cream)}
.crewcard figcaption span{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:var(--gold)}
/* Michael, 2026-07-28, on the marquee: "we need to fix this to where its all
   visible." It was cream at 12% opacity — technically present, effectively
   invisible on a near-black band. Raised to 38%, which is legible without
   turning a background texture into a headline. The strip is doubled by
   showroom.js and animates translateX(-50%), so the two halves MUST stay
   identical or the loop visibly jumps — see the v4.3 record. */
.crew__strip{margin-top:clamp(3rem,6vw,4.5rem);font-family:var(--mono);font-size:clamp(.9rem,2.4vw,1.5rem);letter-spacing:.3em;color:rgba(244,234,214,.38);white-space:nowrap;overflow:hidden}
html.jsr .crew__strip{animation:stripscroll 40s linear infinite}
@keyframes stripscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:820px){
  .crew__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crewcard:nth-child(even){transform:translateY(clamp(.9rem,3vw,1.6rem))}
}

/* ---------- spotlight borders on offer cards (desktop pointers) ---------- */
@media (hover:hover){
  .ocard{position:relative;overflow:hidden}
  .ocard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(232,176,74,.14),transparent 65%)}
  .ocard:hover::after{opacity:1}
}

/* ---------- exploded blueprint helpers ---------- */
.bp--fan,.bp--fins line{will-change:transform}
.trane__fig{perspective:800px}

/* ---------- RIDE WITH US — careers band in crew section (v3.2) ---------- */
.jobs{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4.5vw,4rem);align-items:center;margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
.jobs__h{font-family:var(--hero);font-weight:700;font-size:clamp(1.9rem,3.8vw,2.8rem);letter-spacing:.005em;margin:.4rem 0 0}
.jobs__h em{font-style:normal;color:var(--red)}
.sform--jobs h3{font-size:1.35rem;font-weight:600;letter-spacing:.03em}
.sform--jobs .sform__status{color:var(--gold)}
.sform--jobs .sform__status i{background:var(--gold)}
@media (max-width:900px){.jobs{grid-template-columns:1fr}}

/* ---------- dispatch pill attention wiggle (Michael 2026-07-21) ---------- */
@keyframes dwiggle{0%,12%,100%{transform:rotate(0)}2%{transform:rotate(-3deg)}4%{transform:rotate(3deg)}6%{transform:rotate(-2deg)}8%{transform:rotate(2deg)}10%{transform:rotate(-1deg)}}
html.jsr .dispatch__pill{animation:dwiggle 5.5s 2.5s infinite;transform-origin:80% 50%;will-change:transform}
html.jsr .dispatch__pill[aria-expanded="true"]{animation:none}

/* ---------- dispatch concierge — scripted Q&A (v3.4) ---------- */
.dchat{margin-top:.85rem;border-top:1px solid var(--line);padding-top:.75rem}
.dchat__label{display:flex;align-items:center;gap:.5rem;font-size:.6rem;letter-spacing:.2em;color:var(--text-3);margin-bottom:.6rem}
.dchat__label i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.dchat__log{display:flex;flex-direction:column;gap:.45rem;max-height:180px;overflow-y:auto;overscroll-behavior:contain;margin-bottom:.6rem}
.dchat__log:empty{display:none}
.dchat__msg{font-family:var(--sans);font-size:.84rem;line-height:1.5;padding:.55rem .75rem;border-radius:10px;max-width:88%;opacity:0;transform:translateY(6px);animation:dmsg .3s var(--ease) forwards}
@keyframes dmsg{to{opacity:1;transform:none}}
.dchat__msg--you{align-self:flex-end;background:rgba(232,176,74,.14);border:1px solid var(--gold-line);color:var(--cream);border-bottom-right-radius:3px}
.dchat__msg--us{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);border-bottom-left-radius:3px}
.dchat__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dchip{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--text-2);background:rgba(244,234,214,.03);border:1px solid var(--line-2);border-radius:999px;padding:.4rem .7rem;cursor:pointer;transition:border-color .25s,color .25s,transform .25s var(--ease)}
.dchip:active{transform:scale(.96)}
@media (hover:hover){.dchip:hover{border-color:var(--gold-line);color:var(--gold-soft)}}
.dispatch__panel{max-height:min(78vh,640px);overflow-y:auto;overscroll-behavior:contain}

/* ==========================================================================
   V4 · PREMIUM POLISH — cohesion layer (2026-07-23)
   ========================================================================== */
/* scroll-progress "cool front" — heat→cool sweep along the top edge */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:210;transform:scaleX(0);transform-origin:0 50%;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,var(--red),var(--rust) 38%,var(--gold) 70%,var(--cool));
  box-shadow:0 0 12px rgba(232,176,74,.45)}
html:not(.jsr) .prog{display:none}

/* header solidifies on scroll — restyle only, zero layout shift */
.hdr{transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
body.is-scrolled .hdr{background:rgba(10,6,4,.95);box-shadow:0 12px 34px -20px rgba(0,0,0,.92);border-bottom-color:var(--gold-line)}
.brand img{transition:transform .3s var(--ease)}
body.is-scrolled .brand img{transform:scale(.9)}

/* ==========================================================================
   v4.0 · TRANE COMFORT SPECIALIST BADGE
   Verified third-party credential — links to our trane.com dealer profile.
   ========================================================================== */
.rail__cell--link{text-decoration:none;transition:background .3s var(--ease)}
.rail__cell--link .rail__lbl em{font-style:normal;color:var(--gold-soft);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .rail__cell--link:hover{background:rgba(232,176,74,.05)}
  .rail__cell--link:hover .rail__lbl em{text-decoration:underline;text-underline-offset:3px}
}
.rail__cell--link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.tcs{display:flex;align-items:center;gap:1.15rem;margin-top:1.9rem;padding:1.05rem 1.2rem;
  background:linear-gradient(140deg,rgba(232,176,74,.09),rgba(232,176,74,.02));
  border:1px solid var(--gold-line);clip-path:var(--chamfer);
  text-decoration:none;transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.tcs__shield{flex:none;width:64px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));transition:transform .45s var(--ease)}
.tcs__body{display:block;min-width:0}
.tcs__ttl{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:.86rem;color:var(--gold-soft);margin-bottom:.3rem}
.tcs__txt{display:block;font-size:.83rem;line-height:1.6;color:var(--text-2)}
.tcs__txt b{color:var(--cream);font-weight:600}
.tcs__vfy{display:inline-block;margin-top:.55rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;color:var(--gold);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .tcs:hover{transform:translateY(-3px);border-color:rgba(232,176,74,.55);background:linear-gradient(140deg,rgba(232,176,74,.14),rgba(232,176,74,.03))}
  .tcs:hover .tcs__shield{transform:scale(1.06) rotate(-2deg)}
  .tcs:hover .tcs__vfy{border-bottom-color:var(--gold)}
}
.tcs:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:560px){
  .tcs{flex-direction:column;align-items:flex-start;gap:.85rem}
  .tcs__shield{width:56px}
}

/* ==========================================================================
   v4.0 · FIELD NOTES — Trane-sourced tech tips rail
   ========================================================================== */
.tips{background:var(--bg);position:relative;overflow:hidden}
.tips::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 159px,var(--gridline) 160px);
  pointer-events:none}
.tips .wrap{position:relative}
.tips__rail{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(280px,320px);gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1.4rem;margin-inline:-.25rem;
  scrollbar-width:thin;scrollbar-color:var(--gold-line) transparent}
.tips__rail::-webkit-scrollbar{height:5px}
.tips__rail::-webkit-scrollbar-track{background:var(--line)}
.tips__rail::-webkit-scrollbar-thumb{background:var(--gold-line)}

.tip{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;
  padding:1.5rem 1.35rem 1.25rem;background:var(--surface);border:1px solid var(--line);
  clip-path:var(--chamfer);transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.tip::after{content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--gold),transparent 70%);opacity:.4;transition:opacity .4s var(--ease)}
.tip__n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--text-3)}
.tip__flag{position:absolute;top:1.35rem;right:1.25rem;font-family:var(--mono);font-size:.53rem;
  letter-spacing:.14em;color:var(--red);border:1px solid rgba(226,60,44,.4);padding:.18rem .42rem;
  background:rgba(226,60,44,.08)}
.tip__h{margin-top:.7rem;font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.08rem;line-height:1.25;color:var(--cream)}
.tip__p{margin-top:.65rem;font-size:.86rem;line-height:1.62;color:var(--text-2);flex:1}
.tip__p em{font-style:italic;color:var(--cream)}
.tip__src{margin-top:1.1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;
  color:var(--text-3);border-top:1px solid var(--line);padding-top:.7rem;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.tip__src i{font-style:normal;color:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .tip:hover{transform:translateY(-4px);border-color:var(--gold-line);background:var(--surface-2)}
  .tip:hover::after{opacity:1}
  .tip:hover .tip__src{color:var(--gold-soft);border-top-color:var(--gold-line)}
}
.tip__src:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tips__foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-top:.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.tips__fine{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;line-height:1.8;
  color:var(--text-3);max-width:62ch;text-transform:uppercase}
.tips__more{flex:none}
@media (max-width:640px){
  .tips__rail{grid-auto-columns:minmax(255px,84vw)}
  .tips__foot{flex-direction:column;align-items:flex-start}
}

/* tips rail — scroll affordance */
.tips__hint{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--text-3)}
.tips__hintbar{width:2.2rem;height:1px;background:var(--gold-line);display:inline-block}
.tips__wrapper{position:relative}
.tips__wrapper::after{content:"";position:absolute;top:0;right:0;bottom:1.4rem;width:clamp(30px,6vw,72px);
  background:linear-gradient(90deg,rgba(18,12,8,0),var(--bg) 88%);pointer-events:none;z-index:2}
.tips__rail{margin-top:.9rem}
.tips__rail:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* ==========================================================================
   v4.0 · COWBOY MIKE — BOOKING CONCIERGE
   --------------------------------------------------------------------------
   Modal booking assistant. Brand tokens only, GPU-only transforms,
   hover gated to fine pointers, full reduced-motion fallback.
   Behaviour lives in cwj/cowmike-book.js.
   ========================================================================== */
.mike[hidden]{display:none!important}
.mike{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;
  padding:0;pointer-events:none}
body.mike-lock{overflow:hidden}

.mike__scrim{position:absolute;inset:0;background:rgba(6,3,2,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .32s var(--ease);pointer-events:auto;border:0;padding:0;cursor:pointer}
.mike.is-open .mike__scrim{opacity:1}

.mike__panel{position:relative;pointer-events:auto;width:min(460px,100%);
  max-height:min(88vh,760px);display:flex;flex-direction:column;
  background:linear-gradient(168deg,var(--surface-2),var(--bg-2));
  border:1px solid var(--gold-line);border-top:3px solid var(--red);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:translate3d(0,26px,0);opacity:0;
  transition:transform .38s var(--ease),opacity .3s var(--ease)}
.mike.is-open .mike__panel{transform:none;opacity:1}

/* ---- head ---- */
.mike__head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line);flex:none}
.mike__face{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.mike__id{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mike__id b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:1rem}
.mike__id em{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-top:.15rem}
.mike__x{margin-left:auto;flex:none;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--text-2);font-size:.85rem;clip-path:var(--chamfer);
  transition:border-color .25s,color .25s,background .25s}

/* ---- progress ---- */
.mike__prog{height:2px;background:var(--line);flex:none;overflow:hidden}
.mike__prog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}

/* ---- Mike's line ---- */
.mike__say{padding:1.05rem 1.15rem .9rem;font-size:.96rem;line-height:1.55;color:var(--text-2);
  border-bottom:1px solid var(--line);flex:none}
.mike__say b{color:var(--cream);font-weight:700}

/* ---- scrolling body ---- */
.mike__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.05rem 1.15rem 1.2rem;
  display:flex;flex-direction:column;gap:.6rem}

/* ---- chips ---- */
.mike__chips{display:grid;gap:.5rem}
.mike__chip{display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;text-align:left;width:100%;
  padding:.72rem .9rem;background:var(--surface);border:1px solid var(--line);clip-path:var(--chamfer);
  transition:transform .28s var(--ease),border-color .28s,background .28s}
.mike__chip b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.9rem;color:var(--cream)}
.mike__chip em{font-style:normal;font-size:.76rem;color:var(--text-3);line-height:1.4}
.mike__chip.is-on{border-color:var(--gold-line);background:rgba(232,176,74,.07)}

/* ---- fields ---- */
.mike__field{display:flex;flex-direction:column;gap:.35rem}
.mike__field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.mike__field label span{color:var(--text-3);opacity:.7;text-transform:none;letter-spacing:.08em}
.mike__field input{background:var(--bg-2);border:1px solid var(--line-2);color:var(--cream);
  font-family:var(--sans);font-size:1rem;padding:.75rem .85rem;clip-path:var(--chamfer);
  transition:border-color .25s,background .25s}
.mike__field input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold-line)}
.mike__field input::placeholder{color:rgba(244,234,214,.28)}

.mike__err{font-size:.82rem;color:#ff9a8c;border-left:2px solid var(--red);padding-left:.6rem;margin:.2rem 0}
.mike__err a{color:var(--gold);text-decoration:underline}
.mike__ok{font-size:.82rem;color:var(--gold);border-left:2px solid var(--gold-line);padding-left:.6rem;margin:.2rem 0}
.mike__ok--far{color:var(--rust);border-left-color:rgba(217,128,58,.5)}

/* ---- urgent + inline link ---- */
.mike__urgent{display:grid;gap:.55rem}
.mike__link{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);padding:.6rem 0;text-align:center;transition:color .25s}

/* ---- summary ---- */
.mike__sum{margin:0;border:1px solid var(--line);clip-path:var(--chamfer);background:rgba(13,8,5,.5)}
.mike__row{display:grid;grid-template-columns:6.6rem 1fr;gap:.7rem;padding:.6rem .85rem;
  border-bottom:1px solid var(--line);align-items:baseline}
.mike__row:last-child{border-bottom:0}
.mike__row dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0}
.mike__row dd{margin:0;font-size:.9rem;color:var(--cream);word-break:break-word}
.mike__sum--quiet dd{color:var(--text-2)}

.mike__fine{font-size:.72rem;line-height:1.5;color:var(--text-3);margin:.35rem 0 0}

/* ---- done ---- */
.mike__done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;
  padding:1.1rem .9rem 1.2rem;border:1px solid var(--gold-line);clip-path:var(--chamfer);
  background:linear-gradient(150deg,rgba(232,176,74,.10),rgba(232,176,74,.02))}
.mike__check{width:42px;height:42px;display:grid;place-items:center;margin-bottom:.35rem;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));color:#241206;font-size:1.2rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mike__done b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem}
.mike__done em{font-style:normal;font-size:.8rem;color:var(--text-2)}

/* ---- foot ---- */
.mike__foot{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.15rem;
  border-top:1px solid var(--line);flex:none}
.mike__back{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);transition:color .25s}
.mike__count{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--text-3)}
.mike--done .mike__count{color:var(--gold)}

/* ---- hover, fine pointers only ---- */
@media (hover:hover) and (pointer:fine){
  .mike__chip:hover{transform:translate3d(3px,0,0);border-color:var(--gold-line);background:rgba(232,176,74,.06)}
  .mike__x:hover{border-color:var(--gold-line);color:var(--gold);background:rgba(232,176,74,.06)}
  .mike__back:hover,.mike__link:hover{color:var(--gold)}
}

/* ---- desktop centres the panel ---- */
@media (min-width:720px){
  .mike{align-items:center;padding:1.5rem}
  .mike__panel{clip-path:var(--chamfer);border-radius:0}
}
/* ---- mobile sheet, clears the .mobar ---- */
@media (max-width:719px){
  .mike__panel{width:100%;max-height:92vh;
    padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .mike__say{font-size:.92rem}
}

/* ---- homepage entry point under the schedule console ---- */
.sform__mike{display:flex;align-items:center;gap:.7rem;width:100%;margin-top:.8rem;
  padding:.7rem .85rem;background:rgba(232,176,74,.05);border:1px solid var(--gold-line);
  clip-path:var(--chamfer);text-align:left;
  transition:transform .28s var(--ease),background .28s,border-color .28s}
.sform__mike img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--gold)}
.sform__mike span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sform__mike b{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.82rem;color:var(--cream)}
.sform__mike em{font-style:normal;font-size:.72rem;color:var(--text-3)}
.sform__mike i{margin-left:auto;flex:none;font-style:normal;color:var(--gold);font-size:.9rem}
@media (hover:hover) and (pointer:fine){
  .sform__mike:hover{background:rgba(232,176,74,.09);border-color:var(--gold);transform:translate3d(0,-2px,0)}
}

/* ============================================================
   v4.1 · THE COMFORT CLUB — member ledger
   Non-member column is the Peterman pattern: showing what $0/mo
   actually buys reframes the decision from "should I spend $25"
   to "why would I pick the worse column."
   ============================================================ */
.ledger{margin-top:2.1rem;display:grid;grid-template-columns:1.4fr .92fr 1.02fr;
  border:1px solid var(--line);background:linear-gradient(170deg,var(--surface),var(--bg-2));
  clip-path:var(--chamfer);overflow:hidden}
.ledger>*{display:flex;align-items:center;min-height:2.9rem;
  padding:.62rem clamp(.6rem,1.5vw,1.05rem);border-top:1px solid var(--line);
  font-size:.845rem;line-height:1.35;color:var(--text-2)}
.ledger>:nth-child(-n+3){border-top:0}
/* the member column, held continuous down the whole table */
.ledger>:nth-child(3n){background:rgba(232,176,74,.062);color:var(--cream);font-weight:600;
  box-shadow:inset 1px 0 0 var(--gold-line)}
.ledger__lbl{color:var(--text-2)}
.ledger__no{color:var(--text-3)}
.ledger__h{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.25rem;
  padding-top:1rem;padding-bottom:.85rem;font-family:var(--mono)}
.ledger__h em{font-style:normal;font-size:.58rem;letter-spacing:.16em;color:var(--text-3)}
.ledger__h b{font-weight:400;font-size:1.15rem;color:var(--cream);line-height:1}
.ledger__h b sup{font-size:.62rem;color:var(--gold)}
.ledger__h b i{font-style:normal;font-size:.6rem;letter-spacing:.1em;color:var(--text-3);margin-left:.15rem}
.ledger__h--m{border-top:0}
.ledger__h--m em{color:var(--gold-soft)}
.ledger__fine{margin-top:1rem;font-size:.78rem;line-height:1.65;color:var(--text-3)}
.ledger__fine b{color:var(--text-2)}
.ledger__fine a{color:var(--gold);border-bottom:1px solid var(--gold-line);transition:color .25s,border-color .25s}
@media (hover:hover) and (pointer:fine){
  .ledger__fine a:hover{color:var(--gold-soft);border-color:var(--gold)}
}
@media (max-width:719px){
  .ledger{grid-template-columns:1.25fr .78fr .92fr}
  .ledger>*{font-size:.76rem;min-height:2.6rem;padding:.55rem .55rem}
  .ledger__h b{font-size:1rem}
}

/* ============================================================
   v4.2 · ON THE TABLE — the printed leave-behind card
   ------------------------------------------------------------
   Two looping clips of the physical card Cowboys hand across the
   kitchen table (front = five system levels, back = guarantees).
   Both clips are lazy: preload="none" until cwj/cards.js sees them
   enter the viewport. The poster IS the card, so no-JS, reduced
   motion, and failed-decode all still show the artifact.
   ============================================================ */
.cardsec{background:var(--bg-2);border-block:1px solid var(--line);position:relative;overflow:hidden}
.cardsec__grid{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(85% 75% at 50% 42%,#000 28%,transparent 100%);
  -webkit-mask-image:radial-gradient(85% 75% at 50% 42%,#000 28%,transparent 100%)}
.cardsec .wrap{position:relative}

.cardsec__rail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(2rem,4vw,3rem)}
.cardfig{margin:0;min-width:0}
.cardfig__btn{display:block;width:100%;position:relative;overflow:hidden;
  border:1px solid var(--line-2);background:var(--bg);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease)}
.cardfig__v{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg-2)}
.cardfig__zoom{position:absolute;left:50%;bottom:1rem;transform:translate3d(-50%,8px,0);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;white-space:nowrap;color:var(--gold-soft);
  background:rgba(13,8,5,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--gold-line);padding:.45rem .9rem;clip-path:var(--chamfer);
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cardfig__btn:hover{transform:translate3d(0,-4px,0);border-color:var(--gold-line);
    box-shadow:0 26px 60px -32px rgba(0,0,0,.95)}
  .cardfig__btn:hover .cardfig__zoom{opacity:1;transform:translate3d(-50%,0,0)}
}
.cardfig__btn:focus-visible .cardfig__zoom{opacity:1;transform:translate3d(-50%,0,0)}
@media (hover:none){.cardfig__zoom{opacity:.9;transform:translate3d(-50%,0,0)}}
.cardfig__cap{display:flex;align-items:center;gap:.6rem;margin-top:.85rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;line-height:1.6;color:var(--text-3)}
.cardfig__cap i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* the five levels, as real text — readable without the video or the zoom */
.cardsec__tiers{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.cardsec__tiers li{position:relative;background:var(--bg-2);padding:1.05rem 1rem;
  display:flex;flex-direction:column;gap:.3rem;min-width:0}
.cardsec__tiers li:first-child{box-shadow:inset 2px 0 0 var(--gold)}
.cardsec__tiers b{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;color:var(--cream)}
.cardsec__tiers span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--text-2)}
.cardsec__tiers em{position:absolute;top:.5rem;right:.55rem;font-style:normal;font-family:var(--mono);
  font-size:.5rem;letter-spacing:.14em;color:var(--red);border:1px solid rgba(226,60,44,.4);
  background:rgba(226,60,44,.08);padding:.16rem .38rem}

.cardsec__foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.2rem)}
.cardsec__fine{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;line-height:1.8;
  text-transform:uppercase;color:var(--text-3);max-width:62ch}

@media (max-width:860px){
  .cardsec__rail{grid-template-columns:1fr}
  .cardsec__tiers{grid-template-columns:repeat(2,1fr)}
  .cardsec__tiers li:first-child{grid-column:1/-1}
  .cardsec__foot{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){.cardsec__tiers{grid-template-columns:1fr}}

/* ---------- full-res lightbox ---------- */
.cardzoom[hidden]{display:none!important}
.cardzoom{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center;
  padding:clamp(.7rem,2.5vw,2.2rem);pointer-events:none}
body.cardzoom-lock{overflow:hidden}
.cardzoom__scrim{position:absolute;inset:0;border:0;padding:0;cursor:zoom-out;pointer-events:auto;
  background:rgba(6,3,2,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .32s var(--ease)}
.cardzoom.is-open .cardzoom__scrim{opacity:1}
.cardzoom__fig{position:relative;margin:0;pointer-events:auto;
  width:min(1500px,100%);max-height:100%;display:flex;flex-direction:column;gap:.7rem;
  opacity:0;transform:translate3d(0,14px,0) scale(.98);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.cardzoom.is-open .cardzoom__fig{opacity:1;transform:none}
.cardzoom__pan{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border:1px solid var(--gold-line);background:var(--bg-2);max-height:calc(100dvh - 9rem)}
.cardzoom__pan:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cardzoom__img{display:block;width:100%;height:auto}
/* narrow screens: hold the card at a readable width and let the user pan */
@media (max-width:900px){
  /* The printed card is 2600px of tiny print — it genuinely needs 940px of
     pannable width on a phone. The v5.3 service diagrams do not: at 2000px
     natural width inside a ~366px pane you land at 5.5x zoom staring at a
     roof truss with no idea where you are. data-fit="diagram" (set by
     cwj/cards.js from data-card-fit on the trigger) drops them to ~2x, which
     is legible AND keeps enough of the drawing on screen to orient by. */
  .cardzoom__img{width:auto;max-width:none;min-width:940px}
  .cardzoom[data-fit="diagram"] .cardzoom__img{min-width:0;width:200vw;max-width:200vw}
}
.cardzoom__cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gold-soft);
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.cardzoom__x{position:absolute;top:-.5rem;right:-.5rem;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--gold-line);
  color:var(--gold-soft);font-size:.9rem;clip-path:var(--chamfer);
  transition:background .25s,border-color .25s,color .25s}
@media (hover:hover) and (pointer:fine){
  .cardzoom__x:hover{background:var(--surface-2);border-color:var(--gold);color:var(--cream)}
}
@media (max-width:560px){.cardzoom__x{top:.4rem;right:.4rem}}

/* ============================================================
   v4.5 · COMMUNICATING SYSTEM — ComfortLink II XL1050
   ------------------------------------------------------------
   Sits inside 03 / THE MACHINE. The thermostat face is built in
   CSS rather than shipped as a product photo: it stays sharp at
   every size, weighs nothing, and — the real reason — it is
   honestly labelled an ILLUSTRATION instead of implying we are
   showing a live display of the customer's own system.
   All motion here is CSS keyframes. No JS. It cannot break
   anything else on the page, and it is fully disabled under
   prefers-reduced-motion.
   ============================================================ */
.comm{position:relative;margin-top:clamp(3rem,6vw,5rem);
  padding-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--line)}
.comm__head{max-width:60rem}
.comm__h{font-family:var(--hero);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.7rem);
  letter-spacing:.005em;margin:.9rem 0 0;text-transform:none}
.comm__h em{font-style:normal;color:var(--red)}
.comm__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4.5vw,3.6rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}

/* ---------- the control face ---------- */
/* Sticky, same pattern as .console in the Comfort Club band: the copy
   column is much taller than the control, and without this the left
   half is a large dead area while you read the right half. */
.tstat{margin:0;min-width:0;position:sticky;top:90px}
.tstat__cap{display:flex;align-items:center;gap:.6rem;margin-top:.85rem;
  font-family:var(--mono);font-size:.57rem;letter-spacing:.14em;line-height:1.7;color:var(--text-3)}
.tstat__cap i{width:6px;height:6px;border-radius:50%;background:var(--rust);flex:none}

/* ---------- the two-way signal path ---------- */
.comm__path{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;
  padding:.9rem 1rem;border:1px solid var(--line);background:var(--bg-2);clip-path:var(--chamfer)}
.comm__node{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--gold-soft);
  white-space:nowrap;flex:none}
.comm__wire{position:relative;flex:1;height:1px;background:var(--gold-line);min-width:1.5rem}
.comm__wire i{position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--cool);box-shadow:0 0 8px rgba(159,212,216,.9)}
html.jsr .comm__wire i{animation:talk 3.4s var(--ease) infinite}
html.jsr .comm__wire:nth-of-type(4) i{animation-delay:.5s}
@keyframes talk{0%{left:0;opacity:0}12%{opacity:1}50%{left:calc(100% - 5px);opacity:1}
  62%{opacity:0}63%{left:calc(100% - 5px)}100%{left:0;opacity:0}}
.comm__pathcap{font-family:var(--mono);font-size:.53rem;letter-spacing:.16em;
  color:var(--text-3);margin-top:.55rem}

.comm__list{list-style:none;margin-top:1.6rem;display:grid;gap:1rem}
.comm__list li{border-left:2px solid var(--gold-line);padding-left:1.1rem;
  color:var(--text-2);font-size:.94rem;line-height:1.65}
.comm__list b{display:block;color:var(--cream);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;margin-bottom:.2rem}
.comm__list em{font-style:italic;color:var(--cream)}

.comm__card{margin-top:1.5rem;padding:.85rem 1rem;border:1px dashed var(--line-2);
  font-size:.88rem;color:var(--text-2);background:rgba(232,176,74,.03)}
.comm__card b{color:var(--gold-soft)}
.comm__card a{color:var(--gold);border-bottom:1px solid var(--gold-line)}
@media (hover:hover) and (pointer:fine){.comm__card a:hover{color:var(--gold-soft);border-color:var(--gold)}}
.comm .hero__cta{margin-top:1.6rem}

@media (max-width:960px){
  .comm__grid{grid-template-columns:1fr}
  .tstat{max-width:34rem;position:static}
}
@media (max-width:560px){
  .comm__path{gap:.35rem;padding:.7rem}
  .comm__node{font-size:.48rem;letter-spacing:.08em}
  .tstat__main{gap:.8rem}
  .tstat__side{margin-left:0;text-align:left}
}
/* ============================================================
   v4.6 · XL1050 — WORKING DEMONSTRATION
   ------------------------------------------------------------
   Replaces the static illustration from v4.5. Layout, control
   names and menu tiles come from Trane's public owner's manual
   (32-5093-04B-EN); Trane publishes no interactive demo, so
   there was nothing to copy and nothing to embed.

   The screen is deliberately rendered in the REAL product's
   greyscale rather than restyled into brand colors. It is a
   product shown honestly inside a brand bezel — the same
   reasoning as the printed card in section 04. Restyling a
   manufacturer's control in gold would misrepresent it.

   Behaviour: cwj/tstat.js. Everything is scoped under #tsScreen.
   ============================================================ */
.tstat__bezel{padding:10px;background:linear-gradient(168deg,#2a2a2a,#161616);
  border:1px solid var(--gold-line);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.95)}
.tstat__screen{position:relative;display:flex;flex-direction:column;
  /* width:100% is load-bearing. Without it the browser satisfies
     min-height first and then DERIVES width from aspect-ratio
     (304px x 1.6 = 486px), which pushed the setpoint pad 114px
     off-screen on every phone. body{overflow-x:hidden} hid it. */
  width:100%;max-width:100%;aspect-ratio:16/10;min-height:17rem;overflow:hidden;
  background:#9c9c9c;font-family:var(--sans);color:#fff;user-select:none}

/* ---- status bar ---- */
.ts__top{display:flex;align-items:center;gap:.6rem;flex:none;
  padding:.45rem .7rem;background:#4c4c4c;font-size:.72rem;font-weight:700}
.ts__time{margin-inline:auto}
.ts__sig{display:flex;align-items:flex-end;gap:2px;height:12px}
.ts__sig i{width:3px;background:#4ad24a;display:block}
.ts__sig i:nth-child(1){height:4px}.ts__sig i:nth-child(2){height:7px}
.ts__sig i:nth-child(3){height:10px}.ts__sig i:nth-child(4){height:12px}

/* ---- views ---- */
.ts__view{flex:1;min-height:0;position:relative}
.ts__view[hidden]{display:none}
.ts__home{display:grid;place-items:center}

.ts__readout{display:flex;align-items:flex-start;justify-content:center;
  margin-top:.4rem;line-height:.8}
.ts__temp{font-size:clamp(3.6rem,12vw,6.4rem);font-weight:700;color:#fff;letter-spacing:-.03em}
.ts__deg{font-size:clamp(1rem,3vw,1.6rem);font-weight:700;margin-top:.35em}
.ts__status{position:absolute;left:0;right:0;bottom:1.1rem;display:flex;align-items:center;
  justify-content:center;gap:.45rem;font-size:.86rem;font-weight:700}
.ts__ico{width:16px;height:16px;border-radius:3px;flex:none;background:#7d7d7d}
.ts__ico--cool{background:linear-gradient(180deg,#7fb8e6,#2f7fc4)}
.ts__ico--heat{background:linear-gradient(180deg,#f0a05a,#d4562a)}
.ts__ico--idle,.ts__ico--off{background:#7d7d7d}

/* ---- setpoint pad ---- */
.ts__pad{position:absolute;top:50%;right:.7rem;transform:translateY(-50%);
  width:5.2rem;display:grid;gap:0;background:#4c4c4c;border:2px solid #fff;border-radius:9px;
  overflow:hidden}
.ts__arrow{display:block;width:100%;min-height:44px;padding:.45rem 0;color:#fff;font-size:1.1rem;line-height:1;
  background:none;border:0;cursor:pointer;transition:background .18s}
.ts__sets{border-block:1px solid rgba(255,255,255,.55)}
.ts__set{display:block;width:100%;min-height:44px;padding:.3rem .2rem;background:none;border:0;color:#fff;
  cursor:pointer;text-align:center;transition:background .18s}
.ts__set em{display:block;font-style:normal;font-size:.55rem;font-weight:700}
.ts__set b{display:block;font-size:1.05rem;font-weight:700}
.ts__set.is-sel{background:rgba(255,255,255,.22)}
.ts__set+.ts__set{border-top:1px solid rgba(255,255,255,.28)}
@media (hover:hover) and (pointer:fine){
  .ts__arrow:hover,.ts__set:hover{background:rgba(255,255,255,.16)}
}
.ts__arrow:active{background:rgba(255,255,255,.3)}

/* ---- menu + panels ---- */
.ts__vtitle{background:#4c4c4c;padding:.35rem;text-align:center;font-size:.7rem;font-weight:700}
/* The menu must scroll inside the screen. Ten tiles at 44px minimum will
   not fit a short phone screen, and without this the third row paints
   straight through the bottom control bar. */
.ts__menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ts__tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;padding:.6rem}
.ts__tile{background:#6f6f6f;border:1px solid rgba(255,255,255,.28);border-radius:5px;
  min-height:44px;padding:.5rem .2rem .35rem;color:#fff;font-size:.5rem;font-weight:600;line-height:1.25;
  cursor:pointer;text-align:center;transition:background .18s}
.ts__tile.is-off{opacity:.42;cursor:default}
@media (hover:hover) and (pointer:fine){.ts__tile:not(.is-off):hover{background:#828282}}
.ts__tico{display:block;font-size:1.05rem;margin-bottom:.15rem}

.ts__panel{padding:.7rem .8rem;overflow-y:auto}
.ts__rows{list-style:none;display:grid;gap:1px;background:rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.25);margin:0}
.ts__rows li{display:flex;align-items:center;gap:.6rem;background:#8f8f8f;padding:.42rem .6rem;font-size:.72rem}
.ts__rows b{margin-left:auto;font-size:.9rem}
.ts__rows em{font-style:normal;font-size:.56rem;opacity:.85;min-width:4.6rem;text-align:right}
.ts__note{margin-top:.6rem;font-size:.62rem;line-height:1.5;color:#f0f0f0;opacity:.92}
.ts__big{font-size:2.6rem;font-weight:700;text-align:center;margin:.3rem 0 .4rem}
.ts__slider{display:flex;align-items:center;gap:.5rem}
.ts__sbtn{width:44px;height:44px;flex:none;background:#4c4c4c;border:1px solid #fff;
  border-radius:5px;color:#fff;font-size:.95rem;cursor:pointer}
.ts__track{flex:1;height:7px;background:#6f6f6f;border-radius:4px;overflow:hidden}
.ts__track i{display:block;height:100%;background:linear-gradient(90deg,#2f7fc4,#7fb8e6);
  transition:width .3s var(--ease)}
.ts__bars{display:flex;align-items:flex-end;gap:.35rem;height:5.2rem;margin-top:.3rem}
.ts__bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.ts__bar i{display:block;width:100%;background:linear-gradient(180deg,#cfcfcf,#7f7f7f)}
.ts__bar em{font-style:normal;font-size:.5rem;margin-top:.2rem}
.ts__dealer{font-size:.78rem;line-height:1.6;text-align:center;margin-top:.8rem}

/* ---- bottom bar ---- */
.ts__bot{display:flex;flex:none;background:#4c4c4c;border-top:1px solid rgba(255,255,255,.18)}
.ts__b{flex:1;display:flex;align-items:center;gap:.4rem;min-height:44px;padding:.42rem .35rem;color:#fff;
  background:none;border:0;border-left:1px solid rgba(255,255,255,.28);cursor:pointer;
  text-align:left;min-width:0;transition:background .18s}
.ts__b:first-child{border-left:0}
.ts__b i{font-style:normal;font-size:.9rem;flex:none;opacity:.9}
.ts__b b{display:block;font-size:.68rem;font-weight:700;line-height:1.15}
.ts__b em{display:block;font-style:normal;font-size:.5rem;opacity:.85;line-height:1.2}
@media (hover:hover) and (pointer:fine){.ts__b:hover{background:#5e5e5e}}
.ts__b:active{background:#666}
.tstat__screen :focus-visible{outline:2px solid #4ad24a;outline-offset:-2px}

@media (max-width:560px){
  .ts__tiles{grid-template-columns:repeat(3,1fr)}
  .ts__b em{display:none}
  .ts__pad{width:4.2rem;right:.5rem}
  .ts__temp{font-size:clamp(3rem,15vw,4.4rem)}
}
/* Touch devices only: Apple's minimum tap target is 44px and the standard
   .btn lands at 42 on an iPad in landscape (desktop layout, finger input).
   Scoped to (pointer:coarse) so mouse/desktop visual density is untouched. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .nav a,.footer__grid a{padding-block:.45rem}
}

/* ==========================================================================
   v4.9 · CUTAWAY PLATE  (section 03.1, below the XL1050 simulator)
   --------------------------------------------------------------------------
   The source clip is a technical illustration on a WHITE page, and it stays
   white for its whole run — there is no crop that removes it. So rather than
   fight it, it is presented as a printed plate laid on the dark page: cream
   mat, hairline gold rule, drop shadow. That reads as deliberate, and it is
   the same visual idea as the leave-behind card in section 04.

   Motion, lazy-loading and the reduced-motion / Save-Data opt-out all come
   from cwj/cards.js via the shared [data-card-v] hook. No new JS.
   ========================================================================== */
.plate{margin:clamp(2rem,4vw,3.2rem) 0 0;max-width:60rem;margin-inline:auto}
.plate__frame{position:relative;background:#f4f1ea;padding:clamp(.5rem,1.4vw,.9rem);
  border:1px solid var(--gold-line);
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.06) inset;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.plate__v{display:block;width:100%;height:auto;background:#f4f1ea}
.plate__cap{margin-top:.95rem;font-size:.92rem;line-height:1.65;color:var(--text-2);
  max-width:52rem}
.plate__cap b{color:var(--cream)}

@media (max-width:640px){
  .plate__cap{font-size:.86rem}
}

/* ==========================================================================
   v5.0 · CUTAWAY HOUSE — now a DISPLAY, not a second control
   --------------------------------------------------------------------------
   The old version put four red hotspots on the house AND eight cards beside
   it: two interfaces competing to do one job, and only four of the eight
   categories were reachable from the house. Michael, 2026-07-28: "no ones
   click the red dots." He was right — the cards look clickable and the dots
   did not, so the dots were dead weight and the diagram read as decoration.

   The hotspots are GONE. The eight cards are now the only input on this
   section. Hovering, focusing or choosing a card lights the parts of the
   system that card is actually about, and the caption names them. The
   diagram went from a thing you were asked to operate to a thing that
   answers you.

   Mechanism, deliberately mostly CSS: every addressable group carries
   .hpart and sits at a dim base opacity. cwj/house.js adds .is-on to the
   groups named in a card's data-lit, and sets data-tone on the <svg>.
   Tone drives colour; .is-on drives presence. Nothing else.
   ========================================================================== */
.house{position:relative;background:
  linear-gradient(rgba(27,18,13,.5),rgba(27,18,13,.5)),
  repeating-linear-gradient(0deg,transparent,transparent 23px,var(--gridline) 24px),
  repeating-linear-gradient(90deg,transparent,transparent 23px,var(--gridline) 24px);
  border:1px solid var(--line);clip-path:var(--chamfer);padding:1.4rem 1.2rem 1rem}
.house svg{width:100%;height:auto}
.house__ln{fill:none;stroke:rgba(244,234,214,.5);stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.house__wash{fill:transparent;transition:fill .5s var(--ease)}
.house__lbl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  fill:var(--text-3);text-anchor:middle;opacity:0;transition:opacity .4s var(--ease)}

/* Base state: the system is drawn but resting. Not invisible — a diagram
   that vanishes between interactions looks broken, not calm. */
.hpart{opacity:.34;transition:opacity .45s var(--ease)}
.hpart.is-on{opacity:1}
.hpart.is-on .house__lbl{opacity:1}
.hpart.is-on .house__ln{stroke:var(--gold)}

/* Tone: what the highlight MEANS. Set on the <svg> by house.js. */
.house svg[data-tone="cool"]  .hpart.is-on .house__ln{stroke:var(--cool)}
.house svg[data-tone="heat"]  .hpart.is-on .house__ln{stroke:var(--rust)}
.house svg[data-tone="urgent"] .hpart.is-on .house__ln{stroke:var(--red)}
.house svg[data-tone="cool"]   .hp-up  .house__wash,
.house svg[data-tone="cool"]   .hp-down .house__wash{fill:rgba(159,212,216,.05)}
.house svg[data-tone="heat"]   .hp-up  .house__wash,
.house svg[data-tone="heat"]   .hp-down .house__wash{fill:rgba(217,128,58,.07)}
.house svg[data-tone="urgent"] .hp-up  .house__wash,
.house svg[data-tone="urgent"] .hp-down .house__wash{fill:rgba(226,60,44,.07)}
.hp-up.is-on .house__wash,.hp-down.is-on .house__wash{fill:rgba(232,176,74,.06)}

/* Refrigerant / air movement. The dashes only march on a lit part, so the
   diagram is still while you read it and moves the moment you point at a
   card — the motion IS the answer, not ambient noise. */
.house__flow,.house__air{stroke-dasharray:5 7}
html.jsr .hpart.is-on .house__flow{animation:hflow 2.2s linear infinite}
html.jsr .hpart.is-on .house__air{animation:hflow 1.5s linear infinite}
@keyframes hflow{to{stroke-dashoffset:-24}}

/* Idle: the condenser fan turns slowly on its own so the section is never
   completely dead, and the whole system breathes once every few seconds.
   Both stop the moment a card is chosen — see .house svg:not([data-tone="idle"]). */
html.jsr .house__fan{transform-origin:347px 268px;animation:hfan 11s linear infinite}
@keyframes hfan{to{transform:rotate(360deg)}}
html.jsr .house svg[data-tone="idle"] .hpart{animation:hbreathe 6s var(--ease) infinite}
@keyframes hbreathe{0%,100%{opacity:.3}50%{opacity:.46}}

.house__cap{display:flex;align-items:flex-start;gap:.55rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;line-height:1.7;
  color:var(--text-3);min-height:2.6em}
.house__cap i{width:7px;height:7px;border-radius:50%;background:var(--gold);
  flex:none;margin-top:.42rem;transition:background .4s var(--ease)}
.house svg[data-tone="urgent"] ~ .house__cap i{background:var(--red)}

/* ==========================================================================
   v5.0 · MOBILE PASS  —  Michael, 2026-07-28: "make sure the mobile site is
   spot on perfect." A nine-device sweep (iPhone SE/12/13 Pro Max/15 Pro on
   real WebKit, iPad portrait + Pro 11 landscape, Pixel 7, Galaxy S9+, Tab S4)
   found three classes of real defect. Everything below is scoped so desktop
   is untouched.

   NOT defects, checked and deliberately left alone:
     · .tip cards measuring past the viewport — .tips__rail is a horizontal
       scroll-snap rail with overflow-x:auto. That is the design.
     · #airCanvas measuring 2x wide — .hero has overflow:hidden, so it is
       clipped and cannot scroll the page.
   ========================================================================== */

/* 1 · TAP TARGETS under 44px. v4.7 fixed .btn and gave .nav a padding, but
   padding alone only got the nav to 34px on an iPad in landscape — the
   desktop layout with a finger driving it. min-height is the honest fix. */
@media (pointer:coarse){
  .nav a,.footer__grid a{min-height:44px;display:inline-flex;align-items:center}
  .util__phone{display:inline-flex;align-items:center;min-height:44px}
  .sform input:not(.hp),.sform select,.sform textarea{min-height:44px}
  .faq summary{min-height:44px}
  .dchip{min-height:44px}
}

/* 2 · LEGIBILITY FLOOR. Four mono labels rendered between 7.7px and 9.0px on
   a phone — present, but not readable at arm's length in a truck. Raised to
   ~9.5-10px. .comm__path gains flex-wrap because the nodes were only fitting
   at 7.7px by being tiny; at a readable size the row has to be allowed to
   break instead of overflowing. */
@media (pointer:coarse){
  .comm__path{flex-wrap:wrap;row-gap:.5rem}
  .comm__node{font-size:.62rem;letter-spacing:.1em}
  .comm__pathcap{font-size:.6rem}
  .tip__flag{font-size:.6rem}
  .console__sub{font-size:.6rem}
}

/* 3 · THE HERO INSTRUMENT STRIP WAS SILENTLY CUTTING ITSELF OFF.
   Michael, 2026-07-28: "we need to fix this to where its all visible."
   Measured: the row fits at 1280px and wider, and is clipped at every width
   from 1194px down — that is every tablet AND a 13" laptop. The base rule
   pairs white-space:nowrap with overflow:hidden, so it truncated in silence
   rather than wrapping or scrolling; "SERVICE RANGE 6 COUNTIES" was reading
   as "6 COUNTIE" and nobody would ever know the rest was there.

   A wrap rule already existed but only fired at phone widths. Raised to
   1279px so it covers the whole clipped range. overflow:visible is required
   too — wrapping alone still gets clipped by the inherited hidden. */
@media (max-width:1279px){
  .hero__inst-in{flex-wrap:wrap;white-space:normal;gap:.45rem 1.5rem;overflow:visible;line-height:1.5}
}

/* ==========================================================================
   v5.2 · MOTION IS FORCED ON, EVERYWHERE
   --------------------------------------------------------------------------
   Michael, 2026-07-28: "on mobile i need to force all of the animations to
   work." This continues the standing call he first made on 2026-07-20, when
   every prefers-reduced-motion block was stripped because the OS setting was
   making iPads look static. Six blocks had crept back in with v4.5 (comm
   wire), v4.6 (thermostat), v4.2 (card lightbox), v4.0 (Cowboy Mike), the
   tips rail, and v5.0 (the cutaway house) — each one individually reasonable,
   collectively the thing that made his phone look half-dead.

   THIS IS A DELIBERATE ACCESSIBILITY TRADE-OFF, made by the site owner with
   the cost stated. Visitors who set Reduce Motion at the OS level will still
   get full motion here.

   TO RESTORE ACCESSIBLE BEHAVIOUR, the whole revert is:
     1. re-add per-component @media (prefers-reduced-motion:reduce) blocks
     2. cwj/showroom.js line ~16   : var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     3. cwj/club.js, cwj/tstat.js  : same, they carry the same commented line
     4. cwj/cards.js               : restore the motionOK() gate
   Nothing else is involved.

   The tips rail keeps scroll-snap OFF regardless — that was never a motion
   preference, it is that snap points fight a horizontal flick on a phone. */
@media (prefers-reduced-motion:reduce){
  .tips__rail{scroll-snap-type:none}
}

/* ==========================================================================
   v5.3 · SERVICE BLOCK PLATES
   --------------------------------------------------------------------------
   Michael, 2026-07-28, on the four service photos: "lets do the first 4
   images and maybe we can make it better graphically." Every one of them
   had a problem — 01 was shot at the OLD tan warehouse with a masked tech,
   02 was cropped so tight you could not tell what it was, and 04 was
   captioned DUCTWORK while showing a UV lamp. All four also had techs in
   light-blue shirts rather than Cowboys uniform.

   They are replaced with labelled technical cutaways Michael already owns
   (assets/img/hvac-interactive/). Every label on all four was read at full
   resolution before shipping — DUAL-RUN CAPACITOR, CONTACTOR RELAY, TRANE
   AIR HANDLER UNIT, SUPPLY PLENUM, MAIN TRUNK DUCT, FLEX CONNECTOR — and
   they are real, correctly spelled and correctly placed. Worth knowing:
   the MP4 versions of these same illustrations DO carry garbled AI
   lettering ("ALAVVTAIR OPTOUT" where the still says "AFTER UV PURIFIER").
   The stills are clean. Use the stills.

   Source is 2752x1536; shipped at 2000px wide WebP, which is 2x the ~1000px
   display slot. That is double the resolution of the photos it replaces at
   roughly the same weight.

   The frame changes shape on purpose. The stock .svc__media is 4/3 with
   object-fit:cover and a 112% parallax overscan — on a wide, label-dense
   diagram that crops the labels off all four edges, which are the entire
   point. These get 16/9 (the native ratio), contain, and no overscan, so
   nothing is ever cut. The four figures also drop data-parallax: drifting a
   technical drawing is noise when the job is legibility.
   ========================================================================== */
.svc__media--plate{aspect-ratio:auto;background:none;border:0;clip-path:none;overflow:visible}
.svc__media--plate .svc__plate{display:block;position:relative;aspect-ratio:16/9;
  background:#f6f2e8;border:1px solid var(--gold-line);overflow:hidden;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.svc__media--plate img{width:100%;height:100%;object-fit:contain;filter:none;display:block}
/* These plates carry small technical labels. At 355px on a phone the type in
   the source art lands around 5px — present, unreadable. So each plate is a
   real <a> to the full 2000px file, upgraded by cwj/cards.js into the same
   pannable lightbox the printed card already uses. With JS off the browser
   just opens the image, which is still the right outcome. */
.svc__media--plate a{display:block;width:100%;height:100%;position:relative}
.svc__media--plate .cardfig__zoom{left:auto;right:.6rem;bottom:.6rem;
  transform:none;opacity:.85;background:rgba(13,8,5,.82);padding:.3rem .6rem;
  border:1px solid var(--gold-line)}
.svc__media--plate a:hover .cardfig__zoom,
.svc__media--plate a:focus-visible .cardfig__zoom{opacity:1;transform:none}
/* The caption moves OUT of the frame. As a chip floating over the bottom-left
   it was covering "STERILIZED EVAPORATOR COIL" on the air-quality plate and
   "SUPPLY PLENUM" on the duct plate — obscuring the labels it exists to
   introduce. Below the plate it reads as a figure caption, which is what it is. */
.svc__media--plate .svc__cap{position:static;display:block;background:none;
  border:0;padding:.75rem 0 0;color:var(--text-3)}

/* ==========================================================================
   v5.6 · INNER-PAGE VOCABULARY — bringing the rich.css pages onto showroom
   --------------------------------------------------------------------------
   The site has been running five stylesheets (showroom / rich / motion /
   styles / none). This block starts the consolidation by porting the classes
   the rich.css pages need but showroom.css never had.

   Measured before writing a line: of the 36 classes those pages use, 27-32
   ALREADY exist here. The gap is small and it CLUSTERS — five classes are
   missing from every single page (pagehead, pagehead__in, crumb, eyebrow,
   dot), and adding just those converts contact.html outright. Four more
   (prose, section--alt, svcblock, svcblock__media) cover about.html, all six
   services/*.html and services.html.

   These are ported into the showroom idiom, not copied: chamfers instead of
   border-radius, the mono eyebrow with its rule line, the grid backdrop.
   Picking up showroom's larger .h2, its .lede and its .sform IS the upgrade.

   ⚠️ KNOWN COLLISION, do not convert specials.html until it is resolved:
   `.offers` means a SECTION BACKGROUND here and a 3-COLUMN GRID in rich.css.
   Pointing specials.html at this file without renaming its grid will break
   the offer layout. Checked all 36 shared class names; this is the only one
   that conflicts semantically rather than just cosmetically.
   ========================================================================== */

/* ---------- page header (every inner page) ---------- */
.pagehead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,var(--surface),var(--bg)),
    repeating-linear-gradient(0deg,transparent,transparent 23px,var(--gridline) 24px),
    repeating-linear-gradient(90deg,transparent,transparent 23px,var(--gridline) 24px)}
.pagehead__in{position:relative;z-index:2;padding-block:clamp(2.8rem,6vw,5rem)}
.pagehead h1{font-family:var(--hero);font-weight:800;
  font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:.005em}
.pagehead h1 em{font-style:normal;color:var(--red)}
.pagehead .lede{margin-top:1.1rem}

/* Breadcrumb — mono, quiet, same register as .sec-head__index. */
.crumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:1rem}
.crumb a{color:var(--text-3);transition:color .25s var(--ease)}
.crumb a:hover{color:var(--gold-soft)}

/* Eyebrow — matches .sec-head__index, including its trailing rule, so an
   inner page reads in the same voice as a homepage section. */
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;
  align-items:center;gap:.55rem}
.eyebrow::after{content:"";width:clamp(28px,5vw,64px);height:1px;
  background:var(--gold-line);display:inline-block}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
html.jsr .eyebrow .dot{animation:pulse 2.4s infinite}

/* ---------- long-form copy ---------- */
.prose{max-width:64ch}
.prose h2{font-family:var(--hero);font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.3rem);margin:2.4rem 0 .8rem}
.prose h2 em{font-style:normal;color:var(--red)}
.prose p{color:var(--text-2);margin-top:.95rem;line-height:1.75}

/* ---------- layout helpers ---------- */
.section--alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2rem}

/* ---------- service blocks (services.html + services/*.html) ---------- */
.svcblock{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2.4rem,4.5vw,3.8rem);border-bottom:1px solid var(--line)}
.svcblock:nth-child(even) .svcblock__media{order:2}
.svcblock h3{font-family:var(--hero);font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.3rem)}
.svcblock h3 em{font-style:normal;color:var(--red)}
.svcblock p{color:var(--text-2);margin-top:.9rem;line-height:1.7}
.svcblock .btn{margin-top:1.4rem}
.svcblock__media{position:relative;overflow:hidden;border:1px solid var(--line-2);
  aspect-ratio:4/3;clip-path:var(--chamfer)}
.svcblock__media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.03)}

@media (max-width:860px){
  .svcblock,.grid2{grid-template-columns:1fr}
  .svcblock:nth-child(even) .svcblock__media{order:0}
  .cardgrid{grid-template-columns:1fr}
}

/* ---------- contact page ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3rem);align-items:start}
.cinfo{display:grid;gap:1.2rem;align-content:start}

/* ---------- generic card (about, services) ----------
   Chamfered instead of rounded — that is the whole visual difference between
   the two systems, and the reason these pages read as a different website. */
.card{background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);clip-path:var(--chamfer);padding:1.6rem;
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--gold-line)}
.card h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:1.2rem;color:var(--cream);margin-bottom:.5rem}
.card p{color:var(--text-2);font-size:.94rem;line-height:1.7}

/* ---------- "Cowboys Cares" tiles (about) ----------
   v7.5: scoped with :not(.section) — this class name collides with the
   HOMEPAGE section <section class="section cares">, and this grid rule was
   silently shredding that section's layout (the cert chips stretched into
   giant empty boxes). about.html's tiles div is a bare .cares, so it keeps
   matching; the homepage section no longer does. */
.cares:not(.section){display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.care{padding:1.3rem;background:var(--bg-2)}
.care b{display:block;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;color:var(--gold-soft);margin-bottom:.35rem}
.care span{font-size:.9rem;color:var(--text-2);line-height:1.65}

/* ---------- financing partner chips ---------- */
.partners{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.partners span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-soft);border:1px solid var(--gold-line);
  padding:.4rem .8rem}

/* ---------- service-block plate (ported from rich.css v5.4) ---------- */
.svcblock__media--plate{aspect-ratio:16/9;background:#f6f2e8;border-color:var(--gold-line)}
.svcblock__media--plate img{object-fit:contain;filter:none}

@media (max-width:860px){ .contact{grid-template-columns:1fr} }

/* ==========================================================================
   v5.7 · SECTION 01 ON MOBILE — the cards go ABOVE the house
   --------------------------------------------------------------------------
   Michael, 2026-07-28: "on mobile we need all the selectable portions for the
   house to be above the house or you select then it shows the house after
   thats the only way it will look right on mobile."

   He is describing a real dead end. Measured on an iPhone 12: the house sat at
   y=2339 and was 352px tall, then the eight cards ran from y=2691 for another
   1087px. So a visitor scrolled past the house, tapped a card a thousand
   pixels further down, and the thing that answers them was completely
   off-screen above. The whole point of v5.0 — that the house responds to the
   card you pick — was invisible on a phone.

   Cards first, house second. The house is the ANSWER, so it belongs after the
   question, and cwj/house.js scrolls it into view on tap so the reaction is
   never missed. Desktop is untouched: side-by-side, both visible at once.
   ========================================================================== */
@media (max-width:960px){
  .diag__grid{order:1}
  .house{order:2;margin-inline:auto}
}


/* ==========================================================================
   v5.8 TOUCH TARGETS — the last controls measuring under 44px on a phone
   --------------------------------------------------------------------------
   Measured 2026-07-28 on iPhone 12 / iPhone SE / Pixel 7 / iPad gen 7.
   Gated on (pointer:coarse), NOT on a width — a 10-inch tablet is wider than
   any phone breakpoint and is still held at arm's length. That was the bug in
   the first pass of v5.1; see the changelog entry.

   Only min-height is set. No font-size, no padding-inline, no colour — so
   desktop density and every existing layout are untouched.
   ========================================================================== */
@media (pointer:coarse){
  /* 21px — the phone number on the Contact page. The single most important
     tap target on the site was the smallest. */
  .cinfo__row a[href^="tel"],
  .cinfo__row a[href^="sms"],
  .cinfo__row a[href^="mailto"]{min-height:44px;display:inline-flex;align-items:center}

  /* 11px — "Home" in the breadcrumb, on every inner page. */
  .crumb a{min-height:44px;display:inline-flex;align-items:center}

  /* 40px — the header logo, the universal "take me home" control. */
  .brand{min-height:44px;display:inline-flex;align-items:center}

  /* 18px / 40px — "See what's included" and the phone line on club.html. */
  .signin__alt a{min-height:44px;display:inline-flex;align-items:center}

  /* 14px — Privacy Policy and friends in the footer's bottom bar. */
  .footer__bottom a{min-height:44px;display:inline-flex;align-items:center}
}



/* ==========================================================================
   v5.9 RATING SUMMARY — reviews.html
   --------------------------------------------------------------------------
   The only genuinely new component the page conversions needed. Everything
   else on reviews / service-areas / community / careers / refer / videos /
   hvac-systems / indoor-air-quality / ductwork / privacy reuses classes that
   already existed here: .pagehead .sec-head .cardgrid .card .revgrid .revq
   .areacol .range__cols .faq .final .prose.

   The distribution bars are decorative — the percentages are also printed as
   text beside each bar, and the container carries role="img" with the whole
   breakdown in its aria-label, so a screen reader gets the numbers without
   having to interpret five nested spans.
   ========================================================================== */
.rsum{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3.5rem);
  align-items:center;border:1px solid var(--gold-line);
  background:linear-gradient(168deg,var(--surface-2),var(--bg-2));
  clip-path:var(--chamfer);padding:clamp(1.5rem,3.5vw,2.4rem)}

.rsum__score{text-align:center;padding-right:clamp(1rem,3vw,2.4rem);
  border-right:1px solid var(--line);min-width:9.5rem}
.rsum__score b{display:block;font-family:var(--hero);font-weight:800;line-height:.9;
  font-size:clamp(3.2rem,8vw,4.6rem);color:var(--cream)}
.rsum__stars{color:var(--gold);letter-spacing:4px;font-size:1rem;margin-top:.5rem}
.rsum__score span{display:block;margin-top:.6rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

.rsum__bars{display:grid;gap:.55rem;min-width:0}
.rbar{display:grid;grid-template-columns:2.2rem 1fr 2.6rem;gap:.7rem;align-items:center}
.rbar__k{font-family:var(--mono);font-size:.7rem;color:var(--text-3);letter-spacing:.06em}
.rbar__t{height:6px;background:var(--line);position:relative;overflow:hidden}
.rbar__t i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--gold),var(--gold-soft))}
.rbar__v{font-family:var(--mono);font-size:.7rem;color:var(--text-2);text-align:right}

/* The score block sits above the bars on a phone: at 390px a 9.5rem column
   plus five bars leaves the bars about 90px wide, which reads as noise. */
@media (max-width:620px){
  .rsum{grid-template-columns:1fr;gap:1.4rem}
  .rsum__score{border-right:0;border-bottom:1px solid var(--line);
    padding:0 0 1.2rem;min-width:0}
}


/* v5.9b · .cardgrid is 3-up, which is correct for 3 and 6 items. Four items in
   it leave two empty cells that still draw the grid's border — visibly a hole,
   the same defect .mcard had in v4.2. Four items belong in a 2x2. */
.cardgrid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.cardgrid--2{grid-template-columns:1fr}}


/* ==========================================================================
   v6.1 · MOBILE UI PASS
   --------------------------------------------------------------------------
   Measured on iPhone 12 before writing any of this.
   ========================================================================== */

/* 1 · THE TOP BAR WAS SHOWING A THIRD PHONE NUMBER AND HIDING THE PROOF.
   Above the fold on a phone the number appeared three times — util bar,
   header button, sticky bottom bar — while .util__badges (SA Picks winner,
   BBB A+, 4.7 stars from 4,122 reviews) was display:none.

   Now: the badge shows and the util phone does not. Calling is still one tap
   from the sticky bar that is pinned to the bottom of every page. Trading a
   duplicate CTA for the strongest trust signal the company has. */
@media (max-width:719px){
  .util__phone{display:none}
  .util__badges{display:flex;justify-content:center;width:100%;gap:.9rem;
    font-size:.62rem;letter-spacing:.08em}
  .util__in{justify-content:center;padding:.42rem 0}
  /* below 420px only the rating survives — two badges wrap to a second row
     and 20px of extra chrome is not worth it */
  .util__badges span:nth-child(1),
  .util__badges span:nth-child(2){display:none}
}
@media (min-width:420px) and (max-width:719px){
  .util__badges span:nth-child(1){display:inline}
}

/* 2 · THE HEADER CALL BUTTON, on a phone, sat between the logo and the burger
   at 157px wide — the heaviest thing in the bar, and the same number as the
   sticky bar directly below the fold. Removing it gives the logo and the
   burger room to breathe. Tablets (810px) keep it. */
@media (max-width:719px){
  .hdr__in .btn--ghost{display:none}
  .hdr__in{gap:.9rem}
  .brand img{height:38px}
}

/* 3 · VERTICAL RHYTHM. 64px top and bottom meant 128px of empty ground
   between every section on a 390px-wide screen — the page read as sparse
   rather than considered, and pushed real content below three thumb-swipes.
   ~48px still separates the sections clearly. */
@media (max-width:719px){
  .section{padding-block:clamp(2.6rem,7vw,3.4rem)}
  .pagehead__in{padding-bottom:clamp(1.4rem,5vw,2rem)}
  .sec-head{margin-bottom:.4rem}
}


/* v6.1b · two more measured on the phone -------------------------------- */

/* 4 · The page head opened with ~45px of nothing above the breadcrumb, then
   the section below it opened with another 42px. On a phone that is most of a
   thumb-swipe of empty ground before any content. */
@media (max-width:719px){
  .pagehead__in{padding-top:clamp(1.6rem,5vw,2.4rem)}
}

/* 5 · .cinfo rows were label-over-value with only a 1.2rem gap between them —
   five stacked pairs with nothing separating one from the next, which read as
   loose text rather than a contact card. A hairline and a little breathing
   room turns it into a list you can scan. */
.cinfo{gap:0}                       /* the hairline separates them now, not a gap */
.cinfo__row{padding-block:.85rem;border-bottom:1px solid var(--line)}
.cinfo__row:first-child{padding-top:0}
.cinfo__row:last-child{border-bottom:0;padding-bottom:0}
.cinfo__row b{margin-bottom:.3rem}


/* v6.1c · TYPE FLOOR ON THE HOMEPAGE, touch devices only ------------------
   Fourteen labels and captions on index.html measured 8.0-9.3px on a phone.
   They read on a 27" monitor and they do not in a hand. Floor is 9.6px.

   Scoped to exact classes rather than a blanket rule, and gated on
   (pointer:coarse) not a width — a tablet is wider than any phone breakpoint
   and still held at arm's length.

   DELIBERATELY EXCLUDED: .house__lbl. It is SVG <text>, and the diagram is
   drawn at 1.2x scale, so getComputedStyle reports 9.0px user units while the
   label renders at ~10.8px on screen. Raising it would make it too big and
   push it out of the viewBox. Measured, not assumed. */
@media (pointer:coarse){
  .ts__set em,
  .ts__tile,
  .ts__rows li em,
  .ts__b span em,
  .tstat__cap,
  .cardsec__fine,
  .tip__src,
  .tips__fine,
  .ledger__h em,
  .console__bar em,
  .console__lbl,
  .mike__id em,
  .cardsec__tiers li em,
  .crewcard figcaption span,
  figcaption span{font-size:.6rem}
}


/* v6.1d · THE DISPATCH PILL ON A PHONE ------------------------------------
   It is position:fixed and floats above the sticky call bar. On a 1440px
   desktop it sits in the right margin. On a 390px phone the text column IS
   the full width, so it always lands on top of words — and at
   background:rgba(19,12,8,.92) the sentence underneath showed through it,
   which reads as a rendering fault rather than a floating control.

   Not hidden: the live dispatch panel is a real feature. Made to look
   deliberate instead — fully opaque, and the second line dropped so it takes
   ~140px instead of 179px of a 390px screen. */
@media (max-width:719px){
  .dispatch__pill{background:#130c08;padding:.55rem .8rem;gap:.6rem}
  .dispatch__pilltxt em{display:none}
  .dispatch__pilltxt b{font-size:.62rem;letter-spacing:.14em}
}


/* ==========================================================================
   v6.3 · THE BOTTOM INTERFACE, REBUILT FOR PHONES
   --------------------------------------------------------------------------
   Two fixed things were competing for the bottom of a 390px screen: the
   .mobar (Call / Book) pinned at bottom:0, and .dispatch floating above it at
   bottom:73.6px, right:12px — permanently sitting on top of a sentence.
   v6.1 made the pill opaque so it stopped looking like a fault, but it still
   covered words.

   Now they are one object. .dispatch becomes a full-width status strip flush
   on top of the bar, so the bottom of the screen reads as a single control
   surface and nothing overlaps body copy at all.

   Done entirely in CSS — the markup and showroom.js bindings are untouched,
   so the pill still opens the same dispatch panel.
   ========================================================================== */
@media (max-width:719px){
  /* 4.34rem = 69.4px, the bar's measured height on iPhone SE / 12 / 13 Pro Max
     (8.8px padding x2 + 51px button + 1px border). Guessing 4.6rem left a
     visible 4.2px seam of page content between the strip and the bar.
     The extra -2px biases the strip DOWN so any rounding error overlaps the
     bar's own background instead of opening a gap; .mobar gains 2px of
     padding-top to absorb it. */
  :root{--mobar-h:4.34rem}

  .dispatch{
    left:0;right:0;
    bottom:calc(var(--mobar-h) - 2px + env(safe-area-inset-bottom, 0px));
    z-index:39;
  }
  .dispatch__pill{
    width:100%;
    justify-content:center;
    clip-path:none;                    /* the chamfer reads as a mistake full-bleed */
    border-left:0;border-right:0;border-bottom:0;
    border-top:1px solid var(--gold-line);
    background:#130c08;
    padding:.5rem .9rem;
    gap:.55rem;
  }
  .dispatch__pilltxt{flex-direction:row;align-items:center;gap:.5rem}
  .dispatch__pilltxt em{display:inline;font-size:.6rem;opacity:.85}  /* .58rem measured 9.28px — under the 9.4px floor */
  .dispatch__pilltxt b{font-size:.6rem;letter-spacing:.14em}

  /* the panel opens upward from the strip, full width, not off the corner */
  .dispatch__panel{position:fixed;left:.6rem;right:.6rem;width:auto;
    bottom:calc(var(--mobar-h) + 2.9rem + env(safe-area-inset-bottom, 0px));
    max-height:60vh;overflow-y:auto}

  /* the bar itself: a third action. Text is a real lane for an HVAC customer
     who does not want to talk, and the number already exists. */
  .mobar{grid-template-columns:1fr 1fr 1fr;gap:.4rem;padding:.55rem .6rem;
    padding-top:calc(.55rem + 2px);
    padding-bottom:max(.55rem,env(safe-area-inset-bottom));
    /* matched to the strip above it. At rgba(13,8,5,.94) the blueprint behind
       the page showed through the buttons while the strip sat opaque — two
       different tones stacked, which read as unfinished. One surface now. */
    background:#130c08;border-top-color:var(--gold-line)}
  .mobar .btn{min-height:44px;font-size:.82rem;letter-spacing:.06em;padding-inline:.4rem}
}
@media (max-width:359px){
  .mobar{grid-template-columns:1fr 1fr}       /* 320px: Text folds away, Call+Book stay */
  .mobar .btn--text{display:none}
  .dispatch__pilltxt em{display:none}
}


/* ==========================================================================
   v6.4 · HOMEPAGE WEIGHT ON PHONES
   --------------------------------------------------------------------------
   index.html measures 28,467px on an iPhone 12 — 43 screens. Section 02
   (The Lineup) is 3,525px of that: four blocks of a 227px image plate, a
   185px paragraph, a 173px bullet list and a button.

   The bullet list under each block repeats what is on the page that same
   block's button links to. On a phone it is 692px of duplicated copy between
   the visitor and the next section, so it goes — the button stays, and the
   detail is one tap away rather than one long scroll away.

   The paragraph is clamped to four lines rather than cut: enough to know
   whether this is your problem, and the button is the affordance for the
   rest. Nothing is removed from the page source, from desktop, or from a
   tablet — this is a phone-width presentation change only.
   ========================================================================== */
@media (max-width:719px){
  .svc__body p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
    overflow:hidden;
  }
  .svc__body .svclist{display:none}
  .svc__body .btn{margin-top:.9rem}
}


/* ==========================================================================
   v6.5 · THE HIRING FORM COMES OFF THE PHONE HOMEPAGE
   --------------------------------------------------------------------------
   Section 09 measured 2,654px on an iPhone 12, and the crew photos were only
   1,214px of it. The rest was .jobs — a six-field job application form, 976px,
   sitting in the middle of the homepage between a customer and the reviews.

   A homeowner whose AC just died is not applying for a job. careers.html
   already exists, is already linked from the footer, and carries the same
   form. On phones the block becomes a card that says we are hiring and goes
   there; on desktop and tablet the form stays exactly where it is.
   ========================================================================== */
.jobs__mini{display:none}

@media (max-width:719px){
  .crew .jobs{display:none}

  .jobs__mini{
    display:grid;gap:.3rem;
    padding:1.1rem 1.2rem;margin-top:1.4rem;
    background:linear-gradient(135deg,rgba(232,176,74,.10),rgba(226,60,44,.06));
    border:1px solid var(--gold-line);
    clip-path:var(--chamfer);
    min-height:44px;
  }
  .jobs__mini-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gold)}
  .jobs__mini-t{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
    font-size:1.15rem;color:var(--cream);line-height:1.1}
  .jobs__mini-s{font-size:.86rem;color:var(--text-2);line-height:1.45}
}


/* ==========================================================================
   v6.5 · JUMP NAV — the phone-only section index
   --------------------------------------------------------------------------
   The homepage is 40 screens on a handset. Rather than delete sections that
   work on a desktop, this makes them reachable: a sticky chip rail under the
   header so a visitor lands on Comfort Club or Contact in one tap.

   Additive — nothing is hidden to make room for it. Desktop never sees it.

   scroll-margin-top on the targets is what stops an anchor landing underneath
   the two sticky bars; without it the section heading sits behind the header
   and the visitor thinks the link is broken.
   ========================================================================== */
.jump{display:none}

@media (max-width:719px){
  .jump{
    display:flex;gap:.4rem;
    /* .hdr measures 69px on a phone. 67px tucks this 2px UNDER it (z-index 37
       vs the header's 40) so no sliver of page shows between the two bars —
       the same bias-into-the-neighbour trick used on the bottom bar. */
    position:sticky;top:67px;z-index:37;
    padding:.35rem var(--gutter);
    margin:0;
    background:rgba(13,8,5,.94);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .jump::-webkit-scrollbar{display:none}
  .jump a{
    flex:none;
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 .85rem;   /* 44px like every other control here */
    font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
    text-transform:uppercase;white-space:nowrap;
    color:var(--text-2);
    border:1px solid var(--line);
    border-radius:2px;
    background:rgba(28,17,10,.6);
  }
  .jump a:active{color:var(--gold);border-color:var(--gold-line)}

  /* clear the header (68px) + this rail (~47px) so headings are not hidden */
  /* header 69 + rail 56 = 125; 132 leaves the heading a little air */
  #diagnose,#services,#club,#offers,#tips,#contact,#thecard{scroll-margin-top:132px}
}

/* ==========================================================================
   v6.8 · POLISH PASS — measured, not guessed
   --------------------------------------------------------------------------
   Every number below came out of a headless-Chromium audit of all 27 live
   pages at 390 / 820 / 1440px. Before/after measurements are recorded inline
   so a future session can tell what was deliberate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.8.1 · COMPOUNDING PADDING ON THE SERVICE PAGES
   Measured on services/ac-repair.html at 1440:
     lede bottom              396.7
     + .pagehead__in  pb 80   476.7
     + .section       pt 120  597.7
     + .svcblock      pt 60.8 658.5   <- first image finally starts here
   That is 261.8px of nothing between the last word of the lede and the first
   pixel of content, on all six service pages. Nobody designed 261 — three
   components each added their own breathing room and they stacked.
   Collapse to one gap. New first-image top ≈ 540. Saves ~118px.
   The block still owns its rhythm when it is NOT the first thing in a
   section, so only :first-child / :first-of-type is zeroed.
   -------------------------------------------------------------------------- */
.pagehead + .section{padding-top:clamp(2.2rem,4.4vw,4rem)}
.section > .wrap > .svcblock:first-child,
.section > .wrap > .svc:first-of-type{padding-top:0}
.section > .wrap > .svcblock:last-child{padding-bottom:0}

/* --------------------------------------------------------------------------
   6.8.2 · ONE SECTION RHYTHM
   .final was the only section running clamp(5rem,10vw,8.5rem) = 136px while
   every other section runs clamp(4rem,9vw,7.5rem) = 120px. Measured 57 blocks
   at 120/120 and 21 at 136/136. Two rhythms in one page reads as drift.
   .final now runs the same 120px as every other section. One rhythm, no
   exceptions — the closing frame earns its weight from the border-top and the
   centred type, not from eight extra pixels nobody can name.
   -------------------------------------------------------------------------- */
.final{padding-block:clamp(4rem,9vw,7.5rem)}

/* --------------------------------------------------------------------------
   6.8.3 · THE LIGHT PLATES SIT *IN* THE PAGE INSTEAD OF PUNCHING THROUGH IT
   The Trane cutaway plates were flat #f6f2e8 on a #120c08 body. Flat cream on
   near black has no depth, so at a glance it reads as a hole cut in the page
   rather than an object lying on it. It was also the single brightest thing
   on the site, which pulled the eye off the headline.
   Four cues, in order of how much work each does:
     1. warm the stock down (#f6f2e8 -> #efe6d3) so it reads as blueprint
        paper, not a lightbox. ~4% luminance, invisible as a change, decisive
        as a result.
     2. a top-light gradient so the plate looks LIT rather than self-emitting.
     3. an inset warm rim + gold hairline so the edge belongs to the palette.
     4. a real cast shadow so it sits ABOVE the surface.
   No filter on the artwork itself — the technical labels must stay crisp.
   -------------------------------------------------------------------------- */
.svc__media--plate .svc__plate,
.svcblock__media--plate{
  background:#efe6d3;
  border-color:rgba(232,176,74,.42);
  box-shadow:
    inset 0 0 0 1px rgba(36,18,6,.13),
    inset 0 3px 26px rgba(36,18,6,.17),
    0 26px 54px -28px rgba(0,0,0,.98);
}
.svc__media--plate .svc__plate::after,
.svcblock__media--plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(125% 82% at 50% -10%,rgba(255,255,255,.42),transparent 55%),
    linear-gradient(180deg,transparent 46%,rgba(52,28,10,.13));
}
/* the zoom chip has to stay above the new overlay */
.svc__media--plate .cardfig__zoom,
.svcblock__media--plate .cardfig__zoom{z-index:3}

/* --------------------------------------------------------------------------
   6.8.4 · PHOTO MEDIA JOINS THE SAME FAMILY
   Photos had no shadow while plates now do, which would split the page into
   two kinds of picture. Same shadow, no inner rim (a photo has its own edge).
   -------------------------------------------------------------------------- */
.svc__media:not(.svc__media--plate),
.svcblock__media:not(.svcblock__media--plate){
  box-shadow:0 22px 48px -30px rgba(0,0,0,.95);
}

/* --------------------------------------------------------------------------
   6.8.5 · TAP TARGETS
   Measured at 390px: .tip__src rendered 209.8 x 28.0, five times on the
   homepage, and .rail__press a rendered 28 x 28. Both are real links.
   WCAG 2.5.8 wants 24 minimum and 44 is the comfortable target. Both are
   raised with min-height/min-width so nothing above them moves; the press
   badge pulls its new horizontal padding back out with a negative margin so
   the "AS SEEN ON" row keeps its original spacing.
   Verified after: .tip__src 209.8x28 -> 209.8x44 (x14), .rail__press a
   28x28 -> 44x44.
   -------------------------------------------------------------------------- */
.tip__src{display:flex;align-items:center;min-height:44px;padding-bottom:.35rem}
.rail__press a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding-block:.35rem;padding-inline:.4rem;
  margin-inline:-.4rem}

/* ==========================================================================
   v6.9 · SPECIALS COMES ONTO THE SHOWROOM SYSTEM
   --------------------------------------------------------------------------
   specials.html was the last page on rich.css and it looked like a different
   company: pill-radius buttons where the rest of the site is chamfered, 10px
   rounded cards, soft glows. Measured: 158 buttons sitewide at radius 0, and
   the 5 at 999px were all on this one page.

   Porting it needed 18 classes that exist nowhere else. They are written HERE
   in the showroom idiom rather than copied from rich.css — chamfer instead of
   border-radius, --ease on transforms, mono for instrumentation type.

   ⚠️ ONE NAME COLLISION, and it is why this was blocked since v5.6:
   `.offers` means a SECTION BACKGROUND in showroom.css and a 3-COLUMN GRID in
   rich.css. Pointing specials at showroom without renaming would have
   collapsed the offer layout. The grid is now `.offergrid` in both the markup
   and here; showroom's `.offers` section background is untouched.
   ========================================================================== */

/* ---------- the six offer cards ---------- */
.offergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:2rem}
.offer{background:linear-gradient(170deg,var(--surface-2),var(--surface));
  padding:1.6rem;cursor:pointer;position:relative;
  transition:transform .35s var(--ease),background .35s var(--ease)}
.offer::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .offer:hover{transform:translateY(-4px);background:var(--surface-2)}
  .offer:hover::after{border-color:var(--gold-line)}
  .offer:hover .offer__more{opacity:1}
}
.offer:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.offer__amt{font-family:var(--hero);font-weight:800;font-size:2.1rem;
  line-height:.95;color:var(--gold-soft);letter-spacing:-.01em}
.offer__amt.free{color:var(--rust)}
.offer h4{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.05rem;color:var(--cream);margin:.7rem 0 .45rem}
.offer p{font-size:.9rem;line-height:1.65;color:var(--text-2)}
.offer__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.1rem;
  min-height:44px;font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);opacity:.78;transition:opacity .25s var(--ease)}

/* ---------- the offer detail modal ---------- */
.omodal{position:fixed;inset:0;z-index:300;display:none;align-items:center;
  justify-content:center;padding:1.2rem}
.omodal.open{display:flex}
.omodal__back{position:absolute;inset:0;background:rgba(10,6,4,.8);
  backdrop-filter:blur(6px)}
.omodal__card{position:relative;max-width:34rem;width:100%;
  max-height:min(86vh,42rem);overflow:auto;
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--gold-line);clip-path:var(--chamfer);
  padding:clamp(1.5rem,4vw,2.2rem);box-shadow:0 40px 80px -30px rgba(0,0,0,.92);
  animation:omIn .35s var(--ease)}
@keyframes omIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.omodal__x{position:absolute;top:.6rem;right:.6rem;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:rgba(14,9,7,.65);color:var(--cream);
  font-size:1rem;cursor:pointer;clip-path:var(--chamfer);
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.omodal__x:hover{border-color:var(--gold);color:var(--gold-soft)}
.omodal__amt{font-family:var(--hero);font-weight:800;font-size:2.6rem;
  line-height:.95;color:var(--gold-soft)}
.omodal__amt.free{color:var(--rust)}
.omodal h5{font-family:var(--display);font-weight:600;text-transform:uppercase;
  letter-spacing:.02em;font-size:1.25rem;color:var(--cream);margin:.55rem 0 .85rem}
.omodal p{color:var(--text-2);font-size:.95rem;line-height:1.7}
.omodal .svclist{margin-top:1rem}
.omodal__fine{margin-top:1.2rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;line-height:1.6;color:var(--text-3)}
.omodal__cta{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}

/* ---------- the Comfort Club plan band ---------- */
.plan{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,4vw,3rem);
  align-items:center;
  background:linear-gradient(135deg,rgba(139,21,16,.28),var(--surface));
  border:1px solid var(--gold-line);clip-path:var(--chamfer);
  padding:clamp(1.8rem,4vw,3rem);margin-top:2rem}
.plan__price{font-family:var(--hero);font-weight:800;
  font-size:clamp(3rem,7vw,4.5rem);color:var(--cream);line-height:.92}
.plan__price sup{font-size:1.3rem;color:var(--gold);vertical-align:super}
.plan__per{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);margin-top:.45rem}
.plan__list{columns:2;column-gap:1.6rem;list-style:none;padding:0;margin:1rem 0 0}
.plan__list li{break-inside:avoid;position:relative;padding-left:1.5rem;
  margin-bottom:.55rem;color:var(--text-2);font-size:.9rem}
.plan__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:.7rem;height:1px;background:var(--gold)}

/* ---------- financing band ---------- */
.fin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3rem);
  align-items:center}
.fin__points{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.65rem}
.fin__points li{position:relative;padding-left:1.6rem;color:var(--text-2)}
.fin__points li::before{content:"";position:absolute;left:0;top:.62em;
  width:.9rem;height:1px;background:var(--rust)}
.finewarn{margin-top:1.4rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;line-height:1.7;color:var(--text-3)}

@media (max-width:900px){
  .offergrid{grid-template-columns:1fr}
  .plan,.fin{grid-template-columns:1fr}
  .plan__list{columns:1}
}
@media (max-width:1100px) and (min-width:901px){
  .offergrid{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   v7.0 · INNER-ALIVE LAYER · 2026-07-31
   Additive styles for the inner-page motion pass (cwj/inner.js?v=7.0).
   Nothing above this line was modified. The homepage does not load inner.js,
   so classes here are inert on index.html unless it opts in.
   ========================================================================== */

/* --- pagehead airflow canvas (injected by inner.js) --------------------- */
.ph-air{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8}

/* --- pagehead figure slot: fills the dead right column ------------------ */
/* Markup: <div class="pagehead__in pagehead__in--fig"> <div>…text…</div>
           <figure class="ph-fig">…plate/svg/stat…</figure> </div>         */
.pagehead__in--fig{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.ph-fig{margin:0;position:relative}
.ph-fig img{display:block;width:100%;height:auto;border:1px solid var(--line-2);
  background:var(--surface);clip-path:var(--chamfer)}
.ph-fig figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin-top:.6rem;display:flex;gap:.6rem;align-items:center}
.ph-fig figcaption::before{content:"";width:1.4rem;height:1px;background:var(--rust);flex:none}
@media (max-width:900px){
  .pagehead__in--fig{grid-template-columns:1fr}
  .ph-fig{max-width:30rem}
}

/* --- stat strip: mono instrument numbers under a pagehead lede ---------- */
.ph-stats{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);
  margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:1.2rem;border-top:1px solid var(--line)}
.ph-stat b{display:block;font-family:var(--hero);font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.ph-stat b em{font-style:normal;color:var(--gold)}
.ph-stat span{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}

/* --- animated fill bars (reviews etc.) ---------------------------------- */
/* Markup: <i class="fillbar" data-fill style="--w:82%"><b></b></i>        */
.fillbar{display:block;height:6px;background:var(--line);overflow:hidden;position:relative}
.fillbar b{position:absolute;inset:0;width:var(--w,0%);transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  transition:transform 1.1s var(--ease)}
.fillbar.is-filled b{transform:scaleX(1)}
/* reviews.html rating rows opt in WITHOUT changing their markup shape:
   data-fill goes on the existing .rbar__t track; the inline width stays. */
.rbar__t[data-fill] i{transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease)}
.rbar__t[data-fill].is-filled i{transform:scaleX(1)}
.rbar:nth-child(2) .rbar__t[data-fill] i{transition-delay:.08s}
.rbar:nth-child(3) .rbar__t[data-fill] i{transition-delay:.16s}
.rbar:nth-child(4) .rbar__t[data-fill] i{transition-delay:.24s}
.rbar:nth-child(5) .rbar__t[data-fill] i{transition-delay:.32s}

/* --- blueprint line-draw: [data-bpdraw] svg strokes draw on entry ------- */
[data-bpdraw] .bp-line{stroke-dasharray:var(--dash,600);stroke-dashoffset:var(--dash,600);
  transition:stroke-dashoffset 1.4s var(--ease)}
[data-bpdraw].is-drawn .bp-line{stroke-dashoffset:0}

/* --- magnetic CTAs: compose with the existing hover lift / active press - */
@media (hover:hover) and (pointer:fine){
  .btn--mag{transform:translate(var(--mx,0px),var(--my,0px))}
  .btn--mag.btn--gold:hover,.btn--mag.btn--red:hover{
    transform:translate(var(--mx,0px),calc(var(--my,0px) - 2px))}
  .btn--mag:active{transform:translate(var(--mx,0px),calc(var(--my,0px) + 1px)) scale(.985)}
}

/* --- card life: gold seam sweeps across the top on hover ---------------- */
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:translateX(-100%);transition:transform .7s var(--ease)}
.card:hover::before{transform:translateX(100%)}

/* --- pagehead parallax targets: promote to their own layer -------------- */
.pagehead h1,.pagehead .lede{will-change:transform}

/* ==========================================================================
   v7.2 · LIVE WEATHER (homepage) — populated by cwj/weather.js; without it
   none of these elements exist, so this block is inert everywhere else.
   ========================================================================== */
.inst-temp .wx-live{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-left:.55rem;vertical-align:2px}
html.jsr .inst-temp .wx-live{animation:pulse 2.6s infinite}
.final__wx{display:inline-flex;align-items:center;gap:.6rem;margin:1.6rem 0 0;padding:.6rem 1.15rem;background:var(--surface);border:1px solid var(--gold-line);clip-path:var(--chamfer);font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.final__wx i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(226,60,44,.18);flex:none}
html.jsr .final__wx i{animation:pulse 2.6s infinite}

/* ==========================================================================
   v7.3 · HOMEPAGE-DEEP — command rail, dispatch ticker, ghost numerals,
   plate tilt. Rail + ghosts are injected by cwj/deep.js (homepage only);
   the ticker is static HTML on index. Inert everywhere else.
   ========================================================================== */
/* command scroll rail */
.crail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:.5rem;padding-left:10px;font-family:var(--mono);transition:opacity .45s var(--ease)}
.crail--dim{opacity:0;pointer-events:none}
.crail__track{position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line-2)}
.crail__fill{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);transform:scaleY(0);transform-origin:top;display:block}
.crail__n{font-size:.6rem;letter-spacing:.08em;color:var(--text-3);text-decoration:none;line-height:1;padding:.15rem .2rem;position:relative;transition:color .25s var(--ease)}
.crail__n:hover{color:var(--cream)}
.crail__n.is-cur{color:var(--gold)}
.crail__n.is-cur::before{content:"";position:absolute;left:-11px;top:50%;width:3px;height:3px;background:var(--gold);transform:translateY(-50%)}
.crail__n::after{content:attr(data-tip);position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(5px);font-size:.58rem;letter-spacing:.18em;color:var(--text-2);background:var(--surface);border:1px solid var(--line);padding:.3rem .6rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.crail__n:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:1099px){.crail{display:none}}
/* dispatch ticker */
.dticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);padding:.6rem 0}
.dticker__in{display:inline-flex;white-space:nowrap;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--text-3);will-change:transform;animation:dtick 60s linear infinite}
.dticker__in>*{margin-right:2.4rem;flex:none}
.dticker__in i{color:var(--gold);font-style:normal}
@keyframes dtick{to{transform:translateX(-50%)}}
/* ghost numerals */
.sec-head{position:relative}
.sec-head .sec-head__index,.sec-head .h2,.sec-head .lede{position:relative;z-index:1}
.sec-ghost{position:absolute;right:-.04em;top:-.38em;z-index:0;font-family:var(--hero);font-weight:800;font-size:clamp(6rem,13vw,10.5rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,234,214,.075);pointer-events:none;user-select:none}
@media(max-width:760px){.sec-ghost{font-size:5rem;-webkit-text-stroke-color:rgba(244,234,214,.055)}}
/* plate tilt */
.svc__media--plate .svc__plate{transition:transform .3s var(--ease);transform-style:preserve-3d}