/* ===== 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%}
}

/* ===== v52: PHONE hero (600px and narrower) =====
   Looks like the reference: orange badge, smaller blue heading + short text on the LEFT,
   the technician photo (whole person, sharp) on the RIGHT, soft fade into the light background.
   The photo slider, zoom animation, progress bars and swipe all keep working.
   Laptop / desktop and tablet are NOT changed by this block. */
@media(max-width:600px){
  .hx{--ph:82vw;position:relative;display:block;padding-bottom:62px;overflow:hidden;
    background:linear-gradient(180deg,#f4faff 0%,#e8f2fb 100%)}
  /* photo: right side, fades softly into the background on the left and at the bottom */
  .hx-slides{position:absolute;top:0;right:0;left:auto;width:56%;height:var(--ph);border-radius:0;box-shadow:none;background:transparent;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%),linear-gradient(180deg,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%),linear-gradient(180deg,#000 84%,transparent 100%);
    mask-composite:intersect}
  .hx-shade{display:none}
  /* phone-only choice of photo and which part stays visible (so the whole person shows, face and body) */
  .hx-s:nth-child(1){background-image:url(images/hero.jpg)!important;background-position:70% 0!important}
  .hx-s:nth-child(2){background-position:21% 20%!important}
  .hx-s:nth-child(3){background-position:85% 50%!important}
  .hx-s:nth-child(4){--fx:1;background-position:74% 40%!important}
  .hx-s:nth-child(5){--fx:1;background-position:40% 30%!important}
  .hx-s:nth-child(6){background-position:82% 30%!important}
  /* text on the left */
  .hx-wrap{width:92%;padding:0}
  .hx-in{display:block;min-height:0;padding:18px 0 0}
  .hx-text{display:grid;grid-template-rows:auto auto 1fr auto;min-height:calc(var(--ph) + 8px);max-width:none;padding-left:0}
  .hx-pills{margin-bottom:12px}
  .hx-deal,.hx-points{display:none}
  .hx-badge{background:#ff7a1a;border:0;color:#fff;font-size:.72rem;padding:6px 14px;box-shadow:0 6px 14px rgba(255,122,26,.3);
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .hx-badge i{background:#fff;width:7px;height:7px;animation:none}
  .hx h1{font-size:clamp(1.2rem,5.8vw,1.75rem);line-height:1.18;max-width:58%;margin-bottom:10px;letter-spacing:-.01em}
  .hx .hx-lead{font-size:clamp(.72rem,3.3vw,.9rem);line-height:1.5;max-width:50%;margin-bottom:0}
  .hx-btns{flex-wrap:nowrap;gap:10px;margin:14px 0 0}
  .hx-btns .btn,.hx .btn-orange,.hx .btn-ghost{flex:1;width:auto;min-width:0;padding:12px 8px;font-size:.84rem;border-radius:12px;
    white-space:nowrap;justify-content:center;box-shadow:none}
  .hx .btn-orange{box-shadow:0 8px 18px rgba(255,122,26,.35)}
  /* caption: only the little progress bars, bottom right of the photo */
  .hx-cap{top:calc(var(--ph) - 40px);bottom:auto;left:auto;right:10px}
  .hx-bars{align-items:center;height:8px}
  .hx-bars button{width:9px!important;height:5px!important;min-height:0!important;padding:0!important;flex:none}
  .hx-bars button.on{width:22px!important}
  .hx-tag{display:none}
}

/* ===== v52: PHONE trust strip + "Our Services" photo cards (600px and narrower) ===== */
.ph-only{display:none}
@media(max-width:600px){
  .hx-services{display:none}
  .ph-only{display:block}
  .phx{position:relative;z-index:6;display:flow-root;margin:-46px 0 0;padding:0}
  .phx-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:92%;margin:0 auto;padding:14px 2px;
    background:#fff;border-radius:20px;box-shadow:0 14px 34px rgba(8,42,84,.14)}
  .phx-trust div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 5px;text-align:center;border-left:1px solid #e3ecf5}
  .phx-trust div:first-child{border-left:0}
  .phx-trust svg{width:26px;height:26px;fill:none;stroke:#0b5ea8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .phx-trust div:nth-child(even) svg{stroke:#ff7a1a}
  .phx-trust span{font-size:.66rem;line-height:1.25;font-weight:600;color:#17335c}
  .phx-svc{margin-top:22px;padding:24px 4% 28px;background:linear-gradient(180deg,#eaf3fb 0%,#f4f9fe 100%)}
  .phx-k{display:inline-flex;align-items:center;gap:8px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#ff7a1a}
  .phx-k::before{content:"";width:22px;height:2px;border-radius:2px;background:#ff7a1a}
  .phx-head h2{font-size:1.2rem;line-height:1.25;font-weight:800;color:#05408e;margin:8px 0 6px;letter-spacing:-.01em;text-transform:none}
  .phx-head p{font-size:.78rem;line-height:1.5;color:#3b5578;margin:0 0 16px}
  .phx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .phx-grid a{position:relative;display:flex;flex-direction:column;overflow:hidden;padding-bottom:34px;background:#fff;border-radius:14px;
    box-shadow:0 6px 16px rgba(8,42,84,.08);color:#0a2540;text-transform:none;letter-spacing:0;-webkit-tap-highlight-color:transparent}
  .phx-grid a:active{transform:scale(.97)}
  .phx-grid img{display:block;width:100%;height:auto;aspect-ratio:9/7;object-fit:cover}
  .phx-grid b{display:block;padding:8px 8px 0;font-size:.66rem;line-height:1.25;font-weight:700;color:#0a2540;text-transform:none;letter-spacing:0}
  .phx-grid b::after{content:"";display:block;width:18px;height:2.5px;margin-top:6px;border-radius:2px;background:#ff7a1a}
  .phx-go{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#ff7a1a;
    box-shadow:0 4px 10px rgba(255,122,26,.4)}
  .phx-go svg{width:12px;height:12px}
  .hx-services + .phx + .marquee,.phx + .marquee{margin-top:0}
}

/* ===== v55: Home "service photos" cards (the five images under About Us) =====
   Only this block of the Home page. Same card look on every screen, no cropping of titles.
   Phone / small tablet: 2 columns, the 5th card is a wide card. 640px and wider: 3 per row, last two centred. */
.ab-sec .svcph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch;margin-top:26px}
.svcph .svc-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:#fff;border:1px solid #e3ecf6;border-radius:16px;
  box-shadow:0 8px 22px rgba(10,61,138,.1);color:#0a3d8a;text-transform:none;letter-spacing:0;transition:transform .3s ease,box-shadow .3s ease;
  -webkit-tap-highlight-color:transparent}
.svcph .svc-img{display:block;aspect-ratio:6/5;overflow:hidden;background:#eef4fa}
.svcph .svc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svcph .svc-cap{position:relative;display:flex;flex:1;align-items:center;justify-content:space-between;gap:8px;padding:14px 10px 12px 12px;min-height:56px}
.svcph .svc-cap::before{content:"";position:absolute;left:12px;top:0;width:26px;height:3px;border-radius:0 0 3px 3px;background:#ff7a1a}
.svcph .svc-cap b{display:block;min-width:0;font-size:.78rem;line-height:1.3;font-weight:700;color:#0a3d8a;letter-spacing:0;text-transform:none;hyphens:none}
.svcph .svc-go{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#0a3d8a;transition:background .3s,transform .3s}
.svcph .svc-go svg{width:12px;height:12px}
.svcph .svc-card:active{transform:scale(.98)}
.svcph .svc-card:focus-visible{outline:3px solid #0aa5c6;outline-offset:3px}
@media(hover:hover){
  .svcph .svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(10,61,138,.18)}
  .svcph .svc-card:hover .svc-img img{transform:scale(1.04)}
  .svcph .svc-card:hover .svc-go{background:#ff7a1a;transform:translateX(2px)}
}
/* 5th card: wide card (photo left, title right) on 2-column screens */
.svcph .svc-card:nth-child(5){grid-column:1/-1;flex-direction:row}
.svcph .svc-card:nth-child(5) .svc-img{flex:0 0 50%;max-width:50%}
.svcph .svc-card:nth-child(5) .svc-cap{padding:16px 14px 16px 16px}
.svcph .svc-card:nth-child(5) .svc-cap::before{left:16px}
.svcph .svc-card:nth-child(5) .svc-cap b{font-size:.92rem}
@media(max-width:340px){
  .ab-sec .svcph{gap:10px}
  .svcph .svc-cap{padding:13px 8px 10px 10px}.svcph .svc-cap::before{left:10px}
  .svcph .svc-cap b{font-size:.72rem}.svcph .svc-go{width:22px;height:22px}
  .svcph .svc-card:not(:nth-child(5)) .svc-go{display:none}
}
@media(min-width:420px){.svcph .svc-cap b{font-size:.84rem}.ab-sec .svcph{gap:14px}}
@media(min-width:640px){
  .ab-sec .svcph{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-top:32px}
  .svcph .svc-card,.svcph .svc-card:nth-child(n){grid-column:span 2;flex-direction:column}
  .svcph .svc-card:nth-child(4){grid-column:2/4}
  .svcph .svc-card:nth-child(5){grid-column:4/6}
  .svcph .svc-card:nth-child(5) .svc-img{flex:none;max-width:none}
  .svcph .svc-card:nth-child(5) .svc-cap{padding:14px 10px 12px 12px}
  .svcph .svc-card:nth-child(5) .svc-cap::before{left:12px}
  .svcph .svc-card:nth-child(5) .svc-cap b{font-size:.84rem}
  .svcph .svc-cap{min-height:62px}
}
@media(min-width:900px){
  .ab-sec .svcph{gap:24px}
  .svcph .svc-cap{padding:18px 16px 16px 18px;min-height:74px}.svcph .svc-cap::before{left:18px;width:30px}
  .svcph .svc-card:nth-child(5) .svc-cap{padding:18px 16px 16px 18px}.svcph .svc-card:nth-child(5) .svc-cap::before{left:18px}
  .svcph .svc-cap b,.svcph .svc-card:nth-child(5) .svc-cap b{font-size:1rem}
  .svcph .svc-go{width:30px;height:30px}.svcph .svc-go svg{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce){.svcph .svc-card,.svcph .svc-img img,.svcph .svc-go{transition:none}}

/* ===== v57: Home service photos on laptop / desktop (1101px and wider) =====
   Laptop: staggered photo collage (AC tall, Fridge, Washing Machine, then Geyser + Wiring stacked) with the name on the photo.
   Phone and tablet (1100px and narrower): unchanged, the v55 cards above. */
.svcph .svc-img picture{display:block;width:100%;height:100%}
@media(min-width:1101px){
  .ab-sec .svcph{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;row-gap:22px;align-items:start;margin-top:30px}
  .ab-sec .svcph .svc-card,.ab-sec .svcph .svc-card:nth-child(n){display:block;position:relative;border:0;background:#eef4fa;border-radius:14px;box-shadow:none;overflow:hidden;color:#fff;flex-direction:initial;grid-column:auto;grid-row:auto;margin-top:0;height:auto}
  .ab-sec .svcph .svc-card:nth-child(1){grid-column:1;grid-row:1/span 2;margin-top:44px;aspect-ratio:5/8}
  .ab-sec .svcph .svc-card:nth-child(2){grid-column:2;grid-row:1/span 2;margin-top:150px}
  .ab-sec .svcph .svc-card:nth-child(3){grid-column:3;grid-row:1/span 2;margin-top:90px}
  .ab-sec .svcph .svc-card:nth-child(4){grid-column:4;grid-row:1}
  .ab-sec .svcph .svc-card:nth-child(5){grid-column:4;grid-row:2}
  .ab-sec .svcph .svc-card:nth-child(1) .svc-img{position:absolute;inset:0;aspect-ratio:auto;max-width:none;flex:none}
  .ab-sec .svcph .svc-card:nth-child(n) .svc-img{max-width:none;flex:none}
  .ab-sec .svcph .svc-card .svc-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex:none;align-items:center;justify-content:flex-start;gap:10px;min-height:0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(5,25,50,.82))}
  .ab-sec .svcph .svc-card .svc-cap::before{display:none}
  .ab-sec .svcph .svc-card .svc-cap b{order:2;color:#fff;font-size:.98rem;font-weight:600;line-height:1.3;text-shadow:0 1px 3px rgba(0,0,0,.35)}
  .ab-sec .svcph .svc-card .svc-go{order:1;width:34px;height:34px;background:#0aa5c6;transform:none}
  .ab-sec .svcph .svc-card .svc-go svg{width:15px;height:15px}
}
@media(min-width:1101px) and (hover:hover){
  .ab-sec .svcph .svc-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,61,138,.22)}
  .ab-sec .svcph .svc-card:hover .svc-img img{transform:scale(1.06)}
  .ab-sec .svcph .svc-card:hover .svc-go{background:#ff7a1a;transform:none}
}

/* ===== v58: PHONE hero (600px and narrower): clear photos + clear text =====
   Before: the photo was a narrow, faded strip on the right, so machines and technicians were cut off.
   Now: the slider photo is FULL WIDTH on top (no fade, no cropping to a thin strip, machine name shown on it),
   and the text sits below it on the navy theme (white heading, orange highlight). Slider, zoom animation, bars and swipe still work.
   Laptop and tablet are not changed. */
@media(max-width:600px){
  .hx{--ph:clamp(232px,74vw,380px);display:block;min-height:0;padding-bottom:64px;overflow:hidden;
    background:linear-gradient(180deg,#0a2a4a 0%,#0d3b6e 100%)}
  .hx-slides{position:relative;top:auto;right:auto;left:auto;width:100%;height:var(--ph);border-radius:0 0 24px 24px;background:#0a2a4a;
    box-shadow:0 14px 30px rgba(0,0,0,.35);-webkit-mask-image:none;mask-image:none}
  /* only a soft dark strip at the very bottom of the photo so the machine name and bars can be read; the rest of the photo stays untouched */
  .hx-shade{display:block;position:absolute;inset:auto;left:0;right:0;top:0;height:var(--ph);border-radius:0 0 24px 24px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(4,24,48,.55) 100%)}
  /* photo choice and focus point per slide (same as the laptop photos, whole scene visible) */
  .hx-s:nth-child(1){background-image:url(images/slide-ac.jpg)!important;background-position:80% 30%!important}
  .hx-s:nth-child(2){background-position:50% 20%!important}
  .hx-s:nth-child(3){background-position:82% 40%!important}
  .hx-s:nth-child(4){--fx:1;background-position:4% 40%!important}
  .hx-s:nth-child(5){--fx:1;background-position:40% 30%!important}
  .hx-s:nth-child(6){background-position:50% 35%!important}
  /* text below the photo */
  .hx-wrap{width:92%;padding:0}
  .hx-in{display:block;min-height:0;padding:20px 0 0}
  .hx-text{display:block;min-height:0;max-width:none;padding:0}
  .hx-pills{margin-bottom:12px}
  .hx h1{color:#fff;font-size:clamp(1.6rem,7.6vw,2.05rem);line-height:1.15;max-width:none;margin-bottom:10px;text-shadow:none}
  .hx h1 span{color:#ffa04d}
  .hx .hx-lead{color:rgba(255,255,255,.92);font-size:clamp(.88rem,3.9vw,1rem);line-height:1.55;max-width:none;margin-bottom:0}
  .hx-btns{margin:16px 0 0}
  .hx .btn-ghost{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.85)}
  .hx .btn-ghost .ph-ico{fill:#ffa04d}
  /* machine name + progress bars sit on the bottom of the photo */
  .hx-cap{top:calc(var(--ph) - 46px);bottom:auto;left:12px;right:12px;justify-content:space-between}
  .hx-tag{display:inline-flex;font-size:.74rem;padding:6px 12px;max-width:calc(100% - 96px);overflow:hidden;text-overflow:ellipsis}
}