/* ==========================================================================
   HEG — Base
   Element defaults, layout primitives and shared utilities.
   Depends on tokens.css. Named page blocks live in components.css.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

/* .heg-bleed and the coming-soon page are 100vw wide, and on any platform with
   a classic scrollbar 100vw is wider than the page, so the whole site scrolled
   sideways by the width of the scrollbar. Clipping has to be declared on the
   root: on `body` alone it does not reach the viewport. `clip` rather than
   `hidden` because `hidden` would turn the root into a scroll container and
   break the sticky header. */
html { overflow-x: clip; }

body {
  overflow-x: clip;
  font-family: var(--heg-body);
  font-size: var(--heg-fs-body);
  font-weight: var(--heg-fw-normal);
  line-height: var(--heg-lh-body);
  color: var(--heg-ink);
  background: var(--heg-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--heg-gold); color: var(--heg-navy); }

/* --- Headings ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heg-display);
  font-weight: var(--heg-fw-display);
  line-height: var(--heg-lh-heading);
  letter-spacing: var(--heg-ls-display);
  color: var(--heg-ink);
  margin: 0 0 var(--heg-s-4);
  text-wrap: balance;   /* avoids a single orphaned word on the last line */
}

h1 { font-size: var(--heg-fs-h1); line-height: var(--heg-lh-tight); }
h2 { font-size: var(--heg-fs-h2); }
h3 { font-size: var(--heg-fs-h3); }
h4 { font-size: var(--heg-fs-h4); font-family: var(--heg-body); font-weight: var(--heg-fw-semi);
     letter-spacing: 0; }

p { margin: 0 0 var(--heg-s-4); max-width: var(--heg-measure); }
p:last-child { margin-bottom: 0; }

/* --- Links ---------------------------------------------------------------- */

a {
  color: var(--heg-gold-ink);
  text-decoration: none;
  transition: color var(--heg-dur) var(--heg-ease);
}
a:hover { color: var(--heg-gold); }

/* --- Focus ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--heg-focus);
  outline-offset: 3px;
  border-radius: var(--heg-radius);
}

/* --- Media ---------------------------------------------------------------- */

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.heg-container {
  width: 100%;
  max-width: var(--heg-container);
  margin-inline: auto;
  padding-inline: var(--heg-gutter);
}

.heg-container--narrow { max-width: var(--heg-container-narrow); }

.heg-section { padding-block: var(--heg-space-section); }

/* Full-bleed escape from a constrained parent (e.g. an Elementor container) */
.heg-bleed {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
}

/* --- Section grounds ------------------------------------------------------ */

.heg-section--cream { background: var(--heg-bg-alt); }
.heg-section--navy  { background: var(--heg-bg-dark); }

.heg-section--navy,
.heg-section--navy p { color: var(--heg-on-dark-muted); }
.heg-section--navy h1,
.heg-section--navy h2,
.heg-section--navy h3,
.heg-section--navy h4 { color: var(--heg-on-dark); }

/* ==========================================================================
   Typographic utilities
   ========================================================================== */

/* Small letterspaced label above a heading — echoes the logo lockup.
   max-width matters: an eyebrow is a label, not prose, so it must not inherit
   the 68ch measure `p` carries. It did, which left the box narrower than its
   container — so inside a centred block the text centred itself inside that
   narrow box and sat well left of the heading above it. */
.heg-eyebrow {
  font-family: var(--heg-body);
  font-size: var(--heg-fs-eyebrow);
  font-weight: var(--heg-fw-medium);
  letter-spacing: var(--heg-ls-eyebrow);
  text-transform: uppercase;
  color: var(--heg-gold-ink);
  max-width: none;
  margin: 0 0 var(--heg-s-3);
}
.heg-section--navy .heg-eyebrow { color: var(--heg-gold); }

/* Letter-spacing is added after the last glyph as well as between glyphs, and
   that trailing space is part of the line box. Centring the line box therefore
   leaves one extra space of air on the right, and the letters read half a space
   left of true centre. Measured at 1.4px here. Padding the leading edge by one
   full letter-space cancels it on every line, wrapped lines included. */
.heg-center .heg-eyebrow,
.heg-hero__eyebrow,
.heg-pagehead__eyebrow,
.heg-sechead .heg-eyebrow,
.heg-philosophy__statement .heg-eyebrow { padding-inline-start: var(--heg-ls-eyebrow); }

.heg-lead {
  font-size: var(--heg-fs-lead);
  font-weight: var(--heg-fw-light);
  line-height: 1.6;
  color: var(--heg-ink-muted);
}
.heg-section--navy .heg-lead { color: var(--heg-on-dark-muted); }

/* Thin gold rule, as used beneath the wordmark */
.heg-rule {
  width: 4rem;
  height: var(--heg-hairline);
  background: var(--heg-gold);
  border: 0;
  margin: var(--heg-s-5) 0;
}
.heg-rule--center { margin-inline: auto; }

.heg-center { text-align: center; }
.heg-center p,
.heg-center .heg-lead,
.heg-center .heg-rule { margin-inline: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.heg-btn {
  display: inline-block;
  font-family: var(--heg-body);
  font-size: var(--heg-fs-sm);
  font-weight: var(--heg-fw-semi);
  letter-spacing: var(--heg-ls-button);
  text-transform: uppercase;
  line-height: 1;
  padding: 1.05em 2.2em;
  border: var(--heg-hairline) solid transparent;
  border-radius: var(--heg-radius);
  cursor: pointer;
  transition: background-color var(--heg-dur) var(--heg-ease),
              color var(--heg-dur) var(--heg-ease),
              border-color var(--heg-dur) var(--heg-ease),
              transform var(--heg-dur) var(--heg-ease);
}
.heg-btn:hover { transform: translateY(-1px); }
.heg-btn:active { transform: translateY(0); }

/* Primary — the "Book a Conversation" CTA */
.heg-btn--gold {
  background: var(--heg-gold);
  border-color: var(--heg-gold);
  color: var(--heg-navy);
}
.heg-btn--gold:hover {
  background: var(--heg-gold-light);
  border-color: var(--heg-gold-light);
  color: var(--heg-navy);
}

/* Secondary on light grounds */
.heg-btn--outline {
  background: transparent;
  border-color: var(--heg-navy);
  color: var(--heg-navy);
}
.heg-btn--outline:hover {
  background: var(--heg-navy);
  color: var(--heg-cream);
}

/* Secondary on navy grounds */
.heg-btn--ghost {
  background: transparent;
  border-color: var(--heg-border-on-dark);
  color: var(--heg-on-dark);
}
.heg-btn--ghost:hover {
  border-color: var(--heg-gold);
  color: var(--heg-gold);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.heg-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* Anchored sections must clear the sticky header (Services deep links) */
:target { scroll-margin-top: 6rem; }