/* Light theme for the Medway Builders site: white page, near-black type, the same hi-vis yellow accent.
   Switched on by <html class="light">. Overrides the colour tokens, then every rule that assumed a dark page.
   Remove the class (or this stylesheet) to go back to the dark theme. */

html.light{
  --bg:#ffffff; --bg-2:#f4f3ef; --paper:#141414; --paper-dim:rgba(20,20,20,.72); --muted:#5f5f5a;
  --lime:#ffd60a; --lime-glow:rgba(255,214,10,.45); --line:#e2e1dc; --line-soft:rgba(20,20,20,.12);
}
html.light body{background:#fff;color:var(--paper)}

/* yellow on white needs dark text and a hairline so the button has an edge */
html.light .btn-lime{color:#141414;border-color:#141414;background:var(--lime)}
html.light .btn-lime:hover{background:#ffe24d}
html.light .btn-ghost{color:#141414;border-color:rgba(20,20,20,.3)}
html.light .btn-ghost:hover{border-color:#141414}
/* yellow text on white is unreadable: eyebrows, numbers and small labels go dark with a yellow mark */
html.light .eyebrow{color:#141414}
html.light .eyebrow::before{content:"";display:inline-block;width:.6em;height:.6em;background:var(--lime);margin-right:.6em;vertical-align:baseline}
html.light .chip.lime{border-color:#141414;color:#141414;background:var(--lime)}
html.light .card .tag,html.light .review .sample{background:var(--lime);color:#141414}
html.light .step .num{background:var(--lime);color:#141414;width:max-content;padding:.5rem .625rem;border-radius:2px}
html.light .call{color:#141414;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:.12em;text-underline-offset:.18em}
html.light .svc-rows .n,html.light .svc-rows .go,html.light .near .d,html.light .panel-label,html.light .panel-foot,html.light .svc-item .lbl,html.light .card .more,html.light .others .go,html.light .area-facts dd a,html.light .faq summary i,html.light .m-svc a[aria-current],html.light .m-town a[aria-current],html.light .town-grid a[aria-current],html.light .svc-item[aria-current] .ttl,html.light .nav-link.is-here{color:#141414}
html.light .svc-rows .n{background:var(--lime);padding:.25em .4em;border-radius:2px}
html.light .nav-link.is-here::after,html.light .steps::after,html.light .rail button.on::before{background:var(--lime)}
html.light .rail button::before{border-color:rgba(20,20,20,.5)}
html.light .quote p,html.light .towns a:hover,html.light .towns a::after,html.light .svc-rows a:hover .go{color:#141414}
html.light .notice{color:#141414;border-color:#141414;background:var(--lime)}
html.light .review .q::before{color:var(--lime)}
html.light .phone svg,html.light .m-phone svg,html.light .mnav summary .chev{color:#141414}
html.light .town-grid a:hover,html.light .town-grid a:focus-visible{color:#141414;background:var(--lime)}
html.light .towns a:hover{background:transparent}
html.light .step{background:#fff;box-shadow:0 .25rem 1.25rem rgba(0,0,0,.06)}
html.light .quote-card,html.light .jobcard{background:rgba(255,255,255,.88);border-color:rgba(20,20,20,.1)}
html.light .form,html.light .cards,html.light .card,html.light .reviews,html.light .review,html.light .others,html.light .others a,html.light .near a,html.light .rules{border-color:var(--line)}
html.light .card,html.light .review,html.light .others a{background:#fff}
html.light .card:hover,html.light .others a:hover,html.light .near a:hover,html.light .svc-rows a:hover{background:var(--bg-2)}
html.light .rules{background:var(--bg-2);border-left-color:var(--lime)}
html.light .rules .who{color:#141414}
html.light .gallery figure{background:#fff}
html.light footer{background:#141414;color:#f4f3e8}
html.light footer .brand b,html.light footer .mono{color:#f4f3e8}
html.light footer .legal{color:rgba(244,243,232,.6)}
html.light footer .legal b{color:#f4f3e8}
html.light footer .brand small{color:var(--lime)}

/* header: white frosted bar, dark links */
html.light .top{background:rgba(255,255,255,.82);border-bottom-color:var(--line)}
html.light .top.scrolled{background:rgba(255,255,255,.96);box-shadow:0 .5rem 2rem rgba(0,0,0,.08)}
html.light .brand b,html.light .nav-link,html.light .phone{color:#141414}
html.light .nav-link:hover,html.light .has-panel.open>.nav-link,html.light .nav-link:focus-visible,html.light .phone:hover{background:rgba(20,20,20,.06)}
html.light .panel{background:#fff;border-color:var(--line);box-shadow:0 1.5rem 4rem rgba(0,0,0,.18)}
html.light .svc-item:hover,html.light .svc-item:focus-visible,html.light .svc-item[aria-current]{background:var(--bg-2)}
html.light .svc-item .ttl,html.light .town-grid a{color:#141414}
html.light .burger{border-color:var(--line);background:#fff}
html.light .burger span{background:#141414}
html.light .mnav{background:#fff}
html.light .mnav summary,html.light .m-link,html.light .m-svc a,html.light .m-town a{color:#141414;border-color:var(--line)}
html.light .m-town a{background:var(--bg-2)}

/* the scroll film and the service-page video heroes: text stays white over the footage, so the shade stays dark */
html.light .descent .stage{background:#fff}
html.light .descent .beat{color:#f4f3e8}
html.light .descent .beat .lede,html.light .descent .beat .chip{color:rgba(244,243,232,.8)}
html.light .descent .beat .chip{border-color:rgba(244,243,232,.3)}
html.light .descent .beat .eyebrow{color:var(--lime)}
html.light .descent .beat .eyebrow::before{display:none}
html.light .descent .btn-ghost{color:#f4f3e8;border-color:rgba(244,243,232,.4)}
html.light .descent .quote-card{background:rgba(255,255,255,.92);color:#141414}
html.light .descent .quote-card .lede,html.light .descent .quote-card .alt{color:rgba(20,20,20,.72)}
html.light .descent .quote-card .eyebrow{color:#141414}
html.light .descent .quote-card .eyebrow::before{display:inline-block}
html.light .descent .qform input,html.light .descent .qform select{color:#141414;border-bottom-color:rgba(20,20,20,.3)}
html.light .descent .qform label span{color:rgba(20,20,20,.6)}
html.light .descent .qform select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/></svg>")}
html.light .descent .qform select option{background:#fff;color:#141414}
html.light .descent .hint,html.light .progress .labels span{color:rgba(244,243,232,.7)}
html.light .progress .labels span.on{color:var(--lime)}
html.light .loader{background:#fff}
html.light .loader span{color:rgba(20,20,20,.6)}
html.light .loader em{color:#141414}
html.light .svc-hero .crumb a,html.light .svc-hero .lede,html.light .svc-hero .meta{color:rgba(244,243,232,.85)}
html.light .svc-hero h1,html.light .svc-hero .meta b{color:#f4f3e8}
html.light .svc-hero .crumb span{color:var(--lime)}
html.light .svc-hero .eyebrow::before{display:none}
html.light .svc-hero .btn-ghost{color:#f4f3e8;border-color:rgba(244,243,232,.4)}
html.light .grain{opacity:.03}

/* area pages: the map sits on white */
html.light .area-hero{background:radial-gradient(120% 80% at 80% 0%,rgba(255,214,10,.14),transparent 60%),#fff}
html.light .area-map{background:linear-gradient(180deg,var(--bg-2),#fff);border-color:var(--line)}
html.light .area-map .grat{stroke:rgba(20,20,20,.08)}
html.light .area-map .grat-l,html.light .area-map .scale text,html.light .area-map .north text{fill:rgba(20,20,20,.4)}
html.light .area-map .scale line,html.light .area-map .north path{stroke:rgba(20,20,20,.5)}
html.light .area-map .town circle{fill:rgba(20,20,20,.55)}
html.light .area-map .town text{fill:rgba(20,20,20,.75);stroke:#fff}
html.light .area-map .here circle.dot,html.light .area-map a.town:hover circle{fill:#141414}
html.light .area-map .here text,html.light .area-map a.town:hover text{fill:#141414;font-weight:500}
html.light .area-map .ring{stroke:#141414}
html.light .area-map .link{stroke:#141414;opacity:.7}
html.light .area-map .dist{fill:#141414;stroke:#fff;font-weight:500}
html.light .area-facts dt{color:var(--muted)}
html.light .area-facts dd{color:#141414}
html.light .area-hero .crumb a{color:var(--muted)}
html.light .area-hero .crumb span,html.light .svc-hero .crumb span{color:#141414}

/* form fields and sliders on white */
html.light .form input,html.light .form select,html.light .form textarea,html.light .qform input,html.light .qform select{color:#141414;border-bottom-color:rgba(20,20,20,.25)}
html.light .form input:focus,html.light .form select:focus,html.light .form textarea:focus{border-bottom-color:#141414}
html.light .form select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/></svg>")}
html.light .form select option{background:#fff;color:#141414}
html.light .done{color:#141414;border-color:#141414;background:var(--lime)}
html.light .form .consent span{color:rgba(20,20,20,.72)}
html.light .form .consent input{accent-color:#141414}
html.light .err{color:#9b1c13;border-color:#9b1c13;background:#fdecea}
html.light .ba .tag{background:rgba(255,255,255,.85);color:#141414;border-color:rgba(20,20,20,.15)}
html.light .ba .handle{background:#fff}
html.light .ba .handle::after{background:var(--lime);color:#141414;box-shadow:0 .25rem 1rem rgba(0,0,0,.25)}
html.light .ba{border-color:var(--line)}
html.light .faq summary i{color:#141414}
html.light .points li::before,html.light .qpoints li::before{background:#141414}
html.light .chip{color:#141414;border-color:rgba(20,20,20,.2)}
html.light .progress .track{background:rgba(255,255,255,.3)}

/* finale pills sit over the film, so they keep their dark-theme look; the AI panel follows the page */
html.light .descent .finale-note{color:rgba(244,243,232,.8)}
html.light .ai-dialog{background:#fff;border-color:var(--line);box-shadow:0 2rem 5rem rgba(0,0,0,.25)}
html.light .ai-dialog .eyebrow{color:#141414}
html.light .ai-dialog .eyebrow::before{display:none}
html.light .ai-dialog::backdrop{background:rgba(20,20,20,.45)}
html.light footer .foot-towns{color:rgba(244,243,232,.75)}
html.light footer .foot-towns a{text-decoration-color:rgba(244,243,232,.3)}
html.light footer .foot-towns a:hover{color:var(--lime)}
html.light footer .mono a{color:#f4f3e8}