/* 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;
  /* BACK TO THREE COLUMNS ON 3 SEP 2026, a few hours after going to four. AI was added as
     a fourth column inside the marketing menu, which is exactly the blurring the operator
     called out: one menu implying one line of work with AI sprinkled on it. AI now has its
     own trigger and its own menu below, and this one is the marketing menu again.
     The cap and the wrap stay as the safety net regardless of column count: this menu is
     absolutely positioned and centred with translate(-50%), it has no width of its own,
     and the nav is visible from 881px up, so an over-wide grid would be clipped on both
     sides with nothing on screen to show it had happened. */
  max-width:min(1040px,calc(100vw - 28px));
  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:normal}
.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)}
/* The AI menu. Two columns, not three: the line splits into getting the call and what
   happens after the job is won, and inventing a third heading to fill a grid would be
   dressing. Wider tracks because these labels run longer than the marketing ones. */
.nav__mega--ai{grid-template-columns:repeat(3,minmax(200px,1fr));max-width:min(980px,calc(100vw - 28px))}
.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}