/* ==========================================================================
   DMT - base typography and layout primitives
   Loaded after tokens.css, before components.css.
   ========================================================================== */

/* Border-box everywhere. Hello Elementor and Elementor both set this, but the
   component system must not depend on them doing so: without it any padded box
   given a height (the hero image slot, the embed frame) overflows its parent by
   the size of its own padding. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--dmt-grey);
  color: var(--dmt-text-body);
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-body);
  line-height: var(--dmt-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Push page content clear of the fixed header. */
body.dmt-has-fixed-header { padding-top: var(--dmt-header-h); }

/* --- Headings. Sentence case, never title case. ------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dmt-font-display);
  color: var(--dmt-text);
  margin: 0 0 var(--dmt-space-4);
  text-wrap: pretty;
}

h1 { font-size: var(--dmt-h1); line-height: var(--dmt-h1-lh); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: var(--dmt-h2); line-height: var(--dmt-h2-lh); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: var(--dmt-h3); line-height: var(--dmt-h3-lh); font-weight: 600; letter-spacing: 0; }
h4, h5, h6 { font-size: var(--dmt-h3); line-height: var(--dmt-h3-lh); font-weight: 600; }

p { margin: 0 0 var(--dmt-space-3); max-width: var(--dmt-measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--dmt-green); text-underline-offset: 3px; }

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

/* --- Type utilities ------------------------------------------------------ */
.dmt-eyebrow {
  display: block;
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-eyebrow);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dmt-olive);
  margin: 0 0 var(--dmt-space-2);
}
.dmt-eyebrow--on-navy { color: var(--dmt-olive); }

.dmt-label {
  display: block;
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-label);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dmt-olive);
  margin: 0 0 var(--dmt-space-2);
}

.dmt-lead {
  font-size: var(--dmt-lead);
  line-height: var(--dmt-lead-lh);
  max-width: var(--dmt-measure);
}

.dmt-small { font-size: var(--dmt-small); line-height: var(--dmt-body-lh); }
.dmt-meta  { font-family: var(--dmt-font-mono); font-size: var(--dmt-meta); line-height: 1.5; color: var(--dmt-text-meta); }

/* --- Sections and containers -------------------------------------------- */
.dmt-section { padding: var(--dmt-section-y) var(--dmt-gutter); }
.dmt-section--air { padding-top: var(--dmt-space-7); padding-bottom: var(--dmt-space-7); }
.dmt-section--flush { padding-left: 0; padding-right: 0; }

.dmt-section--grey  { background: var(--dmt-grey);  color: var(--dmt-text-body); }
.dmt-section--white { background: var(--dmt-white); color: var(--dmt-text-body); }

.dmt-section--navy { background: var(--dmt-navy); color: var(--dmt-on-navy-body); }
.dmt-section--navy h1,
.dmt-section--navy h2,
.dmt-section--navy h3,
.dmt-section--navy h4 { color: var(--dmt-on-navy); }
.dmt-section--navy .dmt-meta { color: var(--dmt-on-navy-meta); }

.dmt-wrap { max-width: var(--dmt-max); margin-inline: auto; width: 100%; }

/* --- Grids -------------------------------------------------------------- */
.dmt-grid { display: grid; gap: var(--dmt-gap-card); }
.dmt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dmt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dmt-grid--4 { grid-template-columns: repeat(4, 1fr); }

.dmt-split { display: grid; gap: var(--dmt-gap-column); align-items: start; }
.dmt-split--heading { grid-template-columns: .8fr 1.6fr; }
.dmt-split--hero    { grid-template-columns: 1.15fr .85fr; gap: 0; align-items: stretch; }
.dmt-split--portrait{ grid-template-columns: .9fr 1.1fr; align-items: center; }

@media (max-width: 1023px) { /* tablet */
  .dmt-grid--3, .dmt-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dmt-split, .dmt-split--heading, .dmt-split--hero, .dmt-split--portrait {
    grid-template-columns: 1fr;
    gap: var(--dmt-space-5);
  }
  /* Split heroes stack image above copy. */
  .dmt-split--hero > .dmt-hero-media { order: -1; }
}

@media (max-width: 767px) { /* mobile */
  .dmt-grid--2, .dmt-grid--3, .dmt-grid--4 { grid-template-columns: 1fr; }
}

/* --- Focus. Never remove these. ----------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--dmt-olive);
  outline-offset: 3px;
}
.dmt-section--navy a:focus-visible,
.dmt-section--navy button:focus-visible,
.dmt-header a:focus-visible,
.dmt-header button:focus-visible,
.dmt-footer a:focus-visible,
.dmt-mobile-menu a:focus-visible,
.dmt-mobile-menu button:focus-visible {
  outline-color: var(--dmt-green);
}

.dmt-skip-link {
  position: fixed;
  top: var(--dmt-space-1);
  left: var(--dmt-space-1);
  z-index: 9999;
  background: var(--dmt-navy);
  color: var(--dmt-on-navy);
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-button);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 14px 20px;
  text-decoration: none;
  transform: translateY(-200%);
}
.dmt-skip-link:focus {
  transform: none;
  outline: 2px solid var(--dmt-olive);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}