/* THE PRIMARY NAVIGATION, for the pages that carry all of their CSS inline.
 *
 * Created 30 August 2026. TEN pages had a header containing only the logo, the phone number
 * and a Get a quote button, and NINE of them are the exact destinations the Services dropdown
 * sends people to. A visitor clicked "Local SEO" in the menu, landed, and had no way to reach
 * anything else without the back button.
 *
 * They have no nav CSS of their own and they do not link agency.css, so the markup alone would
 * have rendered an unstyled list. These rules are copied verbatim out of agency.css so the two
 * families of page cannot drift into two different looking headers.
 *
 * NOT LINKED ON /web-design-brisbane/. That is the paid ad lander from
 * ADS_LANDER_RUNBOOK_2026-08-19.md, and having no way off the page is a deliberate conversion
 * decision on a page somebody is paying per click to reach.
 */
.nav{display:flex;gap:32px}
.nav a{font-size:.86rem;color:var(--muted);position:relative;padding:4px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--lime);transition:width .35s var(--ease)}
.nav a:hover{color:var(--paper)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.nav a[aria-current]{color:var(--paper)}
@media(max-width:880px){.nav{display:none}}
.nav__has{position:relative;display:inline-flex;align-items:center}
.nav__has>a::after{display:none}
.nav__has>a{display:inline-flex;align-items:center;gap:6px}
.nav__has>a i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease),color .3s;font-style:normal}
.nav__has:hover>a,.nav__has:focus-within>a{color:var(--paper)}
.nav__has:hover>a i,.nav__has:focus-within>a i{transform:rotate(225deg) translate(-1px,-1px)}
.nav__mega{position:absolute;top:100%;left:50%;margin-top:22px;transform:translate(-50%,8px);
  display:grid;grid-template-columns:repeat(3,minmax(178px,1fr));gap:16px 30px;
  padding:26px 30px 24px;background:rgba(13,13,16,.97);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.nav__mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav__has:hover .nav__mega,.nav__has:focus-within .nav__mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav__ct{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-bottom:14px}
.nav__mega a{display:block;font-size:.84rem;color:var(--muted);padding:6px 0;line-height:1.35;white-space:nowrap}
.nav__mega a::after{display:none}
.nav__mega a:hover{color:var(--paper)}
.nav__mega a b{display:block;font-weight:500;color:inherit}
.nav__mega a small{display:block;font-size:.72rem;color:var(--dim);white-space:normal;max-width:22ch;margin-top:2px}
.nav__mega a:hover small{color:var(--muted)}
.nav__all{grid-column:1/-1;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:14px}
.nav__all a{font-size:.8rem;color:var(--lime)!important}

/* TWO CORRECTIONS FOR THIS FAMILY OF PAGE, both found by looking at the rendered menu
   rather than at the markup.

   1. THEY UNDERLINE LINKS BY DEFAULT. agency.css does not, so the rules copied above
      carried no `text-decoration` and every nav item and every dropdown item arrived
      underlined. Measured: `.nav a` computed `underline` here and `none` on the home page.

   2. THE PANEL WENT SEE THROUGH BELOW THE HEADER. `.hdr` on these pages sets
      `backdrop-filter:blur(14px)`, which makes it a BACKDROP ROOT. A nested
      backdrop-filter can only sample its root's painted area, and that area is the 66px
      header strip, so the part of the dropdown hanging below it composited against
      nothing and the hero text behind showed straight through a background set at 97%
      opacity. The fix is to stop nesting the effect: solid background, no filter.
      #0d0d10 is the same colour the translucent version was already using. */
.nav a,.nav__mega a{text-decoration:none}
.nav__mega{background:#0d0d10;backdrop-filter:none}