/* TKN Flooring — black + light orange theme (PREVIEW, Samera 2026-10-04).
   Loaded after theme.css only when TKN_THEME=black. Same layout, fonts and logo; only the colors change.
   --cta is the light-orange FILL (dark text on it). There is ONE orange. Small text and links on light backgrounds are black
   (--accent-text) with a light-orange underline or tile, because light orange text on a light page is unreadable. */
:root{
  --bg:#f6f4f1; --alt:#ece9e4; --wood:#141414; --deep:#0b0b0b; --ink:#1a1a1a; --stone:#55514c; --line:#dad6cf;
  --cta:#f6a552; --cta-h:#ee9233; --accent-text:#141414;
  --gold:#f6a552; --gold-text:var(--accent-text); --gold-hover:var(--cta-h);
  --graphite:var(--wood); --graphite-2:#232323; --graphite-line:#3b3b3b; --stone-dark-bg:#c9c5be;
}

/* fills: light orange with black text */
.btn-cta,.btn-cta:hover,.btn-primary,.btn-primary:hover{color:#141414}
.chip[aria-current="true"]{color:#141414}
.steps.steps-4 li::before,.more-details>summary::before{color:#141414}
@media (max-width:900px){.mbar .btn-cta{color:#141414}}
.cta-band{background:var(--cta)}
.cta-band h2,.cta-band p{color:#141414}
.cta-band .btn-cta{background:#141414;color:#fff}
.cta-band .btn-cta:hover{background:#000;color:#fff}
.cta-band .btn-line{border-color:#141414;color:#141414}
.cta-band .btn-line:hover{background:rgba(0,0,0,.1);border-color:#141414}

/* small orange text on light backgrounds uses the darker orange */
.text-link,.micro .text-link,.page-head .text-link,.learn,.door .learn,.svc-note a,.door-for,
.why-list li::before,.checks-light li::before,.num-list li::marker,.faq-d summary::after,.area-links a:hover{color:var(--accent-text)}
.dark .text-link,.dark .checks-light li::before,.page-head.dark .text-link{color:var(--gold)}
.social-link svg,.head-phone svg{color:var(--accent-text)}

/* header: black, white navigation, logo mark in light orange */
.site-header{background:rgba(20,20,20,.97);color:#fff;border-bottom:1px solid #2b2b2b}
.site-header .brand{background:transparent;padding:0;color:var(--cta)}
.site-header .brand .brand-name{color:#fff}
.site-header .brand .mark path{stroke:#141414}
.site-nav a{color:#d9d6d1}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff;text-decoration-color:var(--cta)}
.head-phone{color:#fff}
.site-header .head-phone svg{color:var(--cta)}
.site-header .btn-line{border-color:#fff;color:#fff}
.site-header .btn-line:hover{background:rgba(255,255,255,.12)}
.site-header .menu-btn{color:#fff;border-color:#4a4a4a;background:transparent}
@media (max-width:1100px){
  .site-nav{background:#141414;border-bottom:1px solid #2b2b2b}
  .site-nav a{color:#fff;border-bottom-color:#2b2b2b}
}

/* dark bands */
.cleanup-band{border-top-color:var(--cta)}
.cleanup-band a{color:var(--gold)}
.hero-bid a{text-decoration-color:var(--cta)}
.eyebrow{color:var(--gold)}
.site-footer .brand{color:var(--cta)}
.site-footer .brand .mark path{stroke:#141414}
.social:hover{background:var(--cta);border-color:var(--cta);color:#141414}
.site-header .brand .mark rect,.site-footer .brand .mark rect{fill:var(--cta)}
.qform .micro .text-link,.dark .qform .text-link{color:var(--accent-text)}

/* one orange only (2026-10-04): links are black with a light-orange underline; icons and ticks sit on orange/black tiles */
.text-link,.svc-note a,.cleanup-note a,.prose a,.faq-d a,.micro .text-link,.page-head .text-link{color:#141414;text-decoration:underline;text-decoration-color:var(--cta);text-decoration-thickness:2px;text-underline-offset:4px}
.text-link:hover,.svc-note a:hover,.prose a:hover{text-decoration-color:var(--cta-h);background:rgba(246,165,82,.18)}
.dark .text-link,.page-head.dark .text-link,.cleanup-band a,.dark .prose a{color:#fff;text-decoration-color:var(--cta)}
.qform .micro .text-link,.dark .qform .text-link{color:#141414}
.learn,.door .learn{color:#141414;font-weight:600}
.learn::after,.door .learn::after,.svc-card .learn::after{color:#141414}
.why-list li::before,.checks-light li::before{color:#141414;background:var(--cta);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:.72rem;top:3px}
.dark .checks-light li::before{color:#141414;background:var(--cta)}
.checks-light li{padding-left:30px}
.faq-d summary::after{color:#141414}
.social-link svg{color:#141414}
.area-links a:hover{border-color:#141414;color:#141414;background:rgba(246,165,82,.18)}
.svc-card a:hover{border-color:var(--cta)}
/* neutral blacks/greys instead of the old warm browns; one orange for every accent */
/* lighter hero (Samera 2026-10-04): the photo shows more; the text side stays dark enough to read, plus a soft text shadow */
.hero-shade{background:linear-gradient(90deg,rgba(10,10,10,.62),rgba(10,10,10,.34) 55%,rgba(10,10,10,.06))}
.hero-photo h1,.hero-photo .hero-sub,.hero-photo .eyebrow,.hero-photo .hero-bid,.hero-photo .hero-cities,.hero-photo .trust-line{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.eyebrow{color:var(--cta)}
.tl-stars span,.stars{color:var(--cta)}
.section:has(> .est-wrap) .big-phone a svg{color:var(--cta)}
.section:has(> .est-wrap) .text-link{color:#fff;text-decoration-color:var(--cta)}
.section:has(> .est-wrap) .lede,.section:has(> .est-wrap) .muted,.section:has(> .est-wrap) .checks-light li{color:#dcdad6}
.section:has(> .est-wrap) .zip-check{border-color:#3b3b3b}
.site-footer .footer-base{border-top-color:#2b2b2b;color:#c9c5be}
.hero-cities,.cleanup-band p{color:#e4e2de}
.section:has(> .est-wrap) .qform .text-link,.qform .text-link{color:#141414;text-decoration-color:var(--cta)}