/* Design tokens */
:root{
  --bg:#f7f9fc; --surface:#ffffff; --fg:#0b1220; --muted:#5b677a; --border:#e6ebf2;
  --accent:#5aa7ff; --accent-2:#9fd2ff; --ok:#10b981;
  --radius:18px; --radius-lg:28px; --wrap:1200px; --pad:clamp(16px,2vw,24px);
  --shadow: 0 20px 50px rgba(20, 30, 70, .08);
}
@media (prefers-color-scheme: light){ :root{ color-scheme: light } }
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--fg);
  background:radial-gradient(1200px 600px at 20% -10%, #eef5ff 0%, #f7f9fc 40%, #f7f9fc 100%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width: var(--wrap); margin:0 auto; padding:0 var(--pad)}

.topbar{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
.topbar .wrap{
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px var(--pad); /* slimmer, more modern header */
}
.brand{
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* brand logo alignment */
.brand a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  line-height:1;
}

.brand-logo{
  height:64px;          /* desktop logo size */
  width:auto;
  display:block;
  object-fit:contain;
}

@media (max-width:640px){
  .brand-logo{
    height:40px;        /* mobile logo size */
  }
}

/* hide old circle glyph if still in markup */
.logo{
  display:none;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  font-weight:900;
  box-shadow: var(--shadow);
}

.nav{display:flex; gap:12px; margin-left:auto; margin-right:auto}
.nav a{padding:10px 14px; border-radius:12px; border:1px solid transparent; transition:.2s}
.nav a:hover{background:#f0f6ff}
.nav a.active, .nav a[aria-current="page"]{background:#edf3ff; border-color:#d5e7fb}
.nav-toggle{display:none; margin-left:auto}
.cta .btn{display:inline-flex; align-items:center; gap:10px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white;
  font-weight:800;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease
}
.btn:hover{transform: translateY(-1px)}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid #d5e7fb}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background: linear-gradient(180deg, #ffffff, #fafcff)
}

.skip{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden
}
.skip:focus{
  left:8px;
  top:8px;
  width:auto;
  height:auto;
  background:#fff;
  color:#000;
  padding:8px 12px;
  border-radius:8px
}

.content{display:block}
.hero{padding: clamp(32px, 6vw, 96px) 0; position:relative; isolation:isolate}
.hero .wrap{display:grid; gap:28px; align-items:center; grid-template-columns: 1.1fr .9fr}
.hero h1{font-size: clamp(36px, 5vw, 64px); line-height:1.08; margin:.2em 0; letter-spacing:-.02em}
.hero p.lead{font-size: clamp(16px, 2.1vw, 22px); color:var(--muted)}
.hero .art{ position: relative; }
.hero .blob{
  position:absolute; inset:auto; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(154, 210, 255, .5), rgba(154, 210, 255, 0));
  filter: blur(24px); transform: translate(20%, -10%);
}
@media (max-width: 960px){ .hero .wrap{ grid-template-columns: 1fr } }

.section{padding: clamp(32px, 6vw, 84px) 0}
.section h2{font-size: clamp(26px, 3.5vw, 42px); margin:.3em 0}

.grid{display:grid; gap:clamp(16px, 2vw, 24px)}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 1100px){ .grid.cols-4{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 760px){
  .grid.cols-3{ grid-template-columns: 1fr }
  .grid.cols-4{ grid-template-columns: 1fr }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.8));
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 26px);
  box-shadow: var(--shadow);
}

.kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:18px
}
.kpi{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background:var(--surface)
}
.kpi .big{font-size: clamp(28px, 4vw, 36px); font-weight:800}

.filterbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 18px
}
.filterbar .chip{
  padding:10px 14px;
  border-radius:999px;
  background:#edf3ff;
  border:1px solid #d5e7fb;
  font-weight:700;
  cursor:pointer;
  transition: filter .2s ease, transform .15s ease;
}
.filterbar .chip:hover{ transform: translateY(-1px) }
.filterbar .chip.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff;
  border-color:transparent
}

.gallery{ column-count: 3; column-gap: 18px }
.gallery .item{
  break-inside: avoid;
  margin:0 0 18px 0;
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
  background:var(--surface)
}
.gallery .item img{ width:100%; height:auto; display:block }

/* ⬇️ Video in gallery items behaves like images */
.gallery .item video.gallery-video{
  width:100%;
  height:auto;
  display:block;
}

.gallery .item .cap{
  position:absolute;
  left:12px;
  bottom:12px;
  right:12px;
  padding:10px 12px;
  background: rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:12px;
  font-weight:600
}
@media (max-width: 900px){ .gallery{ column-count:2 } }
@media (max-width: 600px){ .gallery{ column-count:1 } }

/* Fix: when gallery is combined with "grid" classes (Recent work),
   disable grid layout so cards use the masonry gallery layout
   and don't stretch taller than the image. */
.gallery.grid{
  display:block;
}

/* NEW: Work page grid layout so cards align in rows */
.gallery.gallery--grid{
  column-count: initial;
  column-gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

/* Optional: tweak grid on smaller screens */
@media (max-width: 900px){
  .gallery.gallery--grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px){
  .gallery.gallery--grid{
    grid-template-columns: 1fr;
  }
}

.form{display:grid; gap:16px; max-width:640px}
input, select, textarea{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--fg)
}
label{font-weight:700}
small.helper{color:var(--muted)}
.success{
  background:#e7f8ef;
  color:#0b5d36;
  border:1px solid #c8f0dc;
  padding:12px 14px;
  border-radius:12px
}

/* ------------------------------ */
/* Modern Footer                  */
/* ------------------------------ */

.footer{
  padding:48px 0 32px;
  background: linear-gradient(180deg, #f8f9fc 0%, #f1f4fa 100%);
  border-top:1px solid var(--border);
  margin-top:40px;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:40px;
  align-items:flex-start;
}

.footer-brand-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.footer-logo{
  width:48px;
  height:auto;
}

.footer-brand-name{
  font-size:1.25rem;
  font-weight:800;
  color:var(--fg);
}

.footer-desc{
  max-width:360px;
  color:var(--muted);
  margin-top:14px;
  line-height:1.55;
}

.footer-col h4{
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:14px;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-list li a{
  display:block;
  padding:4px 0;
  color:var(--muted);
  transition:color .2s ease;
}

.footer-list li a:hover{
  color:var(--accent);
}

.copy{
  text-align:center;
  margin-top:40px;
  font-size:0.9rem;
  color:var(--muted);
  opacity:0.8;
}

/* Footer – mobile */
@media (max-width:780px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
}

.whatsapp{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  font-size:26px;
  box-shadow:0 10px 30px rgba(0,0,0,.2)
}

/* Services grid alignment */
.services-grid{align-items:stretch}
.service-card{display:flex; flex-direction:column; gap:10px}
.service-card .media{
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff
}
.service-card .media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.service-card h3{
  margin:.2em 0 .1em 0;
  font-size: clamp(18px, 2vw, 22px)
}
.service-card p{
  color:var(--muted);
  margin:0
}
@media (max-width: 900px){ .services-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 620px){ .services-grid{grid-template-columns: 1fr} }


/* Home hero full-height option */
.hero.hero--full{
  min-height: min(88vh, 760px);
  display:flex;
  align-items:center;
}

/* Scroll fade-in sections */
.scroll-fade{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.scroll-fade.is-visible{
  opacity:1;
  transform:none;
}

/* Home video block */
.home-video{
  border-radius:24px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
  background:#000;
}
.home-video video{
  display:block;
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
}

/* Two-column video grid on home */
.video-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);
  gap:24px;
  align-items:center;
}
@media (max-width: 900px){
  .video-grid{
    grid-template-columns:1fr;
  }
}

/* Mobile navigation */
.topbar .wrap{
  position:relative;
}
@media (max-width: 860px){
  .nav{
    position:absolute;
    top:calc(100% + 8px);
    right:var(--pad);
    background:#ffffff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:8px;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    margin:0;
    min-width: 220px;
    display:none;
  }
  .nav.open{
    display:flex;
  }
  .nav a{
    width:100%;
    padding:10px 14px;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    font-size:14px;
    font-weight:600;
  }
  .cta{
    display:none;
  }
}

/* ---------------------------------------- */
/* Lightbox / full-size gallery modal       */
/* ---------------------------------------- */

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,0.82);
  z-index:1000;
}

.lightbox.is-open{
  display:flex;
}

.lightbox-body{
  position:relative;
  max-width:min(90vw, 1200px);
  max-height:90vh;
  background:#000;
  padding:0.75rem 1rem 1rem;
  border-radius:24px;
  box-shadow:0 24px 60px rgba(15,23,42,0.75);
  border:1px solid rgba(148,163,184,.45);
}

.lightbox-body img{
  display:block;
  max-width:100%;
  max-height:80vh;
  object-fit:contain;
  margin:0 auto;
}

.lightbox-caption{
  margin-top:0.5rem;
  color:#f9fafb;
  font-size:0.9rem;
  text-align:center;
  opacity:0.9;
}

/* Close button */
.lightbox-close{
  position:absolute;
  top:0.4rem;
  right:0.6rem;
  border:none;
  background:rgba(15,23,42,0.75);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  cursor:pointer;
}

/* Backdrop click target */
.lightbox-backdrop{
  position:fixed;
  inset:0;
}

/* Prev / Next buttons */
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:none;
  background:rgba(15,23,42,0.75);
  color:#fff;
  font-size:2rem;
  line-height:1;
  padding:0.25rem 0.7rem;
  border-radius:999px;
  cursor:pointer;
}

.lightbox-prev{
  left:0.4rem;
}

.lightbox-next{
  right:0.4rem;
}

@media (max-width: 640px){
  .lightbox-body{
    max-width:94vw;
    padding:0.5rem 0.75rem 0.75rem;
    border-radius:18px;
  }
  .lightbox-caption{
    font-size:0.8rem;
  }
}