:root {
  color-scheme: light;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2b2b1c;
  background: #f0e7d4;
  /* The base palette. Every page that sets data-theme overrides this whole set
     through css/demo-themes.css; it is kept complete so any rule below can
     read a token without caring whether a theme has been loaded. */
  --bg: #f0e7d4;
  --surface: #f8f1e0;
  --surface-strong: #e3d4b4;
  --text: #2b2b1c;
  --muted: #5f5e40;
  --primary: #486424;
  --primary-soft: #dfe7c8;
  --secondary: #a04a2c;
  --border: #2b2b1c;
  --accent: #d99a1e;
  --on-accent: #2b2b1c;
  --halo: rgba(72, 100, 36, 0.12);
  --panel: rgba(248, 241, 224, 0.96);
  --header-bg: rgba(240, 231, 212, 0.92);
  --panel-shadow: 6px 6px 0 rgba(43, 43, 28, 0.9);
  --shadow: 5px 5px 0 rgba(43, 43, 28, 0.85);
  --edge: 2px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --btn-bg: #486424;
  --btn-fg: #f8f1e0;
  --btn-shadow: 4px 4px 0 #2b2b1c;
  --display-font: 'Georgia', 'Times New Roman', serif;
  --body-font: 'Georgia', 'Times New Roman', serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--halo), transparent 28%),
    var(--bg);
  color: var(--text);
}

img,
svg {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

.container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--panel);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: var(--surface);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.page-transition.is-active {
  opacity: 1;
  visibility: visible;
}

.loader-card {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 2rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.loader-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}

.loader-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 997;
  display: none;
  padding: 0 1rem;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.cookie-banner p {
  margin: 0;
  color: var(--text);
  max-width: 62ch;
}

.cookie-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.company-name {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-card {
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
}

.pricing-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-lg);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pricing-banner strong {
  font-weight: 800;
}

.success-popup {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.success-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.success-popup__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.brand {
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-nav a {
  color: var(--text);
  font-weight: 500;
  position: relative;
  padding: 0.35rem 0;
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--primary);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* The current page is marked in the header and footer nav by the markup. */
.site-nav a[aria-current='page'],
.footer-nav a[aria-current='page'] {
  color: var(--primary);
  font-weight: 700;
}

.site-nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-dropdown-toggle::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.nav-dropdown-toggle::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  margin-top: -0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--primary);
}

.nav-dropdown-toggle:hover::before,
.nav-dropdown-toggle:focus-visible::before,
.nav-dropdown.open .nav-dropdown-toggle::before {
  transform: scaleX(1);
}

.nav-dropdown-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

.nav-dropdown.open .nav-dropdown-toggle::after {
  transform: rotate(225deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  z-index: 30;
  min-width: 210px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--panel-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -0.85rem;
  left: 0;
  right: 0;
  height: 0.85rem;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

.nav-dropdown-menu a {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown-menu a::after {
  display: none;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  background: var(--primary-soft);
  color: var(--primary);
}

.mobile-nav-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.hero,
.page-hero,
.section-light,
.section-dark {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.hero-grid,
.content-grid,
.process-grid,
.card-grid,
.link-grid,
.blog-list,
.contact-grid {
  display: grid;
  gap: 2.2rem;
}

.hero-grid {
  grid-template-columns: 1.3fr 0.9fr;
  align-items: center;
}

.hero h1,
.page-hero h1,
.section-heading h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.05;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--primary);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.copy {
  max-width: 52ch;
  color: var(--muted);
  margin-top: 1rem;
  font-size: 1.02rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.95rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.button-primary {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
}

.button-primary:hover,
.button-primary:focus-visible {
  box-shadow: var(--btn-shadow);
}

.button-secondary {
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--border);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--surface);
}

.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

.hero-visual {
  display: grid;
  gap: 1rem;
}

.browser-window {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.browser-top {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.browser-top span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--secondary);
}

.browser-top span:nth-child(2) {
  background: var(--accent);
}

.browser-top span:nth-child(3) {
  background: var(--primary);
}

.browser-body {
  display: grid;
  gap: 0.8rem;
}

.preview-panel {
  border-radius: var(--r-sm);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  padding: 1rem;
}

.preview-panel h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.preview-panel p {
  margin: 0;
  color: var(--muted);
}

.mini-bars {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.mini-bars span {
  display: block;
  height: 0.6rem;
  border-radius: var(--r-sm);
  background: var(--primary);
}

.mini-bars span:nth-child(2) {
  width: 70%;
}

.mini-bars span:nth-child(3) {
  width: 90%;
}

.preview-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.mini-card {
  border-radius: var(--r-sm);
  padding: 0.7rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.mini-card.accent {
  background: var(--primary-soft);
  color: var(--primary);
}

.hero-card .card-tag {
  margin: 0 0 1rem;
  color: var(--primary);
  font-weight: 700;
}

.section-light {
  background: var(--bg);
}

.section-dark {
  background: var(--surface);
}

.section-heading {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.card-grid,
.link-grid,
.process-grid,
.blog-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.link-card,
.blog-card,
.process-step,
.contact-form,
.contact-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.75rem;
}

.service-card h3,
.process-step h3,
.link-card h3,
.blog-card h2 {
  margin-top: 0;
}

.link-card {
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.link-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}

.feature-list,
.contact-info ul {
  padding-left: 1.2rem;
  margin: 1rem 0 0;
}

.feature-list li,
.contact-info li {
  margin-bottom: 0.75rem;
}

.process-step {
  position: relative;
  overflow: hidden;
}

.step-number {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 1rem;
}

.blog-card {
  display: grid;
  gap: 1rem;
}

.blog-meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.article-content {
  padding-top: 2rem;
  padding-bottom: 0rem;
}

.article-content h2 {
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
}

.article-content p {
  max-width: 70ch;
  margin-bottom: 1rem;
}

.contact-grid {
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 1.1rem;
}

.contact-form label {
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1rem;
  background: var(--bg);
  color: var(--text);
}

.site-footer {
  padding: 2rem 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
}

footer a {
  color: var(--muted);
  padding: 0.3rem 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

footer a:hover,
footer a:focus-visible {
  color: var(--primary);
  transform: translateY(-1px);
}

/* The "New" flag on the Zlog link, raised as a superscript. It reads the same
   tokens as the rest of the chrome, so every demo palette re-skins it with no
   per-theme rules. */
sup.footer-nav__badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: var(--r-sm);
  background: var(--btn-bg, var(--primary, #486424));
  color: var(--btn-fg, #f8f1e0);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.7;
  text-transform: uppercase;
  vertical-align: super;
}

/* --- Work showcase (home page) --------------------------------------------
   A separate grid from the others, because this list grows: auto-fit keeps a
   single row while there are few cards and reflows on its own as more are
   added, with no media query to keep in step. */

/* --- Home page section rhythm --------------------------------------------
   The shared .section-* rule pads every section top AND bottom, so stacked
   sections add two paddings together and double the gap between them. Here
   the sections carry no vertical padding and the spacing comes from a single
   --home-gap, applied identically at every boundary.

   Every card on this page is white, so each section sits on the cream
   .section-light surface. That keeps the cards lifted off the background;
   putting them on .section-dark (also white) would flatten them into it.
   Because the sections now share one colour, a hairline marks each boundary.
   It is drawn as a pseudo-element split across the gap, so it sits exactly
   midway and all three boundaries stay identical. */

.home-main {
  display: flex;
  flex-direction: column;
  --home-gap: clamp(4rem, 6.5vw, 6.5rem);
}

.home-main > section {
  padding-top: 0;
  padding-bottom: 0;
}

.home-main > section + section::before {
  content: '';
  display: block;
  height: 1px;
  margin: calc(var(--home-gap) / 2) 0;
  background: var(--border);
}

/* The first and last sections still need to breathe away from the sticky
   header and the footer, which the gap does not cover. */
.home-main > section:first-child {
  padding-top: clamp(3.5rem, 7vw, 6rem);
}

.home-main > section:last-child {
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.2rem;
}

.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.work-card__status {
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-lg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-card__status--live {
  background: var(--primary-soft);
  color: var(--primary);
}

.work-card__status--soon {
  background: transparent;
  border: 1px dashed var(--secondary);
  color: var(--secondary);
}

.work-card__name {
  margin: 0.3rem 0 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.work-card__sep {
  color: var(--muted);
  font-weight: 400;
}

.work-card__host {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  word-break: break-word;
}

.work-card__desc {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

/* Pushes the action to the bottom so the cards line up even when the copy
   above it is a different length. */
.work-card__link,
.work-card__soon-note {
  margin-top: auto;
  padding-top: 0.6rem;
}

.work-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
  font-weight: 600;
  transition: transform 0.2s ease;
}

.work-card__link:hover,
.work-card__link:focus-visible {
  transform: translateX(3px);
}

.work-card__soon-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .hero-grid,
  .card-grid,
  .link-grid,
  .process-grid,
  .blog-list,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .hero-card,
  .service-card,
  .link-card,
  .blog-card,
  .process-step,
  .contact-form,
  .contact-info {
    border-radius: var(--r-md);
  }
}

@media (max-width: 720px) {
  body.nav-open {
    overflow: hidden;
  }

  .header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    position: relative;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    gap: 0.35rem;
    padding: 0 1rem;
    margin: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    background: var(--panel);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--panel-shadow);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease, padding 0.25s ease;
  }

  .site-nav.open {
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
    padding: 1rem;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .site-nav a {
    width: 100%;
    padding: 0.7rem 0.2rem;
    border-radius: var(--r-sm);
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    background: var(--primary-soft);
    padding-left: 0.4rem;
  }

  .site-nav a::after {
    display: none;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0.2rem;
    border-radius: var(--r-sm);
  }

  .nav-dropdown-toggle::before {
    display: none;
  }

  .nav-dropdown-toggle[aria-expanded='true'] {
    background: var(--primary-soft);
    color: var(--primary);
  }

  .nav-dropdown-toggle[aria-expanded='true']::after {
    transform: rotate(225deg);
    margin-top: 0.1rem;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0.25rem 0 0.4rem 0.9rem;
    padding: 0.2rem 0 0.2rem 0.75rem;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
  }

  .nav-dropdown-menu::before {
    display: none;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    transform: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    padding: 0.55rem 0.2rem;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-sm);
    border: 2px solid var(--border);
    background: var(--primary-soft);
    color: var(--primary);
    min-width: 84px;
  }

  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:focus-visible {
    transform: translateY(-1px);
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .site-footer {
    padding-top: 3rem;
  }
}


@media (max-width: 1000px) and (min-width: 721px) {
  /* The nav gained Zlog and Zorum, so ease the gap before the mobile menu
     takes over at 720px. Keeps the demo mode switcher on the same row. */
  .site-nav {
    gap: 1rem;
  }
}