/*
 * Apex — base: reset, typography defaults, section rail layout, header/nav.
 * Design reference: Figma "Wireframe - HomePage - Black - v4" (1999px frame).
 * Sections use a two-column grid: left rail (~410px at 1999) with the eyebrow
 * label, content column from x≈410 to the right edge.
 */

/* ------------------------------------------------------------------ Base */

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

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

body {
  margin: 0;
  background: var(--apex-bg);
  color: var(--apex-text);
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--wp--custom--letter-spacing--tight);
}

p { margin: 0; }

figure { margin: 0; }

/* Keyboard focus ring — neutral (no turquoise); only shows for keyboard nav. */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

/* Never show a focus ring for mouse/touch interaction. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------- Section rail layout */

.apex-section {
  display: grid;
  /* 410px rail at the 1999px design width */
  grid-template-columns: minmax(11rem, 20.5%) minmax(0, 1fr);
  padding-block: clamp(2rem, 2.7vw, 3.375rem); /* ~54px at 1999, from Figma */
  padding-right: clamp(1.5rem, 3.2vw, 4rem); /* 64px section side padding, measured in Figma */
  scroll-margin-top: var(--apex-header-h); /* anchor jumps clear the fixed header */
}

.apex-section__rail {
  padding-left: clamp(1.5rem, 3.25vw, 4rem); /* eyebrow at x≈65 in Figma */
}

.apex-section__body {
  min-width: 0;
}

/* Opt-in sticky rail: add `apex-section--sticky-rail` to a section and its
   eyebrow rail pins just under the fixed header, travelling until the section
   bottom scrolls past. `align-self: start` gives the rail room to move within
   the taller grid cell. Turned off on the stacked mobile layout (see the
   960px breakpoint), and simply omitted on sections that shouldn't pin
   (e.g. the clients marquee). */
.apex-section--sticky-rail > .apex-section__rail {
  position: sticky;
  top: calc(var(--apex-header-h) + 1.5rem);
  align-self: start;
}

/* Gutenberg injects flow margins between sibling blocks — neutralise them
   inside our grid/flex layout containers so items align to the tracks. */
.apex-section > *,
.apex-section__rail > *,
.apex-section__body > *,
.apex-bento > *,
.apex-bento__row > *,
.apex-bento__split > *,
.apex-bento__split-left > *,
.apex-bento__split-row > *,
.apex-card > *,
.apex-card__body > *,
.apex-about__head > *,
.apex-about__copy > *,
.apex-hero__bottom > *,
.apex-hero__tagline > * {
  margin-block: 0;
}

.apex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px (spacing/8), measured in Figma */
  font-size: 0.875rem; /* token Paragraph/Bold: 14/18 */
  line-height: 1.2857;
  font-weight: 700;
  letter-spacing: 0; /* measured in Figma */
  text-transform: uppercase;
  color: var(--apex-text);
  white-space: nowrap;
}

.apex-eyebrow::before {
  content: "";
  width: 2.90625rem; /* 46.5px, measured in Figma */
  height: 0.5px; /* white hairline, measured in Figma */
  background: #fff;
}

/* Square arrow affordance used on cards and rows */

.apex-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: #242426; /* measured in Figma */
  color: var(--apex-text);
  font-size: 0;
  cursor: pointer;
  transition: background var(--apex-transition);
}

.apex-arrow::after {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: var(--apex-arrow-icon) center / contain no-repeat;
  mask: var(--apex-arrow-icon) center / contain no-repeat;
}

a:hover > .apex-arrow,
.apex-card:hover .apex-arrow,
.apex-work__item:hover .apex-arrow {
  background: #000; /* prototype hover state */
}

/* Fallback archive/list template wrapper (index.php) */
.apex-archive {
  max-width: 60rem;
  margin-inline: auto;
  padding: calc(var(--apex-header-h) + 3rem) 1.5rem 4rem;
  display: grid;
  gap: 2rem;
}

/* --------------------------------------------------------------- Header */

.apex-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--apex-header-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
}

.apex-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--apex-header-pad);
}

.apex-logo {
  display: inline-flex;
  align-items: center;
}

.apex-logo img {
  height: 1rem; /* 16px, the white-logo instance size in the Figma nav */
  width: auto;
}

.apex-nav {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32px, measured in Figma */
}

.apex-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32px between links, measured in Figma */
  margin: 0;
  padding: 0;
  list-style: none;
}

.apex-nav ul a {
  display: inline-block;
  padding: 0; /* Figma: link box hugs the text */
  font-size: 0.875rem; /* token: h6 linknavbar 14px */
  line-height: 1.26; /* 17.64 / 14 */
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--apex-text);
  transition: color var(--apex-transition);
}

/* Hover underline: 1px #D9D9D9 bar 4px below the text (Figma menu-item) */
.apex-nav ul a::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 4px;
  background: #d9d9d9;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--apex-transition);
}

.apex-nav ul a:hover::after { transform: scaleX(1); }

.apex-nav__socials {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32px between icons (Figma Frame 7: 64px, space-between) */
}

.apex-nav__social {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: var(--apex-text);
  transition: color var(--apex-transition);
}

.apex-nav__social:hover { color: var(--apex-primary); }

.apex-nav__social svg { width: 1rem; height: 1rem; }

.apex-nav-toggle { display: none; }

/* ------------------------------------------------------ Scroll reveal */

/*
 * Elements enter from below as they scroll into view. The base hidden state
 * is applied by JS (adds .apex-reveal), so the page stays fully visible when
 * JS is off or reduced motion is requested.
 */
.apex-reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1.1s var(--apex-ease), transform 1.1s var(--apex-ease);
  will-change: opacity, transform;
}

.apex-reveal.is-in-view {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------- Responsive */

@media (max-width: 960px) {
  .apex-section {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
    padding-right: 0; /* the body carries its own inline padding here */
  }

  .apex-section__rail { padding-left: 1.5rem; }

  .apex-section__body { padding-inline: 1.5rem; }

  /* Rail sits above the content here, so pinning would look wrong. */
  .apex-section--sticky-rail > .apex-section__rail {
    position: static;
  }
}

@media (max-width: 720px) {
  .apex-nav ul { display: none; }

  .apex-nav-toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    background: none;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-sm);
    color: var(--apex-text);
    cursor: pointer;
  }

  .apex-nav[data-open="true"] ul {
    display: flex;
    position: absolute;
    inset: var(--apex-header-h) 0 auto 0;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem;
    background: var(--apex-bg);
    border-top: 1px solid var(--apex-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}