/* 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:var(--card-2, var(--card, var(--slate)));
  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))}

/* ATi's card sits on the brand blue rather than the page background, so the
   whole thing flips to light on dark. The overrides live on the card itself,
   as custom properties, so the page palette around it is untouched and the
   shared rules below need no ATi specific copies. The inputs are the one
   exception: they stay white with dark text, because a form field that matches
   its card does not read as a field. */
.book-card.is-brand{
  background:var(--brand-card,#17325a);border-color:rgba(255,255,255,.16);
  /* Set explicitly, not just as a token: descendants inherit the computed
     colour from body, so redefining --text alone would not reach them. */
  color:#ffffff;
  --text:#ffffff;--muted:#cfdbee;--muted-2:#aec1dc;
  --line-strong:rgba(255,255,255,.3);
  --accent:#ffffff;--accent-hi:#e9f0fb;--on-accent:#17325a;
  --accent-soft:rgba(255,255,255,.14);--accent-ring:rgba(255,255,255,.4);
  --warn:#ffc9b6;--warn-soft:rgba(255,255,255,.1)}
.book-card.is-brand .form-row input,
.book-card.is-brand .form-row select,
.book-card.is-brand .form-row textarea{background:#ffffff;color:#11213c;
  border-color:rgba(255,255,255,.34)}
.book-card.is-brand .form-row input:focus,
.book-card.is-brand .form-row select:focus,
.book-card.is-brand .form-row textarea:focus{background:#ffffff;border-color:#ffffff}
/* background-repeat and background-position come from .form-row select, but the
   `background:` shorthand above resets both, so they are restated here. Without
   this the chevron tiles across the whole control. */
.book-card.is-brand .form-row select{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='%2311213c' 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}
.book-card.is-brand .form-row input[aria-invalid="true"]{background:#fff3ee;border-color:#ff9c78}
/* The home page defines .btn--primary in its own inline CSS, so this needs the
   extra specificity to win. A navy button on a navy card is barely a button. */
.book-card.is-brand .btn--primary{background:#ffffff;color:#17325a;box-shadow:0 6px 22px -8px rgba(0,0,0,.45)}
.book-card.is-brand .btn--primary:hover{background:#e9f0fb;color:#17325a}
.book-card.is-brand .back-link{background:none;color:#cfdbee}
.book-card.is-brand .back-link:hover{color:#ffffff}
.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}
/* A class rule beats the user agent's [hidden], and several blocks in this form
   are toggled with it, so one rule settles all of them. Without this the address
   picker sat on screen with an empty select. */
.book-card [hidden]{display:none}
.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{border-color:var(--accent);background:var(--card-2, var(--slate-2, var(--bg)))}
/* The border colour change is a nice touch but it is not a focus indicator: it
   is a colour difference and nothing else, which fails WCAG 2.4.7 and is
   invisible to anyone who cannot separate the two colours. The outline used to
   be removed outright here. Keyboard focus gets a real ring back. */
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.book-card.is-brand .form-row input:focus-visible,
.book-card.is-brand .form-row select:focus-visible,
.book-card.is-brand .form-row textarea:focus-visible{outline-color:#ffffff}
.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}}

/* Address block. Three stacked inputs under one label, so the gap is wider than
   a normal row's: at 6px they read as one control rather than three. */
.addr{gap:10px}
.addr-find{display:grid;grid-template-columns:1fr auto;gap:10px}
/* Its own class rather than .btn--ghost: both home pages already define that
   one for their own page background, and on the dark booking card the ATi
   version came out white on white. */
.addr-find .addr-btn{min-height:50px;padding:0 18px;font-size:14px;white-space:nowrap;
  background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.addr-find .addr-btn:hover{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--text)}
@media (max-width:400px){.addr-find{grid-template-columns:1fr}}
/* role="status", so it is empty until there is something worth announcing.
   Collapsing it when empty keeps the spacing honest. */
.addr-status{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted-2)}
.addr-status:empty{display:none}
.addr-pick{gap:6px}
.addr-fields{display:flex;flex-direction:column;gap:10px}
/* The found address, standing in for the three fields once the picker has
   filled them. Three boxes of text somebody did not type is just noise. */
.addr-chosen{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  font-size:14.5px;line-height:1.5;color:var(--text)}
.link-btn{background:none;padding:0;font:inherit;font-size:13px;font-weight:600;
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:0}
.link-btn:hover{color:var(--accent-hi)}

/* Optional sections, folded away so step 3 is not one long scroll. Native
   details/summary: it is keyboard operable and announced as expandable without
   a line of script, which a div with a click handler is not. */
.fold{border:1px solid var(--line-strong);border-radius:12px;padding:0 15px}
.fold[open]{padding-bottom:15px}
.fold>summary{list-style:none;cursor:pointer;padding:14px 0;min-height:50px;
  display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--text)}
.fold>summary::-webkit-details-marker{display:none}
/* The chevron is decorative, so it is drawn rather than announced. */
.fold>summary::after{content:"";margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.fold[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.fold .opt{text-transform:none;letter-spacing:0;color:var(--muted-2);font-weight:400;font-size:13px}

/* File row. The native control is left as a native control: a styled label over
   a hidden input loses the keyboard behaviour and the "no file chosen" text
   that tells somebody whether it worked. */
.form-row input[type="file"]{padding:12px 14px;font-size:14px;line-height:1.7;cursor:pointer}
.form-row input[type="file"]::file-selector-button{margin-right:12px;padding:7px 14px;border:1px solid currentColor;
  border-color:color-mix(in srgb, currentColor 40%, transparent);
  border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
/* currentColor again: the accent tokens are tuned for the card, and the file
   input is white on ATi, where an accent hover is invisible. */
.form-row input[type="file"]::file-selector-button:hover{border-color:currentColor;
  background:color-mix(in srgb, currentColor 10%, transparent)}
.file-hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted-2)}
.file-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.file-list li{display:flex;align-items:baseline;gap:10px}
.file-list .is-bad{color:var(--warn,#f0a08b)}
.file-drop{padding:0;font:inherit;font-size:12.5px;font-weight:600;min-height:0;background:none;
  color:var(--muted-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.file-drop:hover{color:var(--text)}
.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. */

/* The home pages reset button chrome for the whole page in their inline CSS;
   nothing on a generated page did, so Back kept the browser's default border
   and rendered as a bordered box there and a plain link on the home pages. The
   same form has to look the same everywhere, so the reset travels with the form.
   :where() holds it at zero specificity, so every styled rule below still wins
   regardless of order. */
:where(.book-card) :where(button){font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.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}