/* epic.css - compiled from src/css. Do not edit directly.
   Layers: 00-tokens.css, 10-base.css, 20-components.css, 30-utilities.css */

/* === 00-tokens.css === */
/* EPIC design tokens.
   Brand palette measured from consulting/epic/brand board-01.jpg at 100% pixel
   agreement. Every non-brand token holds hue 221, brand navy's hue, so derived
   values read in-family rather than invented.
   Contrast on white is recorded because it constrains use: yellow (1.59:1) and
   cyan (2.91:1) are background and accent only, never text on white. */
:root {
  /* brand, exact */
  --epic-cyan:        #08A0E9;  /* hsl(199 93% 47%)  2.91:1  */
  --epic-navy:        #3B5999;  /* hsl(221 44% 42%)  6.83:1  */
  --epic-yellow:      #FCC60E;  /* hsl(46 98% 52%)   1.59:1  */
  --epic-white:       #FFFFFF;

  /* interaction states, derived by lowering lightness */
  --epic-cyan-dark:   #077FB6;  /* cyan   L 47->37   4.45:1  */
  --epic-navy-dark:   #2E4476;  /* navy   L 42->32   9.53:1  */
  --epic-yellow-dark: #E3AF02;  /* yellow L 52->45   2.02:1  */

  /* neutrals, navy hue at reduced saturation */
  --epic-ink:         #1D2435;  /* S30 L16          15.49:1  body + headings */
  --epic-muted:       #5E6B87;  /* S18 L45           5.35:1  secondary text  */
  --epic-border:      #DEE3ED;  /* S30 L90                   hairlines       */
  --epic-surface:     #F5F7FA;  /* S30 L97                   section tint    */

  /* spacing + radius */
  --epic-section-y:   80px;
  --epic-radius:      12px;
  --epic-radius-pill: 50px;
}

@media (max-width: 768px) {
  :root { --epic-section-y: 56px; }
}


/* === 10-base.css === */
/* EPIC base, typography and element defaults.
   Display font: brand specifies LEMON MILK, but no licence is held and production
   has always rendered the Josefin Sans fallback. Gate B keeps that.

   To adopt Gate A later, three changes are required, not one:
   1. Add a font-face declaration here for the licensed Bold weight, and change
      --epic-font-display to reference it.
   2. Add the licensed .woff2 under theme/epic-theme/assets/fonts/lemonmilk/.
   3. In scripts/test-fonts.mjs, lift the Gate B lock: its final check (the
      one that unconditionally rejects any font-face rule, in any case) must
      be removed or made conditional before a correct Gate A change can pass.
      Skipping step 3 means steps 1 and 2 alone still fail that guard. */
:root {
  --epic-font-display: 'Josefin Sans', Arial, sans-serif;
  --epic-font-heading: 'Josefin Sans', Arial, sans-serif;
  --epic-font-body:    'Josefin Sans', Arial, sans-serif;
  --epic-font-serif:   'Playfair Display', Georgia, serif;
}

body {
  font-family: var(--epic-font-body);
  color: var(--epic-ink);
  background: var(--epic-white);
  -webkit-font-smoothing: antialiased;
}


/* === 20-components.css === */
/* Host-theme button reset.
   hello-elementor's reset.css restyles every button with a crimson accent
   border and text colour (the non-brand hex banned in
   scripts/epic-verify-css.mjs's BANNED list, not spelled out literally here
   so this comment does not trip that same guard), padding .5rem 1rem,
   white-space nowrap, crimson hover fill. functions.php will dequeue that
   file (Task 6, not yet written); this rule is belt and braces regardless,
   for any other source.
   The theme's winning selector is the [type=button] half of its list, at 0,1,0
   specificity, so :is() is needed to match it; :where() keeps the scoping free.
   Width and colour only: the `border` shorthand would also set border-style:none,
   which forces the used width to 0 and wipes utility border classes off cards. */
:where(.epic-page) :is(button, [type=button], [type=submit]) {
  white-space: normal;
  background-color: transparent;
  border-width: 0;
  border-color: transparent;
  border-radius: 0;
  padding: 0;
  color: inherit;
  text-align: inherit;
}
:where(.epic-page) :is(button, [type=button], [type=submit]):is(:hover, :focus) {
  background-color: transparent;
  color: inherit;
}

.epic-section { padding: var(--epic-section-y) 0; }

.epic-btn {
  max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--epic-yellow); color: var(--epic-navy);
  font-family: var(--epic-font-heading); font-weight: 600; font-size: 17px;
  text-transform: uppercase;
  border: none; border-radius: var(--epic-radius-pill);
  padding: 16px 40px; cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .2s ease;
}
.epic-btn:hover { background: var(--epic-yellow-dark); transform: translateY(-1px); }
.epic-btn--sm { font-size: 14px; padding: 12px 28px; }
.epic-btn--xs { font-size: 12px; padding: 10px 20px; letter-spacing: .05em; }
.epic-btn--outline { background: transparent; color: var(--epic-white); border: 2px solid var(--epic-white); padding: 14px 38px; }
.epic-btn--outline:hover { background: var(--epic-white); color: var(--epic-navy); }
.epic-btn--navy { background: var(--epic-navy); color: var(--epic-white); }
.epic-btn--navy:hover { background: var(--epic-navy-dark); }
.epic-btn--white { background: var(--epic-white); color: var(--epic-navy); }
.epic-btn--white:hover { background: var(--epic-surface); }

.eyebrow {
  font-family: var(--epic-font-heading); font-weight: 500; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase;
}
.section-title {
  font-family: var(--epic-font-heading); font-weight: 700; text-transform: uppercase;
  line-height: 1.15; letter-spacing: -.005em;
}
.display-text { font-family: var(--epic-font-serif); font-weight: 700; line-height: 1.2; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.countup { font-feature-settings: "tnum" 1; }


/* === 30-utilities.css === */
/* Bounded utility layer. Finite by design: a class either exists here and is
   documented in docs/EPIC-DESIGN-SYSTEM.md, or it does not exist at all.
   No silent failures from an unpurged class typed into an Elementor field. */
.epic-u-cyan    { color: var(--epic-cyan); }
.epic-u-navy    { color: var(--epic-navy); }
.epic-u-ink     { color: var(--epic-ink); }
.epic-u-muted   { color: var(--epic-muted); }
.epic-u-white   { color: var(--epic-white); }

.epic-u-bg-navy    { background: var(--epic-navy); color: var(--epic-white); }
.epic-u-bg-cyan    { background: var(--epic-cyan); color: var(--epic-white); }
.epic-u-bg-yellow  { background: var(--epic-yellow); color: var(--epic-navy); }
.epic-u-bg-surface { background: var(--epic-surface); color: var(--epic-ink); }

.epic-u-center  { text-align: center; }
.epic-u-upper   { text-transform: uppercase; }
.epic-u-round   { border-radius: var(--epic-radius); }
.epic-u-pill    { border-radius: var(--epic-radius-pill); }
.epic-u-hairline{ border: 1px solid var(--epic-border); }