*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#031B5C;--blue:#0D8CFF;--white:#FFFFFF;--light:#F5F5F5;
  --text:#031B5C;--text-light:#5A6378;--border:#D9DCE7;
  --green:#2E9E7B;--gold:#F6A429;--red:#DE2A2A;
  --max-w:1600px;--gutter:40px;--radius:6px;
}
body{font-family:'Poppins',sans-serif;color:var(--text);line-height:1.6;background:var(--white)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.announce-bar{background:var(--navy);color:var(--white);text-align:center;padding:10px 20px;font-size:13px;font-weight:500;letter-spacing:0.3px}
.announce-bar a{color:var(--blue);font-weight:600}
.header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gutter);max-width:var(--max-w);margin:0 auto}
.logo{font-size:22px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px}
.logo-icon{width:32px;height:32px;background:var(--blue);border-radius:4px;display:flex;align-items:center;justify-content:center}
.logo-icon svg{width:20px;height:20px;fill:var(--white)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-size:14px;font-weight:500;color:var(--text);transition:color 0.2s}
.nav a:hover{color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius);font-size:14px;font-weight:600;font-family:inherit;border:none;cursor:pointer;transition:all 0.2s}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:#0A75D9;transform:translateY(-1px)}
.btn-secondary{background:var(--white);color:var(--text);border:2px solid var(--border)}
.btn-secondary:hover{border-color:var(--navy)}
.btn-sm{padding:8px 20px;font-size:13px}
.hamburger{display:none;background:none;border:none;cursor:pointer}
.hamburger svg{width:28px;height:28px;stroke:var(--navy)}
.hero{background:linear-gradient(135deg,#f8f9fc 0%,#eef1f8 100%);padding:80px 0;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.hero-content h1{font-size:clamp(32px,4.5vw,56px);font-weight:700;line-height:1.15;color:var(--navy);margin-bottom:16px}
.hero-content h1 span{color:var(--blue)}
.hero-content p{font-size:17px;color:var(--text-light);margin-bottom:32px;max-width:480px;line-height:1.7}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-image{position:relative}
.hero-image-main{border-radius:12px;box-shadow:0 20px 60px rgba(3,27,92,0.12);width:100%;aspect-ratio:4/3;overflow:hidden}
.hero-image-main img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.hero-badge{position:absolute;top:20px;right:-20px;background:var(--green);color:var(--white);padding:8px 18px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 4px 12px rgba(46,158,123,0.3)}
.trust-strip{background:var(--white);border-bottom:1px solid var(--border);padding:24px 0}
.trust-inner{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text)}
.trust-icon{width:40px;height:40px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center}
.trust-icon svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:2}
.products{padding:80px 0;background:var(--white)}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-size:clamp(28px,3.5vw,48px);font-weight:600;color:var(--navy);margin-bottom:8px}
.section-header p{font-size:16px;color:var(--text-light);max-width:560px;margin:0 auto}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.product-card{background:var(--white);border:1px solid var(--border);overflow:hidden;transition:box-shadow 0.3s,transform 0.2s}
.product-card:hover{box-shadow:0 8px 30px rgba(3,27,92,0.08);transform:translateY(-4px)}
.product-img{aspect-ratio:4/3;overflow:hidden;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover}
.product-badge{position:absolute;top:12px;left:12px;background:var(--blue);color:var(--white);padding:4px 12px;font-size:11px;font-weight:600;border-radius:3px;text-transform:uppercase;letter-spacing:0.5px;z-index:2}
.product-info{padding:20px}
.product-info h3{font-size:18px;font-weight:600;color:var(--navy);margin-bottom:6px}
.product-info .price{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:4px}
.product-info .price .from{font-size:13px;font-weight:400;color:var(--text-light)}
.product-info .desc{font-size:13px;color:var(--text-light);margin-bottom:12px;line-height:1.5}
.product-stars{display:flex;align-items:center;gap:4px;margin-bottom:12px}
.star{color:var(--gold);font-size:14px}
.star-count{font-size:12px;color:var(--text-light);margin-left:4px}
.features-banner{background:var(--navy);color:var(--white);padding:80px 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.feature{text-align:center}
.feature-icon{width:56px;height:56px;border-radius:50%;background:rgba(13,140,255,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.feature-icon svg{width:28px;height:28px;stroke:var(--blue);fill:none;stroke-width:1.5}
.feature h3{font-size:18px;font-weight:600;margin-bottom:8px}
.feature p{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6}
.how-it-works{padding:80px 0;background:var(--light)}
.steps-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.step-card{text-align:center;padding:32px 20px;background:var(--white);position:relative}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--white);font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.step-card h3{font-size:18px;font-weight:600;color:var(--navy);margin-bottom:8px}
.step-card p{font-size:14px;color:var(--text-light);line-height:1.6}
.step-arrow{position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--border);font-weight:300}
.sizes{padding:80px 0;background:var(--white)}
.sizes-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.size-visual{border-radius:12px;aspect-ratio:4/3;overflow:hidden;position:relative}
.size-visual img{width:100%;height:100%;object-fit:cover}
.size-tag{position:absolute;background:var(--white);padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;color:var(--navy);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.size-tag.tag-1{top:20%;left:15%}
.size-tag.tag-2{bottom:30%;right:10%}
.size-info h2{font-size:clamp(28px,3vw,42px);font-weight:600;color:var(--navy);margin-bottom:16px}
.size-info p{font-size:15px;color:var(--text-light);margin-bottom:24px;line-height:1.7}
.size-list{list-style:none;padding:0;margin-bottom:28px}
.size-list li{padding:8px 0;font-size:14px;color:var(--text);display:flex;align-items:center;gap:10px}
.size-list li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0}
.testimonials{padding:80px 0;background:var(--light)}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.testimonial-card{background:var(--white);padding:28px;border:1px solid var(--border)}
.testimonial-stars{display:flex;gap:2px;margin-bottom:12px}
.testimonial-text{font-size:15px;color:var(--text);line-height:1.7;margin-bottom:16px;font-style:italic}
.testimonial-author{font-size:13px;font-weight:600;color:var(--navy)}
.testimonial-meta{font-size:12px;color:var(--text-light)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.gallery-item{aspect-ratio:4/3;overflow:hidden;border-radius:4px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s}
.gallery-item:hover img{transform:scale(1.05)}
.cta-section{padding:80px 0;background:var(--white)}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);align-items:start}
.cta-text h2{font-size:clamp(28px,3vw,42px);font-weight:600;color:var(--navy);margin-bottom:16px}
.cta-text p{font-size:15px;color:var(--text-light);line-height:1.7;margin-bottom:16px}
.cta-text .highlight-box{background:var(--light);border-left:4px solid var(--blue);padding:16px 20px;border-radius:0 6px 6px 0;margin:20px 0}
.cta-text .highlight-box p{margin:0;font-size:14px;color:var(--text)}
.cta-form{background:var(--white);border:1px solid var(--border);padding:32px}
.cta-form h3{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:4px}
.cta-form .form-sub{font-size:13px;color:var(--text-light);margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);font-size:14px;font-family:'Poppins',sans-serif;color:var(--text);transition:border-color 0.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{resize:vertical;min-height:80px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{font-size:12px;color:var(--text-light);margin-top:12px;text-align:center}
.payment-section{padding:60px 0;background:var(--light);border-top:1px solid var(--border)}
.payment-inner{max-width:560px;margin:0 auto;padding:0 var(--gutter)}
.payment-inner h2{font-size:28px;font-weight:600;color:var(--navy);margin-bottom:4px;text-align:center}
.payment-sub{font-size:14px;color:var(--text-light);margin-bottom:24px;text-align:center}
.deposit-options{display:flex;gap:12px;margin-bottom:20px}
.dep-opt{flex:1;padding:16px 12px;border:2px solid var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all 0.2s;background:var(--white)}
.dep-opt:hover{border-color:var(--blue)}
.dep-opt.active{border-color:var(--navy);background:rgba(3,27,92,0.03)}
.dep-opt .amt{font-size:22px;font-weight:700;color:var(--navy)}
.dep-opt .lbl{font-size:12px;color:var(--text-light);margin-top:2px}
.pay-btn{width:100%;padding:14px;background:var(--navy);color:var(--white);border:none;border-radius:var(--radius);font-size:15px;font-weight:600;cursor:pointer;font-family:'Poppins',sans-serif;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:8px}
.pay-btn:hover{background:#052474}
.pay-btn:disabled{opacity:0.5;cursor:not-allowed}
.secure-badge{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:12px;color:var(--text-light)}
.payment-success{display:none;text-align:center;padding:32px}
.payment-success.show{display:block}
.payment-success h3{font-size:22px;color:var(--navy);margin-bottom:8px}
.faq{padding:80px 0;background:var(--white)}
.faq-list{max-width:720px;margin:0 auto;padding:0 var(--gutter)}
.faq-item{border-bottom:1px solid var(--border);padding:20px 0}
.faq-q{font-size:16px;font-weight:600;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q::after{content:'+';font-size:22px;font-weight:300;color:var(--text-light);transition:transform 0.2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s ease;font-size:14px;color:var(--text-light);line-height:1.7}
.faq-item.open .faq-a{max-height:300px;padding-top:12px}
.success-msg{display:none;text-align:center;padding:40px 20px}
.success-msg.show{display:block}
.success-msg h3{font-size:22px;color:var(--navy);margin-bottom:8px}
.success-msg p{color:var(--text-light);font-size:14px}
.footer{background:var(--navy);color:var(--white);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.footer-brand h3{font-size:18px;font-weight:700;margin-bottom:12px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;max-width:300px}
.footer-col h4{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:rgba(255,255,255,0.5)}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:8px;transition:color 0.2s}
.footer-col a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;align-items:center;max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,0.4)}
.social-links{display:flex;gap:16px}
.social-links a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.social-links a:hover{background:var(--blue)}
.social-links svg{width:16px;height:16px;fill:var(--white)}
@media(max-width:999px){
  .hero-inner,.cta-inner,.sizes-grid{grid-template-columns:1fr}
  .hero-image{order:-1}
  .nav{display:none}
  .hamburger{display:block}
  .footer-grid{grid-template-columns:1fr 1fr}
  .step-arrow{display:none}
}
@media(max-width:740px){
  :root{--gutter:20px}
  .product-grid{grid-template-columns:1fr}
  .trust-inner{gap:24px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:12px}
  .deposit-options{flex-direction:column}
  .field-row{grid-template-columns:1fr}
}

/* ============================================
   REBRAND — Navy + Blue (matches ELITE banner)
   ============================================ */
:root{
  --navy:#0e1b3d;
  --navy-dark:#091333;
  --navy-mid:#1a2a5a;
  --primary:#4a8fea;
  --primary-dark:#2563eb;
  --primary-light:#6fa6f0;
  --accent:#4a8fea;
  --white:#ffffff;
  --light:#f3f6fb;
  --text:#0e1b3d;
  --text-light:#5a6478;
  --border:#dde3ed;
  --red:#dc2626;
}

/* Header / nav — navy background */
.announce-bar{background:var(--navy-dark);color:#fff;text-align:center;font-size:13px;padding:8px 16px}
.announce-bar a{color:var(--primary-light);font-weight:600;text-decoration:none}
.announce-bar a:hover{color:#fff}
.header{background:var(--navy);border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:0;z-index:40}
.header-inner{padding:10px var(--gutter)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-mark{height:50px;width:auto;display:block}
.nav a{color:rgba(255,255,255,0.85);font-weight:500;font-size:15px;text-decoration:none;transition:color .15s ease}
.nav a:hover{color:#fff}
.nav a.active{color:var(--primary)}
.nav .btn-primary{background:var(--primary);color:#fff;border-radius:8px}
.nav .btn-primary:hover{background:var(--primary-dark)}
.nav .btn-primary.active{background:var(--primary-dark)}
.hamburger{color:#fff}
.hamburger svg{stroke:#fff}

/* Top-right CTA group — "Get A Free Quote  or  phone" */
.header-cta-group{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-left:20px;
}
.header-quote-btn{
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  border-radius:8px;
}
.header-or{
  color:rgba(255,255,255,0.55);
  font-size:14px;
  font-style:italic;
  font-weight:500;
}
.header-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff!important;
  font-size:20px;
  font-weight:700;
  letter-spacing:0.01em;
  text-decoration:none;
  transition:color .15s ease;
  white-space:nowrap;
}
.header-phone:hover{color:var(--primary)!important}
.header-phone svg{
  width:18px;
  height:18px;
  stroke:var(--primary);
}

@media(max-width:1200px){
  .header-phone{font-size:18px}
  .header-cta-group{gap:10px;margin-left:14px}
}
@media(max-width:999px){
  .header-cta-group{
    margin-left:auto;
    margin-right:8px;
    gap:8px;
  }
  .header-quote-btn{padding:8px 14px;font-size:13px}
  .header-or{display:none}
  .header-phone{font-size:15px}
}
@media(max-width:600px){
  .header-quote-btn{display:none}
  .header-phone span{display:none}
  .header-phone svg{width:22px;height:22px}
}

/* Buttons */
.btn{font-weight:600;border-radius:8px;transition:transform .1s ease, background .15s ease, box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 6px 18px rgba(74,143,234,0.35)}
.btn-secondary{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}

/* Hero — dark navy background mimics banner */
.hero{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;
  background:radial-gradient(circle, rgba(74,143,234,0.25) 0%, transparent 70%);
  pointer-events:none;
}
.hero-content h1{color:#fff;font-size:48px;line-height:1.1;font-weight:800;letter-spacing:-0.01em}
.hero-content h1 span{color:var(--primary);background:linear-gradient(135deg,#6fa6f0 0%,#4a8fea 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-content p{color:rgba(255,255,255,0.8);font-size:18px}
.hero-image{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,0.5)}
.hero-image img{display:block;width:100%;height:auto}
.hero-badge{background:#16a34a;color:#fff}

/* Trust strip — subtle */
.trust-strip{background:var(--navy-dark);color:rgba(255,255,255,0.7);padding:18px 0;border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05)}
.trust-strip svg{stroke:var(--primary)}
.trust-item{color:rgba(255,255,255,0.85)}

/* Section headers */
.section-header h2{color:var(--navy);font-size:32px;font-weight:700;letter-spacing:-0.01em}
.section-header p{color:var(--text-light)}

/* Footer — already dark, just refresh accents */
.footer{background:var(--navy-dark);border-top:4px solid var(--primary)}
.footer h3, .footer h4{color:#fff}
.footer a{color:rgba(255,255,255,0.7)}
.footer a:hover{color:var(--primary-light)}

/* Multi-page nav mobile */
@media(max-width:999px){
  .nav{
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    background:var(--navy);
    flex-direction:column;
    padding:16px var(--gutter);
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
    z-index:50;
    gap:8px;
  }
  .nav.open{display:flex}
  .nav a{padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.08);color:#fff}
  .nav a:last-child{border-bottom:none}
  .hero-content h1{font-size:36px}
}
@media(max-width:520px){
  .hero-content h1{font-size:30px}
  .logo-mark{height:42px}
}

/* ============================================
   SITE-WIDE DARK NAVY OVERLAY
   Make every section dark navy, not just hero.
   ============================================ */
body{background:var(--navy);color:#fff}
section{color:#fff}

/* Sections that originally used --light bg -> deeper navy */
section[style*="--light"], section[style*="var(--light)"]{background:var(--navy-mid)!important;color:#fff}
/* Sections that originally used --white bg -> navy */
section[style*="--white"], section[style*="var(--white)"]{background:var(--navy)!important;color:#fff}

/* Force navy bg on every named section from the original CSS that had a light/white background */
.how-it-works, .features-banner, .features, .sizes, .testimonials, .products, .faq, .payment-section, .cta-section, .gallery, section.section{
  background:var(--navy)!important;
  color:#fff!important;
}
.how-it-works h2, .how-it-works h3, .how-it-works h4,
.features-banner h2, .features-banner h3, .features-banner h4, .features-banner h5,
.sizes h2, .sizes h3, .sizes h4,
.products h2, .products h3, .products h4,
.testimonials h2, .testimonials h3, .testimonials h4{
  color:#fff!important;
}
.how-it-works p, .features-banner p, .sizes p, .products p, .testimonials p,
.how-it-works span, .features-banner span, .sizes span{
  color:rgba(255,255,255,0.78)!important;
}
/* Steps row — center icons, give them blue gradient, dark cards */
.step-card, .how-it-works .step-card, .steps-row .step-card,
.how-it-works .step, .steps-row .step, .step{
  text-align:center;
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-radius:14px;
  padding:32px 20px!important;
  color:#fff!important;
  position:relative;
}
.step-num,
.how-it-works .step-num, .steps-row .step-num{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(74,143,234,0.3);
  margin:0 auto 16px!important;
}
.step-card h3, .step-card h4,
.how-it-works .step-card h3, .how-it-works .step-card h4,
.steps-row .step-card h3, .steps-row .step-card h4,
.step h3, .step h4{
  color:#fff!important;
  margin-top:8px;
  font-size:18px;
  font-weight:600;
}
.step-card p,
.how-it-works .step-card p, .steps-row .step-card p,
.step p{
  color:rgba(255,255,255,0.75)!important;
  font-size:14px;
  line-height:1.6;
  margin-top:6px;
}
.step-arrow{
  color:var(--primary)!important;
  opacity:0.5;
  position:absolute;
  right:-12px;
  top:50%;
  transform:translateY(-50%);
}
.step-card:last-child .step-arrow{display:none}

/* Section headers — white on dark */
.section-header h2{color:#fff!important}
.section-header p{color:rgba(255,255,255,0.7)!important}

/* All headings inside sections default to white */
section h1,section h2,section h3,section h4{color:#fff}
section h1 span{color:var(--primary)}
section p{color:rgba(255,255,255,0.78)}
section strong{color:#fff}

/* Trust strip — already navy, brighten labels */
.trust-strip .trust-item, .trust-strip span{color:rgba(255,255,255,0.85)!important}
.trust-strip svg{stroke:var(--primary)}

/* Home tiles — dark cards w/ subtle border + blue glow on hover */
.home-tile{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  color:rgba(255,255,255,0.85);
}
.home-tile:hover{
  background:rgba(74,143,234,0.08)!important;
  border-color:var(--primary)!important;
  box-shadow:0 8px 28px rgba(74,143,234,0.18)!important;
}
.home-tile-icon{
  background:rgba(74,143,234,0.15)!important;
  color:var(--primary)!important;
}
.home-tile h3{color:#fff}
.home-tile p{color:rgba(255,255,255,0.65)}

/* Product / package cards — dark with navy gradient + blue accent on hover */
.product-card, .package-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  color:#fff!important;
}
.product-card *, .package-card *{color:inherit}
.product-card h3, .product-card h4, .package-card h3, .package-card h4{color:#fff!important}
.product-card .price, .package-card .price{color:var(--primary)!important}
.product-card p, .package-card p{color:rgba(255,255,255,0.7)!important}
.product-image, .package-image{filter:brightness(0.95) contrast(1.05)}

/* Features banner (the icon row) — already dark blue, keep */
.features-banner{background:var(--navy-mid)!important;color:#fff}
.features-banner h3, .features-banner h4{color:#fff!important}
.features-banner p{color:rgba(255,255,255,0.75)!important}

/* Steps / how-it-works */
.step{color:#fff}
.step-num{background:var(--primary)!important;color:#fff!important}
.step h3, .step h4{color:#fff!important}
.step p{color:rgba(255,255,255,0.7)!important}
.step-arrow{color:var(--primary)!important}

/* Sizes section */
.sizes-grid h3{color:#fff!important}
.sizes-grid p, .sizes-grid li{color:rgba(255,255,255,0.7)!important}

/* Testimonials — dark cards */
.testimonial-card, .testimonial{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  color:#fff!important;
}
.testimonial-card p, .testimonial p{color:rgba(255,255,255,0.85)!important}
.testimonial-card .author, .testimonial-card cite{color:var(--primary)!important}

/* FAQ — dark accordion */
.faq{background:var(--navy)!important}
.faq-item{
  background:rgba(255,255,255,0.03)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:8px;
  margin-bottom:10px;
}
.faq-q{color:#fff!important}
.faq-a{color:rgba(255,255,255,0.75)!important}

/* CTA / quote sections (the gradient panel) — keep using navy */
.cta-section{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%)!important;color:#fff}
.cta-text h2{color:#fff!important}
.cta-text p{color:rgba(255,255,255,0.8)!important}
.highlight-box{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.85)!important;
}
.highlight-box strong{color:var(--primary)!important}

/* The quote form CARD itself stays light so inputs are readable */
.quote-form-card{
  background:#fff!important;
  color:var(--navy)!important;
}
.quote-form-card .quote-form-header h2{color:var(--navy)!important}
.quote-form-card .qf-field label{color:var(--navy)!important}
.quote-form-card .qf-field input, .quote-form-card .qf-field select{
  background:#fff!important;
  color:var(--navy)!important;
}

/* Quote page LEFT side text (outside the form card) — white */
.quote-hero{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%)!important}
.quote-hero-text h1{color:#fff!important}
.quote-hero-text > p{color:rgba(255,255,255,0.8)!important}
.quote-perk strong{color:#fff!important}
.quote-perk span{color:rgba(255,255,255,0.7)!important}
.quote-direct{border-top-color:rgba(255,255,255,0.15)!important}
.quote-direct p{color:rgba(255,255,255,0.7)!important}

/* About page paragraphs (white text on dark) */
.container p, .container h2, .container h3{color:inherit}

/* btn-secondary on dark bg — invert */
.btn-secondary{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,0.4)!important}
.btn-secondary:hover{background:#fff!important;color:var(--navy)!important;border-color:#fff!important}

/* Container/text-color rules — make sure text shows */
.container, .container > *{color:#fff}
.container p{color:rgba(255,255,255,0.78)}
.container h2{color:#fff}
.container h3{color:#fff}

/* ============================================
   FIX 1 — HOME TILES: centered + popping icons
   ============================================ */
.home-tiles{
  text-align:center;
  justify-content:center;
}
.home-tile{
  text-align:center;
  padding:36px 24px!important;
}
.home-tile-icon{
  margin:0 auto 20px!important;
  width:56px!important;
  height:56px!important;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(74,143,234,0.35)!important;
  border-radius:14px!important;
}
.home-tile-icon svg{
  width:28px!important;
  height:28px!important;
  stroke:#fff!important;
  stroke-width:2!important;
}
.home-tile h3{
  color:#fff!important;
  font-size:19px!important;
  font-weight:700!important;
  margin-bottom:10px!important;
}
.home-tile p{
  color:rgba(255,255,255,0.72)!important;
  font-size:14px!important;
  line-height:1.6!important;
}

/* ============================================
   FIX 2 — Container/paragraph text: centered + white
   (for About page intro text and similar)
   ============================================ */
.container[style*="max-width:760px"],
.container[style*="max-width:720px"],
section[style*="background:var(--white)"] .container,
section[style*="background:var(--light)"] .container{
  text-align:center;
}
.container p,
section .container p{
  color:rgba(255,255,255,0.85)!important;
  text-align:center;
}
.container h2,
section .container h2{
  color:#fff!important;
  text-align:center;
}

/* ============================================
   FIX 3 — Sizes section ("Sizes Built for Studios")
   Was on white bg with white text → invisible
   ============================================ */
.sizes{background:var(--navy-mid)!important;color:#fff}
.sizes-grid{color:#fff}
.sizes-grid h2, .sizes-grid h3, .sizes-text h2, .sizes-text h3{color:#fff!important}
.sizes-grid p, .sizes-grid li, .sizes-text p, .sizes-text li{color:rgba(255,255,255,0.85)!important}
.sizes-grid ul li, .sizes-text ul li{
  color:rgba(255,255,255,0.85)!important;
  margin-bottom:12px;
  list-style-type:none;
  position:relative;
  padding-left:28px;
}
.sizes-grid ul li::before, .sizes-text ul li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:14px;
  height:14px;
  background:var(--primary);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(74,143,234,0.2);
}
.sizes-image, .sizes-grid img{
  border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}

/* Catch-all: any list items inside dark sections get white-readable text */
section li, section ul li, section ol li{color:rgba(255,255,255,0.85)}

/* Hero badge — ensure it's visible */
.hero-badge{background:#16a34a;color:#fff!important;font-weight:600}

/* ============================================
   FIX — FAQ accordion (questions clickable, answers reveal)
   ============================================ */
.faq{background:var(--navy)!important;padding:60px 0 80px}
.faq-list{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.faq-item{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.faq-item:hover{
  border-color:rgba(74,143,234,0.4)!important;
  background:rgba(255,255,255,0.06)!important;
}
.faq-q{
  position:relative;
  padding:20px 56px 20px 24px;
  font-weight:600;
  font-size:16px;
  color:#fff!important;
  user-select:none;
  line-height:1.4;
}
.faq-q::after{
  content:'+';
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:28px;
  font-weight:300;
  color:var(--primary);
  transition:transform .25s ease, color .2s ease;
  line-height:1;
}
.faq-item.open .faq-q::after{
  content:'+';
  transform:translateY(-50%) rotate(45deg);
  color:var(--primary-light);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  padding:0 24px;
  color:rgba(255,255,255,0.78)!important;
  font-size:15px;
  line-height:1.7;
  transition:max-height .35s ease, padding .25s ease;
}
.faq-item.open .faq-a{
  max-height:500px;
  padding:0 24px 20px;
}

/* Open state — subtle accent */
.faq-item.open{
  border-color:rgba(74,143,234,0.5)!important;
  background:rgba(74,143,234,0.06)!important;
}

/* ============================================
   MIRRORS PAGE — Clean installation gallery + sizing table
   ============================================ */
.package-photos{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  max-width:var(--max-w);
  margin:32px auto 0;
  padding:0 var(--gutter);
}
.package-photos .pkg{
  margin:0;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  aspect-ratio:3/4;
  background:#000;
}
.package-photos .pkg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
}
.package-photos .pkg:hover img{transform:scale(1.03)}
.package-photos figcaption{
  position:absolute;
  left:14px;
  bottom:14px;
  background:rgba(14,27,61,0.85);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:6px 12px;
  border-radius:6px;
  backdrop-filter:blur(4px);
}

@media(max-width:899px){
  .package-photos{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .package-photos{grid-template-columns:1fr}
}

/* Sizing table */
.size-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
  max-width:1100px;
  margin:36px auto 0;
  padding:0 var(--gutter);
}
.size-card{
  position:relative;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:32px 24px 28px;
  text-align:center;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.size-card:hover{
  transform:translateY(-3px);
  border-color:var(--primary);
  box-shadow:0 16px 40px rgba(74,143,234,0.2);
}
.size-card.featured{
  background:linear-gradient(180deg, rgba(74,143,234,0.14) 0%, rgba(74,143,234,0.04) 100%);
  border-color:rgba(74,143,234,0.5);
}
.size-tag{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(74,143,234,0.4);
}
.size-dim{
  font-size:28px;
  font-weight:700;
  color:#fff!important;
  margin-bottom:10px;
  letter-spacing:-0.01em;
}
.size-use{
  font-size:14px;
  color:rgba(255,255,255,0.65)!important;
  line-height:1.5;
  margin-bottom:20px;
  min-height:42px;
}
.size-price{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:14px;
  color:rgba(255,255,255,0.6);
}
.size-price strong{
  color:var(--primary);
  font-weight:700;
  font-size:22px;
  margin:0 4px;
}
.size-price span{color:rgba(255,255,255,0.6);font-weight:500}

/* ============================================
   OUR WORK — categorized gallery w/ filter tabs
   ============================================ */
.gallery-container{
  max-width:1400px;
  margin:32px auto 0;
  padding:0 var(--gutter);
}
.gal-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0;
  background:var(--navy-dark);
  border-radius:10px 10px 0 0;
  padding:0;
  border-bottom:2px solid rgba(255,255,255,0.06);
  margin-bottom:0;
  overflow-x:auto;
  scrollbar-width:thin;
}
.gal-tab{
  background:transparent;
  border:none;
  cursor:pointer;
  color:rgba(255,255,255,0.6);
  padding:18px 22px 16px;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  position:relative;
  white-space:nowrap;
  transition:color .15s ease;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  flex-shrink:0;
}
.gal-tab:hover{color:rgba(255,255,255,0.85)}
.gal-tab.active{
  color:#fff;
  border-bottom-color:var(--primary);
}
.gal-tab-label{font-size:14px}
.gal-tab-count{
  font-size:11px;
  color:rgba(255,255,255,0.45);
  font-weight:500;
  letter-spacing:0.04em;
}
.gal-tab.active .gal-tab-count{color:var(--primary)}

.gal-count-line{
  padding:18px 4px 22px;
  color:rgba(255,255,255,0.55);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.gal-count-line #galCountNum{
  color:#fff;
  font-size:15px;
  margin:0 2px;
}

.gal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:1200px;
  margin:36px auto 0;
  padding:0 var(--gutter);
}

/* ============================================
   OUR WORK — Slideshow (fade-stack, bulletproof)
   ============================================ */
.slideshow{
  position:relative;
  max-width:1100px;
  margin:36px auto 0;
  padding:0 var(--gutter);
}
.slides-track{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  border-radius:16px;
  overflow:hidden;
  background:#0e1b3d;
  box-shadow:0 25px 60px rgba(0,0,0,0.45);
}
/* Every slide stacks in the same spot via absolute positioning */
.slide{
  position:absolute!important;
  top:0;
  left:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;     /* override the body * max-width rule */
  opacity:0;
  visibility:hidden;
  transition:opacity .55s ease-in-out, visibility .55s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:1;
}
.slide-photo{padding:0}
.slide-photo img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  display:block;
}

/* Logo / Business Card slide — same absolute positioning */
.slide-card{
  background:#0e1b3d;
}
.slide-card-img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain;
  display:block;
  background:#0e1b3d;
}
.slide-card-overlay{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  align-items:center;
  background:rgba(0,0,0,0.55);
  padding:10px 14px;
  border-radius:12px;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  z-index:2;
}
.slide-card-phone{
  color:#fff!important;
  text-decoration:none;
  font-size:18px;
  font-weight:700;
  padding:8px 16px;
  border-radius:8px;
  background:rgba(74,143,234,0.25);
  border:1px solid rgba(74,143,234,0.45);
  transition:background .15s ease;
  white-space:nowrap;
}
.slide-card-phone:hover{background:rgba(74,143,234,0.5)}
.slide-card-cta{
  background:var(--primary);
  color:#fff!important;
  text-decoration:none;
  padding:9px 18px;
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  transition:background .15s ease;
  white-space:nowrap;
}
.slide-card-cta:hover{background:var(--primary-dark)}

/* Prev / Next nav buttons */
.slide-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  backdrop-filter:blur(8px);
  transition:background .15s ease, transform .1s ease;
}
.slide-nav:hover{background:var(--primary)}
.slide-nav:active{transform:translateY(-50%) scale(0.95)}
.slide-nav svg{width:22px;height:22px}
.slide-prev{left:20px}
.slide-next{right:20px}

/* Dots */
.slide-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:18px;
  flex-wrap:wrap;
}
.slide-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  border:none;
  padding:0;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.slide-dot:hover{background:rgba(255,255,255,0.45)}
.slide-dot.active{
  background:var(--primary);
  transform:scale(1.4);
}

@media(max-width:760px){
  .slides-track{aspect-ratio:1/1}
  .slide-nav{width:38px;height:38px}
  .slide-prev{left:10px}
  .slide-next{right:10px}
  .slide-card-overlay{
    flex-direction:column;
    bottom:14px;
    padding:8px 12px;
    gap:6px;
    width:calc(100% - 28px);
  }
  .slide-card-phone{font-size:16px;padding:7px 14px;text-align:center;display:block}
  .slide-card-cta{font-size:13px;padding:8px 14px;text-align:center;display:block;width:100%}
}

/* ============================================
   HERO — vertical 9:16 video in place of photo
   ============================================ */
.hero-with-video .hero-inner{
  align-items:center;
}
.hero-video{
  position:relative;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
.hero-video video{
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  border-radius:16px;
  background:#000;
  display:block;
  box-shadow:0 25px 60px rgba(0,0,0,0.5),
             0 0 0 1px rgba(74,143,234,0.2);
  object-fit:cover;
}
@media(max-width:999px){
  .hero-with-video .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-video{order:-1;max-width:280px;margin-bottom:24px}
  .hero-content{margin:0 auto}
  .hero-content p{margin-left:auto;margin-right:auto}
}
@media(max-width:520px){
  .hero-video{max-width:240px}
}

/* ============================================================
   MOBILE OPTIMIZATION — comprehensive responsive polish
   Targets iPhone SE (375px), iPhone 14 (390px), Pro Max (430px)
   ============================================================ */
html, body{overflow-x:hidden}

/* Prevent horizontal scroll on any oversized child */
body *{max-width:100%}
img, video{max-width:100%;height:auto}

/* Smaller base font-size + tighter type on phones */
@media(max-width:760px){
  :root{--gutter:18px}
  .section-header{padding:0 var(--gutter)}
  .section-header h2{font-size:26px!important;line-height:1.2}
  .section-header p{font-size:14px}
  body{font-size:15px}

  /* Hero text must fit small screens — reduce font + tighten line-height */
  .hero{padding:48px 0}
  .hero-inner{padding:0 var(--gutter)}
  .hero-content h1{font-size:30px;line-height:1.15}
  .hero-content > p{font-size:16px;margin-bottom:24px}
  .hero-actions{flex-wrap:wrap;gap:10px}
  .hero-actions .btn{font-size:14px;padding:11px 18px;flex:1;min-width:140px;text-align:center}

  /* Header — give breathing room */
  .header-inner{padding:10px var(--gutter)!important}
  .logo-mark{height:40px}
  .announce-bar{font-size:12px;padding:7px var(--gutter)}

  /* CTA buttons in nav-mobile drawer — full-width tap targets */
  .nav{padding:14px var(--gutter)!important}
  .nav a{
    padding:14px 0!important;
    font-size:16px;
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Trust strip wraps cleanly */
  .trust-inner{gap:14px;padding:0 var(--gutter)}
  .trust-item{font-size:12px}

  /* Footer collapses */
  .footer{padding:40px 0 24px}
  .footer-grid{padding:0 var(--gutter);gap:24px}
  .footer-col h4{font-size:14px;margin-bottom:10px}
  .footer-col a{font-size:14px;padding:4px 0}
  .footer-bottom{padding:16px var(--gutter)!important;text-align:center}

  /* Section padding cleanups */
  section{padding-left:0;padding-right:0}

  /* Home tiles — single column on tiny screens, 2 col on bigger phones */
  .home-tiles{
    grid-template-columns:1fr 1fr;
    padding:0 var(--gutter);
    gap:12px;
  }
  .home-tile{padding:24px 16px!important}
  .home-tile h3{font-size:16px!important}
  .home-tile p{font-size:13px!important;line-height:1.5!important}
  .home-tile-icon{width:44px!important;height:44px!important;margin-bottom:14px!important}
  .home-tile-icon svg{width:22px!important;height:22px!important}

  /* Size cards full-width on mobile */
  .size-grid{grid-template-columns:1fr;gap:14px;max-width:420px}
  .size-card{padding:24px 20px 20px}
  .size-dim{font-size:24px}
  .size-use{min-height:auto;margin-bottom:14px}

  /* Steps row — stack on mobile */
  .steps-row{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:0 var(--gutter)!important;
    max-width:480px;
    margin:0 auto!important;
  }
  .step-card{padding:22px 20px!important}
  .step-arrow{display:none!important}

  /* Features grid wraps to 2 columns */
  .features-grid, .features-banner{
    grid-template-columns:repeat(2, 1fr)!important;
    gap:20px!important;
    padding:0 var(--gutter)!important;
  }

  /* FAQ readable on phones */
  .faq{padding:48px 0 56px!important}
  .faq-list{padding:0 var(--gutter)}
  .faq-q{padding:16px 48px 16px 18px!important;font-size:15px!important}
  .faq-q::after{right:14px!important;font-size:24px!important}
  .faq-a{padding:0 18px!important;font-size:14px!important}
  .faq-item.open .faq-a{padding:0 18px 16px!important}

  /* Gallery — already responsive; tighten gaps */
  .gal-grid{gap:8px;padding:0 var(--gutter);grid-template-columns:repeat(2, 1fr)}

  /* Quote form — already stacks, just tighten */
  .quote-hero{padding:40px 0 60px!important}
  .quote-hero-text h1{font-size:28px!important}
  .quote-hero-text > p{font-size:15px}
  .quote-form-card{padding:24px 20px!important}
  .qf-field input, .qf-field select, .qf-field textarea{
    font-size:16px;  /* 16px prevents iOS auto-zoom on focus */
    padding:13px 14px;
  }
  .qf-submit{padding:14px 18px;font-size:15px}

  /* Overview video on home — wider on small screens */
  .overview-video-wrap{max-width:300px}

  /* CTA section text smaller */
  .cta-section{padding:48px 0!important}
  .cta-inner{padding:0 var(--gutter);grid-template-columns:1fr;gap:24px}

  /* Pricing section heading smaller */
  .sizes h2, .pricing h2{font-size:26px!important}

  /* All buttons get min 44px tap target */
  .btn, button.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* Extra-small phones */
@media(max-width:420px){
  :root{--gutter:14px}
  .hero-content h1{font-size:26px}
  .home-tiles{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}
  .features-grid, .features-banner{grid-template-columns:1fr!important}
  .gal-grid{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}
  .logo-mark{height:36px}
  .header-phone{font-size:13px}
}

/* Touch-friendly hover-removal — hover effects feel weird on touch devices */
@media(hover:none){
  .home-tile:hover, .gal-item:hover, .pkg:hover, .size-card:hover{
    transform:none!important;
  }
}

/* Prevent landscape phone overflow */
@media(orientation:landscape) and (max-height:500px){
  .hero{padding:32px 0!important}
  .hero-content h1{font-size:24px!important}
}
.gal-item{
  margin:0;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  aspect-ratio:1/1;
  position:relative;
}
.gal-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease, filter .25s ease;
}
.gal-item:hover img{
  transform:scale(1.05);
  filter:brightness(1.06);
}

@media(max-width:1100px){
  .gal-grid{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:760px){
  .gal-grid{grid-template-columns:repeat(2, 1fr);gap:10px}
  .gal-tab{padding:14px 16px 12px}
  .gal-tab-label{font-size:13px}
}
@media(max-width:420px){
  .gal-tab-label{font-size:12px}
}

/* ---------- Home page tiles ---------- */
.home-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
  margin-top:40px;
  max-width:var(--max-w);
  margin-left:auto;
  margin-right:auto;
}
.home-tile{
  display:block;
  background:var(--white);
  padding:32px 28px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.home-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.06);
  border-color:var(--primary);
}
.home-tile-icon{
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(37,99,235,0.08);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.home-tile-icon svg{width:24px;height:24px}
.home-tile h3{font-size:18px;color:var(--navy);margin-bottom:8px;font-weight:600}
.home-tile p{font-size:14px;color:var(--text-light);line-height:1.6}

/* ---------- Quote page form ---------- */
.quote-hero{
  padding:60px 0 80px;
  background:linear-gradient(180deg,var(--light) 0%, var(--white) 100%);
}
.quote-hero-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
  align-items:start;
}
.quote-hero-text h1{font-size:42px;line-height:1.15;color:var(--navy);margin-bottom:16px}
.quote-hero-text h1 span{color:var(--primary)}
.quote-hero-text > p{font-size:17px;color:var(--text-light);line-height:1.65;margin-bottom:32px;max-width:480px}
.quote-perks{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}
.quote-perk{display:flex;gap:14px;align-items:flex-start}
.quote-perk-icon{
  flex-shrink:0;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(34,197,94,0.12);
  color:#16a34a;
  display:flex;align-items:center;justify-content:center;
}
.quote-perk-icon svg{width:14px;height:14px}
.quote-perk strong{display:block;font-size:15px;color:var(--navy);margin-bottom:2px;font-weight:600}
.quote-perk span{font-size:14px;color:var(--text-light);line-height:1.5}
.quote-direct{padding-top:24px;border-top:1px solid var(--border)}
.quote-direct p{font-size:14px;color:var(--text-light);margin-bottom:10px}

.quote-form-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px;
  box-shadow:0 12px 40px rgba(0,0,0,0.06);
  position:sticky;
  top:100px;
}
.quote-form-header{margin-bottom:24px}
.quote-form-header h2{font-size:24px;color:var(--navy);margin-bottom:4px;font-weight:600}
.quote-form-header p{font-size:14px;color:var(--text-light)}
.qf-field{margin-bottom:18px}
.qf-field label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:8px;
  letter-spacing:0.01em;
}
.qf-field input, .qf-field select{
  width:100%;
  padding:14px 16px;
  font-size:15px;
  font-family:inherit;
  color:var(--text);
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.qf-field input:focus, .qf-field select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}
.qf-field select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:42px;
  cursor:pointer;
}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.qf-row .qf-field{margin-bottom:0}
.qf-submit{
  width:100%;
  padding:15px 20px;
  background:var(--primary);
  color:var(--white);
  font-size:15px;
  font-weight:600;
  border:none;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  transition:background .15s ease, transform .1s ease;
}
.qf-submit:hover{background:var(--primary-dark)}
.qf-submit:active{transform:translateY(1px)}
.qf-submit:disabled{opacity:0.7;cursor:wait}
.qf-submit svg{width:16px;height:16px}
.qf-note{
  font-size:12px;
  color:var(--text-light);
  text-align:center;
  margin-top:14px;
  line-height:1.5;
}
.qf-success{
  display:none;
  text-align:center;
  padding:32px 16px;
}
.qf-success.show{display:block}
.qf-check{
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(34,197,94,0.15);
  color:#16a34a;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
}
.qf-check svg{width:32px;height:32px}
.qf-success h3{font-size:22px;color:var(--navy);margin-bottom:10px;font-weight:600}
.qf-success p{font-size:15px;color:var(--text-light);line-height:1.6;max-width:340px;margin:0 auto}

@media(max-width:999px){
  .quote-hero-inner{grid-template-columns:1fr;gap:40px}
  .quote-form-card{position:static}
  .quote-hero-text h1{font-size:32px}
}
@media(max-width:520px){
  .quote-form-card{padding:24px}
  .qf-row{grid-template-columns:1fr;gap:0;margin-bottom:0}
  .qf-row .qf-field{margin-bottom:18px}
}