:root{
  --brand1:#b7f032; /* lime */
  --brand2:#1cab4a; /* green */
  --ink:#08210f;    /* deep green text */
  --bg:#ffffff;     /* white page */
  --card:#ffffff;   /* white cards */
  --accent:linear-gradient(90deg,var(--brand1),var(--brand2));
}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#ffffffd9;backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #e8f7e8; box-shadow:0 6px 18px rgba(28,171,74,.08)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#0c3b1f;font-weight:800}
.brand img{height:40px;width:auto;border-radius:6px}
.site-header nav a{margin-left:18px;color:#0c3b1f;text-decoration:none;opacity:.8}
.site-header nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
/* Hero */
.hero{position:relative;height:64vh;min-height:420px;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero-slide.active{opacity:1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(0,0,0,.35));}
.hero-content{position:relative;z-index:1;padding-top:18vh;color:#ffffff}
.hero h1{font-size:clamp(28px,4vw,46px);margin:0 0 10px}
.hero .cta .btn{margin-right:10px}
/* Buttons */
.btn{background:var(--accent);border:none;color:#0c240f;font-weight:800;padding:12px 18px;border-radius:12px;text-decoration:none;display:inline-block;box-shadow:0 10px 28px rgba(86,255,100,.25)}
.btn.ghost{background:transparent;border:1px solid #c5ff86;color:#d7ffc4}
/* Sections */
.section{padding:56px 0}
.section h2,.section h1{margin:0 0 8px}
.lead{opacity:.85;margin:0 0 22px}
/* Grid and cards */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.card2{background:var(--card);border:1px solid #e8f7e8;border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);display:block;min-height:180px;box-shadow:0 6px 18px rgba(28,171,74,.08)}
.card2 .icon{width:44px;height:44px;border-radius:12px;background:var(--accent);display:grid;place-items:center;color:#0b1a0f;font-weight:900;box-shadow:0 8px 24px rgba(28,171,74,.25)}
.card2 h3{margin:12px 0 8px}
.card2 p{margin:0;opacity:.85}
/* Photo-backed service boxes */
.card2.service-bg{position:relative;background-color:transparent !important;background-size:cover !important;background-position:center !important;box-shadow:0 12px 28px rgba(28,171,74,.12);isolation:isolate;min-height:230px;color:#fff}
.card2.service-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.35) 100%);z-index:0;border-radius:16px}
.card2.service-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.30);opacity:0;transition:opacity .35s ease;z-index:0;border-radius:16px}
.card2.service-bg:hover{transform:translateY(-2px) scale(1.02);transition:transform .35s ease}
.card2.service-bg:hover::after{opacity:.9}
.card2.service-bg .icon,.card2.service-bg h3,.card2.service-bg p{position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.45)}
/* Assign images */
.svc-photo{background-image:url('../images/svc-photo.jpg') !important}
.svc-video{background-image:url('../images/svc-video.jpg') !important}
.svc-live{background-image:url('../images/svc-live.jpg') !important}
.svc-frame{background-image:url('../images/svc-frame.jpg') !important}
.svc-led{background-image:url('../images/svc-led.jpg') !important}
.svc-pa{background-image:url('../images/svc-pa.jpg') !important}
.svc-drone{background-image:url('../images/svc-drone.jpg') !important}
.svc-corp{background-image:url('../images/svc-corp.jpg') !important}
/* Portfolio */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.video-grid{grid-template-columns:1fr}}
.video{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.video img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.video .play{position:absolute;inset:auto 12px 12px auto;background:rgba(0,0,0,.5);color:#fff;padding:6px 10px;border-radius:999px}
.video:hover img{transform:scale(1.03)}
/* Footer (brighter) */
.site-footer{background:linear-gradient(180deg,#ffffff,#e8fbe8);border-top:1px solid #d9f4d9;color:#0c3b1f}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.site-footer h4{margin:0 0 8px}
.site-footer .copy{margin-top:14px;padding-top:10px;border-top:1px solid #ccefcf;opacity:.9}
/* Forms */
.contact-form{display:grid;gap:12px;max-width:700px}
.contact-form input,.contact-form textarea{background:#0f1913;border:1px solid rgba(255,255,255,.08);color:#eaffea;padding:12px;border-radius:10px}

/* Edge-to-edge Portfolio on Home */
.wide-portfolio{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:36px 4vw;background:linear-gradient(180deg,#ffffff 0%, #eaffea 100%);border-top:1px solid #e8f7e8;border-bottom:1px solid #e8f7e8}
.wide-wrap{max-width:1240px;margin:0 auto}
.wide-portfolio .title{text-align:center;margin:0 0 6px}
.wide-portfolio .sub{text-align:center;opacity:.8;margin:0 0 16px}
.wide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1200px){.wide-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.wide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wide-grid{grid-template-columns:1fr}}
.wide-grid a.video,.wide-grid article{display:block;border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e8f7e8;box-shadow:0 6px 24px rgba(0,128,0,.06);transform:translateZ(0);transition:transform .3s, box-shadow .3s}
.wide-grid a.video:hover,.wide-grid article:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,128,0,.18)}
.wide-grid img{width:100%;height:220px;object-fit:cover;display:block}
.wide-grid .play{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.5);color:#fff;padding:6px 10px;border-radius:999px}

/* Sticky footer for About only */
.page.about-page{min-height:100vh;display:flex;flex-direction:column}
.page.about-page main{flex:1}

/* About premium layout */
.about-hero-pro{background:linear-gradient(180deg,#ffffff,#f4fff2)}
.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:900px){.about-columns{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3{grid-template-columns:1fr}}
.card2.thin{min-height:auto}
.stats-strip{background:linear-gradient(90deg,#eaffea,#ffffff);border-top:1px solid #e8f7e8;border-bottom:1px solid #e8f7e8}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:980px;margin:0 auto;text-align:center;padding:10px 0}
.stats strong{display:block;font-size:28px;color:#16783b}
.stats span{opacity:.8}

/* Full-width (edge-to-edge) sections for About */
.bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:54px 4vw;border-top:1px solid #e8f7e8;border-bottom:1px solid #e8f7e8}
.bleed.white{background:#ffffff}
.bleed.soft{background:linear-gradient(180deg,#ffffff 0%, #f4fff2 100%)}
.hero-white{background:linear-gradient(180deg,#ffffff 0%, #eaffea 100%);padding-top:72px}
.wide{max-width:1240px;margin:0 auto}

/* About hero */
.wrap-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.hero-copy .title{margin:0 0 10px}
.cta-row{display:flex;gap:12px;margin-top:10px}
.hero-badge{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.badge{background:#ffffff;border:1px solid #e8f7e8;border-radius:14px;padding:14px;text-align:center;box-shadow:0 6px 22px rgba(28,171,74,.08)}
.badge strong{display:block;font-size:26px;color:#16783b}
.badge span{opacity:.8}

/* Wide columns & cards */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:900px){.cols-2{grid-template-columns:1fr}}
.grid-3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.grid-3-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-3-cards{grid-template-columns:1fr}}
.card2.thin{min-height:auto}

/* Keep footer at bottom (already ensured by page.about-page rules) */

/* About page rotating hero background */
.hero-stack{position:relative; padding:0}
.hero-stack .slides{position:absolute; inset:0; overflow:hidden; border-bottom:1px solid #eaf8ea}
.hero-stack .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; animation: heroFade 36s infinite; transform:scale(1.06)}
.hero-stack .slide:nth-child(1){animation-delay:0s}
.hero-stack .slide:nth-child(2){animation-delay:6s}
.hero-stack .slide:nth-child(3){animation-delay:12s}
.hero-stack .slide:nth-child(4){animation-delay:18s}
.hero-stack .slide:nth-child(5){animation-delay:24s}
.hero-stack .slide:nth-child(6){animation-delay:30s}
@keyframes heroFade{
  0%{opacity:0}
  5%{opacity:1}
  25%{opacity:1}
  30%{opacity:.0}
  100%{opacity:0}
}
.hero-stack .overlay-copy{position:relative; z-index:2; padding:84px 4vw}
.hero-stack::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.15) 100%); z-index:1}
.hero-copy .title{color:#0d4; color:#0d8f3a}
.hero-stack .hero-copy p{color:#093;}


/* Floating WhatsApp button */
.wa-float{
  position:fixed;
  top:14px;
  right:14px;
  z-index:1000;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.wa-float:hover{ transform:translateY(-1px); filter:brightness(0.95); box-shadow:0 12px 24px rgba(0,0,0,.18) }
.wa-float svg{ width:26px;height:26px;display:block }
@media (max-width:600px){
  .wa-float{ top:10px; right:10px; width:42px; height:42px }
  .wa-float svg{ width:22px; height:22px }
}


/* WhatsApp Hover Enhancement */
.wa-float{
  position:fixed;
  top:14px; right:14px;
  z-index:1000;
  width:auto; height:46px;
  display:flex; align-items:center; gap:10px;
  border-radius:999px;
  background:#25D366; color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  text-decoration:none;
  padding:0 14px 0 12px;
  transition:all .2s ease-in-out;
}
.wa-float:hover{ transform:scale(1.05); box-shadow:0 12px 24px rgba(0,0,0,.18); }
.wa-float svg{ width:26px; height:26px; fill:#fff; }
.wa-text{
  opacity:0; max-width:0; overflow:hidden;
  white-space:nowrap;
  transition:all .25s ease;
  font-weight:600; font-size:15px; letter-spacing:.3px;
}
.wa-float:hover .wa-text{ opacity:1; max-width:100px; }
@media (max-width:600px){
  .wa-float{ height:42px; padding:0 10px; }
  .wa-float svg{ width:22px; height:22px; }
  .wa-text{ display:none; }
}


/* Floating Email button (next to WhatsApp) */
.mail-float{
  position:fixed;
  top:14px; right:70px;  /* sits to the left of WhatsApp */
  z-index:1000;
  height:46px;
  display:flex; align-items:center; gap:10px;
  border-radius:999px;
  background:#0ea5e9; /* sky blue */
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  text-decoration:none;
  padding:0 14px 0 12px;
  transition:all .2s ease-in-out;
}
.mail-float:hover{ transform:scale(1.05); box-shadow:0 12px 24px rgba(0,0,0,.18); }
.mail-float svg{ width:24px; height:24px; fill:#fff; }
.mail-text{
  opacity:0; max-width:0; overflow:hidden;
  white-space:nowrap;
  transition:all .25s ease;
  font-weight:600; font-size:15px; letter-spacing:.3px;
}
.mail-float:hover .mail-text{ opacity:1; max-width:100px; }
@media (max-width:600px){
  .mail-float{ top:10px; right:60px; height:42px; padding:0 10px; }
  .mail-float svg{ width:20px; height:20px; }
  .mail-text{ display:none; }
}


/* Floating Call button (next to Email) */
.call-float{
  position:fixed;
  top:14px; right:130px;  /* sits to the left of Email */
  z-index:1000;
  height:46px;
  display:flex; align-items:center; gap:10px;
  border-radius:999px;
  background:#22c55e; /* green */
  color:#fff;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  text-decoration:none;
  padding:0 14px 0 12px;
  transition:all .2s ease-in-out;
}
.call-float:hover{ transform:scale(1.05); box-shadow:0 12px 24px rgba(0,0,0,.18); }
.call-float svg{ width:22px; height:22px; fill:#fff; }
.call-text{
  opacity:0; max-width:0; overflow:hidden;
  white-space:nowrap;
  transition:all .25s ease;
  font-weight:600; font-size:15px; letter-spacing:.3px;
}
.call-float:hover .call-text{ opacity:1; max-width:100px; }
@media (max-width:600px){
  .call-float{ top:10px; right:120px; height:42px; padding:0 10px; }
  .call-float svg{ width:20px; height:20px; }
  .call-text{ display:none; }
}


/* ==== Contact FABs: Mobile & Tablet Fit ==== */

/* Default (desktop): keep WhatsApp & Email top-right, hide Call */
@media (min-width: 1024px){
  .call-float{ display:none !important; }
}

/* Mobile & Tablet layout: dock to bottom-right with safe-area, stack neatly */
@media (max-width: 1023px){
  .wa-float, .mail-float, .call-float{
    position:fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    top: auto;  /* override top positioning */
    width:auto; height:52px;
    border-radius:999px;
    padding:0 14px 0 12px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    z-index:1000;
  }
  /* Stack upward with gap */
  .wa-float{ transform: translateY(-128px); }
  .mail-float{ transform: translateY(-64px); background:#0ea5e9; }
  .call-float{ transform: translateY(0); background:#22c55e; }
  /* Hide labels to save space; icons remain tappable */
  .wa-text, .mail-text, .call-text{ display:none !important; }
  .wa-float svg{ width:26px; height:26px; }
  .mail-float svg{ width:24px; height:24px; }
  .call-float svg{ width:24px; height:24px; }
}

/* Small phones: tighten vertical spacing slightly */
@media (max-width: 420px){
  .wa-float{ transform: translateY(-116px); }
  .mail-float{ transform: translateY(-58px); }
}


/* ===== Mobile visual fixes: make hero truly full width, remove side white, icons in header ===== */

/* Ensure any 'bleed' sections are truly edge-to-edge on phones */
@media (max-width: 767px){
  .bleed{ padding-left:0; padding-right:0; }
  .wide{ max-width:none; margin:0; }
  /* Rotating hero background: lock to full viewport width */
  .hero-stack{ width:100vw; margin-left:calc(50% - 50vw); }
  .hero-stack .overlay-copy{ padding:56px 16px; }
  .wrap-hero{ grid-template-columns:1fr; gap:16px; }
  .hero-badge{ grid-template-columns:repeat(2,1fr); }
  /* Prevent inner containers adding white gutters on mobile */
  .wrap, .container{ max-width:none; margin:0; padding-left:0; padding-right:0; }
  /* Make background slides cover fully */
  .hero-stack .slides, .hero-stack .slide{ left:0; right:0; }
  .hero-stack .slide{ background-size:cover; background-position:center; }
  /* Give the hero a comfortable vertical height on phones */
  .hero-stack .overlay-copy{ min-height:60vh; display:flex; flex-direction:column; justify-content:flex-end; }
}

/* ===== Contact icons: move to header on mobile, inline row (right side) ===== */
@media (max-width: 1023px){
  /* Reset previous bottom-right stacking */
  .wa-float, .mail-float, .call-float{
    position:fixed;
    bottom:auto !important;
    top:10px !important;
    z-index:1100;
    height:40px;
    padding:0 10px;
    box-shadow:0 8px 18px rgba(0,0,0,.14);
  }
  /* Align as a tight row in the header area */
  .wa-float{ right:10px; }
  .mail-float{ right:60px; }
  .call-float{ right:110px; display:flex; } /* call visible on phones/tablets */
  /* Hide expanding labels for clean header placement */
  .wa-text, .mail-text, .call-text{ display:none !important; }
  .wa-float svg{ width:22px; height:22px; }
  .mail-float svg, .call-float svg{ width:20px; height:20px; }
}

/* Keep call hidden on desktops */
@media (min-width: 1024px){
  .call-float{ display:none !important; }
}