/* TaxReck Contact page: its own rules on top of the shared blocks (blocks.css) and the split screen (split.css).
   Class names start with ct-. Built 24 Sep 2026: a live open or closed line worked out on London time, four ways
   to reach a person, the enquiry form with choices as pills, the office by the Elizabeth line, and questions. */

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 01 four ways to a person ---------- */
.ct-status{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--soft);color:var(--graphite);font-size:14px;line-height:1.3}
.ct-status i{flex:none;width:10px;height:10px;border-radius:50%;background:#9AA3B5}
.ct-status b{color:var(--ink);font-weight:800}
.ct-status.open{background:var(--acc-soft)}
.ct-status.open i{background:#3FA34D;box-shadow:0 0 0 0 rgba(63,163,77,.5);animation:ctPulse 2.4s ease-out 3}
@keyframes ctPulse{to{box-shadow:0 0 0 10px rgba(63,163,77,0)}}
.ct-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,3.4vw,52px);align-items:center;margin-top:clamp(22px,2.6vw,32px)}
.ct-ways{margin:0;padding:0;list-style:none}
.ct-way{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.ct-way:last-child{border-bottom:1px solid var(--line)}
.ct-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acc-soft);color:var(--acc-text)}
.ct-way.lead .ct-ic{background:var(--ink);color:var(--acc)}
.ct-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-way small{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ct-way a.ct-big,.ct-way b.ct-big{display:inline-block;margin-top:3px;color:var(--ink);font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.03em;text-decoration:none}
.ct-way a.ct-big:hover{color:var(--acc-text)}
.ct-way span{display:block;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.5}
.ct-go{justify-self:end;height:42px;padding:0 16px;font-size:14px}
.ct-ph{margin:0}
.ct-ph img{display:block;width:100%;height:clamp(270px,27vw,340px);object-fit:cover;object-position:100% 45%;border-radius:24px;animation:bSettle 1.7s var(--ease) both}

/* ---------- 02 the form ---------- */
.ct-form-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,3.6vw,56px);align-items:start;margin-top:4px}
.ct-form{padding:clamp(22px,2.8vw,36px);border:1px solid #E3E8EF;border-radius:26px;background:#F4F6F9}
.ct-form-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:22px!important;padding-bottom:18px;border-bottom:1px solid #E1E6EE}
.ct-form-h b{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:19px;font-weight:800;letter-spacing:-.025em}
.ct-form-h b i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--acc)}
.ct-form-h b i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ct-form-h span{color:var(--muted);font-size:13px;font-weight:600}
.ct-form fieldset{margin:0 0 24px;padding:0;border:0}
.ct-form legend,.ct-k{display:block;margin-bottom:11px;padding:0;color:var(--ink);font-size:15px;font-weight:800;letter-spacing:-.02em}
.ct-form legend small,.ct-k small{margin-left:6px;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:0}
.ct-pills{display:flex;flex-wrap:wrap;gap:8px}
.ct-pill{position:relative}
.ct-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ct-pill span{display:block;padding:9px 15px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--graphite);font-size:14px;font-weight:700;transition:border-color .2s,background .2s,color .2s}
.ct-pill input:hover + span{border-color:#C2CAD8;color:var(--ink)}
.ct-pill input:checked + span{border-color:var(--ink);background:var(--ink);color:#fff}
.ct-pill input:focus-visible + span{outline:3px solid var(--acc);outline-offset:2px}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(16px,2vw,26px)}
.ct-field{display:block;margin-bottom:20px}
.ct-field > span{display:block;color:var(--graphite);font-size:13.5px;font-weight:700}
.ct-field > span small{margin-left:6px;color:var(--muted);font-weight:600}
.ct-field input{display:block;width:100%;height:50px;margin-top:8px;padding:0 14px;border:1.5px solid #D5DBE5;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16.5px;font-weight:600}
.ct-field textarea{display:block;width:100%;min-height:130px;margin-top:8px;padding:14px 16px;border:1.5px solid #D5DBE5;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:1.55;resize:vertical}
.ct-field input:focus{outline:none;border-color:var(--acc-text);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.25)}
.ct-field textarea:focus{outline:none;border-color:var(--acc-text);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.25)}
.ct-field.bad input,.ct-field.bad textarea{border-color:#C0392B}
.ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px;padding-top:20px;border-top:1px solid #E1E6EE}
.ct-send .sbtn[disabled]{opacity:.6;cursor:progress}
.ct-note{max-width:44ch;color:var(--muted);font-size:13px;line-height:1.55}
.ct-note a{color:var(--acc-text);font-weight:700}
.ct-msg{margin-top:16px!important;padding:12px 16px;border-left:3px solid #C0392B;border-radius:0 12px 12px 0;background:#FDF1EF;color:#7A2418;font-size:14.5px;line-height:1.55}
.ct-msg[hidden]{display:none}
.ct-done{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:24px;border-radius:22px;background:var(--ink);color:#fff;animation:fadeUp .5s var(--ease) both}
.ct-done[hidden]{display:none}
.ct-done i{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acc);color:var(--on-acc)}
.ct-done i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ct-done b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.ct-done span{color:var(--on-dark);font-size:14.5px;line-height:1.55}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
.ct-next{margin:0}
.ct-next img{display:block;width:100%;height:clamp(180px,19vw,230px);margin-bottom:22px;object-fit:cover;object-position:50% 55%;border-radius:22px;animation:bSettle 1.7s var(--ease) both}
.ct-next-k{color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.025em}
.ct-steps{position:relative;margin:14px 0 0;padding:0;list-style:none}
.ct-steps::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--acc),rgba(var(--acc-rgb),.2))}
.ct-steps li{position:relative;padding:8px 0 8px 36px;color:var(--graphite);font-size:14.5px;line-height:1.5}
.ct-steps li::before{content:"";position:absolute;left:4px;top:12px;width:14px;height:14px;border-radius:50%;border:2px solid var(--acc-text);background:#fff}
.ct-steps li:last-child::before{background:var(--acc)}
.ct-steps b{display:block;color:var(--ink);font-weight:800}

/* ---------- 03 come and see us ---------- */
.ct-visit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(12px,1.6vw,20px)}
.ct-visit figure{margin:0;border-radius:24px;overflow:hidden}
.ct-visit img{display:block;width:100%;height:clamp(250px,28vw,340px);object-fit:cover;animation:bSettle 1.7s var(--ease) both}
.ct-visit figure:first-child img{object-position:40% 50%}
.ct-addr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:clamp(24px,3vw,34px) 0 0;padding:0;list-style:none}
.ct-addr li{padding:16px 0;border-top:1px solid var(--line)}
.ct-addr small{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ct-addr b{display:block;margin-top:6px;color:var(--ink);font-size:16px;font-weight:700;line-height:1.5}
.ct-addr a{display:inline-block;margin-top:8px;color:var(--acc-text);font-size:14.5px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--acc)}

/* ---------- 04 already with us ---------- */
.ct-client{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px);margin:4px 0 0;padding:0;list-style:none}
.ct-client li{padding:18px 0;border-top:2px solid var(--ink)}
.ct-client b{display:block;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.02em}
.ct-client span{display:block;margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.55}

/* ---------- narrower screens ---------- */
@media (max-width:1000px){
  .ct-top,.ct-form-wrap{grid-template-columns:1fr}
  .ct-ph{order:-1}
  .ct-ph img{height:clamp(220px,42vw,300px)}
  .ct-addr,.ct-client{grid-template-columns:1fr}
}
@media (max-width:620px){
  .ct-form{padding:20px 16px;border-radius:20px}
  .ct-way{grid-template-columns:auto minmax(0,1fr)}
  .ct-go{grid-column:2;justify-self:start;margin-top:10px}
  .ct-two{grid-template-columns:1fr}
  .ct-visit{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ct-status.open i,.ct-ph img,.ct-next img,.ct-visit img,.ct-done{animation:none}
  .ct-pill span{transition:none}
}