/* =========================
   RESET & TOKENS
========================= */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html:focus-within{scroll-behavior:smooth}html,body{height:100%}
img{display:block;max-width:100%;height:auto}
button{font:inherit}

:root{
  --ink-900:#020817; --ink-700:#1f2937; --ink-600:#64748B;
  --menu-bg:#F8FAFC; --menu-text:#64748B; --menu-border:#E2E8F0;
  --brand-grad:linear-gradient(90deg,#327E0C 0%,#96B815 50%,#327E0C 100%);
  --green:#327E0C; --green-600:#3a8a10; --star:#F59E0B;
  --panel-bg:#F3F6FF; --cta-band:#F2F3FF;
  --step--2:.82rem; --step--1:.92rem; --step-0:1.05rem; --step-1:1.18rem; --step-2:1.6rem; --step-3:2.45rem;
  --s-1:.55rem; --s-2:.85rem; --s-3:1.25rem; --s-4:1.9rem; --s-5:2.6rem; --s-6:4rem;
  --maxw:1320px; --measure:84ch; --header-h:64px;
}
@media (min-width:960px){
  :root{ --s-3:1.5rem; --s-4:2.25rem; --s-5:3rem; --s-6:4.75rem; --header-h:72px; }
}

/* =========================
   BASE
========================= */
body{font-family:'Urbanist',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink-900);background:#fff;font-size:var(--step-0);line-height:1.55;overflow-x:hidden}
.container{width:min(100% - 1.5rem,var(--maxw));margin-inline:auto}
.section{padding-block:var(--s-5);scroll-margin-top:calc(var(--header-h) + 24px)}
.center{text-align:center}

/* =========================
   HEADER / NAV (bulletproof)
========================= */
.site-header{
  position:sticky; top:0; background:var(--menu-bg); border-bottom:1px solid var(--menu-border);
  z-index:5400; /* header above overlay */
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; padding-block:.5rem;
  position:relative; z-index:5450; /* header content above overlay */
}
.brand-logo{height:56px}
@media(min-width:960px){.brand-logo{height:76px}}

.nav-toggle{
  inline-size:44px; block-size:44px; border:1px solid var(--menu-border); border-radius:12px;
  background:#fff; display:grid; place-items:center; color:var(--menu-text)
}
.nav-toggle .bars{width:22px;height:2px;background:var(--menu-text);position:relative;border-radius:2px}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--menu-text);border-radius:2px}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}

/* overlay BELOW menu but ABOVE page */
.menu-overlay{
  position:fixed; left:0; right:0; bottom:0; top:var(--header-h);
  background:rgba(2,8,23,.45); opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index:400; /* below .site-nav but above page content */
}
.menu-overlay.open{opacity:1; pointer-events:auto}

/* dropdown menu ABOVE overlay */
.site-nav{
  position:fixed; left:0; right:0; top:var(--header-h);
  background:var(--menu-bg); border-top:1px solid var(--menu-border);
  max-height:0; overflow:hidden; opacity:0; transition:max-height .25s ease, opacity .2s ease;
  z-index:5600; /* on top of overlay */
}
.site-nav ul{list-style:none;padding:var(--s-2);display:grid}
.site-nav a{display:block;padding:.65rem .4rem;text-decoration:none;color:var(--menu-text);font-weight:600}
.site-nav.open{max-height:70vh; opacity:1}

@media (min-width:960px){
  .nav-toggle{display:none}
  .menu-overlay{display:none}
  .site-nav{position:static;max-height:none;opacity:1;overflow:visible;border-top:0;background:transparent;z-index:auto}
  .site-nav ul{display:flex;gap:1.1rem;padding:0}
  .site-nav a{padding:.55rem .25rem;color:var(--menu-text)}
  .site-nav a:hover,.site-nav a:focus,.site-nav a.active{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* =========================
   BUTTONS
========================= */
.btn{
  width:160px;height:31px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:9px;background:var(--brand-grad);color:#fff;text-decoration:none;
  font-weight:800;font-size:14px;line-height:28px;letter-spacing:.2px;box-shadow:0 6px 16px rgba(50,126,12,.18);
}
.btn--ghost{background:#fff;color:var(--ink-900);border:1px solid var(--menu-border);box-shadow:none}

/* =========================
   HERO
========================= */
.hero{padding-block:0;text-align:center;min-height:calc(100vh - var(--header-h));display:flex;align-items:center}
.hero-inner{max-width:1024px;margin-inline:auto;padding-block:var(--s-4)}
.hero-stack>*+*{margin-top:var(--s-3)}
.h1{font-size:var(--step-3);line-height:1.08;font-weight:800;margin-bottom:var(--s-2)}
.h1 .grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.force-break{display:none}.nowrap{white-space:nowrap;display:inline-block}
@media (max-width:820px){.force-break{display:inline}.force-break::after{content:"\A";white-space:pre}.h1{font-size:1.9rem}.hero{min-height:80vh}}
@media (min-width:960px){.h1{white-space:nowrap}}
.lead{font-size:var(--step-1);color:var(--ink-600);max-width:70ch;margin-inline:auto;margin-bottom:var(--s-2)}
@media (max-width:768px){.lead{font-size:1rem}}
.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .8rem;border:1px solid var(--menu-border);border-radius:9999px;background:#fff;font-weight:700;margin-bottom:var(--s-2)}
.badge .stars{color:var(--star)}
.badge--full{font-size:var(--step-0)}
.badge--compact{display:none;font-size:var(--step--1)}
@media (max-width:480px){.badge--full{display:none}.badge--compact{display:inline-flex}}
.kpi-wrap{margin-top:var(--s-2)}
.kpi-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center}
.kpi-item{position:relative;padding:.25rem .65rem;display:grid;gap:.25rem}
.kpi-item+.kpi-item::before{content:"";position:absolute;left:-.2rem;top:50%;translate:0 -50%;width:1px;height:22px;background:var(--menu-border)}
.kpi-item .num{font-weight:800;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(1.7rem,1.1rem + 2.2vw,2.2rem);white-space:nowrap;line-height:1}
.kpi-item .label{font-size:var(--step--2);color:var(--ink-600);font-weight:600}
.cta-row{margin-top:var(--s-3);display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* =========================
   SERVICES
========================= */
.services{background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);padding-bottom:var(--s-6)}
.services .container:first-child{margin-bottom:var(--s-4)}
.h2{font-size:clamp(1.8rem,1.3rem + 1vw,2.4rem);font-weight:800;text-align:center;margin-bottom:.25rem}
.measure{max-width:var(--measure);margin-inline:auto;text-align:center}
.services-sub{color:var(--ink-600);margin-top:.15rem;margin-bottom:.6rem}
.services-sub--compact{display:none;color:var(--ink-600);margin-top:.15rem;margin-bottom:.6rem}
@media(max-width:768px){.services-sub{display:none}.services-sub--compact{display:block;font-size:.95rem}}
.icon-bar{max-width:var(--measure);margin-inline:auto;display:flex;justify-content:space-between;align-items:center}
.icon-bar img{width:clamp(26px,2.2vw,42px);height:clamp(26px,2.2vw,42px)}
.services-grid{margin-top:var(--s-5);display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media(min-width:720px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.services-grid{grid-template-columns:repeat(5,1fr)}}
.service-card{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(180deg,#A4D65E 0%,#327E0C 100%) border-box;border:2px solid transparent;border-radius:20px;box-shadow:0 8px 26px rgba(50,126,12,.15);padding:clamp(1rem,1rem + .4vw,1.35rem);display:grid;gap:.6rem;text-align:center}
.service-card h3{font-weight:800;font-size:clamp(1.08rem,1rem + .45vw,1.28rem)}
.service-card p{color:var(--ink-600)}
.service-list{padding-left:1.1rem;display:grid;gap:.25rem;text-align:left}
.service-list li{color:var(--ink-600);font-size:var(--step--1)}
.services-cta{margin-top:var(--s-5);display:flex;justify-content:center;gap:1rem}

/* =========================
   PORTFOLIO (image auto slider)
========================= */
.portfolio{padding-block:var(--s-5)}
.portfolio .h2{color:var(--green)}
.portfolio .filters{margin:.35rem 0 1.25rem 0;color:var(--ink-900);font-weight:700}
.portfolio .filters span{margin:0 .35rem}
.slider-viewport{position:relative;overflow:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
.slider-track{display:flex;gap:clamp(1rem,1vw,1.5rem);padding-inline:2rem;user-select:none;}
.slide{flex:0 0 auto;width:min(240px,40vw);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px rgba(0,0,0,.08);background:#fff;cursor:pointer;transition:transform .15s}
.slide:active{transform:scale(.97)}
.slide img{width:100%;height:auto}
@media(min-width:1024px){.slide{width:260px}}

/* =========================
   “NEED SOMETHING ELSE?” PANEL
========================= */
.more-services{padding-block:calc(var(--s-5) * .8)}
.more-services .panel{background:var(--panel-bg);border:1px solid var(--menu-border);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);padding:clamp(1.25rem,1rem + 1vw,2rem)}
.panel-head{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:.25rem}
.panel-icon{inline-size:28px;block-size:28px;border-radius:9999px;display:grid;place-items:center;background:#E6F6E6;border:1px solid #BFE3BF}
.panel-title{font-weight:800;font-size:clamp(1.4rem,1rem + 1vw,1.9rem)}
.panel-sub{color:var(--ink-600);margin:.25rem 0 1rem 0;text-align:center}
.more-list{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding:0;list-style:none;margin:0 0 1.25rem 0}
.more-list li{flex:1 1 auto;text-align:center;min-width:140px;font-weight:600}
.panel-cta{display:flex;justify-content:center}

/* =========================
   WHY PARTNER
========================= */
.why{padding-block:var(--s-5)}
.why .h2{color:var(--green);margin-bottom:var(--s-4)}
.why-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:720px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{background:#fff;border:1px solid #E6ECF3;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px rgba(0,0,0,.06);padding:1.1rem 1.25rem;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:flex-start}
.why-icon{inline-size:82px;block-size:82px;border-radius:14px;display:grid;place-items:center;background:#f3f9ef;border:1px solid #daf0cf}
.why-icon img{width:48px;height:48px;object-fit:contain}
.why-title{font-weight:800;color:var(--green-600);margin-bottom:.25rem;font-size:1.06rem}
.why-text{color:var(--ink-600)}

/* ===== Case Studies (tap-only; infinite; center reveal) ===== */
.case-studies {
  padding-block: var(--s-5);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow-x: hidden; /* no side gap */
  overflow-y: visible; /* allow top/bottom scaling */
}

.cs-wrap {
  max-width: 1200px;
  margin-inline: auto;
  overflow: visible; /* ensure vertical scaling isn't cut */
}

.cs-viewport {
  position: relative;
  overflow-x: hidden; /* hide horizontal overflow only */
  overflow-y: visible; /* allow top/bottom animation space */
  max-width: 100%;
  padding-block: 2rem; /* gives breathing room for the scaled card */
  box-sizing: border-box;
}

/* Card Track */
.cs-track {
  display: flex;
  gap: clamp(1rem, 1.4vw, 1.6rem);
  justify-content: center;
  align-items: stretch;
  touch-action: pan-y;
  user-select: none;
}

/* Individual Cards */
.cs-card {
  position: relative;
  flex: 0 0 clamp(240px, 28vw, 420px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6eaf2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease,
    filter 0.35s ease, opacity 0.35s ease;
  aspect-ratio: 16 / 9;
  will-change: transform;
}

/* Card Image */
.cs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}

/* Card Positions */
.cs-card[data-pos="out"] {
  display: none;
}
.cs-card[data-pos="-1"] {
  transform: translateX(-6%) scale(0.88);
  filter: saturate(0.9);
  opacity: 0.9;
}
.cs-card[data-pos="1"] {
  transform: translateX(6%) scale(0.88);
  filter: saturate(0.9);
  opacity: 0.9;
}
.cs-card[data-pos="0"] {
  transform: translateX(0) scale(1.1);
  z-index: 2;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
  opacity: 1;
}

/* Card Text Overlay */
.cs-card .cs-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.65) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
  color: #fff;
  padding: 1rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease;
}

.cs-card .cs-text h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
  line-height: 1.25;
}
.cs-card .cs-text h3 a {
  color: #fff;
  text-decoration: underline;
}
.cs-card .cs-text p {
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Reveal Animation */
.cs-card.reveal[data-pos="0"] img {
  transform: translateY(-10px);
}
.cs-card.reveal[data-pos="0"] .cs-text {
  max-height: 180px;
  opacity: 1;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  .cs-viewport {
    padding-block: 1.5rem;
  }
  .cs-card[data-pos="0"] {
    transform: scale(1.06);
  }
  .cs-card.reveal[data-pos="0"] img {
    transform: translateY(-6px);
  }
  .cs-card.reveal[data-pos="0"] .cs-text {
    max-height: 90px;
  }
  .cs-card .cs-text p {
    display: none;
  }
}

/* =========================
   CTA BAND
========================= */
.cta-band{background:var(--cta-band);padding:1.4rem 0}
.cta-card{width:min(100% - 2.5rem,1040px);margin:0 auto;background:#fff;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.12);padding:1.2rem .9rem;border:1px solid #ECEEF6}
.cta-title{font-weight:800;font-size:clamp(1.4rem,1rem + 1.3vw,1.9rem);text-align:center;margin-bottom:.45rem}
.cta-sub{color:var(--ink-600);text-align:center;margin-bottom:.7rem}
.cta-row-1{display:flex;justify-content:center;align-items:center;gap:.8rem;margin-bottom:.65rem}
.cta-stars{color:var(--star);font-size:1rem}
.cta-meta{color:#8792a6;font-size:.92rem}
.cta-bullets{display:flex;justify-content:center;gap:1.1rem;color:#8b95a7;font-weight:600;font-size:.95rem}
.cta-outer{width:min(100% - 1.5rem,1200px);margin:0 auto;border-radius:12px}

/* =========================
   FOOTER (mobile tidy)
========================= */
.footer{background:#fff;border-top:1px solid #E6ECF3;margin-top:var(--s-5)}
.footer-inner{display:grid;gap:1.5rem;grid-template-columns:1fr;max-width:1200px;margin:0 auto;padding:2rem 1rem}
@media(min-width:860px){.footer-inner{grid-template-columns:1.2fr .9fr .7fr}}
.footer h4{font-weight:800;margin-bottom:.75rem}
.footer p,.footer li{color:var(--ink-700)}
.footer .logo{height:56px;margin-bottom:.75rem}
.socials{display:flex;gap:.5rem;margin-top:.75rem}
.socials img{width:22px;height:22px;object-fit:contain}
.quick-links ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}
.attr{font-size:.85rem;color:var(--ink-600);margin-top:.75rem}
.attr a{color:inherit;text-decoration:underline}

/* Footer mobile polish */
@media (max-width:576px){
  .footer-inner{grid-template-columns:1fr;text-align:center}
  .footer .logo{margin-inline:auto}
  .footer .btn{display:inline-flex;margin-top:.5rem}
  .footer .socials{justify-content:center;flex-wrap:wrap}
  .footer .socials img{width:20px;height:20px;margin:0 .25rem .25rem 0}
  .quick-links ul{justify-items:center}
}

/* =========================
   MODAL (portfolio fullscreen image)
========================= */
#modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  display:none; align-items:center; justify-content:center;
  z-index:9000; /* above everything */
}
#modal{
  background:#000; border-radius:16px; padding:10px;
  width:min(94vw,820px); height:min(88vh,82vw);
  max-width:90vw; max-height:90vh;
  box-shadow:0 0 32px rgba(0,0,0,.3);
  position:relative; display:flex; align-items:center; justify-content:center;
}
#modal img{width:100%;height:100%;object-fit:contain;border-radius:12px;pointer-events:none}
#modal .close-btn{
  position:absolute; top:-44px; right:-6px; font-size:32px; background:none; border:none; color:#fff; cursor:pointer; font-weight:800; text-shadow:0 0 5px rgba(0,0,0,.6)
}
#modal .close-btn:hover{color:#ffddd6}
.body-lock{position:fixed;width:100%;overflow:hidden}

/* =========================
   MOBILE TIGHTEN-UPS
========================= */
@media (max-width:768px){
  :root { --header-h:56px; }
  .hero{min-height:auto;padding-block:16px;justify-content:center}
  .hero-inner{padding-block:12px}
  .hero-stack > * + *{margin-top:10px}
  .hero h1{margin:6px 0 10px;font-size:clamp(22px,6.4vw,32px)}
  .hero p{margin:0;font-size:clamp(14px,4vw,16px);line-height:1.5}
}
@media (max-width:576px){
  .cta-band{padding:0.9rem 0}
  .cta-card{width:auto;margin-inline:0.75rem;padding:0.9rem 0.85rem;border-radius:12px}
  .cta-title{font-size:1.15rem;margin-bottom:0.35rem;line-height:1.25}
  .cta-sub{font-size:0.95rem;margin-bottom:0.6rem}
  .cta-row-1{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:0.6rem}
  .cta-row-1 .btn{width:100%}
  .cta-stars{font-size:0.95rem;text-align:center}
  .cta-meta{font-size:0.9rem;text-align:center;white-space:normal}
  .cta-bullets{display:grid;grid-template-columns:1fr;row-gap:8px;font-size:0.95rem;text-align:left;justify-items:start}
}

/* SAFETY: avoid accidental new stacking contexts */
.site-header, .header-inner{transform:none !important; filter:none !important}