/* =========================================================
   NawazOnline NAW4 Final Fixes
   Purpose:
   - Keep original light pink theme
   - Keep all SEO/local-page improvements
   - Use solid #ff256a for CTA buttons only
   - Keep secondary buttons black
   - Prevent hero/audit images from stretching
   - Remove unwanted live helper text
   ========================================================= */

/* 1) Theme variables */
:root{
  --yellow:#ff256a;
  --orange:#ff256a;
  --pink:#ff256a;
  --pink-soft:#fdebf7;
  --pink-bg:#fff5fb;
  --cta-blue:#ff256a;
  --ink:#101014;
  --muted:#475569;
  --line:#f2d8ea;
  --soft:#fff5fb;
}

/* 2) Restore the original light-pink website feel */
body{background:#fff5fb!important;color:var(--ink)!important;}
.nav{background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--line)!important;}
.hero{background:radial-gradient(circle at 85% 20%,#f9d8ee 0%,transparent 40%),linear-gradient(180deg,#fff2fa 0%,#fdebf7 100%)!important;}
.hero:before{background:#f7b8de55!important;}
.section{background:#fff5fb!important;}
.section.alt{background:#fdebf7!important;}
.trust-section{background:linear-gradient(180deg,#fff5fb,#fdebf7)!important;}
.card,.point,.faq,.audit-item,.eyebrow,.work{border-color:var(--line)!important;}
.hero h1 span,.score,.step b,.stat strong,.trust-card strong,.area-pill:hover,.menu a:not(.btn):hover{color:#ff256a!important;}
.icon{background:linear-gradient(135deg,#ffe4f4,#ff256a)!important;}
.mark{background:linear-gradient(135deg,#ff256a,#22c55e)!important;box-shadow:0 10px 25px #ff256a55!important;}

/* 3) CTA buttons: one clean solid blue only */
.btn:not(.dark),
a.btn:not(.dark),
button.btn:not(.dark),
.navbtn,
.form button,
.mobile-cta{
  background:#ff256a!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#ff256a!important;
  box-shadow:0 12px 30px rgba(255,37,106,.24)!important;
}
.btn:not(.dark):hover,
a.btn:not(.dark):hover,
button.btn:not(.dark):hover,
.navbtn:hover,
.form button:hover,
.mobile-cta:hover{
  background:#ff256a!important;
  background-image:none!important;
  color:#fff!important;
  opacity:.94;
  filter:none!important;
}
.btn.dark,a.btn.dark,button.btn.dark{
  background:#111!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
}

/* 4) Service-area pills */
.area-pill{background:#111!important;color:#fff!important;}
.area-pill:hover{background:#fff!important;border:1px solid #ff256a!important;}

/* 5) Remove unwanted helper text under hero */
.float-card{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;width:0!important;overflow:hidden!important;padding:0!important;margin:0!important;}

/* 6) Fix stretched hero and audit images */
.slider{aspect-ratio:16/9!important;background:#fff!important;border:8px solid #fff!important;}
.slide img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;}
.mock{background:transparent!important;padding:0!important;border-radius:28px!important;box-shadow:none!important;overflow:visible!important;aspect-ratio:auto!important;display:block!important;}
.mock img,.mock > img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;border-radius:28px!important;background:#fff!important;display:block!important;aspect-ratio:16/9!important;}
.mock h2{display:none!important;}
.split{align-items:center!important;}

/* 7) Audit proof box added under the image */
.audit-proof-box{
  margin-top:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:20px;
  box-shadow:0 16px 42px rgba(236,72,153,.10);
  color:#101014;
}
.audit-proof-box .proof-heading{font-weight:900;color:#ff256a;margin-bottom:10px;font-size:15px;}
.proof-numbers{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.proof-numbers span:not(.arrow){background:#fff5fb;border:1px solid #f2d8ea;border-radius:18px;padding:12px 16px;min-width:110px;}
.proof-numbers b{display:block;font-size:34px;line-height:1;color:#028dff;}
.proof-numbers small{display:block;margin-top:4px;color:#475569;font-weight:800;}
.proof-numbers .arrow{font-size:30px;font-weight:900;color:#ff256a;}
.proof-tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 10px;}
.proof-tags span{background:#101014;color:#fff;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;}
.audit-proof-box p{margin:0;color:#475569;font-weight:700;font-size:14px;}

/* 8) Mobile adjustments */
@media(max-width:900px){
  .menu{background:#fff!important;}
  .slider{border-width:4px!important;}
  .mock{aspect-ratio:auto!important;}
  .audit-proof-box{margin-bottom:10px;}
  .proof-numbers{gap:10px;}
  .proof-numbers span:not(.arrow){min-width:95px;}
}


/* =========================================================
   Final colour lock - 24 Jun
   Purpose: keep all previous SEO/content/layout changes intact,
   but force pink accent text to #ff256a and CTA buttons to #ff256a.
   ========================================================= */
:root{
  --yellow:#ff256a!important;
  --orange:#ff256a!important;
  --pink:#ff256a!important;
  --cta-blue:#ff256a!important;
}
.hero h1 span,
.score,
.step b,
.stat strong,
.trust-card strong,
.audit-proof-box .proof-heading,
.proof-numbers .arrow,
.card h3 span,
.section-title h2 span,
.big span,
.logo .brand-accent,
.menu a:not(.btn):hover,
.breadcrumb a,
.service-links a,
.proof strong,
.badge-row span,
.area-pill:hover,
.highlight,
.text-pink,
.pink,
.accent{
  color:#ff256a!important;
}
.icon,
.mark{
  background:#ff256a!important;
  background-image:none!important;
  box-shadow:0 10px 25px rgba(255,37,106,.28)!important;
}
.btn,
a.btn,
button.btn,
.navbtn,
.hero-actions .btn:not(.dark),
.mobile-cta,
.form .btn,
.quote .btn,
.cta .btn,
.cta-btn,
.quote-btn,
.btn-primary{
  background:#ff256a!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#ff256a!important;
  box-shadow:0 14px 32px rgba(255,37,106,.22)!important;
}
.btn:hover,
a.btn:hover,
button.btn:hover,
.navbtn:hover,
.mobile-cta:hover,
.cta-btn:hover,
.quote-btn:hover,
.btn-primary:hover{
  background:#ff256a!important;
  background-image:none!important;
  color:#fff!important;
  opacity:.92;
}
.btn.dark,
a.btn.dark{
  background:#111!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#111!important;
}


/* =========================================================
   FINAL BUTTON COLOUR OVERRIDE - inside assets/css/final-fixes.css
   This file is linked by every page after style.css, so it works online.
   Buttons use the same brand pink as headings: #ff256a.
   ========================================================= */
.btn:not(.dark),
a.btn:not(.dark),
button.btn:not(.dark),
.navbtn,
.hero-actions .btn:not(.dark),
.form button,
.form .btn,
.quote .btn,
.cta .btn,
.cta-btn,
.quote-btn,
.btn-primary,
.mobile-cta,
input[type="submit"]{
  background:#ff256a!important;
  background-image:none!important;
  border-color:#ff256a!important;
  color:#ffffff!important;
  box-shadow:0 14px 32px rgba(255,37,106,.24)!important;
}
.btn:not(.dark):hover,
a.btn:not(.dark):hover,
button.btn:not(.dark):hover,
.navbtn:hover,
.hero-actions .btn:not(.dark):hover,
.form button:hover,
.form .btn:hover,
.quote .btn:hover,
.cta .btn:hover,
.cta-btn:hover,
.quote-btn:hover,
.btn-primary:hover,
.mobile-cta:hover,
input[type="submit"]:hover{
  background:#ff256a!important;
  background-image:none!important;
  border-color:#ff256a!important;
  color:#ffffff!important;
  opacity:.92;
  filter:none!important;
}
.btn.dark,
a.btn.dark,
button.btn.dark{
  background:#111!important;
  background-image:none!important;
  border-color:#111!important;
  color:#fff!important;
}


/* Logo replacement - keeps header height clean */
.logo.logo-image{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  font-size:0!important;
  text-decoration:none!important;
}
.logo.logo-image img{
  display:block!important;
  width:auto!important;
  max-width:310px!important;
  height:58px!important;
  object-fit:contain!important;
}
.site-footer .logo.logo-image img,
footer .logo.logo-image img{
  max-width:260px!important;
  height:52px!important;
}
@media (max-width: 768px){
  .logo.logo-image img{
    max-width:220px!important;
    height:48px!important;
  }
}

/* =========================================================
   Mobile Floating Call + Quote Buttons
   Added for mobile conversion: call button + working quote link.
   ========================================================= */
.mobile-action-bar{
    display:none;
}

@media (max-width:768px){
    body{
        padding-bottom:78px;
    }

    .mobile-action-bar{
        position:fixed;
        left:12px;
        right:12px;
        bottom:12px;
        z-index:99999;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        pointer-events:auto;
    }

    .mobile-action-btn{
        min-height:54px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        border-radius:999px;
        font-size:16px;
        font-weight:800;
        line-height:1;
        text-decoration:none !important;
        box-shadow:0 12px 28px rgba(0,0,0,.18);
        border:2px solid transparent;
        -webkit-tap-highlight-color:transparent;
    }

    .mobile-call-action{
        background:#111111 !important;
        color:#ffffff !important;
        border-color:#111111 !important;
    }

    .mobile-quote-action{
        background:#ff256a !important;
        color:#ffffff !important;
        border-color:#ff256a !important;
    }

    .mobile-action-btn:hover,
    .mobile-action-btn:focus{
        color:#ffffff !important;
        transform:translateY(-1px);
    }
}

@media(max-width:768px){.mobile-quote-bar,.bottom-cta,.sticky-quote,.floating-quote,.mobile-cta{display:none!important;}}


/* =========================================================
   Best Practices Safety Patch
   Prevents image distortion and improves tap/focus states.
   ========================================================= */
img{
    max-width:100%;
    height:auto;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(255,37,106,.35);
    outline-offset:3px;
}
button,
a,
input,
select,
textarea{
    -webkit-tap-highlight-color:rgba(255,37,106,.18);
}