*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',sans-serif;background:#f0f0ee;color:#111;overflow-x:hidden}

/* ═══════════════ NAVBAR — CLEAN TRANSPARENT ═══════════════ */
nav{
  position:absolute;top:0;left:0;right:0;
  z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  background:transparent;
  border:none;
  box-shadow:none;
  transition:padding .3s;
}
nav::before{content:none}

.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;position:relative;z-index:1}
.logo-img{height:42px;width:auto;object-fit:contain;display:block}
.footer-logo-img{height:52px}

/* Pill nav — no background box, no active highlight */
.nav-pill{
  display:flex;align-items:center;
  background:none;
  border:none;
  border-radius:50px;padding:4px 0;
  list-style:none;gap:2px;position:relative;z-index:1;
}
.nav-pill a{
  display:block;padding:8px 18px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;color:#fff;
  text-decoration:none;border-radius:40px;
  transition:color .22s;white-space:nowrap;
  position:relative;background:none;
}
/* underline only on hover, never for active state */
.nav-pill a::after{
  content:'';
  position:absolute;bottom:2px;left:50%;right:50%;
  height:1.5px;background:rgba(255,255,255,.85);
  border-radius:2px;
  transition:left .28s cubic-bezier(.22,1,.36,1),right .28s cubic-bezier(.22,1,.36,1);
}
.nav-pill a:hover::after{left:14px;right:14px}
.nav-pill a:hover{color:rgba(255,255,255,1)}
/* active: NO background, NO underline */
.nav-pill a.active{background:none;color:#fff}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:6px;z-index:1100;background:none;border:none;position:relative;
}
.hamburger span{
  display:block;width:24px;height:2px;background:#fff;
  border-radius:2px;transition:transform .3s,opacity .3s;transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Small centered dropdown menu */
.mobile-dropdown{
  position:absolute;
  top:calc(100% + 8px);right:18px;
  background:rgba(30,50,65,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  min-width:220px;
  transform:translateY(-10px) scale(.97);
  opacity:0;
  visibility:hidden;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s,visibility .28s;
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  overflow:hidden;
}
.mobile-dropdown.open{
  transform:translateY(0) scale(1);
  opacity:1;visibility:visible;
}
/* centered text in hamburger menu */
.mobile-dropdown a{
  display:block;padding:15px 26px;
  font-family:'Montserrat',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;color:#fff;
  text-decoration:none;text-transform:uppercase;
  text-align:center;
  transition:background .18s;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative;
}
.mobile-dropdown a::after{
  content:'';
  position:absolute;bottom:6px;left:50%;right:50%;
  height:1.5px;background:rgba(255,255,255,.7);
  border-radius:2px;
  transition:left .25s cubic-bezier(.22,1,.36,1),right .25s cubic-bezier(.22,1,.36,1);
}
.mobile-dropdown a:hover::after{left:26px;right:26px}
.mobile-dropdown a:last-child{border-bottom:none}
.mobile-dropdown a:hover{background:rgba(255,255,255,.1)}

/* ═══════════════ HERO ═══════════════ */
#home{
  min-height:100vh;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 48px 200px;overflow:hidden;
}

/* Continuously animated gradient background */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#2e4a5c,#3d6880,#5b8fa8,#4a7a92,#305568,#3d6880,#5b8fa8,#2e4a5c);
  background-size:400% 400%;
  animation:gradMove 9s ease infinite;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 65% 50% at 85% 10%,rgba(255,255,255,.12) 0%,transparent 60%),
    radial-gradient(ellipse 45% 60% at 8% 90%,rgba(0,0,0,.18) 0%,transparent 55%),
    radial-gradient(ellipse 30% 30% at 50% 50%,rgba(100,160,200,.08) 0%,transparent 60%);
}
@keyframes gradMove{
  0%  {background-position:0% 50%}
  33% {background-position:100% 0%}
  66% {background-position:50% 100%}
  100%{background-position:0% 50%}
}

.hero-fade{
  position:absolute;bottom:0;left:0;right:0;height:120px;
  background:linear-gradient(to bottom,transparent,#f0f0ee);z-index:1;pointer-events:none;
}

.hero-content{position:relative;z-index:2;max-width:860px}

/* Slide-up line animation for h1 — each line clips up */
.hero-content h1{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(2.2rem,5.5vw,4.2rem);line-height:.98;
  color:#fff;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;
}
.hero-line{
  display:block;overflow:hidden;
}
.hero-line span{
  display:block;
  opacity:0;
  transform:translateY(100%);
  animation:slideUp .85s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-line:nth-child(1) span{animation-delay:.15s}
.hero-line:nth-child(2) span{animation-delay:.35s}

@keyframes slideUp{
  to{opacity:1;transform:translateY(0)}
}

.hero-content .hero-sub{
  margin-top:14px;
  font-family:'Montserrat',sans-serif;font-style:italic;
  font-size:clamp(.78rem,1.5vw,1rem);letter-spacing:.11em;
  color:rgba(255,255,255,.7);text-transform:uppercase;
  opacity:0;transform:translateY(16px);
  animation:fadeUp .8s .6s cubic-bezier(.22,1,.36,1) forwards;
}

/* CTA button — LIGHTS CAMERA CREATE */
.hero-cta{
  margin-top:32px;
  opacity:0;transform:translateY(16px);
  animation:fadeUp .8s .85s cubic-bezier(.22,1,.36,1) forwards;
  display:inline-block;
}
.lcc-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.95);text-decoration:none;
  border-radius:50px;border:1px solid rgba(255,255,255,.18);cursor:pointer;
  /* dark navy gradient */
  background:linear-gradient(125deg,#0a1628 0%,#0d2347 35%,#102a55 60%,#0a1628 100%);
  background-size:250% 250%;
  animation:btnGrad 7s ease infinite;
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
  box-shadow:0 3px 14px rgba(10,22,40,.55),0 1px 3px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12);
}
@keyframes btnGrad{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* Sweeping glass sheen */
.lcc-btn::before{
  content:'';
  position:absolute;
  top:-80%;left:-40%;
  width:55%;height:260%;
  background:linear-gradient(108deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:skewX(-18deg) translateX(-100%);
  transition:transform .6s ease;
}
.lcc-btn:hover::before{
  transform:skewX(-18deg) translateX(420%);
}
.lcc-btn:hover{
  transform:scale(1.05) translateY(-2px);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 10px 32px rgba(10,22,40,.6),0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);
}
.lcc-btn:active{transform:scale(.97) translateY(1px)}
.lcc-icon{font-size:.95rem;opacity:.85}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}


/* ═══════════════ SERVICES ═══════════════ */

/* 3D carousel */
.carousel-wrap{
  position:relative;width:100%;height:320px;
  perspective:1400px;cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;
}
.carousel-wrap:active{cursor:grabbing}
.carousel-scene{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
}

.c-card{
  position:absolute;
  width:280px;height:175px;
  top:50%;left:50%;
  margin-top:-87px;margin-left:-140px;
  border-radius:16px;overflow:hidden;
  will-change:transform;
  box-shadow:0 10px 34px rgba(0,0,0,.18);
}

.card-bg-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}
.c-card:hover .card-bg-img{transform:scale(1.06)}

/* ═══════════════ SECTION BASE ═══════════════ */
section{padding:90px 48px}
.section-title{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(1.6rem,3.8vw,2.8rem);text-transform:uppercase;
  letter-spacing:.02em;line-height:1;color:#111;
}

.section-sub{
  font-family:'Montserrat',sans-serif;font-style:italic;
  font-size:clamp(.72rem,1.3vw,.88rem);letter-spacing:.12em;
  color:#777;text-transform:uppercase;margin-top:5px;
}

/* ═══════════════ SERVICES ═══════════════ */
#services{background:#f0f0ee;overflow:hidden}
.services-head{margin-bottom:50px}



.services-tagline{
  text-align:center;margin-top:28px;
  font-family:'Montserrat',sans-serif;font-style:italic;
  font-size:clamp(.7rem,1.4vw,.88rem);letter-spacing:.1em;color:#777;
  text-transform:uppercase;line-height:1.65;
}

/* ═══════════════ CTA ═══════════════ */
#contact{background:#f0f0ee}
.cta-head{margin-bottom:52px}
.cta-title{
  font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(1.6rem,3.8vw,2.8rem);text-transform:uppercase;
  line-height:.95;color:#111;
}

.go-row{
  display:flex;align-items:center;justify-content:center;
  gap:22px;margin-bottom:60px;min-height:80px;
}

/* Popup side buttons — liquid glass */
.popup-btn{
  width:82px;height:62px;border-radius:14px;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 6px 18px rgba(0,0,0,.1),
    0 2px 4px rgba(0,0,0,.07);
  opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .25s,background .25s,opacity .3s;
}
.popup-btn::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.popup-btn.show{opacity:1;pointer-events:all}
#popup-sms{transform:translateX(30px) scale(.8)}
#popup-sms.show{transform:translateX(0) scale(1)}
#popup-email{transform:translateX(-30px) scale(.8)}
#popup-email.show{transform:translateX(0) scale(1);transition-delay:.04s}
.popup-btn:hover{
  transform:translateY(-3px) scale(1.05) !important;
  background:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 28px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.1);
}
.popup-btn:active{
  transform:scale(.95) translateY(1px) !important;
  background:rgba(255,255,255,.35);
}
.popup-btn svg{width:26px;height:26px;stroke:rgba(50,60,80,.85)}

/* GO button — physical keyboard key with depth */
.go-btn{
  padding:18px 68px;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:1.1rem;letter-spacing:.15em;
  color:rgba(50,60,75,.92);
  /* key face: light glass */
  background:linear-gradient(175deg,#ffffff 0%,#e8ecf0 55%,#d8dde4 100%);
  border:none;
  border-radius:14px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:1;
  /* The 3D depth — a thick bottom shadow that IS the key body */
  box-shadow:
    /* top specular edge */
    inset 0 1px 0 rgba(255,255,255,1),
    /* right inner shade */
    inset -2px 0 4px rgba(0,0,0,.06),
    /* left inner light */
    inset 2px 0 4px rgba(255,255,255,.8),
    /* bottom inner dark edge */
    inset 0 -2px 0 rgba(0,0,0,.15),
    /* key body depth — this is the "wall" of the key */
    0 8px 0 0 rgba(160,168,180,1),
    0 9px 0 0 rgba(130,140,155,.8),
    0 10px 0 0 rgba(100,110,125,.5),
    /* ambient shadow under key */
    0 12px 18px rgba(0,0,0,.22),
    0 4px 6px rgba(0,0,0,.12);
  transition:transform .08s ease,box-shadow .08s ease;
  top:0;
}
/* Keycap top highlight — the curved top-of-key shine */
.go-btn::before{
  content:'';position:absolute;
  top:2px;left:8px;right:8px;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 100%);
  border-radius:10px 10px 50% 50%;
  pointer-events:none;
}
.go-btn:hover{
  background:linear-gradient(175deg,#ffffff 0%,#edf0f4 55%,#dfe3e9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset -2px 0 4px rgba(0,0,0,.06),
    inset 2px 0 4px rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(0,0,0,.15),
    0 9px 0 0 rgba(160,168,180,1),
    0 10px 0 0 rgba(130,140,155,.8),
    0 11px 0 0 rgba(100,110,125,.5),
    0 14px 20px rgba(0,0,0,.24),
    0 4px 6px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.go-btn:active{
  transform:translateY(7px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 2px 4px rgba(0,0,0,.12),
    0 2px 0 0 rgba(160,168,180,1),
    0 3px 6px rgba(0,0,0,.14);
}
.go-enter{opacity:.4;font-size:.95rem}

/* Social row — physical keyboard keys with brand colour depth */
.social-row{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.s-btn{
  width:82px;height:82px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;
  border:none;
  position:relative;overflow:visible;
  transition:transform .08s ease,box-shadow .08s ease;
  top:0;
}
/* The keycap face */
.s-btn::after{
  content:'';
  position:absolute;inset:0;
  border-radius:18px;
  background:linear-gradient(175deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 55%);
  pointer-events:none;z-index:2;
}
/* Top shine streak */
.s-btn::before{
  content:'';position:absolute;
  top:3px;left:8px;right:8px;height:36%;
  background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 100%);
  border-radius:14px 14px 50% 50%;
  pointer-events:none;z-index:3;
}
.s-btn svg{width:34px;height:34px;flex-shrink:0;position:relative;z-index:4}

.s-btn:hover{transform:translateY(-2px)}
.s-btn:active{
  transform:translateY(7px) !important;
}

/* WhatsApp */
.s-wa{
  background:linear-gradient(160deg,#32e87a 0%,#25d366 50%,#1db954 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 0 0 #128c3e,
    0 9px 0 0 rgba(10,80,35,.6),
    0 12px 18px rgba(18,140,62,.4),
    0 4px 8px rgba(0,0,0,.2);
}
.s-wa:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 10px 0 0 #128c3e,
    0 11px 0 0 rgba(10,80,35,.6),
    0 15px 22px rgba(18,140,62,.45),
    0 5px 10px rgba(0,0,0,.22);
}
.s-wa:active{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2),
    0 1px 0 0 #128c3e,
    0 3px 6px rgba(0,0,0,.2);
}

/* Instagram */
.s-ig{
  background:linear-gradient(135deg,#f5a623 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 0 0 #8e1060,
    0 9px 0 0 rgba(80,10,50,.6),
    0 12px 18px rgba(180,20,100,.35),
    0 4px 8px rgba(0,0,0,.2);
}
.s-ig:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 10px 0 0 #8e1060,
    0 11px 0 0 rgba(80,10,50,.6),
    0 15px 22px rgba(180,20,100,.4),
    0 5px 10px rgba(0,0,0,.22);
}
.s-ig:active{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2),
    0 1px 0 0 #8e1060,
    0 3px 6px rgba(0,0,0,.2);
}

/* Facebook */
.s-fb{
  background:linear-gradient(160deg,#4a90e2 0%,#1877f2 50%,#145dbd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 0 0 #0d4a9e,
    0 9px 0 0 rgba(8,50,100,.6),
    0 12px 18px rgba(20,93,189,.4),
    0 4px 8px rgba(0,0,0,.2);
}
.s-fb:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 10px 0 0 #0d4a9e,
    0 11px 0 0 rgba(8,50,100,.6),
    0 15px 22px rgba(20,93,189,.45),
    0 5px 10px rgba(0,0,0,.22);
}
.s-fb:active{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2),
    0 1px 0 0 #0d4a9e,
    0 3px 6px rgba(0,0,0,.2);
}

/* YouTube */
.s-yt{
  background:linear-gradient(160deg,#ff4444 0%,#ff0000 50%,#cc0000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 0 0 #8b0000,
    0 9px 0 0 rgba(80,0,0,.6),
    0 12px 18px rgba(204,0,0,.4),
    0 4px 8px rgba(0,0,0,.2);
}
.s-yt:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 10px 0 0 #8b0000,
    0 11px 0 0 rgba(80,0,0,.6),
    0 15px 22px rgba(204,0,0,.45),
    0 5px 10px rgba(0,0,0,.22);
}
.s-yt:active{
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.2),
    0 1px 0 0 #8b0000,
    0 3px 6px rgba(0,0,0,.2);
}

/* ═══════════════ FOOTER ═══════════════ */
footer{background:#5a7a92;padding:56px 48px 28px;text-align:center}
.footer-logo{display:inline-flex;align-items:center;text-decoration:none;margin-bottom:36px}
.footer-nav{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-bottom:36px;list-style:none}
.footer-nav a{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.1em;color:rgba(255,255,255,.78);text-decoration:none;text-transform:uppercase;
  transition:color .2s;position:relative;
}
.footer-nav a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:100%;
  height:1.5px;background:#fff;border-radius:2px;
  transition:right .25s cubic-bezier(.22,1,.36,1);
}
.footer-nav a:hover{color:#fff}
.footer-nav a:hover::after{right:0}
.footer-hr{border:none;border-top:1px solid rgba(255,255,255,.18);margin:0 0 18px}
.footer-copy{font-family:'Montserrat',sans-serif;font-size:.65rem;letter-spacing:.1em;color:rgba(255,255,255,.55);text-transform:uppercase;background:#2a1a0e;margin:0 -48px -28px;padding:14px 48px;}

/* ═══════════════ SCROLL REVEAL ═══════════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){
  nav{padding:14px 20px}
  .nav-pill{display:none}
  .hamburger{display:flex}
  #home{padding:0 24px 160px}
  section{padding:70px 24px}
  footer{padding:44px 24px 22px}
  .carousel-wrap{height:260px}
  .c-card{width:220px;height:138px;margin-top:-69px;margin-left:-110px}
}
@media(max-width:480px){
  .nav-logo svg{width:38px;height:38px}
  .logo-text .t1{font-size:1rem}
  .logo-text .t2{font-size:.68rem}
  .carousel-wrap{height:280px}
  .c-card{width:145px;height:185px;margin-top:-92px;margin-left:-72px}
  .go-btn{padding:17px 50px;font-size:1.15rem}
  .popup-btn{width:66px;height:52px}
  /* social buttons — single row */
  .social-row{flex-wrap:nowrap;gap:10px}
  .s-btn{width:58px;height:58px;border-radius:12px}
  .s-btn svg{width:24px;height:24px}
  /* footer nav — single row */
  .footer-nav{flex-wrap:nowrap;gap:10px;overflow-x:auto;padding-bottom:4px}
  .footer-nav a{font-size:.62rem;letter-spacing:.06em;white-space:nowrap}
  .footer-copy{margin:0 -24px -22px;padding:12px 24px}
}

/* gap reduction between services tagline and know us */
#services{padding-bottom:50px}
#about{padding-top:50px}

/* ═══════════════ KNOW US ═══════════════ */
#about{background:#f0f0ee}
.knowus-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:0;
}
.knowus-card{
  background:#fff;
  border-radius:18px;
  padding:36px 28px;
  box-shadow:0 4px 20px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.05);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.knowus-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.07);
}
.knowus-icon{
  font-size:2rem;margin-bottom:16px;
}
.knowus-card h3{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:#111;margin-bottom:12px;
}
.knowus-card p{
  font-family:'Montserrat',sans-serif;font-weight:400;
  font-size:.78rem;line-height:1.75;color:#666;
}
@media(max-width:700px){
  .knowus-grid{grid-template-columns:1fr}
}