/* ── Reset & Variables ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--bg-alt:#F8F9FC;--bg-dark:#060C1A;--bg-dark2:#0C1528;
  --surface:#ffffff;--surface2:#f1f5f9;--border:#e2e8f0;--border2:#cbd5e1;
  --primary:#4F46E5;--primary-dark:#4338CA;--primary-light:#EEF2FF;
  --secondary:#7C3AED;--accent:#0EA5E9;--green:#10B981;--gold:#C9A227;
  --text:#111827;--text2:#374151;--text3:#6B7280;--text4:#9CA3AF;
  --radius:16px;--radius-sm:10px;
  --shadow:0 4px 24px rgba(0,0,0,.08);--shadow-md:0 8px 40px rgba(0,0,0,.12);
  --font:'Plus Jakarta Sans',system-ui,sans-serif;
  --transition:.3s cubic-bezier(.4,0,.2,1);
  --nav-h:72px;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:var(--nav-h)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}
::selection{background:rgba(79,70,229,.15);color:var(--primary)}
a{text-decoration:none}
/* Shared keyframes used across multiple sections */
@keyframes ringR{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes bpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3);opacity:.7}}
/* ✅ GLOBAL MOBILE OVERFLOW FIX */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ✅ FORM MOBILE FIX */
@media (max-width: 768px) {
  form,
  .form,
  .contact-form,
  .form-card,
  .contact-card,
  .contact-wrapper,
  .contact-container,
  .contact-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: hidden !important;
  }

  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    min-width: 0 !important;
  }

  textarea {
    resize: vertical;
  }

  .form-row,
  .input-row,
  .contact-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }
}

/* ✅ FOOTER MOBILE FIX */
@media (max-width: 768px) {
  .footer,
  footer,
  .site-footer {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .footer-container,
  .footer-inner,
  .footer-content,
  .footer-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .footer-brand,
  .footer-col,
  .footer-links,
  .footer-bottom {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }

  .footer-logo,
  .footer-brand img {
    max-width: 160px !important;
    height: auto !important;
  }
}

@media (max-width: 360px) {
  form,
  .form,
  .contact-form,
  .form-card,
  .contact-card,
  .contact-wrapper,
  .contact-container,
  .contact-section,
  .footer,
  footer,
  .site-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .footer-logo,
  .footer-brand img {
    max-width: 135px !important;
  }
}
/* ✅ Prevent large text/buttons from breaking mobile width */
@media (max-width: 768px) {
  h1, h2, h3, p, a, span, button {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .btn,
  .button,
  .primary-btn,
  .secondary-btn {
    max-width: 100% !important;
    white-space: normal !important;
  }
}
/* ✅ FINAL FORM AUTO-ADJUST FIX FOR ALL MOBILES */
@media (max-width: 768px) {
  .contact-section,
  .contact-wrapper,
  .contact-container,
  .contact-grid,
  .contact-card,
  .form-card,
  .contact-form,
  form {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden !important;
  }

  .contact-grid,
  .contact-wrapper,
  .contact-container {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .form-group,
  .input-row {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  textarea {
    resize: vertical;
  }

  button,
  .btn,
  .submit-btn,
  .form-submit,
  .contact-form button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .contact-section,
  .contact-wrapper,
  .contact-container,
  .contact-grid,
  .contact-card,
  .form-card,
  .contact-form,
  form {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ✅ REMOVE HERO IMAGES ON MOBILE */
@media (max-width: 768px) {
  
  /* Contact page */
  .hero-hands,
  .contact-hero-image,
  .contact-banner-image {
    display: none !important;
  }

  /* Enquiry page */
  .enquiry-hero-image,
  .enquiry-banner-image,
  .enquiry-illustration {
    display: none !important;
  }

  /* Blog page */
  .blog-hero-image,
  .blog-banner-image,
  .blog-illustration,
  .blog-hero-art {
    display: none !important;
  }

  /* Remove empty spacing */
  .page-hero.ph-enhanced,
  .enquiry-hero,
  .blog-hero {
    min-height: auto !important;
    padding-bottom: 40px !important;
  }

  .page-hero.ph-enhanced .container,
  .enquiry-hero .container,
  .blog-hero .container {
    display: block !important;
  }
}
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

* {
  box-sizing: border-box;
}
/* =========================
   GLOBAL SMOOTH + FAST
========================= */

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  backface-visibility:hidden;
}

/* FAST IMAGES */
img,
video{
  max-width:100%;
  height:auto;
  display:block;
}

/* GPU ACCELERATION */
.reveal,
.reveal-left,
.reveal-right,
.card,
.pcard,
.portfolio-card-final{
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform, opacity;
}

/* SMOOTH TRANSITIONS */
a,
button,
.btn,
.card,
.pcard,
.portfolio-card-final{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
}

/* MOBILE PERFORMANCE */
@media (max-width:768px){

  *{
    -webkit-tap-highlight-color:transparent;
  }

  body{
    overflow-x:hidden;
  }

  .container{
    width:min(100% - 24px, 1400px);
  }

  img{
    image-rendering:auto;
  }

  /* REDUCE HEAVY BLURS */
  .blob,
  .hero-glow,
  .ph-blob,
  .mesh,
  .gradient-blur{
    filter:blur(60px) !important;
    opacity:.5;
  }

  /* FASTER ANIMATIONS */
  .reveal,
  .reveal-left,
  .reveal-right{
    transition-duration:.45s !important;
  }

  /* MOBILE BUTTON FEEL */
  button,
  .btn,
  a{
    touch-action:manipulation;
  }

}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

}
/* FIX: keep fixed elements truly fixed on homepage/portfolio */
html,
body{
  perspective:none !important;
  transform:none !important;
  filter:none !important;
}

.navbar,
#globalWhatsappFloat,
.whatsapp-float{
  position:fixed !important;
  transform:none !important;
  will-change:auto !important;
}
.navbar{
  transform:translateY(0);
  will-change:transform;
}

.navbar.nav-hidden{
  transform:translateY(-100%) !important;
}