/* RR Cooling Point — Ultra Premium design layer (v3)
   Loaded after ux-upgrade.css. Remove the <link> in index.php to roll back to the previous look.
   Concept: "Thermostat hero" — the whole hero shifts temperature (icy cyan → warm amber) as the slides change. */

@property --ac{syntax:'<color>';inherits:true;initial-value:#4fd8ff}
@property --ac2{syntax:'<color>';inherits:true;initial-value:#2f7bff}
:root{
 --up-night:#04112a;--up-deep:#0a2556;
 --up-glass:rgba(255,255,255,.09);--up-line:rgba(255,255,255,.18);
 --up-ease:cubic-bezier(.2,.8,.2,1);
 --up-padx:clamp(16px,5.5vw,76px);
 --up-display:Manrope,Poppins,system-ui,sans-serif;
}

/* ---------- Scroll progress ---------- */
#rr-sp{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);
 background:linear-gradient(90deg,#4fd8ff,var(--blue,#0a5bd8),#ffb45e);pointer-events:none}

/* ---------- Header: frosted glass ---------- */
header#hd{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.7) blur(16px);backdrop-filter:saturate(1.7) blur(16px);
 border-bottom:1px solid rgba(10,60,140,.08);transition:box-shadow .3s,background .3s}
header#hd.sc{background:rgba(255,255,255,.9);box-shadow:0 10px 30px -12px rgba(8,30,80,.28)}
.dn>a,.dn .dd>a{position:relative}
.dn>a::after,.dn .dd>a::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:2px;border-radius:2px;
 background:linear-gradient(90deg,var(--blue),#4fd8ff);transform:scaleX(0);transition:transform .35s var(--up-ease)}
.dn>a:hover::after,.dn>a.on::after,.dn .dd:hover>a::after{transform:scaleX(1)}

/* ---------- HERO ---------- */
.hero.rr3{--ac:#4fd8ff;--ac2:#2f7bff;--mx:72%;--my:28%;color:#fff;isolation:isolate;
 background:
  radial-gradient(900px 520px at 82% 8%,color-mix(in srgb,var(--ac) 30%,transparent),transparent 62%),
  radial-gradient(760px 480px at 4% 96%,color-mix(in srgb,var(--ac2) 38%,transparent),transparent 64%),
  linear-gradient(165deg,var(--up-night),var(--up-deep) 58%,#061a3f);
 transition:--ac 1s ease,--ac2 1s ease}
.hero.rr3::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
 background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
 background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 30%,#000,transparent 75%)}
.hero.rr3::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(460px circle at var(--mx) var(--my),rgba(255,255,255,.11),transparent 62%)}
#up-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero.rr3 .slides{position:relative;z-index:2}
.hero.rr3 .expert-tech-chip{z-index:5}
.hero.rr3 .expert-tech-chip{position:absolute;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:var(--up-line);box-shadow:none;color:#e8f3ff}
.hero.rr3 .expert-tech-mark{background:var(--ac);color:#04112a}
.hero.rr3 .bar{display:none}

.hero.rr3 .slide .w{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(24px,4.4vw,72px);
 min-height:clamp(540px,70vh,680px);padding-top:clamp(40px,4.6vw,68px);padding-bottom:184px}

.hero.rr3 .tag{display:inline-flex;align-items:center;gap:9px;background:var(--up-glass);border:1px solid var(--up-line);color:#e3f1ff;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:7px 15px 7px 11px;font-size:12.5px;font-weight:500;letter-spacing:.01em;margin-bottom:18px}
.hero.rr3 .tag img{filter:brightness(0) invert(1)}
.hero.rr3 .h1{font-family:var(--up-display);font-size:clamp(40px,6.1vw,86px);line-height:.98;letter-spacing:-.042em;font-weight:800;color:#fff;margin:0}
.hero.rr3 .sub{font-family:var(--up-display);font-size:clamp(20px,2.5vw,32px);font-weight:600;letter-spacing:-.015em;line-height:1.15;color:var(--ac);margin:14px 0 16px;transition:color 1s}
.hero.rr3 .slide p{color:rgba(222,236,255,.8);font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.7;max-width:46ch;margin-bottom:20px}
.hero.rr3 .ticks{gap:10px 22px;font-size:13px;color:#e8f3ff;margin-bottom:28px}
.hero.rr3 .ticks i{background:var(--ac);color:#04112a;font-weight:800;transition:background 1s}

/* word-by-word headline reveal (JS wraps the words) */
.hero.rr3 .h1 .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero.rr3 .h1 .wd>span{display:inline-block;transform:translateY(105%) rotate(4deg);transition:transform .9s var(--up-ease);transition-delay:calc(.12s + var(--k)*.07s)}
.hero.rr3 .slide.on .h1 .wd>span{transform:none}

/* CTAs */
.hero.rr3 .cta{gap:12px}
.hero.rr3 .cta .btn{position:relative;overflow:hidden;min-width:0;width:auto;margin:0;flex:0 0 auto;height:54px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:650;letter-spacing:-.005em;will-change:transform}
.hero.rr3 .cta .b1{background:linear-gradient(135deg,#fff,#dcefff);border-color:transparent;color:#06214f;box-shadow:0 14px 34px -10px color-mix(in srgb,var(--ac) 70%,transparent),0 0 0 1px rgba(255,255,255,.4) inset}
.hero.rr3 .cta .b1 i{filter:none}
.hero.rr3 .cta .b1::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transition:left .7s var(--up-ease)}
.hero.rr3 .cta .b1:hover::after{left:130%}
.hero.rr3 .cta .b1:hover{background:linear-gradient(135deg,#fff,#c9e6ff);border-color:transparent}
.hero.rr3 .cta .b2{background:var(--up-glass);border:1px solid var(--up-line);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero.rr3 .cta .b2:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}

/* Stage: 3D tilt layer */
.hero.rr3 .vis{height:clamp(300px,31vw,450px);transform:none;perspective:1300px;transition:none;overflow:visible}
.hero.rr3 .slide.on .vis{transform:none}
.hero.rr3 .vis-in{position:absolute;inset:0;transform-style:preserve-3d;
 transform:rotateX(calc(var(--py,0)*-5deg)) rotateY(calc(var(--px,0)*8deg));transition:transform .35s ease-out}
.hero.rr3 .vis::before{content:"";position:absolute;left:8%;right:8%;top:12%;bottom:6%;border-radius:50%;z-index:-1;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 42%,transparent),transparent);filter:blur(36px);opacity:.75;transition:background 1s}
.hero.rr3 .vis-in>*{transition:transform 1.05s var(--up-ease),opacity .8s ease,filter .9s ease}
.hero.rr3 .slide:not(.on) .vis-in>*{opacity:0;filter:blur(14px);transform:translate3d(60px,18px,0) scale(.9) rotateY(-14deg)}

.hero.rr3 .vis .ph1{position:absolute;inset:4% 0 8% 0;width:100%;max-width:100%;height:88%;object-fit:cover;object-position:6% 50%;border-radius:30px;
 -webkit-mask-image:none;mask-image:none;border:1px solid var(--up-line);transform:translateZ(30px);
 box-shadow:0 50px 80px -30px rgba(0,0,0,.65),0 0 0 8px rgba(255,255,255,.05)}
.hero.rr3 .panel{position:absolute;inset:0;overflow:visible;transform-style:preserve-3d;height:auto;margin:0;padding:0;display:block;background:none;border:0;box-shadow:none;border-radius:0}
.hero.rr3 .panel img{position:absolute;max-width:none;object-fit:cover;border-radius:26px;background:#eef3f9;border:1px solid rgba(255,255,255,.35);
 box-shadow:0 44px 70px -26px rgba(0,0,0,.7)}
.hero.rr3 .panel img:nth-of-type(1){left:2%;top:2%;width:50%;height:84%;transform:translateZ(40px) rotate(-3deg)}
.hero.rr3 .panel img:nth-of-type(2){right:0;bottom:2%;width:56%;height:62%;transform:translateZ(110px) rotate(3deg)}
.hero.rr3 .slide:not(.on) .panel img:nth-of-type(1){transform:translate3d(-40px,20px,0) rotate(-9deg) scale(.9)}
.hero.rr3 .slide:not(.on) .panel img:nth-of-type(2){transform:translate3d(60px,30px,0) rotate(8deg) scale(.9)}
.hero.rr3 .chip{position:absolute;right:-1%;top:auto;bottom:3%;left:auto;z-index:4;background:rgba(4,17,42,.88);color:#fff;border:1px solid rgba(255,255,255,.32);
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;padding:11px 16px;font-family:var(--up-display);font-size:13px;font-weight:700;letter-spacing:.02em;
 transform:translateZ(150px) rotate(-3deg);box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.hero.rr3 .chip::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ac);margin-right:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 28%,transparent);vertical-align:1px}
.hero.rr3 .chip br{display:none}
.hero.rr3 .chip{white-space:nowrap}

/* Thermostat dial = slide progress, restarts every time a slide becomes active */
.dial{position:absolute;left:-14px;bottom:-12px;width:96px;height:96px;z-index:5;border-radius:50%;display:grid;place-items:center;
 background:rgba(6,20,46,.6);border:1px solid var(--up-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateZ(160px);box-shadow:0 22px 44px -16px rgba(0,0,0,.65)}
.dial::before{content:"";position:absolute;inset:7px;border-radius:50%;
 background:repeating-conic-gradient(from -1.5deg,rgba(255,255,255,.4) 0 1.2deg,transparent 1.2deg 7.5deg);
 -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 74%,transparent 75%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 74%,transparent 75%)}
.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:3.2;stroke-linecap:round;r:44px}
.dial .tk{stroke:rgba(255,255,255,.12)}
.dial .ar{stroke:var(--ac);stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 5px var(--ac))}
.slide.on .dial .ar{animation:up-arc var(--dur,6000ms) linear forwards}
.hero.paused .dial .ar{animation-play-state:paused}
@keyframes up-arc{to{stroke-dashoffset:0}}
.dial b{position:relative;font-family:var(--up-display);font-size:25px;font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff}
.dial small{position:absolute;bottom:23px;font-size:8.5px;letter-spacing:.06em;color:rgba(255,255,255,.6)}

/* Rail (replaces the dots) — sits in a .w wrapper so it aligns with the text column */
.hero.rr3 .rail{position:absolute;left:0;right:0;bottom:92px;margin-inline:auto;z-index:3;display:flex;align-items:flex-end;gap:clamp(16px,3vw,48px);pointer-events:none}
.hero.rr3 .dots{position:static;transform:none;flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.6vw,22px);padding:0;width:auto}
.hero.rr3 .dots button{pointer-events:auto}
.hero.rr3 .rail-ar{display:flex;gap:10px;pointer-events:auto;flex:none}
.hero.rr3 .dots button,.hero.rr3 .dots button.on{position:relative;width:auto;height:auto;min-height:0;min-width:0;border-radius:0;background:none;text-align:left;
 padding:14px 0 0;display:flex;flex-direction:column;gap:3px;color:rgba(214,230,255,.55);font:inherit;border:0;border-top:2px solid rgba(255,255,255,.16);cursor:pointer;transition:color .4s}
.hero.rr3 .dots button::after{content:"";position:absolute;inset:-2px auto auto 0;height:2px;width:0;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.hero.rr3 .dots button.on::after{animation:fill var(--dur,6000ms) linear forwards}
.hero.paused .dots button.on::after{animation-play-state:paused}
.hero.rr3 .dots button:hover{color:#fff}
.hero.rr3 .dots button.on{color:#fff}
.hero.rr3 .dots .n{font-family:var(--up-display);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ac)}
.hero.rr3 .dots .l{font-size:clamp(12px,1.15vw,14.5px);font-weight:600;line-height:1.25}

/* Arrows */
.hero.rr3 .sa{position:static;transform:none;width:48px;height:48px;min-height:0;background:var(--up-glass);border:1px solid var(--up-line);color:#fff;
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:none;font-size:22px;display:grid;place-items:center}
.hero.rr3 .sa:hover{background:#fff;color:#06214f;transform:scale(1.07)}

/* ---------- Quick finder (floats over the hero's bottom edge) ---------- */
.qs{position:relative;z-index:6;margin-top:-72px;padding:0 0 8px}
.qs .qs-card{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr) auto;align-items:center;gap:18px 28px;background:rgba(255,255,255,.94);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8);border-radius:26px;padding:18px 22px 18px 28px;
 box-shadow:0 40px 70px -28px rgba(4,17,42,.55),0 0 0 1px rgba(10,60,140,.06)}
.qs-h b{display:block;font-family:var(--up-display);font-size:19px;letter-spacing:-.025em;color:var(--navy,#0b2d62)}
.qs-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--mut,#516584);margin-top:4px}
.qs-live i{width:8px;height:8px;border-radius:50%;background:#12a85c;box-shadow:0 0 0 0 rgba(18,168,92,.5);animation:up-pulse 2s infinite}
.qs-live.off i{background:#f5a623;animation:none}
@keyframes up-pulse{70%{box-shadow:0 0 0 9px rgba(18,168,92,0)}100%{box-shadow:0 0 0 0 rgba(18,168,92,0)}}
.qs-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.qs-chips a{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 11px;border-radius:999px;background:#f1f6fd;border:1px solid #dbe7f7;
 font-size:13.5px;font-weight:600;color:var(--navy,#0b2d62);white-space:nowrap;transition:background .25s,border-color .25s,transform .25s var(--up-ease),box-shadow .25s}
.qs-chips a img{width:22px;height:22px;flex:none}
.qs-chips a:hover{background:#fff;border-color:var(--blue,#0a5bd8);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(10,91,216,.45)}
.qs .qs-go{height:50px;padding:0 24px;border-radius:999px;white-space:nowrap}

/* ---------- Page-wide polish ---------- */
.c h2{font-family:var(--up-display);font-size:clamp(26px,3.4vw,40px);letter-spacing:-.035em;line-height:1.08;color:var(--navy,#0b2d62)}
.pill{background:#e6f0ff;color:var(--blue);font-weight:600;letter-spacing:.02em;padding:5px 15px;border:1px solid #d3e3ff}
.sec#services{padding-top:46px}
#services .g4{gap:22px}
#services .card{--cx:50%;--cy:0%;border-radius:24px;border:1px solid #dbe7f7;padding:22px;overflow:hidden;background:#fff;
 transition:transform .5s var(--up-ease),box-shadow .5s,border-color .3s}
#services .card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
 background:radial-gradient(320px circle at var(--cx) var(--cy),rgba(79,170,255,.2),transparent 60%)}
#services .card:hover::before{opacity:1}
#services .card .pr{transition:transform .7s var(--up-ease)}
#services .card:hover .pr{transform:scale(1.07) rotate(-1.5deg)}
#services .card h3{font-family:var(--up-display);font-size:18px;letter-spacing:-.02em;color:var(--navy,#0b2d62)}
.up-rv{opacity:0;transform:translateY(26px)}
.up-rv.up-in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s var(--up-ease);transition-delay:calc(var(--i,0)*70ms)}
.feat .f{border-radius:20px;background:#fff;border:1px solid #dbe7f7;transition:transform .4s var(--up-ease),box-shadow .4s}
.feat .f:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(10,60,140,.4)}
.about .help{background:linear-gradient(160deg,var(--up-deep),var(--up-night));border:0;color:#fff}
.about .help h4,.about .help .num,.about .help small{color:#fff}
.about .help .s{color:rgba(222,236,255,.8)}
.about .ph{box-shadow:0 40px 70px -34px rgba(8,30,80,.55)}
.bm{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
 .qs .qs-card{grid-template-columns:1fr auto}
 .qs-chips{grid-column:1/-1;order:3;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(max-width:900px){
 .hero.rr3 .slide .w{grid-template-columns:1fr;gap:26px;min-height:0;padding-top:46px;padding-bottom:118px}
 .hero.rr3 .vis{height:clamp(260px,72vw,380px);order:2;margin:0 6px}
 .hero.rr3 .h1{font-size:clamp(38px,11vw,56px)}
 .hero.rr3 .slide p{max-width:none}
 .hero.rr3 .cta .btn{flex:1 1 auto;height:52px;padding:0 20px}
 .hero.rr3 .rail{display:none}
 .dial{width:68px;height:68px;left:6px;bottom:-14px}.dial b{font-size:18px}.dial small{display:none}
 .hero.rr3 .chip{right:2%;bottom:-2%;font-size:11.5px;padding:8px 12px}
 .qs{margin-top:-64px}
 .qs .qs-card{grid-template-columns:1fr;padding:18px 16px;border-radius:22px;gap:14px}
 .qs-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;overflow:visible}
 .qs-chips a{flex-direction:column;justify-content:center;gap:6px;height:auto;min-height:74px;padding:10px 4px;border-radius:16px;text-align:center;white-space:normal;line-height:1.2;font-size:12.5px}
 .qs-chips a img{width:26px;height:26px}
 .qs .qs-go{width:100%;order:4}
}
@media(max-width:480px){
 .hero.rr3 .ticks span:nth-child(n+3){display:none}
}
@media(prefers-reduced-motion:reduce){
 .hero.rr3 .h1 .wd>span{transform:none!important}
 .hero.rr3 .slide:not(.on) .vis-in>*{filter:none}
 .up-rv{opacity:1;transform:none}
 .qs-live i{animation:none}
 #up-fx{display:none}
 .dial .ar{animation:none!important;stroke-dashoffset:30}
 .hero.rr3 .dots button.on::after{animation:none;width:100%}
}

/* ---------- Brand page slider v2 (clean, no dead space, compact trust row) ---------- */
.bhs{display:block}
.bhl{display:none;opacity:1;visibility:visible}
.bhl.on{display:block;animation:bhIn .5s ease both}
@keyframes bhIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bhc{justify-content:center;padding:4px 0 18px}
.bscene img[src*="product-ac-split"]{object-fit:contain}
.bhn{position:relative}
@media(max-width:900px){
 .bhl .bw{padding:8px 0 6px;gap:14px}
 .bscene{max-height:300px}
 .bhc{padding:2px 0 16px}
 .bht .w{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:14px;padding-bottom:12px}
 .bti{flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;text-align:center;padding:4px 2px;font-size:12.5px;line-height:1.25;border:0}
 .bti+.bti{border:0}
 .bti svg{width:28px;height:28px}
 .bhn{text-align:left;font-size:11.5px;color:#7a8aa0;padding:4px 0 104px}
}
@media(prefers-reduced-motion:reduce){.bhl.on{animation:none}}

/* ======================================================================
   Brand page slider - FINAL layer (v3). Earlier rules for .bhl/.bw/.bscene in
   inc/template.html fought each other; this block is the single source of truth.
   All slides are stacked in one grid cell, so the height is stable (no page
   jump while auto-rotating) and only the active slide is visible/clickable.
   ====================================================================== */
.bh .bhs{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.bh .bhs>.bhl{display:block;grid-area:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;animation:none;transition:opacity .45s ease,visibility .45s}
.bh .bhs>.bhl.on{opacity:1;visibility:visible;pointer-events:auto;animation:none}
.bh .bhs>.bhl .bhx>*{opacity:1;transform:none;transition:none}
.bh .bhs>.bhl .bw{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,54px);align-items:center;min-height:0;padding:22px 0 26px}
.bh .bhs>.bhl .bw>*{min-width:0}
.bh .bhx h1,.bh .bhx .bhh{font-size:clamp(28px,4.2vw,46px);line-height:1.12;overflow-wrap:anywhere}
.bh .bscene{width:100%;aspect-ratio:16/11;max-height:380px;padding:14px;display:grid;place-items:center;overflow:hidden;box-sizing:border-box}
.bh .bscene img{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply}
.bh .bhc{display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0 18px}
@media(max-width:900px){
 .bh .bhs>.bhl .bw{grid-template-columns:minmax(0,1fr);gap:14px;padding:6px 0 8px}
 .bh .bsub,.bh .bp{display:none}
 .bh .bhx h1,.bh .bhx .bhh{font-size:clamp(25px,7.2vw,34px)}
 .bh .bks{margin:10px 0 14px;display:grid;gap:6px}
 .bh .bks li{font-size:15px;line-height:1.3}
 .bh .bks li:nth-child(n+4){display:none}
 .bh .bscene{aspect-ratio:16/10;max-height:230px;padding:10px;border-radius:18px}
 .bh .bc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .bh .bc .btn{justify-content:center;text-align:center;padding-left:10px;padding-right:10px;min-width:0}
}
@media(max-width:380px){.bh .bc{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.bh .bhs>.bhl{transition:none}}
@media(max-width:900px){
 .bh .bv.ls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .bh .bv.ls>div{min-width:0;padding:10px;gap:8px}
 .bh .bv.ls em{flex:none;width:28px;height:28px;font-size:14px}
 .bh .bv.ls b{font-size:13.5px;line-height:1.25}
}

/* Home hero (tablet/phone): keep the "30 day service warranty" badge fully inside the screen. */
@media(max-width:900px){
 .hero .vis{overflow:visible}
 .hero .vis .chip{right:12px;left:auto;max-width:calc(100% - 24px);white-space:normal;text-align:center}
}

/* ======================================================================
   SERVICE CARDS v4 - "concierge" cards (home #services).
   Same markup (.card > .top2 > img.ic + img.pr, h3, p, a.vd) so Admin-added services,
   Media Library images and the card_img() helper keep working. Pure CSS + one trust strip.
   ====================================================================== */
#services .g4{counter-reset:svc;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
#services .g4>.card{--ac:#2f86ff;--ac-soft:#e8f2ff;--ac-ink:#0b4fc4;counter-increment:svc;display:flex;flex-direction:column;padding:12px 12px 20px;border-radius:26px;border:1px solid #e3ebf6;background:#fff;
 box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(11,38,80,.04),0 14px 34px -18px rgba(11,38,80,.22);overflow:hidden;
 transition:transform .45s var(--up-ease),box-shadow .45s,border-color .3s}
#services .g4>.card:nth-child(6n+2){--ac:#5b6cff;--ac-soft:#eceeff;--ac-ink:#3544d6}
#services .g4>.card:nth-child(6n+3){--ac:#12a594;--ac-soft:#e3f7f3;--ac-ink:#0a7a6d}
#services .g4>.card:nth-child(6n+4){--ac:#f29a0c;--ac-soft:#fff3dc;--ac-ink:#a8620a}
#services .g4>.card:nth-child(6n+5){--ac:#0ea5e9;--ac-soft:#e2f4fd;--ac-ink:#0a6e9c}
#services .g4>.card:nth-child(6n+6){--ac:#ec6a43;--ac-soft:#ffebe4;--ac-ink:#b4411f}
#services .g4>.card::before{inset:0;height:auto;border-radius:inherit;background:radial-gradient(360px circle at var(--cx) var(--cy),color-mix(in srgb,var(--ac) 14%,transparent),transparent 62%)}
@media(hover:hover) and (pointer:fine){#services .g4>.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac) 38%,#e3ebf6);box-shadow:0 1px 2px rgba(11,38,80,.05),0 30px 50px -22px color-mix(in srgb,var(--ac) 45%,transparent)}}
/* image stage */
#services .g4>.card .top2{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;isolation:isolate;height:auto;aspect-ratio:16/10;margin:0 0 18px;padding:14px;border-radius:18px;overflow:hidden;
 background:radial-gradient(70% 60% at 50% 92%,rgba(255,255,255,.95),transparent 70%),linear-gradient(155deg,var(--ac-soft),#fff 85%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 12%,transparent)}
#services .g4>.card .top2 .pr{width:auto;height:auto;max-width:78%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;filter:none;transform-origin:50% 90%}
#services .g4>.card:hover .top2 .pr{transform:scale(1.06) translateY(-2px)}
#services .g4>.card .top2 .ic{position:absolute;left:12px;top:12px;width:42px;height:42px;padding:9px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 6px 14px -6px color-mix(in srgb,var(--ac) 55%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--ac) 18%,transparent);backdrop-filter:blur(6px);object-fit:contain}
#services .g4>.card .top2::after{content:counter(svc,decimal-leading-zero);position:absolute;right:14px;top:14px;font:600 12px/1 var(--up-display,Manrope,sans-serif);letter-spacing:.14em;color:var(--ac-ink);opacity:.7}
/* photo plate: product photos are opaque, so they fill the stage instead of floating in a tinted box */
#services .g4>.card .top2{padding:0!important;height:auto!important;min-height:0!important;aspect-ratio:4/3!important;background:var(--ac-soft)}
#services .g4>.card .top2 .pr{position:absolute!important;inset:0!important;z-index:0;display:block!important;flex:none!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;mix-blend-mode:normal!important;border-radius:0!important;box-shadow:none!important;transform-origin:50% 60%}
#services .g4>.card .top2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.0) 55%,color-mix(in srgb,var(--ac) 22%,transparent) 100%),linear-gradient(180deg,rgba(8,26,56,.10),transparent 38%)}
#services .g4>.card .top2 .ic{z-index:2}
#services .g4>.card .top2::after{z-index:2;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.9);opacity:1;right:12px;top:14px;box-shadow:0 4px 12px -6px rgba(8,26,56,.35)}
#services .g4>.card:hover .top2 .pr{transform:scale(1.05)}
/* copy */
#services .g4>.card h3{margin:0 10px;font-size:clamp(17px,1.5vw,19.5px);line-height:1.25;letter-spacing:-.022em;color:#0d2547}
#services .g4>.card p{margin:8px 10px 0;min-height:0;font-size:14px;line-height:1.6;color:#5f7089;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#services .g4>.card p::after{content:none}
/* link row */
#services .g4>.card a.vd{margin:auto 10px 0;padding:14px 0 0;border-radius:0;background:none;border-top:1px solid #edf2f8;display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700;letter-spacing:.005em;color:var(--ac-ink);transition:color .25s,gap .25s}
#services .g4>.card p+a.vd{margin-top:18px}
#services .g4>.card a.vd:hover{background:none;color:var(--ac-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
#services .g4>.card a.vd:focus-visible::after{border-radius:26px;outline-offset:-3px}
/* trust strip */
.svc-trust{list-style:none;margin:30px 0 0;padding:18px 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 22px;text-align:left;border:1px solid #e3ebf6;border-radius:22px;background:linear-gradient(180deg,#fff,#f6faff);box-shadow:0 14px 34px -24px rgba(11,38,80,.3)}
.svc-trust li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;min-width:0}
.svc-trust i{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e6f6ee;color:#12915a;font-style:normal;font-weight:800;font-size:15px}
.svc-trust b{font-size:14px;color:#0d2547;line-height:1.25}
.svc-trust span{font-size:12.5px;color:#66778f;line-height:1.35}
@media(max-width:1000px){#services .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.svc-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
 #services .g4{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:24px}
 #services .g4>.card{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:14px;align-items:start;padding:10px;border-radius:22px}
 #services .g4>.card .top2{grid-row:1/4;grid-column:1;aspect-ratio:1/1!important;margin:0;padding:0!important;border-radius:16px;align-self:start}
 #services .g4>.card .top2 .pr{max-width:88%}
 #services .g4>.card .top2 .ic{display:none!important}
 #services .g4>.card .top2::after{display:none}
 #services .g4>.card h3{grid-column:2;margin:2px 4px 0 0;font-size:16.5px}
 #services .g4>.card p{grid-column:2;margin:5px 4px 0 0;font-size:13px;line-height:1.5;-webkit-line-clamp:2}
 #services .g4>.card a.vd,#services .g4>.card p+a.vd{grid-column:2;margin:10px 4px 0 0;padding-top:10px}
 .svc-trust{grid-template-columns:1fr 1fr;padding:14px;gap:12px 10px;border-radius:18px}
 .svc-trust li{grid-template-columns:1fr;row-gap:6px;justify-items:start}
 .svc-trust i{grid-row:auto;width:28px;height:28px;font-size:13px}
 .svc-trust b{font-size:13px}.svc-trust span{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){#services .g4>.card,#services .g4>.card .top2 .pr{transition:none}#services .g4>.card:hover .top2 .pr{transform:none}}

/* Transparent product cut-outs (AC) sit inside the tinted stage instead of being cropped */
#services .g4>.card .top2 .pr[src*="product-ac-split"]{object-fit:contain!important;padding:9% 5% 12%;box-sizing:border-box!important;filter:drop-shadow(0 18px 18px rgba(11,45,98,.18))}