/* Styles for /services only. Loaded after style.css and uses its colour tokens. */

.notice{margin:1.75rem 0 0;padding:1rem 1.25rem;border:1px solid var(--line);border-left:3px solid var(--flame);border-radius:6px;background:var(--surface);max-width:40rem;color:var(--slate);font-size:1rem;line-height:1.55}

.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem 3rem;padding:2rem 0;border-top:1px solid var(--line)}
.offer h3{padding-left:1rem;border-left:3px solid var(--flame)}
.offer p{margin:0 0 .9rem;max-width:38rem}
.offer .price{margin:.75rem 0 0 1rem;font-size:1.65rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.offer .price + .price{margin-top:.5rem}
.offer .price small{display:block;margin-top:.15rem;font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--slate)}

.facts{margin:1.1rem 0 0;display:grid;gap:.6rem}
.facts > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem}
.facts dt{font-weight:700}
.facts dd{margin:0;color:var(--slate)}

@media (max-width:860px){
  .offer{grid-template-columns:1fr}
  .facts > div{grid-template-columns:minmax(0,1fr);gap:0}
}