/* Palette C, dark version (loaded only when the visitor's device is set to dark, via the media attribute).
   Navy #0B1B3B background, white text, light-orange highlight #FED7AA, the same orange button. No gradients. */
:root { --bg:#0B1B3B; --muted:#B8C4DC; --line:rgba(255,255,255,.16); --card:rgba(255,255,255,.06); --error:#FCA5A5;
  --blue:#FED7AA; --blue-hover:#FFFFFF;
  --sh:0 2px 4px rgba(0,0,0,.30), 0 10px 24px rgba(0,0,0,.38); --sh-hover:0 6px 12px rgba(0,0,0,.36), 0 20px 44px rgba(0,0,0,.50);
  --sh-kit:0 4px 8px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.50); --edge:inset 0 1px 0 rgba(255,255,255,.08); }
body { background:var(--bg); color:#F4F7FC; }
h1, h2, h3 { color:#fff; }
a { color:var(--hi); }
a:hover { color:#fff; }
:focus-visible { outline-color:var(--hi); }
.skip { background:var(--hi); color:var(--ink); }

.site-header { background:var(--bg); border-bottom-color:var(--line); }
.site-header.scrolled { box-shadow:0 8px 24px rgba(0,0,0,.45); }
.nav a { color:#fff; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--hi); border-bottom-color:var(--hi); }
.eyebrow { color:var(--hi); }

.band { background:rgba(255,255,255,.04); border-top-color:var(--line); border-bottom-color:var(--line); }
.card, .band .card, .form, .kit-list li, details, .band details, .closing, .band .closing { background-color:rgba(255,255,255,.07); border-color:var(--line); }
.n { background-color:var(--hi); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #C98F52, 0 6px 10px rgba(0,0,0,.35); }
.stack { background-color:#14274F; border:1px solid rgba(255,255,255,.18); }
.link-arrow { color:var(--hi); }
.offer h3 { color:var(--blue); }

.field label { color:#fff; }
.field.check label { color:var(--muted); }
.field input[type=email], .field input[type=text], .field select { background:#fff; color:var(--ink); }
.field input[type=email]:focus, .field input[type=text]:focus, .field select:focus { border-color:var(--hi); }
.err { color:var(--error); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color:var(--error); }
.status.warn { background:#FFF3C4; color:#5B4300; }

summary { color:#fff; }
summary:hover { color:var(--hi); }
summary::after { background-color:var(--hi); color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #C98F52; }

.final { background-color:#08142E; border-top:1px solid var(--line); }
.final p { color:var(--muted); }
.final .micro { color:var(--muted); }

.site-footer { background:rgba(0,0,0,.28); border-top:1px solid var(--line); }
.site-footer .fine { color:var(--muted); }

/* nav tabs and the service-area window in the dark version */
@media (hover: hover) {
  .nav a:hover, .nav button.tab:hover, .has-menu.open > .tab { background-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.40); color:var(--hi); text-decoration-color:var(--hi); }
}
.nav a:active, .nav button.tab:active { background-color:rgba(255,255,255,.04); box-shadow:inset 0 2px 5px rgba(0,0,0,.50); }
.menu { background-color:#14274F; border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 6px 12px rgba(0,0,0,.40), 0 26px 60px rgba(0,0,0,.60); }
.menu-h, .area .st, .menu-foot { color:var(--muted); }
.area { color:#fff; }
@media (hover: hover) { .area:hover { color:var(--hi); text-decoration-color:var(--hi); background-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.40); } }
.area:active, .area[aria-pressed="true"] { color:var(--hi); text-decoration-color:var(--hi); background-color:rgba(255,255,255,.04); box-shadow:inset 0 2px 5px rgba(0,0,0,.50); }
.menu-blurb { background-color:rgba(0,0,0,.25); box-shadow:inset 0 1px 3px rgba(0,0,0,.40); }
.blurb-name { color:#fff; } .blurb-text { color:var(--muted); }
.zona p { color:var(--muted); }
@media (max-width: 759px) { .menu-blurb { box-shadow:inset 0 1px 3px rgba(0,0,0,.40), 0 6px 10px rgba(0,0,0,.35); } }

.facts li { color:#F4F7FC; } .facts strong { color:var(--hi); }
.zona-pic figcaption { color:var(--muted); }
.zona:target { outline-color:var(--hi); }

.nav button.tab { color:#fff; }
.kit-eyebrow .trades { color:#fff; }

.pains-lead { color:var(--muted); }

.legal-nav a { background-color:rgba(255,255,255,.07); } .legal-nav span { color:#fff; }


.done-badge { background:rgba(255,255,255,.10); color:var(--hi); }
.done-badge .check { color:var(--hi); }
.done-badge .check path { stroke:var(--ink); }

.card.tone-white, .card.tone-cream, .card.tone-gray { background:rgba(255,255,255,.07); border-color:var(--line); }
.card.tone-navy { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
.card.tone-peach, .card.tone-peach h2, .card.tone-peach .eyebrow, .card.tone-peach li { color:#0B1B3B; }
/* secondary buttons keep the light-mode design (white, blue outline, blue text, blue gloss) and add one white outer ring so they read on the dark background */
.btn.alt { box-shadow:inset 0 0 0 2px #1E40AF, 0 0 0 2px #fff, 0 4px 0 #14296F, 0 10px 18px rgba(0,0,0,.4); }
@media (hover:hover) { .btn.alt:hover { box-shadow:inset 0 0 0 2px #1E40AF, 0 0 0 2px #fff, 0 6px 0 #14296F, 0 16px 24px rgba(0,0,0,.5); } }
.btn.alt:active { box-shadow:inset 0 0 0 2px #1E40AF, 0 0 0 2px #fff, 0 1px 0 #14296F, 0 3px 8px rgba(0,0,0,.4); }
.btn.alt { color:#1E40AF; }
@media (hover:hover) { .btn.alt:hover { color:#1E3A8A; } }
.card.tone-outline { background:#fff; color:#0B1B3B; box-shadow:inset 0 0 0 2px #1E40AF, 0 0 0 2px #fff, 0 4px 0 #14296F, 0 10px 18px rgba(0,0,0,.4); }
@media (hover:hover) { .card.tone-outline:hover { box-shadow:inset 0 0 0 2px #1E40AF, 0 0 0 2px #fff, 0 6px 0 #14296F, 0 16px 24px rgba(0,0,0,.5); } }
.card.tone-outline h2 { color:#0B1B3B; } .card.tone-outline .eyebrow { color:#1E40AF; }
.card.tone-outline .svc-text, .card.tone-outline .pains, .card.tone-outline .svc-plain, .card.tone-outline li { color:#0B1B3B; }
.card.tone-outline .svc-points li { background:rgba(30,64,175,.1); color:#1E3A8A; }
/* dark mode: the translucent boxes get a white outline so they stand out from the same-colored background */
.card.tone-white, .card.tone-cream, .card.tone-gray, .card.tone-navy { box-shadow:inset 0 0 0 2px #fff; border-color:transparent; }

/* service-area window, dark mode: the city buttons must beat the light rules (.menu .area) so the names stay white on the navy window */
.menu .area { color:#fff; }
.menu .area .st { color:var(--muted); }
@media (hover: hover) { .menu .area:hover { color:var(--hi); text-decoration-color:var(--hi); background-color:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.40); } }
.menu .area:active, .menu .area[aria-pressed="true"] { color:var(--hi); text-decoration-color:var(--hi); background-color:rgba(255,255,255,.04); box-shadow:inset 0 2px 5px rgba(0,0,0,.50); }
.menu .area:focus-visible { outline-color:var(--hi); }
.menu .menu-all { color:var(--hi); }