/* DC Electric, accessibility layer, 9 Oct 2026. WCAG 2.1 AA.
   Loaded after each page's own styles. It adjusts; it never removes a section, a photo or a motion. */

/* hidden from the eye, read by screen readers */
.vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* 2.4.1 skip link: first thing a keyboard reaches, shown on focus */
.skip{position:fixed;left:12px;top:-200px;z-index:300;padding:15px 18px;border-radius:2px;background:#FFC20E;color:#070D1C;font:600 15px/1 Barlow,'Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px;outline:3px solid #070D1C;outline-offset:2px;box-shadow:0 0 0 5px #FFC20E}
main:focus{outline:none}

/* 1.4.1 links inside text carry an underline, not colour alone */
.foot a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot a:hover{text-decoration-thickness:2px}

/* 2.4.7 / 1.4.11 focus that shows on every ground: gold on the dark sections, navy on the paper ones */
a:focus-visible,button:focus-visible{outline:3px solid #FFC20E;outline-offset:3px}
.ckt--paper :focus-visible,.contact :focus-visible,.page-body :focus-visible{outline-color:#0E1F45!important}
.estimate__form input:focus-visible,.estimate__form select:focus-visible,.estimate__form textarea:focus-visible{outline:3px solid #0E1F45;outline-offset:2px;border-color:#1B6FBF}
.wipe__handle:focus-visible span{box-shadow:0 0 0 3px #fff,0 0 0 6px #070D1C,0 2px 12px rgba(0,0,0,.5)}
.msgr:focus-visible{outline:3px solid #070D1C;outline-offset:2px;box-shadow:0 0 0 7px #FFC20E,0 10px 30px rgba(0,0,0,.35)}
.callbar a:focus-visible{outline:3px solid #070D1C;outline-offset:-7px}
.callbar .callbar__q:focus-visible,.callbar .callbar__m:focus-visible{outline-color:#FFC20E}
/* the header leaves while you read down; it comes back the moment anything in it has focus */
.top:focus-within{top:0}
/* on phones the call bar covers the bottom 58px; keep a focused field clear of it */
@media (max-width:760px){html{scroll-padding-bottom:72px}}

/* 1.4.13 the Messenger label: hoverable (a bridge across the gap), dismissed with Esc */
.msgr span::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px}
.msgr:hover span,.msgr:focus-visible span{pointer-events:auto}
.msgr.tip-off span{opacity:0!important;pointer-events:none!important}

/* 1.4.3 / 1.4.11 colour adjustments, same hues */
.steps span{color:#A86F00}                          /* step numerals on paper: was #E0A800 at 1.92:1, now 3.80:1 (large text) */
.flip__btn{border-color:rgba(255,255,255,.45)}      /* button edge on navy: was 1.52:1, now 4.30:1 */
.ckt--paper figcaption,.ckt--paper .reel__tag{color:#2A3245}  /* captions under paper-section photos sit in the photo's drop shadow: #3B4356 measured 4.26:1 at worst, now 5.6:1 */
.estimate__form ::placeholder{color:#5F6779;opacity:1}  /* was the browser grey at 2.35:1, now 5.67:1 on white */

/* 1.4.12 with wider letter and word spacing a long word must wrap inside its tile or button, never run off it */
.svc--grid .svc__row,.svc__txt,.ckt__head>*{min-width:0}
h1,h2,h3,.eyebrow,.svc__link,.btn,.foot,.page-more{overflow-wrap:break-word}
.btn{max-width:100%}
.contact .wrap>*,.contact dd{min-width:0}
.big-tel,.contact dd{overflow-wrap:anywhere}
.btn[href^="mailto:"]{overflow-wrap:anywhere}

/* 3.3.1 / 3.3.2 the estimate form: required said in words, errors in words under the field */
.estimate__form .req{font-weight:600;letter-spacing:.08em}
.field-err{margin:6px 0 0;max-width:none;font:600 15px/1.35 Barlow,'Helvetica Neue',Arial,sans-serif;letter-spacing:0;text-transform:none;color:#B42318}
.field-err::before{content:"! ";font-weight:800}
.estimate__form [aria-invalid="true"]{border-color:#B42318;border-width:2px}
.form-alert{margin:0;max-width:none;font:600 15px/1.4 Barlow,'Helvetica Neue',Arial,sans-serif;color:#B42318}
.form-alert:not(:empty){margin-top:16px}

/* 2.2.2 pause control: one switch for every moving thing on the page, remembered */
.motion-btn{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:12px 0;min-height:44px;background:none;border:0;border-radius:2px;color:#C9D2E4;font:600 13px/1.3 Barlow,'Helvetica Neue',Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;align-self:flex-start}
.motion-btn:hover{color:#FFC20E}
.motion-btn svg{width:16px;height:16px;flex:none}
.motion-btn .i-play,.motion-paused .motion-btn .i-pause{display:none}
.motion-paused .motion-btn .i-play{display:block}
.motion-paused .spine__pulse{animation-play-state:paused}
/* with scripts off the switch cannot work, so nothing moves on its own: the rail stands still and the reel has the browser's own controls */
.no-js .motion-btn,.no-js .reel__btn{display:none}
.no-js .spine__pulse{animation:none}
.motion-paused .flip.strike .flip__bloom{animation:none}
.motion-paused .jglow{transition:none}
.reel__btn{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;padding:10px 14px;border:2px solid #0E1F45;border-radius:2px;background:transparent;color:#0E1F45;font:600 12px/1 Barlow,'Helvetica Neue',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.reel__btn:hover{background:#0E1F45;color:#fff}
.reel__btn svg{width:14px;height:14px;flex:none}
.reel__btn .i-play,.reel__btn.is-paused .i-pause{display:none}
.reel__btn.is-paused .i-play{display:block}

/* accessibility statement page */
.a11y-doc h2{font:800 clamp(26px,2.6vw,34px)/1.05 'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:36px 0 12px;color:#0E1F45}
.a11y-doc h2:first-child{margin-top:0}
.a11y-doc p,.a11y-doc li{max-width:68ch;color:#141A2A}
.a11y-doc ul{padding-left:1.2em;margin:0 0 1em}
.a11y-doc li{margin-bottom:.5em}
.a11y-doc a{color:#0E1F45;font-weight:600}