/* ===== Intercool home hero (v22) =====
   The technician photo fills the WHOLE hero background. A navy shade sits only behind the text on the left,
   so the people and machines on the right stay sharp. Service tiles sit in a strip under the hero.
   Loaded after style.css on index.html only. */

.hx{position:relative;isolation:isolate;overflow:hidden;padding:0;background:#0a2a4a;
  min-height:clamp(580px,46vw,700px);display:flex;align-items:center}

/* ---------- background photos ---------- */
.hx-slides{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0a2a4a}
.hx-s{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;background-position:50% 30%;opacity:0;
  transform:scale(var(--fx,1),1);transition:opacity 1s ease}
.hx-s.flip{--fx:-1}
.hx-s.on{opacity:1;z-index:2;animation:hxZoom 5.2s ease-out forwards}
.hx-s.out{z-index:1}
@keyframes hxZoom{from{transform:scale(calc(var(--fx,1)*1.06),1.06)}to{transform:scale(var(--fx,1),1)}}
/* shade: strong behind the text (left), gone by the middle, light fade at top and bottom */
.hx-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
   linear-gradient(90deg,rgba(6,32,64,.94) 0%,rgba(7,40,78,.86) 28%,rgba(8,48,90,.5) 46%,rgba(8,48,90,0) 64%),
   linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 68%,rgba(4,24,48,.5) 100%)}

/* ---------- text ---------- */
.hx-wrap{position:relative;z-index:3;width:min(1500px,calc(100% - 100px));margin-inline:auto;padding-right:68px}
.hx-in{min-height:inherit;display:flex;align-items:center;padding-top:42px;padding-bottom:104px}
.hx-text{max-width:600px;padding-left:12px}
.hx-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.hx-badge,.hx-deal{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:99px;font-weight:600;font-size:.88rem;line-height:1.4}
.hx-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-badge i{width:9px;height:9px;border-radius:50%;background:#35d27f;animation:hxPulse 2s ease-out infinite}
@keyframes hxPulse{0%{box-shadow:0 0 0 0 rgba(53,210,127,.6)}100%{box-shadow:0 0 0 10px rgba(53,210,127,0)}}
.hx-deal{background:#ff7a1a;border:1px solid #ff7a1a;color:#fff;box-shadow:0 8px 20px rgba(255,122,26,.4)}
.hx h1{font-size:clamp(2.3rem,3.7vw,3.7rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hx h1 span{position:relative;white-space:nowrap;color:#ff8a2e}
.hx h1 span::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.16em;border-radius:6px;z-index:-1;
  background:linear-gradient(90deg,#ff7a1a,#ffb067);opacity:.5}
.hx .hx-lead{font-size:1.1rem;line-height:1.7;color:rgba(255,255,255,.93);max-width:520px;margin-bottom:28px}
.hx-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.hx .btn-orange{padding:16px 34px;font-size:1.05rem;font-weight:600;border-radius:12px;box-shadow:0 12px 26px rgba(255,122,26,.4)}
.hx .btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font-size:1.05rem;font-weight:600;border-radius:50px;
  color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.85)}
.hx .btn-ghost:hover{background:#fff;color:#05408e}
.hx .btn-ghost .ph-ico{width:22px;height:22px;fill:#ff8a2e}
.hx-points{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none}
.hx-points li{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;line-height:1.4;color:#fff}
.hx-points li::before{content:"\2713";display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;
  background:rgba(53,210,127,.25);color:#7bf0b0;font-size:.78rem;font-weight:800}

/* ---------- caption + progress bars (bottom right, above the service strip) ---------- */
.hx-cap{position:absolute;z-index:4;bottom:88px;right:calc((100% - min(1500px,100% - 100px))/2 + 68px);display:flex;align-items:center;gap:16px}
.hx-tag{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:8px 16px;border-radius:99px;
  background:rgba(255,255,255,.93);color:#0a2540;font-weight:600;font-size:.88rem;line-height:1.3;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.22)}
.hx-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#ff7a1a}
.hx-tag.in{animation:hxTag .5s ease both}
@keyframes hxTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hx-bars{display:flex;gap:6px;flex:none;align-items:center}
.hx-bars button{position:relative;width:24px;height:5px;padding:0;border:0;border-radius:5px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .3s}
.hx-bars button::before{content:"";position:absolute;inset:-12px -3px}
.hx-bars button i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:5px;background:#ff7a1a}
.hx-bars button.on{width:42px}
.hx-bars button.on i{animation:hxBar var(--delay,4200ms) linear forwards}
@keyframes hxBar{to{width:100%}}
.hx-bars button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- service strip ---------- */
.hx-services{position:relative;z-index:6;width:min(1500px,calc(100% - 200px));margin:-62px auto 0}
.hx-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:10px;border-radius:24px;background:#fff;box-shadow:0 24px 54px rgba(8,42,84,.18)}
.hx-services a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 10px 16px;border-radius:18px;
  color:#0a2540;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400;transition:background .25s,transform .25s,box-shadow .25s}
.hx-services a:hover{background:#f0f8fd;color:#0a2540;transform:translateY(-4px);box-shadow:0 12px 24px rgba(8,42,84,.12)}
.hx-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#e8f3fb;color:#0b5ea8;transition:background .25s,color .25s}
.hx-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hx-services a:hover .hx-ic{background:#ff7a1a;color:#fff}
.hx-services b{display:block;font-size:1rem;font-weight:700;line-height:1.25;color:#0a2540;letter-spacing:0;text-transform:none}
.hx-services small{display:block;margin-top:3px;font-size:.78rem;line-height:1.4;color:#56708f}
.hx-services + .marquee{margin-top:36px}

/* ---------- smaller laptops ---------- */
@media(max-width:1250px){
  .hx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px) and (min-width:901px){
  .hx-text{max-width:520px}
  .hx h1{font-size:2.6rem}
  .hx-shade{background:
   linear-gradient(90deg,rgba(6,32,64,.95) 0%,rgba(7,40,78,.88) 36%,rgba(8,48,90,.5) 56%,rgba(8,48,90,0) 76%),
   linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 68%,rgba(4,24,48,.5) 100%)}
}

/* ---------- tablet + phone: photo on top (edge to edge), text below on a light background ---------- */
@media(max-width:900px){
  .hx{--ph:clamp(250px,66vw,470px);display:block;min-height:0;padding-bottom:92px;overflow:hidden;
    background:linear-gradient(180deg,#f3f9fe 0%,#e7f1fa 100%)}
  .hx-slides{position:relative;inset:auto;height:var(--ph);border-radius:0 0 28px 28px;box-shadow:0 16px 34px rgba(8,42,84,.25)}
  .hx-shade{position:absolute;inset:auto;left:0;right:0;top:0;height:var(--ph);border-radius:0 0 28px 28px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(4,24,48,.5) 100%)}
  .hx-wrap{width:92%;padding-right:0}
  .hx-in{min-height:0;display:block;padding:28px 0 0}
  .hx-text{max-width:none;padding-left:0}
  .hx-badge{background:#fff;border-color:rgba(5,64,142,.16);color:#05408e;box-shadow:0 6px 18px rgba(10,60,110,.08)}
  .hx h1{color:#05408e;text-shadow:none}
  .hx h1 span{color:#ff7a1a}
  .hx .hx-lead{color:#27456b}
  .hx .btn-ghost{color:#05408e;background:#fff;border-color:#05408e}
  .hx .btn-ghost:hover{background:#05408e;color:#fff}
  .hx .btn-ghost .ph-ico{fill:#ff7a1a}
  .hx-points li{color:#17335c}
  .hx-points li::before{background:#dff4e8;color:#13924f}
  .hx-cap{top:calc(var(--ph) - 56px);bottom:auto;left:14px;right:14px;justify-content:space-between}
  .hx-tag{max-width:calc(100% - 130px);overflow:hidden;text-overflow:ellipsis}
  .hx-services{width:92%;padding-right:0}
  .hx-services{margin-top:-54px}
}

@media(max-width:600px){
  .hx h1{font-size:2.15rem}
  .hx .hx-lead{font-size:1rem}
  .hx-btns .btn{width:100%;justify-content:center;text-align:center}
  .hx-cap{left:10px;right:10px;top:calc(var(--ph) - 50px)}
  .hx-tag{font-size:.78rem;padding:6px 12px;max-width:calc(100% - 96px)}
  .hx-bars{gap:4px}.hx-bars button{width:9px}.hx-bars button.on{width:22px}
  .hx-grid{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px}
  .hx-services a{padding:14px 8px 12px;gap:8px}
  .hx-ic{width:48px;height:48px;border-radius:14px}.hx-ic svg{width:24px;height:24px}
  .hx-services small{display:none}
  .hx-services{margin-top:-50px}
}

@media(prefers-reduced-motion:reduce){
  .hx-s.on,.hx-badge i{animation:none}
  .hx-bars button.on i{animation:none;width:100%}
}