/* SAYLOR DETAILING · what a town page adds to the home page's look (site.css): how booking works, when we work and
   the other towns. Town pages are written by website/towns/build.mjs. */
.how{text-align:center}
.steps{list-style:none;counter-reset:s;display:grid;width:fit-content;margin:clamp(32px,6vw,48px) auto 0;text-align:left}
.steps li{counter-increment:s;position:relative;display:flex;align-items:center;gap:16px;padding-bottom:30px;font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-size:17px;letter-spacing:0}
.steps li:not(:last-child)::after{content:"";position:absolute;left:19px;top:46px;bottom:6px;border-left:2px dashed var(--blue)}
.whensec{text-align:center}
.when{display:grid;gap:30px;margin-top:clamp(32px,6vw,48px)}
.when p{margin:8px auto 0;color:var(--ink-2);max-width:32ch;text-wrap:pretty}
.others{padding-top:0;text-align:center}
.others p{color:var(--ink-2);font-size:clamp(17px,2vw,19px)}
.others a{color:var(--blue);font-weight:600;text-decoration:none}
.others a:hover{text-decoration:underline}
@media(min-width:820px){
  .steps{grid-template-columns:repeat(6,1fr);width:100%;text-align:center}
  .steps li{flex-direction:column;gap:14px;padding:0 8px;font-size:17px;text-wrap:balance}
  .steps li:not(:last-child)::after{left:calc(50% + 28px);right:calc(-50% + 28px);top:19px;bottom:auto;border-left:0;border-top:2px dashed var(--blue)}
  .when{grid-template-columns:repeat(3,1fr);gap:40px}
}
/* the town name leads the H1 ("Bixby mobile detailing."): the home page's size on computers, and on phones as big as
   fits with "mobile detailing." on one line */
.hero h1.town-h1{font-size:clamp(38px,12vw,96px)}
.hero h1.town-h1 span{display:block;white-space:nowrap}