/* Glassmatter house style - Liquid Infinity design system.
   Palette source: Assets/03_Asset_Pack_Liquid_Infinity vector master. */

:root {
  --bg-0: #020104;
  --bg-1: #08070d;
  --bg-2: #140f20;
  --glass-1: #100c1a;
  --glass-2: #1e1830;
  --cyan: #00f0ff;
  --blue: #38bdf8;
  --violet: #a855f7;
  --violet-2: #e0aaff;
  --pink: #ff007a;
  --danger: #ff4655;
  --amber: #f4a261;
  --chrome: #e2e8f0;
  --text: #eef1f8;
  --text-dim: #9aa3b8;
  --line: rgba(194, 132, 252, 0.14);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --header-h: 4.5rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-0);
  overflow-x: hidden;
}

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

picture { display: contents; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--cyan);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover { color: #7ff6ff; }

::selection { background: rgba(56, 189, 248, 0.28); color: #ffffff; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--cyan);
  color: var(--bg-0);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.container {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

/* Header */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header[data-scrolled="true"] {
  background: rgba(10, 8, 18, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

.brand img {
  width: auto;
  height: 2.6rem;
}

.site-nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.site-nav a:hover {
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.08);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: rgba(16, 12, 26, 0.6);
  cursor: pointer;
}

.menu-toggle-line {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s var(--ease-out), opacity 0.2s ease;
}

/* Fallback navigation for mobile visitors without JavaScript. Only the
   noscript copy renders, and only below the mobile breakpoint. */
noscript .no-js-nav {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scroll progress */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet-2), var(--amber));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Hero */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 42rem; /* Fallback for browsers without svh units; the next line wins where supported. */
  min-height: max(100svh, 42rem);
  padding: calc(var(--header-h) + 3rem) 0 5rem;
  overflow: hidden;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, var(--bg-2) 0%, var(--bg-1) 52%, var(--bg-0) 100%);
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

/* The aurora elements get their drift and parallax transform from the JS
   animation loop. CSS must not animate transform on .aurora, because a CSS
   animation would override the inline transform the script writes. */

.aurora-cyan {
  width: min(44rem, 80vw);
  height: min(44rem, 80vw);
  top: -18%;
  left: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, 0.32), transparent 65%);
}

.aurora-violet {
  width: min(50rem, 90vw);
  height: min(50rem, 90vw);
  top: 4%;
  right: -18%;
  background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.34), transparent 65%);
}

.aurora-pink {
  width: min(26rem, 60vw);
  height: min(26rem, 60vw);
  bottom: -12%;
  left: 30%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 170, 0, 0.22), transparent 65%);
}

/* Ambient plasma glows only - no artwork behind the copy, so the hero mark
   in the panel is the only brand art on screen. */
.hex-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 50% at 30% 45%, rgba(168, 85, 247, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 45% at 72% 55%, rgba(244, 162, 97, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(56, 189, 248, 0.08), transparent 70%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2.5rem;
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
}

.eyebrow-warm { color: var(--pink); }

.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 5.6vw + 0.5rem, 4.4rem);
  font-weight: 800;
  background: linear-gradient(100deg, #ffffff 15%, #dbeafe 45%, var(--blue) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  max-width: 46ch;
  margin-top: 1.4rem;
  font-size: clamp(1.05rem, 1.4vw + 0.6rem, 1.3rem);
  color: var(--text-dim);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(100deg, var(--chrome), var(--blue));
  color: #04101e;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25), 0 10px 34px rgba(56, 189, 248, 0.28);
}

.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5), 0 14px 44px rgba(56, 189, 248, 0.42);
}

.btn-ghost {
  border: 1px solid var(--line);
  background: rgba(16, 12, 26, 0.5);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(16, 12, 26, 0.8);
}

/* Emergency support disclosure on the Support card. Red on purpose: the
   button signals urgent help, distinct from the regular cyan/blue accents. */
.btn-emergency {
  margin-top: 1.05rem;
  padding: 0.7rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #ffffff;
  background: linear-gradient(100deg, var(--danger), #c81d42);
  border: 1px solid rgba(255, 70, 85, 0.55);
  animation: emergency-pulse 2.4s ease-in-out infinite;
}

.btn-emergency svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.btn-emergency:hover {
  background: linear-gradient(100deg, #ff5a68, #d62248);
  box-shadow: 0 10px 30px rgba(255, 70, 85, 0.45);
  animation: none;
}

.btn-emergency:focus-visible {
  border-radius: 0.75rem;
  outline-color: var(--danger);
}

@keyframes emergency-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 70, 85, 0.25), 0 8px 26px rgba(255, 70, 85, 0.28); }
  50% { box-shadow: 0 0 0 1px rgba(255, 70, 85, 0.6), 0 8px 34px rgba(255, 70, 85, 0.5); }
}

.hero-monogram-wrap {
  display: flex;
  justify-content: center;
}

/* The mark sits as plain transparent artwork, so the page background shows
   through and nothing reads as a pasted-in tile. */
.hero-monogram {
  width: min(100%, 19rem);
  height: auto;
}

.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  display: flex;
  justify-content: center;
  width: 1.6rem;
  height: 2.7rem;
  border: 1px solid rgba(194, 132, 252, 0.35);
  border-radius: 1rem;
  transform: translateX(-50%);
}

.scroll-cue-dot {
  width: 0.3rem;
  height: 0.55rem;
  margin-top: 0.35rem;
  border-radius: 0.3rem;
  background: var(--cyan);
  animation: cue-drop 1.8s ease-in-out infinite;
}

@keyframes cue-drop {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(0.9rem); opacity: 0; }
  100% { transform: translateY(0.9rem); opacity: 0; }
}

/* Sections */

.section {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

/* Scroll targets must clear the fixed header; keep this equal to --header-h + breathing room. */
.section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

.section-alt {
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgba(56, 189, 248, 0.07), transparent 60%),
    radial-gradient(ellipse 60% 80% at 90% 100%, rgba(168, 85, 247, 0.1), transparent 60%),
    var(--bg-1);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw + 0.4rem, 2.7rem);
  font-weight: 750;
}

.section-intro {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--text-dim);
}

/* Reveal choreography.
   Reveal targets are visible by default. Hiding only activates when JS adds
   html.js-reveal, so the page stays fully visible without JavaScript and for
   crawlers. Do not hide .reveal unconditionally in this file. */

html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered siblings get a rising delay after the first card. */
.grid > .reveal:nth-child(2) { --reveal-delay: 0.06s; }
.grid > .reveal:nth-child(3) { --reveal-delay: 0.12s; }
.grid > .reveal:nth-child(4) { --reveal-delay: 0.18s; }
.grid > .reveal:nth-child(5) { --reveal-delay: 0.24s; }
.grid > .reveal:nth-child(6) { --reveal-delay: 0.3s; }
.grid > .reveal:nth-child(7) { --reveal-delay: 0.36s; }
.grid > .reveal:nth-child(8) { --reveal-delay: 0.42s; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.stat {
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(30, 24, 48, 0.55), rgba(16, 12, 26, 0.75));
  text-align: center;
}

.stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--cyan);
}

.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Cards */

.grid {
  display: grid;
  gap: 1.25rem;
}

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.card {
  position: relative;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(30, 24, 48, 0.45), rgba(10, 8, 18, 0.85));
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.55), rgba(168, 85, 247, 0.5), rgba(255, 170, 0, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Purely decorative ring. Without this, the overlay box sits on top of the
     whole card face and swallows real mouse clicks aimed at interactive
     children such as the emergency support button. */
  pointer-events: none;
}

.card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 34px rgba(56, 189, 248, 0.12);
}

.card:hover::before { opacity: 1; }

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.card p { font-size: 0.98rem; color: var(--text-dim); }

.card-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1rem;
  border-radius: 0.7rem;
  background: rgba(56, 189, 248, 0.1);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.card-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: var(--cyan);
}

.card-service {
  padding-block: 1.4rem;
}

.card-service h3 { color: var(--cyan); }

/* Hidden-by-default priority-help panel. The hidden attribute is the source
   of truth; the open animation plays because the element renders on reveal. */
.spoiler {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 70, 85, 0.32);
  border-left: 3px solid var(--danger);
  border-radius: 0.85rem;
  background: linear-gradient(160deg, rgba(255, 70, 85, 0.1), rgba(10, 8, 18, 0.55));
}

.spoiler[hidden] { display: none; }

.spoiler:not([hidden]) { animation: spoiler-in 0.32s var(--ease-out); }

.spoiler p { font-size: 0.95rem; color: var(--text-dim); }

.spoiler a { color: #ff9aa3; font-weight: 600; }

.spoiler a:hover { color: #ffc2c8; }

@keyframes spoiler-in {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

.panel {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(56, 189, 248, 0.1), transparent 55%),
    linear-gradient(160deg, rgba(30, 24, 48, 0.5), rgba(10, 8, 18, 0.9));
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}

.panel:hover {
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 34px rgba(56, 189, 248, 0.1);
}

.panel h3 {
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
  color: var(--cyan);
}

.panel p { color: var(--text-dim); }

/* Cybersecurity band */

.cyber-band {
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(255, 0, 122, 0.13), transparent 60%),
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(255, 170, 0, 0.08), transparent 60%),
    var(--bg-1);
  border-block: 1px solid var(--line);
}

.cyber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.25rem;
}

.cyber-item {
  padding: 1.5rem 1.35rem;
  border: 1px solid rgba(255, 0, 122, 0.22);
  border-radius: var(--radius);
  background: rgba(16, 12, 26, 0.6);
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}

.cyber-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 122, 0.55);
}

.cyber-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: var(--pink);
}

.cyber-item p { font-size: 0.95rem; color: var(--text-dim); }

/* Contact */

.contact-card {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 130% at 50% -30%, rgba(56, 189, 248, 0.13), transparent 55%),
    linear-gradient(160deg, rgba(30, 24, 48, 0.55), rgba(10, 8, 18, 0.92));
  text-align: center;
  overflow: hidden;
}

.contact-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.contact-card p {
  max-width: 52ch;
  margin: 1rem auto 0;
  color: var(--text-dim);
}

.contact-card .hero-actions { justify-content: center; }

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(56, 189, 248, 0.06), transparent 60%),
    var(--bg-0);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  padding-block: 3rem;
}

.footer-brand img {
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1rem;
  border-radius: 1.1rem;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
}

.footer-brand p { max-width: 30ch; color: var(--text-dim); font-size: 0.95rem; }

.footer-nav h2,
.footer-meta h2 {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  padding: 0.28rem 0;
  color: var(--text);
  font-size: 0.95rem;
}

.footer-meta p {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.footer-meta p + p { margin-top: 0.8rem; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.9rem;
  color: var(--text-dim);
}

/* Focus visibility */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* The skip link target is not interactive, so no ring is drawn around the
   whole main element when it receives programmatic focus. */
main:focus-visible {
  outline: none;
}

/* Section targets receive programmatic focus after animated navigation;
   the same reasoning applies - no ring around a whole section. */
.section[id]:focus-visible {
  outline: none;
}

/* Motion preferences

   Motion is a deliberate part of this design on every device, so no
   reduced-motion overrides are applied. */

/* Responsive */

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .hero h1 { max-width: none; }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-monogram { width: min(70%, 19rem); }

  .stat-strip { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .header-inner { gap: 0.75rem; }
  .brand img { height: 2.4rem; }
  .site-nav a { padding: 0.45rem 0.55rem; font-size: 0.85rem; }
}

@media (max-width: 720px) {
  :root { --header-h: 4rem; }

  html.js-menu .menu-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 8, 18, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1.25rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out), visibility 0.25s;
  }

  .site-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Keep the open panel inside the viewport on short screens. */
  html.js-menu .site-nav {
    max-height: calc(100vh - var(--header-h)); /* Fallback for browsers without svh units; the next line wins where supported. */
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }

  .site-nav ul { flex-direction: column; }

  .site-nav a { padding: 0.85rem 0.9rem; font-size: 1.05rem; }

  noscript .no-js-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    padding: calc(var(--header-h) + 1rem) 1.25rem 0;
  }

  noscript .no-js-nav a {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    color: var(--text);
    text-decoration: none;
  }

  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Printing must show every section: the scroll fade writes inline opacity
   and transform, so print needs stronger rules than those inline styles. */
@media print {
  .hero-inner,
  .section > .container {
    opacity: 1 !important;
    transform: none !important;
  }
}