/* Shared chrome styles: nav, mobile menu and the three modals.
   Extracted from the home stylesheet (the superset) and loaded on every
   page, since chrome.php is shared. Page CSS loads after and wins. */


  #pr-menu-btn { display: none; }
@media (max-width: 1030px) {

    #pr-nav-links { display: none !important; }

    #pr-nav-icons { display: none !important; }

    #pr-nav-cta { display: none !important; }

    #pr-menu-btn { display: flex !important; }

    #pr-nav { padding: 16px 20px !important; }
}
@media (max-width: 860px) {

    #pr-nav-cta { display: none !important; }
}
@media (max-width: 900px) {

    #pr-footer { grid-template-columns: 1fr 1fr !important; gap: 32px 40px !important; }
}
@media (max-width: 560px) {

    #pr-footer { grid-template-columns: 1fr !important; gap: 30px !important; }

    #pr-svcmodal-card > div:nth-child(2) { grid-template-columns: repeat(2, 1fr) !important; }

    #pr-svcmodal-card { padding: 22px !important; }
}

  #pr-svc-land .pr-svc-drop { margin-left: -38px; transition: margin-left 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1); }

  #pr-svc-land .pr-svc-drop:first-child { margin-left: 0; }

  #pr-svc-land .pr-svc-drop:hover { transform: translateY(-10px) scale(1.06) !important; z-index: 5; box-shadow: 0 26px 55px rgba(0,0,0,0.4); }
@media (max-width: 860px) {

    #pr-svc-land { display: none !important; }
}
@media (max-height: 760px) and (min-width: 861px) {

    #pr-svc-land { margin-bottom: 2vh !important; }

    #pr-svc-land .pr-svc-drop { width: clamp(60px, 6vw, 92px) !important; }
}
@media (max-width: 860px) {

    #pr-cm-form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }

    #pr-cm-form input, #pr-cm-form textarea { font-size: 16px !important; width: 100% !important; padding: 10px 13px !important; }

    #pr-cm-form .pr-cm-step { gap: 10px !important; }

    #pr-cm-form label { gap: 4px !important; }

    #pr-tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }

    #pr-tile-grid .pr-tile > div:last-child { font-size: 9px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; }

    #pr-tile-grid .pr-tile-check { width: 16px !important; height: 16px !important; top: 4px !important; right: 4px !important; }

    #pr-cm-form label:has(input[name="phone"]) { display: none !important; }

    #pr-cm-card { max-height: 94vh !important; }

    #pr-footer { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 8vh !important; }
}


/* nav: each service hovers in its own colour */
#pr-svc-inline a { transition: color .2s ease; }
.lgs-nav-social-media-management:hover, .lgs-nav-social-media-management:focus-visible { color: #d10a6f !important; }
.lgs-nav-branding-service:hover, .lgs-nav-branding-service:focus-visible { color: #e2621c !important; }
.lgs-nav-web-design-service:hover, .lgs-nav-web-design-service:focus-visible { color: #3b4ddb !important; }
.lgs-nav-web-hosting-service:hover, .lgs-nav-web-hosting-service:focus-visible { color: #17b89a !important; }
.lgs-nav-seo-services:hover, .lgs-nav-seo-services:focus-visible { color: #ff3130 !important; }
.lgs-nav-google-ads-service:hover, .lgs-nav-google-ads-service:focus-visible { color: #5c34c3 !important; }
.lgs-nav-print:hover, .lgs-nav-print:focus-visible { color: #b88400 !important; }
.lgs-nav-software:hover, .lgs-nav-software:focus-visible { color: #417695 !important; }


@keyframes bookIn { 0% { opacity: 0; transform: translateY(60px) scale(0.8) rotate(-3deg); } 60% { transform: translateY(-8px) scale(1.02) rotate(0.5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }