/* ==========================================================================
   CTAI hero — production stylesheet for ctai-hero-exact.njk
   Design system: black #0D0D0D / off-white #F5F5F0 / warning yellow #FFD600
   Fonts: Inter Tight (display) · Saira Stencil One (numerals) · IBM Plex Sans
          (body) · Space Mono (technical labels)
   Fluid from 320px up; matches the 1440×960 comp at >=1280px.
   ========================================================================== */

.ctai-hero {
  --black: #0D0D0D;
  --surface: #1A1A1A;
  --border: #2A2A2A;
  --ink: #F5F5F0;
  --grey: #999999;
  --yellow: #FFD600;
  --stage-h: clamp(420px, 48vw, 692px);

  position: relative;
  background: var(--black);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow: hidden;
}

/* ---------- shared devices ------------------------------------------------ */

.bracket {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.bracket--tl { top: 14px; left: 34px; border-top: 2px solid var(--yellow); border-left: 2px solid var(--yellow); }
.bracket--tr { top: 14px; right: 48px; border-top: 2px solid var(--yellow); border-right: 2px solid var(--yellow); }
.bracket--bl { bottom: 14px; left: 34px; border-bottom: 2px solid var(--yellow); border-left: 2px solid var(--yellow); }
.bracket--br { bottom: 26px; right: 48px; border-bottom: 2px solid var(--yellow); border-right: 2px solid var(--yellow); }
.bracket--mid { top: 14px; left: 54.5%; border-top: 2px solid var(--yellow); border-left: 2px solid var(--yellow); }

.hazard {
  flex: 0 0 auto;
  width: 14px;
  height: 120px;
  background: repeating-linear-gradient(45deg, var(--yellow) 0 8px, var(--black) 8px 16px);
}

/* ---------- grime masks ---------------------------------------------------
   grime-mask.png / grime-mask-btn.png ship with the wear pattern baked into
   luminance (bright specks/scratches on a black field), not alpha — using
   them directly as a mask hides the whole field and leaves only the specks
   visible. The inline SVG defs in ctai-hero-exact.njk invert that luminance
   (feComponentTransfer, table 1→0) so the field reads opaque and the specks
   become small eroded holes — industrial wear, not full erasure. -------- */

.btn--primary {
  background: var(--yellow);
  color: var(--black);
  border: 1px solid var(--black);
  font-weight: 700;
  mask-image: url(#grime-mask-btn);
  -webkit-mask-image: url(#grime-mask-btn);
  mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--ink); }

.btn--secondary {
  gap: 28px;
  background: var(--black);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn--secondary:hover,
.btn--secondary:focus-visible { border-color: var(--yellow); color: var(--yellow); }

.btn--ghost {
  gap: 14px;
  padding: 15px 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--yellow); color: var(--black); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding: 19px 24px;
  border-radius: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn span { font-size: 15px; }

.ctai-hero :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ---------- header -------------------------------------------------------- */

.hero__header {
  position: relative;
  flex-wrap: nowrap;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 128px;
  padding: 0 48px;
}

.hero__logo { text-decoration: none; }
.hero__logo-mark {
  position: relative;
  display: block;
  padding: 14px 18px;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.hero__logo-mark::before,
.hero__logo-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__logo-mark::before {
  border-top: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  clip-path: polygon(0 0, 18px 0, 18px 100%, 0 100%, 0 0, 100% 0, 100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) 0, 100% 0);
}
.hero__logo-mark::after {
  border-left: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 18px, 0 18px, 0 calc(100% - 18px), 100% calc(100% - 18px), 100% 100%, 0 100%);
}

.hero__logo-note {
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.hero__nav {
  display: flex;
  min-width: 0;
  gap: 48px;
  margin-left: clamp(24px, 7vw, 100px);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero__nav a { color: var(--ink); text-decoration: none; }
.hero__nav a:hover { color: var(--yellow); }

.hero__header-cta { margin-left: auto; }

.hero__menu { display: none; }

/* ---------- stage --------------------------------------------------------- */

.hero__stage {
  position: relative;
  height: var(--stage-h);
}

.hero__photo {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(940px, 65%);
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
}

.hero__photo-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.55) 100%);
  pointer-events: none;
}

/* operator block */
.hero__operator {
  position: absolute;
  top: 78px;
  left: 34px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.95;
  text-transform: uppercase;
}
.hero__operator-text { display: block; }
.hero__operator-label,
.hero__operator-name,
.hero__operator-role { display: block; }
.hero__operator-label { color: var(--grey); }
.hero__operator-name { color: var(--yellow); font-weight: 700; font-size: 15px; }
.hero__operator-role { color: var(--ink); }

/* copy column */
.hero__copy {
  position: absolute;
  top: 20px;
  left: 56%;
  right: 84px;
  max-width: 600px;
}

.hero__eyebrow {
  margin: 0 0 34px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hero__title {
  margin: 0;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  mask-image: url(#grime-mask-title);
  -webkit-mask-image: url(#grime-mask-title);
  mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__title-accent { color: var(--yellow); }

.hero__lede,
.hero__sub {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 16px;
  line-height: 1.85;
}
.hero__lede { margin: 36px 0 0; max-width: 445px; color: var(--ink); }
.hero__sub { margin: 22px 0 0; color: var(--grey); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 38px;
}

/* vertical rail */
.hero__rail {
  position: absolute;
  right: 36px;
  top: 14px;
  bottom: 26px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.hero__rail > span { writing-mode: vertical-rl; }
.hero__rail-rule { width: 1px; height: 36px; background: var(--border); writing-mode: horizontal-tb; }

/* ---------- phase bar ----------------------------------------------------- */

.phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 139px;
  margin: 0 28px;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.phases .bracket { width: 20px; height: 20px; }
.phases .bracket--tl { top: 14px; left: 8px; }
.phases .bracket--bl { bottom: 14px; left: 8px; }
.phases .bracket--tr { top: 14px; right: 8px; }
.phases .bracket--br { bottom: 14px; right: 8px; }

.phase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 64px;
}
.phase + .phase { border-left: 1px solid var(--border); }
.phase b {
  font-family: "Saira Stencil One", "Space Mono", monospace;
  font-weight: 400;
  font-size: 26px;
  color: var(--yellow);
}
.phase span {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- responsive ---------------------------------------------------- */

@media (min-width: 1280px) and (max-width: 1439px) {
  .hero__header { gap: 24px; padding: 0 32px; }
  .hero__nav { gap: 28px; font-size: 12px; }
  .hero__copy { left: 52%; right: 72px; }
  .hero__lede, .hero__sub { font-size: 15px; }
  .hero__actions { gap: 16px; }
  .bracket--mid { display: none; }
}

@media (max-width: 1279px) {
  .ctai-hero { --stage-h: auto; }
  .hero__nav,
  .hero__header-cta,
  .hero__rail,
  .bracket--mid { display: none; }
  .hero__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0 8px;
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
  }
  .hero__menu span { display: block; height: 2px; background: var(--ink); }

  .hero__stage { display: flex; flex-direction: column; }
  .hero__photo {
    position: relative;
    width: 100%;
    height: clamp(380px, 74vw, 620px);
    object-position: 18% top;
    /* fade anchored to the image itself, so it can't drift from the photo's edge.
       Mask gradients render as luminance here (same engine behavior the grime
       masks rely on), so the stops must be white/opaque-alpha, not black —
       black stops would read as ~0 luminance and hide the photo entirely. */
    -webkit-mask-image: linear-gradient(to bottom, #fff 0 84%, rgba(255, 255, 255, 0.45) 100%);
            mask-image: linear-gradient(to bottom, #fff 0 84%, rgba(255, 255, 255, 0.45) 100%);
  }
  .hero__photo-fade { display: none; }
  .hero__operator { top: 24px; left: 24px; }
  .hazard { height: 96px; }

  .hero__copy {
    position: static;
    max-width: none;
    padding: 40px 24px 8px;
  }
  .hero__title span { white-space: normal; }
  .hero__title { font-size: clamp(34px, 9vw, 52px); }
  .hero__sub br { display: none; }

  .bracket--tl, .bracket--tr, .bracket--br { display: none; }

  .phases {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    margin: 32px 24px 0;
    padding: 8px 0 24px;
  }
  .phase { justify-content: flex-start; gap: 16px; padding: 0 16px; }
  .phase:nth-child(odd) { border-left: 0; }
  .phase span { font-size: 13px; }
  .phases .bracket { display: none; }
}

@media (max-width: 560px) {
  .hero__header { height: 96px; padding: 0 20px; gap: 16px; }
  .hero__logo-mark { font-size: 28px; padding: 12px 14px; }
  .hero__logo-note { display: none; }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .phases { grid-template-columns: 1fr; }
  .phase { border-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ctai-hero * { transition: none !important; }
}