/* =========================================================
   BCB GROUP 2026
   SERVICII — PREMIUM PAGE
========================================================= */

.services26-page{
  background:#f7f3eb;
  color:#202429;
  overflow:hidden;
}

.services26-label{
  margin-bottom:17px;
  color:#a17016;
  font-size:10px;
  font-weight:950;
  letter-spacing:3.4px;
  text-transform:uppercase;
}

.services26-label-light{
  color:#efc45f;
}


/* =========================================================
   HERO
========================================================= */

.services26-hero{
  min-height:760px;
  position:relative;
  padding:135px 7% 80px;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;

  background:
    linear-gradient(135deg,#fcfaf6 0%,#f4efe6 48%,#e9e2d5 100%);
}

.services26-hero-grid{
  position:absolute;
  inset:0;
  z-index:-4;
  opacity:.62;

  background-image:
    linear-gradient(rgba(28,33,38,.038) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,33,38,.038) 1px,transparent 1px);

  background-size:48px 48px;
}

.services26-hero-glow{
  position:absolute;
  width:720px;
  height:720px;
  right:-220px;
  top:-220px;
  z-index:-3;
  border-radius:50%;

  background:
    radial-gradient(circle,rgba(230,187,86,.30),rgba(207,148,31,.08) 44%,transparent 72%);
}

.services26-hero-inner{
  width:100%;
  max-width:1500px;
  margin:auto;

  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:70px;
  align-items:center;
}

.services26-hero-copy{
  max-width:710px;
  position:relative;
  z-index:5;
}

.services26-eyebrow{
  margin-bottom:25px;
  display:flex;
  align-items:center;
  gap:13px;

  color:#84621d;
  font-size:10px;
  font-weight:950;
  letter-spacing:3.3px;
  text-transform:uppercase;
}

.services26-eyebrow > span{
  width:42px;
  height:2px;
  display:block;
  border-radius:20px;

  background:linear-gradient(90deg,#efca68,#b8750b);
}

.services26-hero h1{
  margin:0;
  color:#181c20;

  font-size:clamp(56px,5.15vw,82px);
  font-weight:950;
  line-height:.96;
  letter-spacing:-3.6px;
}

.services26-hero h1 strong{
  display:block;
  color:transparent;

  background:linear-gradient(105deg,#a96a08,#e1a72e 50%,#91600d);
  background-clip:text;
  -webkit-background-clip:text;
}

.services26-hero-text{
  max-width:620px;
  margin-top:27px;

  color:#646a70;
  font-size:17px;
  line-height:1.75;
}

.services26-hero-actions{
  margin-top:34px;
  display:flex;
  align-items:center;
  gap:13px;
}

.services26-hero-proof{
  max-width:590px;
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;

  border:1px solid rgba(255,255,255,.82);
  border-radius:19px;

  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px);

  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 38px rgba(30,35,40,.07);
}

.services26-hero-proof > div{
  min-height:84px;
  padding:17px 18px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  position:relative;
}

.services26-hero-proof > div +
.services26-hero-proof > div::before{
  content:"";
  position:absolute;
  left:0;
  top:20%;
  width:1px;
  height:60%;

  background:
    linear-gradient(transparent,rgba(195,132,20,.28),transparent);
}

.services26-hero-proof strong{
  color:#22272b;
  font-size:22px;
  font-weight:950;
}

.services26-hero-proof span{
  margin-top:3px;
  color:#81868a;
  font-size:9px;
  font-weight:800;
}


/* =========================================================
   HERO VISUAL / ORBITS
========================================================= */

.services26-hero-visual{
  min-height:540px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.services26-tech-panel{
  width:min(100%,560px);
  aspect-ratio:1;
  position:relative;

  border:1px solid rgba(25,30,35,.075);
  border-radius:42px;

  background:
    linear-gradient(rgba(35,40,45,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,40,45,.045) 1px,transparent 1px),
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(233,228,216,.68));

  background-size:
    32px 32px,
    32px 32px,
    auto;

  box-shadow:
    inset 0 1px 0 #fff,
    0 45px 95px rgba(25,30,35,.11);
}

.services26-tech-circle{
  position:absolute;
  inset:14%;
  border-radius:50%;
  border:1px solid rgba(198,141,27,.28);

  box-shadow:
    0 0 0 42px rgba(198,141,27,.028),
    0 0 0 84px rgba(198,141,27,.018);
}

.services26-tech-logo{
  width:215px;
  padding:25px;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  border:1px solid rgba(255,255,255,.95);
  border-radius:27px;

  background:
    linear-gradient(145deg,#fff,#eee7da);

  box-shadow:
    inset 0 1px 0 #fff,
    0 25px 55px rgba(28,33,38,.14);
}

.services26-tech-logo img{
  width:100%;
  display:block;
}

.services26-orbit{
  min-width:145px;
  min-height:55px;
  padding:10px 13px;

  position:absolute;

  display:flex;
  align-items:center;
  gap:10px;

  border:1px solid rgba(255,255,255,.92);
  border-radius:15px;

  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);

  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 34px rgba(25,30,35,.10);

  color:#2b3035;
  font-size:11px;
  font-weight:900;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.services26-orbit:hover{
  transform:translateY(-5px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 23px 45px rgba(25,30,35,.14);
}

.services26-orbit i{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  font-size:13px;
}

.services26-orbit-construct{
  left:-2%;
  top:18%;
}

.services26-orbit-electric{
  right:-3%;
  top:22%;
}

.services26-orbit-sanitary{
  left:0;
  bottom:17%;
}

.services26-orbit-finish{
  right:2%;
  bottom:14%;
}

.services26-orbit-construct i{
  color:#8d5a0b;
  background:#f0dda8;
}

.services26-orbit-electric i{
  color:#1170ad;
  background:#d9effc;
}

.services26-orbit-sanitary i{
  color:#08766f;
  background:#d8f4ef;
}

.services26-orbit-finish i{
  color:#88472a;
  background:#f1dacb;
}


/* =========================================================
   INTRO
========================================================= */

.services26-intro{
  min-height:500px;
  position:relative;
  padding:110px 7%;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:90px;
  align-items:center;

  background:
    linear-gradient(135deg,#fcfbf8,#f1ece3);
}

.services26-intro-heading h2,
.services26-system h2,
.services26-process-heading h2,
.services26-cta h2{
  color:#181c20;

  font-size:clamp(42px,4.2vw,64px);
  font-weight:950;
  line-height:1.03;
  letter-spacing:-2.6px;
}

.services26-intro-heading h2 span,
.services26-process-heading h2 span,
.services26-cta h2 span{
  display:block;
  color:transparent;

  background:
    linear-gradient(110deg,#ac6d09,#dda42c,#93600b);

  background-clip:text;
  -webkit-background-clip:text;
}

.services26-intro-copy p{
  color:#6b7075;
  font-size:15px;
  line-height:1.82;
}

.services26-intro-copy p + p{
  margin-top:17px;
}


/* =========================================================
   SERVICE SECTIONS
========================================================= */

.services26-divisions{
  background:#f7f3eb;
}

.services26-service{
  min-height:660px;
  padding:90px 7%;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:75px;
  align-items:center;

  position:relative;

  --service-accent:#bd861b;
  --service-soft:#f3e3b5;
  --service-rgb:189,134,27;
}

.services26-service:nth-child(even){
  background:rgba(255,255,255,.50);
}

.services26-service-reverse
.services26-service-visual{
  order:2;
}

.services26-service-reverse
.services26-service-copy{
  order:1;
}

.services26-service-electric{
  --service-accent:#258fd6;
  --service-soft:#dff3ff;
  --service-rgb:37,143,214;
}

.services26-service-sanitary{
  --service-accent:#15958f;
  --service-soft:#ddf7f3;
  --service-rgb:21,149,143;
}

.services26-service-finish{
  --service-accent:#b56e48;
  --service-soft:#f5e1d5;
  --service-rgb:181,110,72;
}

.services26-service-visual{
  min-height:480px;
  position:relative;
}

.services26-service-number{
  position:absolute;
  right:4%;
  top:-30px;

  color:rgba(30,35,40,.045);
  font-size:150px;
  font-weight:950;
  line-height:1;
  letter-spacing:-11px;
}

.services26-service-art{
  min-height:440px;
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(25,30,35,.07);
  border-radius:32px;

  background:
    radial-gradient(circle at 50% 45%,rgba(var(--service-rgb),.18),transparent 37%),
    linear-gradient(145deg,#fff,#eee9df);

  box-shadow:
    inset 0 1px 0 #fff,
    0 24px 50px rgba(25,30,35,.09),
    0 58px 110px rgba(25,30,35,.10);
}

.services26-art-grid{
  position:absolute;
  inset:0;
  opacity:.50;

  background-image:
    linear-gradient(rgba(35,40,45,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,40,45,.045) 1px,transparent 1px);

  background-size:34px 34px;
}

.services26-art-grid::before,
.services26-art-grid::after{
  content:"";
  position:absolute;
  border:1px solid rgba(var(--service-rgb),.25);
  border-radius:50%;
}

.services26-art-grid::before{
  width:310px;
  height:310px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.services26-art-grid::after{
  width:230px;
  height:230px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.services26-art-icon{
  width:150px;
  height:150px;

  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:38px;

  color:var(--service-accent);
  background:var(--service-soft);

  box-shadow:
    inset 5px 5px 10px rgba(255,255,255,.82),
    inset -6px -6px 12px rgba(0,0,0,.035),
    0 28px 55px rgba(var(--service-rgb),.20);

  font-size:60px;

  transform:
    rotateX(7deg)
    rotateY(-7deg);
}

.services26-art-tag{
  position:absolute;
  left:24px;
  bottom:22px;

  padding:10px 12px;

  border-radius:11px;

  color:var(--service-accent);
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.92);

  font-size:8px;
  font-weight:950;
  letter-spacing:1.8px;
}

.services26-service-copy{
  max-width:600px;
}

.services26-kicker{
  margin-bottom:15px;

  color:var(--service-accent);

  font-size:9px;
  font-weight:950;
  letter-spacing:2.7px;
  text-transform:uppercase;
}

.services26-service-copy h2{
  margin:0;

  color:#20252a;
  font-size:clamp(44px,4.2vw,64px);
  font-weight:950;
  line-height:.98;
  letter-spacing:-2.5px;
}

.services26-service-copy h2 span{
  display:block;
  color:var(--service-accent);
}

.services26-service-lead{
  margin-top:22px;

  color:#6c7176;
  font-size:15px;
  line-height:1.78;
}

.services26-service-list{
  margin-top:26px;
  display:grid;
  gap:10px;
}

.services26-service-list > div{
  min-height:42px;
  padding:0 13px;

  display:flex;
  align-items:center;
  gap:10px;

  border:1px solid rgba(25,30,35,.065);
  border-radius:11px;

  color:#3f4449;
  background:rgba(255,255,255,.62);

  font-size:12px;
  font-weight:800;
}

.services26-service-list i{
  width:23px;
  height:23px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:50%;

  color:var(--service-accent);
  background:rgba(var(--service-rgb),.11);

  font-size:8px;
}

.services26-service-link{
  margin-top:27px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  color:#2f3439;

  font-size:10px;
  font-weight:950;
  letter-spacing:.45px;
  text-transform:uppercase;
}

.services26-service-link i{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  color:var(--service-accent);
  background:#fff;

  box-shadow:
    0 8px 18px rgba(25,30,35,.08);

  transition:transform .3s ease;
}

.services26-service-link:hover i{
  transform:translateX(5px);
}


/* =========================================================
   SYSTEM DARK
========================================================= */

.services26-system{
  min-height:650px;
  padding:110px 7%;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:75px;
  align-items:center;

  position:relative;
  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(circle at 15% 14%,rgba(255,255,255,.07),transparent 28%),
    radial-gradient(circle at 87% 18%,rgba(208,155,36,.10),transparent 24%),
    linear-gradient(135deg,#23282d,#111418);
}

.services26-system::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;

  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

  background-size:52px 52px;
}

.services26-system-copy,
.services26-system-grid{
  position:relative;
  z-index:2;
}

.services26-system h2{
  color:#fff;
}

.services26-system h2 span{
  display:block;
  color:#e7bd59;
}

.services26-system-copy > p:not(.services26-label){
  max-width:610px;
  margin-top:23px;

  color:#c4c8cc;
  font-size:15px;
  line-height:1.8;
}

.services26-system-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.services26-system-item{
  min-height:190px;
  padding:23px;

  position:relative;

  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.028));

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055);

  backdrop-filter:blur(14px);
}

.services26-system-item > span{
  position:absolute;
  right:15px;
  top:12px;

  color:rgba(255,255,255,.06);

  font-size:48px;
  font-weight:950;
}

.services26-system-item > i{
  width:49px;
  height:49px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  color:#1d1608;

  background:
    linear-gradient(145deg,#efc969,#b8780d);

  font-size:17px;
}

.services26-system-item strong{
  display:block;
  margin-top:18px;

  color:#fff;
  font-size:17px;
}

.services26-system-item p{
  margin-top:6px;

  color:#bcc1c5;
  font-size:11px;
  line-height:1.55;
}


/* =========================================================
   PROCESS
========================================================= */

.services26-process{
  padding:110px 7% 125px;

  background:
    linear-gradient(135deg,#f4efe6,#faf8f4);
}

.services26-process-heading{
  max-width:800px;
  margin-bottom:48px;
}

.services26-process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.services26-process-step{
  min-height:280px;
  padding:25px 22px;

  position:relative;

  border:1px solid rgba(25,30,35,.07);
  border-radius:23px;

  background:
    linear-gradient(145deg,#fff,#f1ede4);

  box-shadow:
    inset 0 1px 0 #fff,
    0 17px 38px rgba(22,27,32,.07);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.services26-process-step:hover{
  transform:translateY(-8px);

  box-shadow:
    inset 0 1px 0 #fff,
    0 24px 47px rgba(22,27,32,.10);
}

.services26-process-step > strong{
  color:rgba(30,35,40,.08);
  font-size:52px;
  line-height:1;
}

.services26-process-step > i{
  width:58px;
  height:58px;

  margin-top:17px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:17px;

  color:#96620e;
  background:#f0dda7;

  font-size:20px;
}

.services26-process-step h3{
  margin-top:20px;

  color:#272c31;
  font-size:20px;
}

.services26-process-step p{
  margin-top:8px;

  color:#74797d;
  font-size:12px;
  line-height:1.6;
}


/* =========================================================
   CTA
========================================================= */

.services26-cta{
  min-height:500px;
  position:relative;

  padding:95px 7%;

  display:grid;
  grid-template-columns:1fr .65fr;
  gap:70px;
  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(135deg,#fff,#f1ece2);
}

.services26-cta-grid{
  position:absolute;
  inset:0;
  opacity:.34;

  background-image:
    linear-gradient(rgba(28,33,38,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,33,38,.035) 1px,transparent 1px);

  background-size:42px 42px;
}

.services26-cta-copy{
  position:relative;
  z-index:2;
}

.services26-cta-copy > p:not(.services26-label){
  max-width:610px;
  margin-top:20px;

  color:#6b7075;
  font-size:15px;
  line-height:1.75;
}

.services26-cta-actions{
  margin-top:29px;
  display:flex;
  align-items:center;
  gap:13px;
}

.services26-phone-btn{
  min-height:56px;
  padding:0 23px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:1px solid rgba(25,30,35,.08);
  border-radius:14px;

  color:#30353a;
  background:#fff;

  box-shadow:
    0 12px 28px rgba(20,24,28,.07);

  font-size:12px;
  font-weight:950;
}

.services26-cta-logo{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:center;
}

.services26-cta-logo img{
  width:min(100%,390px);

  filter:
    drop-shadow(0 28px 34px rgba(20,24,28,.12));
}


/* =========================================================
   WHATSAPP
========================================================= */

.services26-whatsapp{
  width:54px;
  height:54px;

  position:fixed;
  right:21px;
  bottom:21px;
  z-index:4200;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:17px;

  color:#fff;
  background:#25d366;

  box-shadow:
    0 15px 35px rgba(37,211,102,.28);

  font-size:24px;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.services26-whatsapp:hover{
  transform:
    translateY(-5px)
    scale(1.04);

  box-shadow:
    0 22px 44px rgba(37,211,102,.34);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .services26-hero-inner{
    grid-template-columns:1fr .9fr;
    gap:35px;
  }

  .services26-tech-panel{
    max-width:490px;
  }

  .services26-service{
    gap:45px;
  }

  .services26-process-grid{
    grid-template-columns:1fr 1fr;
  }

}


@media(max-width:850px){

  .services26-hero{
    min-height:auto;
    padding:115px 6% 75px;
  }

  .services26-hero-inner{
    grid-template-columns:1fr;
    gap:45px;
  }

  .services26-hero h1{
    max-width:700px;
    font-size:clamp(48px,9vw,68px);
  }

  .services26-hero-visual{
    min-height:500px;
  }

  .services26-tech-panel{
    width:min(90%,520px);
  }

  .services26-intro{
    padding:90px 6%;
    grid-template-columns:1fr;
    gap:34px;
  }

  .services26-service{
    min-height:auto;
    padding:80px 6%;
    grid-template-columns:1fr;
    gap:42px;
  }

  .services26-service-reverse
  .services26-service-visual,
  .services26-service-reverse
  .services26-service-copy{
    order:initial;
  }

  .services26-service-visual{
    min-height:400px;
  }

  .services26-service-art{
    min-height:390px;
  }

  .services26-system{
    padding:90px 6%;
    grid-template-columns:1fr;
    gap:45px;
  }

  .services26-process,
  .services26-cta{
    padding-left:6%;
    padding-right:6%;
  }

  .services26-cta{
    grid-template-columns:1fr;
    gap:42px;
  }

  .services26-cta-logo{
    justify-content:flex-start;
  }

  .services26-cta-logo img{
    width:260px;
  }

}


@media(max-width:600px){

  .services26-hero{
    padding:105px 5% 65px;
  }

  .services26-eyebrow{
    font-size:8px;
    letter-spacing:2.1px;
  }

  .services26-eyebrow > span{
    width:29px;
  }

  .services26-hero h1{
    font-size:43px;
    letter-spacing:-2px;
  }

  .services26-hero-text{
    font-size:14px;
  }

  .services26-hero-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .services26-hero-actions a{
    width:100%;
  }

  .services26-hero-proof{
    grid-template-columns:1fr;
  }

  .services26-hero-proof > div{
    min-height:62px;
  }

  .services26-hero-proof > div +
  .services26-hero-proof > div::before{
    top:0;
    left:10%;
    width:80%;
    height:1px;

    background:
      linear-gradient(90deg,transparent,rgba(195,132,20,.25),transparent);
  }

  .services26-hero-visual{
    min-height:390px;
  }

  .services26-tech-panel{
    width:100%;
  }

  .services26-tech-logo{
    width:165px;
    padding:20px;
  }

  .services26-orbit{
    min-width:120px;
    min-height:48px;
    padding:8px 9px;
    font-size:9px;
  }

  .services26-orbit i{
    width:29px;
    height:29px;
    font-size:10px;
  }

  .services26-intro,
  .services26-service,
  .services26-system,
  .services26-process,
  .services26-cta{
    padding-left:5%;
    padding-right:5%;
  }

  .services26-intro-heading h2,
  .services26-system h2,
  .services26-process-heading h2,
  .services26-cta h2{
    font-size:37px;
    letter-spacing:-1.7px;
  }

  .services26-service-copy h2{
    font-size:42px;
    letter-spacing:-1.8px;
  }

  .services26-service-visual{
    min-height:330px;
  }

  .services26-service-art{
    min-height:320px;
    border-radius:24px;
  }

  .services26-art-icon{
    width:115px;
    height:115px;
    border-radius:30px;
    font-size:45px;
  }

  .services26-service-number{
    font-size:100px;
  }

  .services26-system-grid,
  .services26-process-grid{
    grid-template-columns:1fr;
  }

  .services26-cta-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .services26-cta-actions a{
    width:100%;
  }

  .services26-whatsapp{
    width:50px;
    height:50px;
    right:15px;
    bottom:15px;
  }

}