/* The photograph fits the screen; the curve is visible before the first scroll. */
html { scroll-padding-top: 88px; }
.hero { height: 100svh; min-height: 440px; }
.hero-photo { object-position: 50% 62%; }
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header[data-hidden="true"] { transform: translateY(calc(-100% - 2px)); }
.site-header .navigation { position: relative; inset: auto; height: 68px; color: white; }
.site-header .logo img { filter: brightness(0) invert(1); transition: filter .25s ease; }
.site-header .nav-links a, .site-header .nav-actions > a { transition: color .25s ease, background .25s ease; }
.site-header[data-theme="hero"][data-scrolled="true"] { background: #28578d9c; backdrop-filter: blur(16px); border-color: #ffffff1c; }
.site-header[data-theme="light"] { background: #fff; backdrop-filter: blur(16px); border-color: #eceff3; box-shadow: 0 3px 24px #03193a08; }
.site-header[data-theme="light"] .navigation { color: var(--ink); }
.site-header[data-theme="light"] .logo img { filter: brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(3600%) hue-rotate(226deg) brightness(90%); }
.site-header[data-theme="light"] .nav-actions .button { color: white; background: var(--blue); box-shadow: none; }
.site-header[data-theme="light"] .nav-actions .button:hover { background: #1734b9; }
.site-header[data-theme="light"] .menu-toggle { color: var(--blue); border-color: #2347d833; background: #f5f9ff; }
.site-header[data-theme="blue"] { background: #2347d8f0; backdrop-filter: blur(16px); border-color: #ffffff26; }
.site-header[data-theme="dark"] { background: #03193aeb; backdrop-filter: blur(16px); border-color: #ffffff1a; }
.site-header[data-theme="blue"] .nav-actions .button, .site-header[data-theme="dark"] .nav-actions .button { background: white; color: var(--ink); }
.site-header .nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.inner-header.site-header { background: #fff; }
.inner-header.site-header[data-theme="dark"] { background: #03193aeb; }
.inner-header.site-header[data-theme="dark"] .navigation { color: white; }
.inner-header.site-header[data-theme="dark"] .logo img { filter: brightness(0) invert(1); }
.inner-header.site-header[data-theme="dark"] .menu-toggle { color: white; background: #ffffff20; border-color: #ffffff66; }
body:has(.inner-header) { padding-top: 68px; }

@media (min-width: 901px) { .features { margin-top: -15svh; } }
@media (max-width: 900px) {
  .hero { height: 90svh; min-height: 420px; max-height: 900px; }
  .hero-photo { object-position: 50% 62%; }
  .site-header .navigation { height: 64px; }
  .site-header .nav-links { top: 62px; color: white; z-index: 1; }
  .site-header[data-theme="light"] .nav-links { background: #fffffffc; color: var(--ink); border-color: var(--line); box-shadow: 0 16px 40px #03193a1a; }
  .inner-header.site-header[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--blue); }
  body:has(.inner-header) { padding-top: 64px; }
}
@media (max-width: 600px) {
  .hero { height: 84svh; min-height: 400px; max-height: 760px; }
  .hero-photo { object-position: 51% 62%; }
  .site-header .navigation { height: 60px; }
  .site-header .nav-links { top: 58px; }
  .site-header .nav-actions .button { padding: 10px 12px; }
  body:has(.inner-header) { padding-top: 60px; }
}