/* Structural layout: container, header/nav, footer, sections, grid helpers */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Edge-to-edge content width (still keeps the standard side padding via
   .container, just drops the max-width cap) — for sections that should
   use the full viewport width, as opposed to the hero's intentionally
   centered/contained layout. */
.container--full {
  max-width: none;
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 40rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Site header ---
   Desktop: no persistent bar at all — .site-header is just a landmark
   wrapper, the logo only lives inside the full-screen nav panel (see
   .mobile-nav__head), and .nav-toggle floats free (see below). Mobile: a
   normal slim bar with the logo and the menu trigger together, because a
   floating-only button read as too sparse/hard to place at that size —
   .site-header__bar supplies that bar and is hidden again above the
   breakpoint. */

.site-header {
  position: static;
}

:root {
  --mobile-bar-height: 4.5rem;
}

.site-header__bar {
  display: none;
}

@media (max-width: 63.99rem) {
  .site-header__bar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    height: var(--mobile-bar-height);
    padding-inline: var(--container-pad);
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
  }

  /* .site-header__bar is now taken out of the document flow entirely
     (fixed, not sticky) so it no longer reserves its own space — every
     page needs the same top offset to keep its first content (breadcrumbs
     on pages that have them, or the hero directly otherwise) from starting
     underneath the bar. Applied on body rather than main specifically
     because breadcrumbs render as a sibling before main, not inside it. */
  body {
    padding-top: var(--mobile-bar-height);
  }
}

.brand img {
  transition: transform var(--duration-base) var(--ease-out);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--color-text);
  flex-shrink: 0;
}

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

/* Floating trigger, fixed to the vertical middle of the right edge at every
   viewport width — this is the ONLY persistent nav UI on the page now. */
.nav-toggle {
  position: fixed;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.nav-toggle:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface);
  transform: translateY(-50%) scale(1.06);
}

.mobile-nav[open] .nav-toggle {
  opacity: 0;
  pointer-events: none;
}

/* Mobile: sits inside the header bar's own row (top-right of the bar)
   instead of floating at the vertical middle of the whole viewport. This
   MUST come after the base .nav-toggle rule above — an equal-specificity
   override defined earlier in source order loses to a later one regardless
   of which media query it's nested in, which previously left the toggle
   pinned to viewport-center on mobile even though this rule existed. */
@media (max-width: 63.99rem) {
  .nav-toggle {
    top: calc(var(--mobile-bar-height) / 2);
    right: var(--container-pad);
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* --- Full-screen mobile navigation --- */

.mobile-nav {
  position: relative;
}

.mobile-nav > summary {
  list-style: none;
}

.mobile-nav > summary::-webkit-details-marker {
  display: none;
}

.mobile-nav__panel {
  position: fixed;
  inset: 0;
  /* Above --z-toast (the cookie banner is a persistent fixed bottom bar at
     that level): a full-screen nav takes over the whole viewport while
     open, so a lower-priority banner underneath must not poke through the
     bottom of it. */
  z-index: calc(var(--z-toast) + 10);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: color-mix(in srgb, var(--color-bg) 97%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--space-md) var(--container-pad) var(--space-xl);
  overflow-y: auto;
  animation: mobile-nav-in var(--duration-slow) var(--ease-out);
}

.mobile-nav__panel.is-closing {
  animation: mobile-nav-out var(--duration-base) var(--ease-out) forwards;
}

/* Expands outward from the floating trigger's own position (right edge,
   vertical middle) instead of a generic fade — the menu visibly grows out
   of the button you just pressed, rather than appearing independently of
   it. --nav-toggle-origin-x is the button's horizontal center, computed
   once in CSS from the same right/width values as .nav-toggle itself. */
:root {
  --nav-toggle-origin-x: calc(100% - var(--space-md) - 1.75rem);
}

@media (max-width: 63.99rem) {
  :root {
    /* Matches .nav-toggle's own mobile right/width override above. */
    --nav-toggle-origin-x: calc(100% - var(--container-pad) - 1.375rem);
  }
}

@keyframes mobile-nav-in {
  from { clip-path: circle(0% at var(--nav-toggle-origin-x) 50%); }
  to { clip-path: circle(150% at var(--nav-toggle-origin-x) 50%); }
}

@keyframes mobile-nav-out {
  from { clip-path: circle(150% at var(--nav-toggle-origin-x) 50%); }
  to { clip-path: circle(0% at var(--nav-toggle-origin-x) 50%); }
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
  flex-shrink: 0;
}

.mobile-nav__head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* The close button itself is now fixed-positioned (see .mobile-nav__close)
     rather than laid out here, but this row still needs to leave room for
     it — otherwise the theme toggle, the only thing left in this row,
     renders underneath it. */
  margin-right: calc(3.5rem + var(--space-md) + var(--space-sm));
}

@media (max-width: 63.99rem) {
  .mobile-nav__head-actions {
    margin-right: calc(2.75rem + var(--container-pad) + var(--space-sm));
  }
}

/* Fixed at the exact same coordinates as .nav-toggle (both the desktop
   floating position and the mobile in-bar position below) so the close X
   visually REPLACES the hamburger in place rather than popping up
   somewhere else on screen — before this it opened at the floating
   right-middle button but closed via a completely different control up in
   the panel's own header row, which read as broken/inconsistent. */
.mobile-nav__close {
  position: fixed;
  top: 50%;
  right: var(--space-md);
  transform: translateY(-50%);
  z-index: calc(var(--z-toast) + 15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.mobile-nav__close:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface);
  transform: translateY(-50%) rotate(90deg);
}

@media (max-width: 63.99rem) {
  .mobile-nav__close {
    top: calc(var(--mobile-bar-height) / 2);
    right: var(--container-pad);
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
  }

  .mobile-nav__close:hover {
    transform: translateY(-50%) rotate(90deg);
  }
}

.mobile-nav__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

/* --- Mega menu: numbered-card index (replaces the old plain link list) ---
   One dark "intro" card (Home + primary CTAs) plus four content cards, each
   independently animating in and each fully clickable via a stretched-link
   on its heading (see .mega-menu__title a::after) so the whole card is a
   click target without nesting a second <a> inside it. */

.mega-menu {
  width: 100%;
  padding-block: var(--space-md);
}

.mega-menu__eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-md);
}

.mega-menu__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.mega-menu__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.mega-menu__social a:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  transform: translateY(-2px);
}

.mega-menu__social svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- Full-screen nav linear picker: every destination stacked vertically,
   big bold outline type, centered and filling most of the overlay.
   Scrolling or dragging moves a fractional --position (nav.js) up/down the
   list; each item reads its own index against that position to offset
   itself (--item-offset) and fade/scale by distance, so it behaves like a
   picker wheel laid out in a straight line rather than a circle. Whichever
   item sits nearest the center is "active" — solid fill instead of an
   outline. Every value comes from design tokens (no hardcoded colors), so
   this works unmodified in both themes. */
.nav-linear {
  position: relative;
  height: min(48rem, 84vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

.nav-linear:active {
  cursor: grabbing;
}

.nav-linear__list {
  position: relative;
  width: 100%;
  height: 100%;
}

.nav-linear__item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  width: 100%;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(var(--item-offset, 0px)) scale(var(--item-scale, 1));
}

.mobile-nav[open] .nav-linear__item {
  animation: nav-linear-item-in var(--duration-slow) var(--ease-out) forwards;
}

.nav-linear__item:nth-child(1) { animation-delay: 0.03s; }
.nav-linear__item:nth-child(2) { animation-delay: 0.07s; }
.nav-linear__item:nth-child(3) { animation-delay: 0.11s; }
.nav-linear__item:nth-child(4) { animation-delay: 0.15s; }
.nav-linear__item:nth-child(5) { animation-delay: 0.19s; }
.nav-linear__item:nth-child(6) { animation-delay: 0.23s; }
.nav-linear__item:nth-child(7) { animation-delay: 0.27s; }
.nav-linear__item:nth-child(8) { animation-delay: 0.31s; }
.nav-linear__item:nth-child(9) { animation-delay: 0.35s; }

@keyframes nav-linear-item-in {
  to { opacity: var(--item-opacity, 1); }
}

.nav-linear__label {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 1.75rem + 6vw, 8rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-faint);
  text-stroke: 2px var(--color-text-faint);
  transition: color var(--duration-fast) var(--ease-out), -webkit-text-stroke-color var(--duration-fast) var(--ease-out);
}

.nav-linear__item.is-active .nav-linear__label {
  color: var(--color-text);
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
}

@media (max-width: 74.99rem) {
  .nav-linear {
    height: min(38rem, 72vh);
  }

  .nav-linear__label {
    font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  }
}

@media (max-width: 30rem) {
  .nav-linear {
    height: min(28rem, 60vh);
  }

  .nav-linear__label {
    font-size: clamp(1.85rem, 1.1rem + 6vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-linear__item {
    opacity: 1;
    animation: none;
  }

  .nav-linear__label {
    transition: none;
  }
}

/* --- Breadcrumbs --- */

.breadcrumbs {
  padding-block: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
}

.breadcrumbs a {
  color: var(--color-text-faint);
}

.breadcrumbs a:hover {
  color: var(--color-text);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-3xs);
  opacity: 0.5;
}

/* --- Footer --- */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding-block: var(--space-2xl) var(--space-lg);
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-xl);
}

@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-brand__logo-link {
  display: inline-block;
}

.footer-brand p {
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: 26rem;
}

.footer-heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: grid;
  gap: var(--space-2xs);
}

.footer-links a {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.footer-links a:hover {
  color: var(--color-text);
}

.footer-social {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.footer-social a:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
  transform: translateY(-2px);
}

.footer-social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

.footer-version {
  opacity: 0.6;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-legal a {
  color: var(--color-text-faint);
}

.footer-legal a:hover {
  color: var(--color-text);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}