body{background:#faf9f6}
.hero{min-height:560px}
.disc{border-radius:34% 66% 58% 42%;background:linear-gradient(140deg,#f6d9d3,#efeae2 68%)}
.secondary,.map,.handle{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.secondary{margin-left:12px;font-size:14px}
.terms{list-style:none;margin:0;padding:26px max(5%,calc((100vw - 1216px)/2));background:#252328;color:white;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.terms li{border-left:3px solid #eb5146;padding-left:15px;font-weight:600}
.offices,.channels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.offices article,.channels>div{background:white;border:1px solid #dedbd5;border-radius:16px;padding:24px}
.offices address{font-style:normal;margin-top:14px;line-height:1.55}
.person{display:grid;border-top:1px solid #dedbd5;padding-top:18px;margin-top:10px;justify-items:start}
.phone{font-size:clamp(22px,3vw,34px);letter-spacing:-.05em;font-weight:600;margin-top:5px}
.map,.handle{color:#9e2522}
.qr{width:140px;display:block;margin-top:12px}
.channels{grid-template-columns:repeat(4,minmax(0,1fr))}
.channels b,.channels span{display:block}.channels span{font-size:14px;margin-top:8px}
summary{cursor:pointer;font-weight:600;padding:6px 0}
.quote details{border-color:#56545a;margin:0 0 18px}
.faq details{margin-top:12px}.faq details p{line-height:1.6}
@media(max-width:740px){.hero{min-height:0}.secondary{margin-left:0;padding:0 6px}.terms,.channels{grid-template-columns:1fr 1fr;gap:18px}.offices{grid-template-columns:1fr}.channels>div{padding:16px}.terms li{font-size:14px}}
.service-fee{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-inline:auto;padding:clamp(20px,3vw,40px);border-radius:20px;background:#efebe5}
.service-fee h2{margin:0;font-size:14px;letter-spacing:.06em}
.fee-price{display:block;margin:12px 0;font-size:clamp(36px,4vw,56px);line-height:1.1;letter-spacing:-.05em}
.service-fee p{line-height:1.55;margin:0 0 10px}.service-fee p:last-child{margin-bottom:0}
@media(max-width:740px){.service-fee{grid-template-columns:1fr;gap:20px}}
.phone-field{display:flex;align-items:center;gap:.3em;padding:0 12px;background:white;border:1px solid #c5c4c0;border-radius:9px;font-size:16px;font-weight:400}
.phone-field:focus-within{outline:2px solid var(--red)}
.phone-field input[type=tel]:not([type=radio]):not([type=checkbox]){padding-inline:0;border:0;outline:0}

/* Purchase process */
.process {
  display: grid;
  grid-template-columns: minmax(200px, .8fr) minmax(0, 1.65fr);
  gap: clamp(24px, 5vw, 76px);
  align-items: start;
}
.process-heading { position: sticky; top: 28px; }
.journey {
  display: block;
  margin: 0;
  background: white;
  padding: 4px clamp(18px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.journey li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: clamp(12px, 2vw, 28px);
  position: relative;
  padding: 20px 0;
  border: 0;
}
.journey li + li > div { border-top: 1px solid var(--line); padding-top: 16px; }
.journey li + li { padding-top: 0; }
.journey li + li > span { margin-top: 16px; }
.journey li:not(:last-child)::before {
  content: ""; position: absolute; width: 2px; background: #e3ccc7;
  left: 20px; top: 41px; bottom: -37px;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat; background-size: 100% 0%;
}
.journey li > span {
  position: relative; display: grid; place-items: center; align-self: start;
  width: 42px; height: 42px; background: #f6ece8; color: #922a22;
  border-radius: 50%; font-weight: 600;
}
.journey li:last-child > span { background: var(--red); color: white; }
.journey h3 { margin: 0 0 6px; font-size: clamp(18px, 2vw, 23px); }

/* Calculator and enquiry controls */
.controls, #form { background: white; border: 1px solid var(--line); border-radius: 20px; }
#form { padding: clamp(16px, 2.5vw, 32px); gap: 18px; }
#form textarea { min-height: 96px; resize: vertical; }
#calc .numbers input, #form input:not([type=checkbox]):not([type=tel]), #form textarea, #form .phone-field {
  background: #faf9f7; border: 1px solid #bdbbb5; border-radius: 12px;
  min-height: 48px; padding: 12px 14px;
}
#form .phone-field { padding-block: 0; }
.phone-field input[type=tel]:not([type=radio]):not([type=checkbox]) { background: transparent; }
#calc .numbers input:focus, #form input:not([type=tel]):focus-visible,
#form textarea:focus, #form .phone-field:focus-within {
  outline: 2px solid #a32e24; outline-offset: 2px;
}
.choices span { min-height: 44px; border-radius: 10px; }
.choices input:checked + span { background: #faece7; color: #76251e; border-color: #ad5347; }
.markets .choices { padding: 5px; background: #f0eeea; }
.markets input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #36271a30; }
.button, .navcta, #again { border-radius: 12px; }
.check { min-height: 44px; }
.check input { flex-shrink: 0; }
@media (max-width: 740px) {
  .process { grid-template-columns: 1fr; gap: 0; }
  .process-heading { position: static; }
  #lead { padding: 18px; }
}

#calc .calcgrid {
  padding: clamp(10px, 2vw, 24px);
  background: #efede8;
  border-radius: 24px;
}
#calc .controls { border-color: transparent; }
#calc .quote {
  position: sticky;
  top: 20px;
  background: linear-gradient(135deg,#302b2c,#232124);
}
#calc .quote strong { display: block; }
#calc #bill summary { padding-block: 14px; font-size: 15px; }
#calc #bill summary::marker, .spec-options summary::marker { color: #c65a4e; }
.spec-options {
  margin: 0; padding: 0; border-block: 1px solid var(--line);
}
.spec-options summary { padding: 14px 0; }
.spec-options small {
  display: block; margin: 4px 0 0 18px; color: var(--mid); font-weight: 400;
}
.spec-options fieldset { margin-bottom: 16px; }
@media(max-width:740px) {
  #calc .calcgrid { gap: 10px; }
  #calc .controls, #calc .quote { padding: 18px 14px; border-radius: 16px; }
  #calc .quote { position: static; }
  #calc .numbers { gap: 12px 8px; }
}

main {
  --section-gap: clamp(28px, 4vw, 56px);
  display: grid;
  row-gap: var(--section-gap);
  padding-bottom: var(--section-gap);
}
main > section, main > .terms { margin-block: 0; min-width: 0; }
main > #steps, main > #calc { padding-block: 0; border-top: 0; }

.calc-scope { border-top: 1px solid var(--line); padding-top: 16px; color: #55514e; font-size: 14px; line-height: 1.55; }
.calc-scope a { color: #942821; text-decoration: underline; text-underline-offset: 3px; }
#bill { border-top: 1px solid #575351; margin: 20px 0; padding-top: 16px; }
#bill h3 { margin: 0 0 9px; font-size: 16px; }
#bill #lines { margin: 0; }
#bill #lines > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid #ffffff24; }
#bill dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }

.visual { overflow: clip; }
.headlight { position: absolute; height: 3%; border-radius: 50%; opacity: 0; background: #fffdf1; box-shadow: 0 0 9px 4px #fff6c7; }
.headlight.near { width: 12%; left: 38%; top: 50%; transform: rotate(-7deg); }
.headlight.far { width: 6%; left: 5%; top: 51%; transform: rotate(5deg); }
.journey li:last-child > span { background: #f6eae6; color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .visual .vehicle { animation: arrive 1.6s cubic-bezier(.18,.65,.25,1) both; }
  .headlight { animation: signal .85s 1.7s both; }
  .journey li > span, .journey h3 { transition: color .35s, background-color .35s; }
  .journey li.is-current > span { background: var(--red); color: white; }
  .journey li.is-current h3 { color: var(--red); }
}
@keyframes arrive { from { transform: translateX(38%) scale(.86); } to { transform: none; } }
@keyframes signal { 0%,38%,100% { opacity: 0; } 18%,68% { opacity: .95; } }

.fx { margin: 16px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; }
.fx-heading, .fx dl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 22px; }
.fx-heading a { font-weight: 600; }
.fx-heading time, .fx dt, .fx small { color: var(--mid); font-size: 13px; }
.fx dl { margin: 12px 0 0; }
.fx dl div { display: flex; align-items: baseline; gap: 7px; }
.fx dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .journey li.is-current::before { animation: fill-connector 1.4s linear forwards; }
  .journey li.is-complete::before { background-size: 100% 100%; }
}
@keyframes fill-connector { to { background-size: 100% 100%; } }