/* Page tokens (use site palette) */
:root{
    --dark-1:#111827;
    --dark-2:#1F2937;
    --text:#111827;
    --muted:#6B7280;
    --light:#ffffff;
    --panel:#6B7280;   /* grey info panel */
    --panel-text:#F9FAFB;
    --radius:14px;
  }
  
  .container{ max-width:1180px; margin:0 auto; padding:0 20px; }
  
  /* Header section */
  .services-head{
    position:relative;
    background:#fff;
    text-align:center;
    padding:48px 0 28px;
    color:var(--text);
    overflow:hidden;
  }
  .services-head .eyebrow{
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:12px;
    font-weight:600;
    color:#6B7280;
    margin-bottom:4px;
  }
  .services-head h1{
    font-size:clamp(26px,4.2vw,32px);
    margin-bottom:10px;
  }
  .services-head .intro{
    max-width:800px;
    margin:0 auto 10px;
    color:#374151;
    font-size:clamp(16px,2.4vw,18px);
    line-height:1.7;
  }
  .svc-chips{
    margin-top:8px;
    display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  }
  .chip{
    display:inline-block; padding:8px 12px; border-radius:9999px;
    background:#111827; color:#F9FAFB; text-decoration:none; font-weight:700; font-size:13px;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    transition:transform .15s ease, background .2s ease;
  }
  .chip:hover{ transform:translateY(-1px); background:#1F2937; }
  
  /* soft wave deco */
  .svc-wave{
    position:absolute; left:-20%; top:-10%; width:140%; height:160%; pointer-events:none;
    background:
      radial-gradient(1200px 400px at 15% 50%, rgba(209,213,219,.28), transparent 60%),
      radial-gradient(900px 280px at 30% 70%, rgba(209,213,219,.22), transparent 60%);
  }
  
  /* Services cards */
  .services-cards{ background:#fff; padding:12px 0 36px; }
  .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  
  /* Card wrapper uses 2 cols internally: image + panel */
  .svc-card{
    display:grid; grid-template-columns:1fr 1fr;
    background:#E5E7EB;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  .svc-card.left{ direction: rtl; }
  .svc-card.left > *{ direction: ltr; }
  .svc-image{ position:relative; }
  .svc-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .svc-info{
    background:var(--panel); color:var(--panel-text);
    padding:18px; display:flex; flex-direction:column; justify-content:center; gap:8px;
  }
  .svc-info h3{ font-size:18px; font-weight:700; }
  .svc-info p{ color:#E5E7EB; font-size:14px; line-height:1.55; }
  
  /* Outline button inside panel */
  .btn-outline{
    align-self:flex-start; margin-top:8px; color:#FFFFFF; text-decoration:none;
    border:1.6px solid #FFFFFF; padding:9px 16px; border-radius:9999px; font-size:14px;
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }
  .btn-outline:hover{ background:#FFFFFF; color:#111827; transform:translateY(-1px); }
  
  /* Guarantees strip */
  .guarantees{
    background:linear-gradient(180deg, var(--dark-1), var(--dark-2));
    color:#F9FAFB; padding:28px 0;
  }
  .g-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .g-card{
    background:#2F3643; border-radius:14px; padding:18px;
    box-shadow:0 12px 24px rgba(0,0,0,.25); text-align:center;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .g-card:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.32); }
  .g-icon{ font-size:22px; margin-bottom:6px; }
  .g-card h3{ margin-bottom:6px; font-size:16px; color:#F9FAFB; }
  .g-card p{ color:#D1D5DB; font-size:14px; }
  
  /* Strengths */
  .strengths-sec{ background:#F3F4F6; padding:36px 0; }
  .strengths-sec h2{ font-size:clamp(22px,3.2vw,26px); margin-bottom:10px; }
  .strengths-list{ max-width:920px; padding-left:20px; color:#111827; }
  .strengths-list li{ margin:8px 0; line-height:1.6; }
  
  /* Workflow */
  .services-workflow{ background:linear-gradient(180deg,var(--dark-1),var(--dark-2)); color:#F9FAFB; padding:42px 0; }
  .services-workflow h2{ text-align:center; margin-bottom:20px; font-size:clamp(22px,3.2vw,26px); font-weight:700; }
  .workflow-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .w-card{
    background:#2F3643; border-radius:14px; padding:18px 18px 14px;
    box-shadow:0 10px 24px rgba(0,0,0,.25); color:#F9FAFB;
    position:relative; overflow:hidden; cursor:pointer; transition:box-shadow .3s ease, transform .3s ease;
  }
  .w-card:hover, .w-card.expanded{ box-shadow:0 18px 40px rgba(0,0,0,.35); transform:translateY(-2px); }
  .w-card h3{ margin-bottom:8px; font-size:16px; }
  .w-card .w-short{ color:#D1D5DB; font-size:14px; line-height:1.55; }
  
  /* Hidden details area */
  .w-more{
    max-height:0; opacity:0; overflow:hidden; transform:translateY(-6px);
    transition:max-height 450ms cubic-bezier(.22,1,.36,1), opacity 350ms ease, transform 350ms ease;
    margin-top:6px;
  }
  .w-more ul{ padding-left:18px; }
  .w-more li{ color:#E5E7EB; margin:6px 0; font-size:14px; line-height:1.55; }
  
  /* Expanded states */
  .w-card:hover .w-more, .w-card:focus-within .w-more, .w-card.expanded .w-more{
    max-height:420px; opacity:1; transform:translateY(0);
  }
  
  /* Toggle button */
  .w-toggle{
    margin-top:10px; background:transparent; color:#E5E7EB;
    border:1px solid rgba(229,231,235,.35); padding:6px 12px; border-radius:9999px; font-size:13px;
    display:inline-flex; align-items:center; gap:6px;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  }
  .w-card:hover .w-toggle, .w-card.expanded .w-toggle{ border-color:rgba(229,231,235,.6); }
  .w-toggle:hover{ background:rgba(255,255,255,.06); transform:translateY(-1px); }
  .w-toggle:focus-visible{ outline:2px solid #93C5FD; outline-offset:2px; }
  .w-card.expanded .w-toggle .chev{ transform:rotate(180deg); }
  .w-toggle .chev{ display:inline-block; transition:transform .25s ease; }

  /* Section */
.project-section{ padding:32px 0 44px; }

/* Title centered above card */
.center-title{
  text-align:center; margin:0 0 12px; color:var(--text);
  font-size:clamp(22px,3vw,26px);
  opacity:0; transform: translateY(8px);
  transition: opacity .5s ease .9s, transform .5s ease .9s;
}
.project-section.animate .center-title{ opacity:1; transform:none; }

/* Carousel card */
.carousel{
  position:relative;
  background: var(--dark-2);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 16px 32px rgba(0,0,0,.25);
  aspect-ratio:16/9;
}

/* Title overlay */
.title-overlay{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) scale(.92);
  color:#F9FAFB; font-weight:800; letter-spacing:.04em;
  font-size: clamp(26px, 5vw, 40px);
  opacity:0; pointer-events:none;
}
.project-section.animate .title-overlay{
  animation: title-seq 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes title-seq{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.92); }
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  60%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-68%) scale(.98); }
}

/* Slides */
.slides{
  display:flex; width:100%; height:100%;
  opacity:0; transform: scale(.98);
  transition: opacity .6s ease .5s, transform .6s ease .5s;
  z-index:1; /* behind controls */
}
.project-section.animate .slides{ opacity:1; transform:none; }
.slides.dragging{ transition:none; }
.slides > img{ width:100%; height:100%; flex:0 0 100%; object-fit:cover; display:block; }

/* Arrows */
.nav{
  position:absolute; z-index:4; /* ensure on top */
  top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:9999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:#111827; font-size:22px;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  opacity:0; transform-origin:center;
  transition: opacity .35s ease .7s, transform .15s ease, background .2s ease;
}
.project-section.animate .nav{ opacity:1; }
.nav:hover{ transform:translateY(-50%) scale(1.06); background:#fff; }
.nav:disabled{ opacity:.45; cursor:default; }
.nav.prev{ left:12px; }
.nav.next{ right:12px; }

/* Dots + CTA */
.overlay-controls{
  position:absolute; z-index:5; /* above slides */
  left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transition: opacity .4s ease .8s;
  pointer-events:auto;
}
.project-section.animate .overlay-controls{ opacity:1; }

.dots{ display:flex; gap:6px; }
.dot{
  width:8px; height:8px; border-radius:9999px;
  background:rgba(255,255,255,.6);
  border:none; cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
  transition: transform .15s ease, background .2s ease;
}
.dot:hover{ transform:scale(1.15); }
.dot.active{ background:#ffffff; }

.btn-see{
  display:inline-block; background:#ffffff; color:#111827;
  padding:8px 16px; border-radius:9999px; font-size:13px; text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  position:relative; z-index:6; pointer-events:auto;
}
.btn-see:hover{ transform:translateY(-1px); background:#F3F4F6; }

/* Reveal containers */
.project-section, .projects-hero{ opacity:0; transform: translateY(16px); }
.project-section.animate, .projects-hero.animate{ opacity:1; transform:none; }

/* Responsive */
@media (max-width:900px){ .carousel{ border-radius:12px; } }
@media (prefers-reduced-motion: reduce){
  .project-section, .projects-hero{ transition:none; transform:none; opacity:1; }
  .title-overlay{ animation:none !important; opacity:0; }
  .slides, .overlay-controls, .nav{ transition:none; opacity:1; }
}
  
  /* CTA band */
  .svc-cta{ background:#fff; padding:36px 0 56px; }
  .cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .svc-cta h3{ font-size:clamp(20px,3vw,26px); color:#111827; }
  .btn-cta{
    display:inline-block; background:#111827; color:#F9FAFB; text-decoration:none; font-weight:700;
    padding:12px 18px; border-radius:9999px; box-shadow:0 10px 24px rgba(0,0,0,.22);
    transition:transform .2s ease, background .2s ease;
  }
  .btn-cta:hover{ transform:translateY(-2px); background:#1F2937; }
  
  /* Interactive Service Cards (tilt + glow + reveal) */
  .svc-card{
    --lift:0px; --rx:0deg; --ry:0deg; --reveal-y:16px; --reveal-scale:.98;
    position:relative; transform-style:preserve-3d;
    transform: translateY(calc(var(--reveal-y) + var(--lift))) scale(var(--reveal-scale)) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 450ms cubic-bezier(.22,1,.36,1), box-shadow 350ms ease, filter 350ms ease;
    will-change: transform; box-shadow:0 12px 28px rgba(0,0,0,.12);
  }
  .svc-card.in-view{ --reveal-y:0px; --reveal-scale:1; }
  .svc-card:hover, .svc-card:focus-within{ --lift:-6px; box-shadow:0 22px 50px rgba(0,0,0,.22); }
  .svc-card::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), rgba(255,255,255,0) 40%);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .svc-card:hover::before, .svc-card:focus-within::before{ opacity:1; }
  .svc-image{ position:relative; overflow:hidden; }
  .svc-image img{ transform:scale(var(--img-scale,1)); transition:transform 900ms cubic-bezier(.16,1,.3,1); will-change:transform; }
  .svc-card:hover .svc-image img, .svc-card:focus-within .svc-image img{ --img-scale:1.06; }
  .svc-image::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 20%, rgba(255,255,255,0) 40%);
    transform: translateX(-120%) skewX(-20deg); pointer-events:none;
  }
  .svc-card:hover .svc-image::after, .svc-card:focus-within .svc-image::after{ animation: shine 1200ms cubic-bezier(.22,1,.36,1); }
  @keyframes shine{ from{ transform: translateX(-120%) skewX(-20deg);} to{ transform: translateX(200%) skewX(-20deg);} }
  
  /* Reveal utility */
  .reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
  .delay-1{ transition-delay:.12s; } .delay-2{ transition-delay:.24s; } .delay-3{ transition-delay:.36s; }
  
  /* Bottom reveal footer (unchanged) */
  .footer-reveal{ position:relative; overflow:hidden; transform:translateY(80px); opacity:0; transition: transform 600ms cubic-bezier(.22,1,.36,1), opacity 600ms ease; will-change: transform, opacity; }
  .footer-reveal.is-visible{ transform:translateY(0); opacity:1; }
  .footer-wedge{ background:#1F2937; color:#F9FAFB; position:relative; padding:36px 16px 28px; text-align:center; clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%); }
  @media (max-width:640px){ .footer-wedge{ clip-path: polygon(0 18%, 50% 0, 100% 18%, 100% 100%, 0 100%); } }
  .footer-badge{ width:44px; height:44px; border-radius:50%; background:#D1D5DB; position:absolute; top:-22px; left:50%; transform:translateX(-50%); box-shadow:0 3px 10px rgba(0,0,0,.35); }
  .footer-brand{ font-weight:700; font-size:18px; margin-bottom:6px; color:#F9FAFB; }
  .footer-socials{ display:flex; justify-content:center; gap:12px; font-size:14px; }
  .footer-socials a{ color:#E5E7EB; opacity:.9; text-decoration:none; padding:4px; border-radius:6px; }
  .footer-socials a:hover{ opacity:1; background:rgba(255,255,255,.08); }
  
  /* Responsive */
  @media (max-width:1024px){
    .svc-grid{ grid-template-columns:1fr; }
    .workflow-cards{ grid-template-columns:1fr; }
    .g-grid{ grid-template-columns:1fr; }
    .cta-inner{ flex-direction:column; text-align:center; }
  }
  @media (max-width:640px){
    .svc-card{ grid-template-columns:1fr; }
    .svc-card.left{ direction:ltr; }
    .svc-info{ padding:16px; }
  }
  
  /* Sticky header (keeps your current styles, just sticks to top) */
  header{ position:-webkit-sticky; position:sticky; top:0; z-index:9999; }
  html{ scroll-padding-top:56px; }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .svc-card{ transition:none; transform:none; }
    .svc-card::before{ display:none; }
    .svc-image img{ transition:none; }
    .svc-image::after{ display:none; }
    .footer-reveal{ transform:none; opacity:1; transition:none; }
  }