/*
 * Shared tokens and primitives for the DEA front-end modules.
 *
 * The tokens now sit on :root. The design system (the DEA Design System Figma
 * file) is signed off, so the palette, type ramp, spacing and radii are global
 * and every module, the homepage hero included, reads the same values. Names
 * follow the Figma variables' code syntax (--dea-text-heading, --dea-radius-lg
 * and so on). The .dea-mod block keeps the resets and the font, scoped as
 * before, so dropping a module into a WordPress page still changes nothing
 * outside it.
 *
 * Breakpoints, matching the Figma frames: desktop from 1024, tablet 768 to
 * 1023, mobile to 767. The radius tokens carry the Figma modes: lg 24/20/16,
 * xl 40/40/24 and md 16/16/12 across desktop / tablet / mobile.
 */
:root {
  /* Master palette */
  --dea-orange-50: #fef3ec;
  --dea-orange-400: #f58a3e;
  --dea-orange-500: #c9520f;
  --dea-orange-600: #a8440c;
  --dea-plum-500: #403962;
  --dea-plum-700: #1b1028;
  --dea-brown-500: #8b4513;
  --dea-ink-900: #111111;
  --dea-ink-800: #231f20;
  --dea-ink-600: #4d4d4d;
  --dea-ink-400: #6b7280;
  --dea-sand-300: #e5dbcd;
  --dea-cream-100: #f9f7f2;
  --dea-white: #ffffff;
  --dea-success: #2e7d4f;
  --dea-warning: #e8b04b;
  --dea-error: #c42b2b;
  --dea-info: #403962;

  /* Semantic palette */
  --dea-text-heading: var(--dea-orange-500);
  --dea-text-body: var(--dea-ink-800);
  --dea-text-strong: var(--dea-ink-900);
  --dea-text-meta: var(--dea-ink-600);
  --dea-text-muted: var(--dea-ink-400);
  --dea-text-eyebrow: var(--dea-brown-500);
  --dea-text-link: var(--dea-orange-500);
  --dea-text-inverse: var(--dea-white);
  --dea-text-accent: var(--dea-orange-400);       /* dark panels only */
  --dea-bg-page: var(--dea-cream-100);
  --dea-bg-card: var(--dea-white);
  --dea-bg-tint: var(--dea-orange-50);
  --dea-bg-sand: var(--dea-sand-300);
  --dea-bg-feature: var(--dea-plum-500);
  --dea-bg-feature-dark: var(--dea-plum-700);
  --dea-bg-feature-orange: var(--dea-orange-600);  /* white body text needs the darker step */
  --dea-bg-dark: var(--dea-ink-900);
  --dea-border-default: var(--dea-sand-300);
  --dea-border-strong: var(--dea-ink-900);
  --dea-border-focus: var(--dea-orange-500);
  --dea-action-primary: var(--dea-orange-500);
  --dea-action-primary-hover: var(--dea-orange-600);
  --dea-action-secondary: var(--dea-plum-500);
  --dea-action-secondary-hover: var(--dea-plum-700);
  --dea-action-dark: var(--dea-ink-900);
  --dea-action-dark-hover: var(--dea-ink-800);
  --dea-action-on-action: var(--dea-white);
  --dea-accent-badge: var(--dea-orange-400);

  /* Spacing */
  --dea-space-4: 4px;
  --dea-space-8: 8px;
  --dea-space-12: 12px;
  --dea-space-16: 16px;
  --dea-space-20: 20px;
  --dea-space-24: 24px;
  --dea-space-32: 32px;
  --dea-space-40: 40px;
  --dea-space-48: 48px;
  --dea-space-64: 64px;
  --dea-space-80: 80px;
  --dea-space-96: 96px;
  --dea-space-128: 128px;
  --dea-container-max: 1280px;
  --dea-container-gutter: 32px;
  --dea-border-width: 2px;

  /* Radius, desktop mode */
  --dea-radius-none: 0;
  --dea-radius-sm: 8px;
  --dea-radius-md: 16px;
  --dea-radius-lg: 24px;
  --dea-radius-xl: 40px;
  --dea-radius-full: 999px;

  /* Layout rhythm */
  --dea-gutter: var(--dea-container-gutter);   /* page edge to content, and the hero's inset */
  --dea-max: var(--dea-container-max);         /* the content column */
  --dea-section-gap: 64px;                     /* between sections */
  --dea-page-bottom: 64px;                     /* under the footer */
  --dea-panel-pad: 32px;                       /* inside a tinted panel */
  --dea-panel-gap: 48px;                       /* between a panel's columns */
  --dea-page-top: 24px;                        /* the header pill from the top of an inner page */
  --dea-page-gap: 48px;                        /* header to content, and between an inner page's sections */
  --dea-ftp-gap: 80px;                         /* between the Fossil Trail page's sections */

  /* Type. The font shorthand carries weight, size, line height and family, so
     a module writes `font: var(--dea-type-h2)` and adds the tracking. */
  --dea-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dea-font-head: Mulish, var(--dea-font);
  --dea-type-display: 700 80px/88px var(--dea-font-head);
  --dea-type-h1: 700 64px/70px var(--dea-font-head);
  --dea-type-h2: 700 48px/53px var(--dea-font-head);
  --dea-type-h3: 700 32px/35px var(--dea-font-head);
  --dea-type-h4: 700 24px/26px var(--dea-font-head);
  --dea-type-h5: 700 20px/22px var(--dea-font-head);
  --dea-type-h6: 700 16px/18px var(--dea-font-head);
  --dea-type-sub-lg: 400 32px/35px var(--dea-font-head);
  --dea-type-sub-md: 400 24px/26px var(--dea-font-head);
  --dea-type-sub-sm: 400 20px/22px var(--dea-font-head);
  --dea-type-body-xl: 400 24px/38px var(--dea-font);
  --dea-type-body-lg: 400 20px/32px var(--dea-font);
  --dea-type-body-md: 400 16px/26px var(--dea-font);
  --dea-type-body-sm: 400 14px/22px var(--dea-font);
  --dea-type-body-xs: 400 12px/19px var(--dea-font);
  --dea-type-cta-lg: 600 20px/25px var(--dea-font);
  --dea-type-cta-md: 600 16px/20px var(--dea-font);
  --dea-type-cta-sm: 600 14px/18px var(--dea-font);
  --dea-type-title-lg: 700 24px/30px var(--dea-font);
  --dea-type-title-md: 700 20px/25px var(--dea-font);
  --dea-type-title-sm: 700 16px/20px var(--dea-font);
  --dea-type-label-lg: 700 16px/24px var(--dea-font);
  --dea-type-label-md: 700 14px/21px var(--dea-font);
  --dea-type-label-sm: 700 12px/18px var(--dea-font);
  --dea-track-head: -0.03em;     /* headers */
  --dea-track-sub: -0.02em;      /* subheaders */
  --dea-track-title: -0.015em;   /* UI titles */
  --dea-track-label: 0.1em;      /* labels, all caps */

  /* Type that steps with the device, as the Figma frames do */
  --dea-type-hero: var(--dea-type-display);     /* Display, H1, H3 */
  --dea-type-section: var(--dea-type-h1);       /* H1, H2, H3 */
  --dea-type-lede: var(--dea-type-body-lg);     /* Body lg, Body lg, Body md */

  /* Elevation and motion */
  --dea-shadow-card: 0 1px 2px rgba(35, 31, 32, .05), 0 6px 16px -2px rgba(35, 31, 32, .06);
  --dea-ease: cubic-bezier(.16, 1, .3, 1);

  /* The first build's names, aliased to the tokens so the modules not yet
     restyled keep working and pick up the new values. */
  --dea-page: var(--dea-bg-page);
  --dea-peach: var(--dea-bg-tint);
  --dea-orange: var(--dea-orange-500);
  --dea-orange-2: var(--dea-orange-400);
  --dea-orange-3: var(--dea-orange-600);   /* the old hover orange; retired for the darker step */
  --dea-ink: var(--dea-ink-900);
  --dea-ink-2: var(--dea-ink-800);
  --dea-brown: var(--dea-brown-500);
  --dea-grey: var(--dea-ink-400);
  --dea-meta: var(--dea-ink-600);
  --dea-plum: var(--dea-plum-500);
  --dea-navy: var(--dea-plum-700);
  --dea-sand: var(--dea-sand-300);
  --dea-radius-card: var(--dea-radius-xl);
  --dea-radius-media: var(--dea-radius-lg);
  --dea-inset-x: var(--dea-panel-pad);
  --dea-inset-y: var(--dea-panel-pad);
}

@media (max-width: 1023px) {
  :root {
    --dea-radius-lg: 20px;
    --dea-container-gutter: 24px;
    --dea-section-gap: 48px;
    --dea-page-bottom: 48px;
    --dea-page-gap: 40px;
    --dea-ftp-gap: 64px;
    --dea-type-hero: var(--dea-type-h1);
    --dea-type-section: var(--dea-type-h2);
  }
}

@media (max-width: 767px) {
  :root {
    --dea-radius-md: 12px;
    --dea-radius-lg: 16px;
    --dea-radius-xl: 24px;
    --dea-container-gutter: 16px;
    --dea-section-gap: 40px;
    --dea-page-bottom: 40px;
    --dea-page-top: 16px;
    --dea-page-gap: 32px;
    --dea-ftp-gap: 48px;
    --dea-panel-pad: 24px;
    --dea-type-hero: var(--dea-type-h3);
    --dea-type-section: var(--dea-type-h3);
    --dea-type-lede: var(--dea-type-body-md);
  }
}

.dea-mod {
  box-sizing: border-box;
  font-family: var(--dea-font);
  color: var(--dea-text-body);
  -webkit-font-smoothing: antialiased;
}

/*
 * Scoped box-sizing, not a global reset: dropping a module into a WordPress
 * page must not change the box model of anything outside it.
 */
.dea-mod *,
.dea-mod *::before,
.dea-mod *::after { box-sizing: border-box; }

/* Zero specificity so a module's own heading margin always wins over this. */
:where(.dea-mod h1, .dea-mod h2, .dea-mod h3, .dea-mod h4) {
  margin: 0;
}

/* The display face, deliberately NOT :where()-wrapped. At zero specificity the
   parent theme's own h1-h4 rule beat it, so every section heading was coming
   out in Inter instead of the Mulish the design calls for. */
.dea-mod h1, .dea-mod h2, .dea-mod h3, .dea-mod h4 {
  font-family: var(--dea-font-head);
}

/* Zero specificity again: a module's own link colour (the Dinosaur Week
   button, the orange links) must beat this, and this must still beat
   hello-elementor's a { color: #c36 } and a:hover { color: #336 }. */
:where(.dea-mod a) { color: inherit; }
:where(.dea-mod) a:hover, :where(.dea-mod) a:active { color: inherit; }
/* Same for buttons: the parent theme paints button:hover/focus #c36. */
:where(.dea-mod) button:hover, :where(.dea-mod) button:focus, :where(.dea-mod) button:active { background-color: transparent; color: inherit; }
/* hello-elementor's reset.css sets white-space: nowrap on every button, which
   is right for a label and wrong for a card: a day card's title ran off the
   side of the card instead of wrapping onto a second line. */
.dea-mod button { white-space: normal; }

/* Labelled placeholder for a card with no photo yet. */
.dea-mod .dea-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #e5dbcd, #d8c9b6);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(60, 40, 25, .45);
}

/* Editor-only notices. Visitors never see these. */
.dea-notice {
  margin: 12px auto; max-width: var(--dea-max, 1280px);
  padding: 12px 16px; border: 1px dashed #c9520f; border-radius: 10px;
  background: #fff7f2; color: #7a3208;
  font: 500 14px/1.5 Inter, system-ui, sans-serif;
}

/* ---------------- shared components ----------------
   The Button, Icon Button and Tag sets from the design system, and the section
   header that carries a rail's controls. A module adds its own class for
   placement only; the look comes from here so every page renders the same
   object. Plain classes rather than .dea-mod descendants, because the homepage
   hero sits outside .dea-mod and uses them too. */

.dea-btn, .dea-iconbtn, .dea-tag {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

/* Buttons: pills in three colours, filled or outline, three sizes. The label
   may wrap, so the height is a minimum. */
.dea-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--dea-radius-full);
  font: var(--dea-type-cta-md);
  text-align: center; text-decoration: none; white-space: normal;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .25s var(--dea-ease);
}
.dea-btn--sm { min-height: 40px; padding: 0 20px; gap: 8px; font: var(--dea-type-cta-sm); }
.dea-btn--lg { min-height: 64px; padding: 0 40px; font: var(--dea-type-cta-lg); }
.dea-btn svg { flex: none; width: 20px; height: 20px; }
.dea-btn--sm svg { width: 16px; height: 16px; }
.dea-btn--lg svg { width: 24px; height: 24px; }

/* The :focus and :active selectors are there to outrank hello-elementor's
   button:hover/:focus { background: #c36 }, which would otherwise paint a
   clicked button pink. */
.dea-btn--orange, .dea-btn--orange:focus, .dea-btn--orange:active { background-color: var(--dea-action-primary); color: var(--dea-action-on-action); }
.dea-btn--orange:hover { background-color: var(--dea-action-primary-hover); color: var(--dea-action-on-action); }
.dea-btn--plum, .dea-btn--plum:focus, .dea-btn--plum:active { background-color: var(--dea-action-secondary); color: var(--dea-action-on-action); }
.dea-btn--plum:hover { background-color: var(--dea-action-secondary-hover); color: var(--dea-action-on-action); }
.dea-btn--ink, .dea-btn--ink:focus, .dea-btn--ink:active { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); }
.dea-btn--ink:hover { background-color: var(--dea-action-dark-hover); color: var(--dea-action-on-action); }

/* Outline: the colour as a 2px ring and the label, filling in on hover. An
   inset shadow rather than a border, so the height matches the filled one. */
.dea-btn--outline, .dea-btn--outline:focus, .dea-btn--outline:active { background-color: transparent; }
.dea-btn--outline.dea-btn--orange, .dea-btn--outline.dea-btn--orange:focus, .dea-btn--outline.dea-btn--orange:active { color: var(--dea-action-primary); box-shadow: inset 0 0 0 2px var(--dea-action-primary); }
.dea-btn--outline.dea-btn--plum, .dea-btn--outline.dea-btn--plum:focus, .dea-btn--outline.dea-btn--plum:active { color: var(--dea-action-secondary); box-shadow: inset 0 0 0 2px var(--dea-action-secondary); }
.dea-btn--outline.dea-btn--ink, .dea-btn--outline.dea-btn--ink:focus, .dea-btn--outline.dea-btn--ink:active { color: var(--dea-action-dark); box-shadow: inset 0 0 0 2px var(--dea-action-dark); }
.dea-btn--outline.dea-btn--orange:hover { background-color: var(--dea-action-primary); color: var(--dea-action-on-action); }
.dea-btn--outline.dea-btn--plum:hover { background-color: var(--dea-action-secondary); color: var(--dea-action-on-action); }
.dea-btn--outline.dea-btn--ink:hover { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); }

.dea-btn:hover { transform: translateY(-2px); }
.dea-btn:focus-visible, .dea-iconbtn:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: 3px; }
.dea-btn[disabled], .dea-btn[aria-disabled="true"], .dea-btn.is-disabled { opacity: .45; pointer-events: none; transform: none; }

/* Icon buttons: 48 with a 24 icon, or 32 with a 16 icon. Ink for the card
   arrow, white on dark or sand, outline for rail controls. */
.dea-iconbtn {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: var(--dea-radius-full);
  cursor: pointer; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--dea-ease);
}
.dea-iconbtn svg { display: block; width: 24px; height: 24px; }
.dea-iconbtn--sm { width: 32px; height: 32px; }
.dea-iconbtn--sm svg { width: 16px; height: 16px; }
.dea-iconbtn--ink, .dea-iconbtn--ink:focus, .dea-iconbtn--ink:active { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); }
.dea-iconbtn--ink:hover { background-color: var(--dea-action-primary); color: var(--dea-action-on-action); }
.dea-iconbtn--white, .dea-iconbtn--white:focus, .dea-iconbtn--white:active { background-color: var(--dea-bg-card); color: var(--dea-action-dark); }
.dea-iconbtn--white:hover { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); }
.dea-iconbtn--outline, .dea-iconbtn--outline:focus, .dea-iconbtn--outline:active { background-color: var(--dea-bg-card); color: var(--dea-action-dark); box-shadow: inset 0 0 0 2px var(--dea-accent-badge); }
.dea-iconbtn--outline:hover { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); box-shadow: inset 0 0 0 2px var(--dea-action-dark); }
.dea-iconbtn[disabled], .dea-iconbtn[aria-disabled="true"] { opacity: .35; cursor: default; pointer-events: none; transform: none; }

/* Tags: small caps pills. */
.dea-tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px;
  border-radius: var(--dea-radius-full);
  font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
}
.dea-tag--md { height: 40px; padding: 0 20px; font: var(--dea-type-label-md); }
.dea-tag--orange { background-color: var(--dea-action-primary); color: var(--dea-action-on-action); }
.dea-tag--plum { background-color: var(--dea-action-secondary); color: var(--dea-action-on-action); }
.dea-tag--ink { background-color: var(--dea-action-dark); color: var(--dea-action-on-action); }
.dea-tag--outline { background-color: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.dea-tag--outline.dea-tag--orange { color: var(--dea-action-primary); }
.dea-tag--outline.dea-tag--plum { color: var(--dea-action-secondary); }
.dea-tag--outline.dea-tag--ink { color: var(--dea-action-dark); }

/* Section header: the title on the left, a rail's previous / next pair on the
   right. The title steps H1, H2, H3 with the device and the controls go from
   48 to 32 on a phone. */
.dea-sechead { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dea-sechead__title {
  margin: 0;
  font: var(--dea-type-section); letter-spacing: var(--dea-track-head);
  color: var(--dea-text-heading);
}
.dea-sechead__controls { display: flex; flex: none; gap: 12px; }
@media (max-width: 767px) {
  .dea-sechead { gap: 16px; }
  .dea-sechead__controls { gap: 8px; }
  .dea-sechead__controls .dea-iconbtn { width: 32px; height: 32px; }
  .dea-sechead__controls .dea-iconbtn svg { width: 16px; height: 16px; }
}

/* Sub-section heading: H4 in the heading colour. */
.dea-h4, .dea-mod .dea-h4 { margin: 0; font: var(--dea-type-h4); letter-spacing: var(--dea-track-head); color: var(--dea-text-heading); }

/* A link with a glyph: the back links and the PDF download. */
.dea-iconlink { display: inline-flex; align-items: center; gap: 8px; font: var(--dea-type-cta-md); color: var(--dea-text-strong); text-decoration: none; }
.dea-iconlink svg { flex: none; width: 20px; height: 20px; }
.dea-iconlink:hover { color: var(--dea-text-link); }

/* Hero / Feature: the page banner, a photo with a tag and the title over a
   scrim. Without a photo it is the tint panel with the site's own "Photo to
   come" label and the title in the heading colour. */
.dea-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-height: 420px; padding: 40px;
  border-radius: var(--dea-radius-lg);
  background: var(--dea-bg-sand);
  color: var(--dea-text-inverse);
}
.dea-mod .dea-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dea-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20, 10, 6, 0) 0%, rgba(20, 10, 6, .25) 60%, rgba(20, 10, 6, .72) 100%); }
.dea-hero__inner { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: start; max-width: 860px; }
.dea-hero__title, .dea-mod .dea-hero__title { margin: 0; font: var(--dea-type-h2); letter-spacing: var(--dea-track-head); color: inherit; text-wrap: balance; }
.dea-hero--noimage { background: var(--dea-bg-tint); color: var(--dea-text-heading); }
.dea-hero--noimage::after { display: none; }
.dea-hero__ph { position: absolute; top: 16px; right: 16px; font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: rgba(60, 40, 25, .45); }
@media (max-width: 1023px) { .dea-hero { min-height: 360px; padding: 32px; } }
@media (max-width: 767px) { .dea-hero { min-height: 280px; padding: 24px; } .dea-hero__title, .dea-mod .dea-hero__title { font: var(--dea-type-h3); } }

/* Panel / Feature: a dark or orange panel with a capitals heading and a short
   list. The Orange step is the darker one so white text passes. */
.dea-panel { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--dea-radius-lg); color: var(--dea-text-inverse); }
.dea-panel--dark { background: var(--dea-bg-feature-dark); }
.dea-panel--orange { background: var(--dea-bg-feature-orange); }
.dea-panel__heading, .dea-mod .dea-panel__heading { margin: 0; font: var(--dea-type-label-md); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: inherit; }
.dea-panel__body { font: var(--dea-type-body-sm); color: inherit; }
.dea-panel__body p { margin: 0 0 8px; }
.dea-panel__body p:last-child { margin-bottom: 0; }
.dea-panel__body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.dea-panel__body li::marker { color: currentColor; }
.dea-panel__body a { color: inherit; font-weight: 700; }

/* Panel / Aside: the dark side panel with an orange-400 heading. */
.dea-aside { display: grid; gap: 16px; align-content: start; padding: 32px; border-radius: var(--dea-radius-lg); background: var(--dea-bg-feature-dark); color: var(--dea-text-inverse); }
.dea-aside__heading, .dea-mod .dea-aside__heading { margin: 0; font: var(--dea-type-h4); letter-spacing: var(--dea-track-head); color: var(--dea-text-accent); }
.dea-aside__sub, .dea-mod .dea-aside__sub { margin: 0; font: var(--dea-type-title-sm); letter-spacing: var(--dea-track-title); color: var(--dea-text-accent); }
.dea-aside__body { margin: 0; font: var(--dea-type-body-md); color: inherit; }
.dea-aside__body p { margin: 0; }
.dea-aside__body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dea-aside__body a { color: inherit; text-decoration: none; }
.dea-aside__body a:hover { text-decoration: underline; }
.dea-aside__body strong { display: block; }
@media (max-width: 767px) { .dea-aside { padding: 24px; } }

/* Card / Feature: a white card of copy, with or without a photo. */
.dea-fcard { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--dea-radius-lg); background: var(--dea-bg-card); box-shadow: var(--dea-shadow-card); color: var(--dea-text-body); }
.dea-fcard__media { position: relative; aspect-ratio: 254 / 180; border-radius: var(--dea-radius-md); overflow: hidden; background: var(--dea-bg-sand); }
.dea-mod .dea-fcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dea-fcard__eyebrow { margin: 0; font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: var(--dea-text-eyebrow); }
.dea-fcard__title, .dea-mod .dea-fcard__title { margin: 0; font: var(--dea-type-title-md); letter-spacing: var(--dea-track-title); color: var(--dea-text-strong); }
.dea-fcard__title a { color: inherit; text-decoration: none; }
.dea-fcard__title a:hover { color: var(--dea-text-link); }
.dea-fcard__body { margin: 0; font: var(--dea-type-body-sm); color: var(--dea-text-body); }
.dea-fcard__note { margin: 0; font: var(--dea-type-body-sm); font-weight: 600; color: var(--dea-text-link); }

/* Stat: a glyph in a white disc beside a small label and a value. */
.dea-stat { display: inline-flex; align-items: center; gap: 12px; }
.dea-stat__badge { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--dea-bg-card); color: var(--dea-action-primary); }
.dea-stat__badge svg { width: 24px; height: 24px; }
.dea-stat__text { display: grid; gap: 4px; }
.dea-stat__label { font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: var(--dea-action-primary); }
.dea-stat__value { font: var(--dea-type-title-md); letter-spacing: var(--dea-track-title); color: var(--dea-text-strong); }

/* Section rhythm on the homepage. The Elementor containers there are
   zero-padded and each module owns the gap above it, so the spacing steps
   with the device like everything else. */
.home .dea-dw, .home .dea-attr, .home .dea-ft { padding-top: var(--dea-section-gap); }

@media (prefers-reduced-motion: reduce) {
  .dea-mod *, .dea-mod *::before, .dea-mod *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}