/* ============================================================================
   Octave Resolution — Modern theme layer (2026)
   Loaded LAST on every page so it restyles the whole site via shared classes.
   Direction: deep-navy + vivid emerald, Fraunces display serif + Inter body,
   radial-mesh hero, soft rounded cards with per-sector colour accents.
   ============================================================================ */

:root {
  --navy:        #0B2545;
  --navy-2:      #123a66;
  --ink:         #0B2545;
  --emerald:     #0FB98B;
  --emerald-700: #0C9D75;
  --emerald-800: #097A5B;   /* AA-safe emerald for text/links on white (4.8:1) */
  --emerald-300: #6FE0C0;
  --amber:       #F5B43F;
  --page:        #F6F9FC;
  --surface:     #FFFFFF;
  --line:        #E6EDF5;
  --text:        #34414F;   /* ~8.7:1 on white */
  --muted:       #586679;   /* AA-safe secondary text on white/page (5.1:1) */
  --radius:      18px;
  --shadow-sm:   0 1px 2px rgba(11,37,69,.05), 0 2px 6px rgba(11,37,69,.05);
  --shadow-md:   0 6px 18px rgba(11,37,69,.08), 0 2px 6px rgba(11,37,69,.05);
  --shadow-lg:   0 18px 40px rgba(11,37,69,.14), 0 6px 14px rgba(11,37,69,.08);
  --shadow-emerald: 0 10px 26px rgba(15,185,139,.32);
}

/* ---- Base ---------------------------------------------------------------- */
body {
  background: var(--page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 600;
}
a { text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
/* anti-fade safety: never leave core content invisible */
.hero, .hero *, .service-card, .stat, .content-section { opacity: 1 !important; }

/* ---- Header / nav — compact single-row bar with logo mark --------------- */
header {
  background: rgba(11, 37, 69, 0.92) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 10px 30px rgba(11,37,69,.16) !important;
  position: sticky !important; top: 0; z-index: 1000;
}
header .container { position: relative; max-width: 1240px !important; padding: 0 24px !important; }
.header-content {
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
  gap: 16px; min-height: 64px; padding: 8px 0 !important;
}

/* Brand: emerald-check tile + tight Fraunces wordmark */
.brand-name {
  display: inline-flex !important; align-items: center; gap: 11px;
  font-family: 'Fraunces', serif !important; color: #fff !important;
  font-size: 1.15rem !important; font-weight: 600 !important; letter-spacing: -0.02em;
  line-height: 1.04; white-space: nowrap; flex: 0 0 auto;
}
.brand-name::before {
  content: ""; width: 36px; height: 36px; flex: none; border-radius: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='11' fill='%230B2545'/%3E%3Crect x='1.5' y='1.5' width='37' height='37' rx='9.5' fill='none' stroke='%230FB98B' stroke-opacity='.45'/%3E%3Cpath d='M11 20.5l5.6 5.6L29 13.4' fill='none' stroke='%230FB98B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow: 0 4px 14px rgba(15,185,139,.32);
}

/* Nav: inline on desktop, pushed right, animated emerald underline */
.main-nav {
  display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
  gap: 2px; margin-left: auto; min-width: 0; max-width: none; overflow-x: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a {
  position: relative; padding: 8px 12px; border-radius: 8px; font-weight: 500;
  color: rgba(255,255,255,.82) !important; font-size: .94rem; white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.main-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--emerald); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover { color: #fff !important; background: rgba(255,255,255,0.07); opacity: 1; }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* CTA pill */
.crisis-support {
  flex: 0 0 auto; margin-left: 6px;
  background: var(--emerald) !important; color: #042b22 !important;
  border-radius: 999px !important; font-weight: 700 !important; font-size: .9rem !important;
  padding: 10px 18px !important; white-space: nowrap;
  box-shadow: var(--shadow-emerald); transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.crisis-support:hover {
  background: var(--emerald-700) !important; transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,185,139,.45);
}

/* Hamburger button (hidden on desktop) */
.mobile-menu-btn {
  display: none; flex: none; width: 42px; height: 42px; border-radius: 10px;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .16s ease;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,.16); }

/* Below 1000px the inline nav can't fit cleanly → collapse to a dropdown panel */
@media (max-width: 1000px) {
  .mobile-menu-btn { display: inline-flex !important; margin-left: auto; order: 2; }
  .crisis-support { order: 3; margin-left: 12px; }
  .main-nav {
    order: 4; position: absolute; left: 0; right: 0; top: calc(100% + 1px);
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
    background: #0B2545; border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 44px rgba(0,0,0,.38); padding: 10px 16px 16px; overflow: hidden;
    max-height: 0; opacity: 0; pointer-events: none;
    transition: max-height .26s ease, opacity .2s ease;
  }
  .main-nav.open { max-height: 78vh; opacity: 1; pointer-events: auto; overflow-y: auto; }
  .main-nav a { padding: 13px 12px; font-size: 1rem; border-radius: 10px; color: rgba(255,255,255,.9) !important; }
  .main-nav a::after { display: none; }
  .main-nav a:hover { background: rgba(255,255,255,0.09); }
}
@media (max-width: 560px) {
  /* Logo-only brand on phones — the full wordmark + CTA can't share a phone row
     (was overflowing). The mark keeps the brand identity; wordmark returns ≥560px. */
  .brand-name { font-size: 0 !important; gap: 0 !important; flex: 0 0 auto; }
  .brand-name::before { width: 34px; height: 34px; }
  .crisis-support { padding: 9px 14px !important; font-size: .82rem !important; margin-left: 8px; }
  .header-content { gap: 10px; }
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(15,185,139,.30), transparent 60%),
    radial-gradient(800px 460px at 100% 8%, rgba(245,180,63,.18), transparent 55%),
    linear-gradient(160deg, #0B2545 0%, #0E2C54 55%, #0B2545 100%) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {            /* subtle top hairline glow */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}
.hero h1 {
  color: #fff !important;
  font-size: clamp(2.3rem, 5.2vw, 3.7rem) !important;
  line-height: 1.08 !important; letter-spacing: -0.02em; font-weight: 600;
  max-width: 16ch; margin-left: auto; margin-right: auto;
}
.hero p { color: rgba(255,255,255,.92) !important; }
.hero .subtext { color: rgba(255,255,255,.78) !important; }

/* ---- Buttons ------------------------------------------------------------ */
.cta-button {
  background: linear-gradient(180deg, var(--emerald), var(--emerald-700)) !important;
  color: #042b22 !important;
  border: none !important; border-radius: 12px !important;
  font-weight: 600 !important; letter-spacing: .005em;
  box-shadow: var(--shadow-emerald) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.cta-button:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 14px 34px rgba(15,185,139,.42) !important; }
.cta-button.secondary {
  background: rgba(255,255,255,.06) !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.45) !important; box-shadow: none !important;
}
.cta-button.secondary:hover { background: rgba(255,255,255,.14) !important; }

/* ---- Section rhythm ----------------------------------------------------- */
.services { background: var(--page) !important; }
.services h2, .services h3 { color: var(--ink) !important; font-size: clamp(1.7rem, 3.4vw, 2.3rem) !important; }
.services-intro { color: var(--muted) !important; font-size: 1.075rem; }

/* ---- Category titles (per-sector accent) -------------------------------- */
.category-title {
  border-left: 0 !important; padding-left: 0 !important;
  display: flex; align-items: center; gap: 12px;
  font-size: 1.35rem !important; color: var(--ink) !important;
}
.category-title::before {
  content: ""; width: 6px; height: 1.5em; border-radius: 999px;
  background: var(--emerald); flex: 0 0 auto;
}
#home-improvements .category-title::before { background: #0FB98B; }
#travel .category-title::before            { background: #3B82F6; }
#motoring .category-title::before          { background: #F5B43F; }
#money .category-title::before             { background: #10B981; }
#energy .category-title::before            { background: #8B5CF6; }
#retail .category-title::before            { background: #F43F73; }

/* ---- Cards -------------------------------------------------------------- */
.service-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 26px !important;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.service-card::before {     /* accent top bar, reveals on hover */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--emerald); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
a.service-card:hover, a.service-card:focus-visible {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--emerald-300) !important;
}
a.service-card:hover::before, a.service-card:focus-visible::before { transform: scaleX(1); }
.service-card h4, .service-card h5 { color: var(--ink) !important; font-size: 1.2rem !important; line-height: 1.25; }
.service-card p { color: var(--muted) !important; font-size: .97rem !important; }
.card-link {
  color: var(--emerald-800) !important; font-weight: 600 !important;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .18s ease;
}
a.service-card:hover .card-link { gap: 11px; }
/* per-sector card hover accent */
#travel a.service-card:hover { border-color:#bcd4fb !important; } #travel a.service-card:hover::before{background:#3B82F6;}
#motoring a.service-card:hover { border-color:#f6e3b4 !important; } #motoring a.service-card:hover::before{background:#F5B43F;}
#money a.service-card:hover::before{background:#10B981;}
#energy a.service-card:hover { border-color:#d9ccfb !important; } #energy a.service-card:hover::before{background:#8B5CF6;}
#retail a.service-card:hover { border-color:#fbc6d6 !important; } #retail a.service-card:hover::before{background:#F43F73;}

/* ---- Stats -------------------------------------------------------------- */
.stats { background: var(--surface) !important; }
.stat-number { font-family: 'Fraunces', serif !important; color: var(--emerald-700) !important; font-size: clamp(2.4rem,5vw,3.2rem) !important; }
.stat-label { color: var(--muted) !important; letter-spacing: .02em; text-transform: uppercase; font-size: .8rem !important; font-weight: 600; }

/* ---- Landing-page content blocks --------------------------------------- */
.content-section h2 { font-size: clamp(1.7rem,3.4vw,2.25rem) !important; }
.problem-card, .solution-box, .info-box {
  border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important;
}
.problem-card { border-left-width: 4px !important; }

/* ---- FAQ / checker accordions ------------------------------------------ */
details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); margin: 10px 0; overflow: hidden;
}
details > summary { font-weight: 600; color: var(--ink); }

/* ---- Footer ------------------------------------------------------------- */
footer { background: #07182E !important; }
.footer-nav h4 { color: #fff !important; letter-spacing: .01em; }
.footer-nav a { color: rgba(255,255,255,.72) !important; transition: color .15s ease; }
.footer-nav a:hover { color: var(--emerald-300) !important; }

/* ---- A11y / motion ------------------------------------------------------ */
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .service-card::before { transition: none; }
}




/* Hero: force clean full-bleed (legacy theme set radius/margin with high specificity) */
main .hero, section.hero, body .hero, .hero[class] {
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}
/* Funnel polish: stop the uppercase serif step titles, soften option cards */
.step-title { text-transform: none !important; }
.option-card { border-radius: 14px !important; }
.option-card.selected { border-color: var(--emerald) !important; box-shadow: 0 0 0 3px rgba(15,185,139,.18) !important; }

/* ---- Readability / contrast (WCAG AA) ----------------------------------- */
/* Legacy small print & disclaimers were too light (#718096 ≈ 3.8:1 on white). */
small, .disclaimer, .fine-print, .legal-note, .chatbot small, figcaption {
  color: var(--muted) !important;   /* 5.1:1 */
}
/* Any emerald body link/text sitting on a light surface: use the AA-safe shade. */
.services a.card-link, .content-section a:not(.cta-button):not(.service-card),
a.text-link, .info-box a:not(.cta-button) {
  color: var(--emerald-800) !important;
}
/* Callout boxes have LIGHT backgrounds (amber/green/blue tints) but several sit
   inside dark sections and were inheriting WHITE text -> invisible. Force dark
   text + dark headings on them (loaded last, so it beats the section's h3 rule). */
.warning-box, .success-box, .info-box, .solution-box,
.warning-box p, .warning-box li, .warning-box strong, .warning-box em, .warning-box span, .warning-box td,
.success-box p, .success-box li, .info-box p, .info-box li, .solution-box p, .solution-box li {
  color: var(--text) !important;
}
.warning-box h1, .warning-box h2, .warning-box h3, .warning-box h4, .warning-box h5,
.success-box h1, .success-box h2, .success-box h3, .success-box h4,
.info-box h1, .info-box h2, .info-box h3, .info-box h4,
.solution-box h1, .solution-box h2, .solution-box h3, .solution-box h4 {
  color: var(--ink) !important;
}