/* ============================================================
   Brand heading font — declared here (the shared dependency of every ESK
   component stylesheet) so any component renders the real font no matter
   which page it lands on.
   ============================================================ */
@font-face {
  font-family: 'niveaugroteskregular';
  src: url('fonts/NiveauGroteskRegular.woff2') format('woff2'),
       url('fonts/NiveauGroteskRegular.woff') format('woff'),
       url('fonts/NiveauGroteskRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   ESK DESIGN TOKENS — typography scale for all esk-* components.
   Edit here once; every section follows.
   Tiers:
     display : statement sections (TRUST / EXPERTS / WAYS TO BUILD)
     h2      : standard section titles
     h3      : panel / featured names
     subhead : uppercase sub-lines under display titles
     lead    : intro paragraphs under headings
     kicker  : small uppercase eyebrows
   ============================================================ */
:root {
  /* brand */
  --esk-orange: #e36745;
  --esk-blue: #022450;

  /* type scale (fluid) — two deliberate tiers (Phaedra-level presence,
     Esketchers voice). Every display heading shares ONE token; every
     standard section heading shares ONE token. */
  --esk-display: clamp(72px, 10vw, 160px);
  --esk-display-lh: 0.88;
  --esk-display-ls: normal;

  /* ALL section headings punch at display scale (user call, 2026-07-14):
     h2 tier aliases the display tier. To give long headlines a calmer
     size again, replace these aliases with real values. */
  --esk-h2: var(--esk-display);
  --esk-h2-lh: 0.95;
  --esk-h2-ls: var(--esk-display-ls);

  --esk-h3: clamp(26px, 2.8vw, 42px);
  --esk-h3-lh: 1.12;

  --esk-subhead: clamp(20px, 2.3vw, 32px);
  --esk-subhead-lh: 1.1;

  --esk-lead: clamp(17px, 1.3vw, 20px);
  --esk-lead-lh: 1.55;

  --esk-kicker: clamp(13px, 1vw, 16px);
  --esk-kicker-ls: 0.15em;

  /* rhythm */
  --esk-section-pad: clamp(56px, 7.5vh, 104px);
  --esk-gap-title-lead: clamp(14px, 1.8vh, 22px);
  --esk-gap-head-content: clamp(30px, 4.5vh, 52px);
}

/* ============================================================
   HEADING COLOR SYSTEM (page-wide rules)
   1. Kicker: orange caps — the "start here" signal.
   2. Hero: navy #022450; at most ONE phrase in solid orange.
      Never a fully-orange hero.
   3. Support: navy.
   4. Orange full-stop closes the last line of every stack.
   5. Animation budget: ONE animated gradient page-wide — the
      "Esketchers" brand name (Why Choose). Everything else static.
   ============================================================ */

/* ============================================================
   MOBILE OVERRIDES — tighter rhythm + right-sized type on phones.
   Every section inherits these automatically.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --esk-display: clamp(36px, 10.4vw, 54px); /* 10.4vw = widest hero ('IDEAS, UPDATES') fits one line on phones -> ALL heroes share this exact size */
    --esk-h2: var(--esk-display);
    --esk-h3: clamp(22px, 6vw, 28px);
    --esk-subhead: clamp(17px, 4.6vw, 22px);
    --esk-lead: clamp(15px, 4.2vw, 17px);
    --esk-kicker: clamp(12px, 3.4vw, 14px);
    --esk-section-pad: clamp(36px, 9vw, 48px);
    --esk-gap-head-content: clamp(22px, 6vw, 32px);
  }
}

/* ============================================================
   HOMEPAGE-SCOPED (page-id-24120) — uniform paragraph size. Every body-copy
   <p> in the page content renders at 18px regardless of component (sections
   were mixing 14–20px). Excluded: heading-slot paragraphs (C4 support lines
   and kickers) which carry the shared heading specs, not body copy. Scoped
   to #content so site header/footer are untouched, and to the homepage body
   class so other pages keep component defaults.
   ============================================================ */
.page-id-24120 #content p:not(.eskwb__sub):not(.esktr__sub):not(.eskw__kicker):not(.eskt__sub):not(.eski__sub):not(.esk-st__sub) {
  font-size: 18px !important;
}

/* ============================================================
   HOMEPAGE-SCOPED (page-id-24120) — MOBILE section rhythm. The non-token
   sections (How We Work, Five Stages, Proof, FAQ) keep their own larger
   mobile padding (56-72px); on phones every section should share the token
   rhythm (36-48px). Mobile-only, other pages untouched.
   ============================================================ */
@media (max-width: 767px) {
  .page-id-24120 .esk-hw {
    padding-top: var(--esk-section-pad, clamp(36px, 9vw, 48px)) !important;
    padding-bottom: var(--esk-section-pad, clamp(36px, 9vw, 48px)) !important;
  }
  /* Outcomes: outer padding tightens to the same rhythm on phones. */
  .page-id-24120 .esko {
    padding-top: var(--esk-section-pad, clamp(36px, 9vw, 48px)) !important;
    padding-bottom: var(--esk-section-pad, clamp(36px, 9vw, 48px)) !important;
    padding-left:0px !important;
    padding-right:0px !important;
  }
}