/* Dark mode. Follows the visitor's system setting; the nav toggle overrides it (saved as localStorage "gh-theme").
   The theme is set on <html data-theme> by a tiny script in <head> before the page paints.
   Palette: near-black green page, Deep Green cards, Cream text, Gold for italic emphasis (brand rule: "Gold on dark").
   Portfolio mockups and before/after slides keep their own colors: they are "printed pieces" laid on the table. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --white:#0E1B18;
  --cream:#162A25;
  --cream-2:#1E3731;
  --lilac:#272540;
  --ink:#FEF3D8;
  --body:#E3DCC9;
  --muted:#A7B9B2;
  --line:#2A453E;
  --text-green:#45C7A9;
  --tg:#45C7A9;
  --deep:#0A5C4C;
}
:root[data-theme="dark"] body{background:#0E1B18;color:#FEF3D8}

/* text that used --white as "light text on a colored fill" stays white */
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .links .btn,
:root[data-theme="dark"] .tier .pill,
:root[data-theme="dark"] .cta,
:root[data-theme="dark"] .cta h2{color:#fff}
:root[data-theme="dark"] .btn.primary:hover{background:#0B7A64;border-color:#0B7A64}
:root[data-theme="dark"] .btn:not(.primary):not(.foot-cta){border-color:rgba(254,243,216,.55)}
:root[data-theme="dark"] .tags i.dir{background:#FEF3D8;color:#0E1B18}

/* green text on dark backgrounds: lighter Grayhaven green; italic emphasis in gold */
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .textlink,
:root[data-theme="dark"] .mq-stat b,
:root[data-theme="dark"] .mq-top b,
:root[data-theme="dark"] .mq-src a:last-child,
:root[data-theme="dark"] .tier .toggle,
:root[data-theme="dark"] .more h4,
:root[data-theme="dark"] .pcta a,
:root[data-theme="dark"] .pcta>svg,
:root[data-theme="dark"] .every-more,
:root[data-theme="dark"] .sig{color:#45C7A9}
:root[data-theme="dark"] .logos .eyebrow{color:var(--muted)}
:root[data-theme="dark"] h1 em,
:root[data-theme="dark"] h2 em,
:root[data-theme="dark"] .hero h1 em{color:#F4C95D}
:root[data-theme="dark"] .tags i{color:#CFE9E0}
:root[data-theme="dark"] .step .n,
:root[data-theme="dark"] .cta .expect b{color:#F4C95D}
:root[data-theme="dark"] .cta .expect b{background:#0A5C4C}
:root[data-theme="dark"] .specs .ip,
:root[data-theme="dark"] .facts .ip{background:#0F3F35}
:root[data-theme="dark"] .specs .ip b,
:root[data-theme="dark"] .facts .ip dd{color:#CFE9E0}
:root[data-theme="dark"] .mq-res p{color:var(--body)}

/* nav */
:root[data-theme="dark"] .navbar{background:rgba(14,27,24,.88)}
:root[data-theme="dark"] .navbar.scrolled{box-shadow:0 10px 30px -20px rgba(0,0,0,.8)}
:root[data-theme="dark"] .logo{color:#FEF3D8}

/* surfaces and lines */
:root[data-theme="dark"] .grain::after{mix-blend-mode:soft-light;opacity:.22}
:root[data-theme="dark"] .ba-tab:hover,
:root[data-theme="dark"] .tier:hover{border-color:#3C6A5F}
:root[data-theme="dark"] .tier.on{box-shadow:0 0 0 4px rgba(0,147,121,.2),0 30px 50px -30px rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,147,121,.16),var(--white) 45%)}
:root[data-theme="dark"] .way.care{background:linear-gradient(180deg,rgba(0,147,121,.16),var(--white) 50%)}
:root[data-theme="dark"] .mq-intro{border-color:rgba(254,243,216,.1)}
:root[data-theme="dark"] .mq-dots i{background:rgba(254,243,216,.16)}
:root[data-theme="dark"] .mq-dots i.on{background:#009379}
:root[data-theme="dark"] .hm-ph{box-shadow:0 0 0 3px #0E1B18,0 0 0 4.5px var(--line)}
:root[data-theme="dark"] .avatar{border-color:#0E1B18}
:root[data-theme="dark"] .ba{box-shadow:0 0 0 1px var(--line)}
:root[data-theme="dark"] .form{box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}

/* forms */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{background-color:#0A1513;border-color:#33524A;color:#FEF3D8}
:root[data-theme="dark"] .field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' stroke='%23FEF3D8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
:root[data-theme="dark"] ::placeholder{color:#7F948D}

/* footer sits on Deep Green: give it a hairline so it lifts off the dark page */
:root[data-theme="dark"] .foot{box-shadow:0 0 0 1px rgba(254,243,216,.06)}

/* client logos are dark gray artwork: show them as cream silhouettes */
:root[data-theme="dark"] .logos img{filter:brightness(0) invert(95%) sepia(12%) saturate(400%) hue-rotate(5deg);opacity:.62}

/* theme toggle (nav) */
.theme-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;padding:0;flex:none;transition:border-color .2s,transform .2s}
.theme-btn:hover{border-color:var(--green);transform:rotate(-12deg)}
.theme-btn svg{width:19px;height:19px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
.mnav-theme{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px 4px;font-weight:600;font-size:1.05rem;color:var(--ink);border-top:1px solid var(--line)}
.mnav-theme::before{content:"";width:18px;height:18px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);box-shadow:inset 0 0 0 1.8px var(--ink)}
.mnav-theme:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.mnav-theme .to-light{display:none}
:root[data-theme="dark"] .mnav-theme .to-light{display:inline}
:root[data-theme="dark"] .mnav-theme .to-dark{display:none}
@media (max-width:620px){.links .theme-btn{display:none}}

/* page-specific pieces (services, about, check-up, resources, posts, tools) */
:root[data-theme="dark"] .every-list span,
:root[data-theme="dark"] .req-box p,
:root[data-theme="dark"] .legal p,:root[data-theme="dark"] .legal li,
:root[data-theme="dark"] .story .body p,
:root[data-theme="dark"] .believe p,
:root[data-theme="dark"] .who-list li,
:root[data-theme="dark"] .post-head .dek,
:root[data-theme="dark"] .post,
:root[data-theme="dark"] .qz-sum p,
:root[data-theme="dark"] .qz-tips li,
:root[data-theme="dark"] .pl-head p,
:root[data-theme="dark"] .rs-soon p{color:var(--body)}
:root[data-theme="dark"] .story .body p:first-child,
:root[data-theme="dark"] .story .body p.own{color:var(--ink)}

/* Deep Green text would vanish on dark: lift it */
:root[data-theme="dark"] .next3 .n,
:root[data-theme="dark"] .report-list .n,
:root[data-theme="dark"] .an-field output,
:root[data-theme="dark"] .rt-ann b,
:root[data-theme="dark"] .plan .fr .fr-tag,
:root[data-theme="dark"] .faq details p a{color:#45C7A9}
:root[data-theme="dark"] .plan-table th,
:root[data-theme="dark"] .cost-table thead th,
:root[data-theme="dark"] .cost-table tbody th{color:#CFE9E0}
:root[data-theme="dark"] .post a,
:root[data-theme="dark"] .crumbs a,
:root[data-theme="dark"] .toc a:hover,
:root[data-theme="dark"] .plan .fr b,
:root[data-theme="dark"] .plan .fr .fr-unit,
:root[data-theme="dark"] .plan h3,
:root[data-theme="dark"] .believe .n,
:root[data-theme="dark"] .ck-steps span,
:root[data-theme="dark"] .tl-more small,
:root[data-theme="dark"] .related a.rel span,
:root[data-theme="dark"] .callout .k,
:root[data-theme="dark"] .toc .k,
:root[data-theme="dark"] .pl-card small,
:root[data-theme="dark"] .qz-cat,
:root[data-theme="dark"] .tag{color:#45C7A9}
:root[data-theme="dark"] .rs-feature .tag,
:root[data-theme="dark"] .pl-line li.big .pl-card small{color:#F4C95D}
:root[data-theme="dark"] .cta-band .btn{background:#FEF3D8;border-color:#FEF3D8;color:#0A5C4C}
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .cta-band h2{color:#fff}
:root[data-theme="dark"] .cta-band a.soft{color:#FEF3D8}

/* light fills that were hard-coded */
:root[data-theme="dark"] .faq details[open]{background:#132622}
:root[data-theme="dark"] .table-wrap thead .hl,
:root[data-theme="dark"] .cost-table thead .hl{background:#0F3F35;color:#CFE9E0}
:root[data-theme="dark"] .table-wrap .hl,
:root[data-theme="dark"] .cost-table .hl{background:rgba(0,147,121,.12)}
:root[data-theme="dark"] .an-badge.ok{background:#BFE8D8;color:#16302A}
:root[data-theme="dark"] .an-badge,
:root[data-theme="dark"] .an-tips li::before,
:root[data-theme="dark"] .qz-tips li::before,
:root[data-theme="dark"] .pl-now,
:root[data-theme="dark"] .founding .badge,
:root[data-theme="dark"] .tl-cta .btn,
:root[data-theme="dark"] .post-cta .btn,
:root[data-theme="dark"] .rs-feature .rs-feature-cta,
:root[data-theme="dark"] .pp-result .btn.primary{color:#16302A}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root[data-theme="dark"] .plan .pill{color:#fff}
:root[data-theme="dark"] .guide-form .field input{background:#0A1513;border-color:#33524A;color:#FEF3D8}

/* thin tracks and rules drawn in dark ink */
:root[data-theme="dark"] .qz-bar,
:root[data-theme="dark"] .qz-cats i,
:root[data-theme="dark"] .an-bar .rest,
:root[data-theme="dark"] .an-key .k1,
:root[data-theme="dark"] .rt-bar i:first-child{background:rgba(254,243,216,.14)}
:root[data-theme="dark"] .pl-line::before,
:root[data-theme="dark"] .rt-plan::before{background:rgba(254,243,216,.18)}
:root[data-theme="dark"] input[type=range]::-moz-range-track{background:rgba(254,243,216,.14)}
:root[data-theme="dark"] .no::after{background:#5E716B}

/* "paper" mockups stay printed on light stock: re-scope the light palette inside them */
:root[data-theme="dark"] .paper,
:root[data-theme="dark"] .mini-cover,
:root[data-theme="dark"] .mini-report,
:root[data-theme="dark"] .cover-mock{--white:#FFFFFF;--cream:#FEF3D8;--ink:#16302A;--body:#2C4640;--muted:#58706A;--line:#EADFC4;color:#16302A}
:root[data-theme="dark"] .paper .sig{color:#009379}