/* Navigation: sticky at the top, with no bar behind it and no change as you scroll (the logo and links simply stay put) */
.topbar {
  position: sticky !important; top: env(safe-area-inset-top, 0px) !important;
  background: none !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
:root .topbar, :root[data-mode] .topbar, :root .topbar.scrolled, :root[data-mode] .topbar.scrolled { background: none !important; background-image: none !important; box-shadow: none !important; }   /* beats the old glass and scrolled-shadow rules */
.topbar::before, .topbar::after { display: none !important; }
body::before { display: none !important; }

/* Footer: the copyright in the centre, the theme toggle at the right */
.fine .wrap { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; }
.fine .wrap > span:first-child { grid-column: 2; text-align: center; }
.fine .wrap > .fine-end { grid-column: 3; justify-self: end; }

/* Phones: the theme toggle now lives only up here, so the links sit a little closer and the logo never shrinks */
.topbar .name { flex-shrink: 0; }
@media (max-width: 520px) {
  .topbar nav { gap: 8px !important; }
  .topbar nav > a:last-child { padding-inline: 12px !important; }
}

/* Dark mode cards: a faint see-through tint with a hairline edge instead of solid near-black, so the page's glow
   shows through and they sit in the page. Text contrast stays high (muted grey on the tint is about 7:1). */
html:root[data-mode="dark"] { --card: rgba(255, 255, 255, .05); --shadow-card: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* Places that sit on top of pictures or need a solid fill keep one */
html:root[data-mode="dark"] .peek .hint,
html:root[data-mode="dark"] .side-nav:hover ol, html:root[data-mode="dark"] .side-nav:focus-within ol { background: rgba(28, 28, 32, .92) !important; }
html:root[data-mode="dark"] .cloche .lbl { color: #18181B; }
html:root[data-mode="dark"] .cloche .shine { stroke: #18181B; }
/* "Case study coming soon": the same tint, not a black pill */
html:root[data-mode="dark"] .cta[aria-disabled="true"] { background: var(--card); box-shadow: var(--shadow-card); }
/* Buttons need to read as buttons, so their tint is a step stronger than a card's */
html:root[data-mode="dark"] .btn:not(:hover), html:root[data-mode="dark"] .next-order:not(:hover) { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
/* On phones the links sit a touch closer so "Get in touch" still fits on one line */
@media (max-width: 520px) { .topbar nav { gap: 6px !important; } .topbar nav > a:last-child { padding-inline: 10px !important; } }