/* MEC Timing page styles (from the mec-page-to-gutenberg skill; used by every converted page except Home). Everything is scoped to .mec-page, so it works on any theme (Avada or not). */
/* Source of truth: MEC Timing design system (tokens + components). Snapshot 2026-10-21. */

/* ---------- Tokens ---------- */
.mec-page {
  --mec-orange: #F36C42;
  --mec-orange-hover: #F57F59;
  --mec-orange-ink: #B83E18;
  --mec-orange-ink-hover: #8F3014;
  --mec-ink: #474342;
  --mec-ink-muted: #6E6866;
  --mec-surface: #FCFCF7;
  --mec-surface-alt: #F1F0EB;
  --mec-surface-raised: #FFFFFF;
  --mec-surface-zebra: #FBFAF6;
  --mec-border: #DAD7D0;
  --mec-night: #2B2827;
  --mec-night-text: #E4DFDA;
  --mec-night-muted: #C9C4BF;
  --mec-on-night: #FCFCF7;
  --mec-mint: #B6D2CA;
  --mec-glacier: #1D3F5E;
  --mec-spruce: #1E4D4A;
  --mec-on-chip: #FFFFFF;
  --mec-font-display: "ADAM.CG PRO", Montserrat, Arial, sans-serif;
  --mec-font-heading: Aller, Montserrat, Arial, sans-serif;
  --mec-font-sans: Aller, Lato, Arial, sans-serif;
  --mec-font-data: Arial, Helvetica, sans-serif;
  --mec-space-2: 8px;
  --mec-space-3: 12px;
  --mec-space-4: 16px;
  --mec-space-5: 20px;
  --mec-space-6: 24px;
  --mec-space-7: 28px;
  --mec-space-8: 32px;
  --mec-space-10: 40px;
  --mec-space-14: 56px;
  --mec-space-16: 64px;
  --mec-space-24: 96px;
  --mec-radius-sm: 4px;
  --mec-radius-md: 6px;
  --mec-radius-lg: 8px;
  --mec-radius-xl: 10px;
  --mec-radius-2xl: 12px;
  --mec-content-width: 1200px;
  --mec-measure-hero: 780px;
  --mec-measure-text: 600px;
  --mec-measure-prose: 780px;
  /* left offset that lines text up with the 1200px content column */
  --mec-edge: max(0px, calc((100% - var(--mec-content-width)) / 2));
}

/* ---------- Base ---------- */
.mec-page { font-family: var(--mec-font-sans); font-size: 16px; line-height: 1.6; color: var(--mec-ink); background: var(--mec-surface); box-sizing: border-box; }
.mec-page *, .mec-page *::before, .mec-page *::after { box-sizing: border-box; }
.mec-page p { margin-top: 0; margin-bottom: 1em; }
.mec-page h2, .mec-page h3, .mec-page h4 { font-family: var(--mec-font-heading); color: var(--mec-ink); line-height: 1.25; margin-top: 0; margin-bottom: .5em; }
.mec-page h3 { font-size: 20px; font-weight: 700; }
.mec-page h4 { font-size: 17px; font-weight: 700; }
.mec-page ul, .mec-page ol { margin-top: 0; margin-bottom: 1em; padding-left: 1.3em; }
.mec-page li { margin: 0 0 .4em; }
.mec-page a { color: var(--mec-orange-ink); }
.mec-page a:hover { color: var(--mec-orange-ink-hover); }
.mec-page a:focus-visible { outline: 3px solid var(--mec-orange); outline-offset: 2px; }
.mec-page img { max-width: 100%; height: auto; }
.mec-page figure { margin-top: 0; margin-bottom: 1.5em; margin-left: 0; margin-right: 0; }
.mec-page figcaption { font-size: 14px; color: var(--mec-ink-muted); margin-top: .5em; }

/* ---------- Sections ---------- */
.mec-section { padding: var(--mec-space-24) var(--mec-space-8); }
.mec-page .mec-section > * { max-width: var(--mec-content-width); margin-left: auto; margin-right: auto; }
.mec-page .mec-section > :is(p, ul, ol) { max-width: var(--mec-measure-prose); margin-left: var(--mec-edge); margin-right: auto; }
.mec-section--alt { background: var(--mec-surface-alt); }
.mec-night { background: var(--mec-night); color: var(--mec-night-text); }
.mec-night h2, .mec-night h3 { color: var(--mec-on-night); }
.mec-night a { color: var(--mec-mint); }
.mec-night a:hover { color: var(--mec-on-night); }

/* ---------- Section header ---------- */
.mec-page .mec-eyebrow { margin-top: 0; margin-bottom: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--mec-orange-ink); }
.mec-night .mec-eyebrow { color: var(--mec-mint); }
.mec-page .mec-h2 { margin-top: 10px; margin-bottom: var(--mec-space-10); font-family: var(--mec-font-display); font-weight: 700; font-size: 34px; line-height: 1.15; color: var(--mec-ink); }
.mec-night .mec-h2 { color: var(--mec-on-night); }

/* ---------- Buttons (core Buttons block) ---------- */
.mec-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--mec-space-3); margin-top: 0; margin-bottom: 1em; }
.mec-page .wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--mec-space-2); min-height: 48px; padding: 0 var(--mec-space-6); border: 0; border-radius: var(--mec-radius-lg); font: 700 16px/1.2 var(--mec-font-sans); text-decoration: none; transition: background-color .15s, color .15s; }
.mec-page .wp-block-button.mec-btn--primary .wp-block-button__link { background: var(--mec-orange); color: var(--mec-night); }
.mec-page .wp-block-button.mec-btn--primary .wp-block-button__link:hover { background: var(--mec-orange-hover); color: var(--mec-night); }
.mec-page .wp-block-button.mec-btn--outline .wp-block-button__link { background: transparent; color: var(--mec-on-night); border: 1.5px solid var(--mec-on-night); }
.mec-page .wp-block-button.mec-btn--outline .wp-block-button__link:hover { background: var(--mec-on-night); color: var(--mec-night); }
.mec-page .wp-block-button.mec-btn--sm .wp-block-button__link { min-height: 36px; padding: 0 14px; border-radius: var(--mec-radius-md); font-size: 15px; }

/* ---------- Hero (dark band with the orange corner triangle) ---------- */
.mec-hero { position: relative; overflow: hidden; background: var(--mec-night); color: var(--mec-night-text); padding: var(--mec-space-24) var(--mec-space-8) 104px; }
.mec-hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38%; height: 100%; background: var(--mec-orange); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.mec-page .mec-hero > * { position: relative; z-index: 1; max-width: var(--mec-content-width); margin-left: auto; margin-right: auto; }
.mec-page .mec-hero > :is(h1, p) { margin-left: var(--mec-edge); margin-right: auto; }
.mec-page .mec-hero__title { margin-top: 24px; margin-bottom: 0; max-width: var(--mec-measure-hero); font-family: var(--mec-font-display); font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: 0.01em; color: var(--mec-on-night); }
.mec-page .mec-hero__lead { margin-top: 24px; margin-bottom: 0; max-width: var(--mec-measure-text); font-size: 19px; line-height: 1.55; }
.mec-page .mec-hero .wp-block-buttons { margin-top: var(--mec-space-8); }
.mec-page .mec-hero__trust { margin-top: 40px; margin-bottom: 0; font-size: 14px; color: var(--mec-night-muted); }
.mec-hero .mec-eyebrow { color: var(--mec-mint); }

/* ---------- Product / service cards ---------- */
.mec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--mec-space-5); }
.mec-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--mec-space-7); background: var(--mec-surface-raised); border: 1px solid var(--mec-border); border-radius: var(--mec-radius-2xl); transition: border-color .15s, transform .15s; }
.mec-card:hover { border-color: var(--mec-ink); transform: translateY(-2px); }
.mec-card > * { margin: 0; }
.mec-card__chip { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--mec-radius-xl); color: var(--mec-on-chip); }
.mec-card__chip::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--mec-icon) center / contain no-repeat; mask: var(--mec-icon) center / contain no-repeat; }
.mec-chip--glacier { background: var(--mec-glacier); }
.mec-chip--spruce { background: var(--mec-spruce); }
.mec-chip--orange { background: var(--mec-orange-ink); }
.mec-chip--ink { background: var(--mec-ink); }
.mec-icon--list { --mec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }
.mec-icon--stopwatch { --mec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2M9 2h6M12 2v3'/%3E%3C/svg%3E"); }
.mec-icon--signal { --mec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19 5a10 10 0 0 1 0 14M5 19a10 10 0 0 1 0-14'/%3E%3C/svg%3E"); }
.mec-icon--form { --mec-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.mec-page .mec-card__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--mec-ink-muted); }
.mec-page .mec-card__title { margin: 0; font-family: var(--mec-font-heading); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--mec-ink); }
.mec-page .mec-card__text { font-size: 15px; color: var(--mec-ink-muted); }
.mec-page .mec-card__more { margin-top: auto; font-weight: 700; }
.mec-page .mec-card__more a { text-decoration: none; }
.mec-page .mec-card__more a::after { content: ""; position: absolute; inset: 0; border-radius: var(--mec-radius-2xl); }

/* ---------- Payoff line (orange triangle + the one key line of a section) ---------- */
.mec-page .mec-payoff { display: flex; align-items: center; gap: var(--mec-space-3); margin-top: 0; margin-bottom: 1em; max-width: none; font-family: var(--mec-font-heading); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--mec-night); }
.mec-payoff::before { content: ""; flex: 0 0 22px; height: 22px; background: var(--mec-orange); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* ---------- Program chain ("one program, one job") ---------- */
.mec-chain { display: flex; flex-direction: column; gap: 30px; margin: 0 0 var(--mec-space-8); }
.mec-chain__step { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 20px 18px 44px; background: var(--mec-surface-raised); border: 1px solid var(--mec-border); border-radius: var(--mec-radius-xl); font-size: 15px; color: var(--mec-ink-muted); }
.mec-chain__step > p { display: flex; gap: 16px; align-items: baseline; margin: 0; }
.mec-chain__step strong { flex: 0 0 110px; font-size: 16px; color: var(--mec-ink); }
.mec-chain__step::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; border-radius: 3px; transform: translateY(-50%); background: var(--mec-ink); }
.mec-chain__step.is-glacier::before { background: var(--mec-glacier); }
.mec-chain__step.is-spruce::before { background: var(--mec-spruce); }
.mec-chain__step.is-orange::before { background: var(--mec-orange-ink); }
.mec-chain__step:not(:last-child)::after { content: "\2193"; position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); font-size: 18px; line-height: 26px; color: var(--mec-ink-muted); }

/* ---------- Split section (text + image, core Columns) ---------- */
.mec-split { gap: var(--mec-space-14); align-items: center; margin-bottom: 0; }
.mec-split .wp-block-image img { border-radius: var(--mec-radius-2xl); }
.mec-figure img { border-radius: var(--mec-radius-2xl); }

/* ---------- Testimonial (core Quote) ---------- */
.mec-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--mec-space-5); align-items: start; }
.mec-quote { display: flex; flex-direction: column; gap: var(--mec-space-5); margin: 0; padding: var(--mec-space-8); background: var(--mec-surface-raised); border: 1px solid var(--mec-border); border-radius: var(--mec-radius-2xl); }
.mec-quote::before { content: ""; width: 32px; height: 24px; background: var(--mec-orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0v5c-4 1-6 4-6 8h6v11H0zm18 0V14c0-8 4-13 12-14v5c-4 1-6 4-6 8h6v11H18z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0v5c-4 1-6 4-6 8h6v11H0zm18 0V14c0-8 4-13 12-14v5c-4 1-6 4-6 8h6v11H18z'/%3E%3C/svg%3E") no-repeat; }
.mec-page .mec-quote p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mec-ink); }
.mec-page .mec-quote cite { display: block; padding-top: var(--mec-space-4); border-top: 1px solid var(--mec-border); font-size: 14px; font-style: normal; color: var(--mec-ink-muted); }
.mec-page .mec-quote cite strong { font-size: 16px; color: var(--mec-ink); }

/* ---------- Tables (core Table) ---------- */
.mec-table-box { overflow-x: auto; margin: 0 0 var(--mec-space-8); background: var(--mec-surface-raised); border: 1px solid var(--mec-border); border-radius: var(--mec-radius-2xl); }
.mec-table-box table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; font-size: 15px; }
.mec-table-box th, .mec-table-box td { padding: 14px var(--mec-space-6); text-align: left; vertical-align: middle; border: 0; border-top: 1px solid var(--mec-border); }
.mec-table-box thead th { background: var(--mec-ink); color: var(--mec-surface); border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.mec-table-box tbody tr:nth-child(even) { background: var(--mec-surface-zebra); }
.mec-table-box.mec-table--data td:not(:first-child), .mec-table-box.mec-table--version td:nth-child(2) { font-family: var(--mec-font-data); font-variant-numeric: tabular-nums; }

/* ---------- FAQ (core Details) ---------- */
.mec-faq { max-width: 820px; }
.mec-faq .wp-block-details { margin: 0 0 var(--mec-space-3); padding: var(--mec-space-4) var(--mec-space-6); background: var(--mec-surface-raised); border: 1px solid var(--mec-border); border-radius: var(--mec-radius-xl); }
.mec-faq .wp-block-details summary { font-family: var(--mec-font-heading); font-weight: 700; color: var(--mec-ink); cursor: pointer; }
.mec-faq .wp-block-details p { margin: var(--mec-space-3) 0 0; }

/* ---------- Closing call to action band ---------- */
.mec-cta { text-align: left; }
.mec-cta .wp-block-buttons { margin-top: var(--mec-space-6); }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .mec-section { padding: var(--mec-space-16) var(--mec-space-4); }
  .mec-hero { padding: var(--mec-space-16) var(--mec-space-4) 88px; }
  .mec-hero::after { width: 72px; height: 72px; top: auto; }
  .mec-page .mec-h2 { font-size: 28px; }
  .mec-split { gap: var(--mec-space-8); }
}