/* Shared site navigation, used on every page (replaces each page's own nav).
   Logo · Services (dropdown) · About · Blog · Contact Us · Get a Free Audit.
   On phones the audit button moves to a bar fixed to the bottom of the screen. */
.snav{--sn-forest:#1A3C34;--sn-forest-deep:#0F2A23;--sn-emerald:#2FAB73;--sn-emerald-d:#238a5c;--sn-coral:#E8653A;--sn-mint:#EDF7F0;--sn-sage:#5C6D66;--sn-line:rgba(26,60,52,0.10);
  position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sn-line);font-family:'Inter',sans-serif;transition:box-shadow .25s;}
.snav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.05);}
.snav-in{max-width:1240px;height:100%;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;}
.snav-logo{justify-self:start;}
.snav-cta,.snav-burger{justify-self:end;}   /* links stay centred whatever the button label */
.snav-logo{font-family:'Sora',sans-serif;font-size:22px;font-weight:800;letter-spacing:-0.03em;color:var(--sn-forest);text-decoration:none;line-height:1;}
.snav-logo span{color:var(--sn-coral);}

.snav-links{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0;}
.snav-links > li{position:relative;}
.snav-links a,.snav-dd-btn{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:500;color:var(--sn-forest);text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.snav-links a:hover,.snav-dd-btn:hover,.snav-links a.active,.snav-dd-btn.active{color:var(--sn-emerald-d);}
.snav-links a.active,.snav-dd-btn.active{font-weight:600;}
.snav-dd-btn{-webkit-tap-highlight-color:transparent;}
.snav-dd-btn:focus{outline:none;}
.snav-dd-btn:focus-visible{box-shadow:0 0 0 3px rgba(47,171,115,0.30);border-radius:6px;}
.snav-dd-btn svg{width:14px;height:14px;transition:transform .2s;}
.snav-dd.open .snav-dd-btn svg{transform:rotate(180deg);}

/* Services dropdown: opens under "Services", one row per service (icon, title, one-line summary) */
.snav-dd-menu{position:absolute;top:calc(100% + 12px);left:-22px;width:384px;background:#fff;border:1px solid var(--sn-line);border-radius:16px;box-shadow:0 22px 48px rgba(26,60,52,0.14);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;}
.snav-dd-menu::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px;}   /* hover bridge */
.snav-dd.open .snav-dd-menu{opacity:1;visibility:visible;transform:none;}
@media (hover:hover) and (min-width:961px){
  .snav-dd:hover .snav-dd-menu{opacity:1;visibility:visible;transform:none;}
  .snav-dd:hover .snav-dd-btn svg{transform:rotate(180deg);}
}
.snav-dd-label{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sn-sage);padding:6px 12px 8px;}
.snav-links .snav-dd-menu a{display:grid;grid-template-columns:40px 1fr 16px;align-items:center;column-gap:14px;padding:12px;border-radius:12px;width:100%;}
.snav-dd-menu a:hover,.snav-dd-menu a.active{background:var(--sn-mint);}
.snav-dd-ic{width:40px;height:40px;border-radius:11px;background:var(--sn-mint);display:flex;align-items:center;justify-content:center;color:var(--sn-emerald-d);transition:background .2s;}
.snav-dd-menu a:hover .snav-dd-ic,.snav-dd-menu a.active .snav-dd-ic{background:#fff;}
.snav-dd-ic svg{width:20px;height:20px;}
.snav-dd-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}
.snav-dd-menu b{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:var(--sn-forest);white-space:nowrap;}
.snav-dd-menu small{font-size:12.5px;font-weight:400;color:var(--sn-sage);white-space:nowrap;}
.snav-dd-go{width:16px;height:16px;color:var(--sn-emerald-d);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;}
.snav-dd-menu a:hover .snav-dd-go,.snav-dd-menu a.active .snav-dd-go{opacity:1;transform:none;}

.snav-cta{font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:#fff;background:var(--sn-forest);padding:11px 20px;border-radius:12px;text-decoration:none;white-space:nowrap;transition:background .2s;}
.snav-cta:hover{background:var(--sn-forest-deep);}

/* Menu button (phones): soft mint tile, thin lines in a lighter green, no browser focus box */
.snav-burger{display:none;width:42px;height:42px;border:0;border-radius:12px;background:var(--sn-mint);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  -webkit-tap-highlight-color:transparent;transition:background .2s;}
.snav-burger:hover,.snav.menu-open .snav-burger{background:#DFF0E4;}
.snav-burger:focus{outline:none;}
.snav-burger:focus-visible{box-shadow:0 0 0 3px rgba(47,171,115,0.35);}
.snav-burger span{display:block;width:18px;height:1.75px;border-radius:2px;background:var(--sn-emerald-d);transition:transform .25s,opacity .2s,width .25s;}
.snav-burger span:nth-child(2){width:13px;margin-left:5px;}
.snav.menu-open .snav-burger span:nth-child(1){transform:translateY(6.75px) rotate(45deg);}
.snav.menu-open .snav-burger span:nth-child(2){opacity:0;}
.snav.menu-open .snav-burger span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg);}

/* Bottom audit bar (phones only) */
.snav-float{display:none;}

@media (max-width:960px){
  .snav-in{padding:0 20px;display:flex;justify-content:space-between;}
  .snav-cta{display:none;}
  .snav-burger{display:flex;}
  .snav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--sn-line);box-shadow:0 18px 30px rgba(26,60,52,0.10);padding:8px 20px 18px;max-height:calc(100vh - 64px);overflow:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;}
  .snav.menu-open .snav-links{opacity:1;visibility:visible;transform:none;}
  .snav-links > li{border-bottom:1px solid var(--sn-line);}
  .snav-links > li:last-child{border-bottom:0;}
  .snav-links a,.snav-dd-btn{width:100%;justify-content:space-between;padding:15px 2px;font-size:16px;}
  .snav-dd-menu{position:static;transform:none;width:auto;box-shadow:none;border:0;padding:0 0 10px;display:none;opacity:1;visibility:visible;}
  .snav-dd.open .snav-dd-menu{display:block;transform:none;}
  .snav-dd-menu::before{display:none;}
  .snav-dd-label{display:none;}
  .snav-links .snav-dd-menu a{padding:10px 8px;}
  .snav-dd-menu b,.snav-dd-menu small{white-space:normal;}
  .snav-dd-go{display:none;}
  .snav-links .snav-dd-menu a{grid-template-columns:36px 1fr;}
  .snav-dd-ic{width:36px;height:36px;}

  .snav-float{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:999;
    font-family:'Sora',sans-serif;font-size:15px;font-weight:600;color:#fff;background:var(--sn-emerald, #2FAB73);padding:15px 20px;border-radius:14px;text-decoration:none;
    box-shadow:0 10px 28px rgba(15,42,35,0.28);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .25s,transform .25s,visibility .25s;}
  .snav-float.show{opacity:1;visibility:visible;transform:none;}
}
.snav-float{--sn-emerald:#2FAB73;}

/* Pages built on linkedin-service.css offset their banner for a 60px nav; this one is 64px */
.snav ~ .banner{margin-top:64px;}

/* The LinkedIn page had its own floating audit button; the shared bottom bar replaces it */
.float-cta{display:none!important;}

/* Case study card without screenshots (files not uploaded yet): single text column */
.cs-card.cs-noimg{grid-template-columns:1fr !important;}