/* ============================================================
   Exclusive Cooling Solutions — inner SERVICE pages
   Loaded after site.css. Reuses the homepage design tokens and
   shared components (.sec .btn .stats .services-grid .faq-*),
   adds only the inner-page specific pieces below.
   ============================================================ */

/* ---------- Sub-hero ---------- */
.svc-hero{position:relative;padding:148px 0 64px;overflow:hidden;border-bottom:1px solid var(--line)}
.svc-hero::before{content:"";position:absolute;inset:0;z-index:0;background:
   radial-gradient(110% 90% at 82% 0%, rgba(30,132,214,.18), transparent 58%),
   radial-gradient(90% 90% at 0% 100%, rgba(248,134,29,.10), transparent 60%)}
.svc-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted-2);margin-bottom:16px;font-weight:500;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:color .25s}
.crumb a:hover{color:var(--ice)}
.crumb i{opacity:.45;font-style:normal}
.crumb span{color:var(--muted-2)}
.svc-hero h1{font-size:clamp(2.25rem,4.6vw,3.55rem);margin:8px 0 16px}
.svc-hero .lead{font-size:1.12rem;color:var(--muted);max-width:40ch;margin-bottom:26px;line-height:1.7}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.svc-hero-fig{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;border:1px solid var(--line-2)}
.svc-hero-fig img{width:100%;height:100%;object-fit:cover}
.svc-hero-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,14,19,.5));pointer-events:none}
.svc-hero-fig .ribbon{position:absolute;left:15px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.2px;font-size:12px;font-weight:500;
  padding:8px 14px;border-radius:999px;background:rgba(8,12,17,.62);backdrop-filter:blur(6px);border:1px solid var(--line-2);color:#fff}
.svc-hero-fig .ribbon svg{width:14px;height:14px;color:var(--ice)}

/* ---------- What's included ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin-top:6px}
.inc{display:flex;gap:14px;align-items:flex-start}
.inc .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(63,200,242,.10);border:1px solid rgba(63,200,242,.22)}
.inc .ic svg{width:18px;height:18px;color:var(--ice)}
.inc b{display:block;font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:.3px;font-size:1.06rem;color:var(--text)}
.inc span{display:block;color:var(--muted);font-size:.95rem;margin-top:3px;line-height:1.55}

/* ---------- Process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px;counter-reset:step}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px 24px 26px;transition:transform .35s var(--ease),border-color .35s}
.step:hover{transform:translateY(-4px);border-color:var(--line-2)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-19px;left:24px;width:42px;height:42px;border-radius:12px;
  background:var(--brand);color:#04121a;display:grid;place-items:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:21px;box-shadow:var(--shadow-sm)}
.step h3{font-size:1.22rem;margin:8px 0 9px}
.step p{color:var(--muted);font-size:.97rem;line-height:1.6}

/* ---------- Split (photo + copy) ---------- */
.svc-split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.svc-split.flip .fig{order:2}
.svc-split .fig{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-2);aspect-ratio:5/4}
.svc-split .fig img{width:100%;height:100%;object-fit:cover}
.svc-split h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:10px 0 14px}
.svc-split p{color:var(--muted);font-size:1.04rem;line-height:1.75}

/* ---------- CTA panel ---------- */
.svc-cta .panel{position:relative;overflow:hidden;border-radius:calc(var(--r) + 4px);border:1px solid var(--line-2);
  background:linear-gradient(135deg,var(--panel-2),var(--ink-2));padding:56px 30px;text-align:center}
.svc-cta .panel::before{content:"";position:absolute;inset:0;background:
  radial-gradient(80% 130% at 50% 0%, rgba(63,200,242,.13), transparent 62%),
  radial-gradient(70% 120% at 50% 100%, rgba(248,134,29,.10), transparent 60%)}
.svc-cta .panel>*{position:relative;z-index:1}
.svc-cta h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:8px 0 12px}
.svc-cta p{color:var(--muted);max-width:54ch;margin:0 auto 26px;line-height:1.7}
.svc-cta .row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ---------- Related services tweak (reuses .services-grid/.svc) ---------- */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .svc-hero{padding:124px 0 52px}
  .svc-hero .wrap{grid-template-columns:1fr;gap:30px}
  .svc-hero-fig{order:-1;aspect-ratio:16/10}
  .inc-grid{grid-template-columns:1fr;gap:16px}
  .steps{grid-template-columns:1fr;gap:30px;margin-top:30px}
  .svc-split{grid-template-columns:1fr;gap:26px}
  .svc-split.flip .fig{order:-1}
  .rel-grid{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1100px){
  .rel-grid{grid-template-columns:repeat(2,1fr)}
}