/* =====================================================================
   zenith.css · page CSS for /zenith/, the "what we do" overview.

   Loaded AFTER base.css + the theme files and BEFORE responsive.css, in the
   same order every other page on the site uses. Everything here is written
   against the shared design tokens, so both themes ("lobby" dark, "corporate"
   light) come out correct without a single hardcoded colour outside the two
   places the tokens do not cover (noted inline).
   ===================================================================== */

/* ====================  SHOW BAND  ====================
   The one conference-specific element on the page. It is a single <aside>
   in the markup: delete that element after Aug 27 and what remains is an
   evergreen overview page. Nothing else references the event. */
.show-band {
  background: var(--invert-bg);
  border-bottom: 1px solid rgba(244, 241, 236, 0.10);
  padding: 14px 0;
}
.show-band-inner {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.show-band .eyebrow {
  margin-bottom: 0;
  color: var(--brass-on-dark, #b3a586);
}
.show-band p {
  font-size: 14px;
  color: var(--invert-text-2);
  margin: 0;
}
.show-band strong { color: var(--invert-text); font-weight: 600; }
.theme-corporate .show-band { background: #0f172a; border-bottom-color: rgba(255,255,255,0.08); }
.theme-corporate .show-band .eyebrow { color: #e8f1fa; }
.theme-corporate .show-band p { color: rgba(255,255,255,0.72); }
.theme-corporate .show-band strong { color: #ffffff; }

/* ====================  HERO HEADLINE  ====================
   The headline is three clauses and must set as three lines at every width.
   Three things are needed, and all three were found the hard way:

   1. `text-wrap: balance` must be OFF. theme-lobby.css sets it on every h1
      sitewide to stop long client names orphaning a word, which is right for a
      single sentence and wrong here: balance re-flows the heading to even out
      line lengths and ignores the authored clause breaks. The selector below
      matches its specificity deliberately.
   2. `.keep` binds "work together." into one unbreakable run, so the accent
      word can never end up stranded on a line of its own.
   3. The line must actually FIT. Measured, the longest clause needs about
      13em of width; below that it wraps no matter what the first two rules
      say. So the size is capped by the column rather than by the viewport:
      `min(4.6vw, 13em-worth)`. The hero column is also widened for this page,
      since the site default of 1.15fr leaves the text too narrow for a
      three-clause line.

   If the headline text ever changes, re-check the fit. The clause that governs
   is the middle one. */
.theme-lobby .hero h1,
.theme-corporate .hero h1 {
  text-wrap: wrap;
  font-size: clamp(22px, 4.35vw, 54px);
  line-height: 1.06;
}
.hero h1 .keep { white-space: nowrap; }

@media (min-width: 921px) {
  .hero-grid { grid-template-columns: 1.62fr 1fr; gap: 52px; }
}

/* Two ranges where the column narrows faster than the type does, so the middle
   clause runs out of room. Each was found by measuring the clause against the
   column, not by eye. */
@media (min-width: 921px) and (max-width: 1330px) {
  .theme-lobby .hero h1,
  .theme-corporate .hero h1 { font-size: 3.75vw; }
}

/* The corporate theme sets display weight 700 against lobby's 300, and the
   heavier face is materially wider at the same size, so it needs its own
   ceiling or the middle clause wraps. Measured, not guessed. */
.theme-corporate .hero h1 { font-size: clamp(20px, 3.7vw, 46px); }
@media (min-width: 921px) and (max-width: 1330px) {
  .theme-corporate .hero h1 { font-size: 3.2vw; }
}
@media (max-width: 430px) {
  .theme-corporate .hero h1 { font-size: 5.0vw; }
}
@media (max-width: 430px) {
  .theme-lobby .hero h1,
  .theme-corporate .hero h1 { font-size: 5.9vw; }
}

/* ====================  CAPABILITY GRID  ====================
   The six specialties. Flat hairline cards in lobby, soft cards in corporate:
   both fall out of the shared surface tokens, so this rule set stays short. */
.capabilities { background: var(--services-bg); padding: var(--section-pad-y) 0; }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
}
.cap {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 34px 30px 32px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cap:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.cap-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--eyebrow-color);
}
.cap-icon {
  width: 72px; height: 72px;
  display: block;
  /* icon artwork is theme-driven: structure = text colour, mass = accent */
  color: var(--text-1);
  --kl-brass: var(--accent);
  --kl-ground: var(--surface-card);
}
.cap-icon svg { width: 100%; height: 100%; display: block; }
.cap h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--section-h-weight);
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--text-1);
}
.theme-lobby .cap h3 { font-weight: 400; font-size: 24px; }
.cap p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.cap-tag {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--eyebrow-line-color);
  /* Flat by default. theme-lobby zeroes --radius-card and --radius-button but
     never --radius-pill, so inheriting that token puts a 999px chip inside a
     square hairline card. Pills are native to the corporate theme only. */
  border-radius: 0;
}
.theme-corporate .cap-tag { border-radius: var(--radius-pill); }

/* ====================  ENGAGEMENT ROW  ====================
   Five shapes, read as a single horizontal band of hairline-separated cells. */
.shapes { background: var(--cases-bg); padding: var(--section-pad-y) 0; }
.shapes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--border-width) solid var(--card-border);
}
.shape {
  padding: 30px 22px 26px;
  border-bottom: var(--border-width) solid var(--card-border);
  border-right: var(--border-width) solid var(--card-border);
}
.shape:first-child { border-left: var(--border-width) solid var(--card-border); }
.shape-kicker {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--eyebrow-color);
  display: block; margin-bottom: 14px;
}
.shape h3 {
  font-family: var(--font-display);
  font-size: 20px; line-height: 1.2;
  font-weight: var(--section-h-weight);
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin-bottom: 10px;
}
.theme-lobby .shape h3 { font-weight: 400; }
.shape p { font-size: 14px; line-height: 1.55; color: var(--text-2); }

/* ====================  PROCESS  ====================
   Discover. Align. Build. Measure. Four numbered steps on a single rule. */
.process { background: var(--why-bg); padding: var(--section-pad-y) 0; }
.process-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-grid);
}
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--eyebrow-line-color); }
.step-num {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1;
  font-style: var(--em-style);
  font-weight: 400;
  color: var(--eyebrow-color);
  display: block; margin-bottom: 14px;
}
.theme-corporate .step-num { font-style: normal; font-weight: 800; font-size: 26px; }
.step h3 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: var(--section-h-weight);
  letter-spacing: -0.015em; color: var(--text-1);
  margin-bottom: 10px;
}
.theme-lobby .step h3 { font-weight: 400; }
.step p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ====================  PROOF STRIP  ====================
   Three facts, mono-set, on a hairline band. Deliberately unglamorous. */
.proof { background: var(--stats-bg); padding: 40px 0; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.proof-item { display: flex; flex-direction: column; gap: 8px; }
.proof-num {
  font-family: var(--font-display);
  font-size: 38px; line-height: 1;
  font-weight: 300; letter-spacing: -0.025em;
  color: var(--text-1);
}
.theme-corporate .proof-num { font-weight: 800; font-size: 30px; }
.proof-label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--eyebrow-color);
}

/* ====================  AA CONTRAST ON LIGHT GROUNDS  ====================
   theme-lobby.css states the rule: "#8a7d62 clears AA only at large-text 3:1;
   body copy needs 4.5:1, so use the deeper brass", and already overrides
   .section-eyebrow / .trust-cap / .case-body em for exactly this. These four
   are all small text on a light surface and needed the same treatment:
   #8a7d62 measures 3.59:1 on #f4f1ec and 3.26:1 on #ebe6dd, while --accent-d
   (#6b6147) measures 5.44:1 and 4.93:1. The decorative 1px chip border keeps
   #8a7d62, which theme-lobby.css says is intentionally unchanged (3:1 is the
   non-text requirement). */
.theme-lobby .cap-num,
.theme-lobby .cap-tag,
.theme-lobby .shape-kicker,
.theme-lobby .proof-label { color: var(--accent-d); }

/* ====================  CORPORATE CTA BUTTON  ====================
   theme-corporate.css:147 gives .btn-secondary a white background, then :254
   sets .cta-band .btn-secondary.inv to white text without resetting it, so the
   phone-number button renders white-on-white on the blue band (1.13:1) until
   hover, which never fires on a touch device. Every other page stylesheet on
   the site carries this patch; this page was missing it. */
.theme-corporate .cta-band .btn-secondary,
.theme-corporate .cta-band .btn-secondary.inv { background: transparent; }
.theme-corporate .cta-band .btn-secondary.inv:hover { background: rgba(255, 255, 255, 0.1); }

/* ====================  RESPONSIVE  ====================
   responsive.css handles the sitewide chrome; these are the page's own
   grids. Kept here so the shared file stays untouched. */
@media (max-width: 1100px) {
  .cap-grid    { grid-template-columns: repeat(2, 1fr); }
  .shapes-grid { grid-template-columns: repeat(2, 1fr); }
  .shape:nth-child(odd) { border-left: var(--border-width) solid var(--card-border); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .show-band-inner { gap: 10px; }
  .proof-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .cap-grid     { grid-template-columns: 1fr; }
  .shapes-grid  { grid-template-columns: 1fr; }
  .shape        { border-left: var(--border-width) solid var(--card-border); }
  .process-grid { grid-template-columns: 1fr; }
  .cap          { padding: 28px 24px; }
}