/* ── Hero: the giant call, then the dial ── */
.hero { padding: 20px 0 28px; border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid { display: grid; gap: 22px; }
.hero-grid > * { min-width: 0; }
.hero h1 { margin-bottom: .45em; }
.call-giant {
  display: grid; gap: 4px; padding: 18px 20px 20px; border-radius: 18px;
  background: var(--call); color: var(--call-ink); text-decoration: none;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--call) 22%, transparent);
}
.call-giant:hover { background: var(--call-hover); }
.cg-top { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; font-stretch: 110%; }
.cg-num { font-size: clamp(2.1rem, 10.6vw, 4.6rem); line-height: 1; font-weight: 860; font-stretch: 112%; letter-spacing: -0.01em; white-space: nowrap; }
.cg-rate { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.hero-text { margin-top: 1em; font-size: 1.08rem; color: var(--muted); max-width: 40em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hero-proof { margin-top: 16px; font-size: .92rem; color: var(--muted); }
.hero-proof .num { color: var(--ink); }
.hero-dial { margin: 0; }
.hero-dial figcaption { display: grid; gap: 4px; font-size: .92rem; margin-top: 6px; }
.cap-day::before, .cap-night::before {
  content: ""; display: inline-block; width: .9em; height: .9em; border-radius: 50%; margin-right: .5em; vertical-align: -.1em;
}
.cap-day::before { background: var(--day-arc); box-shadow: inset 0 0 0 1px var(--line); }
.cap-night::before { background: var(--night-arc); }
.cap-night { color: var(--amber); font-weight: 600; }
.cap-note { color: var(--muted); }

/* ── The dial ── */
.dial { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; font-family: var(--font); overflow: visible; }
.dial-face { fill: var(--face); stroke: var(--line); stroke-width: 1.5; }
.dial-day { fill: none; stroke: var(--day-arc); stroke-width: 58; }
.dial-night { fill: none; stroke: var(--night-arc); stroke-width: 58; }
.dial-tick { stroke: var(--muted); stroke-width: 2; }
.dial-hour { fill: var(--muted); font-size: 19px; font-weight: 600; font-stretch: 110%; }
.dial-arc-label { font-size: 21px; font-weight: 800; letter-spacing: .12em; font-stretch: 125%; }
.dial-arc-day { fill: var(--day-arc-ink); }
.dial-arc-night { fill: var(--night-arc-ink); }
.dial-hand { stroke: var(--call); stroke-width: 6; stroke-linecap: round; }
.dial-pin { fill: var(--call); }
.dial-now { fill: var(--call); stroke: var(--bg); stroke-width: 6; }
.dial-c-small { fill: var(--muted); font-size: 22px; font-weight: 600; }
.dial-c-time { fill: var(--ink); font-size: 50px; font-weight: 820; font-stretch: 115%; }
.dial-c-rate { fill: var(--ink); font-size: 56px; font-weight: 860; font-stretch: 122%; }
body.t-night .dial-c-rate { fill: var(--amber); }

/* ── Sections ── */
.section { padding-top: 48px; padding-bottom: 8px; }
.band { background: var(--surface); padding-bottom: 44px; margin-top: 44px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 22px; }
.section-head .more { margin: .2em 0 0; font-weight: 700; }
.page-head { padding-top: 28px; padding-bottom: 12px; }
.page-head h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); }
.page-head .call-giant { margin-top: 18px; max-width: 640px; }

/* ── Rates ── */
.rates-home { display: grid; gap: 28px; }
.charges { border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px; background: var(--bg); }
.charges-grid { margin: 0 0 12px; display: grid; gap: 10px; }
.charges-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface); }
.charges-grid dt { font-weight: 600; }
.charges-grid dd { margin: 0; font-size: 1.45rem; text-align: right; }
.charges-grid .is-night dd .plus { color: var(--amber); }
.charges-grid .is-now { outline: 2px solid var(--call); }
.now-tag {
  display: inline-block; margin-left: .5em; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  background: var(--call); color: var(--call-ink); padding: .1em .5em; border-radius: 4px; vertical-align: .15em;
}
.charges-notes { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .95rem; }
.charges-notes li { margin: .25em 0; }
.rates { display: grid; gap: 30px; }
.trade-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 4px; }
.trade-head h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .2em; }
.trade-head p { margin: 0 0 .2em; color: var(--muted); }
.trade-who { font-weight: 600; color: var(--ink) !important; font-size: .95rem; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.svc { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 2px; }
.svc-price { margin: 0; font-size: 1.7rem; line-height: 1.05; }
.svc-from { font-size: .9rem; font-weight: 600; color: var(--muted); }
.svc-unit { font-size: .9rem; color: var(--muted); font-weight: 500; }
.svc-title { margin: .25em 0 .15em; font-size: 1.08rem; }
.svc-inc, .svc-exc, .svc-time { margin: 0; font-size: .94rem; color: var(--muted); }
.svc-label, .tip-label { font-weight: 700; color: var(--ink); }
.tip-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-stretch: 115%; margin-bottom: .25em; }

/* ── Jobs ── */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair figure { margin: 0; position: relative; }
.pair img, .img-missing { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.pair-tag {
  position: absolute; left: 8px; top: 8px; padding: .15em .6em; border-radius: 4px; font-size: .78rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; background: #0f1d24; color: #ffffff;
}
.pair-after { background: #ffffff; color: #0f1d24; }
.job-text { padding-top: 12px; }
.job-text h3 { font-size: 1.25rem; }
.job-meta { font-size: .85rem; color: var(--muted); margin-bottom: .3em; }
.night-tag, .urgent-tag {
  display: inline-block; margin-left: .6em; padding: 0 .5em; border-radius: 4px; font-size: .75rem; font-weight: 800;
  background: var(--night-arc); color: var(--night-arc-ink); text-transform: uppercase; letter-spacing: .06em;
}
.job-paid { font-weight: 600; }
.photo-note { font-size: .84rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: .7em; }
.job-page .pair { max-width: 1100px; }
.job-facts { margin: 24px 0; display: grid; gap: 14px; max-width: 46em; }
.job-facts dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.job-facts dd { margin: .1em 0 0; font-size: 1.08rem; }

/* ── Licence and people ── */
.licence-home, .licences { display: grid; gap: 22px; }
.licence-home > *, .licences > *, .rates-home > *, .rates-page > *, .book-grid > *, .emergency-grid > * { min-width: 0; }
.licence {
  border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 18px 14px; background: var(--bg);
  position: relative;
}
.licence-kind { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .3em; }
.licence h3 { font-size: 1.3rem; }
.licence-grade { color: var(--muted); }
.licence-facts { margin: 0 0 10px; display: grid; gap: 8px; }
.licence-facts > div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.licence-facts dt { color: var(--muted); font-size: .9rem; }
.licence-facts dd { margin: 0; }
.licence-no { font-size: 1.3rem; user-select: all; }
.licence-check { font-size: .94rem; margin: 0; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.person { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; }
.person img, .person-initials { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.person-initials { display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; }
.person h3 { margin-bottom: .1em; }
.person p { margin: 0 0 .25em; font-size: .94rem; }
.person-role { font-weight: 600; }
.person-cred { font-size: .88rem !important; color: var(--muted); }
.person-meta { color: var(--muted); font-size: .84rem !important; }
.rule-note { border-left: 4px solid var(--call); padding: .3em 0 .3em .9em; margin: 22px 0; max-width: 46em; }
.plumbing-note { margin-top: 28px; max-width: 46em; }

/* ── Safety tips ── */
.tips { display: grid; gap: 18px; }
.tip { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.tip.is-urgent { border-color: var(--night-arc); }
.tip-head { padding: 14px 16px 4px; }
.tip-trade { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .35em; }
.tip-head h3 { font-size: 1.18rem; margin: 0; }
.tip-body { padding: 10px 16px 6px; display: grid; gap: 12px; }
.tip-first { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 8px; padding: 10px 12px; }
.tip-first p { margin: 0; font-weight: 700; }
.first-icon { flex: none; }
.first-icon rect, .first-icon circle, .first-icon path { fill: none; stroke: var(--ink); stroke-width: 3; }
.first-icon .ico-fill { fill: var(--ink); }
.first-icon .ico-none { stroke-dasharray: 4 4; }
.tip-col ul { margin: 0; padding-left: 1.1em; }
.tip-col li { margin: .2em 0; }
.tip-dont li::marker { content: "✕  "; color: var(--amber); font-weight: 800; }
.tip-foot { padding: 8px 16px 14px; font-size: .9rem; border-top: 1px solid var(--line); margin-top: 6px; }
.tip-foot p { margin: .3em 0 0; }
.tip-foot .tip-label { display: inline; margin-right: .4em; }
.tip-source { color: var(--muted); }
.numbers ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.numbers li { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.nb-label { margin: 0; font-weight: 600; }
.nb-num { font-size: 1.5rem; text-decoration: none; }
.nb-note { margin: .2em 0 0; color: var(--muted); font-size: .92rem; }

/* ── Reviews ── */
.review-summary { font-size: 1rem; margin-bottom: 18px; }
.review-summary .big { font-size: 2.2rem; vertical-align: -.1em; margin-right: .2em; }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.review { background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 16px; }
.review-top { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: .4em; }
.stars { color: var(--ink); letter-spacing: .08em; font-size: 1.05rem; }
.stars-off { color: var(--line); }
.review-job { font-weight: 700; font-size: .92rem; }
.review blockquote { margin: 0 0 .6em; font-size: 1.04rem; }
.review blockquote p { margin: 0; }
.review-who { font-size: .86rem; color: var(--muted); margin: 0; }
.review-reply { margin: .8em 0 0; padding-top: .6em; border-top: 1px dashed var(--line); font-size: .94rem; }
.review-reply .tip-label { display: inline; margin-right: .4em; }

/* ── Areas ── */
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.area { background: var(--bg); padding: 12px 12px 10px; }
.area-name { font-weight: 700; margin: 0; line-height: 1.25; }
.area-name .ta { display: block; font-size: .78rem; }
.area-pins { margin: .2em 0; font-size: .88rem; color: var(--muted); font-weight: 600; white-space: normal; }
.area-time { margin: 0; font-size: .82rem; display: grid; color: var(--muted); }
.area-night.yes { color: var(--amber); font-weight: 700; }
.area-note { margin: .3em 0 0; font-size: .82rem; color: var(--muted); }

/* ── Steps, notes, facts ── */
.steps { counter-reset: s; list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding-left: 2.6em; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 1.9em; height: 1.9em; border-radius: 50%;
  border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.step-title { font-weight: 700; margin: 0; }
.steps li p:not(.step-title) { margin: .1em 0 0; color: var(--muted); }
.notes { color: var(--muted); padding-left: 1.1em; max-width: 46em; margin-top: 22px; }
.facts { margin: 18px 0; display: grid; gap: 8px; }
.facts > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; text-align: right; }

/* ── Emergency ── */
.emergency-grid { display: grid; gap: 32px; padding-top: 16px; }
.two-lists { display: grid; gap: 16px; }
.two-lists > div { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.two-lists .is-em { border-color: var(--night-arc); }
.two-lists ul { margin: 0; padding-left: 1.1em; }

/* ── Book ── */
.book-band { display: grid; gap: 16px; padding-bottom: 24px; }
.book-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.book-grid { display: grid; gap: 28px; padding-top: 8px; }
.urgent-box { border: 2px solid var(--night-arc); border-radius: var(--radius); padding: 16px; background: var(--amber-bg); }
.urgent-box p { margin-bottom: .8em; }

/* ── The platform's form ── */
.form { display: grid; gap: 16px; }
.form .unrigid-field, .form > div { display: grid; gap: 6px; }
.form label { font-weight: 700; }
.form input:not([type="checkbox"]), .form select, .form textarea {
  width: 100%; min-height: 50px; padding: .6em .8em; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--muted); border-radius: 8px;
}
.form textarea { min-height: 110px; }
.form input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--call); margin-right: .5em; vertical-align: -.3em; }
.form button, .form [type="submit"] {
  min-height: 54px; padding: .6em 1.4em; border: 0; border-radius: 999px; background: var(--call); color: var(--call-ink);
  font: inherit; font-weight: 800; font-size: 1.08rem; cursor: pointer; justify-self: start;
}
.form button:disabled { opacity: .6; cursor: progress; }
.unrigid-help { font-size: .88rem; color: var(--muted); }
.unrigid-error { color: var(--amber); font-weight: 700; font-size: .9rem; }
.unrigid-required { color: var(--muted); font-weight: 500; font-size: .85em; }
.unrigid-form-status { padding: .8em 1em; border-radius: 8px; background: var(--surface); font-weight: 600; }
.prose { max-width: 46em; }