/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · the main nav (services, results, about, contact, partner, case studies, home). Not linked on the growth-diagnostic page.
   Layout: logo left, the links centred on the bar (the way darkroomagency.com sets its nav), the theme toggle and the booking button on the right.
   Compared on the real nav, both themes, at 1440 / 1100 / 1000: the old right-hand cluster, centred links (chosen, 8.7 / 10), links after the logo, centred links with the
   toggle after the button, and centred links in a hairline capsule (8.0).
   Booking button: a pill, the same "Book a free diagnostic +" in both themes and the same size: white on dark, black on light (it was orange in both).
   Dark rules use html:not([data-theme="light"]) so the home page, which carries no theme attribute, gets them too.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* Mona Sans is loaded by every page that links this file (no @import here: a CSS @import makes the browser fetch it only after this file arrives, and holds the page's first paint for it) */

/* ───── the button ───── */
nav.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px;
  font-family: 'Mona Sans', 'Inter', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; line-height: 1; white-space: nowrap;
  background: #f4f4f4; color: #0e0e0e; box-shadow: none; cursor: pointer;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), background .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1);
}
nav.nav .btn .btn-plus { font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: 0; }
nav.nav .btn:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .3); }
nav.nav .btn:active { transform: none; }
nav.nav .btn:focus-visible { outline: 2px solid #f4f4f4; outline-offset: 3px; }
html[data-theme="light"] nav.nav .btn { background: #0e0e0e; color: #fff; box-shadow: 0 10px 22px -14px rgba(14, 14, 14, .5); }
html[data-theme="light"] nav.nav .btn:hover { background: #2b2b2e; box-shadow: 0 14px 26px -14px rgba(14, 14, 14, .55); }
html[data-theme="light"] nav.nav .btn:active { background: #000; }
html[data-theme="light"] nav.nav .btn:focus-visible { outline-color: #0e0e0e; }

/* ───── the links: a notch brighter in dark (they were 58% white) ───── */
html:not([data-theme="light"]) nav.nav .nav-links a { color: rgba(255, 255, 255, .74); }
html:not([data-theme="light"]) nav.nav .nav-links a:hover, html:not([data-theme="light"]) nav.nav .nav-links a.active { color: rgba(255, 255, 255, .96); }

/* ───── desktop layout: links centred on the bar ───── */
@media (min-width: 961px) {
  nav.nav .nav-inner { position: relative; }
  nav.nav .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
  nav.nav .nav-inner > .btn { margin-left: auto; }
  nav.nav .nav-inner > .theme-toggle.tt-nav { margin-left: auto; }
  nav.nav .nav-inner > .theme-toggle.tt-nav + .btn { margin-left: 6px; }
}

/* ───── tablet and phones: the logo, the button and the menu button share one row ───── */
@media (max-width: 960px) {
  nav.nav .nav-inner > .btn { margin-left: auto !important; height: 44px; padding: 0 18px; font-size: 11px; letter-spacing: .35px; }   /* !important: older light.css rules set this margin with it */
  nav.nav .nav-inner > .theme-toggle.tt-nav { margin-left: auto; }
  nav.nav .nav-inner > .theme-toggle.tt-nav ~ .btn { margin-left: 8px !important; }
}
@media (max-width: 560px) {
  nav.nav .nav-inner > .theme-toggle.tt-nav:not(.tt-keep) ~ .btn { margin-left: auto !important; }   /* the toggle lives in the menu on phones, so the button takes its place at the right */
}
@media (max-width: 760px) {
  nav.nav .nav-inner > .btn { padding: 0 15px; gap: 7px; font-size: 11.5px; letter-spacing: -.005em; text-transform: none; }
  nav.nav .btn .btn-plus { font-size: 14px; }
}
@media (max-width: 430px) {
  nav.nav .nav-inner > .btn { padding: 0 12px; gap: 6px; font-size: 11px; }
}
@media (max-width: 380px) {
  nav.nav .nav-inner > .btn { font-size: 10.5px; }
}
/* small phones: the mark steps down one more size and the button gives up a little padding, so the logo, button and menu icon keep a clear 8px between them */
@media (max-width: 380px) {
  nav.nav .nav-logo img { height: 14px !important; max-width: 38vw; }
  nav.nav .nav-inner > .btn { padding: 0 11px; }
  nav.nav .nav-hamburger { margin-left: 8px !important; }
}
@media (max-width: 350px) {
  nav.nav .nav-logo img { height: 13px !important; max-width: 36vw; }
  nav.nav .nav-inner > .btn { padding: 0 10px; font-size: 10px; }
  nav.nav .btn .btn-plus { display: none; }
}
@media (prefers-reduced-motion: reduce) { nav.nav .btn { transition: none; } nav.nav .btn:hover { transform: none; } }

/* the menu icon: the same bright bars on every page in dark (the home page's were dimmer); light.css sets the light ones */
html:not([data-theme="light"]) nav.nav .nav-hamburger span { background: rgba(255, 255, 255, .9); }

/* ───── announcement bar (services, results, case studies) ─────
   One quiet line above the nav that links to the diagnostic: the site's asterisk turning slowly, the offer, an arrow that steps forward on hover.
   Monotone in both themes (ink on the light grey of the page's supporting surfaces, light on near-black), 40px, fixed above the fixed nav.
   The markup sits right after <body> with a small script: it sets html.has-mbar (the nav drops 40px) and, on pages whose layout was built
   without the bar, html.mbar-push (the page moves down 40px too). Dismissed, it stays away for 7 days. */
nav.nav { top: 0; transition: top .3s cubic-bezier(.22, 1, .36, 1); }
html.has-mbar nav.nav { top: 40px; }
html.has-mbar.mbar-push body { margin-top: 40px; }   /* a margin, not padding: some pages already pad the body to clear the nav, and this has to add to it */
.mbar { position: fixed; top: 0; left: 0; right: 0; z-index: 202; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 48px;
  background: #0b0b0c; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mbar-link { display: inline-flex; align-items: center; gap: 10px; height: 100%; min-width: 0; padding: 0 4px; text-decoration: none; color: rgba(244, 244, 244, .84);
  font-family: 'Mona Sans', 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: -.005em; white-space: nowrap; transition: color .25s ease; }
.mbar-ast { display: block; width: 11px; height: 12px; flex-shrink: 0; color: rgba(244, 244, 244, .55); animation: mbar-turn 18s linear infinite; }
.mbar-ast svg, .mbar-arrow svg, .mbar-close svg { display: block; width: 100%; height: 100%; }
.mbar-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: transparent; transition: text-decoration-color .3s ease; }
.mbar-short, .mbar-tiny { display: none; }
.mbar-arrow { width: 14px; height: 14px; flex-shrink: 0; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.mbar-link:hover { color: #fff; }
.mbar-link:hover .mbar-txt { text-decoration-color: rgba(255, 255, 255, .45); }
.mbar-link:hover .mbar-arrow { transform: translateX(3px); }
.mbar-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -7px; border-radius: 8px; }
.mbar-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 10px; border: 0; border-radius: 50%; background: transparent;
  color: rgba(244, 244, 244, .45); cursor: pointer; transition: background .2s ease, color .2s ease; }
.mbar-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mbar-close:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 0; }
@keyframes mbar-turn { to { transform: rotate(360deg); } }
html[data-theme="light"] .mbar { background: #f4f4f6; border-bottom-color: rgba(14, 14, 14, .08); }
html[data-theme="light"] .mbar-link { color: rgba(14, 14, 14, .8); }
html[data-theme="light"] .mbar-ast { color: rgba(14, 14, 14, .5); }
html[data-theme="light"] .mbar-link:hover { color: #0e0e0e; }
html[data-theme="light"] .mbar-link:hover .mbar-txt { text-decoration-color: rgba(14, 14, 14, .35); }
html[data-theme="light"] .mbar-link:focus-visible { outline-color: #0e0e0e; }
html[data-theme="light"] .mbar-close { color: rgba(14, 14, 14, .45); }
html[data-theme="light"] .mbar-close:hover { background: rgba(14, 14, 14, .06); color: #0e0e0e; }
html[data-theme="light"] .mbar-close:focus-visible { outline-color: #0e0e0e; }
/* phones: the shorter line keeps "qualified" and the arrow on one row (the asterisk steps aside for it); the close button keeps its 44px target.
   Under 360px a shorter line still names who the diagnostic is for. */
@media (max-width: 519px) {
  .mbar { padding: 0 44px 0 14px; }
  .mbar-ast { display: none; }
  .mbar-long { display: none; }
  .mbar-short { display: inline; }
  .mbar-link { font-size: 12.5px; gap: 7px; }
  .mbar-close { right: 4px; width: 36px; height: 36px; padding: 13px; }
  .mbar-close::after { content: ''; position: absolute; inset: -4px; }
}
@media (max-width: 359px) {
  .mbar-short { display: none; }
  .mbar-tiny { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .mbar-ast { animation: none; } nav.nav { transition: none; } }

/* hit areas: the logo and the menu button are small on a phone (a 15px-high mark, a 28px-wide icon), so each gets an invisible 44px target. Nothing shifts. */
@media (max-width: 960px) {
  nav.nav .nav-logo, nav.nav .nav-hamburger { position: relative; }
  nav.nav .nav-logo::after { content: ''; position: absolute; inset: -15px -6px; }
  nav.nav .nav-hamburger::after { content: ''; position: absolute; inset: -4px -8px; }
}