/* 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;
}

/* Mobile: a right-side vertical drawer instead of the desktop's full-screen
   circle-reveal takeover — narrower, slides in from the edge it's
   triggered from, and leaves the rest of the page visible/dimmed behind
   it rather than covering the whole viewport. Desktop (above this
   breakpoint) keeps the original full-screen behavior untouched. */
@media (max-width: 63.99rem) {
  .mobile-nav__panel {
    inset: 0 0 0 auto;
    left: auto;
    width: min(85vw, 22rem);
    animation: mobile-nav-in-drawer var(--duration-base) var(--ease-out);
    box-shadow: -1.5rem 0 3rem -1rem rgba(0, 0, 0, 0.35);
  }

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

/* Dims the strip of page left showing beside the drawer — without this the
   drawer only covers min(85vw, 22rem), leaving the rest of the page fully
   lit and visually "unfinished" next to it. Desktop's full-screen
   circle-reveal already covers the whole viewport itself, so this only
   needs to exist below the drawer breakpoint. */
.mobile-nav__backdrop {
  display: none;
}

@media (max-width: 63.99rem) {
  .mobile-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-toast) + 9);
    background: rgba(8, 12, 20, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
  }

  .mobile-nav[open] .mobile-nav__backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

@keyframes mobile-nav-in-drawer {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes mobile-nav-out-drawer {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* --- Mobile text menu: plain link list (replaces the card-based mega
   menu on mobile only) — the drawer is narrow, so a flat list of real
   links reads better there than the desktop's numbered-card index, and
   everything (services, products, company links) is shown at once with
   no drill-down/expand step. Desktop keeps the original .mega-menu
   untouched; only one of the two ever renders at a given viewport. */
.mobile-nav__body.mobile-text-menu {
  display: none;
}

@media (max-width: 63.99rem) {
  .mobile-nav__body.mobile-text-menu {
    display: flex;
    flex-direction: column;
    /* .mobile-nav__body's own justify-content:center is meant for the
       short card grid, which normally fits without scrolling — for this
       much longer flat link list it instead centers the overflowing
       content, which offsets the scroll container's start position so it
       opens already scrolled partway down instead of at the true top. */
    justify-content: flex-start;
    gap: var(--space-3xs);
    padding-block: var(--space-sm);
  }

  .mobile-nav__body.mega-menu {
    display: none;
  }
}

.mobile-text-menu__heading {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.mobile-text-menu__link {
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.mobile-text-menu__link--sub {
  padding-left: var(--space-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* Services / Our Products collapse into an accordion on mobile — same
   grid-template-rows 0fr/1fr technique process-story.css uses for its
   step descriptions, the one place in the codebase that already animates
   an expand/collapse without JS-measured heights. */
.mobile-text-menu__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm) 0 var(--space-xs);
  border: none;
  border-top: 1px solid var(--color-border);
  background: none;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  cursor: pointer;
}

.mobile-text-menu__chevron {
  flex-shrink: 0;
  font-size: var(--fs-lg);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}

.mobile-text-menu__group-toggle[aria-expanded='true'] .mobile-text-menu__chevron {
  transform: rotate(45deg);
}

.mobile-text-menu__submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.mobile-text-menu__submenu.is-open {
  grid-template-rows: 1fr;
}

.mobile-text-menu__submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-text-menu__submenu {
    transition: none;
  }
}

.mobile-text-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.mobile-text-menu__actions .btn {
  width: 100%;
}

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

.mobile-text-menu__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

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

/* 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);
}

@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 (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);
}