/* Fortified Networks, Option 3 hero: single dark column, full width. Used
   to be a split-screen with a cream panel carrying a four-domain blueprint
   diagram on the right; the diagram is gone (removed sitewide, both the
   desktop panel and its mobile-relocated copy in sections.css), so the
   hero is just the dark column now, no pin runway either — that runway
   existed purely to hold the page still while the diagram unbundled, and
   there's nothing left for it to hold for. */

/* Sized by its content, not stretched to the viewport.

   This used to be min-height:100dvh with .hero-copy bottom-anchored via
   margin-top:auto. Auto margin absorbs *all* leftover column height, so the
   void between the header and the H1 tracked viewport height with no upper
   bound: 148px at 720px tall (the height it was evidently tuned at) but 407px
   at 1080px, over a third of the screen, reading as an accident rather than
   composition.

   Capping the column was the first attempt and it only half worked: the gap is
   heroHeight minus its content, so a cap bounds the void on tall screens but
   leaves it untouched on short ones, and no cap value makes the gap a number
   anyone chose. Worth recording because it looks like the obvious fix: while
   any auto-margin slack remains, .hero-copy's own padding-top cannot shrink
   the gap either. Reduce it and the auto margin simply grows by the same
   amount.

   Dropping the stretch entirely is what actually fixes it. The column is now
   header + copy + padding, so the gap is exactly the padding-top declared
   below at every viewport height, and .hero-eyebrow gives the top edge
   something to hold. Past ~820px tall the next section peeks in below the
   fold, which this page wants anyway: it is a scroll-driven build with no
   other scroll cue since the hero's "Scroll" affordance was removed alongside
   the blueprint diagram. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--o3-hero-ground);
  isolation: isolate;
}

.hero-pin {
  position: relative;
}

/* ---------- left: dark column ---------- */
.hero-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* No min-height here either. It has to match .hero above: left at 100dvh,
     this column stretches to the full viewport inside a content-sized parent
     and reintroduces the very slack the parent stopped creating. */
  /* --rail matches .wrap's inset exactly, so the H1 and every section
     heading further down the page share one left edge. */
  padding-inline: var(--rail) clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.25rem);
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-block: clamp(1.35rem, 3.2vh, 2rem);
  color: var(--o3-heading-ink);
}

/* Condensed state on scroll: a backdrop fades in behind the row and the
   wordmark scales down a touch. Both are transform/opacity only, so crossing
   the threshold never forces a layout recalculation mid-transition. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 8, 15, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
  pointer-events: none;
}
.site-header.is-condensed::after { opacity: 1; }

/* Grid, not flex, because this row genuinely reflows in two dimensions.

   As a single flex line it needed ~770px of column to hold wordmark + nav +
   CTA, and the dark column only has that above roughly 1340px wide. Everywhere
   below, the row overflowed and `.hero-left`'s overflow:hidden ate the
   difference: 335px of it at 760 ("Technologies" cut mid-word, "Resources" and
   the whole incident button gone), 115px at 1024, 25px at 1200. The button
   stayed keyboard-focusable the entire time, so tabbing landed on something
   nobody could see.

   The fix is deciding what yields. The incident line is the one thing on this
   page somebody might need in a hurry, so it never yields; the marketing nav
   drops to its own row instead. */
.header-row {
  display: grid;
  grid-template-areas: "brand nav cta";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.header-row .wordmark { grid-area: brand; }
.header-row .main-nav { grid-area: nav; justify-self: start; }
.header-row .cta-ghost { grid-area: cta; justify-self: end; }
.header-row .nav-toggle { display: none; }

/* Below 1340 the inline nav no longer has room (see the measurement this
   replaced: 335px of overflow at 760, 115px at 1024, 25px at 1200 — eaten
   silently by .hero-left's overflow:hidden, with the cut-off CTA still
   keyboard-focusable). A two-line "wordmark+cta on top, nav below" compromise
   used to fill this band, but it was still the full nav rendered inline, just
   wrapped — the actual fix is not rendering it inline at all: nav and the
   header CTA move into the drawer, replaced here by a single row of wordmark
   + hamburger. Simpler than the compromise it replaces, and it's the same
   1340 boundary already verified overflow-free above it. */
@media (max-width: 1339px) {
  .header-row {
    grid-template-areas: "brand toggle";
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .header-row .main-nav,
  .header-row .cta-ghost { display: none; }
  .header-row .nav-toggle {
    display: flex;
    grid-area: toggle;
  }
}

.wordmark {
  display: inline-block;
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
}
.wordmark img {
  height: 22px;
  width: auto;
  display: block;
}
.site-header.is-condensed .wordmark { transform: scale(.92); }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  flex-wrap: wrap;
}
/* Was .14em -- one of five different tracking values shipping across the
   site's 11px all-caps mono labels (.eyebrow/.svc-eyebrow, footer-col h2,
   cta-ghost, nav-drawer-close) for no role-based reason. Standardized on
   .18em, the value the two eyebrow roles already agreed on. */
.main-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--o3-nav-muted);
  white-space: nowrap;
  transition: color 160ms var(--ease-out);
}
.main-nav a:hover { color: var(--o3-nav-hover); }

.header-row .cta-ghost { white-space: nowrap; }

/* ---------- headline block ----------
   No margin-top:auto anymore (see .hero above for why). padding-top is now the
   entire gap between the header and the eyebrow, at every viewport height, so
   it is a value someone chose rather than whatever height was left over. */
.hero-copy {
  padding-top: clamp(2.5rem, 7vh, 5.5rem);
  display: flex;
  flex-direction: column;
  /* Tightened from clamp(1.75rem, 4vh, 2.75rem) — at wide viewports the old
     value put ~70px of air between the headline and the rule below it
     (this gap plus .hero-sub's own padding-top), reading as an accidental
     gap rather than an intentional beat. */
  gap: clamp(1.5rem, 3vh, 2rem);
}

/* Same role as .eyebrow (sections.css) and deliberately the same visual
   register, but its own class rather than a reuse: .eyebrow carries a
   margin-bottom, and this one is a flex child of .hero-copy, which already
   spaces its children with `gap`. Reusing it would stack margin on top of gap
   and open a hole between the eyebrow and the H1. Also runs a point larger,
   since it sits under a 96px headline rather than a 48px section title. */
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--o3-meta);
  margin: 0;
}
/* 44 uppercase characters at 12px/.18em measure ~413px against the ~335px of
   column inside the rail at 375px wide, so on a phone this wrapped to two
   lines with a single orphaned word on the second, reading as a sentence
   rather than a label and pushing the H1 lower than it sat before the eyebrow
   existed at all. 10px/.10em measures ~325px and holds one line with ~10px to
   spare. Neither size is new to this build: .field label in drawer.css is
   already 10px and .eyebrow itself is 11px.

   Tracking is deliberately cut alongside the size rather than instead of it.
   Measured at 375px: .12em still fits but by 1px, which any font-rendering
   difference erases, and .08em fits comfortably but flattens the letterspacing
   that is most of what makes this read as a label rather than small body text.

   text-wrap: balance rather than a promise it never wraps. Below roughly 340px
   of viewport there is no legible size that holds this on one line, so on the
   narrowest phones it splits into two even lines instead of orphaning
   "SERVICES" on its own. */
@media (max-width: 719px) {
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: .10em;
    text-wrap: balance;
  }
}

.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.6vw, 96px);
  line-height: .96;
  letter-spacing: -.032em;
  color: var(--o3-heading-ink);
  margin: 0;
}

/* ---------- optical alignment of the three headline lines ----------
   The three lines used to be produced by `max-width: 11ch` and left to
   wrap. Their line *boxes* were flush -- all three started at exactly the
   same x -- but the ink was not, because each line opens on a glyph with a
   different left side bearing. Rasterised and pixel-scanned at 300px, then
   confirmed independently in a second browser:

       Y (Your Trusted)   .0233em before the ink
       C (Cybersecurity)  .0500em
       P (Partner in)     .0733em

   which at the 95px desktop size left "Partner" sitting 4.6px right of
   "Your" -- a visible stagger at display size.

   Making the three ink edges mathematically flush is NOT the fix, and that
   was shipped once before this and rejected on sight. Only the P has a
   straight vertical back; the Y opens on a diagonal tip and the C on a
   curve touching at a single tangent. A full-height stem puts far more
   mass on the margin than a tip or a tangent does, so at flush the P reads
   as protruding even though a ruler says otherwise. This is the ordinary
   reason optical alignment exists, and no single "correct" measurement
   resolves it -- it has to be judged by eye.

   So the P is held ~2.1px right of the other two at 95px (the textbook
   amount for a diagonal and a round set against a stem), chosen from a
   rendered ladder rather than derived. If it ever needs more, raising the
   hang on lines 1 and 3 is the knob; ~5.7px was the next rung tried.

   CSS has no per-line optical alignment, hence the hard line breaks in the
   markup. Values are em, so they hold across the whole clamp range instead
   of being right only at 95px -- verified at the 40px floor and the 96px
   cap. */
.hero-copy h1 .hero-line { display: block; }
.hero-copy h1 .hero-line:nth-child(1) { margin-left: -.022em; }
.hero-copy h1 .hero-line:nth-child(2) { margin-left: -.050em; }
.hero-copy h1 .hero-line:nth-child(3) { margin-left: -.039em; }

/* Stacked on purpose rather than left to flex-wrap: side by side, the lede
   and the button row together measure wider than the column at every width
   the hero is split at, so wrapping was the only outcome anyway. Declaring it
   makes the result the same at 1440 and at 1920. */
/* Unequal on purpose. The lede is pulled tight under the rule so the two read
   as one group, and the action row sits on a wider gap so it separates as a
   distinct beat. Equal values here (which is what shipped) made the rule, the
   lede and the buttons three evenly-spaced strangers. */
.hero-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vh, 2.75rem);
  padding-top: clamp(1rem, 2vh, 1.25rem);
  border-top: 1px solid var(--o3-dark-rule);
}

.hero-lede {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--o3-subhead-ink);
  max-width: 42ch;
  margin: 0;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Row-gap bumped from 1rem: when these wrap to two lines on narrow screens
     the coarse-pointer touch target below expands 19px down from
     .hero-incident, and 16px of gap left only ~3px of real clearance from
     .cta-solid above it -- thin enough that ordinary cross-device rendering
     variance turned "close" into "overlapping" on a real phone. */
  gap: 1.25rem 1.75rem;
}

.hero-incident,
.close-incident {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
/* .close-incident is a <button> (opens the booking drawer), not an <a> —
   strip native button chrome so it still reads as the plain underlined-text
   link the rules above style it as. */
.close-incident {
  cursor: pointer;
  background: transparent;
  border-width: 0 0 1px;
  border-style: solid;
}
.hero-incident:hover,
.close-incident:hover {
  color: var(--o3-nav-hover);
  border-color: var(--o3-dark-rule-strong);
}

/* Touch targets, keyed on the pointer rather than the viewport — a tablet at
   1024 needs these as much as a phone at 375 does.

   These two links measure 19px tall, against a 44px minimum. Expanding the hit
   area with a pseudo-element rather than padding keeps the underline sitting on
   the baseline instead of floating 13px below the text. This is the number a
   person in an active incident has to hit, so it is the last target on the page
   that should be hard to tap. The vertical growth stays inside the 58px CTA
   beside it and the horizontal stays inside the 28px column gap, so nothing
   steals a neighbour's clicks. */
@media (pointer: coarse) {
  .hero-incident::after,
  .close-incident::after {
    content: "";
    position: absolute;
    /* Asymmetric on purpose. An even expansion to reach ~44px total needs
       ~13px on every side, and 13px upward ate most of the row-gap toward
       the button above, leaving only a few real px of clearance -- exactly
       what read as a "clash" on a real phone. Biasing the growth down (into
       open space, not a neighbour's box) still reaches the same ~44px total
       height without gambling on a thin gap. */
    top: -6px;
    bottom: -19px;
    left: -8px;
    right: -8px;
  }
  .header-row .cta-ghost { padding: 14px 18px; }
}

/* ---------- responsive ---------- */
/* (No h1 max-width override here any more: the line breaks are explicit in
   the markup now, so the headline reads as the same three lines at every
   width instead of reflowing to two thin ones or four short ones.) */

@media (max-width: 719px) {
  .hero {
    min-height: 0;
  }
  .hero-left {
    min-height: 0;
    padding-inline: var(--rail);
    padding-bottom: clamp(2.75rem, 8vh, 3.5rem);
  }
  .hero-copy {
    margin-top: 0;
    padding-top: clamp(3rem, 12vh, 5rem);
  }
  .hero-sub {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-lede { max-width: none; }

  /* .hero-actions wraps here (it's flex-wrap already), and a bare text link
     sitting alone under a full-width solid button read as an orphaned scrap
     floating in the dark ground below it, not a real second action.
     Bordered and stretched to the row's full width so it reads as a
     deliberate secondary CTA paired with the primary button, matching the
     header's own .cta-ghost language rather than the desktop inline-link
     treatment that only works sitting beside the button, same row.
     align-items:stretch on a row-direction flex container only affects
     height, not width -- .hero-incident got its own explicit width:100%
     below, but .cta-solid never did, so the two ended up a mismatched
     263px/335px pair with unaligned edges (confirmed on a real device).
     nav-drawer.css's version of this same pairing uses a column flex
     container, where stretch legitimately does size both children --
     matching that outcome here explicitly since switching this container
     to column isn't free (would also stack the two on desktop). */
  .hero-actions { align-items: stretch; }
  .hero-actions .cta-solid { width: 100%; justify-content: center; }
  .hero-incident {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid var(--o3-dark-rule-strong);
    padding: 13px 16px;
  }
  .hero-incident:hover { border-color: var(--o3-nav-hover); }

  /* The header treatment for this band is inherited from the max-width:1339
     block above (wordmark + hamburger, nav and the CTA both live in the
     drawer). Nothing extra is needed here. */
}