@media (max-width: 640px) {
  .header { position: sticky; top: 0; }
  .header.is-mobile-minimal {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
  }
  .header.is-mobile-minimal .header-inner { background: transparent; }
  .header.is-mobile-minimal .brand,
  .header.is-mobile-minimal .header-contact {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .header.is-mobile-minimal .menu-toggle {
    pointer-events: auto;
    background: transparent;
  }
  .header.is-mobile-minimal .nav.open {
    pointer-events: auto;
    left: auto;
    right: 20px;
    top: 68px;
    width: min(280px, calc(100vw - 40px));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    max-height: calc(100dvh - 84px);
    box-shadow: 0 12px 32px #173e341a;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .header { transition: background-color 220ms ease, border-color 220ms ease; }
  .header .brand { transition: opacity 180ms ease, visibility 180ms ease; }
}
@media (min-width: 1024px) and (min-height: 481px) {
  /* Preserve the header's flow height as the floating surface becomes smaller. */
  .header { height: 101px; }
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 100px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0;
  }
  .header-inner > .brand { grid-column: 1; max-width: 210px; }
  .header-inner > .nav { grid-column: 2; white-space: nowrap; }
  .header-contact { grid-column: 3; justify-self: end; max-width: 250px; }
  .header.is-compact { background: transparent; border-color: transparent; pointer-events: none; }
  .header.is-compact .header-inner {
    width: var(--compact-header-width, 480px);
    max-width: calc(100% - 40px);
    height: 62px;
    padding-inline: 24px;
    grid-template-columns: minmax(0, 0fr) auto minmax(0, 0fr);
    gap: 0;
    translate: 0 12px;
    border-radius: 40px;
    border-color: #ffffffb8;
    background: #fafbf8eb;
    box-shadow: 0 8px 32px #173e3412, inset 0 1px 0 #ffffffba;
    pointer-events: auto;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header.is-compact .header-inner {
      background: #fafbf8b8;
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      backdrop-filter: blur(18px) saturate(135%);
    }
  }
  .header.is-compact .header-inner > .brand,
  .header.is-compact .header-contact {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
  }
  .header.is-compact .nav a { color: var(--green-dark); }
  .header.is-compact .nav a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 5px; }
}
@media (min-width: 1024px) and (min-height: 481px) and (prefers-reduced-motion: no-preference) {
  .header { transition: background-color 300ms ease, border-color 300ms ease; }
  .header-inner {
    transition: width 420ms cubic-bezier(.2, .7, .3, 1), height 350ms ease,
      translate 350ms ease, padding 350ms ease, gap 350ms ease,
      grid-template-columns 350ms ease, border-radius 350ms ease,
      background-color 300ms ease, box-shadow 350ms ease;
  }
  .header-inner > .brand, .header-contact {
    transition: opacity 180ms ease, max-width 350ms ease, visibility 180ms;
  }
}