/* Elements - Typography Start */
/* ------------------------------------------------*/

:root {
  /* ==================================================
     Fluid Type Scale
     Purpose:
     - Keeps headings expressive on desktop
     - Keeps text readable on mobile
     - Supports DBETA’s engineered / structured visual system
  ================================================== */

  --fs-h1: clamp(4.8rem, 1.5rem + 6vw, 8rem);
  --fs-h1-small: clamp(3.4rem, 1.2rem + 5vw, 9rem);

  --fs-h2: clamp(3.8rem, 1.2rem + 4.5vw, 8rem);
  --fs-h2-small: clamp(2.6rem, 1rem + 3.8vw, 6rem);
  --fs-h2-large: clamp(3.8rem, 1.8rem + 6vw, 12rem);

  --fs-h3: clamp(2.2rem, 1.6rem + 1.5vw, 7rem);
  --fs-h4: clamp(2.0rem, 1.6rem + 1vw, 3rem);
  --fs-h5: clamp(1.8rem, 1.5rem + 0.8vw, 3.4rem);
  --fs-h5-small: clamp(1.4rem, 1.2rem + 0.3vw, 1.8rem);
  --fs-h6: clamp(1.8rem, 1.4rem + 0.8vw, 3rem);

  --fs-body: clamp(1.6rem, 1.4rem + 0.5vw, 2.2rem);
  --fs-body-xsmall: clamp(1.3rem, 1.2rem + 0.1vw, 1.4rem);
  --fs-body-small: clamp(1.4rem, 1.3rem + 0.2vw, 1.8rem);
  --fs-body-small-mobile: clamp(1.5rem, 1.3rem + 0.4vw, 2.1rem);
  --fs-body-large: clamp(2.0rem, 1.6rem + 0.9vw, 3rem);

  --fs-point-subtitle: clamp(1.6rem, 1.4rem + 0.5vw, 2.2rem);
  --fs-manifest: clamp(2.2rem, 1.8rem + 1.6vw, 4.4rem);

  --fs-stats: clamp(4.5rem, 2rem + 5vw, 12rem);
  --fs-stats-small: clamp(3.5rem, 1.8rem + 3.5vw, 7rem);
  --fs-stats-xsmall: clamp(3.0rem, 2rem + 1.5vw, 5rem);

  /* Shared card / list-item title — one fluid curve so cards match site-wide. */
  --fs-card-title: clamp(1.8rem, 1.4rem + 1.2vw, 3rem);

  /* ── Compatibility aliases ──────────────────────────────────────────────
     Several templates (insight / case-study / team / search / error pages,
     People & Services indexes) were authored against token families that were
     never defined in the loaded CSS, so their headings fell back to the base
     element and snapped to the 8rem H2 cap. Alias them onto the real fluid
     scale so those pages size on the same system as everything else. */
  --text-xs:   var(--fs-body-xsmall);
  --text-sm:   var(--fs-body-small);
  --text-base: var(--fs-body);
  --text-lg:   var(--fs-body-large);
  --text-xl:   var(--fs-h5);
  --text-2xl:  var(--fs-h4);
  --text-3xl:  var(--fs-h3);
  --text-4xl:  var(--fs-h2-small);
  --text-6xl:  var(--fs-h1);

  --weight-normal:    var(--fw-regular);
  --weight-medium:    var(--fw-medium);
  --weight-semibold:  var(--fw-semibold);
  --weight-bold:      var(--fw-bold);
  --weight-extrabold: var(--fw-bold);

  --radius-md:   var(--_radius-m);
  --radius-lg:   var(--_radius-l);
  --radius-xl:   var(--_radius-xl);
  --radius-full: 999px;

  /* Small intra-component spacing scale (fixed rem is fine at this level). */
  --space-1:  0.4rem;
  --space-2:  0.8rem;
  --space-3:  1.2rem;
  --space-4:  1.6rem;
  --space-5:  2.0rem;
  --space-6:  2.4rem;
  --space-8:  3.2rem;
  --space-10: 4.0rem;
  --space-12: 4.8rem;
  --space-16: 6.4rem;
}

/* ==================================================
   Headings
   Purpose:
   - Funnel Display gives DBETA sharper brand presence
   - Tight tracking supports the engineered visual direction
================================================== */

h1 {
  font: normal var(--fw-medium) var(--fs-h1)/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

h1.h1-small {
  font-size: var(--fs-h1-small);
}

.typed-cursor {
  color: var(--accent);
}

h2 {
  font: normal var(--fw-medium) var(--fs-h2)/1.1 var(--_font-accent);
  letter-spacing: -0.06rem;
  color: var(--t-bright);
}

h2.opposite {
  color: var(--t-opp-bright);
}

h2.permanent-light {
  color: var(--pt-t-light-bright);
}

h2.permanent-dark {
  color: var(--pt-t-dark-bright);
}

h2.h2-small {
  font-size: var(--fs-h2-small);
}

h2.h2-large {
  font-size: var(--fs-h2-large);
}

.fs_7 {
  font-size: var(--fs-h2-small);
}

/* Bootstrap-style heading utility classes — used where an h2/h3 element carries
   a smaller visual role (service + people cards). Map to the fluid scale so they
   don't inherit the base element's size and balloon. */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.h5 { font-size: var(--fs-h5); }
.h6 { font-size: var(--fs-h6); }

h3 {
  font: normal var(--fw-medium) var(--fs-h3)/1.2 var(--_font-accent);
  letter-spacing: -0.03em;
  color: var(--t-bright);
}

h3.opposite {
  color: var(--t-opp-bright);
}

.fs_2_4 {
  font: normal var(--fw-medium) var(--fs-card-title)/1.2 var(--_font-accent);
  color: var(--t-bright);
}

h4 {
  font: normal var(--fw-medium) var(--fs-h4)/1.2 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-bright);
}

h5 {
  font: normal var(--fw-medium) var(--fs-h5)/1.2 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-bright);
}

h5 small {
  display: block;
  margin-top: 0.2rem;
  font: normal var(--fw-regular) var(--fs-h5-small)/1.2 var(--_font-default);
  color: var(--t-medium);
}

h5 a {
  color: var(--t-bright);
}

h5.opposite,
h5.opposite a {
  color: var(--t-opp-bright);
}

.fs_3 {
  font-size: var(--fs-h4);
}

h6 {
  font: normal var(--fw-medium) var(--fs-h6)/1.2 var(--_font-accent);
  letter-spacing: -0.01em;
  color: var(--t-bright);
}

h6 a {
  color: var(--t-bright);
}

h6.opposite,
h6.opposite a {
  color: var(--t-opp-bright);
}

/* ==================================================
   Paragraphs
   Purpose:
   - Funnel Sans is used for readability
   - Funnel Display is reserved for headings and brand statements
================================================== */

p {
  font: normal var(--fw-regular) var(--fs-body)/1.6 var(--_font-default);
  color: var(--t-medium);
}


p span {
  font-weight: var(--fw-semibold);
}





p.t-120 {
  line-height: 1.2;
}

p.t-140 {
  line-height: 1.4;
}

p.t-xsmall {
  font-size: var(--fs-body-xsmall);
  line-height: 1.2;
}

p.t-small {
  font-size: var(--fs-body-small);
}

p.t-small-mobile {
  font-size: var(--fs-body-small-mobile);
}

/* Large paragraph / intro text */
p.t-large {
  font-family: var(--_font-accent);
  font-size: var(--fs-body-large);
  line-height: 1.35;
  color: var(--t-bright);
}

p.t-caption {
  line-height: 1.4;
  font-weight: var(--fw-medium);
}

p.t-muted {
  color: var(--t-muted);
}

p.t-muted span {
  color: var(--t-medium);
}




p.t-opposite,
li.t-opposite {
  color: var(--t-opp-bright);
}

p.t-opposite-medium {
  color: var(--t-opp-medium);
}



p.t-bright {
  color: var(--t-bright);
}

p.t-bright.opposite {
  color: var(--t-opp-bright);
}

p.t-medium {
  font-weight: var(--fw-medium);
}

p.t-semibold,
.t-semibold {
  font-weight: var(--fw-semibold);
}

/* ==================================================
   Point Subtitle
   Purpose:
   - Used for small section labels / directional text
   - Works with icon + label patterns
================================================== */

.db-point-subtitle {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 1rem;
  font: normal var(--fw-medium) var(--fs-point-subtitle)/1.2 var(--_font-default);
  color: var(--t-bright);
}

.db-point-subtitle svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: var(--accent);
}

.db-point-subtitle span {
  font-weight: var(--fw-medium);
}

.db-point-subtitle a {
  color: var(--t-bright);
  background: none;
}

.no-touch .db-point-subtitle:hover a {
  color: var(--accent);
}

/* ==================================================
   Manifest / Brand Statement
   Purpose:
   - Larger editorial statements
   - Uses Funnel Display for brand impact
================================================== */

.db-manifest {
  font: normal var(--fw-regular) var(--fs-manifest)/1.6 var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 1600px) {
  .db-manifest {
    max-width: 855px;
  }

  .db-manifest.db-manifest-l {
    max-width: none;
  }
}

/* ==================================================
   Stats Numbers
   Purpose:
   - Large numeric display
   - Strong visual hierarchy for proof / metrics
================================================== */

.db-stats-number {
  font: normal var(--fw-medium) var(--fs-stats)/0.8 var(--_font-accent);
  color: var(--t-bright);
  letter-spacing: -0.1rem;
}

.db-stats-number.opposite {
  color: var(--t-opp-bright);
}

.db-stats-number.small {
  font-size: var(--fs-stats-small);
}

.db-stats-number.xsmall {
  font-size: var(--fs-stats-xsmall);
}

/* ------------------------------------------------*/
/* Elements - Typography End */
/* ------------------------------------------------*/