/*
 * Emeraude design tokens.
 *
 * Single source of truth. Every value below was measured from the supplied
 * mockup bundle, not estimated. If a value needs to change, change it here
 * and nowhere else.
 */

:root {
  /* ---- Colour ------------------------------------------------------ */
  --em-ink: #1A1F1C;
  --em-muted: #5C6A72;
  --em-accent: #5F8E2E;
  --em-link: #486F20;
  --em-button: #527E27;
  --em-button-hover: #446920;
  --em-link-hover: #3F6B1C;
  --em-white: #FFFFFF;
  --em-panel: #F7F8F5;
  --em-tint: #EEF2E7;
  --em-cta-ground: #F1F5EA;
  --em-dark: #0E1412;
  --em-footer: #0B0D0C;
  --em-footer-text: #F2F4F3;
  --em-chart-light: #8DC059;
  --em-chart-gold: #D8C048;
  --em-chart-deep: #8A6A0C;
  --em-chart-red: #C03030;
  /* The ground behind an amber annotation, and behind the status panel's
     message field. */
  --em-warn-ground: #FFF9E6;
  --em-status-ground: #FCFCFA;

  /* Rules and washes, all derived from the two inks above */
  --em-rule: rgba(26, 31, 28, .1);
  /* Between the two: the hairline either side of a section divider's label. */
  --em-rule-mid: rgba(26, 31, 28, .12);
  --em-rule-strong: rgba(26, 31, 28, .14);
  --em-dot: rgba(26, 31, 28, .22);
  --em-accent-wash: rgba(95, 142, 46, .08);
  --em-accent-edge: rgba(95, 142, 46, .35);
  --em-accent-ring: rgba(95, 142, 46, .16);
  --em-footer-rule: rgba(242, 244, 243, .12);
  /* .4 in the mockup, which fails WCAG AA on the footer black at 11px
     (ratio 3.55, AA needs 4.5). Raised to the lowest alpha that passes, so
     the design is preserved as closely as an accessible version allows.
     See BUILD-REPORT.md: this is a deliberate deviation from the artefact. */
  --em-footer-dim: rgba(242, 244, 243, .58);
  --em-footer-faint: rgba(242, 244, 243, .58);
  --em-footer-body: rgba(242, 244, 243, .72);
  --em-footer-link: rgba(242, 244, 243, .74);

  /* ---- Type -------------------------------------------------------- */
  --em-font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --em-size-eyebrow: 11px;
  --em-size-eyebrow-sm: 10px;
  --em-size-micro: 10.5px;
  --em-size-small: 12px;
  --em-size-small-plus: 13px;
  --em-size-nav: 14.5px;
  /* The trailing arrow on an arrow link, which the mockup draws a little
     larger than the words beside it so the two sit on the same optical
     line. Measured from "See our training program". */
  --em-size-arrow: 15px;
  --em-size-arrow-sm: 14px;
  --em-size-card-title: 16px;
  --em-size-body: 17px;
  --em-size-card-lead: 19px;
  --em-size-lead: 20px;
  --em-size-standfirst: 21px;
  --em-size-hub-core: 24px;
  --em-size-heading: 36px;
  --em-size-display: 53px;
  --em-size-hero: 57px;

  /* The interior pages draw a smaller scale than the home page: a 43px hero
     rather than 57px, a 28px section heading rather than 36px, and a 45px call
     to action rather than 53px. Measured from the contact page in the mockup
     bundle, which is the first interior page built. */
  --em-size-page-hero: 43px;
  --em-size-page-heading: 28px;
  --em-size-cta-compact: 45px;

  --em-track-eyebrow: .32em;
  --em-track-label: .24em;
  --em-track-button: .14em;
  --em-track-node: .18em;

  --em-lh-tight: 1.01;
  --em-lh-heading: 1.06;
  --em-lh-body: 1.2;

  /* Default space under a heading. h1, h2 and h3 each override it. */
  --em-heading-gap: 18px;

  /* ---- Layout ------------------------------------------------------ */
  --em-max: 1280px;
  --em-max-wide: 1376px;
  --em-gutter: 48px;
  --em-gutter-mobile: 20px;
  
  --em-rail-w: 300px;

  /* How far an anchored target scrolls clear of the fixed furniture.
     A fixed value, not measured: nav.js used to write it from the real
     header and strip heights, which meant the number changed under you on
     resize and after late block CSS arrived.

     100px is the header plus clearance. A page carrying a strip raises it
     to 150px, and that override lives in the strip block's own stylesheet
     so it loads only where the strip does. See MAINTAINER.md section 2. */
   
  

  --em-radius-sm: 2px;
  --em-radius-card: 8px;
  --em-radius-panel: 10px;
  --em-radius-media: 12px;
  --em-radius-cta: 14px;
  --em-radius-icon: 13px;

  --em-shadow-card: 0 14px 34px rgba(26, 31, 28, .07);
  --em-shadow-core: 0 30px 70px rgba(26, 31, 28, .13);
  --em-shadow-media: 0 40px 90px rgba(26, 31, 28, .14);
  --em-shadow-media-hover: 0 50px 104px rgba(26, 31, 28, .2);
  /* The media frame is drawn with a shallower shadow on a phone, where the
     desktop value reads as a smear under a much smaller box. */
  --em-shadow-media-mobile: 0 24px 54px rgba(26, 31, 28, .14);

  /* ---- Motion ------------------------------------------------------ */
  --em-ease: cubic-bezier(.22, .61, .36, 1);
  --em-rail-speed: .32s;
  --em-journey-cycle: 7.2s;

   --em-header-h-ori: 125px;
   --nav-strip-h:52px;
   --em-header-h: var(--em-header-h-ori);
   --em-bar: var(--em-header-h);
}
body.em-has-section-strip{
   --em-header-h: calc(var(--em-header-h-ori) + var(--nav-strip-h));
}
.em-has-section-strip{
   --em-bar: var(--em-header-h);
}


@media (max-width: 920px) {
   
   .em-has-section-strip{
      --nav-strip-h:41px;
   }
   :root {
      --em-header-h-ori: 92px;
      /* --em-header-h: calc(var(--em-header-h-ori) + var(--nav-strip-h)); */
      --em-bar: var(--em-header-h-ori);
   }
   .em-has-section-strip{
      --em-bar: var(--em-header-h);
   }
   
   body.em-has-section-strip{
      --em-header-h: calc(var(--em-header-h-ori) + var(--nav-strip-h));
   }  
   
}


/* The single breakpoint the mockup draws. Everything between 921px and
   1439px scales the desktop layout fluidly, as agreed in PROJECT-BRIEF.md
   section 8.1. Below 1100px the navigation rail overlays rather than
   pushes, because the pushed content would be too narrow to read. */