/* ============================================================
   STYLES.CSS — ALL THE COLORS AND LOOK OF BOTH PAGES
   ============================================================
   ★★★  THE ONLY PART YOU NEED FOR A COLOR CHANGE  ★★★
   The block right below (starting with :root) is the list of
   named colors. The whole site refers to these NAMES. Change
   a code here once and it changes everywhere, on both pages:
     --accent        the teal — buttons, links, highlights
     --accent-bright brighter teal — highlights on navy panels
     --dark-panel    the navy — big dark panels (hero promise)
     --ink           main text color (navy in light mode)
     --bg            page background (pale blue-gray)
   There's also a DARK MODE block below the first one: if a
   visitor's phone/computer is set to dark mode, the site
   flips to navy automatically using those colors.
   A color code looks like this: #0f766e  (# + 6 letters/digits).
   Google "color picker" to find codes.
   BRAND RULE: no orange, ever.
   ---------- Everything after the color blocks is the engine
   room. You never NEED to edit it. Ask Muse before changing.
   ============================================================ */

:root{
    --bg:#eef3f8; --surface:#ffffff; --surface-2:#e2eaf2; --ink:#0a2342; --ink-2:#3a556f;
    --line:#c7d3e0; --accent:#0f766e; --accent-bright:#2dd4bf; --accent-ink:#ffffff; --accent-soft:#d7f0ed;
    --dark-panel:#0a2342; --dark-panel-ink:#eef7f7; --good:#0f766e; --chip:#e2eaf2;
    --shadow:0 10px 30px rgba(10,35,66,.13);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#071426; --surface:#0d213d; --surface-2:#132e52; --ink:#eaf2f8; --ink-2:#9bb0c4;
      --line:#1e3a5f; --accent:#2dd4bf; --accent-bright:#2dd4bf; --accent-ink:#04202a; --accent-soft:#123a44;
      --dark-panel:#04101f; --dark-panel-ink:#eaf2f8; --good:#2dd4bf; --chip:#132e52;
      --shadow:0 10px 30px rgba(0,0,0,.5);
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:"Manrope",system-ui,sans-serif;font-size:16.5px;line-height:1.6}
  h1,h2,h3,.display{font-family:"Archivo",system-ui,sans-serif;line-height:1.08;letter-spacing:-.01em;margin:0}
  img{max-width:100%;display:block}
  a{color:var(--accent)}
  .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
  .view[hidden]{display:none}

  /* top bar */
  .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .topbar-in{display:flex;align-items:center;gap:18px;padding:12px 0}
  .brand{display:flex;align-items:center;gap:11px;font-family:"Archivo";font-weight:900;font-size:1.02rem;color:var(--ink);text-decoration:none;line-height:1.15}
.brand-logo{width:58px;height:58px;flex:none}
.dash-fig{margin:28px 0 8px}
.dash-fig img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(120,140,160,.35)}
.dash-fig figcaption{font-size:.9rem;color:var(--ink-2);margin-top:10px;line-height:1.5}
  .brand small{display:block;font-family:"Manrope";font-weight:700;font-size:.72rem;color:var(--ink-2);letter-spacing:.04em}
  .nav{margin-left:auto;display:flex;gap:20px;align-items:center}
  .nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem}
  .nav a:hover{color:var(--accent)}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:12px 20px;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer;font-size:1rem;font-family:"Manrope"}
  .btn-accent{background:var(--accent);color:var(--accent-ink)}
  .btn-accent:hover{filter:brightness(1.07)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
  .btn-sm{padding:9px 16px;font-size:.9rem}
  @media (max-width:760px){ .nav a.hide-m{display:none} }

  /* hero */
  .hero{padding:52px 0 40px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  @media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }
  .hero h1{font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:900}
  .hero h1 .hl{color:var(--accent)}
  .hero p.lede{font-size:1.14rem;color:var(--ink-2);margin:18px 0 8px;max-width:34em}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 18px}
  .hero-photo{border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
  .hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
  .trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
  .trust span{background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.85rem;font-weight:700}
  .promise{background:var(--dark-panel);color:var(--dark-panel-ink);border-radius:14px;padding:20px 22px;margin-top:26px}
  .promise strong{color:var(--accent-bright);font-family:"Archivo"}
  .promise p{margin:6px 0 0;font-size:.98rem}

  section{padding:52px 0}
  .sec-head{max-width:46em;margin-bottom:26px}
  .sec-head h2{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800}
  .sec-head p{color:var(--ink-2);margin:10px 0 0}

  /* symptom finder */
  .finder{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow)}
  .finder h3{font-size:1.25rem;font-weight:800;margin-bottom:6px}
  .finder p{color:var(--ink-2);margin:0 0 16px}
  .chips{display:flex;flex-wrap:wrap;gap:9px}
  .chip{border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:700;font-size:.93rem;cursor:pointer;font-family:"Manrope"}
  .chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
  .finder-result{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;display:none}
  .finder-result.show{display:block}
  .finder-result h4{margin:0 0 6px;font-family:"Archivo";font-size:1.05rem}
  .finder-result p{margin:0 0 12px;color:var(--ink-2)}

  /* service sections */
  .svc{display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;align-items:start;padding:44px 0;border-top:1px solid var(--line)}
  .svc:first-of-type{border-top:none}
  @media (max-width:880px){ .svc{grid-template-columns:1fr} }
  .svc-photo{border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
  .svc-photo img{width:100%;object-fit:cover;aspect-ratio:4/3}
  .svc h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
  .svc .sub{color:var(--ink-2);margin:10px 0 18px}
  .svc h3{font-size:1rem;font-weight:800;margin:22px 0 8px;font-family:"Archivo"}
  ul.checks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
  ul.checks li{padding-left:28px;position:relative}
  ul.checks li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:9px;border-radius:2px;background:var(--accent)}
  .note{background:var(--accent-soft);border-radius:10px;padding:14px 16px;margin-top:18px;font-size:.95rem}
  .note strong{font-family:"Archivo"}

  /* steps */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media (max-width:800px){ .steps{grid-template-columns:1fr} }
  .step{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
  .step .n{font-family:"Archivo";font-weight:900;font-size:1.9rem;color:var(--accent)}
  .step h3{font-size:1.08rem;margin:6px 0 8px}
  .step p{margin:0;color:var(--ink-2);font-size:.97rem}

  /* compare */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:800px){ .compare{grid-template-columns:1fr} }
  .compare .col{border-radius:12px;padding:24px;border:1px solid var(--line);background:var(--surface)}
  .compare .col.me{background:var(--dark-panel);color:var(--dark-panel-ink);border-color:var(--dark-panel)}
  .compare h3{font-size:1.1rem;margin-bottom:12px}
  .compare ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.97rem}
  .compare .col.me strong{color:var(--accent-bright)}

  /* faq */
  .faq details{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:10px}
  .faq summary{cursor:pointer;font-weight:800;padding:16px 18px;font-family:"Archivo";font-size:1rem;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq details p{margin:0;padding:0 18px 16px;color:var(--ink-2)}

  /* contact composer */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  @media (max-width:880px){ .contact-grid{grid-template-columns:1fr} }
  .composer{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
  .composer label{display:block;font-weight:800;font-size:.88rem;margin:14px 0 6px}
  .composer label:first-child{margin-top:0}
  .composer input,.composer select,.composer textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.97rem}
  .composer textarea{min-height:96px;resize:vertical}
  .composer .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .direct{display:grid;gap:12px}
  .direct a.card{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:var(--ink)}
  .direct a.card:hover{border-color:var(--accent)}
  .direct .big{font-family:"Archivo";font-weight:800;font-size:1.15rem}
  .direct .small{color:var(--ink-2);font-size:.9rem}
  .areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .areas span{background:var(--chip);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:.86rem;font-weight:700}

  footer{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--ink-2);font-size:.92rem}
  footer .frow{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
  footer a{color:var(--ink-2)}
  footer a:hover{color:var(--accent)}

  /* MSP page */
  .msp-hero{padding:52px 0 34px}
  .msp-hero h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:900;max-width:16em}
  .msp-hero h1 .hl{color:var(--accent)}
  .msp-hero p.lede{font-size:1.12rem;color:var(--ink-2);max-width:44em;margin:16px 0 0}
  .wl{background:var(--dark-panel);color:var(--dark-panel-ink);border-radius:14px;padding:28px}
  .wl h2{color:var(--dark-panel-ink);font-size:1.4rem;margin-bottom:10px}
  .wl ul{margin:0;padding-left:20px;display:grid;gap:8px}
  .wl strong{color:var(--accent-bright)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:800px){ .grid2{grid-template-columns:1fr} }
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
  .tile h3{font-size:1.08rem;margin-bottom:8px}
  .tile p{margin:0;color:var(--ink-2);font-size:.97rem}
  .timeline{border-left:3px solid var(--line);margin:8px 0 0 6px;padding-left:22px;display:grid;gap:18px}
  .timeline .t{position:relative}
  .timeline .t::before{content:"";position:absolute;left:-29.5px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--accent)}
  .timeline .when{font-weight:800;font-size:.85rem;color:var(--accent);letter-spacing:.03em}
  .timeline h3{font-size:1.02rem;margin:2px 0 4px}
  .timeline p{margin:0;color:var(--ink-2);font-size:.95rem}
  .backlink{display:inline-flex;gap:8px;align-items:center;font-weight:800;text-decoration:none;margin-top:8px}
@media (prefers-color-scheme: dark){.brand-logo{content:url("images/logo-teal.png")}}