/* MHI brand base for mhigrowthengine.com
   Source of truth: companies/mhi-media/projects/mhigrowthengine-rebrand/brand-spec.md
   (values copied from mhimedia.com's Webflow stylesheet). Load this on every page
   before any page-specific stylesheet. Only visual rules live here. */

/* 1. Fonts (self-hosted, licence confirmed by toform) */
@font-face { font-family: Helveticaneue; src: url("/brand/fonts/HelveticaNeue.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Helveticaneue; src: url("/brand/fonts/HelveticaNeue-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Abcwhytemonotrial; src: url("/brand/fonts/ABCWhyteMono-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Abcwhytemonotrial; src: url("/brand/fonts/ABCWhyteMono-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }

/* 2. Tokens */
:root {
  --blue: #0057ff;
  --white: #fff;
  --white-10: #ffffff1a;
  --focus: #4d65ff;
  --font-sans: Helveticaneue, Arial, sans-serif;
  --font-mono: Abcwhytemonotrial, Arial, sans-serif;
  --notch-tag: polygon(0 0, 100% 0, 100% calc(50% - 5px), calc(100% - 6px) 50%, 100% calc(50% + 5px), 100% 100%, 0 100%, 0 calc(50% + 5px), 6px 50%, 0 calc(50% - 5px));
  --notch-button: polygon(0 0, 100% 0, 100% 37%, calc(100% - .55em) 50%, 100% 63%, 100% 100%, 0 100%, 0 63%, .55em 50%, 0 37%);
  --notch-card: polygon(0 0, 100% 0, 100% calc(50% - 8px), calc(100% - 9px) 50%, 100% calc(50% + 8px), 100% 100%, 0 100%, 0 calc(50% + 8px), 9px 50%, 0 calc(50% - 8px));
  --notch-tile: polygon(0 0, 100% 0, 100% calc(50% - 7px), calc(100% - 8px) 50%, 100% calc(50% + 7px), 100% 100%, 0 100%, 0 calc(50% + 7px), 8px 50%, 0 calc(50% - 7px));
}

/* 3. Fluid root size (mhimedia.com's rem scale) */
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
@media screen and (max-width: 1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }

/* 4. Element defaults */
body {
  background-color: var(--blue);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2 { margin: 0; font-size: 4rem; font-weight: 400; line-height: 1; }
h3 { margin: 0; font-size: 2rem; font-weight: 400; line-height: 1.1; }
h4, h5, h6 { margin: 0; font-weight: 500; }
p { color: inherit; margin: 0; }
a { color: inherit; text-decoration: none; }
*[tabindex]:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible { outline: 0.125rem solid var(--focus); outline-offset: 0.125rem; }
@media screen and (max-width: 767px) { h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } }

/* 5. Components (class names prefixed mhi- so they never collide with page classes) */
.mhi-page-wrapper { overflow: clip; }
.mhi-padding-global { padding-left: 2.5rem; padding-right: 2.5rem; }
.mhi-container-large { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }
.mhi-container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
.mhi-container-small { width: 100%; max-width: 40rem; margin-left: auto; margin-right: auto; }
.mhi-section-medium { padding-top: 5rem; padding-bottom: 5rem; }
.mhi-section-small { padding-top: 3rem; padding-bottom: 3rem; }
.mhi-section-white { background-color: var(--white); color: var(--blue); }
.mhi-section-white p, .mhi-section-white h1, .mhi-section-white h2, .mhi-section-white h3, .mhi-section-white a { color: var(--blue); }
.mhi-top-line { border-top: 2px solid var(--white); }
.mhi-bottom-line { border-bottom: 2px solid var(--white); }
.mhi-line { background-color: var(--white); width: 100%; height: 2px; }
.mhi-vline { background-color: var(--white); width: 2px; height: 2rem; }
.mhi-muted { opacity: .6; }
.mhi-mono { font-family: var(--font-mono); font-weight: 500; font-size: .75rem; text-transform: uppercase; }
.mhi-h1 { font-size: 4vw; line-height: 1.1; letter-spacing: -.5px; font-weight: 400; }
.mhi-h3 { font-size: 2rem; line-height: 1; font-weight: 400; }
.mhi-body { font-size: .875rem; line-height: 1.1; font-weight: 500; }
.mhi-number { font-size: 2.5rem; line-height: 1; font-weight: 400; }

/* Nav */
.mhi-nav { position: relative; z-index: 2; width: 100%; background-color: var(--blue); border-bottom: 2px solid var(--white); padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mhi-nav-row { display: flex; flex-flow: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; width: 100%; }
.mhi-brand { display: block; width: 100%; max-width: 20.625rem; color: var(--white); line-height: 0; }
.mhi-brand svg { width: 100%; height: auto; display: block; }
.mhi-brand:hover { opacity: .8; }
.mhi-navlink { display: inline-flex; align-items: center; gap: .5rem; color: var(--white); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; text-decoration: none; transition: all .3s; }
.mhi-navlink:hover { opacity: .6; }
.mhi-time { flex: none; width: 100%; max-width: 8rem; text-align: right; font-family: var(--font-mono); font-size: .7575rem; font-weight: 500; text-transform: uppercase; }

/* Button (white block, blue text, side notches) */
.mhi-button { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; white-space: nowrap; background-color: var(--white); color: var(--blue); clip-path: var(--notch-button); padding: .75em 1.5em; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; line-height: 1; text-transform: uppercase; text-decoration: none; transition: opacity .2s; border: 0; }
.mhi-button:hover { opacity: .85; color: var(--blue); }
.mhi-button.is-blue { background-color: var(--blue); color: var(--white); }

/* Tag pill (translucent on blue, solid blue on white) */
.mhi-tag { display: inline-flex; justify-content: center; align-items: center; gap: .25rem; background-color: var(--white-10); color: inherit; clip-path: var(--notch-tag); padding: 8px .875rem; font-family: var(--font-sans); font-size: .875rem; font-weight: 500; line-height: 1.1; text-transform: capitalize; position: relative; }
.mhi-tag.is-blue { background-color: var(--blue); color: var(--white); }
.mhi-tag.is-white { background-color: var(--white); color: var(--blue); }

/* Stat box */
.mhi-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; width: 100%; }
.mhi-stat { display: flex; flex-flow: column; justify-content: center; align-items: center; gap: .75rem; text-align: center; background-color: var(--white-10); clip-path: var(--notch-card); padding: 2rem 1rem; position: relative; }
.mhi-stat.is-white { background-color: var(--white); color: var(--blue); }
.mhi-stat .mhi-number { font-size: 2.5rem; line-height: 1; }
.mhi-stat .mhi-body { font-size: .875rem; font-weight: 500; }

/* Card (translucent fill, side notches) and square logo tile */
.mhi-card { background-color: var(--white-10); clip-path: var(--notch-card); padding: 2rem 1.5rem; position: relative; }
.mhi-card.is-white { background-color: var(--white); color: var(--blue); }
.mhi-tile { aspect-ratio: 1; display: flex; justify-content: center; align-items: center; background-color: var(--white-10); clip-path: var(--notch-tile); width: 7.5rem; max-width: 100%; padding: 1rem 1.25rem; flex: none; }

/* Dashed CTA panel (case-study sticky card) */
.mhi-cta-panel { border: 2px dashed var(--white); background-color: var(--blue); padding: 2rem; }

/* FAQ rows */
.mhi-faq-item { border-top: 2px solid var(--white); overflow: hidden; }
.mhi-faq-item:last-child { border-bottom: 2px solid var(--white); }
.mhi-faq-trigger { display: flex; justify-content: space-between; align-items: flex-start; gap: .75em; cursor: pointer; padding: 1.25em 0; transition: all .2s; }

/* Footer */
.mhi-footer { padding-top: 5rem; padding-bottom: 2.5rem; }
.mhi-footer-logo { display: block; width: 100%; color: var(--white); line-height: 0; }
.mhi-footer-logo svg { width: 100%; height: auto; display: block; }
.mhi-footer-middle { border-bottom: 2px solid var(--white); margin-top: 5rem; padding-bottom: 2.5rem; }
.mhi-footer-links { display: flex; flex-flow: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.mhi-footer-link { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; transition: all .2s; }
.mhi-footer-link:hover { opacity: .5; }
.mhi-legal { display: flex; justify-content: center; align-items: center; gap: 1rem; text-transform: uppercase; font-family: var(--font-mono); font-size: .75rem; font-weight: 500; padding-top: 1.5rem; margin-bottom: 1rem; }
.mhi-legal-links { display: flex; flex-flow: wrap; justify-content: flex-start; align-items: center; gap: 2rem; }

/* Responsive */
@media screen and (max-width: 991px) { .mhi-brand { max-width: 15rem; } .mhi-stats { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) {
  .mhi-padding-global { padding-left: 1.25rem; padding-right: 1.25rem; }
  .mhi-section-medium { padding-top: 3rem; padding-bottom: 3rem; }
  .mhi-section-small { padding-top: 2rem; padding-bottom: 2rem; }
  .mhi-nav { padding-top: 2rem; padding-bottom: 2rem; }
  .mhi-brand { max-width: 10rem; }
  .mhi-time { width: auto; }
  .mhi-stats { grid-template-columns: 1fr; }
  .mhi-stat .mhi-number { font-size: 2rem; }
  .mhi-h1 { font-size: 1.5rem; }
  .mhi-h3 { font-size: 1.5rem; }
  .mhi-footer-middle { margin-top: 3rem; }
  .mhi-legal { flex-flow: column; text-align: center; }
  .mhi-legal-links { justify-content: center; gap: 1rem; }
  .mhi-tile { width: 6rem; }
}
@media screen and (max-width: 479px) { .mhi-brand { max-width: 100%; } .mhi-nav-row { gap: 2rem; } .mhi-time { text-align: left; width: auto; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }