/* =========================================================
   KRETIVZ — enhancement layer (logo, images, footer offices,
   WhatsApp CTA, quote form, responsive polish). Loaded last.
   ========================================================= */

/* ---- Consistent dark glassy header so the white logo reads ---- */
.site-header{background:rgba(7,49,26,.92)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;}
.site-header .nav-link,.site-header .brand{color:#fff!important;}
.site-header .nav-link:hover{color:#c5ec6c!important;}
.site-header .btn-light{background:#fff!important;color:#07311a!important;border-color:#fff!important;}
.brand-img{height:46px!important;width:auto!important;}
.site-footer .brand-img{height:52px!important;}

/* ---- Category images fill every solid CSS-art block ---- */
.art-ai,.art-saas,.art-app,.art-web,.art-creative,.art-brand,.art-motion,
.art-illust,.art-doc,.art-mkt,.art-print,.art-pkg{
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
/* keep gallery/blog card text readable over images */
.bento-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,12,.15),rgba(4,20,12,.66));z-index:0;}
.bento-card>*{position:relative;z-index:1;}
.bento-card h3,.bento-card p,.bento-card .tag{color:#fff!important;}
.svc-visual{position:relative;}
.svc-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,20,12,.15),rgba(4,20,12,.55));border-radius:inherit;}
.svc-visual[data-label]::after{position:relative;z-index:1;text-shadow:0 2px 16px rgba(0,0,0,.5);}

/* ---- Hero tile images: graceful cover ---- */
.hero-tile img{width:100%;height:100%;object-fit:cover;display:block;}

/* ================= FOOTER OFFICES + FLAG SHINE ================= */
.footer-offices{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2.5rem 0 1rem;
  padding-top:2rem;border-top:1px solid rgba(255,255,255,.12);}
.office{display:flex;gap:.9rem;align-items:flex-start;}
.office .flag{width:46px;height:32px;border-radius:5px;flex:none;position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.35);}
.office .flag::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:flagShine 3.2s ease-in-out infinite;}
@keyframes flagShine{0%{left:-120%}55%{left:130%}100%{left:130%}}
.flag-pk{background:#01411c;}
.flag-pk::before{content:"";position:absolute;left:0;top:0;width:26%;height:100%;background:#fff;}
.flag-pk .cm{position:absolute;right:14%;top:50%;width:15px;height:15px;border-radius:50%;
  box-shadow:6px 0 0 0 #01411c, inset -4px 0 0 0 #fff;transform:translateY(-50%) rotate(-18deg);}
.flag-pk .star{position:absolute;right:9%;top:32%;color:#fff;font-size:9px;line-height:1;}
.flag-ksa{background:#006c35;display:flex;align-items:center;justify-content:center;}
.flag-ksa .txt{color:#fff;font-size:7px;font-weight:700;letter-spacing:.3px;text-align:center;line-height:1.15;}
.flag-ksa .sword{display:block;height:2px;width:70%;margin:2px auto 0;background:#fff;border-radius:2px;}
.office h5{color:#fff;font-size:.92rem;margin:0 0 .25rem;font-weight:700;letter-spacing:.2px;}
.office p{margin:0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);}
.office a{color:#c5ec6c;text-decoration:none;}
.office a:hover{text-decoration:underline;}
@media(max-width:720px){.footer-offices{grid-template-columns:1fr;}}

/* ================= WHATSAPP FLOATING CTA ================= */
.wa-float{position:fixed;right:20px;bottom:22px;z-index:900;display:inline-flex;align-items:center;gap:.6rem;
  background:#25D366;color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;
  padding:.8rem 1.1rem;border-radius:100px;box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s;}
.wa-float:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 38px rgba(37,211,102,.6);}
.wa-float svg{width:26px;height:26px;flex:none;}
.wa-float .wa-label{white-space:nowrap;}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:100px;box-shadow:0 0 0 0 rgba(37,211,102,.55);
  animation:waPulse 2.2s infinite;}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:560px){.wa-float .wa-label{display:none;}.wa-float{padding:.85rem;}}

/* ================= QUOTE FORM ================= */
.quote-section{background:linear-gradient(160deg,#07311a,#041f11);padding:clamp(3rem,7vw,6rem) 0;}
.quote-wrap{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:stretch;}
.quote-intro h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem;}
.quote-intro p{color:rgba(255,255,255,.8);font-size:1.05rem;line-height:1.6;}
.quote-intro .perks{list-style:none;padding:0;margin:1.5rem 0 0;}
.quote-intro .perks li{color:rgba(255,255,255,.9);padding:.5rem 0 .5rem 1.8rem;position:relative;}
.quote-intro .perks li::before{content:"✓";position:absolute;left:0;color:#c5ec6c;font-weight:800;}
.quote-card{background:#fff;border-radius:20px;padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 30px 70px rgba(0,0,0,.35);}
.quote-card h3{margin:0 0 .3rem;color:#07311a;font-size:1.4rem;}
.quote-card .sub{color:#64748b;font-size:.9rem;margin:0 0 1.4rem;}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.qf-field{margin-bottom:1rem;}
.qf-field label{display:block;font-size:.8rem;font-weight:600;color:#334155;margin-bottom:.35rem;}
.qf-field input,.qf-field select,.qf-field textarea{width:100%;padding:.75rem .9rem;border:1.5px solid #e2e8f0;
  border-radius:11px;font:inherit;background:#fff;transition:border-color .15s,box-shadow .15s;}
.qf-field input:focus,.qf-field select:focus,.qf-field textarea:focus{outline:none;border-color:#07311a;box-shadow:0 0 0 3px rgba(7,49,26,.12);}
.qf-field textarea{min-height:96px;resize:vertical;}
.qf-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem;}
.qf-btn{flex:1;min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;border-radius:11px;padding:.9rem 1.1rem;font-weight:700;font-size:.98rem;cursor:pointer;transition:filter .15s,transform .15s;}
.qf-btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.qf-btn.email{background:#07311a;color:#fff;}
.qf-btn.wa{background:#25D366;color:#fff;}
.qf-note{font-size:.78rem;color:#94a3b8;margin-top:.9rem;text-align:center;}
.qf-ok{display:none;text-align:center;padding:1.5rem 0;}
.qf-ok .ic{width:60px;height:60px;border-radius:50%;background:#07311a;color:#c5ec6c;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:.8rem;}
@media(max-width:820px){.quote-wrap{grid-template-columns:1fr;}.qf-row{grid-template-columns:1fr;}}

/* ================= RESPONSIVE POLISH ================= */
img{max-width:100%;}
*{-webkit-tap-highlight-color:transparent;}
@media(max-width:900px){
  .svc-hero-grid{grid-template-columns:1fr!important;}
  .svc-visual{min-height:240px!important;}
  .container-wide{padding-left:1.1rem!important;padding-right:1.1rem!important;}
}
@media(max-width:768px){
  .nav-list{display:none!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:1.4rem!important;}
  h1{font-size:clamp(2.1rem,8vw,3rem)!important;}
  .section{padding-top:2.4rem!important;padding-bottom:2.4rem!important;}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr!important;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;justify-content:center;}
}

/* real category photos with bundled fallback */

/* ---- flag images in footer ---- */
.office img.flag{width:46px;height:32px;object-fit:cover;border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.35);}
.site-footer h4{margin-top:2rem;}

/* ================= STRONGER MOBILE / SERVICES RESPONSIVE ================= */
html,body{overflow-x:hidden;max-width:100%;}
img,video{max-width:100%;height:auto;}
@media(max-width:900px){
  /* stack any inline two-column grids in heroes / banners / splits */
  .page-hero [style*="grid-template-columns"],
  .cta-banner [style*="grid-template-columns"],
  .hp2-hero,.hp2-split,.hp2-quote,.hp2-cta,
  .svc-hero-grid{grid-template-columns:1fr!important;}
  /* kill nowrap headings that overflow on small screens */
  [style*="white-space:nowrap"],[style*="white-space: nowrap"]{white-space:normal!important;}
  .svc-visual{min-height:220px!important;margin-top:1rem;}
  h1{font-size:clamp(2rem,8vw,3rem)!important;line-height:1.08!important;}
  .container-wide,.container{padding-left:1.1rem!important;padding-right:1.1rem!important;max-width:100%!important;}
  .hp2-quote{grid-template-columns:1fr!important;text-align:center;}
  .hp2-quote>div:first-child{margin:0 auto;}
}
@media(max-width:640px){
  .feature-grid,.svc-features,.process-grid,.testimonial-grid,.bento-grid,.hp2-bento,.hp2-platforms{grid-template-columns:1fr!important;}
  .bento-card.wide,.bento-card.tall{grid-column:auto!important;grid-row:auto!important;min-height:200px!important;}
  .hp2-chips{gap:.5rem!important;}
  .quote-wrap,.qf-row{grid-template-columns:1fr!important;}
  section{padding-top:2.2rem!important;padding-bottom:2.2rem!important;}
  .price-large{font-size:2rem!important;}
}

/* real ad stills (bundled) for category tiles */


/* sticky header that hides on scroll-down, reappears on scroll-up */
.site-header{position:sticky!important;top:0!important;z-index:1000!important;transition:transform .35s ease,background .3s ease!important;}
.site-header.nav-hidden{transform:translateY(-100%);}
/* Book a demo (header) -> lime */
.site-header .btn-accent{background:#e4ff94!important;color:#07311a!important;border-color:#e4ff94!important;}
.site-header .btn-accent:hover{filter:brightness(.95);}

/* varied real stills for category tiles */
.art-ai{background-image:url(../img/frames/f4.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-saas{background-image:url(../img/frames/f5.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-app{background-image:url(../img/frames/f6.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-web{background-image:url(../img/frames/f13.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-creative{background-image:url(../img/frames/f7.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-brand{background-image:url(../img/frames/f1.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-motion{background-image:url(../img/frames/f8.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-illust{background-image:url(../img/frames/f2.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-doc{background-image:url(../img/frames/f9.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-mkt{background-image:url(../img/frames/f14.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-print{background-image:url(../img/frames/f11.jpg)!important;background-size:cover!important;background-position:center!important;}
.art-pkg{background-image:url(../img/frames/f10.jpg)!important;background-size:cover!important;background-position:center!important;}