/* HVAC Dock site layer. Loaded on every front-end page by the hvacdock-signup plugin.
   Divi modules carry the layout and colors; this file adds what Divi's settings cannot:
   variable font axes, the thermal signature, motion, and the live demos. */

:root {
  --hd-night: #0b2540; --hd-night2: #102f4f; --hd-blue: #1d6fb5; --hd-cool: #38bdf8; --hd-heat: #f0722a; --hd-heat-dark: #c9571f;
  --hd-ink: #15202b; --hd-ink2: #4b5866; --hd-ink3: #7b8794; --hd-cloud: #f4f7f9; --hd-line: #d3dbe3; --hd-green: #2f8a4a;
  --hd-thermal: linear-gradient(90deg, var(--hd-cool), var(--hd-blue) 45%, var(--hd-heat));
}

/* ---------- variable type. Archivo carries a width axis (62 to 125) and a weight axis (100 to 900). */
.hd-display h1, .hd-display h2, .hd-display h3, .hd-display h4,
h1.hd-display, h2.hd-display, h3.hd-display { font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: -.02em; line-height: 1.02 !important; }
.hd-label, .hd-label p { font-variation-settings: "wdth" 75, "wght" 600 !important; letter-spacing: .12em !important; text-transform: uppercase; }
.hd-label p { display: flex; align-items: center; gap: 12px; margin: 0; }
.hd-label p::before { content: ""; width: 36px; height: 3px; background: var(--hd-thermal); border-radius: 2px; flex: none; }
.hd-label.hd-center p { justify-content: center; }
.hd-narrow, .hd-narrow * { font-variation-settings: "wdth" 78, "wght" 600 !important; }

/* hero headline: loads condensed and light, settles wide and heavy */
.hd-hero-h1 h1 .hd-var { display: inline-block; font-variation-settings: "wdth" 62, "wght" 300; animation: hd-flex 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.hd-hero-h1 h1 .hd-var:nth-of-type(2) { animation-delay: .35s; }
.hd-hot { color: var(--hd-heat); font-style: italic; font-variation-settings: "wdth" 125, "wght" 900; }
.hd-hot-dark { color: var(--hd-heat-dark); font-style: italic; font-variation-settings: "wdth" 118, "wght" 900; }
@keyframes hd-flex { to { font-variation-settings: "wdth" 100, "wght" 800; } }

/* section headings widen as they scroll into view (site.js adds .hd-in) */
.hd-reveal h2 { font-variation-settings: "wdth" 88, "wght" 700; transition: font-variation-settings .9s cubic-bezier(.2,.8,.2,1); }
.hd-reveal.hd-in h2 { font-variation-settings: "wdth" 100, "wght" 800; }

/* big numerals (Number Counter and Text) */
.hd-numeral .percent, .hd-numeral .percent-value, .hd-numeral h2, .hd-numeral .et_pb_module_header { font-variation-settings: "wdth" 70, "wght" 900; transition: font-variation-settings .6s, color .3s; }
.hd-numeral:hover .percent, .hd-numeral:hover .percent-value { font-variation-settings: "wdth" 110, "wght" 900; color: var(--hd-blue) !important; }
.hd-big, .hd-big * { font-variation-settings: "wdth" 110, "wght" 900 !important; letter-spacing: -.04em !important; line-height: .9 !important; }
.hd-big span { font-size: .28em; font-variation-settings: "wdth" 80, "wght" 500 !important; color: rgba(255,255,255,.55); letter-spacing: 0 !important; margin-left: 8px; }
.hd-key, .hd-key * { font-variation-settings: "wdth" 72, "wght" 800 !important; line-height: 1 !important; }

/* toggles and accordion titles swell on hover */
.hd-toggles .et_pb_toggle_title { transition: font-variation-settings .3s; font-variation-settings: "wdth" 95, "wght" 700; }
.hd-toggles .et_pb_toggle:hover .et_pb_toggle_title { font-variation-settings: "wdth" 108, "wght" 800; }

/* ---------- thermal signature */
.hd-thermal-top { position: relative; }
.hd-thermal-top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hd-thermal); z-index: 2; }
.hd-grid { background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important; background-size: 48px 48px !important; }
.hd-glow { position: relative; overflow: hidden; }
.hd-glow::after { content: ""; position: absolute; left: -20%; bottom: -40%; width: 70%; height: 90%; background: radial-gradient(ellipse, rgba(56,189,248,.16), transparent 60%); pointer-events: none; }

/* buttons lift */
.hd-btn .et_pb_button, .et_pb_button.hd-btn { transition: transform .15s, box-shadow .15s !important; }
.hd-btn .et_pb_button:hover, .et_pb_button.hd-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,111,181,.3); }
.hd-btn-heat .et_pb_button:hover, .et_pb_button.hd-btn-heat:hover { box-shadow: 0 10px 24px rgba(240,114,42,.35); }

/* menu underline runs in from the left */
.hd-menu .et-menu li a { position: relative; }
.hd-menu .et-menu li a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--hd-thermal); transition: right .25s; }
.hd-menu .et-menu li a:hover::after, .hd-menu .et-menu li.current-menu-item a::after { right: 0; }

/* marquee: a Text module with spans, class hd-marquee */
.hd-marquee { overflow: hidden; }
.hd-marquee p { display: flex; gap: 48px; white-space: nowrap; width: max-content; margin: 0; animation: hd-scroll 40s linear infinite; }
.hd-marquee span::before { content: "\2022"; color: var(--hd-heat); margin-right: 48px; }
@keyframes hd-scroll { to { transform: translateX(-50%); } }

/* bento cards: a Divi column with this class becomes a card; site.js does nothing here, all CSS */
.hd-card { background: #fff; border: 1px solid var(--hd-line); border-radius: 16px; padding: 28px !important; display: flex; flex-direction: column; gap: 10px; }
.hd-card.hd-card-dark { background: var(--hd-night); border-color: var(--hd-night); }
.hd-card.hd-card-cloud { background: var(--hd-cloud); }
.hd-card .et_pb_module:last-child { margin-bottom: 0 !important; }
.hd-card h3 { margin-top: auto; }

/* ---------- live dispatch panel [hvacdock_live_panel] */
.hd-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 14px 14px 0 0; padding: 18px; backdrop-filter: blur(6px); font-size: 13px; color: #fff; box-shadow: 0 -30px 80px rgba(56,189,248,.08); font-family: "IBM Plex Sans", sans-serif; }
.hd-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hd-panel__head b { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 90, "wght" 700; font-size: 15px; }
.hd-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--hd-cool); }
.hd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--hd-cool); animation: hd-pulse 1.8s infinite; }
@keyframes hd-pulse { 0% { box-shadow: 0 0 0 0 rgba(56,189,248,.6); } 70% { box-shadow: 0 0 0 8px rgba(56,189,248,0); } 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); } }
.hd-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.hd-gauge { background: rgba(11,37,64,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px; }
.hd-gauge small { display: block; color: rgba(255,255,255,.5); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.hd-gauge b { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 80, "wght" 800; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-gauge b span { font-size: 13px; color: var(--hd-cool); font-variation-settings: "wdth" 90, "wght" 500; margin-left: 4px; }
.hd-feed { display: flex; flex-direction: column; gap: 6px; }
.hd-feed > div { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.hd-feed .t { color: rgba(255,255,255,.55); font-family: "IBM Plex Mono", monospace; }
.hd-st { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.hd-st.ok { background: rgba(47,138,74,.25); color: #7ee0a0; } .hd-st.go { background: rgba(56,189,248,.18); color: var(--hd-cool); } .hd-st.hot { background: rgba(240,114,42,.2); color: #ffb38a; }
.hd-feed > div.hd-new { animation: hd-slidein .5s ease-out; }
@keyframes hd-slidein { from { transform: translateY(-6px); opacity: .2; } }

/* ---------- micro demos [hvacdock_demo type="..."] */
.hd-demo { border: 1px solid var(--hd-line); border-radius: 10px; background: #fff; font-size: 12px; overflow: hidden; color: var(--hd-ink); font-family: "IBM Plex Sans", sans-serif; line-height: 1.4; margin-bottom: 14px; }
.hd-card-dark .hd-demo { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
.hd-demo-schedule { font-size: 11px; }
.hd-demo-schedule .r { display: grid; grid-template-columns: 44px repeat(3, 1fr); border-bottom: 1px solid rgba(255,255,255,.08); }
.hd-demo-schedule .r div { padding: 6px; border-right: 1px solid rgba(255,255,255,.06); color: rgba(255,255,255,.5); }
.hd-demo-schedule .r.h div { color: #fff; font-weight: 600; background: rgba(255,255,255,.04); }
.hd-job { display: block; border-radius: 4px; padding: 3px 6px; color: #fff; font-weight: 600; font-size: 10px; }
.hd-job.move { animation: hd-move 4s ease-in-out infinite; }
@keyframes hd-move { 0%, 35% { transform: translateY(0); } 50%, 85% { transform: translateY(29px); } 100% { transform: translateY(0); } }
.hd-gbb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.hd-gbb div { border: 1px solid var(--hd-line); border-radius: 8px; padding: 10px; text-align: center; }
.hd-gbb div.on { border-color: var(--hd-blue); background: #e3eef8; box-shadow: inset 0 0 0 1px var(--hd-blue); }
.hd-gbb b { display: block; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 85, "wght" 800; font-size: 20px; }
.hd-gbb small { color: var(--hd-ink3); }
.hd-sign { padding: 0 12px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--hd-ink3); }
.hd-sign svg { width: 90px; height: 28px; flex: none; }
.hd-sign path { stroke: var(--hd-ink); stroke-width: 1.6; fill: none; stroke-dasharray: 220; stroke-dashoffset: 220; animation: hd-draw 2.4s ease-out 1s forwards; }
@keyframes hd-draw { to { stroke-dashoffset: 0; } }
.hd-sms { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hd-sms div { max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--hd-cloud); }
.hd-sms div.me { align-self: flex-end; background: var(--hd-blue); color: #fff; border-bottom-right-radius: 4px; }
.hd-sms div.them { border-bottom-left-radius: 4px; }
.hd-sms .typing i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--hd-ink3); margin-right: 3px; animation: hd-blink 1.2s infinite; }
.hd-sms .typing i:nth-child(2) { animation-delay: .2s; } .hd-sms .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hd-blink { 50% { opacity: .2; } }
.hd-equip { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.hd-equip small { color: var(--hd-ink3); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; display: block; }
.hd-equip b { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 12px; }
.hd-rating { display: flex; gap: 3px; margin-top: 4px; } .hd-rating i { width: 14px; height: 6px; border-radius: 2px; background: var(--hd-line); } .hd-rating i.on { background: var(--hd-green); } .hd-rating i.warn { background: var(--hd-heat); }
.hd-pay { padding: 12px; }
.hd-pay small { color: var(--hd-ink3); text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.hd-pay .amt { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 80, "wght" 800; font-size: 28px; }
.hd-pay .amt span { font-size: 13px; color: var(--hd-green); }
.hd-barfill { height: 8px; background: var(--hd-cloud); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.hd-barfill i { display: block; height: 100%; width: 0; background: var(--hd-thermal); animation: hd-fill 1.6s ease-out .4s forwards; }
@keyframes hd-fill { to { width: 68%; } }
.hd-plan { padding: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hd-plan b { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 85, "wght" 800; font-size: 18px; display: block; }
.hd-plan .sub { color: var(--hd-ink3); }
.hd-plan .hd-st.ok { background: #e4f2e8; color: var(--hd-green); padding: 4px 10px; }

/* ---------- dark calculator [hvacdock_calculator] */
.hd-calc { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 28px; color: #fff; font-family: "IBM Plex Sans", sans-serif; }
.hd-calc h3 { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 96, "wght" 700; color: #fff; font-size: 22px; margin: 0 0 6px; padding: 0; }
.hd-calc p { color: rgba(255,255,255,.65); font-size: 15px; margin: 0; padding: 0; }
.hd-calc__out { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 8px; gap: 12px; }
.hd-calc__n { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 80, "wght" 800; font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.hd-calc__n small, .hd-calc__tot small { font-size: 14px; color: rgba(255,255,255,.55); font-variation-settings: "wdth" 90, "wght" 500; }
.hd-calc__tot { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100, "wght" 900; font-size: 56px; color: var(--hd-cool); line-height: 1; font-variant-numeric: tabular-nums; }
.hd-calc input[type=range] { width: 100%; accent-color: var(--hd-heat); margin: 10px 0 16px; }
.hd-calc__math { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--hd-cool); }
.hd-calc .hd-btn-link { display: inline-block; margin-top: 18px; font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 92, "wght" 700; background: var(--hd-heat); color: #fff; padding: 14px 24px; border-radius: 6px; text-decoration: none; }

/* compare table: last column highlighted */
.hd-table table th, .hd-table table td { padding: 16px; border-bottom: 1px solid var(--hd-line); }
.hd-table table th { font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 78, "wght" 600; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--hd-ink3); border-top: 0; }
.hd-table table th:last-child, .hd-table table td:last-child { background: #e3eef8; font-weight: 600; }
.hd-ok { color: var(--hd-green); } .hd-no { color: var(--hd-heat-dark); }

/* pricing feature list with thermal squares */
.hd-list ul { list-style: none !important; padding: 0 !important; margin: 22px 0 28px !important; display: grid; gap: 10px; }
.hd-list li { padding-left: 24px !important; position: relative; }
.hd-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 2px; background: var(--hd-thermal); }

/* phone frame around an Image module */
.hd-phone img { border: 10px solid var(--hd-ink); border-radius: 36px; box-shadow: 0 40px 70px rgba(11,37,64,.25); }

@media (prefers-reduced-motion: reduce) {
  .hd-hero-h1 h1 .hd-var, .hd-reveal h2, .hd-marquee p, .hd-job.move, .hd-barfill i, .hd-sign path, .hd-live i, .hd-feed > div.hd-new { animation: none !important; transition: none !important; }
  .hd-hero-h1 h1 .hd-var { font-variation-settings: "wdth" 100, "wght" 800; }
  .hd-barfill i { width: 68%; } .hd-sign path { stroke-dashoffset: 0; }
}
@media (max-width: 980px) { .hd-gauges { grid-template-columns: 1fr 1fr 1fr; } .hd-calc__n, .hd-calc__tot { font-size: 40px; } }