/* ============================================================
   SITE CHROME — header and footer from includes/header.php and
   includes/footer.php, used on every page.
   Classes are prefixed sm- and every rule sets its own type,
   colour and box model, so the chrome looks the same on the
   static pages and on the Next.js/Tailwind pages.
   ============================================================ */
.sm-top,.sm-nav,.sm-ft{--sm-ink:#162242;--sm-grey:#596176;--sm-coral:#FA6B63;--sm-coral-dk:#E4554D;
  --sm-peri:#6679D8;--sm-peri-50:#CDD3F2;--sm-tint:#F5F8FF;--sm-line:#E2E4E9;--sm-line-2:#C7CADA;
  --sm-pad:clamp(16px,5vw,40px);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.sm-top *,.sm-nav *,.sm-ft *{box-sizing:border-box}
.sm-top a,.sm-nav a,.sm-ft a{color:inherit;text-decoration:none}
.sm-nav img,.sm-ft img{display:block;max-width:none}
.sm-wrap{max-width:1180px;margin:0 auto;padding:0 var(--sm-pad)}

/* the Next.js pages reserved 100px for their old fixed nav */
#__next > section{padding-top:0 !important}

/* No fly-in animations: the Next.js pages render sections and blocks hidden
   (opacity:0, shifted 50px) and animate them in on scroll. Pin them in their
   final state so every page loads static. translateZ(0) is the animation
   library's signature, so carousels and menus are left alone. */
#__next section[style*="opacity"],
#__next [style*="translateZ(0"]{opacity:1 !important;transform:none !important}

/* ---------------- top bar ---------------- */
.sm-top{background:var(--sm-ink);color:rgba(255,255,255,.82);font-size:13px;line-height:1.3}
.sm-top .sm-wrap{max-width:1440px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.sm-points{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.sm-points li{display:flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.sm-points svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--sm-coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sm-top-tel{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:#fff;white-space:nowrap;transition:color .18s}
.sm-top-tel svg{width:14px;height:14px;fill:var(--sm-coral)}
.sm-top-tel .sm-top-call{font-weight:400;color:rgba(255,255,255,.65)}
.sm-top-tel:hover{color:#FFB3AD}
.sm-top a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------- header ---------------- */
.sm-nav{position:sticky;top:0;z-index:1000;background:#fff;color:var(--sm-ink);
  box-shadow:0 1px 0 rgba(22,34,66,.07)}
.sm-nav .sm-wrap{max-width:1440px;display:flex;align-items:center;gap:22px;min-height:88px}
.sm-logo{height:42px;width:auto}
.sm-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.sm-links > a,.sm-dd > a{font-size:15px;font-weight:500;position:relative;padding-bottom:3px;white-space:nowrap;
  display:inline-flex;align-items:center}
.sm-links > a::after,.sm-dd > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:4px;
  background:var(--sm-peri-50);transition:width .2s}
.sm-links > a:hover::after,.sm-links > a[aria-current]::after,
.sm-dd > a:hover::after,.sm-dd > a[aria-current]::after{width:105%}
.sm-dd > a img{width:10px;margin-left:6px}

.sm-btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:600;
  font-size:14px;line-height:1.2;padding:12px 24px;border-radius:999px;border:1px solid transparent;
  white-space:nowrap;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.sm-btn-primary{background:var(--sm-coral);color:#fff !important}
.sm-btn-primary:hover{background:var(--sm-coral-dk)}
.sm-btn-outline{background:#fff;color:var(--sm-ink);border-color:var(--sm-line-2)}
.sm-btn-outline:hover{border-color:var(--sm-ink)}

/* action group: PPC Audit + Let's talk PPC */
.sm-actions{display:flex;align-items:center;gap:10px;flex:none}

/* ---------------- featured button (PPC Audit) ----------------
   White button with dark text beside "Let's talk PPC"; the coral star
   marks it as a priority link. Sits on the same baseline as the CTA. */
.sm-btn-feat{gap:7px;background:#fff;color:var(--sm-ink) !important;border-color:var(--sm-line-2);
  padding:10px 20px}
.sm-btn-feat:hover,.sm-btn-feat[aria-current]{border-color:var(--sm-ink)}

/* "Do it!" sticker on PPC Audit buttons (.sm-doit).
   Always on the desktop nav button; on phones (< 768px) also on the
   phone-menu and home-hero buttons. Static on load, tilts on hover.
   --sm-doit switches the label on; content:none draws nothing. */
.sm-doit{position:relative}
.sm-actions .sm-doit{--sm-doit:"Do it!"}
@media(max-width:767px){ .sm-doit{--sm-doit:"Do it!"} }
.sm-doit::after{content:var(--sm-doit,none);position:absolute;top:-10px;left:-12px;padding:3px 8px 3px;border-radius:999px;
  background:#FA6B63;color:#fff;font-family:'Poppins',system-ui,sans-serif;font-size:10px;font-weight:700;
  line-height:1.2;letter-spacing:-.04em;white-space:nowrap;pointer-events:none;transform:rotate(-9deg);
  box-shadow:0 3px 8px rgba(250,107,99,.35),0 0 0 2px #fff;z-index:2;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.sm-doit:hover::after{transform:rotate(4deg) scale(1.08)}

/* the Next.js pages' pill buttons fell back to a system font; match the brand */
#__next .mantine-UnstyledButton-root{font-family:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif}
#__next .mantine-UnstyledButton-root[class*="rounded-full"]{font-weight:600}

/* "What We Do" dropdown */
.sm-dd{position:relative;display:flex;align-items:center}
.sm-dd-menu{position:absolute;top:100%;left:-24px;padding-top:16px;min-width:270px;opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.sm-dd-menu::before{content:"";position:absolute;inset:16px 0 0;background:#fff;border-radius:12px;
  box-shadow:0 12px 24px rgba(24,36,65,.14);z-index:-1}
.sm-dd:hover .sm-dd-menu,.sm-dd:focus-within .sm-dd-menu{opacity:1;visibility:visible;transform:none}
.sm-dd-menu a{display:block;padding:11px 24px;font-size:14px;font-weight:500;white-space:nowrap}
.sm-dd-menu a:first-child{margin-top:8px}
.sm-dd-menu a:last-child{margin-bottom:8px}
.sm-dd-menu a:hover,.sm-dd-menu a[aria-current]{background:var(--sm-tint);color:var(--sm-coral)}

/* mobile */
.sm-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.sm-toggle span{display:block;width:26px;height:3px;background:var(--sm-ink);margin:5px 0;border-radius:2px}
.sm-menu{display:none}
.sm-nav a:focus-visible,.sm-nav button:focus-visible,.sm-ft a:focus-visible{outline:3px solid var(--sm-peri);outline-offset:3px}

/* ---------------- footer ---------------- */
.sm-ft{background:var(--sm-ink);color:rgba(255,255,255,.7);font-size:14.5px}
.sm-ft .sm-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;padding-block:46px}
.sm-ft h4{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45)}
.sm-ft p{margin:0;font-size:14.5px;line-height:1.6}
.sm-ft a{display:block;color:rgba(255,255,255,.78);padding:4px 0}
.sm-ft a:hover{color:var(--sm-coral)}
.sm-ft .sm-flogo{height:36px;width:auto;filter:brightness(0) invert(1);margin-bottom:16px}
.sm-ft .sm-tel{margin-top:10px;color:#fff;font-weight:600}
.sm-ft .sm-social{display:flex;gap:14px;margin-top:16px}
.sm-ft .sm-social img{height:18px;filter:brightness(0) invert(1);opacity:.8}
.sm-ft-bot{border-top:1px solid rgba(255,255,255,.14)}
.sm-ft-bot .sm-wrap{display:flex;justify-content:space-between;gap:16px;padding-block:18px;font-size:13px;flex-wrap:wrap}

/* ---------------- responsive ---------------- */
@media(max-width:1399px){
  .sm-nav .sm-wrap{gap:16px}
  .sm-links{gap:18px}
  .sm-links > a,.sm-dd > a{font-size:14px}
  .sm-actions .sm-btn-primary{padding:9px 18px}
  .sm-btn-feat{padding:9px 16px}
}
@media(max-width:1279px){
  .sm-links,.sm-actions{display:none}
  .sm-toggle{display:block}
  .sm-menu.open{display:block;border-top:1px solid var(--sm-line);padding:6px var(--sm-pad) 20px;
    max-height:calc(100vh - 72px);overflow-y:auto}
  .sm-menu a{display:block;padding:11px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--sm-line)}
  .sm-menu a.sm-sub{padding-left:18px;font-size:14.5px;color:var(--sm-grey)}
  .sm-menu .sm-btn{display:flex;margin-top:14px;width:100%;border-bottom:1px solid transparent;font-size:15px}
  .sm-menu .sm-btn-outline,.sm-menu .sm-btn-feat{border-bottom-color:var(--sm-line-2)}
}
@media(max-width:1000px){ .sm-ft .sm-cols{grid-template-columns:1fr 1fr} .sm-points li:nth-child(n+3),.sm-top-call{display:none} }
@media(max-width:640px){
  .sm-points li + li,.sm-top-call{display:none}
  .sm-top{font-size:12px}
  .sm-top .sm-wrap{gap:10px}
  .sm-points li,.sm-top-tel{gap:5px}
  .sm-nav .sm-wrap{min-height:72px}
  .sm-logo{height:32px}
  .sm-ft .sm-cols{grid-template-columns:1fr}
}
/* narrowest phones: drop the top-bar icons so guarantee + number still fit */
@media(max-width:379px){ .sm-points svg,.sm-top-tel svg{display:none} }
@media(prefers-reduced-motion:reduce){.sm-nav *,.sm-ft *{transition:none !important}}

/* Next.js pages: their closing CTA kept a 224px bottom margin meant for the old footer */
#__next section[class*="mb-56"]{margin-bottom:64px !important}