/* ===== Design Tokens (from provided design) ===== */

:root{

  --bg:#0b1020; /* page chrome / background */

  --ink:#0f172a; /* body text on light surfaces */

  --muted:#475569; /* secondary text */

  --brand:#2447f9; /* accent */

  --paper:#ffffff; /* cards / panels */

  --edge:#e2e8f0; /* borders / dividers */

  --chip:#f1f5f9; /* subtle fills */

  --success:#16a34a;

  /* Existing app tokens */

  --sidebar-w: 280px;

  --border: var(--edge);

  --muted-bg: #f7f7f7;

  --overlay: rgba(0,0,0,.25);

  --transition: 240ms ease;

}

/* ===== Base / Reset ===== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

html,body{ margin:0; }

body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";

  color: var(--ink);

  background: var(--bg);

  line-height: 1.6;

}

/* ===== Top Bar (fixed so burger never scrolls away) ===== */

.topbar {

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 40;

  height: 56px;

  display: flex; align-items: center; gap: 12px; padding: 0 12px;

  /* hero-ish dark header to match design */

  background: linear-gradient(180deg, #0b1020 0%, #11183a 100%);

  color: #e2e8f0;

  border-bottom: 1px solid rgba(148,163,184,.25);

  box-shadow: 0 6px 18px rgba(2,6,23,.35);

}

.topbar-title { font-weight: 800; letter-spacing: .2px; }

/* Layout grid */

.app { margin-top: 0 !important; }

/* Since topbar is sticky (in normal flow), sidebar can stick to top of viewport */

.sidebar {

  top: 0 !important;

  height: 100vh !important;

}

/* Subtle “active” feel when menu is open */

body.menu-open .sidebar {

  background: var(--paper);

  border-right-color: var(--edge);

  box-shadow: 6px 0 32px rgba(2,6,23,.16);

}

/* =========================

   LOGO BUTTON (UPDATED)

   ========================= */

/* Logo wrapper: no longer the “tile”. The <a> is the tile now. */

.logo{

  padding: 0;

  background: transparent;

  border: none;

  box-shadow: none;

  width: 100%;

}

/* The clickable tile/button */

.logo-button{

  display: flex;

  align-items: center;

  gap: 12px;

  width: 100%;

  padding: 10px 12px;

  border-radius: 12px;

  background: #1f2a6b;

  border: 1px solid #3647a0;

  box-shadow: inset 0 0 0 1px #3647a0, 0 10px 20px rgba(0,0,0,.12);

  text-decoration: none;

  cursor: pointer;

  transition: transform 0.1s ease, filter 0.2s ease;

}

/* Make sure image stays 64x64 (and no older rule overrides it) */

.logo-button img{

  width: 64px;

  height: 64px;

  object-fit: contain;

  display: block;

}

.logo-button:hover{

  filter: brightness(1.06);

  text-decoration: none; /* prevents underline */

}

.logo-button:active{

  transform: scale(0.98);

}

.logo-button:focus-visible{

  outline: 2px solid #60a5fa;

  outline-offset: 3px;

}

.logo-text {

  font-size: 1.9rem;

  letter-spacing: 0.04em;

  color: #ffffff;

  font-weight: 800;

  line-height: 1;

}

.logo-dot {

  color: #60a5fa;

}

/* =========================

   END LOGO BUTTON (UPDATED)

   ========================= */

.menu-heading { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin: 8px 0 4px; color: var(--muted); }

.menu ul { list-style: none; padding: 0; margin: 0; }

.menu li + li { margin-top: 8px; }

/* ===== Sidebar menu items ===== */

.menu a{

  /* base look */

  text-decoration: none;

  color: #0f172a;

  padding: 8px 10px;

  border-radius: 10px;

  border: 1px solid transparent;

  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;

  /* Workly-style layout */

  display: flex; /* icon + label on one row */

  align-items: center;

  gap: 10px;

  font-weight: 600;

}

.menu a:hover{

  background: var(--chip);

  border-color: var(--edge);

}

/* icon size/tone inside links */

.menu a .bi{

  font-size: 1rem;

  opacity: .9;

}

/* active state (keeps your blue tint but with a subtle gradient) */

.menu a.active{

  background: linear-gradient(90deg, #eef2ff 0%, #ffffff 60%);

  color: #1d4ed8;

  border-color: #c7d2fe;

  box-shadow: 0 4px 12px rgba(37,99,235,.12) inset;

}

.extra { margin-top: auto; font-size: 24px; letter-spacing: 6px; color: var(--muted); }

/* Main content (hero already has padding) */

.content { padding: 0 0 24px; }

    /* ===== Main content surface (prevents "white canvas" look) ===== */

.page-wrap{

  max-width: 1100px;

  margin-left: 0;

  margin-right: auto;

  background: #f8fafc; /* soft light panel instead of pure white */

  border: 1px solid var(--edge);

  border-radius: 16px;

  padding: 16px;

  box-shadow: 0 10px 30px rgba(2,6,23,.06);

}

/* ===== Overlay (mobile) — keep clicks but no darkening of page ===== */

.overlay {

  position: fixed;

  inset: 56px 0 0 0;

  background: rgba(0,0,0,0.25);

  z-index: 15;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.2s ease;

}

.overlay.show {

  opacity: 1;

  pointer-events: auto;

  cursor: pointer;

}

/* ===== Burger button ===== */

.burger {

  width: 44px; height: 36px;

  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;

  border: none;

  background: transparent;

  cursor: pointer;

  color: #e2e8f0;

}

.burger:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

.burger-bar {

  display: block; height: 2px; width: 24px; margin: 0 auto;

  background: currentColor; /* adapts to topbar color */

  transition: transform var(--transition), opacity var(--transition);

}

body.menu-open .burger-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }

body.menu-open .burger-bar:nth-child(2){ opacity: 0; }

body.menu-open .burger-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===== Collapsing behavior (desktop) ===== */

@media (min-width: 901px) {

  body:not(.menu-open) .sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }

  body:not(.menu-open) .app { grid-template-columns: 0 1fr; }

}

/* ===== Mobile / tablet (slide-over fixed) ===== */

@media (max-width: 900px) {

  .app { grid-template-columns: 1fr; }

  .sidebar {

    position: fixed;

    top: 56px; left: 0; bottom: 0;

    width: min(100vw, var(--sidebar-w));

    height: auto;

    transform: translateX(-100%);

    box-shadow: 0 12px 30px rgba(2,6,23,.30);

    clip-path: none;

    border-right: 1px solid var(--edge);

  }

  body.menu-open .sidebar { transform: translateX(0); }

  body.menu-open #overlay { display: block; }

}

/* ===== Submenu (Dashboard > Learn More) ===== */

.has-submenu { margin-top: 8px; }

.submenu-toggle {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  background: transparent;

  border: none;

  padding: 6px 8px;

  cursor: pointer;

  color: #0f172a;

  border-radius: 10px;

  text-align: left;

  font: inherit;

}

.submenu-toggle:hover { background: var(--chip); border: 1px solid var(--edge); }

.caret {

  width: 0; height: 0;

  border-left: 5px solid #0000;

  border-right: 5px solid #0000;

  border-top: 6px solid currentColor; /* ▼ */

  transition: transform 200ms ease;

}

.submenu-toggle.open .caret { transform: rotate(180deg); } /* ▲ when open */

.submenu {

  list-style: none;

  margin: 4px 0 0 0;

  padding: 0 0 0 12px;

  border-left: 2px solid var(--edge);

}

.submenu li + li { margin-top: 6px; }

.submenu a {

  display: block;

  padding: 4px 6px;

  text-decoration: none;

  color: inherit;

  border-radius: 8px;

  font-size: 0.95rem;

}

.submenu a:hover { background: #f8fafc; }

/* Make anchor targets stop below the fixed topbar (offset ~72px) */

[id] { scroll-margin-top: 72px; }

/* Sidebar itself does NOT scroll */

.sidebar{

  overflow: hidden !important;

  display: flex;

  flex-direction: column;

}

/* Menu takes remaining space and scrolls */

.sidebar .menu{

  flex: 1 1 auto;

  overflow-y: auto !important;

  max-height: none !important;

}

/* ===== Reusable UI (from the design) ===== */

/* Page shell helpers (optional) */

.wrap{max-width:1100px; margin:0 auto; padding:24px}

/* Chips (for top nav / filters) */

.chip{

  background:rgba(255,255,255,.08);

  color:#e0e7ff;

  border:1px solid rgba(255,255,255,.18);

  padding:8px 12px;

  border-radius:999px;

  font-size:14px;

  text-decoration:none;

}

.chip:hover{background:rgba(255,255,255,.14)}

/* Cards */

.card{

  background:var(--paper);

  border:1px solid var(--edge);

  border-radius:16px;

  padding:28px;

  box-shadow:0 10px 30px rgba(2,6,23,.06);

}

/* Headings & text */

h2{margin:0 0 12px; font-size:28px; letter-spacing:.2px}

h3{margin:24px 0 8px; font-size:20px}

p{margin:10px 0}

.muted{color:var(--muted)}

.lead{font-size:18px}

/* Two-column helper */

.twocol{display:grid; grid-template-columns:1fr; gap:22px}

@media (min-width:900px){.twocol{grid-template-columns:1fr 1fr}}

/* Factors grid */

.factors{display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:10px; margin-top:14px}

@media (min-width:720px){.factors{grid-template-columns:repeat(2,minmax(0,1fr))}}

.factor{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--edge); background:var(--chip)}

.factor svg{flex:0 0 18px; margin-top:3px}

.factor a{color:inherit; text-decoration:none}

.factor a:hover{color:var(--brand); text-decoration:underline}

/* Checklist */

.checklist{display:grid; gap:8px}

.check{display:flex; gap:10px; align-items:flex-start}

.check svg{flex:0 0 18px; margin-top:2px}

/* Buttons */

.btn{

  display:inline-flex; align-items:center; gap:10px;

  padding:12px 16px; border-radius:12px;

  background:#1d4ed8; color:white; text-decoration:none; font-weight:600;

  border:1px solid #1e40af;

}

.btn:hover{filter:brightness(1.08)}

/* Table */

table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--edge)}

thead th{background:#f8fafc; padding:12px; text-align:left; font-weight:700; border-bottom:1px solid var(--edge)}

tbody td{padding:12px; border-top:1px solid var(--edge)}

/* Links and interactive states */

a { color: var(--brand); }

a:hover { text-decoration: underline; }

/* Utility badges / toc (optional) */

.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--edge); background:var(--chip); font-size:13px}

.toc{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}

.toc a{font-size:14px; color:var(--brand); text-decoration:none; border:1px dashed var(--edge); padding:6px 10px; border-radius:8px}

.toc a:hover{background:#eef2ff}

/* Footer helper */

footer{padding:40px 0 64px; color:#e2e8f0}

/* ===== Optional: top “hero” wrapper if you add one above .app ===== */

header.hero{

  background:linear-gradient(180deg,#020617,#020420);

  color:#eef2ff;

  padding:56px 0 28px;

  position:relative;

  overflow:hidden;

}

header .wrap{position:relative; z-index:2}

.brand{display:flex; align-items:center; gap:12px; margin-bottom:20px}

.brand .logo{width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background:#1f2a6b; box-shadow:inset 0 0 0 1px #3647a0, 0 10px 20px rgba(0,0,0,.2)}

.brand .logo svg{width:24px; height:24px; fill:#a5b4fc}

h1.title{margin:0 0 8px; font-weight:800; font-size:clamp(28px, 3.4vw, 42px); letter-spacing:.2px}

p.subtitle{margin:0; color:#c7d2fe; max-width:62ch}

nav.top{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}

/* Make the hero image readable on mobile */

.hero-zoom-img {

  max-width: 100%;

  height: auto;

  transition: transform 0.2s ease-out;

}

caption {

  caption-side: top;

  text-align: left;

  font-weight: 600;

  padding: 0.5rem 0;

  color: #334155;

}

.table-wrap {

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  margin: 1rem 0;

}

thead th {

  position: sticky;

  top: 0;

  background: #f8fafc;

  z-index: 1;

}

.hero-image-wrap{

  position:relative;

  z-index:2;

  max-width:160px;

  flex-shrink:0;

}

.hero-image-wrap img{

  width:100%;

  height:auto;

  border-radius:50%;

  display:block;

}

/* Improve readability on small screens */

@media (max-width: 576px) {

  .hero-zoom-img {

    width: 200%;

    max-width: none;

    transform: translateX(-25%);

  }

  .hero {

    padding-top: 72px;

  }

  header.hero {

    padding-top: 96px !important;

  }

}

@media (max-width: 768px) {

  table {

    font-size: 0.95rem;

  }

  thead th {

    white-space: nowrap;

  }

  tbody td {

    min-width: 220px;

  }

  html, body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

  }

  * {

    max-width: 100%;

    box-sizing: border-box;

  }

  img, video, iframe {

    max-width: 100%;

    height: auto;

  }

}

@media (max-width: 768px){

  .hero{

    position:relative;

    isolation:isolate;

  }

  .content{

    position:relative;

    z-index:1;

    background: transparent; /* was #fff */

  }

}

.call-phone {

  background-color: #c00; /* red background (change as you like) */

  color: #ffffff; /* white text */

  padding: 8px 16px; /* space around the text */

  border-radius: 4px; /* slight rounded corners */

  display: inline-block; /* so padding and background wrap neatly */

}

/* Only show on mobile devices */

@media screen and (max-width: 768px) {

    .sticky-call-bar {

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%;

        background-color: #d11313; /* Your brand red */

        color: white;

        text-align: center;

        z-index: 9999;

        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);

    }

    .sticky-call-bar a {

        display: block;

        padding: 15px 0;

        color: white;

        text-decoration: none;

        font-weight: bold;

        font-size: 18px;

        text-transform: uppercase;

    }

}

/* Hide on desktop */

@media screen and (min-width: 769px) {

    .sticky-call-bar { display: none; }

}

.responsive-image {

  display: block;

  margin: 0 auto;          /* centers image */

  max-width: 100%;         /* mobile-safe */

  height: auto;

}

/* Tablet and up */

@media (min-width: 768px) {

  .responsive-image {

    max-width: 85%;        /* semi-full width */

  }

}

/* Desktop and up */

@media (min-width: 1200px) {

  .responsive-image {

    max-width: 70%;        /* looks premium, not edge-to-edge */

  }

}

.logic-train {

  width: 100vw;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  overflow: hidden;

}

.logic-train img {

  width: 100%;

  height: auto;

  display: block;

}

.strategy-layout {

  display: grid;

  grid-template-columns: 1.2fr 1fr; /* image | text */

  gap: 3rem;

  align-items: start;

  margin: 4rem 0;

}

.strategy-image img {

  width: 100%;

  height: auto;

  display: block;

}

.strategy-content {

  display: flex;

  flex-direction: column; /* vertical stacking */

}

.strategy-content h2 {

  margin-bottom: 1.5rem;

}

.strategy-content h3 {

  margin-top: 1.5rem;

}

/* Mobile fallback */

@media (max-width: 900px) {

  .strategy-layout {

    grid-template-columns: 1fr;

  }

}

.strategy-layout{

  display:grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items:start;

}

.strategy-image img{

  width:100%;

  height:auto;

  display:block;

  border-radius:12px;

}

@media (max-width: 992px){

  .strategy-layout{ grid-template-columns: 1fr; }

}

    .btn-gradient{background:linear-gradient(90deg,#2447f9,#00d4a6);color:#fff;border:none}

    .btn-gradient:hover{filter:brightness(1.06)}

    .lead-tight{line-height:1.35}

    .text-underline{text-decoration:underline}

    .fw-em{font-weight:600}

    .compact p{margin-bottom:.35rem}

    .compact ul{margin-bottom:.75rem}

    .compact .fs-5{margin-bottom:.4rem}

    .compact .fs-6{margin-bottom:.3rem}

    .compact .text-uppercase{letter-spacing:.02em}

    .compact li{margin-bottom:.2rem}

    table, .table { overflow-x: auto; display: block; max-width: 100%; }

    @media (max-width: 768px) { .table-responsive { overflow-x: auto; } }

    .hero{background:linear-gradient(135deg,#1c1f4a,#5236ab)}

    /* ✅ Added topbar styles so it behaves well on mobile */

    .topbar{

      position: sticky;

      top: 0;

      z-index: 1000;

      height: 54px;

      display:flex;

      align-items:center;

      gap: 10px;

      padding: 0 12px;

      background: #0f172a;

      color: #e5e7eb;

      border-bottom: 1px solid #1f2937;

    }

    .topbar-title{

      font-weight: 700;

      letter-spacing: .02em;

    }

    /* ✅ Added topbar styles so it behaves well on mobile */

    .topbar{

      position: sticky;

      top: 0;

      z-index: 1000;

      height: 54px;

      display:flex;

      align-items:center;

      gap: 10px;

      padding: 0 12px;

      background: #0f172a;

      color: #e5e7eb;

      border-bottom: 1px solid #1f2937;

    }

    .topbar-title{

      font-weight: 700;

      letter-spacing: .02em;

    }

    .site-footer{

      background:var(--shell,#0f172a);

      color:#e5e7eb;

      border-top:1px solid var(--shell-edge,#1f2937);

      padding:28px 24px 48px;

    }

    .site-footer .wrap{max-width:1100px;margin:0 auto}

    .site-footer .links{ text-align:center; font-size:14px; line-height:1.6; margin-top:16px; }

    .site-footer .links a{ color:#60a5fa; text-decoration:none; }

    .site-footer .links a:hover{ text-decoration:underline; }

    .site-footer .sep{ height:1px; background:var(--shell-edge,#1f2937); border:0; margin:14px 0 18px; }

    .site-footer p{ margin:8px 0; text-align:center; }

    .burger{

      display:none;

      align-items:center; justify-content:center; gap:4px;

      width:40px; height:34px; border-radius:10px;

      background:transparent; color:#e5e7eb;

      border:1px solid var(--shell-edge,#1f2937); cursor:pointer;

      margin-right:8px;

    }

    .burger-bar{width:18px;height:2px;background:#e5e7eb;display:block}

    .overlay{

      position:fixed; inset:0; background:rgba(0,0,0,.35);

      opacity:0; transition:opacity .2s ease; z-index:1001;

      pointer-events:none;

    }

    .overlay.show{ opacity:1; pointer-events:auto }

    .sidebar{ z-index:1002 }

    @media (min-width: 1024px){

      .app { display:flex; }

      .sidebar{

        position:sticky; top:0; height:100vh;

        transform:none !important;

        width:280px;

        background:#fff;

        border-right:1px solid #e5e7eb;

        overflow-y:auto;

      }

      .content{ flex:1; }

      .overlay{ display:none !important; }

    }

    @media (max-width: 992px){

      .burger{ display:inline-flex }

      .sidebar{

        position:fixed; top:54px; left:0; bottom:0;

        width:min(86vw,320px);

        transform:translateX(-100%); transition:transform .25s ease;

        height:auto; max-height:none; overflow:auto;

        background:#fff;

      }

      .sidebar.open{ transform:translateX(0) }

    }

    /* Make room so content isn't hidden behind the sticky bar */

    :root { --stickybar-h: 56px; }

    body { padding-bottom: var(--stickybar-h); }

    .sticky-call-bar{

      position: fixed;

      bottom: 0; left: 0;

      width: 100%;

      z-index: 2147483647;

      background: linear-gradient(90deg,#2447f9,#00d4a6);

      border-top: 1px solid rgba(255,255,255,.15);

      display: block; /* ✅ default show (mobile) */

    }

    .sticky-call-link{

      color: #fff;

      text-decoration: none;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 10px;

      padding: 12px 14px;

      font-size: 16px;

      font-weight: 800;

      letter-spacing: .02em;

      text-transform: uppercase;

      line-height: 1.1;

    }

    @media (max-width: 420px){

      :root { --stickybar-h: 64px; }

      .sticky-call-link{ font-size: 14px; }

    }

    /* ✅ Hide sticky call bar on desktop (optional, but usually desired) */

    @media (min-width: 993px){

      .sticky-call-bar{ display: none; }

    }

    .call-button {

      display: inline-block;

      background-color: #dc3545;

      color: #ffffff !important;

      font-weight: bold;

      text-align: center;

      padding: 14px 28px;

      border-radius: 8px;

      text-decoration: none;

      font-size: 1.15em;

      box-shadow: 0 4px 8px rgba(0,0,0,0.15);

      transition: all 0.2s ease;

      line-height: 1.4;

    }

    .call-button:hover {

      background-color: #c82333;

      transform: translateY(-2px);

      box-shadow: 0 6px 14px rgba(0,0,0,0.25);

    }

    .call-button strong { display: block; }

    .call-button .small {

      font-size: 0.9em;

      font-weight: normal;

      opacity: 0.95;

    }

    /* ✅ Responsive card grid for categories */

    .valuation-categories{

      list-style: none;

      padding-left: 0;

      margin: 0;

      display: grid;

      gap: 16px;

      grid-template-columns: 1fr;

    }

    .valuation-categories > li{

      background: #ffffff;

      border: 1px solid #e5e7eb;

      border-radius: 14px;

      padding: 14px 16px;

    }

    .valuation-categories h4{

      margin: 0 0 8px;

      font-size: 1.05rem;

    }

    .valuation-categories ul{

      margin: 0;

      padding-left: 18px;

    }

    @media (min-width: 768px){

      .valuation-categories{

        grid-template-columns: repeat(2, minmax(0, 1fr));

      }

    }

    @media (min-width: 1200px){

      .valuation-categories{

        grid-template-columns: repeat(3, minmax(0, 1fr));

      }

    }

.valuation-card {

  position: relative;

  display: block;

  padding: 16px;

  border: 1px solid #e0e0e0;

  border-radius: 10px;

  background: #ffffff;

  text-decoration: none;

  color: inherit;

  overflow: hidden;

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}

/* REMOVE underline in all states */

.valuation-card,

.valuation-card:hover,

.valuation-card:focus,

.valuation-card:focus-visible,

.valuation-card * {

  text-decoration: none;

}

/* gradient overlay */

.valuation-card::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    135deg,

    rgba(13,110,253,0.15),

    rgba(110,168,254,0.05)

  );

  opacity: 0;

  transition: opacity 0.25s ease;

  z-index: 0;

}

.valuation-card:hover::before {

  opacity: 1;

}

.valuation-card:hover {

  box-shadow: 0 6px 18px rgba(0,0,0,0.12);

  transform: translateY(-2px);

}

/* keep content above gradient */

.valuation-card > * {

  position: relative;

  z-index: 1;

}

.valuation-card h4 {

  margin-bottom: 8px;

}

.valuation-card ul {

  margin-left: 18px;

  margin-bottom: 10px;

}

.valuation-card .cta {

  font-weight: 600;

  color: #0d6efd;

}

/* Accessibility */

.valuation-card:focus-visible {

  outline: 2px solid #0d6efd;

  outline-offset: 4px;

}

/* FORCE hero text to be white no matter what Bootstrap/styles.css does */

.hero [itemprop="name"],
.hero [itemprop="jobTitle"]{
  color: #ffffff !important;
}

/* keep links readable too */

.hero a{

  color: #ffffff !important;

}

.hero a.btn{

  color: #ffffff !important;

}

/* MOBILE: full width, no "box inside box" */

.content-wrap{

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 14px 14px 18px;

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;

}

/* DESKTOP/TABLET: bring back the clean card look */

@media (min-width: 768px){

  .content-wrap{

    max-width: 1100px;

    margin: 0 auto;

    padding: 28px 32px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

  }

}

* { margin:0; padding:0; box-sizing:border-box; }

            

            h1 {

                color: #2c3e50;

                margin-bottom: 30px;

                padding-bottom: 15px;

                border-bottom: 3px solid #3498db;

                font-size: 2em;

            }

            

            h2 {

                color: #34495e;

                margin-top: 35px;

                margin-bottom: 20px;

                font-size: 1.5em;

                padding-left: 10px;

                border-left: 4px solid #3498db;

            }

            

            .section {

                margin-bottom: 30px;

                padding: 20px;

                background-color: #fafafa;

                border-radius: 6px;

                border: 1px solid #e0e0e0;

            }

            

            .subsection {

                margin-bottom: 20px;

            }

            

            .subsection h3 {

                color: #2980b9;

                margin-bottom: 10px;

                font-size: 1.1em;

                font-weight: 600;

            }

            

            .subsection p {

                margin-left: 15px;

                line-height: 1.8;

            }

            

            strong {

                color: #2c3e50;

            }

            

            ul {

                margin-left: 35px;

                margin-top: 10px;

            }

            

            li {

                margin-bottom: 8px;

                line-height: 1.7;

            }

            

            .number-badge {

                display: inline-block;

                background-color: #3498db;

                color: white;

                padding: 5px 12px;

                border-radius: 20px;

                font-weight: bold;

                margin-right: 10px;

            }
            
            /* ===== FAQ Nav Section Headings ===== */
#navLinks .nav-section{
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 6px;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  list-style: none;
  border-top: 1px solid var(--edge);
}

/* ===============================
   HERO FIX: FORCE WHITE TEXT
   =============================== */

header.hero strong,
header.hero em,
header.hero span,
header.hero p,
header.hero h1,
header.hero h2,
header.hero h3,
header.hero li {
  color: #ffffff !important;
}


/* ===== FOOTER: force readable text on dark background ===== */
.site-footer,
.site-footer *{
  color: #e5e7eb;
}

/* Make “muted” text still readable in footer */
.site-footer .muted{
  color: #cbd5e1 !important;
}

/* Strong/bold text must not turn dark in footer */
.site-footer strong,
.site-footer b{
  color: #ffffff !important;
}

/* Footer links */
.site-footer a{
  color: #60a5fa !important;
}
.site-footer a:hover{
  color: #93c5fd !important;
}

.hero-face {
  width: 110px;       /* smaller */
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}