/* The booking form, shared by every page on both sites.

   The home pages and the generated pages use different token names for the same
   roles, so each colour here falls back: --card then --slate, --bg then --navy.
   That way one stylesheet serves the dark DampScan home page, the light ATi one,
   and the area and service pages, without a second copy. */
/* ---------- Multi-step form ---------- */
.book-card{background:linear-gradient(180deg,var(--card, var(--slate)),var(--card-2,#101f33));
  border:1px solid var(--line-strong);border-radius:18px;padding:clamp(22px,2.4vw,30px);
  box-shadow:0 30px 70px -30px var(--card-shadow,rgba(0,0,0,.85))}
.book-head{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.book-head h2{font-size:clamp(20px,1.9vw,24px);letter-spacing:-.01em}
.book-head p{font-size:14px;color:var(--muted)}
.dots{display:flex;gap:8px;align-items:center;margin-bottom:20px}
.dots span{width:100%;height:4px;border-radius:999px;background:var(--line-strong);transition:background .25s}
.dots span.is-done{background:var(--accent)}
.dots .step-label{width:auto;height:auto;background:none;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;flex-shrink:0;margin-left:6px;font-weight:600}
.fstep{display:none;flex-direction:column;gap:14px}
.fstep.is-active{display:flex}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.form-row .opt{text-transform:none;letter-spacing:0;color:var(--muted-2);font-weight:400}
.form-row input,.form-row select,.form-row textarea{width:100%;background:var(--bg, var(--navy));border:1px solid var(--line-strong);border-radius:10px;color:var(--text);padding:13px 15px;font:inherit;font-size:16px;min-height:50px;transition:border-color .16s,background .16s}
.form-row select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aebbcc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form-row textarea{min-height:86px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);background:var(--card-2, var(--slate-2, var(--bg)))}
.form-row input[aria-invalid="true"]{border-color:var(--warn,#e8836b);background:var(--warn-soft,rgba(232,131,107,.06))}
.err{font-size:12.5px;color:var(--warn,#f0a08b);display:none}
.form-row.has-err .err{display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:420px){.two-col{grid-template-columns:1fr}}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.checks{grid-template-columns:1fr}}
.form-row label.check{font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--text);font-weight:500}
.check{position:relative;display:flex;align-items:center;gap:11px;border:1px solid var(--line-strong);border-radius:11px;padding:13px 14px;font-size:14.5px;cursor:pointer;min-height:50px;transition:border-color .16s,background .16s}
.check:hover{border-color:var(--accent-ring)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line-strong);flex-shrink:0;display:grid;place-items:center;color:transparent;transition:background .16s,border-color .16s,color .16s}
.check input:checked~.box{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#06121f)}
.check:has(input:checked){border-color:var(--accent-ring);background:var(--accent-soft)}
.check input:focus-visible~.box{outline:2px solid var(--accent-hi);outline-offset:2px}
.fnav{display:flex;gap:10px;align-items:center;margin-top:4px}
.fnav .btn{flex:1}
.back-link{background:none;color:var(--muted-2);font-size:13.5px;font-weight:500;padding:0 6px;flex:0 0 auto;min-height:44px}
.back-link:hover{color:var(--text)}
.form-foot{margin-top:14px;font-size:12px;color:var(--muted-2);line-height:1.5;text-align:center}
.book-success{display:none;text-align:center;padding:14px 0 6px;flex-direction:column;gap:12px;align-items:center}
.book-success .check-ring{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;border:1px solid var(--accent-ring)}
.book-success h3{font-size:21px}
.book-success p{font-size:14.5px;color:var(--muted);max-width:38ch}
.is-sent .book-body{display:none}
.is-sent .book-success{display:flex}

/* The button and helper styles the form depends on. The home pages define these
   inline for the rest of the page, and a duplicate definition there is harmless
   because it is identical. The generated pages have no other source for them.
   --on-accent lets the light ATi palette use white text where the dark DampScan
   one uses near black. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;
  border-radius:999px;font-weight:600;font-size:15px;transition:background .2s,color .2s,transform .2s,border-color .2s}
.btn--primary{background:var(--accent);color:var(--on-accent,#06121f);box-shadow:0 6px 22px -8px var(--accent-ring,rgba(79,168,232,.7))}
.btn--primary:hover{background:var(--accent-hi);color:var(--on-accent,#06121f);transform:translateY(-1px)}
.btn--lg{min-height:58px;font-size:16.5px;padding:0 32px}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}