/* ==========================================================================
   Desert Mirage — theme layer over Bootstrap 5.3
   Palette: sand #C2B280 · terracotta #E35336 · sage #98A869 · navy #272757
   Contrast note: terracotta #E35336 only reaches 3.5–3.8:1, so it is used for
   fills, rules and large elements only. #B33319 (--dm-rust) is the derived
   text-safe shade — 6.17:1 on white, 5.77:1 on paper.
   ========================================================================== */

:root {
  /* Brand, exact */
  --dm-sand: #c2b280;
  --dm-terracotta: #e35336;
  --dm-sage: #98a869;
  --dm-navy: #272757;

  /* Derived */
  --dm-rust: #b33319;
  --dm-rust-dark: #8f2914;
  --dm-paper: #faf7f0;
  --dm-paper-sunk: #f3eee3;
  --dm-sand-faint: #f5f0e2;
  --dm-sage-soft: #e2e8d5;
  --dm-navy-deep: #1e1e45;
  --dm-ink: #272757;
  --dm-ink-muted: #55557a;
  --dm-rule: #ded6c5;
  --dm-rule-soft: #eae3d4;

  /* Type */
  --dm-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --dm-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --dm-section-y: 5.5rem;
  --dm-radius: 4px;

  /* Bootstrap overrides */
  --bs-body-bg: var(--dm-paper);
  --bs-body-color: var(--dm-ink);
  --bs-body-font-family: var(--dm-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.65;
  --bs-border-color: var(--dm-rule);
  --bs-link-color: var(--dm-rust);
  --bs-link-hover-color: var(--dm-rust-dark);
  /* Bootstrap builds `a` from rgba(var(--bs-link-color-rgb), …); without
     these the two lines above are a silent no-op and links stay blue. */
  --bs-link-color-rgb: 179, 51, 25;
  --bs-link-hover-color-rgb: 143, 41, 20;
  --bs-emphasis-color: var(--dm-ink);
  --bs-secondary-color: var(--dm-ink-muted);
  --bs-focus-ring-color: rgba(179, 51, 25, 0.45);
  --bs-focus-ring-width: 3px;
}

@media (min-width: 992px) {
  :root { --dm-section-y: 7rem; }
}

/* 5.5rem top and bottom stacks to 176px of empty band between sections
   on a phone, which reads as broken rather than airy. */
@media (max-width: 575.98px) {
  :root { --dm-section-y: 3.75rem; }
}

/* --------------------------------------------------------------- base --- */

/* Bootstrap's default 12px container padding is tight on a phone */
@media (max-width: 575.98px) {
  .container { padding-inline: 1.25rem; }
}

/* Without this, tabbing or jumping to an anchor parks the target flush to
   the viewport edge, where the sticky navbar (or the fixed mobile bar)
   covers it — WCAG 2.4.11. */
html { scroll-padding-top: 4.75rem; }

@media (max-width: 991.98px) {
  html { scroll-padding-bottom: 5.5rem; }
}

body {
  background-color: var(--dm-paper);
  color: var(--dm-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Room for the fixed mobile bar */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}

h1, h2, h3, h4, h5, h6, .dm-serif {
  font-family: var(--dm-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--dm-ink);
}

p { margin-bottom: 1rem; }
strong { font-weight: 600; }

a { text-underline-offset: 0.18em; }

/* One visible focus style everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--dm-rust);
  outline-offset: 3px;
  box-shadow: none;
}

/* <main> is focusable only so the skip link lands in it (Safari does not
   move focus on its own). Inset the ring so it isn't a box round the page. */
main[tabindex="-1"]:focus-visible {
  outline: 2px dashed var(--dm-rust);
  outline-offset: -6px;
}

/* Bootstrap focuses the offcanvas panel itself when it opens; it is not a
   control, and the ring would sit half off-screen. */
.offcanvas:focus-visible { outline: none; }

/* Flush to the bottom edge — an outset ring is cut off */
.dm-bottombar a:focus-visible { outline-offset: -3px; }

.dm-skip {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 2000;
  padding: 0.7rem 1.1rem;
  background: var(--dm-navy);
  color: #fff;
  font-weight: 600;
  border-radius: var(--dm-radius);
  transition: top 0.15s ease;
}
.dm-skip:focus { top: 1rem; color: #fff; }

.dm-section { padding-block: var(--dm-section-y); }
.dm-section--sunk { background: var(--dm-paper-sunk); }
.dm-section--sand { background: var(--dm-sand-faint); }

/* -------------------------------------------------------- type helpers --- */

.dm-eyebrow {
  display: inline-block;
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dm-rust);
  margin-bottom: 0.85rem;
}

.dm-eyebrow--navy { color: var(--dm-navy); }

.dm-lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--dm-ink-muted);
}

.dm-muted { color: var(--dm-ink-muted); }

.dm-mono {
  font-family: var(--dm-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dm-section-head {
  max-width: 44rem;
  margin-bottom: 3rem;
}

.dm-section-head h2 {
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.dm-rule {
  border: 0;
  border-top: 2px solid var(--dm-terracotta);
  width: 3.5rem;
  opacity: 1;
  margin: 0 0 1.75rem;
}

/* -------------------------------------------------------------- navbar --- */

/* Opaque, not glass: a translucent bar smears the page content sliding
   under it, and the sticky header sits over dense screenshots. */
.dm-navbar {
  background: var(--dm-paper);
  border-bottom: 1px solid var(--dm-rule-soft);
  padding-block: 0.85rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dm-navbar.is-scrolled {
  border-bottom-color: var(--dm-rule);
  box-shadow: 0 1px 14px rgba(39, 39, 87, 0.07);
}

.dm-wordmark {
  font-family: var(--dm-serif);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--dm-ink);
  text-decoration: none;
  white-space: nowrap;
}

.dm-wordmark:hover { color: var(--dm-rust); }

.dm-navbar .nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--dm-ink-muted);
  padding-inline: 0.9rem;
  position: relative;
}

.dm-navbar .nav-link:hover { color: var(--dm-ink); }

.dm-navbar .nav-link.active {
  color: var(--dm-ink);
  font-weight: 600;
}

@media (min-width: 992px) {
  .dm-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -0.3rem;
    height: 2px;
    background: var(--dm-terracotta);
  }
}

.navbar-toggler {
  border: 1px solid var(--dm-rule);
  border-radius: var(--dm-radius);
  padding: 0.65rem 0.7rem;
  min-height: 44px;
  display: grid;
  place-items: center;
}

.dm-burger { display: block; width: 20px; }
.dm-burger span {
  display: block;
  height: 2px;
  background: var(--dm-ink);
  border-radius: 2px;
}
.dm-burger span + span { margin-top: 5px; }

/* Slide-out panel styling — must stay below the navbar-expand breakpoint,
   or it leaks into the horizontal desktop nav. */
@media (max-width: 991.98px) {
  .dm-offcanvas {
    background: var(--dm-paper);
    border-left: 1px solid var(--dm-rule);
    width: min(20rem, 84vw);
  }

  .dm-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--dm-rule-soft);
    padding: 1.15rem 1.25rem;
  }

  .dm-offcanvas .nav-link {
    padding: 0.7rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--dm-rule-soft);
  }

  .dm-offcanvas .nav-link.active { color: var(--dm-rust); }

  .dm-offcanvas-foot {
    margin-top: 1.75rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--dm-rule-soft);
  }

  .dm-nav-cta { margin-top: 1.15rem; }
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  --bs-btn-font-family: var(--dm-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-border-radius: var(--dm-radius);
  letter-spacing: 0.005em;
}

.btn-primary {
  --bs-btn-bg: var(--dm-rust);
  --bs-btn-border-color: var(--dm-rust);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--dm-rust-dark);
  --bs-btn-hover-border-color: var(--dm-rust-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--dm-rust-dark);
  --bs-btn-active-border-color: var(--dm-rust-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--dm-rust);
  --bs-btn-disabled-border-color: var(--dm-rust);
}

.btn-outline-ink {
  --bs-btn-color: var(--dm-ink);
  --bs-btn-border-color: var(--dm-ink);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--dm-ink);
  --bs-btn-hover-border-color: var(--dm-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--dm-ink);
  --bs-btn-active-border-color: var(--dm-ink);
  --bs-btn-active-color: #fff;
}

.btn-on-navy {
  --bs-btn-color: var(--dm-navy);
  --bs-btn-bg: var(--dm-sand);
  --bs-btn-border-color: var(--dm-sand);
  --bs-btn-hover-bg: #d3c599;
  --bs-btn-hover-border-color: #d3c599;
  --bs-btn-hover-color: var(--dm-navy);
  --bs-btn-active-bg: #d3c599;
  --bs-btn-active-border-color: #d3c599;
  --bs-btn-active-color: var(--dm-navy);
}

.btn-outline-sand {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
  --bs-btn-active-border-color: #fff;
  --bs-btn-active-color: #fff;
}

.btn-on-navy:focus-visible,
.btn-outline-sand:focus-visible {
  outline-color: var(--dm-sand);
}

/* ---------------------------------------------------------------- hero --- */

.dm-hero {
  padding-top: 2.5rem;
  padding-bottom: 0;
  background: linear-gradient(180deg, var(--dm-sand-faint) 0%, var(--dm-paper) 100%);
  border-bottom: 1px solid var(--dm-rule);
  overflow: hidden;
}

@media (min-width: 992px) {
  .dm-hero { padding-top: 4rem; }
}

/* The figure is bottom-anchored, so the text column carries the lower padding */
@media (min-width: 992px) {
  .dm-hero-text { padding-bottom: var(--dm-section-y); }
}

/* Stacked, the figure leads — keep it small enough that the h1 stays
   above the fold on a 375x667 screen. */
@media (max-width: 991.98px) {
  .dm-hero { padding-top: 1.5rem; }
  .dm-hero-text { padding-bottom: 3rem; }
}

.dm-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 1.02;
  margin-bottom: 0.85rem;
}

.dm-hero-role {
  font-family: var(--dm-sans);
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  font-weight: 500;
  color: var(--dm-ink-muted);
  letter-spacing: 0;
  margin-bottom: 1.75rem;
}

.dm-hero-role .dm-amp {
  font-family: var(--dm-serif);
  font-style: italic;
  color: var(--dm-rust);
}

.dm-available {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid var(--dm-sage);
  background: var(--dm-sage-soft);
  border-radius: 100px;
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3f4a28;
  margin-bottom: 1.5rem;
}

.dm-available-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5c6b36;
  flex: none;
}

/* Cut-out figure standing on a sand disc.
   The suit is navy — near-identical to --dm-navy — so the ground behind him
   must stay sand. Never put this figure on a navy panel. */
.dm-figure {
  position: relative;
  isolation: isolate;
  max-width: 30rem;
  margin-inline: auto;
}

/* A sand arch rising off the section baseline, with two thin terracotta
   arcs echoing out from it — a desert sun, and enough structure that the
   figure is composed into the page rather than pasted onto a circle. */
/* True circles, not rounded-top boxes — a box with a rounded top keeps
   straight vertical sides, which drew two hard lines down the hero.
   The lower part of each circle falls past the section baseline and is
   clipped by .dm-hero { overflow: hidden }. */
.dm-figure::before,
.dm-figure::after,
.dm-figure-glyphs::before,
.dm-figure-glyphs::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

/* Solid ground */
.dm-figure::before {
  bottom: -12%;
  width: 82%;
  aspect-ratio: 1;
  background: var(--dm-sand);
}

/* Inner arc, hugging the disc */
.dm-figure::after {
  bottom: -18%;
  width: 96%;
  aspect-ratio: 1;
  border: 1px solid var(--dm-terracotta);
  opacity: 0.45;
}

.dm-figure-glyphs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Outer arc, fading out */
.dm-figure-glyphs::before {
  bottom: -26%;
  width: 116%;
  aspect-ratio: 1;
  border: 1px solid var(--dm-terracotta);
  opacity: 0.2;
}

/* Low sun, clear of the figure's silhouette */
.dm-figure-glyphs::after {
  left: -2%;
  bottom: 52%;
  transform: none;
  width: 2.5rem;
  aspect-ratio: 1;
  background: var(--dm-terracotta);
  opacity: 0.9;
}

.dm-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(39, 39, 87, 0.18));
}

/* Keep these BELOW `.dm-figure { max-width }` above — equal specificity,
   so a base rule placed after them would silently win at every width.
   Stacked, the figure leads the page; it has to stay small enough that
   the h1 is still visible on a 375x667 screen. */
@media (max-width: 991.98px) {
  .dm-figure { max-width: 17rem; }
  .dm-figure-glyphs::after { width: 1.75rem; height: 1.75rem; }

  /* Stacked he sits mid-page rather than on the section baseline, so the
     bottom of the cut-out reads as a guillotine cut. Fade it instead. */
  .dm-figure img {
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
    /* Required. With mask-size:auto a gradient has no intrinsic size and
       Chrome paints nothing at all — the whole figure disappears. */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    filter: none;
  }
  .dm-figure::before { bottom: 2%; }
  .dm-figure::after { bottom: -3%; }
  .dm-figure-glyphs::before { bottom: -9%; }
}

@media (max-width: 575.98px) {
  .dm-figure { max-width: 13.5rem; }
  .dm-figure-glyphs::after { width: 1.375rem; height: 1.375rem; }
}

/* Role nodes — dot, label, trailing rule */
.dm-nodes {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  max-width: 21rem;
}

.dm-nodes li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.45rem 0;
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dm-ink);
}

.dm-nodes li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dm-terracotta);
}

.dm-nodes li::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dm-rule);
}

/* Figures row — plain type, no cards, no counters */
.dm-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--dm-rule);
}

.dm-figure-value {
  display: block;
  font-family: var(--dm-serif);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--dm-ink);
}

.dm-figure-label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
}

/* At 375 the three figures wrapped 2 + 1, which read as a broken grid.
   Pin them to one row and tighten the labels so they fit. */
@media (max-width: 575.98px) {
  .dm-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  .dm-figures .dm-figure-value { font-size: 1.65rem; }
  .dm-figures .dm-figure-label { font-size: 0.625rem; letter-spacing: 0.06em; }
}

/* --------------------------------------------------------- page header --- */

.dm-page-head {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  background: var(--dm-sand-faint);
  border-bottom: 1px solid var(--dm-rule);
}

.dm-page-head h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.35rem);
  margin-bottom: 0.9rem;
}

.dm-page-head .dm-lede { max-width: 42rem; margin-bottom: 0; }

/* ---------------------------------------------------------------- card --- */

.dm-card {
  background: #fff;
  border: 1px solid var(--dm-rule);
  border-radius: var(--dm-radius);
  padding: 1.6rem;
  height: 100%;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

a.dm-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.dm-card:hover {
  border-color: var(--dm-terracotta);
  transform: translateY(-2px);
}

.dm-card h3,
.dm-card h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.dm-card p {
  font-size: 0.9375rem;
  color: var(--dm-ink-muted);
  margin-bottom: 0;
}

.dm-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border: 1px solid var(--dm-rule);
  background: var(--dm-paper-sunk);
  border-radius: var(--dm-radius);
  color: var(--dm-rust);
}

.dm-card-icon svg { width: 1.15rem; height: 1.15rem; }

/* Tag pills inside cards */
.dm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.dm-tags span {
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--dm-rule);
  background: var(--dm-paper-sunk);
  color: var(--dm-ink-muted);
  border-radius: 3px;
}

/* -------------------------------------------------------------- skills --- */

.dm-skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dm-skill-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--dm-rule-soft);
  font-size: 0.9375rem;
}

.dm-skill-list li:last-child { border-bottom: 0; }

.dm-level {
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dm-level--adv { color: var(--dm-rust); }
.dm-level--int { color: #4f5b33; }

/* ------------------------------------------------------------ timeline --- */

.dm-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.dm-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--dm-rule);
}

.dm-timeline > li {
  position: relative;
  padding-left: 1.75rem;
  padding-bottom: 2.75rem;
}

.dm-timeline > li:last-child { padding-bottom: 0; }

.dm-timeline > li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  background: var(--dm-paper);
  border: 2px solid var(--dm-sand);
  border-radius: 50%;
}

.dm-timeline > li.is-current::before {
  background: var(--dm-terracotta);
  border-color: var(--dm-terracotta);
}

@media (min-width: 768px) {
  .dm-timeline > li { padding-left: 2.25rem; }
}

.dm-tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.dm-tl-date {
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
}

.dm-badge-now {
  font-family: var(--dm-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  /* rust, not terracotta: white on #E35336 is only 3.78:1 at 10px */
  background: var(--dm-rust);
  color: #fff;
  border-radius: 3px;
}

.dm-tl-title {
  font-size: 1.3125rem;
  margin-bottom: 0.2rem;
}

.dm-tl-org {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.15rem;
}

.dm-tl-org a { color: var(--dm-rust); }

.dm-tl-client {
  display: block;
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
  margin-bottom: 0.85rem;
}

.dm-tl-points {
  padding-left: 1.05rem;
  margin-bottom: 0;
}

.dm-tl-points li {
  font-size: 0.9375rem;
  color: var(--dm-ink-muted);
  margin-bottom: 0.4rem;
}

.dm-tl-points li::marker { color: var(--dm-sand); }

/* -------------------------------------------------------- notice/banner --- */

.dm-employer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid var(--dm-rule);
  border-left: 3px solid var(--dm-terracotta);
  border-radius: var(--dm-radius);
}

.dm-employer-logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  flex: none;
}

.dm-clearance {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--dm-navy);
  color: #fff;
  border-radius: 100px;
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dm-clearance svg { width: 0.95rem; height: 0.95rem; flex: none; }

.dm-notice {
  display: flex;
  gap: 0.9rem;
  padding: 1.15rem 1.35rem;
  background: var(--dm-sand-faint);
  border: 1px solid #a3915c;
  border-radius: var(--dm-radius);
  font-size: 0.9375rem;
  color: var(--dm-ink);
}

.dm-notice svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--dm-rust);
}

.dm-notice p { margin-bottom: 0; }

/* ----------------------------------------------------------- cert grid --- */

.dm-cert {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--dm-rule);
  border-radius: var(--dm-radius);
  height: 100%;
}

.dm-cert-mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--dm-navy);
}

.dm-cert-mark svg { width: 1.4rem; height: 1.4rem; }

.dm-cert h4 {
  font-family: var(--dm-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.dm-cert p {
  font-size: 0.8125rem;
  color: var(--dm-ink-muted);
  margin-bottom: 0;
}

.dm-cert .dm-cert-year {
  font-family: var(--dm-mono);
  font-size: 0.75rem;
  color: var(--dm-ink-muted);
}

/* ----------------------------------------------------------- education --- */

.dm-edu {
  display: flex;
  gap: 1.15rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--dm-rule);
  border-radius: var(--dm-radius);
  height: 100%;
}

.dm-edu img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex: none;
}

.dm-edu h3,
.dm-edu h4 {
  font-size: 1.0625rem;
  margin-bottom: 0.3rem;
}

.dm-edu p {
  font-size: 0.875rem;
  color: var(--dm-ink-muted);
  margin-bottom: 0.15rem;
}

.dm-grade {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.22rem 0.6rem;
  background: var(--dm-sage-soft);
  border: 1px solid var(--dm-sage);
  color: #3f4a28;
  border-radius: 3px;
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- video --- */

.dm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dm-navy);
  border: 1px solid var(--dm-rule);
  overflow: hidden;
}

.dm-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------ contacts --- */

.dm-contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--dm-rule);
  border-radius: var(--dm-radius);
  text-decoration: none;
  color: var(--dm-ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.dm-contact-link:hover {
  border-color: var(--dm-terracotta);
  background: var(--dm-sand-faint);
  color: var(--dm-ink);
}

.dm-contact-link--primary {
  border-left: 3px solid var(--dm-terracotta);
}

.dm-contact-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--dm-navy);
}

.dm-contact-icon svg { width: 1.35rem; height: 1.35rem; }

.dm-contact-label {
  display: block;
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
}

.dm-contact-value {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.dm-fact {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--dm-rule-soft);
}

.dm-fact:last-child { border-bottom: 0; }

.dm-fact-icon {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--dm-rust);
}

.dm-fact-icon svg { width: 1.15rem; height: 1.15rem; }

/* Scoped: these labels are <p> elements, so bare `.dm-fact-label` (0,1,0)
   loses to `.dm-fact p` (0,1,1) below and the label renders at value size. */
.dm-fact .dm-fact-label {
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dm-ink-muted);
  margin-bottom: 0.15rem;
}

.dm-fact p {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0;
}

/* Aside panel on contact page */
.dm-panel {
  background: var(--dm-navy);
  color: #fff;
  border-radius: var(--dm-radius);
  padding: 1.85rem;
}

.dm-panel h2,
.dm-panel h3 { color: #fff; }

.dm-panel h2 { font-size: 1.5rem; margin-bottom: 1.15rem; }

.dm-panel h3 {
  font-family: var(--dm-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dm-sand);
  margin-bottom: 0.85rem;
}

.dm-panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
}

.dm-panel-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.88);
}

.dm-panel-list svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.28rem;
  color: var(--dm-sand);
}

.dm-panel-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin: 1.6rem 0;
  opacity: 1;
}

.dm-panel-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.6rem;
}

.dm-panel-figures .dm-figure-value { color: var(--dm-sand); }
.dm-panel-figures .dm-figure-label { color: rgba(255, 255, 255, 0.7); }

.dm-panel-note {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.dm-panel-note svg { width: 0.95rem; height: 0.95rem; flex: none; }

/* ----------------------------------------------------------- CTA band --- */

.dm-cta {
  background: var(--dm-navy);
  color: #fff;
  padding-block: var(--dm-section-y);
}

.dm-cta h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  margin-bottom: 0.9rem;
}

.dm-cta p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.0625rem;
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: 1.85rem;
}

.dm-cta strong { color: var(--dm-sand); }

/* -------------------------------------------------------------- footer --- */

.dm-footer {
  background: var(--dm-navy-deep);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 3.25rem 2rem;
}

.dm-footer .dm-wordmark {
  color: #fff;
  font-size: 1.25rem;
}

.dm-footer .dm-wordmark:hover { color: var(--dm-sand); }

.dm-footer p { font-size: 0.9375rem; }

.dm-footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.dm-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.dm-footer a:focus-visible { outline-color: var(--dm-sand); }

.dm-social {
  display: flex;
  gap: 0.6rem;
}

.dm-social a {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--dm-radius);
  color: rgba(255, 255, 255, 0.82);
}

.dm-social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--dm-sand);
  color: #fff;
}

.dm-social svg { width: 1.05rem; height: 1.05rem; }

/* Light-background variant, used inside the mobile menu */
.dm-social--ink a {
  border-color: var(--dm-rule);
  color: var(--dm-ink-muted);
}

.dm-social--ink a:hover {
  background: var(--dm-sand-faint);
  border-color: var(--dm-terracotta);
  color: var(--dm-rust);
}

.dm-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  font-size: 0.9375rem;
}

.dm-footer-nav a { padding-block: 0.35rem; }

.dm-footer-base {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

.dm-footer-base p { margin-bottom: 0; font-size: 0.8125rem; }

/* ---------------------------------------------------------- bottom nav --- */

.dm-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--dm-paper);
  border-top: 1px solid var(--dm-rule);
  padding-bottom: env(safe-area-inset-bottom);
}

.dm-bottombar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.25rem;
  min-height: 3.5rem;
  text-decoration: none;
  color: var(--dm-ink-muted);
  font-family: var(--dm-mono);
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dm-bottombar a svg { width: 1.15rem; height: 1.15rem; }

.dm-bottombar a.active {
  color: var(--dm-rust);
  box-shadow: inset 0 2px 0 var(--dm-terracotta);
}

/* --------------------------------------------------------------- utils --- */

.dm-stack-sm > * + * { margin-top: 0.75rem; }

/* Short viewports (landscape phones, heavy zoom): drop the bottom bar so it
   isn't eating the screen, but keep the navbar sticky — otherwise there is
   no persistent navigation at all. */
@media (max-height: 26rem) {
  .dm-bottombar { display: none; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  a.dm-card:hover { transform: none; }
}

/* ------------------------------------------------- type utilities (last) ---
   These replaced inline style="font-size:…" attributes. An inline style beat
   every component rule; a single class does not. So they live at the END of
   the file, and are scoped where a component rule would otherwise win:
     .dm-figure-value sets navy   -> would hide .dm-stat-xl on the navy panel
     .dm-card h3 is (0,1,1)       -> would beat a bare .dm-h3-sm (0,1,0)
   -------------------------------------------------------------------------- */

.dm-h2 { font-size: clamp(1.85rem, 4vw, 2.6rem); }
.dm-h3 { font-size: 1.5rem; }
.dm-h3-sm,
.dm-card .dm-h3-sm { font-size: 1.25rem; }
.dm-text-sm { font-size: 0.9375rem; }
.dm-link-strong { color: var(--dm-rust); }

.dm-panel .dm-stat-xl {
  font-size: 3.75rem;
  color: var(--dm-sand);
}

.dm-panel .dm-stat-xl-label { color: rgba(255, 255, 255, 0.7); }