/* ==========================================================================
   assets/enquiry-bar/enquiry-bar.css — the enquiry bar on phones (≤760px)
   LIVE since 2026-10-03. Drawn by enquiry-bar.js; see README.md.

     1 · the bar      52px = 4 + 44 + 4 (+ the phone's safe area); WhatsApp 44 ·
                      Call (the rest) · Enquiry 124 (112 under 360px); 8px apart
     2 · the sheet    62% of the screen, rising as a curtain from the bar; the
                      Reach Us strip on top; one scrolling body; Send at the foot
     3 · the answers  the homepage audit form's wells; the site's phone field
     4 · choosing     services: soft rows with square ticks (several);
                      discussion: two radio cards (one)
     5 · folds        "Other" and "Add more details" grow open over 0.3s
     6 · Send         the only solid button on the sheet; always fully coloured
     7 · errors       a red line and "!" (the words go to the screen reader)
   Nothing here is drawn above 760px.
   ========================================================================== */
.eb-bar, .eb-dlg{
  --eb-cobalt:#004594; --eb-act:#0760C6; --eb-act-a:#004EA6;
  --eb-ink:#0E1E35; --eb-ink2:#33415A; --eb-ink3:#5F6B80; --eb-ink4:#8A95A8;
  --eb-well:#F2F5FB; --eb-ph:#7C8AA5; --eb-soft:#F3F6FA; --eb-chosen:#EAF2FD;
  --eb-ring:rgba(7, 96, 198, .42); --eb-red:#D14343; --eb-redline:rgba(209, 67, 67, .9); --eb-wa:#1DA851;
  --eb-sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --eb-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --eb-safe:env(safe-area-inset-bottom, 0px);
  --eb-t:.3s; --eb-ease:cubic-bezier(.2, .7, .3, 1);
}
.eb-bar *, .eb-dlg *{ box-sizing:border-box; }

/* ==========================================================================
   1 · THE BAR
   ========================================================================== */
.eb-bar{ display:none; }
@media (max-width:760px){
  .eb-bar{
    display:grid; grid-template-columns:44px minmax(0, 1fr) 124px; align-items:center; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:50;                 /* above the page; under the header (60) and every panel (54+) */
    margin:0; padding:4px 12px calc(4px + var(--eb-safe)); background:#fff; box-shadow:0 -1px 0 #E3E8EF;
    font:400 15px/1.2 var(--eb-sans); color:var(--eb-ink); -webkit-text-size-adjust:100%;
  }
  html.eb-on body{ padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px)); }   /* the page's last line ends above the bar */
  html.eb-on{ scrollbar-gutter:stable; }
  html.mnl-lock .eb-bar{ display:none; }                                                /* the site menu is open */
}
.eb-bar .eb-k{
  display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; height:44px; margin:0; padding:0 10px; border:0; border-radius:10px;
  background:#fff; box-shadow:inset 0 0 0 1px #C9D3E1; color:var(--eb-ink); font:inherit; font-weight:650; line-height:1.15;
  text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  transition:background-color .14s ease;
}
.eb-bar .eb-k:focus-visible{ outline:2px solid var(--eb-act); outline-offset:2px; }
.eb-bar .eb-k:active{ background:#F3F6FA; }
.eb-bar .eb-wa{ width:44px; padding:0; }
.eb-bar .eb-wa svg{ display:block; width:22px; height:22px; color:var(--eb-wa); }
.eb-bar .eb-call{ padding-left:8px; }
.eb-bar .eb-tile{ flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#EEF3FB; }
.eb-bar .eb-tile svg{ display:block; width:15px; height:15px; color:var(--eb-act); }
.eb-bar .eb-num{ font-size:15px; font-weight:650; letter-spacing:-.005em; font-variant-numeric:tabular-nums; }
.eb-bar .eb-enq{ justify-content:space-between; padding:0 0 0 16px; background:#F3F7FD; box-shadow:inset 0 0 0 1px #C9D6EA; font-size:16px; font-weight:750; }
.eb-bar .eb-enq.is-on, .eb-bar .eb-enq:active{ background:#E6EFFC; }
.eb-bar .eb-box{ flex:none; display:grid; place-items:center; width:28px; height:28px; margin-right:8px; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px #C9D6EA; }
.eb-bar .eb-box svg{ display:block; width:15px; height:15px; color:var(--eb-act); }
@media (max-width:389px){
  .eb-bar .eb-num{ font-size:14.5px; }
  .eb-bar .eb-k{ gap:6px; }
  .eb-bar .eb-call{ padding:0 6px; }
  .eb-bar .eb-tile{ width:24px; height:24px; }
}
@media (max-width:359px){
  .eb-bar{ grid-template-columns:44px minmax(0, 1fr) 112px; gap:6px; padding-left:10px; padding-right:10px; }
  .eb-bar .eb-num{ font-size:13.5px; }
  .eb-bar .eb-call{ gap:5px; padding:0 5px; }
  .eb-bar .eb-call .eb-tile{ display:none; }
  .eb-bar .eb-enq{ padding-left:12px; font-size:15px; }
  .eb-bar .eb-box{ width:24px; height:24px; margin-right:6px; }
}

/* ==========================================================================
   2 · THE SHEET
   ========================================================================== */
html.eb-lock{ overflow:hidden; }
.eb-dlg{
  position:fixed; left:0; right:0; top:var(--eb-vt, 0px); bottom:auto; width:100%; height:var(--eb-vh, 100%);
  max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:transparent;
  color:var(--eb-ink); font:400 16px/1.35 var(--eb-sans); text-align:left; -webkit-text-size-adjust:100%;
}
.eb-dlg[open]{ display:flex; flex-direction:column; justify-content:flex-end; }
.eb-dlg::backdrop{ background:rgba(14, 30, 53, .42); animation:ebFade .18s ease-out both; }
@keyframes ebFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ebCurtain{ from{ clip-path:inset(100% 0 0 0 round 20px 20px 0 0); } to{ clip-path:inset(0 0 0 0 round 20px 20px 0 0); } }
.eb-dlg [hidden]{ display:none !important; }
.eb-dlg p, .eb-dlg h2, .eb-dlg label{ margin:0; padding:0; }
.eb-dlg button{
  margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.eb-dlg button:focus-visible{ outline:2px solid var(--eb-act); outline-offset:2px; }
.eb-dlg .eb-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.eb-dlg .eb-hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.eb-dlg .eb-sheet{
  position:relative; display:flex; flex-direction:column; height:62%; min-height:0; margin:0; overflow:hidden;
  border-radius:20px 20px 0 0; background:#fff; animation:ebCurtain .26s var(--eb-ease) both; transition:height var(--eb-t) var(--eb-ease);
}
.eb-dlg[data-kb] .eb-sheet{ height:100%; border-radius:0; }          /* keypad up: the whole of what is left, so the answer and Send stay in view */
/* the head: the Reach Us card's strip — the form's name, the number, Close */
.eb-dlg .eb-hd{ flex:none; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 10px 8px 18px; background:var(--eb-cobalt); }
.eb-dlg .eb-t{ flex:none; color:#fff; font:600 11.5px/1 var(--eb-mono); letter-spacing:.2em; text-transform:uppercase; outline:0; }
.eb-dlg .eb-hnum{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; margin-right:6px; color:#fff; font-size:13.5px; font-weight:650; font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap; }
.eb-dlg .eb-hnum svg{ width:15px; height:15px; color:#AFC4E6; }
.eb-dlg .eb-x{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(255, 255, 255, .12); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .3); color:#fff; }
.eb-dlg .eb-x svg{ width:17px; height:17px; }
/* one scrolling body between the head and Send */
.eb-dlg .eb-stage{ position:relative; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; overflow:hidden; overflow:clip; }
.eb-dlg .eb-bd{
  flex:1 1 auto; min-height:0; padding:18px 20px 26px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
}
.eb-dlg .eb-bd::-webkit-scrollbar{ display:none; }
.eb-dlg[data-ph] .eb-bd{ overflow-y:hidden; }
.eb-dlg[data-ph] .eb-bd::after{ content:""; display:block; height:100vh; }
.eb-dlg[data-ph] .eb-ft{ display:none; }
@media (max-height:600px){ .eb-dlg[data-ph][data-kb] .eb-hd{ display:none; } }
.eb-dlg .eb-ft{ flex:none; padding:10px 16px calc(12px + var(--eb-safe)); background:#fff; box-shadow:0 -1px 0 #E8ECF2; }
.eb-dlg[data-kb] .eb-ft{ padding-bottom:10px; }

/* ==========================================================================
   3 · THE ANSWERS — the homepage audit form's wells, and the phone field
   ========================================================================== */
.eb-dlg .eb-who > * + *{ margin-top:10px; }
.eb-dlg .eb-w{
  position:relative; display:flex; align-items:center; gap:8px; min-height:54px; margin:0; padding:0 14px; border-radius:14px;
  background:var(--eb-well); cursor:text; overflow:hidden; transition:box-shadow .2s ease, background-color .2s ease;
}
.eb-dlg .eb-w:focus-within{ box-shadow:inset 0 0 0 1px var(--eb-ring); }
.eb-dlg .eb-in{
  flex:1 1 0; width:auto; min-width:0; height:54px; margin:0; padding:0 0 0 1px; border:0; border-radius:0; outline:0; background:transparent; box-shadow:none;
  color:var(--eb-ink); font:500 17px/1.3 var(--eb-sans); letter-spacing:-.005em; -webkit-appearance:none; appearance:none;
}
.eb-dlg .eb-in::placeholder{ color:var(--eb-ph); font-weight:400; opacity:1; }
.eb-dlg textarea.eb-in{ height:54px; padding:15px 0 14px 1px; line-height:1.45; resize:none; overflow:hidden; }
.eb-dlg textarea.eb-in:placeholder-shown{ white-space:nowrap; text-overflow:ellipsis; }
.eb-dlg .eb-wnote{ align-items:flex-start; }
.eb-dlg .eb-wnote > .eb-bang{ margin-top:17px; }
/* the site's phone field (assets/phone/) inside a well, as in the homepage audit form */
.eb-dlg .eb-wtel{ padding:0 14px 0 12px; }
.eb-dlg .eb-wtel > .ph{
  --ph-x:#7C8AA5; --ph-next:#4A5A75; --ph-accent:var(--eb-act); --ph-ink:var(--eb-ink); --ph-bad:var(--eb-red); --ph-pad:9px;
  --ph-r:14px; --ph-jr:4px; --ph-pp:6px; --ph-panel:var(--eb-well); --ph-search:#fff; --ph-row-tint:#E4EBF7; --ph-fs:16.5px; --ph-oh:50px; --ph-sh:46px;
  align-self:stretch; flex:1 1 0; width:auto; min-width:0; height:auto; font-size:17px; color:var(--eb-ink);
}
.eb-dlg .eb-wtel > .ph .ph-row{ height:54px; }
.eb-dlg .eb-wtel > .ph .ph-cc{ flex:none; display:inline-flex; gap:5px; width:auto; height:auto; margin:0 0 0 -2px; padding:0 4px; border:0; border-radius:8px; background:transparent; box-shadow:none; color:#4A5A75; font-size:17px; font-weight:400; letter-spacing:0; }
.eb-dlg .eb-wtel > .ph[data-open] .ph-cc{ color:var(--ph-accent); }
.eb-dlg .eb-wtel > .ph .ph-chev{ width:12px; height:12px; }
.eb-dlg .eb-wtel > .ph .ph-flag{ font-size:19px; }
.eb-dlg .eb-wtel > .ph .ph-in > input.ph-tel{ flex:1 1 auto; width:100%; height:100%; padding:0 2px 0 var(--ph-pad); font:500 17px/1.3 var(--eb-sans); color:var(--eb-ink); }
.eb-dlg .eb-wtel > .ph .ph-mark{ width:26px; padding-right:0; justify-content:flex-end; }
.eb-dlg .eb-wtel > .ph .ph-mark svg{ width:19px; height:19px; }
.eb-dlg .eb-f[data-bad] .eb-wtel > .ph .ph-mark{ display:none; }
.eb-dlg .eb-wtel.ph-open{ height:auto; align-items:flex-start; overflow:visible; background:none; box-shadow:none; }
.eb-dlg .eb-wtel.ph-open::before{ content:""; position:absolute; left:0; right:0; top:0; height:54px; border-radius:14px 14px 4px 4px; background:var(--eb-well); }
.eb-dlg .eb-wtel.ph-open > .ph{ position:relative; }
.eb-dlg .eb-wtel.ph-open > .eb-bang{ display:none !important; }
.eb-dlg .eb-wtel.ph-open > .ph .ph-pop{ margin:4px -14px 0 -12px; }
.eb-dlg .eb-wtel > .ph .ph-pop input.ph-q{ font-size:17px !important; }
.eb-dlg .eb-wtel > .ph .ph-pop .ph-list{ max-height:min(calc(var(--ph-oh) * 4.88), var(--eb-listh, 100vh)); }
@media (max-width:359px){
  .eb-dlg .eb-in, .eb-dlg .eb-wtel > .ph, .eb-dlg .eb-wtel > .ph .ph-cc, .eb-dlg .eb-wtel > .ph .ph-in > input.ph-tel{ font-size:16px; }
}

/* ==========================================================================
   4 · CHOOSING
   ========================================================================== */
.eb-dlg .eb-gh{ display:flex; align-items:center; gap:8px; min-height:17px; margin:0 0 10px; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:.01em; color:var(--eb-ink3); }
.eb-dlg .eb-count{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--eb-act); }
.eb-dlg .eb-one{ margin-left:2px; font-style:normal; font-size:9.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--eb-act); }
.eb-dlg [data-k="sv"]{ margin-top:22px; }
/* services: soft rows; a square tick box (several) */
.eb-dlg .eb-list{ display:grid; gap:6px; }
.eb-dlg .eb-row{
  display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:6px 14px 6px 12px; border-radius:12px; background:var(--eb-soft);
  color:var(--eb-ink); font-size:15.5px; font-weight:550; line-height:1.22; text-align:left; transition:background-color .18s ease;
}
.eb-dlg .eb-row[aria-pressed="true"]{ background:var(--eb-chosen); font-weight:700; }
.eb-dlg .eb-tk{ flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#fff; box-shadow:inset 0 0 0 1.5px #8FA1BC; transition:background-color .18s ease, box-shadow .18s ease; }
.eb-dlg .eb-tk svg{ width:13px; height:13px; color:#fff; opacity:0; transform:scale(.5); transition:opacity .16s ease, transform .2s var(--eb-ease); }
.eb-dlg [aria-pressed="true"] .eb-tk{ background:var(--eb-act); box-shadow:inset 0 0 0 1.5px var(--eb-act); }
.eb-dlg [aria-pressed="true"] .eb-tk svg{ opacity:1; transform:none; }
/* the discussion: two radio cards (one) */
.eb-dlg .eb-radios{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.eb-dlg .eb-rad{
  display:flex; align-items:center; gap:10px; min-width:0; min-height:52px; padding:6px 12px; border-radius:12px; background:var(--eb-soft);
  color:var(--eb-ink); font-size:15.5px; font-weight:550; white-space:nowrap; transition:background-color .18s ease;
}
.eb-dlg .eb-rad[aria-checked="true"]{ background:var(--eb-chosen); font-weight:700; }
.eb-dlg .eb-rd{ flex:none; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #8FA1BC; transition:box-shadow .18s ease; }
.eb-dlg [aria-checked="true"] .eb-rd{ box-shadow:inset 0 0 0 6px var(--eb-act); }
.eb-dlg .eb-mi{ flex:none; display:block; width:18px; height:18px; color:var(--eb-ink3); }
.eb-dlg .eb-mi svg{ display:block; width:100%; height:100%; }
.eb-dlg .eb-rad[aria-checked="true"] .eb-mi{ color:var(--eb-act); }
@media (max-width:389px){
  .eb-dlg .eb-rad .eb-mi{ display:none; }
  .eb-dlg .eb-rad{ gap:8px; padding:0 8px; }
}
@media (max-width:359px){
  .eb-dlg .eb-row{ font-size:14.5px; }
  .eb-dlg .eb-rad{ font-size:14px; }
}

/* ==========================================================================
   5 · FOLDS — "Other" and "Add more details" grow open by their own height
   ========================================================================== */
.eb-dlg .eb-fold{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--eb-t) var(--eb-ease); }
.eb-dlg .eb-fold.on{ grid-template-rows:1fr; }
.eb-dlg .eb-fold-in{ min-height:0; overflow:hidden; margin:0 -3px; padding:0 3px; opacity:0; transform:translateY(-6px); transition:opacity calc(var(--eb-t) * .8) ease, transform var(--eb-t) var(--eb-ease); }
.eb-dlg .eb-fold.on > .eb-fold-in{ opacity:1; transform:none; transition-delay:calc(var(--eb-t) * .2), 0s; }
.eb-dlg .eb-fold-in > .eb-f{ padding-top:10px; }
.eb-dlg .eb-morebox{ padding:12px 0 6px; }
.eb-dlg .eb-morebox > * + *{ margin-top:16px; }
.eb-dlg .eb-more{
  display:flex; align-items:center; gap:12px; width:100%; min-height:54px; margin-top:22px; padding:0 14px 0 12px; border-radius:14px;
  box-shadow:inset 0 0 0 1px #D9E1EC; color:var(--eb-ink); font-size:15.5px; font-weight:650; text-align:left;
}
.eb-dlg .eb-more-t{ flex:1 1 auto; }
.eb-dlg .eb-morei{ position:relative; flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#EAF1FB; color:var(--eb-act); }
.eb-dlg .eb-morei svg{ width:15px; height:15px; transition:opacity .15s ease; }
.eb-dlg .eb-morei svg + svg{ position:absolute; opacity:0; }
.eb-dlg .eb-more[aria-expanded="true"] .eb-morei svg:first-child{ opacity:0; }
.eb-dlg .eb-more[aria-expanded="true"] .eb-morei svg + svg{ opacity:1; }
.eb-dlg .eb-opt{ flex:none; font-style:normal; font-size:9.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--eb-ink4); }
.eb-dlg .eb-more[aria-expanded="true"] .eb-opt{ visibility:hidden; }

/* ==========================================================================
   6 · SEND — the only solid button on the sheet, always fully coloured
   ========================================================================== */
.eb-dlg .eb-send{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; padding:0 18px; border-radius:14px;
  background:var(--eb-act); color:#fff; font-size:16.5px; font-weight:750; letter-spacing:-.005em; transition:background-color .14s ease;
}
.eb-dlg .eb-send svg{ width:18px; height:18px; color:#fff; }
.eb-dlg .eb-send:active{ background:var(--eb-act-a); }
.eb-dlg .eb-send:disabled{ cursor:default; }
.eb-dlg .eb-fail{ margin:0 2px 8px; font-size:13.5px; font-weight:600; line-height:1.35; color:#B42323; }

/* ==========================================================================
   7 · ERRORS
   ========================================================================== */
.eb-dlg .eb-bang{ display:none; flex:none; width:20px; height:20px; border-radius:50%; background:var(--eb-red); color:#fff; font:800 13px/20px var(--eb-sans); text-align:center; }
.eb-dlg .eb-f[data-bad] > .eb-w{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--eb-redline); }
.eb-dlg .eb-f[data-bad] > .eb-w > .eb-bang{ display:block; }
.eb-dlg .eb-f[data-bad] > .eb-gh{ color:#B42323; }
.eb-dlg .eb-f[data-bad] > .eb-gh > .eb-bang{ display:block; width:17px; height:17px; font-size:11.5px; line-height:17px; }

@media (prefers-reduced-motion:reduce){
  .eb-dlg{ --eb-t:.01s; }
  .eb-dlg .eb-sheet, .eb-dlg::backdrop{ animation:none; }
}