/* Shared typographic patterns */

.eyebrow{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,18,15,.45);margin-bottom:20px}
.eyebrow-dark{font-family:var(--dd-font-ui);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,248,244,.45);margin-bottom:20px}
.eyebrow-orange{font-family:var(--dd-font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-signal-4)}

.h1{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h1);line-height:1;letter-spacing:-.035em;margin:0 0 24px}
.h2{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h2);line-height:1.02;letter-spacing:-.032em;margin:0}
.h3{font-family:var(--dd-font-display);font-weight:600;font-size:var(--dd-h3);letter-spacing:-.02em;margin:0 0 12px}

.lede{font-family:var(--dd-font-grotesk);font-size:19px;line-height:1.6;color:var(--dd-ink-soft);margin:0}
.lede-dark{font-family:var(--dd-font-grotesk);font-size:19px;line-height:1.6;color:rgba(251,248,244,.68);margin:0}

.gradient-text{background:var(--dd-gradient-text);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text-static{background:linear-gradient(120deg,var(--dd-signal-1),var(--dd-signal-4));-webkit-background-clip:text;background-clip:text;color:transparent}
.gradient-text-anim{background:linear-gradient(115deg,var(--dd-signal-1),var(--dd-signal-2),var(--dd-signal-4),var(--dd-signal-1));background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ddgradient 5s ease-in-out infinite}

/* Careers-page headings that share the exact clamp(38px,4vw,56px) base in the approved
   design are the only h2s that get a distinct, tighter mobile-only size (source rule
   matched that literal value, not every h2) — everything else just rides its own clamp(). */
.h2-compact{font-size:clamp(38px,4vw,56px)}

@media (max-width:560px){
  /* !important: several h1/h2 instances also carry an inline font-size (their normal,
     correct desktop value) which — being inline — would otherwise always beat this rule. */
  .h1{font-size:clamp(34px,9vw,50px)!important}
  .h2-compact{font-size:clamp(26px,7.4vw,40px)!important}
}

/* ===========================================================================
   PER-PAGE H1 SCALE — design-fidelity pass against the Claude Design export.

   The export does not use one page-heading size. Professional Learning runs a
   larger display scale, Careers sits between it and the default, and Contact
   runs smaller. The default (--dd-h1) already matches Programs, Corporate,
   Curriculum, Gallery and Insights, so only the three exceptions are declared.

   Scoped to the page wrapper class dd_page_open() already emits, so this needs
   no markup change and no Elementor control.
   =========================================================================== */
.dd-page-professional-learning .h1{font-size:var(--dd-h1-dark);line-height:.98}
.dd-page-careers .h1{font-size:clamp(46px,5.4vw,80px);line-height:1}
.dd-page-contact .h1{font-size:clamp(44px,4.6vw,68px);line-height:1.02}

/* The export sets the page heading in full-strength ink (paper on the dark
   Professional Learning page). Without this it inherits the muted body colour
   from its section, which reads as a washed-out heading. */
.h1{color:var(--dd-ink)}
.dd-page-professional-learning .h1,
.section-slate .h1,
.dd-editorial.on-dark .h1{color:var(--dd-paper)}

/* Heading measures for the three pages whose hero is a dedicated section rather
   than the shared page header. Values read off the export. */
.dd-page-professional-learning .h1{max-width:16ch}
.dd-page-corporate-training .h1{max-width:16ch}
.dd-page-careers .h1{max-width:17ch}

/* These match the specificity of .page-hero-intro h1.h1 in editorial-blocks.css, which
   would otherwise impose a single 18ch measure on every page hero. */
.dd-page-professional-learning .page-hero-intro h1.h1{max-width:16ch}
.dd-page-corporate-training .page-hero-intro h1.h1{max-width:16ch}
.dd-page-careers .page-hero-intro h1.h1{max-width:17ch}

/* The two hero ledes the export sets a tighter leading and a narrower measure on. */
.dd-page-professional-learning .page-hero-intro .lede-dark{line-height:1.62;max-width:620px}
.dd-page-careers .page-hero-intro .lede{line-height:1.62;max-width:640px}

@media (max-width:560px){
  /* The export's hero headings are unconstrained on phones — the ch measures only bind at
     the larger display sizes. Releasing them here stops headings wrapping a word early. */
  .page-hero-intro h1.h1,
  .dd-page-professional-learning .page-hero-intro h1.h1,
  .dd-page-corporate-training .page-hero-intro h1.h1,
  .dd-page-careers .page-hero-intro h1.h1{max-width:100%}
}