/* HVACB \u2014 hero section.
   Extracted from the inline <style> of parts/hero.html.
   Loaded by inc/enqueue-parts.php only when the part renders. */

/* ==========================================================
   HVACB HERO v10 — WPKoi Martanda hero mechanism
   section(300vh) -> pinned frame -> perspective -> tilted plane
   (POSITIVE rotateZ) -> MOVER (translateY only, set by JS) -> grid
   ========================================================== */
body{overflow-x:clip}

/* --- header must be OPAQUE and above the wall (tiles pass behind it) --- */
.hvacb-header{background:#FFFFFF !important;backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;z-index:500 !important}

/* NOTE: no overflow on .hvb-hero — it is the sticky parent of .hvb-pin and
   overflow:hidden here would disable the pin. .hvb-pin does the clipping. */
.hvb-hero{position:relative;height:180vh;width:100%;z-index:1}

.hvb-pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  display:flex;align-items:center;isolation:isolate;
  background:
    radial-gradient(1100px 780px at 88% 10%,#E6E1FB 0%,rgba(230,225,251,0) 60%),
    radial-gradient(1000px 900px at 0% 100%,#FBE1D7 0%,rgba(251,225,215,0) 55%),
    linear-gradient(135deg,#EEEBFB 0%,#EFEAF8 45%,#F3E7F0 72%,#F8EBE6 100%)}
.hvb-pin *{box-sizing:border-box}

/* ---- wall / perspective / tilt ---- */
.hvb-wall{position:absolute;inset:0;overflow:hidden;z-index:1;
  opacity:0;transition:opacity .45s ease}
.hvb-wall.is-ready{opacity:1}
.hvb-persp{position:absolute;inset:0;perspective:90vw;overflow:visible}
.hvb-plane{position:absolute;inset:0;transform-style:preserve-3d}

/* rotateX 45deg -> 48.15deg (+7%). rotateZ(37deg) UNCHANGED.
   translateY -75vw -> -102vw: pulls the grid up so the new top row runs
   up behind the header and is clipped by .hvb-pin's top edge. */
.hvb-plane-inner{transform-style:preserve-3d;
  transform:translateX(2vw) translateY(-102vw) rotateX(32.15deg) rotateZ(37deg) scale(.95)}
.hvb-mover{transform:translateZ(0);will-change:transform;transform-style:preserve-3d}

/* ---- grid ---- */
.hvb-grid{display:grid;grid-template-columns:repeat(3,25vw);grid-auto-rows:22vw;
  gap:5vw 3vw;padding:0 0 82% .5vw;position:relative;z-index:3;opacity:.96;
  transform-style:preserve-3d}

.hvb-tile{width:100%;height:100%;position:relative;pointer-events:auto;
  transform-style:preserve-3d}

/* ---- card: visible border + shadow AT REST ---- */
.hvb-card{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  border:1.5px solid rgba(75,59,143,.22);border-radius:10px;overflow:hidden;
  background:#fff;font-size:0;
  box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 6px rgba(40,25,85,.12);
  transition:transform .35s cubic-bezier(.16,1,.3,1),
             box-shadow .35s ease,border-color .35s ease}

/* ---- hover: lift toward viewer + partially straighten + deepen shadow ---- */
.hvb-tile:hover{z-index:20}
.hvb-tile:hover .hvb-card{
  transform:translateZ(4vw) scale(1.05) rotateZ(-10deg) rotateX(-16deg);
  border-color:#E4712B;
  box-shadow:0 22px 52px rgba(0,0,0,.34),0 6px 16px rgba(40,25,85,.22)}

.hvb-label{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;
  padding:1.4vw 1vw .8vw;transform:translateY(100%);transition:transform .35s ease;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}
.hvb-tile:hover .hvb-label{transform:translateY(0)}
.hvb-label b{font-size:.92vw;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.hvb-label b::before{content:"";display:inline-block;width:.6vw;height:.6vw;margin-right:.45vw;
  background:var(--ct,#FF6B2B);vertical-align:middle}

/* ---- compact HVAC site mockup; .mkN sets the palette ---- */
.mcb{display:flex;align-items:center;gap:.35vw;height:1.5vw;padding:0 .6vw;flex:none;
  background:#ECECF2;border-bottom:1px solid rgba(0,0,0,.07)}
.mcb i{width:.42vw;height:.42vw;border-radius:50%;flex:none;background:#D2CDE0}
.mcb i:nth-child(1){background:#FF5F57}.mcb i:nth-child(2){background:#FEBC2E}.mcb i:nth-child(3){background:#28C840}
.mcb u{flex:1;height:.55vw;border-radius:.2vw;background:rgba(0,0,0,.09);margin-left:.5vw;max-width:8vw}
.mcn{display:flex;align-items:center;gap:.35vw;height:2.2vw;padding:0 .7vw;flex:none;
  background:var(--nv);border-bottom:1px solid rgba(0,0,0,.06)}
.mcn b{width:3.6vw;height:.7vw;border-radius:.2vw;background:var(--lg);flex:none}
.mcn em{width:1.5vw;height:.35vw;border-radius:.15vw;background:var(--nl);flex:none}
.mcn em:first-of-type{margin-left:auto}
.mcn s{width:3.4vw;height:1.2vw;border-radius:.25vw;background:var(--ct);flex:none;margin-left:auto}
.mch{position:relative;flex:1;overflow:hidden;background:var(--hbg)}
.mcp{position:absolute;right:0;top:0;bottom:0;width:52%;background:var(--ph)}
.mco{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 46%,rgba(0,0,0,0) 72%)}
.mcc{position:absolute;left:.9vw;bottom:.9vw;width:52%;display:flex;flex-direction:column;gap:.28vw}
.mcc span{display:block}
.mcc .l1{height:.72vw;width:56%;border-radius:.12vw;background:var(--bd)}
.mcc .l2{height:.8vw;width:96%;border-radius:.12vw;background:rgba(255,255,255,.97)}
.mcc .l3{height:.8vw;width:74%;border-radius:.12vw;background:rgba(255,255,255,.88)}
.mcc .l4{height:.55vw;width:60%;border-radius:.12vw;background:var(--lg);margin-top:.15vw}
.mcc .l5{height:1vw;width:44%;border-radius:.25vw;background:var(--ct);margin-top:.3vw}
.mcs{display:grid;grid-template-columns:repeat(4,1fr);flex:none;border-top:1px solid rgba(0,0,0,.05)}
.mcs i{display:block;margin:.55vw auto;width:1.15vw;height:1.15vw;border-radius:.25vw}
.mcs i:nth-child(1){background:var(--s1)}.mcs i:nth-child(2){background:var(--s2)}
.mcs i:nth-child(3){background:var(--s3)}.mcs i:nth-child(4){background:var(--s4)}
.mct{display:flex;align-items:center;gap:.4vw;height:1.5vw;padding:0 .7vw;flex:none;
  background:var(--tb);border-top:1px solid rgba(0,0,0,.04)}
.mct i{width:1.6vw;height:.75vw;border-radius:.15vw;opacity:.85;flex:none}
.mct i:nth-child(1){background:var(--nv)}.mct i:nth-child(2){background:var(--ct)}
.mct u{flex:1;height:.3vw;border-radius:.15vw;background:rgba(0,0,0,.12)}

/* ---- 12 site colour variants ---- */
.mk1{--nv:#0D1B2E;--lg:#4A9FC4;--ct:#FF6B2B;--nl:rgba(255,255,255,.25);--hbg:linear-gradient(135deg,#0D1B2E,#1A3A6B);--ph:linear-gradient(135deg,#1A4A7A,#4488C5);--bd:#FF6B2B;--tb:#F0F4FF;--s1:#1A3A6B;--s2:#FF6B2B;--s3:#4A9FC4;--s4:#2E7D32}
.mk2{--nv:#1A2F4A;--lg:#5B9BD5;--ct:#E07020;--nl:rgba(255,255,255,.22);--hbg:linear-gradient(135deg,#1A2F4A,#2A4A70);--ph:linear-gradient(135deg,#2A5080,#3A70AA);--bd:#E07020;--tb:#EEF3FA;--s1:#2A4A70;--s2:#E07020;--s3:#5B9BD5;--s4:#37824A}
.mk3{--nv:#FFFFFF;--lg:#1565C0;--ct:#F57C00;--nl:rgba(0,0,0,.16);--hbg:linear-gradient(135deg,#0D47A1,#1565C0);--ph:linear-gradient(135deg,#1565C0,#42A5F5);--bd:#F57C00;--tb:#E3F2FD;--s1:#1565C0;--s2:#F57C00;--s3:#0D47A1;--s4:#2E7D32}
.mk4{--nv:#1C1C1C;--lg:#FF8C42;--ct:#FF8C42;--nl:rgba(255,255,255,.22);--hbg:linear-gradient(135deg,#5C1F00,#A84000);--ph:linear-gradient(135deg,#7B3010,#D07040);--bd:#FF8C42;--tb:#FFF3E8;--s1:#A84000;--s2:#FF8C42;--s3:#1C1C1C;--s4:#4A7B3A}
.mk5{--nv:#263238;--lg:#80CBC4;--ct:#FF7043;--nl:rgba(255,255,255,.22);--hbg:linear-gradient(135deg,#263238,#37474F);--ph:linear-gradient(135deg,#37474F,#78909C);--bd:#FF7043;--tb:#ECEFF1;--s1:#00695C;--s2:#FF7043;--s3:#263238;--s4:#78909C}
.mk6{--nv:#B71C1C;--lg:#FFCDD2;--ct:#FF6B2B;--nl:rgba(255,255,255,.28);--hbg:linear-gradient(135deg,#7F0000,#B71C1C);--ph:linear-gradient(135deg,#B71C1C,#E53935);--bd:#FF6B2B;--tb:#FFF3F0;--s1:#B71C1C;--s2:#FF6B2B;--s3:#1565C0;--s4:#2E7D32}
.mk7{--nv:#1B5E20;--lg:#A5D6A7;--ct:#FF6B2B;--nl:rgba(255,255,255,.28);--hbg:linear-gradient(135deg,#1B5E20,#2E7D32);--ph:linear-gradient(135deg,#2E7D32,#43A047);--bd:#FF6B2B;--tb:#F1F8E9;--s1:#2E7D32;--s2:#FF6B2B;--s3:#1B5E20;--s4:#F57C00}
.mk8{--nv:#4A148C;--lg:#CE93D8;--ct:#FF6B2B;--nl:rgba(255,255,255,.28);--hbg:linear-gradient(135deg,#38006B,#6A1B9A);--ph:linear-gradient(135deg,#6A1B9A,#9C27B0);--bd:#FF6B2B;--tb:#F3E5F5;--s1:#6A1B9A;--s2:#FF6B2B;--s3:#0097A7;--s4:#FDD835}
.mk9{--nv:#0A0A1A;--lg:#7B68EE;--ct:#7B68EE;--nl:rgba(255,255,255,.2);--hbg:linear-gradient(135deg,#0A0A1A,#1A1A3E);--ph:linear-gradient(135deg,#1A1A3E,#3F3D7A);--bd:#7B68EE;--tb:#EFEEFB;--s1:#7B68EE;--s2:#FF6B2B;--s3:#4CAF87;--s4:#FDD835}
.mk10{--nv:#FFFFFF;--lg:#33691E;--ct:#33691E;--nl:rgba(0,0,0,.16);--hbg:linear-gradient(135deg,#1B5E20,#33691E);--ph:linear-gradient(135deg,#33691E,#7CB342);--bd:#FF6B2B;--tb:#F1F8E9;--s1:#33691E;--s2:#FF6B2B;--s3:#558B2F;--s4:#827717}
.mk11{--nv:#E65100;--lg:rgba(255,255,255,.9);--ct:rgba(255,255,255,.28);--nl:rgba(255,255,255,.32);--hbg:linear-gradient(135deg,#BF360C,#E64A19);--ph:linear-gradient(135deg,#E64A19,#FF7043);--bd:rgba(255,224,178,.92);--tb:#FFF3E0;--s1:#E64A19;--s2:#FF7043;--s3:#1565C0;--s4:#2E7D32}
.mk12{--nv:#FFFFFF;--lg:#2C3E50;--ct:#E74C3C;--nl:rgba(0,0,0,.16);--hbg:linear-gradient(135deg,#2C3E50,#3D5166);--ph:linear-gradient(135deg,#3D5166,#607D98);--bd:#E74C3C;--tb:#FAFAFA;--s1:#2C3E50;--s2:#E74C3C;--s3:#3498DB;--s4:#27AE60}

/* ---- scrim keeps the left content zone readable ---- */
.hvb-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,#EFEAF8 0%,rgba(239,234,248,.97) 25%,rgba(239,234,248,.62) 42%,rgba(239,234,248,0) 60%)}

/* ---- left content ---- */
.hvb-content{position:relative;z-index:3;width:100%;max-width:1400px;margin:0 auto;
  padding:0 clamp(24px,4vw,56px)}
.hvb-in{max-width:34rem}
.hvb-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#4B2A86;background:rgba(255,255,255,.85);
  padding:7px 18px;border-radius:999px;margin:0 0 22px;border:1px solid rgba(120,90,190,.18);
  box-shadow:0 4px 16px -6px rgba(90,60,160,.25)}
.hvb-dot{width:6px;height:6px;border-radius:50%;background:#E4712B;flex:none;animation:hvbPulse 2s ease-in-out infinite}
@keyframes hvbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.hvb-title{font-size:clamp(36px,4.8vw,66px);font-weight:800;letter-spacing:-.05em;line-height:.93;color:#2A1A4A;margin:0 0 18px}
.hvb-title em{font-style:normal;background:linear-gradient(105deg,#5A3AA6 0%,#B5573E 45%,#FF6B2B 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hvb-lead{font-size:clamp(14px,1.4vw,17px);line-height:1.7;color:rgba(42,26,74,.72);font-weight:500;max-width:38ch;margin:0 0 34px}
.hvb-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hvb-btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;letter-spacing:-.01em;padding:14px 26px;border-radius:13px;text-decoration:none;transition:transform .22s,box-shadow .22s,background .22s}
.hvb-btn--p{background:linear-gradient(105deg,#4B3B8F,#E4712B);color:#fff;box-shadow:0 14px 34px -10px rgba(75,59,143,.5)}
.hvb-btn--p:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(75,59,143,.6)}
.hvb-btn--g{background:rgba(255,255,255,.68);color:#3A2A6A;border:1.5px solid rgba(90,60,150,.28)}
.hvb-btn--g:hover{background:rgba(255,255,255,.95)}
.hvb-btn svg{flex:none}
.hvb-btn:focus-visible{outline:3px solid #4B3B8F;outline-offset:3px}

/* ---- responsive: unpin + drop the wall ---- */
@media(max-width:900px),(max-aspect-ratio:9/7){
  .hvb-hero{height:auto}
  .hvb-pin{position:relative;height:auto;min-height:100vh;padding:14vh 0}
  .hvb-wall,.hvb-wall.is-ready{opacity:.2}
  .hvb-scrim{background:linear-gradient(to bottom,rgba(238,235,251,.92) 0%,rgba(238,235,251,.74) 55%,rgba(238,235,251,.42) 100%)}
  .hvb-in{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .hvb-hero{height:auto}
  .hvb-pin{position:relative;height:auto;min-height:100vh}
  .hvb-card,.hvb-label{transition:none}
  .hvb-dot{animation:none}
}

/* ==========================================================
   HVACB HERO v11 — left→right background gradient + tokenised
   accents. Overrides the v10 rules above via the cascade; the
   3D wall mechanism is deliberately untouched.
   ========================================================== */
.hvb-pin{
	background:
		radial-gradient(900px 620px at 92% 8%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 60%),
		var(--hvb-grad-hero);
}
.hvb-title em{
	background:var(--hvb-grad-accent);
	-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hvb-btn--p{background:var(--hvb-grad-cta)}

@media(max-width:900px),(max-aspect-ratio:9/7){
	/* keep the hero light on mobile, where content spans full width */
	.hvb-pin{background:linear-gradient(180deg,#EFEBF8 0%,#E7DEF4 58%,#D9CCEC 100%)}
}

/* Feedback — make the hero badge read as clearly bold and prominent. */
.hvb-eyebrow{font-weight:800;font-size:11.5px;letter-spacing:.22em}