/* Suburb search: the header forms (Locations dropdown, phone menu) and the suggestion list. One small cached file, linked at the
   end of <body>, so it costs no inlined CSS (DECISIONS #46). Spacing is literal: the spacing tokens are folded at build time. */
.hs{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hs label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hs .find__row{display:flex;align-items:center;gap:8px;height:52px;padding:0 6px 0 20px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px #c9d3de}
.hs .find__row:focus-within{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px rgba(23,102,194,.18)}
.hs input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink)}
.hs .find__go{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--cta);color:#fff;cursor:pointer;display:grid;place-items:center}
.hs .find__go:hover{background:var(--cta-h)}
.hs .find__go .ico{width:18px;height:18px}
.mega__find{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr minmax(260px,360px);align-items:center;gap:8px 24px;padding:0 10px 16px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mega__find .mega__head{padding:0}
.mega__find p{margin:0;font-size:14px;color:var(--text)}
.menu__panel .hs{padding:6px 6px 12px}
.find{position:relative}
.find__list{position:absolute;z-index:30;top:100%;left:0;right:0;margin:8px 0 0;padding:8px;list-style:none;border-radius:var(--r-md);background:#fff;box-shadow:inset 0 0 0 1.5px #c9d3de,var(--shadow-pill)}
.find__list li{padding:12px 16px;border-radius:var(--r-sm);cursor:pointer;color:var(--ink)}
.find__list li:hover,.find__list [aria-selected=true]{background:var(--sky-1)}
@media (max-width:999px){.find__list{position:static}}

/* Mega menu intro blocks as on live: Locations gets the phone link and quote button under the search, Services gets a text + photo + quote block as its last column.
   The photo (display:none until the dropdown opens) loads on the first hover, so it costs no request on a normal page view. */
.mega__cta{grid-column:1/-1;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding-top:8px}
.mega__phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.mega__phone:hover{color:var(--blue)}

.talkrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.talk{font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.brand img{display:block;width:64px;height:auto;margin-bottom:8px}
.social{gap:16px!important;font-size:26px}
.brand{position:relative}.brand .chip{position:absolute;top:16px;right:16px}
#recent-jobs{scroll-margin-top:96px}
/* Header menus (Andrew, 2026-10-23): a clicked heading stays open (.is-open, /search/boot.js); Our Services in seven icon groups. */
.mnav__btn{gap:6px}.mnav__btn svg{width:12px;height:12px;transition:transform .2s}
.mnav__item.is-open>.mnav__btn{opacity:1;background:var(--panel)}.mnav__item.is-open>.mnav__btn svg{transform:rotate(180deg)}
.mnav__item.is-open .mega{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.mnav:has(.is-open) .mnav__item:not(.is-open) .mega{visibility:hidden;opacity:0}
.mega__cols--services{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 18px}
.mega__cols--services .mega__col{padding:14px;border-radius:var(--r);background:var(--bg,#f6f8fb);box-shadow:inset 0 0 0 1px var(--line)}
.mega__cols--services .mega__col ul{margin-top:6px;padding-left:0;border:0}
.mega__cols--services .mega__col a{padding:6px 8px;font-size:14.5px}
.mega__cols--services .mega__col:last-of-type:not(:has(.mega__head)) ul{display:flex;flex-wrap:wrap;gap:4px}
a.mega__head{display:flex;align-items:center;gap:10px;padding:4px 6px;font-size:15.5px}
.mega__ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:18px}
.mega__all{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:12px 6px 0;border-top:1px solid var(--line)}
.mega__all>a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}.mega__all>a:hover{color:var(--blue)}
.sub__head{display:flex;align-items:center;gap:8px}.sub__head svg{color:var(--blue)}
@media (max-width:1179px){.mega__cols--services{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mega__cols--faq{grid-template-columns:repeat(3,minmax(0,1fr))}