/*
 * front-services.css
 * Extracted from services.blade.php — UI unchanged.
 */

:root{--brand-purple:#5b1fb5;--brand-purple-dark:#4a189a;--brand-orange:#ff6a3d;--ink:#150a2e;}

body{background:#fff;}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,.8,.3,1),transform .7s cubic-bezier(.16,.8,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--brand-purple),var(--brand-orange));z-index:2000;transition:width .1s linear;}

.eyebrow{  font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--brand-orange);font-weight:700;margin-bottom:16px;}
.eyebrow--center{text-align:center;margin-left:auto;margin-right:auto;}

.grad-text{background:linear-gradient(90deg,#a855f7,var(--brand-orange));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}

.section-title{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--ink);margin-bottom:14px;}
.section-title--center{text-align:center;margin-left:auto;margin-right:auto;max-width:620px;}

.section-lead{color:#6b6478;max-width:640px;line-height:1.6;}

.btn{cursor:pointer;border:none;}
.btn--primary{background:var(--brand-purple);color:#fff;border-radius:10px;padding:13px 26px;font-weight:700;text-decoration:none;display:inline-block;transition:.25s;}
.btn--primary:hover{background:var(--brand-purple-dark);transform:translateY(-2px);}
.btn--lg{padding:15px 30px;}

.btn--outline{border:2px solid var(--brand-purple);color:var(--brand-purple);border-radius:10px;padding:11px 24px;font-weight:700;text-decoration:none;background:#fff;transition:.25s;display:inline-block;}
/* .btn--outline:hover{background:var(--brand-purple);color:#fff;} */

.btn--outline--light {border-color: rgba(255,255,255,.7);color: #fff;background: transparent;}
/* .btn--outline--light:hover{background:#fff;color:var(--brand-purple);} */

/* ===== HERO ===== */
/* use dvh (dynamic viewport height) on mobile to prevent address-bar-triggered jumps */
/* ===== HERO IMAGE SLIDER ===== */
.serv-hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1351 / 481;
  min-height: 420px;
  max-height: 680px;
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  isolation: isolate;
}

/* Slides wrapper */
.serv-hero__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Individual slide */
.serv-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .85s ease-in-out;
  overflow: hidden;
}
.serv-hero__slide.is-active { opacity: 1; z-index: 1; }

/* Background image */
.serv-hero__slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay */
.serv-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.68) 100%); */
  z-index: 1;
}

/* Content sits above slides */
.serv-hero__content {
  position: relative;
  z-index: 2;
  padding: 60px 20px 70px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Arrows */
.serv-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.serv-hero__arrow:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.8);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.serv-hero__arrow--prev { left: 20px; }
.serv-hero__arrow--next { right: 20px; }

/* Dots */
.serv-hero__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.serv-hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s, border-color .3s, width .3s;
}
.serv-hero__dot.is-active {
  background: #fff;
  border-color: #fff;
  width: 26px;
  border-radius: 5px;
}

/* Progress bar */
.serv-hero__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.15);
  z-index: 3;
}
.serv-hero__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--brand-orange, #ff6a3d);
  transition: width linear;
}

/* Scroll cue */
.serv-hero__scroll-cue { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 44px; width: 18px; z-index: 3; }
.serv-hero__scroll-dot  { animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 0% { transform:translateY(0);opacity:1; } 70% { transform:translateY(10px);opacity:0; } 100% { transform:translateY(0);opacity:0; } }

/* Badge, heading, lead, cta, stats */
.serv-hero__badge { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;margin-bottom:22px; }
.serv-hero__badge .dot { width:7px;height:7px;border-radius:50%;background:var(--brand-orange,#ff6a3d);animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);} }
.serv-hero h1 { font-size:clamp(24px,4.5vw,52px);font-weight:800;line-height:1.2;margin-bottom:20px;min-height:2.4em; }
.serv-hero-typing-wrap { display:inline-block;position:relative;min-width:200px;min-height:1.2em;vertical-align:bottom; }
.serv-hero-typing-cursor { display:inline-block;width:2px;height:.9em;background:var(--brand-orange,#ff6a3d);margin-left:3px;vertical-align:middle;animation:blink-cursor .8s step-end infinite; }
@keyframes blink-cursor { 50%{opacity:0;} }
.serv-hero__lead  { color:#f0f0f0;font-size:17px;line-height:1.65;margin-bottom:34px; }
.serv-hero__cta   { display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px; }
.serv-hero__stats { display:flex;justify-content:center;gap:44px;flex-wrap:wrap; }
.serv-hero__stats div    { display:flex;flex-direction:column;align-items:center; }
.serv-hero__stats strong { font-size:26px;font-weight:800; }
.serv-hero__stats span   { font-size:12px;color:#d8d1ee;margin-top:2px; }

/* Responsive */
@supports (min-height:100dvh) {
  @media (max-width:768px) { .serv-hero { min-height:60dvh; } }
}
@media (max-width:768px) {
  .serv-hero { aspect-ratio: unset; min-height: 480px; max-height: none; }
  .serv-hero__content { padding: 50px 16px 60px; }
  .serv-hero h1 { font-size:clamp(22px,6vw,36px); min-height:auto; }
  .serv-hero-typing-wrap { min-width:140px; }
  .serv-hero__lead { font-size:15px; margin-bottom:24px; }
  .serv-hero__cta  { gap:10px; margin-bottom:30px; }
  .serv-hero__stats { gap:24px; }
  .serv-hero__stats strong { font-size:20px; }
  .serv-hero__scroll-cue { display:none; }
}
@media (max-width:480px) {
  .serv-hero { min-height: 400px; }
  .serv-hero__content { padding:40px 14px 50px; }
  .serv-hero h1 { font-size:clamp(20px,7vw,28px); }
  .serv-hero__badge { font-size:11px; padding:6px 12px; }
  .serv-hero__lead  { font-size:14px; }
  .serv-hero__stats { gap:16px; }
  .serv-hero__stats strong { font-size:18px; }
  .serv-hero__arrow { display:none; }
  .btn--lg { padding:12px 20px; font-size:14px; }
}

/* ===== PARTNERS ===== */
}

/* ===== PARTNERS ===== */
.partner-card__mark img {max-width: 100%; max-height: 70px; object-fit: contain; display: block;} 

.serv-partners{padding:80px 0;}
.serv-partners__slider{margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.serv-partners__track{display:flex;gap:20px;width:max-content;animation:serv-partners-left 32s linear infinite;will-change:transform;backface-visibility:hidden;}
.serv-partners__track--reverse{animation-name:serv-partners-right;}
.serv-partners__slider:hover .serv-partners__track{animation-play-state:paused;}
.serv-partners__track::-webkit-scrollbar{display:none;}
.partner-card{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:160px;padding:22px 20px;text-align:center;border-radius:16px;background:#f9f8fc;transition:.3s ease;}
.partner-card:hover{background:#f3e8ff;}
.partner-card__mark{height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.partner-card span{font-size:13px;font-weight:700;color:var(--ink);}
.partner-card small{font-size:11px;color:#8a8398;margin-top:4px;}

@media (max-width:768px){
  .serv-partners__slider{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-mask-image:none;
    mask-image:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--brand-purple) #f0ecf8;
    padding-bottom:10px;
  }
  .serv-partners__slider::-webkit-scrollbar{height:5px;}
  .serv-partners__slider::-webkit-scrollbar-track{background:#f0ecf8;border-radius:10px;}
  .serv-partners__slider::-webkit-scrollbar-thumb{background:var(--brand-purple);border-radius:10px;}
  .serv-partners__track{
    animation:none !important;
    width:max-content;
    will-change:auto;
  }
}

/* ===== SERVICES: LIVE NOW (image-left / content-right) + COMING SOON SLIDER ===== */
.svc{padding:84px 0 0;background:#faf9fd;overflow:hidden;}
.svc__header{text-align:center;margin-bottom:44px;}
.svc__header .services-filter__subtitle{color:#6b6478;font-size:16px;line-height:1.6;max-width:620px;margin:20px auto 0;}

.svc__led{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:svcPulse 1.8s ease-in-out infinite;}
@keyframes svcPulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.18);}50%{box-shadow:0 0 0 6px rgba(34,197,94,.06);}}

/* ---------- LIVE: image-left / content-right cards ---------- */
.svc__live{display:flex;flex-direction:column;gap:22px;padding-bottom:76px;}

.svc__live-card{position:relative;background:#fff;border:1px solid #efeaf8;border-radius:22px;display:grid;grid-template-columns:340px 1fr;align-items:stretch;box-shadow:0 20px 44px -26px rgba(21,10,46,.28);opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,.8,.3,1),transform .6s cubic-bezier(.16,.8,.3,1),box-shadow .35s ease,border-color .35s ease;transition-delay:calc(var(--d) * 110ms);overflow:hidden;will-change:opacity,transform;}
.svc__live-card.svc-animate{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.svc__live-card{opacity:1;transform:none;transition:none;}}
.svc__live-card:nth-child(even){grid-template-columns:1fr 340px;}
.svc__live-card:nth-child(even) .svc__live-media{order:2;}
.svc__live-card:nth-child(even) .svc__live-body{order:1;}
.svc__live-card.svc-animate:hover{transform:translateY(-6px);box-shadow:0 32px 60px -24px rgba(91,31,181,.4);border-color:rgba(91,31,181,.28);}

.svc__live-media{position:relative;min-height:280px;overflow:hidden;background:#eee9f7;}
.svc__live-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.svc__live-card:hover .svc__live-media img{transform:scale(1.06);}
.svc__live-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,10,46,0) 55%,rgba(21,10,46,.28) 100%);pointer-events:none;}

.svc__live-badge{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#16a34a;background:#fff;border:1px solid #cdf3dd;padding:5px 10px 5px 8px;border-radius:100px;z-index:2;}
.svc__live-card:nth-child(even) .svc__live-badge{left:auto;right:18px;}

.svc__live-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;}

.svc__live-name{font-size:23px;font-weight:800;color:var(--ink);margin:0 0 4px;}
.svc__live-tag{font-size:12px;font-weight:700;color:#a855f7;text-transform:uppercase;letter-spacing:.6px;margin:0 0 14px;}
.svc__live-desc{font-size:14.5px;line-height:1.65;color:#6b6478;margin:0 0 20px;max-width:520px;}

.svc__live-features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:9px;}
.svc__live-features li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#4a4555;}
.svc__live-features li svg{flex-shrink:0;color:#7c3aed;background:#f3e8ff;border-radius:50%;padding:2px;box-sizing:content-box;}

.svc__live-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-purple);color:#fff;text-decoration:none;font-size:13.5px;font-weight:800;border-radius:10px;padding:13px 22px;transition:.25s ease;}
.svc__live-cta:hover{background:var(--brand-purple-dark);gap:12px;}

@media (max-width:860px){
  .svc__live-card,
  .svc__live-card:nth-child(even){grid-template-columns:1fr;}
  .svc__live-card:nth-child(even) .svc__live-media,
  .svc__live-card:nth-child(even) .svc__live-body{order:initial;}
  .svc__live-media{min-height:200px;}
  .svc__live-body{padding:26px 24px;}
}

/* ---------- COMING SOON: slider with thumbnail images ---------- */
.svc__soon{background:#fff;border-top:1px solid #efeaf8;padding:52px 0 64px;}
.svc__soon-head{text-align:center;margin-bottom:30px;}
.svc__soon-title{font-size:17px;font-weight:700;color:var(--ink);margin:0;}

.svc__soon-slider{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:6px 0 14px;}
.svc__soon-track{display:flex;width:max-content;gap:22px;animation:marquee-x 58s linear infinite;}
.svc__soon-slider:hover .svc__soon-track{animation-play-state:paused;}

.svc__soon-card{flex-shrink:0;width:280px;display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid #f0ecf8;border-radius:20px;padding:0;position:relative;overflow:hidden;box-shadow:0 14px 30px -20px rgba(21,10,46,.22);transition:transform .35s cubic-bezier(.16,.8,.3,1),box-shadow .35s ease,border-color .35s ease;}
.svc__soon-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 46px -18px rgba(91,31,181,.32);border-color:rgba(91,31,181,.28);}
.svc__soon-led{position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;background:#e7c65c;box-shadow:0 0 0 3px rgba(231,198,92,.22);z-index:2;}
.svc__soon-icon{width:100%;height:150px;flex-shrink:0;overflow:hidden;background:#eee9f7;position:relative;}
.svc__soon-icon::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,10,46,0) 55%,rgba(21,10,46,.35) 100%);opacity:0;transition:opacity .35s ease;}
.svc__soon-card:hover .svc__soon-icon::after{opacity:1;}
.svc__soon-icon img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,.8,.3,1),filter .35s ease;filter:saturate(.92);}
.svc__soon-card:hover .svc__soon-icon img{transform:scale(1.12) rotate(0.3deg);filter:saturate(1.1);}
.svc__soon-text{display:flex;flex-direction:column;min-width:0;padding:16px 18px 20px;}
.svc__soon-text strong{font-size:15px;font-weight:800;color:#4a4555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease;}
.svc__soon-card:hover .svc__soon-text strong{color:var(--brand-purple);}
.svc__soon-text span{font-size:12px;font-weight:600;color:#a89fc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.svc__soon-tag{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#8a5a00;background:rgba(255,255,255,.92);padding:4px 10px;border-radius:100px;}

@media (max-width:1080px){
  .svc__live-card{grid-template-columns:1fr;}
  .svc__live-card:nth-child(even){grid-template-columns:1fr;}
  .svc__live-card:nth-child(even) .svc__live-media,
  .svc__live-card:nth-child(even) .svc__live-body{order:initial;}
  .svc__live-media{min-height:220px;}
}
@media (max-width:640px){
  .svc{padding:56px 0 0;}
  .svc__header{margin-bottom:30px;}
  .svc__live{gap:16px;padding-bottom:52px;}
  .svc__live-card{border-radius:18px;}
  .svc__live-body{padding:22px 20px;}
  .svc__soon{padding:40px 0 48px;}
  .svc__soon-card{width:220px;}
  .svc__soon-icon{height:120px;}
  .svc__soon-text{padding:12px 14px 16px;}
}

/* ===== B2B STATS STRIP ===== */
.b2b{padding:72px 0 0;background:#faf9fd;overflow:hidden;}
.b2b__top{text-align:left;padding-bottom:40px;}
.b2b__slider{width:100%;overflow:hidden;border-top:1px solid #efeaf8;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.b2b__track{display:flex;width:max-content;gap:16px;padding:26px 0;animation:marquee-x 26s linear infinite;will-change:transform;backface-visibility:hidden;}
.b2b__slider:hover .b2b__track{animation-play-state:paused;}
.b2b__stat-card{flex-shrink:0;background:#fff;border:1px solid #eee9f7;border-radius:16px;padding:18px 26px;display:flex;flex-direction:column;gap:4px;min-width:150px;box-shadow:0 8px 22px rgba(91,31,181,.05);}
.b2b__stat-card strong{font-size:22px;font-weight:800;color:var(--ink);}
.b2b__stat-card span{font-size:12px;color:#8a8398;}
@keyframes marquee-x{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

@media (max-width:600px){
  .b2b{padding:48px 0 0;}
  .b2b__top{padding-bottom:24px;}
  .b2b__stat-card{min-width:120px;padding:14px 18px;}
  .b2b__stat-card strong{font-size:18px;}
}

/* ===== TESTIMONIALS ===== */
.serv-testi{background:#fff;overflow:hidden;padding-top:88px;}
.serv-testi__head{text-align:center;margin-bottom:44px;}
.serv-testi__marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.serv-testi__track{display:flex;width:max-content;gap:24px;padding:10px 0;animation:testi-scroll 28s linear infinite;will-change:transform;backface-visibility:hidden;}
.serv-testi__marquee:hover .serv-testi__track{animation-play-state:paused;}
@keyframes testi-scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.serv-testi__card{flex-shrink:0;width:420px;background:#faf9fd;border:1px solid #eee9f7;border-radius:22px;padding:36px;text-align:left;box-shadow:0 20px 44px rgba(91,31,181,.06);transition:transform .3s ease,box-shadow .3s ease;}
.serv-testi__card:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(91,31,181,.12);}
.serv-testi__quote-mark{color:var(--brand-orange);opacity:.6;margin-bottom:16px;}
.serv-testi__card p{font-size:16px;line-height:1.7;color:var(--ink);font-weight:600;margin-bottom:22px;}
.serv-testi__person strong{display:block;font-size:14px;color:var(--ink);}
.serv-testi__person span{font-size:12.5px;color:#8a8398;}

@media (max-width:640px){
  .serv-testi__card{width:300px;padding:26px 20px;}
  .serv-testi__card p{font-size:14.5px;}
}

/* ===== CTA SECTION ===== */
.ab-cta{position:relative;padding:80px 0 60px;background:radial-gradient(120% 140% at 100% 0%,var(--brand-purple) 0%,var(--ink) 60%);overflow:hidden;isolation:isolate;}
.ab-cta__inner{max-width:620px;margin:0 auto;text-align:center;color:#fff;}
.ab-cta__badge{color:#fff;margin-bottom:22px;display:inline-block;}
.ab-cta__title{font-size:clamp(28px,3.6vw,42px);font-weight:600;line-height:1.25;margin-bottom:14px;color:#fff;}
.ab-cta__title em{font-style:italic;color:#a855f7;}
.ab-cta__inner p{color:#e8e4ff;margin-bottom:30px;}
.ab-cta__buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.ab-cta__shape{position:absolute;border-radius:50%;z-index:0;will-change:transform;}
.ab-cta__shape--1{width:220px;height:220px;background:rgba(255,106,61,.18);top:-60px;left:-60px;}
.ab-cta__shape--2{width:160px;height:160px;background:rgba(168,85,247,.15);bottom:-50px;right:-40px;}
@media (min-width:769px){
  .ab-cta__shape--1{animation:ab-float 9s ease-in-out infinite;}
  .ab-cta__shape--2{animation:ab-float 11s ease-in-out infinite reverse;}
}
@keyframes ab-float{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-20px) rotate(5deg);}}


/* ============================================================
   MOBILE RESPONSIVE FIXES — Services page
   ============================================================ */

/* ── Prevent horizontal scroll on the whole page ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Global container padding on small screens ── */
@media (max-width: 576px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   HERO SLIDER — keep full image visible, never crop
   The banners are 1351×481 (ratio ≈ 2.81:1).
   Use aspect-ratio + contain so the full image always shows.
   ────────────────────────────────────────────────────────── */
.serv-hero {
  /* Override: lock to the banner's own ratio on ALL screen sizes */
  aspect-ratio: 1351 / 481 !important;
  min-height: unset !important;
  max-height: none !important;
  width: 100%;
}

.serv-hero__slide-bg {
  background-size: contain !important;   /* never crop */
  background-position: center center !important;
  background-color: #f0eafa !important;  /* soft fill for side bars */
  background-repeat: no-repeat !important;
}

/* On very small phones (< 400px) the image becomes tiny, switch to cover
   anchored to the right so the person on the right side stays visible */
@media (max-width: 400px) {
  .serv-hero__slide-bg {
    background-size: cover !important;
    background-position: right center !important;
    background-color: #f0eafa !important;
  }
  .serv-hero {
    aspect-ratio: unset !important;
    min-height: 220px !important;
  }
}

/* Hide arrows on mobile — too cramped */
@media (max-width: 576px) {
  .serv-hero__arrow { display: none; }
  .serv-hero__dots  { bottom: 8px; }
  .serv-hero__scroll-cue { display: none; }
}

/* ── Partners slider ── */
@media (max-width: 576px) {
  .serv-partners {
    padding: 48px 0;
  }
  .serv-partners .section-title {
    font-size: 20px;
    text-align: center;
  }
  .partner-card {
    width: 130px;
    padding: 16px 12px;
  }
  .partner-card__mark {
    height: 60px;
  }
  .partner-card span {
    font-size: 11px;
  }
  .partner-card small {
    font-size: 10px;
  }
}

/* ── Services cards (svc__live-card) ── */

/* The inline CSS in the blade already has 992 & 576 breakpoints,
   but we need to ensure the 42%/1fr grid collapses properly */
@media (max-width: 860px) {
  /* force single column (overrides any inline style grid) */
  #svcContainer,
  .svc__live {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .svc__live-card,
  div[class*="svc__live-card"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    width: 100% !important;
  }

  /* image always on top */
  .svc__live-media {
    order: 0 !important;
    min-height: 200px !important;
    width: 100% !important;
  }
  .svc__live-body {
    order: 1 !important;
    padding: 20px 18px !important;
  }
}

@media (max-width: 576px) {
  .svc {
    padding: 40px 0 0 !important;
  }
  .svc__header {
    margin-bottom: 24px !important;
  }
  .svc__header .section-title {
    font-size: 20px !important;
  }
  .svc__header .services-filter__subtitle {
    font-size: 14px !important;
    margin-top: 10px !important;
  }
  .svc__live-media {
    min-height: 170px !important;
  }
  .svc__live-name {
    font-size: 18px !important;
  }
  .svc__live-desc {
    font-size: 13px !important;
  }
  .svc__live-body {
    padding: 16px 14px !important;
    gap: 8px !important;
  }
  .svc__toggle-btn {
    width: 100% !important;
    justify-content: center !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }
  .svc__toggle-wrap {
    margin-top: 24px !important;
  }
}

/* ── B2B stats strip ── */
@media (max-width: 576px) {
  .b2b {
    padding: 40px 0 0 !important;
  }
  .b2b__top {
    padding-bottom: 20px !important;
    text-align: center !important;
  }
  .b2b__top .section-title {
    font-size: 20px !important;
    text-align: center !important;
  }
  .b2b__stat-card {
    min-width: 110px !important;
    padding: 12px 14px !important;
  }
  .b2b__stat-card strong {
    font-size: 17px !important;
  }
  .b2b__stat-card span {
    font-size: 11px !important;
  }
}

/* ── CTA section ── */
@media (max-width: 576px) {
  .ab-cta {
    padding: 56px 0 !important;
  }
  .ab-cta__inner {
    padding: 0 4px !important;
  }
  .ab-cta__title {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.3 !important;
  }
  .ab-cta__buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .ab-cta__buttons .btn,
  .ab-cta__buttons a {
    text-align: center !important;
    width: 100% !important;
    padding: 14px 20px !important;
    display: block !important;
  }
}

/* ── Scroll progress bar ── */
@media (max-width: 576px) {
  .scroll-progress {
    height: 2px !important;
  }
}