/* A fixed header preserves the initial composition while its own frame
   contracts through the first 64 pixels of scroll. */
:root {
  --header-expanded: 78px;
  --header-shrink: 18px;
  --header-progress: 0;
  --header-alpha: 0;
  --header-blur: 0px;
  --header-border-alpha: 0;
  --header-bg-rgb: 16 17 20;
  --header-line-rgb: 255 255 255;
  --header-height: calc(var(--header-expanded) - var(--header-shrink) * var(--header-progress));
  --header-frame-height: calc(var(--header-height) + 1px);
}
:root[data-theme="light"] {
  --header-bg-rgb: 247 246 250;
  --header-line-rgb: 32 33 38;
}
body { padding-top: calc(var(--header-expanded) + 1px); }
html { scroll-padding-top: calc(var(--header-frame-height) + 22px); }
.header,
.header.scrolled {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgb(var(--header-bg-rgb) / var(--header-alpha));
  border-bottom: 1px solid rgb(var(--header-line-rgb) / var(--header-border-alpha));
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
}
.header-inner { height: var(--header-height); }
.header .brand {
  transform: scale(calc(1 - .14 * var(--header-progress)));
  transform-origin: left center;
}
.desktop-nav { gap: 4px; }
.desktop-nav a {
  position: relative;
  padding: 7px 12px;
  border-radius: 999px;
  transition: color .25s, background-color .35s;
}
.desktop-nav a.is-active {
  color: var(--text);
  background: rgb(var(--header-line-rgb) / .055);
}
.mobile-nav a.is-active { color: var(--accent); }

/* The content remains laid out while the details element clips its animated
   height. Native `open` is removed only after a close has finished. */
.service[data-animating] { overflow: hidden; will-change: height; }
.service[data-expanded="false"] .expand-icon { transform: rotate(0deg); }
.service[data-expanded="true"] .expand-icon { transform: rotate(45deg); }
.service .expand-icon { transition: transform .65s cubic-bezier(.22,.61,.36,1); }
.service summary { -webkit-user-select: none; user-select: none; }

@media (max-width: 900px) {
  :root { --header-expanded: 74px; --header-shrink: 16px; }
  .desktop-nav a { padding-inline: 9px; }
}
@media (max-width: 650px) {
  :root { --header-expanded: 70px; --header-shrink: 14px; }
  .header-inner { height: var(--header-height); }
  .mobile-nav:not([hidden]) {
    inset: var(--header-frame-height) 0 auto;
    height: calc(100dvh - var(--header-frame-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a,
  .service .expand-icon { transition: none; }
}