/* ════════════════════════════════════════════════
   UNI GROUPS — Service Landing Pages (shared styles)
   Premium HVAC engineering look. Scoped with .sp- prefix
   so it never collides with the main site styles.
   ════════════════════════════════════════════════ */

:root{
  --sp-navy:#0a1b3d;
  --sp-navy2:#0e2a5c;
  --sp-blue:#116DFF;
  --sp-blue-soft:#eaf1ff;
  --sp-ink:#0f1b2d;
  --sp-gray:#5b6b7f;
  --sp-line:#e6ebf2;
  --sp-bg:#f5f8fc;
  --sp-white:#ffffff;
  --sp-radius:18px;
  --sp-shadow:0 10px 40px rgba(13,37,92,.10);
  --sp-shadow-lg:0 24px 60px rgba(13,37,92,.18);
  --sp-maxw:1180px;
}

*{box-sizing:border-box}
.sp-body{
  margin:0;background:var(--sp-white);color:var(--sp-ink);
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
.sp-wrap{max-width:var(--sp-maxw);margin:0 auto;padding:0 24px}
.sp-body img{max-width:100%;display:block}
a{color:inherit}

/* ───────── Top bar ───────── */
.sp-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sp-line);
}
.sp-nav-inner{
  max-width:var(--sp-maxw);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.sp-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.sp-logo img{height:34px;width:auto}
.sp-nav-right{display:flex;align-items:center;gap:10px}
.sp-back{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--sp-gray);font-size:.86rem;font-weight:500;padding:8px 12px;border-radius:10px;
  transition:background .2s,color .2s;
}
.sp-back:hover{background:var(--sp-blue-soft);color:var(--sp-blue)}
.sp-lang{display:inline-flex;border:1px solid var(--sp-line);border-radius:10px;overflow:hidden}
.sp-lang button{
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;
  padding:7px 11px;color:var(--sp-gray);transition:background .15s,color .15s;
}
.sp-lang button.active{background:var(--sp-blue);color:#fff}

/* ───────── Buttons ───────── */
.sp-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-weight:700;font-size:.92rem;letter-spacing:.2px;text-decoration:none;cursor:pointer;
  padding:14px 26px;border-radius:12px;border:2px solid transparent;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
.sp-btn:hover{transform:translateY(-2px)}
.sp-btn-primary{background:var(--sp-blue);color:#fff;box-shadow:0 8px 22px rgba(17,109,255,.35)}
.sp-btn-primary:hover{background:#0a5be0;box-shadow:0 12px 28px rgba(17,109,255,.45)}
.sp-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.sp-btn-ghost:hover{background:#fff;color:var(--sp-navy);border-color:#fff}
/* on light backgrounds */
.sp-btn-outline{background:#fff;color:var(--sp-blue);border-color:var(--sp-blue)}
.sp-btn-outline:hover{background:var(--sp-blue);color:#fff}

/* ───────── Generic section ───────── */
.sp-section{padding:84px 0}
.sp-section.tight{padding:60px 0}
.sp-eyebrow{
  display:inline-block;font-family:'Roboto Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;font-size:.78rem;color:var(--sp-blue);
  margin-bottom:14px;
}
.sp-eyebrow.on-dark{color:#7fb0ff}
.sp-h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;line-height:1.2;margin:0 0 16px;letter-spacing:-.5px}
.sp-lead{font-size:1.05rem;color:var(--sp-gray);max-width:760px;margin:0}
.sp-prose p{font-size:1.02rem;color:#3a4759;margin:0 0 18px;max-width:820px}
.sp-prose p:last-child{margin-bottom:0}

/* ───────── HERO ───────── */
.sp-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(17,109,255,.35),transparent 60%),
             linear-gradient(160deg,var(--sp-navy) 0%,var(--sp-navy2) 100%);
  color:#fff;
}
.sp-hero-grid{
  max-width:var(--sp-maxw);margin:0 auto;padding:74px 24px 84px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.sp-hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;font-weight:700;letter-spacing:-1px;margin:14px 0 18px}
.sp-hero-intro{font-size:1.08rem;color:rgba(255,255,255,.82);margin:0 0 30px;max-width:560px}
.sp-hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* image / illustration box */
.sp-hero-art{
  position:relative;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);border-radius:22px;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;
}
.sp-hero-art svg{width:100%;height:100%;object-fit:contain}
.sp-hero-art img{width:100%;height:100%;object-fit:contain;border-radius:14px}

/* ───────── Insight cards (3) ───────── */
.sp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.sp-card{
  background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  padding:30px 26px;box-shadow:var(--sp-shadow);position:relative;transition:transform .2s,box-shadow .2s;
}
.sp-card:hover{transform:translateY(-4px);box-shadow:var(--sp-shadow-lg)}
.sp-card-num{font-family:'Roboto Condensed',sans-serif;font-weight:700;color:var(--sp-blue);font-size:1rem;
  width:38px;height:38px;border-radius:10px;background:var(--sp-blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sp-card h3{font-size:1.12rem;font-weight:700;margin:0 0 10px}
.sp-card p{margin:0;color:var(--sp-gray);font-size:.94rem}

/* ───────── Applications ───────── */
.sp-apps{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.sp-app{
  display:inline-flex;align-items:center;gap:9px;background:var(--sp-bg);border:1px solid var(--sp-line);
  border-radius:999px;padding:11px 20px;font-size:.92rem;font-weight:500;color:var(--sp-ink);
}
.sp-app svg{width:16px;height:16px;color:var(--sp-blue);flex:none}

/* ───────── Dark approach section ───────── */
.sp-dark{
  background:radial-gradient(900px 500px at 15% 0%,rgba(17,109,255,.22),transparent 55%),
             linear-gradient(160deg,var(--sp-navy) 0%,#091633 100%);
  color:#fff;
}
.sp-dark .sp-h2{color:#fff}
.sp-dark .sp-lead{color:rgba(255,255,255,.78)}
.sp-dark-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.sp-feat{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px}
.sp-feat li{display:flex;gap:14px;align-items:flex-start}
.sp-feat .tick{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(127,176,255,.18);
  display:flex;align-items:center;justify-content:center;color:#7fb0ff;margin-top:2px}
.sp-feat .tick svg{width:15px;height:15px}
.sp-feat b{display:block;font-size:1rem;margin-bottom:2px}
.sp-feat span.t{color:rgba(255,255,255,.72);font-size:.92rem}

/* ───────── Process (4 steps) ───────── */
.sp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}
.sp-step{position:relative;padding:28px 22px;background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow)}
.sp-step-n{font-family:'Roboto Condensed',sans-serif;font-size:2.1rem;font-weight:700;color:var(--sp-blue);opacity:.25;line-height:1}
.sp-step h4{margin:8px 0 6px;font-size:1.02rem;font-weight:700}
.sp-step p{margin:0;color:var(--sp-gray);font-size:.9rem}

/* ───────── Final CTA ───────── */
.sp-cta{
  background:linear-gradient(135deg,var(--sp-blue) 0%,#0a3fb0 100%);color:#fff;text-align:center;
  border-radius:26px;padding:60px 30px;box-shadow:var(--sp-shadow-lg);
}
.sp-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin:0 0 12px;letter-spacing:-.5px}
.sp-cta p{color:rgba(255,255,255,.86);margin:0 auto 28px;max-width:560px}
.sp-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ───────── Footer ───────── */
.sp-footer{background:#07122b;color:rgba(255,255,255,.66);padding:40px 0;font-size:.9rem}
.sp-footer-inner{max-width:var(--sp-maxw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.sp-footer a{color:#fff;text-decoration:none}
.sp-footer a:hover{color:#7fb0ff}

/* ───────── Reveal anim ───────── */
.sp-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.sp-reveal.in{opacity:1;transform:none}

/* ───────── Responsive ───────── */
@media(max-width:900px){
  .sp-hero-grid{grid-template-columns:1fr;gap:32px;padding:54px 24px 64px}
  .sp-hero-art{aspect-ratio:16/10}
  .sp-grid-3{grid-template-columns:1fr;gap:18px}
  .sp-dark-grid{grid-template-columns:1fr;gap:28px}
  .sp-steps{grid-template-columns:1fr 1fr;gap:16px}
  .sp-section{padding:60px 0}
}
@media(max-width:520px){
  .sp-steps{grid-template-columns:1fr}
  .sp-hero-cta{flex-direction:column}
  .sp-hero-cta .sp-btn{width:100%}
  .sp-cta{padding:44px 20px}
}
@media(prefers-reduced-motion:reduce){
  .sp-reveal{opacity:1;transform:none;transition:none}
  .sp-btn:hover,.sp-card:hover{transform:none}
}