/* SEC — components */

/* -------- Header -------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--container-pad);
  height: var(--header-h);
  background: transparent;
  transition: background var(--motion-fast) var(--ease-out);
  border: 0;
}
/* Only show backdrop after the user has scrolled past the hero —
   keeps the top edge fully transparent so the page gradient flows under it. */
.site-header.is-scrolled {
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* When the menu overlay is open, the header sits above the (scrollable) overlay.
   Give it a solid background so menu items scroll cleanly behind it instead of
   showing through around the logo. */
body.menu-open .site-header { background: var(--color-surface-base); }

.brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.brand img { height: 38px; width: auto; }
/* In the footer the brand sits in a normal column flow — must NOT stretch to 100% height,
   otherwise the sibling <p> description gets pushed below the column and overlaps the
   footer-bottom border-top line. */
.site-footer .brand { height: auto; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.icon-btn {
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.icon-btn:hover { background: rgba(255,255,255,.08); color: var(--color-surface-strong); }
.icon-btn svg { width: 18px; height: 18px; }

.careers-link {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  height: 40px;
  border-radius: var(--radius-pill);
  transition: color var(--motion-fast) var(--ease-out);
}
.careers-link:hover { color: var(--color-surface-strong); }

.burger {
  position: relative;
  width: 48px; height: 40px;
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  margin-left: var(--space-2);
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
}
.burger:hover { background: #ff8240; }
.burger .bars { position: relative; width: 18px; height: 12px; }
.burger .bars span {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor;
  transition: transform var(--motion-fast) var(--ease-out),
              top var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
}
.burger .bars span:nth-child(1) { top: 0; }
.burger .bars span:nth-child(2) { top: 5px; }
.burger .bars span:nth-child(3) { top: 10px; }
.menu-open .burger .bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-open .burger .bars span:nth-child(2) { opacity: 0; }
.menu-open .burger .bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* Hide social icons on small screens to keep header airy */
@media (max-width: 720px) {
  .header-actions .icon-btn[data-social],
  .header-actions .careers-link { display: none; }
}

/* -------- Overlay menu -------- */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 49;
  background: var(--color-surface-base);
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  padding: calc(var(--header-h) + var(--space-7)) var(--container-pad) var(--space-7);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4%);
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-normal) var(--ease-out);
  overflow-y: auto;
}
.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.menu-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--space-9);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px) {
  /* Keep the fixed header/logo strip clear: the overlay itself is locked and the
     menu scrolls INSIDE the area below the header, so items never pass behind the
     logo. (Header also goes opaque via body.menu-open above as a safety net.) */
  .menu-overlay {
    align-content: start;
    padding-top: var(--header-h);
    padding-bottom: 0;
    overflow: hidden;
  }
  .menu-inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-6) 0 var(--space-7);
  }
  /* Small indent so items don't sit flush under the logo's left edge.
     Scoped via .menu-overlay to outrank the later base `.menu-nav a` padding. */
  .menu-overlay .menu-nav a { padding-left: var(--space-4); }
}
.menu-nav { list-style: none; padding: 0; margin: 0; }
.menu-nav li {
  border-top: 1px solid var(--color-border-muted);
  overflow: hidden;
}
.menu-nav li:last-child { border-bottom: 1px solid var(--color-border-muted); }
.menu-nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-text-primary);
  transition: color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}

/* Menu open: cascade nav items in (micro cascade, total budget ~240ms) */
.menu-nav li {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--motion-normal) var(--ease-decelerate),
              transform var(--motion-normal) var(--ease-decelerate);
}
.menu-overlay.is-open .menu-nav li {
  opacity: 1;
  transform: none;
}
.menu-overlay.is-open .menu-nav li:nth-child(1) { transition-delay: 120ms; }
.menu-overlay.is-open .menu-nav li:nth-child(2) { transition-delay: 160ms; }
.menu-overlay.is-open .menu-nav li:nth-child(3) { transition-delay: 200ms; }
.menu-overlay.is-open .menu-nav li:nth-child(4) { transition-delay: 240ms; }
.menu-overlay.is-open .menu-nav li:nth-child(5) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .menu-nav li { opacity: 1; transform: none; transition: none; }
}
.menu-nav a .num {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-text-tertiary);
  transition: color var(--motion-fast) var(--ease-out);
}
.menu-nav a:hover, .menu-nav a:focus-visible {
  color: var(--color-surface-strong);
  transform: translateX(8px);
}
.menu-nav a:hover .num, .menu-nav a:focus-visible .num {
  color: var(--color-surface-strong);
}
/* Current-page indicator: the active item tracks the page (set via aria-current
   in main.js). Persistent orange, no shift, so it stays aligned with the rest. */
.menu-nav a[aria-current="page"],
.menu-nav a[aria-current="page"] .num { color: var(--color-surface-strong); }
/* The overlay is only a focus landing spot when the menu opens — no focus ring. */
.menu-overlay:focus, .menu-overlay:focus-visible { outline: none; }
.menu-aside {
  align-self: end;
  display: grid;
  gap: var(--space-5);
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
}
.menu-aside h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 var(--space-2);
}
.menu-aside p { margin: 0; }
.menu-aside .social-row { display: flex; gap: var(--space-3); }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 28px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: transform var(--motion-instant) var(--ease-out),
              background var(--motion-instant) var(--ease-out),
              color var(--motion-instant) var(--ease-out),
              box-shadow var(--motion-instant) var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
}
.btn--primary:hover {
  background: #ff8240; color: var(--color-text-on-strong);
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 28px rgba(255,111,32,0.28);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid rgba(255,255,255,.25);
}
.btn--ghost:hover { background: rgba(255,255,255,.08); color: var(--color-text-primary); }
.btn--dark {
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}
.btn--dark:hover { background: #1a1a1a; color: var(--color-surface-strong); }
.btn .arrow { transition: transform var(--motion-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* -------- Footer — continues the vertical gradient from the CTA above -------- */
.site-footer {
  background: linear-gradient(180deg,
    var(--color-surface-muted) 0%,
    #1a1715 50%,
    #100d0b 100%);
  color: var(--color-text-inverse);
  padding: var(--space-7) 0 var(--space-6);
  position: relative;
  overflow: hidden;
  border-top: 0;
}
.footer-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  margin-bottom: var(--space-4);
}
.footer-grid p, .footer-grid a { font-size: var(--fs-sm); line-height: 1.7; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-muted);
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
}
.iso-row {
  display: flex; gap: var(--space-3); align-items: center;
}
.iso-row--footer { margin-top: var(--space-5); }
.iso-badge {
  width: 56px; height: 56px;
  object-fit: contain;
  display: block;
}
.social-row { display: flex; gap: var(--space-2); }
.social-row .icon-btn { background: rgba(255,255,255,.04); }
.social-row .icon-btn:hover { background: var(--color-surface-strong); color: var(--color-text-on-strong); }

/* -------- Cards / generic -------- */
.card {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-surface-strong); }

/* -------- Counters -------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  text-align: left;
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--color-surface-strong);
  padding-top: var(--space-5);
}
.stat-num {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-surface-strong);
  font-variant-numeric: tabular-nums;
}
.stat-num .plus { font-size: .6em; vertical-align: super; margin-left: 4px; }
.stat-label {
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

/* -------- Diagonal section accent -------- */
.accent-diagonal {
  position: relative;
  overflow: hidden;
}
.accent-diagonal::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 40vw; height: 100%;
  background: var(--color-surface-strong);
  clip-path: polygon(45% 0, 100% 0, 100% 100%);
  opacity: 0.92;
  pointer-events: none;
}

/* ====== Sticky "Company Profile" download button (site-wide) ====== */
.profile-cta {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.15rem;
  border-radius: 999px;
  background: var(--color-surface-strong);
  color: #fff;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.profile-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
.profile-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.profile-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) {
  .profile-cta { padding: 0.62rem 0.9rem; font-size: 0.78rem; }
  .profile-cta svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-cta { transition: none; }
  .profile-cta:hover { transform: none; }
}