*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6;color:#24323d;background:#fff}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 16px}

/* Layout to keep footer at the bottom and prevent jumping */
html{overflow-y:scroll;height:100%}
html,body{height:100%}
body{display:flex;min-height:100vh;flex-direction:column}
main{flex:1}

.topline{background:#eef7f0;border-bottom:1px solid #e1efe4}
.topline-title{margin:0;padding:10px 0;font-weight:600;color:#0FA537;font-size:clamp(15px,2.2vw,18px);text-align:center}

h1,h2,h3{color:#979897;line-height:1.2;margin:0 0 12px}
h1{font-size:clamp(26px,4vw,44px)}
h2{font-size:clamp(22px,3vw,32px)}
h3{font-size:clamp(18px,2.2vw,22px)}
.lead{font-size:clamp(16px,2.2vw,20px);color:#3b4a56}
.small{font-size:14px;color:#5b6b77}

.site-header{position:sticky;top:0;background:#ffffffd9;backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #e6edf2;z-index:10}
.nav{display:flex;justify-content:space-between;align-items:center;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.logo{height:44px;width:auto}
.site-nav{display:flex;gap:16px;align-items:center}
.site-nav a{padding:8px 10px;border-radius:0;color:#24323d}
.site-nav a.active{background:#eef7f0}
.site-nav a.cta{background:#0FA537;color:#fff}
.nav-toggle{display:none;border:1px solid #d5dee6;background:#fff;border-radius:8px;height:36px;width:42px}

.hero{padding:32px 0;background:linear-gradient(180deg,#f7fbf8,transparent)}
.actions{display:flex;gap:12px;margin-top:16px}
.button{display:inline-block;padding:10px 16px;border:1px solid #d5dee6;border-radius:0;background:#fff}
.button.primary{background:#0FA537;color:#fff;border-color:#0FA537}

.features{padding:40px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{border:1px solid #e6edf2;border-radius:0;padding:16px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* References gallery */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ref-card{border:1px solid #e6edf2;border-radius:0;overflow:hidden;background:#fff}
.ref-card .thumb{height:200px;overflow:hidden;background:#f3f6f4}
.ref-card img{width:100%;height:100%;object-fit:cover;display:block}
.ref-content{padding:12px}

/* Home gallery sizing */
.gallery-viewport{max-width:100%;overflow:hidden;border:0}
#home-gallery{width:100%;height:clamp(220px,36vh,420px);object-fit:cover}
#home-video{width:100%;height:clamp(260px,48vh,560px);object-fit:cover;display:block;background:#000}
.highlights{margin:8px 0 0 16px;color:#3b4a56}
.highlights li{margin:2px 0}

/* Video fly-out and CTA fly-in */
.video-flyout{transition:transform .6s ease,opacity .6s ease;will-change:transform,opacity}
.video-flyout.out{transform:translateX(-80px);opacity:0}
/* Default: visible if JS not running */
.cta-flyin{opacity:1;transform:none;transition:transform .6s ease,opacity .6s ease;will-change:transform,opacity}
/* When JS is active, start hidden and slide in */
body.js .cta-flyin{opacity:0;transform:translateX(80px);pointer-events:none}
body.js .cta-flyin.active{opacity:1;transform:none;pointer-events:auto}

/* Lightbox overlay */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.8);z-index:9999;padding:20px}
.lightbox.open{display:flex}
.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;gap:12px}
.lightbox-img{max-width:80vw;max-height:80vh;border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lb-btn{appearance:none;border:0;background:rgba(255,255,255,.9);color:#24323d;border-radius:0;padding:8px 12px;cursor:pointer;font-weight:600}
.lb-btn:disabled{opacity:.4;cursor:not-allowed}
.lb-prev,.lb-next{position:relative}
.lb-close{position:absolute;top:12px;right:12px}
.lb-counter{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.4);padding:4px 8px;border-radius:6px;font-size:14px}

.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.logo-card{display:flex;align-items:center;justify-content:center;border:1px dashed #cfe3d4;border-radius:0;height:96px;color:#3b4a56;background:#f7fbf8}

/* Partner logos slider */
.logos {
  padding: 24px 0;
  overflow: hidden;
}

.logo-slider {
  overflow: hidden;
  border: none;
  border-radius: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

.logo-track {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 16px;
  will-change: transform;
  width: max-content; /* Allow track to be wider than container */
}

.logo-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.logo-slide img {
  max-height: 72px;
  width: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
  transition: transform 0.3s ease;
}

/* Add hover effect for better interactivity */
.logo-slide:hover img {
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
}

@keyframes logo-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reveal animation */
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in-view{opacity:1;transform:none}
/* Staggered H1 line animation */
.h1-stagger{display:inline-block}
h1.h1-stagger span{display:block;opacity:0;transform:translateY(16px)}
.h1-stagger.animate span{animation:lineIn .6s ease-out forwards}
.h1-stagger.animate span:nth-child(1){animation-delay:.05s}
.h1-stagger.animate span:nth-child(2){animation-delay:.22s}
.h1-stagger.animate span:nth-child(3){animation-delay:.39s}
@keyframes lineIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .h1-stagger span{opacity:1;transform:none}
  .h1-stagger.animate span{animation:none}
}
/* Stronger specificity to ensure CTA starts hidden */
.cta-band.reveal{opacity:0 !important;transform:translateY(12px) !important}
.cta-band.reveal.in-view{opacity:1 !important;transform:none !important}

.cta-band{padding:24px 0;background:#eef7f0;border-top:1px solid #e1efe4;border-bottom:1px solid #e1efe4;text-align:center}

.site-footer{border-top:1px solid #e6edf2;background:#fff;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;padding:20px 0;align-items:start;font-size:14px;color:#5b6b77}
.footer-grid a{color:#5b6b77}
.footer-grid > :last-child{ text-align:right; justify-self:end }

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form{display:grid;gap:8px}
input,textarea{width:100%;padding:10px;border:1px solid #d5dee6;border-radius:0;font:inherit}
button{font:inherit}

@media (max-width:900px){
  .grid-3,.cards,.logo-grid,.footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
body.lightbox-open{overflow:hidden}
@media (max-width:640px){
  .site-nav{display:none;position:absolute;top:64px;right:16px;left:16px;flex-direction:column;background:#fff;border:1px solid #e6edf2;border-radius:12px;padding:8px}
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .grid-3,.cards,.logo-grid,.footer-grid{grid-template-columns:1fr}
}

/* Mobile fine-tuning: collapse hero title to one line on very small screens */
@media (max-width:520px){
  .hero h1 br{display:none}
  .hero h1{font-size:clamp(22px,6vw,28px)}
  .hero{padding:32px 0}
}