/* Chimney Sweep It quote page, v14. House quote page structure, Chimney Sweep It brand.
   Teal #0F6E6E (accent), Ink #1C2430 (text, top bar, footer), Off-white #FAF6F0 (page),
   Sand #EFE8DE (border base, darkened to #E3DACF), Mist #DCEFEE (selected option), White.
   Nunito only. Square corners everywhere, 1px borders, no shadows. */
:root{
  --teal:#0F6E6E; --ink:#1C2430; --off:#FAF6F0; --sand:#EFE8DE; --line:#E3DACF; --mist:#DCEFEE; --white:#FFFFFF;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--off);color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;font-size:16px;line-height:1.5}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.15}
p,figure,ul{margin:0}
[hidden]{display:none!important}
.wrap{width:min(920px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* label style: Nunito 700 caps, letterspaced */
.topbar,.imgcard figcaption,.fl,.trust,.eyebrow,.ft .small{
  font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* 1. top bar */
.topbar{background:var(--ink);color:var(--white);height:28px;display:flex;align-items:center;justify-content:center;
  padding:0 12px;font-size:11px;text-align:center;white-space:nowrap;overflow:hidden}

/* 2. header */
.hd{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:62px;padding:8px 0}
.logo{display:block;line-height:0}
.logo svg{height:40px;width:auto;display:block}

/* split CTA: square, solid teal */
.split{display:flex;background:var(--teal)}
.split a{display:flex;align-items:center;justify-content:center;padding:12px 18px;color:var(--white);
  font-weight:700;font-size:14px;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background .15s}
.split a:hover{background:var(--ink)}
.split .split-call{border-left:1px solid rgba(255,255,255,.45)}
.split a:focus-visible{outline-offset:-4px;outline-color:var(--white)}

/* 3. hero on grid paper */
.hero{background-color:var(--off);
  background-image:linear-gradient(rgba(28,36,48,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(28,36,48,.06) 1px,transparent 1px);
  background-size:24px 24px;padding:48px 0 28px;border-bottom:1px solid var(--line)}
.hero h1{font-weight:800;font-size:50px;letter-spacing:-.02em;line-height:1.1;text-align:center;margin-bottom:32px}
.ac{color:var(--teal)}
@media (min-width:1180px){.hero h1{margin-inline:-110px;font-size:48px}}
.cols{display:grid;grid-template-columns:minmax(0,460px) 360px;justify-content:center;gap:32px;align-items:start}
.imgcard{background:var(--white);border:1px solid var(--line);padding:8px 8px 0;width:100%;justify-self:center;margin-top:14px}
.imgcard img{width:100%;aspect-ratio:1/1;object-fit:cover}
.imgcard figcaption{text-align:center;padding:12px 8px 14px;font-size:11px}

/* form card */
.quiz{background:var(--white);border:1px solid var(--ink);padding:20px;position:relative}
.anchor{position:absolute;top:-90px}
.bar{display:flex;gap:6px;margin-bottom:18px}
.bar span{flex:1;height:3px;background:var(--line);transition:background .25s}
.bar span.on{background:var(--teal)}
.q{font-weight:700;font-size:22px;line-height:1.25;text-align:center;margin-bottom:6px}
.q:focus{outline:none}
.step{display:none}
.step.on{display:block}
.fl{display:block;margin:18px 0 8px;font-size:12px}
.req{color:var(--teal);font-weight:700}
input,textarea,select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:0;padding:12px 12px;height:48px}
input::placeholder,textarea::placeholder{color:rgba(28,36,48,.5)}
input:hover,textarea:hover,select:hover{border-color:var(--teal)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
textarea{height:auto;min-height:88px;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.check{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:12px;line-height:1.45;cursor:pointer;color:rgba(28,36,48,.75)}
.check strong{color:var(--ink);font-weight:700;font-size:13px}
.check input{width:16px;height:16px;flex:0 0 auto;margin:2px 0 0;padding:0;accent-color:var(--teal)}
.go{display:block;width:100%;height:52px;margin-top:20px;font:inherit;font-weight:700;font-size:18px;
  background:var(--teal);color:var(--white);border:0;border-radius:0;cursor:pointer;transition:background .15s}
.go:hover{background:var(--ink)}
.go:disabled{opacity:.6;cursor:default}
.back{background:none;border:0;font:inherit;font-weight:600;font-size:14px;color:var(--ink);
  cursor:pointer;margin-top:10px;padding:8px 0;min-height:44px}
.back:hover{text-decoration:underline}
.err{display:none;font-weight:700;font-size:13px;margin-top:6px;padding-left:8px;border-left:3px solid var(--teal)}
.err.on{display:block}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:0;padding:12px 14px;min-height:52px;cursor:pointer;
  transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--teal)}
.opt .t{flex:1;font-weight:700;font-size:15px}
.opt .ar{color:var(--teal);font-weight:900;opacity:0}
.opt.sel{border-color:var(--teal);background:var(--mist);box-shadow:inset 0 0 0 1px var(--teal)}
.opt.sel .ar{opacity:1}
.msg{display:none;margin-top:14px;padding:12px;font-size:14px;font-weight:600;background:var(--mist);border-left:3px solid var(--teal)}
.msg.on{display:block}
.hp{position:absolute;left:-9999px}

/* past step 1: only the booking card remains */
body.booking .cols{grid-template-columns:minmax(0,440px)}
body.booking .hero{border-bottom:0;padding-bottom:56px;min-height:70vh}

/* 4. trust line */
.trust{list-style:none;padding:0;margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:12px}
.trust li{white-space:nowrap}
.trust .ck{color:var(--teal);margin-right:4px}

/* 5. visit section: eyebrow, H2, sub line, 4 cards */
.visit{padding:44px 0 56px}
.eyebrow{color:var(--teal);font-size:11px}
.visit h2{font-weight:800;font-size:32px;letter-spacing:-.01em;margin-top:6px}
.sub{margin-top:8px;font-size:16px;color:rgba(28,36,48,.8)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.card{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--teal);padding:18px 16px 20px}
.card h3{font-weight:800;font-size:17px;line-height:1.25}
.card p{margin-top:6px;font-size:14px}

/* 6. footer */
.ft{background:var(--ink);color:var(--white);padding:28px 0 32px;font-size:14px;line-height:1.7}
.ft a{color:var(--white)}
.ft .small{font-size:11px;margin-top:10px;opacity:.75}
.ft .links{margin-top:8px}
.ft :focus-visible{outline-color:var(--white)}

@media (max-width:820px){
  .cols,body.booking .cols{grid-template-columns:minmax(0,1fr)}
  .imgcard{width:min(300px,100%);margin-top:0}
  .hero h1{font-size:38px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .topbar{font-size:10px;letter-spacing:.06em;white-space:normal;height:auto;min-height:28px;padding:6px 12px;line-height:1.35}
  .hd .wrap{flex-wrap:wrap;padding:10px 0}
  .logo svg{height:32px}
  .hd .split{width:100%}
  .hd .split a{flex:1 1 0;padding:11px 12px}
  .hero{padding:28px 0 24px}
  .hero h1{font-size:32px;margin-bottom:22px}
  .cols{gap:20px}
  .quiz{padding:18px 16px}
  .q{font-size:20px}
  .trust{flex-direction:column;align-items:center;gap:6px}
  .visit h2{font-size:26px}
  .cards{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}