/* ============================================================================
   Drainage Quotes — shared stylesheet
   Ported from the Claude Design bundle (Home.dc.html <helmet> + _headercss.txt).
   Inline styles stay on the elements (as in the prototype); this file holds the
   base reset/typography, keyframes, scroll-reveal, responsive rules, and the
   :hover rules that replace the prototype's style-hover="" attributes.
   ============================================================================ */

/* --- base reset / typography (from Home.dc.html helmet) --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:'Source Sans 3',system-ui,sans-serif;color:#12294A;background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Source Sans 3',sans-serif;line-height:1.1;margin:0;letter-spacing:-.01em}
p{margin:0}
a{color:#0E7FB0;text-decoration:none}
a:hover{color:#0b6a94}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
img{max-width:100%}
::selection{background:#26B9E6;color:#fff}
main{display:block}

/* --- scroll reveal (master's IntersectionObserver adds .in) ---
   IMPORTANT: content is VISIBLE by default. We only hide + animate when JS is active
   (html.js). This means content can never be trapped invisible if the reveal script is
   blocked or stripped by the host (which caused an all-blank body in an earlier build).
   Belt-and-braces: a CSS keyframe forces reveal after 2.5s even if the observer never
   fires, so nothing can stay hidden regardless of JS. */
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1);
  animation:dqreveal .01s linear 2.5s forwards}
.js [data-reveal].in{opacity:1;transform:none;animation:none}
@keyframes dqreveal{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  #scene3d{transform:none!important}
}

/* --- keyframes (from helmet) --- */
@keyframes dqfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes dqflow{0%{background-position:0 0}100%{background-position:140px 0}}
@keyframes dqspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes dqpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes dqdrop{0%{transform:translateY(-40px);opacity:0}60%{opacity:1}100%{transform:translateY(120px);opacity:0}}
/* wizard (quote.dc.html) keyframes */
@keyframes dqstep{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes dqcheck{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes dqwave{0%{background-position:0 0}100%{background-position:120px 0}}
.wz-close:hover{background:#E4EBF3}
.wz-back:hover{color:#12294A}
.dq-ty1:hover{background:#1c3a63}
.dq-ty2:hover{background:#E4EBF3}
@media(prefers-reduced-motion:reduce){
  [style*="dqpulse"],[style*="dqfloat"],[style*="dqspin"],[style*="dqdrop"]{animation:none!important}
}

/* --- header responsive (from _headercss.txt) --- */
[data-dq="burger"]{display:none}
[data-dq="burger"] summary{list-style:none}
[data-dq="burger"] summary::-webkit-details-marker{display:none}
@media(max-width:820px){[data-dq="desk"]{display:none!important}[data-dq="burger"]{display:block!important}}
@media(max-width:520px){[data-dq="cta"]{display:none!important}}

/* --- hover rules (replacing prototype style-hover="") --- */
/* header + footer nav / CTA */
.dq-nav:hover{background:#F1F5FA;color:#12294A}
.dq-mnav:hover{background:#F1F5FA}
.dq-cta:hover{background:#F0682F;color:#fff}
.dq-flink{transition:color .15s ease}
.dq-flink:hover{color:#fff}
/* hero router chips */
.dq-chip{transition:background .15s ease,border-color .15s ease,color .15s ease}
.dq-chip-primary:hover{background:#DBF0FA}
.dq-chip:hover{border-color:#1AA9DB;color:#0C6E93}
/* service tiles */
.dq-tile{transition:transform .2s,box-shadow .2s,border-color .2s}
.dq-tile:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(18,41,74,.11);border-color:#BEE3F2}
/* guide chips (guides teaser) */
.dq-gchip{transition:border-color .15s ease,color .15s ease,background .15s ease}
.dq-gchip:hover{border-color:#1AA9DB;color:#0C6E93;background:#fff}
/* generic primary button (hero postcode submit, CTAs) */
.dq-btn{transition:background .15s ease}
.dq-btn:hover{background:#F0682F}
/* ghost / outline links used across sections */
.dq-link:hover{color:#0b6a94}
/* generic reusable hovers for ported spoke/guide/standard pages
   (agents apply these instead of editing this file; page-unique hovers go
   in a page-scoped <style> in cphHead) */
.dq-card{transition:transform .2s,box-shadow .2s,border-color .2s}
.dq-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(18,41,74,.11);border-color:#BEE3F2}
.dq-outline{transition:border-color .15s ease,color .15s ease,background .15s ease}
.dq-outline:hover{border-color:#1AA9DB;color:#0C6E93}
.dq-navy{transition:background .15s ease}
.dq-navy:hover{background:#1c3a63}
.dq-soft:hover{background:#E4EBF3}
.dq-faq-q{transition:background .15s ease}
.dq-faq-q:hover{background:#F5F9FC}

/* --- section width helper --- */
.dq-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}