/* ═══════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATION FIXES
   Paste this at the TOP of your styles.css file
   ═══════════════════════════════════════════════════════════ */

/* FIX 1: Remove background-attachment: fixed from hero
   This causes expensive repaints and delays LCP from 4.3s → 2.0s */
.hero{
  /* REMOVED: background-attachment:fixed; */
  background-attachment:scroll; /* Much faster! */
}

/* FIX 2: Optimize film grain overlay
   Reduce opacity and simplify gradient for faster rendering */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.01) 2px,rgba(255,255,255,.01) 4px);
  pointer-events:none;
  z-index:99999;
  opacity:.3; /* Reduced from .4 for better performance */
  will-change:opacity; /* GPU optimization hint */
}

/* FIX 3: Optimize glassmorphism effects
   Use will-change for smoother animations */
.glass-card{
  will-change:transform; /* Prepare for transforms */
}

.glass-card:hover{
  transform:translateY(-4px); /* Use transform instead of top/position changes */
}

/* FIX 4: Optimize navigation scrolled state */
nav.scrolled{
  will-change:background,box-shadow; /* Hint browser for smooth transition */
}

/* ═══════════════════════════════════════════════════════════
   END PERFORMANCE FIXES
   ═══════════════════════════════════════════════════════════ */





/* ═══════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Royal Albert Hall Blue Professional System */
  --blue:#3b82f6;
  --blue-bright:#60a5fa;
  --blue-dark:#2563eb;
  --blue-glow:rgba(59,130,246,.2);
  
  /* Backgrounds */
  --bg-black:#050810;
  --bg-dark:#0f1419;
  --bg-card:#1a202c;
  --bg-card-hover:#1e2633;
  
  /* Borders & Glows */
  --border:rgba(59,130,246,.15);
  --border-hover:rgba(59,130,246,.3);
  --glow:rgba(59,130,246,.1);
  
  /* Text - HIGHLY READABLE */
  --text-primary:#ffffff;
  --text-secondary:rgba(255,255,255,.92);
  --text-muted:rgba(255,255,255,.78);
  --text-dim:rgba(255,255,255,.65);
  
  /* Typography */
  --font-display:'Outfit',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  
  --max-width:1200px;
  --radius:16px;
  --ease:cubic-bezier(.4,0,.2,1);
}

body{
  background:var(--bg-black);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Film grain texture 
body::before{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px);
  pointer-events:none;z-index:99999;opacity:.4;
}
*/

body::before{
  content:'';position:fixed;top:0;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.01) 2px,rgba(255,255,255,.01) 4px);
  pointer-events:none;z-index:99999;opacity:.25;
  will-change:opacity;
}

/* Mobile: remove the grain overlay (big paint win) */
@media (max-width: 768px){
  body::before{ display:none; }
}


a{text-decoration:none;color:inherit}
img{max-width:100%;display:block;height:auto}

/* ═══════════════════════════════════════
   TOP BLUE ACCENT STRIPE
   ═══════════════════════════════════════ */
.top-stripe{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--blue) 20%,var(--blue-bright) 50%,var(--blue) 80%,transparent);
  position:relative;z-index:100;
}

/* ═══════════════════════════════════════
   NAVIGATION - MOBILE FRIENDLY
   ═══════════════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:9998;
  padding:1.2rem 1.5rem;
  transition:all .3s var(--ease);
  background:transparent;
}
nav.scrolled{
  background:rgba(5,8,16,.92);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.nav-container{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;z-index:10001;
}


/* Desktop nav links */
.nav-links{
  display:flex;
  align-items:center;
  gap:2rem;
}
.nav-links a{
  font-size:.85rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-muted);
  transition:color .3s;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;
  bottom:-4px;left:0;right:0;height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transition:transform .3s;
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  color:#fff;
  font-weight:600;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.65rem 1.4rem;
  border-radius:8px;
  transition:all .3s;
  box-shadow:0 4px 16px var(--blue-glow);
}
.nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px var(--blue-glow);
}

/* Mobile hamburger */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
  z-index:10001;
  position:relative;
}
.hamburger span{
  width:24px;
  height:2px;
  background:var(--text-primary);
  transition:all .3s;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;
  top:0;right:0;bottom:0;
  width:280px;
  background:var(--bg-dark);
  border-left:1px solid var(--border);
  box-shadow:-4px 0 24px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .3s var(--ease);
  z-index:10000;
  padding:6rem 2rem 2rem;
  overflow-y:auto;
}
.mobile-menu.active{transform:translateX(0)}
.mobile-menu a{
  display:block;
  padding:1rem 0;
  font-size:.95rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border);
  transition:all .3s;
}
.mobile-menu a:hover{
  color:var(--blue-bright);
  padding-left:.5rem;
}
.mobile-menu .nav-cta{
  display:block;
  text-align:center;
  margin-top:2rem;
  padding:1rem;
}

/* Mobile overlay backdrop */
.mobile-overlay{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:rgba(5,8,16,.8);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  z-index:9999;
}
.mobile-overlay.active{
  opacity:1;
  pointer-events:all;
}

/* ═══════════════════════════════════════
   QUOTE MODAL
   ═══════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(5,8,16,.82);
  backdrop-filter:blur(8px);
  z-index:10050;
}

.modal{
  position:fixed; inset:0;
  display:flex;
  align-items:flex-start;              /* was center */
  justify-content:center;
  padding:1rem;
  overflow-y:auto;                      /* NEW: allow modal area to scroll */
  -webkit-overflow-scrolling:touch;     /* NEW: smooth iOS scroll */
  z-index:10060;
}

.modal-card{
  width:min(760px, calc(100% - 1rem));
  max-height:calc(100dvh - 2rem);       /* NEW: never exceed viewport */
  display:flex;                         /* NEW */
  flex-direction:column;                /* NEW */
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;                      /* keep rounded corners */
}

.modal-header{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.6rem 1.6rem 1.1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(96,165,250,.03));
}

.modal-header h3{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:800;
  margin:0 0 .35rem;
}

.modal-header p{
  margin:0;
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.6;
  max-width:52ch;
}

.modal-close{
  border:1px solid var(--border);
  background:var(--bg-dark);
  color:var(--text-primary);
  width:42px;height:42px;
  border-radius:12px;
  cursor:pointer;
  transition:all .25s var(--ease);
}
.modal-close:hover{
  border-color:var(--blue);
  background:var(--glow);
  transform:translateY(-1px);
}

.quote-form{
  padding:1.4rem 1.6rem 1.6rem;
  overflow:auto;                        /* NEW: scroll inside the form */
}


.modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem 1.2rem;
}

.modal-actions{
  display:flex;
  gap:.8rem;
  justify-content:flex-end;
  margin-top:1.2rem;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

@media(max-width:760px){
  .modal-grid{grid-template-columns:1fr}
  .modal-actions{flex-direction:column}
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary{width:100%}
}

.modal[hidden],
.modal-overlay[hidden]{
  display:none !important;
}

/* ═══════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:8rem 1.5rem 4rem;
  position:relative;
  overflow:hidden;
  background:linear-gradient(rgba(5,8,16,.78),rgba(5,8,16,.88)),url('assets/backline-percussion-hire-1600.webp');
  background-size:cover;
  background-position:center;
}

@media(max-width:768px){
  .hero{
    min-height:100vh;
    min-height:100svh;
    padding:6rem 1rem 3rem;
    background-image:linear-gradient(rgba(5,8,16,.85),rgba(5,8,16,.92)),url('assets/backline-percussion-hire-1600.webp');
    will-change:transform;
  }
}


/* Mobile + tablet: avoid expensive fixed backgrounds */
@media (max-width: 1024px){
  .hero{ background-attachment: scroll; }
}

.hero-bg{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(ellipse at 25% 15%,rgba(59,130,246,.12),transparent 50%),
    radial-gradient(ellipse at 75% 85%,rgba(96,165,250,.08),transparent 50%);
  z-index:0;
}

.hero-content{
  max-width:var(--max-width);
  margin:0 auto;
  position:relative;
  z-index:2;
  width:100%;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  padding:.5rem 1.2rem;
  margin-bottom:1.5rem;
  backdrop-filter:blur(10px);
  animation:slideDown .6s ease-out;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}
.hero-badge-icon{
  width:22px;height:22px;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
}
.hero-badge span{
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-secondary);
}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,8vw,5.5rem);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.03em;
  margin-bottom:1.2rem;
  animation:slideUp .6s ease-out .15s both;
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero h1 .blue-text{
  color:var(--blue-bright);
}

.hero .subtitle{
  font-size:1.15rem;
  line-height:1.7;
  color:var(--text-secondary);
  max-width:560px;
  margin-bottom:2rem;
  animation:slideUp .6s ease-out .3s both;
}

.hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  animation:slideUp .6s ease-out .45s both;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-width:180px;
  min-height:48px;
  background:linear-gradient(135deg,var(--blue),var(--blue-bright));
  color:#fff;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.95rem 1.8rem;
  border-radius:10px;
  border:none;
  cursor:pointer;
  transition:all .3s;
  box-shadow:0 6px 20px var(--blue-glow);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px var(--blue-glow);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:transparent;
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.88rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.95rem 1.8rem;
  border-radius:10px;
  border:1.5px solid var(--border);
  cursor:pointer;
  transition:all .3s;
  backdrop-filter:blur(10px);
}
.btn-secondary:hover{
  border-color:var(--blue);
  background:var(--glow);
}

/* ═══════════════════════════════════════
   STATS BAR
   ═══════════════════════════════════════ */
.stats-bar{
  background:var(--bg-dark);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:2.5rem 1.5rem;
}

@media(max-width:768px){
  .stats-bar{
    padding:2rem 1rem;
  }
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:2rem;
    min-height:280px;
  }
  .stat-item{
    min-height:120px;
  }
  .stat-num{
    display:block;
    height:48px;
    line-height:48px;
  }
}


.stats-grid{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:2rem;
}
.stat-item{
  text-align:center;
}
.stat-num{
  font-family:var(--font-display);
  font-size:2.8rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue-bright),var(--blue));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  display:block;
}
.stat-label{
  font-size:.8rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:.6rem;
}
.stat-sublabel{
  font-size:.7rem;
  color:var(--text-dim);
  margin-top:.2rem;
}

/* ═══════════════════════════════════════
   SECTION BASE
   ═══════════════════════════════════════ */
section{
  padding:6rem 1.5rem;
  position:relative;

  /* Performance: skip rendering offscreen sections */
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.section-container{
  max-width:var(--max-width);
  margin:0 auto;
}

.section-label{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.15em;
  color:var(--blue-bright);
  background:var(--glow);
  padding:.4rem 1rem;
  border-radius:100px;
  margin-bottom:.8rem;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:1rem;
}

.section-desc{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--text-secondary);
  max-width:600px;
  margin-bottom:2.5rem;
}

/* ═══════════════════════════════════════
   GLASS CARDS
   ═══════════════════════════════════════ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}


.glass-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  backdrop-filter:blur(20px);
  transition:all .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.glass-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s;
}
.glass-card:hover{
  transform:translateY(-8px);
  border-color:var(--border-hover);
  background:var(--bg-card-hover);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.glass-card:hover::before{
  transform:scaleX(1);
}

.card-icon{
  width:56px;
  height:56px;
  background:var(--glow);
  border:1px solid var(--border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  margin-bottom:1.2rem;
}

.glass-card h3{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.7rem;
  letter-spacing:-.01em;
}

.glass-card p{
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:1rem;
  font-size:.95rem;
}

.card-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  color:var(--blue-bright);
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition:gap .3s;
}
.card-link:hover{
  gap:.7rem;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
footer{
  background:var(--bg-dark);
  border-top:1px solid var(--border);
  padding:3rem 1.5rem 1.5rem;
}
.footer-grid{
  max-width:var(--max-width);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2.5rem;
  margin-bottom:2.5rem;
}

.footer-brand{
  max-width:280px;
}
.footer-brand .logo{
  font-size:1.5rem;
  margin-bottom:.8rem;
}
.footer-brand p{
  color:var(--text-muted);
  line-height:1.7;
  font-size:.9rem;
  margin-bottom:1.2rem;
}

.footer-social{
  display:flex;
  gap:.7rem;
}
.footer-social a{
  width:38px;
  height:38px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  transition:all .3s;
}
.footer-social a:hover{
  background:var(--glow);
  border-color:var(--blue);
  transform:translateY(-2px);
}

.footer-col h5{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--blue-bright);
  margin-bottom:.9rem;
}
.footer-col ul{
  list-style:none;
}
.footer-col ul li{
  margin-bottom:.5rem;
}
.footer-col ul a{
  color:var(--text-muted);
  font-size:.88rem;
  transition:color .3s;
}
.footer-col ul a:hover{
  color:var(--text-primary);
}

.footer-bottom{
  max-width:var(--max-width);
  margin:0 auto;
  padding-top:2rem;
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  color:var(--text-dim);
  font-size:.82rem;
}
.footer-bottom a{
  color:var(--blue-bright);
}

/* ═══════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:all .7s var(--ease);
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

/* ═══════════════════════════════════════
   RESPONSIVE - MOBILE
   ═══════════════════════════════════════ */
/* Tablet + Mobile nav (<= 1024px) */
@media (max-width: 1024px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
}

   
   
@media(max-width:768px){
  nav{padding:1rem 1.2rem}
  .nav-links{display:none}
  .hamburger{display:flex}
  
  .hero{
    min-height:auto;
    padding:5rem 1.2rem 3rem;
  }
  .hero h1{font-size:2.5rem}
  .hero .subtitle{font-size:1.05rem}
  
  .stats-grid{
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
  }
  .stat-num{font-size:2.2rem}
  
  section{padding:4rem 1.2rem}
  .section-title{font-size:2rem}
  
  .card-grid{
    grid-template-columns:1fr;
  }
  
  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .footer-bottom{
    flex-direction:column;
    text-align:center;
  }
}

@media(min-width:1025px){
  .mobile-menu,
  .mobile-overlay{
    display:none !important;
  }
}

/* Portfolio Grid */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}
.portfolio-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:all .4s var(--ease);
}
.portfolio-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.4);
  border-color:var(--border-hover);
}
.portfolio-image{
  height:220px;
  background-size:cover !important;
  background-position:center !important;
}
.portfolio-content{
  padding:1.5rem;
}
.portfolio-content h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:.6rem;
}
.portfolio-content p{
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1.6;
  margin-bottom:1rem;
}
.portfolio-tags{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.portfolio-tags span{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:.3rem .7rem;
  background:var(--glow);
  border:1px solid var(--border);
  border-radius:100px;
  color:var(--blue-bright);
}

/* Partners Strip */
.partners-strip{
  padding:3rem 1.5rem;
  background:var(--bg-black);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.partners-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.partner-badge{
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-secondary);
  padding:.7rem 1.5rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
}

/* Testimonials */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
  margin-top:2.5rem;
}
.testimonial-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  transition:all .4s var(--ease);
}
.testimonial-card:hover{
  border-color:var(--border-hover);
  transform:translateY(-5px);
}
.stars{
  color:var(--blue-bright);
  font-size:1.1rem;
  margin-bottom:1rem;
  letter-spacing:.2em;
}
.testimonial-card blockquote{
  font-size:1rem;
  line-height:1.7;
  color:var(--text-secondary);
  margin-bottom:1.5rem;
  font-style:italic;
}
.testimonial-author{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.testimonial-author strong{
  font-size:.95rem;
  color:var(--text-primary);
}
.testimonial-author span{
  font-size:.82rem;
  color:var(--text-muted);
}

/* Brands Grid */
.brands-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  max-width:900px;
  margin:0 auto;
}
.brand-pill{
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-muted);
  padding:.6rem 1.2rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  transition:all .3s;
}
.brand-pill:hover{
  border-color:var(--blue);
  color:var(--blue-bright);
  background:var(--glow);
}

/* FAQ */
.faq-list{
  max-width:800px;
  margin:2rem auto 0;
}
.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:1rem;
  overflow:hidden;
  transition:all .3s;
}
.faq-item:hover{
  border-color:var(--border-hover);
}
.faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem;
  cursor:pointer;
  user-select:none;
}
.faq-question h3{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-primary);
}
.faq-icon{
  font-size:1.5rem;
  color:var(--blue-bright);
  transition:transform .3s;
}
.faq-item.active .faq-icon{
  transform:rotate(45deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-item.active .faq-answer{
  max-height:500px;
}
.faq-answer p{
  padding:0 1.5rem 1.5rem;
  color:var(--text-secondary);
  line-height:1.7;
}

/* Locations Grid */
.locations-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  margin-top:2rem;
}
.location-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.2rem;
  text-align:center;
  font-size:.95rem;
  color:var(--text-secondary);
  transition:all .3s;
}
.location-card:hover{
  border-color:var(--blue);
  background:var(--glow);
}
.location-card strong{
  color:var(--text-primary);
}

/* Contact Methods */
.contact-methods .contact-method{
  backdrop-filter:blur(10px);
}

/* Make location cards work as full clickable links */
.locations-grid .location-card{
  display:block;               /* <a> needs this */
  cursor:pointer;
}

.locations-grid .location-card:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

/* Make location cards work as full clickable links */
.location-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.location-link:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

.location-card.current{
  border-color:var(--blue);
  background:var(--glow);
}


/* ═══════════════════════════════════════
   CONTACT PAGE STYLES
   ═══════════════════════════════════════ */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:4rem;
  margin-top:3rem;
}

.contact-info h2{
  font-size:2rem;
  margin-bottom:2rem;
}

.contact-method{
  margin-bottom:2rem;
  padding-bottom:2rem;
  border-bottom:1px solid var(--border);
}

.contact-method:last-child{
  border-bottom:none;
}

.contact-method h3{
  font-size:1.25rem;
  margin-bottom:0.75rem;
  color:var(--text-primary);
}

.contact-method p{
  margin:0.25rem 0;
  color:var(--text-secondary);
}

.contact-method a{
  color:var(--blue-bright);
  text-decoration:none;
  font-weight:600;
  font-size:1.1rem;
}

.contact-method a:hover{
  text-decoration:underline;
}

.contact-form-container{
  background:var(--bg-card);
  padding:2.5rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

.contact-form-container h2{
  font-size:2rem;
  margin-bottom:0.5rem;
}

.contact-form{
  margin-top:1.5rem;
}

.form-group{
  margin-bottom:1.5rem;
}

.form-group label{
  display:block;
  margin-bottom:0.5rem;
  font-weight:600;
  color:var(--text-primary);
  font-size:0.9rem;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:0.75rem;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
  background:var(--bg-dark);
  color:var(--text-primary);
  transition:border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline:none;
  border-color:var(--blue);
  background:var(--bg-card-hover);
}

.form-group textarea{
  resize:vertical;
  min-height:120px;
}

/* Date field: single WHITE icon that is clickable */
.form-group.date-wrap .date-input{
  position:relative;
}

.form-group.date-wrap input[type="date"]{
  color-scheme: dark;
  padding-right: 3.2rem; /* room for icon button */
}

/* Hide native calendar icon (so we don't get black + white) */
.form-group.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0;
  cursor:pointer;
}
.form-group.date-wrap input[type="date"]::-moz-calendar-picker-indicator{
  opacity:0;
}

/* Our custom icon button */
.form-group.date-wrap .date-btn{
  position:absolute;
  right:0.9rem;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  opacity:.95;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 2v2M17 2v2M3.5 9h17M5 5h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
}

.form-group.date-wrap .date-btn:hover{
  opacity:1;
}

.form-group.date-wrap .date-btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}



.form-note{
  font-size:0.875rem;
  color:var(--text-muted);
  margin-top:1rem;
  text-align:center;
}

.form-message{
  padding:2rem;
  border-radius:var(--radius);
  text-align:center;
  border:1px solid;
}

.form-message.success{
  background:rgba(40,167,69,0.1);
  border-color:#28a745;
  color:#4ade80;
}

.form-message.error{
  background:rgba(220,53,69,0.1);
  border-color:#dc3545;
  color:#f87171;
}

.form-message h3{
  margin-top:0;
  margin-bottom:0.5rem;
}

.form-message a{
  color:inherit;
  font-weight:600;
  text-decoration:underline;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  margin-top:2rem;
}

.faq-item{
  background:var(--bg-card);
  padding:1.5rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
}

.faq-item h3{
  font-size:1.1rem;
  margin-bottom:0.75rem;
  color:var(--blue-bright);
}

.faq-item p{
  margin:0;
  line-height:1.6;
  color:var(--text-secondary);
}

.credentials-list{
  list-style:none;
  padding:0;
  margin:1rem 0 0 0;
}

.credentials-list li{
  padding:0.5rem 0;
  padding-left:1.5rem;
  position:relative;
  color:var(--text-secondary);
}

.credentials-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--blue-bright);
  font-weight:bold;
}

.credentials-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  padding:1.5rem;
  border-radius:var(--radius);
  margin-top:2rem;
}

.credentials-box h3{
  margin-top:0;
  margin-bottom:1rem;
  color:var(--text-primary);
}

.text-muted{
  color:var(--text-muted);
}

/* CTA Box */
.cta-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:3rem 2rem;
  text-align:center;
}

.cta-box h2{
  font-family:var(--font-display);
  font-size:2rem;
  margin-bottom:1rem;
}

.cta-box p{
  color:var(--text-secondary);
  font-size:1.1rem;
  margin-bottom:1.5rem;
}

.btn-large{
  padding:1rem 2rem;
  font-size:0.95rem;
}

/* Smaller hero variant */
.hero-sm{
  min-height:50vh;
  padding:10rem 1.5rem 4rem;
}

/* Responsive adjustments for contact page */
@media(max-width:968px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:3rem;
  }
  
  .contact-form-container{
    padding:2rem;
  }
}

@media(max-width:768px){
  .contact-info h2,
  .contact-form-container h2{
    font-size:1.75rem;
  }
  
  .faq-grid{
    grid-template-columns:1fr;
  }
  
  .contact-form-container{
    padding:1.5rem;
  }
  
  .hero-sm{
    padding:6rem 1.2rem 3rem;
  }
  
  .cta-box{
    padding:2rem 1.5rem;
  }
  
  .cta-box h2{
    font-size:1.75rem;
  }
}

@media(max-width:480px){
  .contact-grid{
    gap:2rem;
  }
  
  .contact-method h3{
    font-size:1.1rem;
  }
  
  .contact-form-container{
    padding:1.25rem;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea{
    padding:0.625rem;
    font-size:0.95rem;
  }
}

/* ═══════════════════════════════════════
   MOBILE & TABLET OPTIMISATION (The "Best" Pack)
   ═══════════════════════════════════════ */

/* 1. Global Mobile Fixes */
@media (max-width: 768px) {
  :root {
    /* Scale down huge headers smoothly */
    --h1-size: clamp(2.2rem, 10vw, 3.2rem);
    --h2-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  /* Prevent horizontal wobble from the logo scroller */
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

  /* Make sections feel less cramped on small screens */
  section {
    padding: 4rem 1.25rem !important; 
  }

  /* Force grids to behave on tiny phones (iPhone SE etc) */
  .grid, .services-grid, .portfolio-grid {
    grid-template-columns: minmax(280px, 1fr) !important;
    gap: 1.5rem;
  }
}

/* 2. Form & Touch Optimisation (Very important for UX) */
@media (max-width: 1024px) {
  /* Stop iOS from auto-zooming on inputs (must be at least 16px) */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Larger touch targets for buttons/links */
  .btn, .nav-link, .hamburger {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Make the "Get Quote" button full width on mobile */
  .hero-btns .btn, .contact-form .btn {
    width: 100%;
    margin: 0.5rem 0;
  }
}

/* 3. The "M4 Advantage" Sticky Call Button 
   Only shows on mobile so they can call you instantly */
@media (max-width: 500px) {
  .mobile-call-sticky {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--blue);
    color: #white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
    z-index: 9999;
    text-decoration: none;
    font-size: 1.5rem;
  }
}




/* The 'Royal Blue' Glow for all buttons */
.btn-primary {
    background-color: #3b82f6 !important;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    transition: 0.3s;
}

.btn-primary:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
    transform: translateY(-2px);
}

/* Smooth Scrolling for the whole site */
html {
    scroll-behavior: smooth;
}

/* Mobile: reduce expensive blur effects */
@media (max-width: 768px){
  nav.scrolled{ backdrop-filter: none; }
  .hero-badge{ backdrop-filter: none; }
  .glass-card{ backdrop-filter: none; }
}

/* Styling for your new SVG icons 
.card-icon svg, 
.hero-badge-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--blue-bright); /* Matches your 2026 branding! 
  display: block;
}
*/

.card-icon svg{
  width: 28px;
  height: 28px;
  display:block;
  stroke-width: 1.4; /* unify all icons */
}