/* ============================================================
 * AI4EBITDA - BASE STYLES
 * Variables, reset, typography, utilities, buttons,
 * navigation, footer, sections, FAQ, light overrides,
 * legal footer strip. Loaded on every page.
 * ============================================================ */

/* ============================================================
 * AI4EBITDA - BASE STYLES
 * Variables, reset, typography, utilities, buttons,
 * navigation, footer, sections, FAQ, light overrides,
 * legal footer strip. Used by every page.
 * ============================================================ */

/* ===================== VARIABLES ===================== */
:root {
  --teal:   #33BECA;
  --navy:   #215968;
  --lime:   #DBFA1A;
  --blue:   #4F81BD;
  --void:   #07090d;
  --void2:  #0d1520;
  --panel:  #132231;
  --light:  #f0f6fa;
  --white:  #f2f6fa;
  --g1:     #a8c4d8;
  --g2:     #6a90a8;
  --g3:     #2a4055;
  --bdr:    #1a2e40;
  --body-min: 1.05rem;
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--void);
  color: var(--white);
  font-size: var(--body-min);
  line-height: 1.7;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.012;
  pointer-events: none;
  z-index: 9998;
}
a { color: var(--teal); text-decoration: none; }
p { font-weight: 300; color: var(--g1); font-size: var(--body-min); line-height: 1.75; }
h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; line-height: 1.15; }

/* ===================== UTILITY ===================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.8rem; }
.eyebrow {
  font-size: .88rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.1rem; font-weight: 700;
}
.eyebrow::before { content: ''; display: block; width: 2rem; height: 2px; background: var(--teal); flex-shrink: 0; }
.eyebrow-centered { justify-content: center; }
.eyebrow-centered::before { display: none; }
.sec-title {
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  font-weight: 800; line-height: 1.12; margin-bottom: 1.3rem; color: var(--white);
}
.sec-title em { font-style: italic; font-weight: 300; color: var(--teal); }
.sec-title .lime { color: var(--lime); }
.body-copy { font-weight: 300; color: var(--g1); font-size: var(--body-min); line-height: 1.8; }
.body-emphasis { color: var(--lime); font-weight: 600; }

/* Dark section body text always uses --g1, never --blue */
.on-dark p, .on-dark .body-copy { color: var(--g1); }

/* Light section overrides */
.on-light { background: var(--light) !important; }
.on-light .sec-title { color: #0d1520; }
.on-light .sec-title em { color: var(--navy); }
.on-light .eyebrow { color: var(--navy); }
.on-light .eyebrow::before { background: var(--navy); }
.on-light p, .on-light .body-copy { color: #2a3a4a; }

/* Scroll reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.rv.on { opacity: 1; transform: none; }

/* Stagger delays */
.d1 { animation: fu .55s .05s both; }
.d2 { animation: fu .55s .15s both; }
.d3 { animation: fu .55s .28s both; }
.d4 { animation: fu .55s .4s both; }
.d5 { animation: fu .55s .52s both; }
@keyframes fu { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* ===================== BUTTONS ===================== */
.btn-lime {
  display: inline-block;
  background: var(--lime); color: var(--void);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 700; cursor: pointer; border: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: opacity .2s, transform .15s;
}
.btn-lime:hover { opacity: .85; transform: translateY(-2px); }
.btn-teal {
  display: inline-block;
  background: var(--teal); color: var(--void);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 700; cursor: pointer; border: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: opacity .2s, transform .15s;
}
.btn-teal:hover { opacity: .85; transform: translateY(-2px); }
.btn-ghost {
  display: inline-block;
  background: transparent; color: var(--g1); border: 1px solid var(--g3);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 600; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--teal); border-color: var(--teal); }
.form-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.form-message {
  margin-top: .9rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; line-height: 1.5; text-align: center;
}
.form-message.pending { color: var(--g1); }
.form-message.success { color: var(--lime); }
.form-message.error { color: #ff8a8a; }

/* ===================== CTA + CONTACT FORM ===================== */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.cta-band { padding: 5.5rem 0; }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.cta-copy .sec-title { margin-bottom: 1.1rem; }
.cta-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.cta-footnote {
  margin-top: 2rem; font-size: .95rem; font-style: italic; font-weight: 300;
  color: var(--white); border-left: 2px solid var(--teal); padding-left: 1.1rem;
  line-height: 1.7;
}

.form-box { background: var(--void2); border: 1px solid var(--g3); padding: 2.2rem; }
.form-title { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 1.5rem; }
.fg { margin-bottom: 1rem; }
.fg label {
  display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g1); margin-bottom: .35rem; font-weight: 700;
}
.fg input, .fg select, .fg textarea {
  width: 100%; background: var(--panel); border: 1px solid var(--g3);
  color: var(--white); padding: .65rem 1rem;
  font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 300; outline: none;
  transition: border-color .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--teal); }
.fg select { appearance: none; cursor: pointer; }
.fg input::placeholder { color: var(--g3); }
.fg select option { background: var(--panel); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-submit { width: 100%; margin-top: .5rem; }
.recaptcha {
  font-size: .7rem; letter-spacing: .1em; color: var(--g2);
  text-align: center; margin-top: .8rem; font-weight: 400;
}
.recaptcha-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.recaptcha-link:hover,
.recaptcha-link:focus-visible {
  color: var(--teal);
  text-decoration: underline;
}
.turnstile-wrap {
  min-height: 65px; margin: .8rem 0 .4rem;
  display: flex; justify-content: center;
}

/* ===================== NAV ===================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(7,9,13,.93); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--g3); min-height: 96px;
  display: flex; align-items: center;
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.8rem;
  display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: .7rem;
}
.nav-primary {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.nav-actions {
  display: flex; align-items: center; gap: .75rem;
}
.nav-logo {
  display: flex; align-items: center; cursor: pointer; height: 32px;
  flex-shrink: 0;
}

.nav-links {
  display: flex; gap: 1.4rem; align-items: center; justify-content: space-between;
  width: 100%; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.08);
}
.nav-links a {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); padding: .25rem 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s; font-weight: 600;
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); border-bottom-color: var(--teal); }

/* Mobile nav */
.nav-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--g1); margin: 5px 0; transition: .3s; }

/* PAGES (SPA) - REMOVED in PHP version. Each page is its own file now. */
/* ===================== HERO ===================== */
.hero {
  min-height: 100vh; padding: 11rem 0 5rem;
  background: var(--void);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(33,89,104,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,89,104,.2) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 780px; }
.hero-provocation {
  font-size: clamp(1rem, 1.6vw, 1.15rem); font-style: italic; font-weight: 300;
  color: var(--white); margin-bottom: 1.3rem; line-height: 1.6; opacity: .82;
}
.hero-h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 800;
  line-height: 1.08; margin-bottom: 1.5rem; color: var(--white);
}
.hero-h1 em { font-style: italic; font-weight: 300; color: var(--teal); }
.hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--g1); font-weight: 300;
  max-width: 580px; margin-bottom: 2.2rem; line-height: 1.85;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .65rem; }
.hero-audience-line {
  max-width: 620px;
  margin-bottom: 3.5rem;
  color: var(--g2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.55;
  text-transform: uppercase;
}

#cost-of-knowing-too-late { scroll-margin-top: 72px; }

/* Proof bar */
.proof-bar-kicker {
  display: block;
  max-width: 820px;
  margin: 0 0 .75rem;
  color: var(--g1);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.55;
  text-transform: uppercase;
}
.proof-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--g3); background: var(--g3); gap: 1px;
  max-width: 820px;
}
.pb-item {
  background: var(--panel); padding: 1.4rem 1.5rem;
  cursor: pointer; overflow: hidden; position: relative;
  transition: background .2s;
}
.pb-item:hover { background: var(--bdr); }
.pb-num {
  display: block; font-size: 2rem; font-weight: 800; color: var(--teal); line-height: 1;
}
.pb-label {
  display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g1); margin-top: .35rem; font-weight: 600;
}
.pb-pull {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--lime); color: var(--void);
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .4rem .8rem;
  transform: translateY(100%); transition: transform .25s ease;
}
.pb-item:hover .pb-pull { transform: translateY(0); }

/* Scroll drip */
.scroll-drip {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  margin-top: 2.8rem; opacity: .45;
}
.drip-line { width: 1px; height: 38px; background: linear-gradient(var(--teal), transparent); animation: drip 2s ease-in-out infinite; }
.drip-txt { font-size: .58rem; letter-spacing: .25em; color: var(--g2); text-transform: uppercase; }
@keyframes drip { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ===================== TICKER ===================== */
.ticker-wrap {
  background: var(--navy); border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3);
  overflow: hidden; padding: .7rem 0;
}
.ticker-track { display: flex; gap: 2.5rem; white-space: nowrap; animation: ticker 32s linear infinite; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tick-item { font-size: .72rem; letter-spacing: .2em; color: var(--white); flex-shrink: 0; font-weight: 500; }
.tick-dot { color: var(--lime); margin: 0 .3rem; }

/* ===================== SECTION PATTERNS ===================== */
.sec-dark  { background: var(--void); }
.sec-dark2 { background: var(--void2); }
.sec-panel { background: var(--panel); }
.sec-navy  { background: var(--navy); }
.sec-light { background: var(--light); }
.section { padding: 5.5rem 0; }

/* Grid overlay for headers */
.grid-bg::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(33,89,104,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,89,104,.18) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 30% 50%, black 0%, transparent 100%);
}

/* ===================== PAGE HEADER ===================== */
.page-hdr {
  padding: 10.5rem 0 4.5rem; position: relative; overflow: hidden;
  background: var(--void2);
}
.ph-eyebrow { font-size: .88rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 1rem; }
.ph-h1 {
  font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 800;
  line-height: 1.1; color: var(--white); margin-bottom: 1.2rem;
}
.ph-h1 em { font-style: italic; font-weight: 300; color: var(--teal); opacity: .85; }
.ph-sub { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--g1); font-weight: 300; max-width: 640px; line-height: 1.8; }


/* ===================== FOOTER ===================== */
footer { background: var(--void); border-top: 1px solid var(--g3); padding: 2.8rem 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo { display: flex; align-items: center; }
.footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-links a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g2); font-weight: 600; transition: color .2s; cursor: pointer; }
.footer-links a:hover { color: var(--teal); }
.footer-copy { font-size: .72rem; letter-spacing: .12em; color: var(--g3); font-weight: 600; }


/* ===================== FAQ ===================== */
.faq-section { padding: 5rem 0; background: var(--void2); }
.faq-list { max-width: 740px; margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--g3); }
.faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem 0; background: none; border: none; cursor: pointer; text-align: left;
}
.faq-q { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.faq-icon { font-size: 1.4rem; color: var(--teal); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-ans-inner { padding: 0 0 1.3rem; font-size: .97rem; color: var(--g1); font-weight: 300; line-height: 1.75; }

/* ===== LIGHT SECTION OVERRIDES ===== */
/* All light-bg sections (#ddeef6) need strong contrast */
.on-light { color: #0d1520; }
.on-light .eyebrow { color: var(--navy); font-weight: 700; }
.on-light .eyebrow::before { background: var(--navy); }

/* H2 and body  -  near-black so they pop on light blue */
.on-light .sec-title { color: #0d1520 !important; }
.on-light .sec-title em { color: var(--navy) !important; font-weight: 600; }
.on-light p,
.on-light .body-copy,
.on-light .cn-desc,
.on-light .triplet-body,
.on-light .deliv-content p { color: #2a3a4a !important; font-weight: 400; }

/* Page headers on light: the big italic H1 that was washing out */
.on-light .ph-h1 { color: #0d1520 !important; }
.on-light .ph-h1 em { color: var(--navy) !important; }
.on-light .ph-eyebrow { color: var(--navy) !important; }
.on-light .ph-sub { color: #2a3a4a !important; }

/* Causal chain on white/light bg */
.on-light .cn { background: #fff; border-color: #b8d4e0; border-top-color: #b8d4e0; }
.on-light .cn.hl { background: rgba(33,89,104,.07); border-color: var(--navy) !important; border-top-color: var(--navy) !important; }
.on-light .cn.hl .cn-title { color: var(--navy) !important; }
.on-light .cn-title { color: #0d1520 !important; font-weight: 700; }
.on-light .cn-num { color: #6a90a8; }
.on-light .chain-footnote { color: #4a6a7a !important; }

/* What-if cards */
.on-light .wif-card { background: #fff; border-color: #b8d4e0; }
.on-light .wif-q { color: var(--navy) !important; }
.on-light .wif-txt { color: #0d1520 !important; }
.on-light .wif-card::before { background: var(--lime); }

/* Deliverables on light */
.on-light .deliv-row { border-bottom-color: #b8d4e0; }
.on-light .deliv-row h3 { color: #0d1520 !important; font-weight: 700; }
.on-light .deliv-num { background: var(--navy) !important; color: #fff !important; }
.on-light .deliv-group-title { color: var(--navy) !important; border-left-color: var(--navy) !important; }
.on-light .deliv-row::before { background: var(--navy); }

/* Triplet */
.on-light .triplet-item { border-color: #b8d4e0; }
.on-light .triplet-lead { color: var(--navy) !important; }

/* Stats */
.on-light .stat-num { color: var(--navy) !important; }
.on-light .stat-lbl { color: #4a6a7a !important; }
.on-light .stat-box { background: #fff; border-color: #b8d4e0; }

/* FAQ on light */
.on-light .faq-q { color: #0d1520 !important; }
.on-light .faq-icon { color: var(--navy) !important; }
.on-light .faq-item { border-bottom-color: #b8d4e0; }
.on-light .faq-ans-inner { color: #2a3a4a !important; }

/* Gap banner on light */
.on-light .gap-col h3 { color: #0d1520 !important; }
.on-light .gap-col p { color: #2a3a4a !important; }
.on-light .gap-cta { border-color: var(--navy) !important; background: rgba(33,89,104,.06) !important; }
.on-light .gap-cta h3 { color: var(--navy) !important; }

/* Process steps on light */
.on-light .ps-title { color: #0d1520 !important; }
.on-light .ps-desc { color: #2a3a4a !important; }
.on-light .ps-num { border: none !important; color: var(--void) !important; background: var(--lime) !important; }

/* Pillar/way cards on light */
.on-light .pillar-card,
.on-light .way-card,
.on-light .path-card { background: #fff !important; border-color: #b8d4e0 !important; }
.on-light .pillar-title,
.on-light .way-title,
.on-light .path-title { color: #0d1520 !important; }
.on-light .pillar-desc,
.on-light .way-desc,
.on-light .path-desc { color: #2a3a4a !important; }
.on-light .way-sub { color: var(--navy) !important; }
.on-light .way-pct { color: var(--navy) !important; }
.on-light .way-case { color: #4a6a7a !important; }
.on-light .way-items li { color: #2a3a4a !important; border-bottom-color: #b8d4e0 !important; }
.on-light .way-items li::before { color: var(--navy) !important; }

/* Scatter/heatmap on light */
.on-light .scatter-outer,
.on-light .heatmap-outer { background: #fff; border-color: #b8d4e0; }
.on-light .scatter-label-top,
.on-light .heatmap-title { color: var(--navy) !important; }
.on-light .scatter-x-lbl,
.on-light .hmap-lbl { color: #4a6a7a !important; }
.on-light .scatter-container { background: #f5f9fb !important; border-color: #b8d4e0 !important; }
.on-light .leg-item { color: #4a6a7a !important; }

/* Zone bars on light */
.on-light .zb-name { color: #2a3a4a !important; }
.on-light .zb-pct { color: var(--navy) !important; }
.on-light .zb-track { background: #c8dce8 !important; }

/* Form on light */
.on-light .form-box { background: #fff !important; border-color: #b8d4e0 !important; }
.on-light .form-title { color: #0d1520 !important; }
.on-light .fg label { color: #4a6a7a !important; }
.on-light .fg input,
.on-light .fg select { background: #f5f9fb !important; border-color: #b8d4e0 !important; color: #0d1520 !important; }

/* Proof cards on light */
.on-light .proof-card { background: #fff !important; border-color: #b8d4e0 !important; }
.on-light .pc-client { color: #0d1520 !important; }
.on-light .pc-lbl { color: #2a3a4a !important; }
.on-light .pc-num { color: var(--navy) !important; }

/* Section-level H2 that bypasses sec-title class */
section.on-light h2 { color: #0d1520 !important; }
section.on-light h3 { color: #0d1520 !important; }
section.on-light p { color: #2a3a4a !important; }
div.on-light h2 { color: #0d1520 !important; }
div.on-light p { color: #2a3a4a !important; }


/* Dark boxes inside light sections  -  keep dark bg text colours */
.dark-box { background: var(--panel) !important; }
.dark-box div { color: #ffffff !important; }
.dark-box p { color: var(--g1) !important; font-weight: 300 !important; }


/* ===== FOOTER LEGAL STRIP ===== */
.footer-legal {
  border-top: 1px solid var(--g3);
  margin-top: 1.5rem; padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
}
.footer-legal span { font-size: .65rem; letter-spacing: .1em; color: var(--g3); font-weight: 400; }
.footer-legal a {
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--g3);
  transition: color .2s, border-color .2s;
}
.footer-legal a:hover { color: var(--teal); border-color: var(--teal); }