/* Bob's Automotive — "The building is the map" (r15, 2026-10-03)
   One real storefront photograph, annotated. Its four numbered points (the sign, the bays,
   the flowerpots, door 4215) become the page's sections. Siding white, sign black, one
   flowerpot red. Square corners, hairline rules, slab headings at a modest scale. */
@font-face{font-family:"Zilla Slab";src:url(/fonts/zilla-slab-500.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(/fonts/zilla-slab-700.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-400.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-400-italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-600.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#f7f7f4; --paper-2:#efefea; --white:#fff;
  --ink:#161616; --ink-2:#3a3f43; --muted:#5a6268;
  --red:#c2412d; --red-dark:#a33422; --leaf:#4c7a3d; --sky:#8a949b; --rule:#d5d8d6; --rule-dark:#161616;
  --slab:"Zilla Slab",Rockwell,"Roboto Slab",serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1); --t1:160ms; --t2:280ms;
  --wrap:1240px; --gut:clamp(20px,4vw,56px);
  --sticky-action-bg:rgba(247,247,244,.97); --sticky-action-fg:#161616; --sticky-action-line:#161616;
  --sticky-action-accent:#c2412d; --sticky-action-accent-fg:#fff; --sticky-action-focus:#161616;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--slab);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(32px,4.3vw,58px);line-height:1.04;overflow-wrap:break-word}
h2{font-size:clamp(28px,2.8vw,38px)}
h3{font-size:clamp(20px,1.7vw,23px);line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
#main{scroll-margin-top:96px}
section[id]{scroll-margin-top:84px}
.lede{font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--ink-2)}
.small{font-size:15px;color:var(--muted)}

/* ---------- wordmark (the shop's oval sign, once, in the header) ---------- */
.sign{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:none;
  font-family:var(--slab);font-weight:700;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:2px solid var(--ink);border-radius:50% / 46%;background:#fff;line-height:.95;padding:7px 16px 6px;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px var(--ink)}
.sign b{font-size:17px;letter-spacing:.04em}
.sign span{font-size:10.5px;letter-spacing:.12em}
.sign:hover{color:var(--ink)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(247,247,244,.97);border-bottom:1px solid var(--rule)}
.head-in{display:flex;align-items:center;gap:18px;max-width:1340px;margin:0 auto;padding:8px var(--gut);min-height:68px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a,.nav .dd>a,.nav .dd>button{font:600 16px/1 var(--sans);color:var(--ink);text-decoration:none;padding:12px 11px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav .dd>a{padding-right:3px}
.nav .dd>button{padding:12px 8px 12px 4px;min-height:40px}
.nav>a:hover,.nav .dd>a:hover,.nav .dd>button:hover{color:var(--red)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--red)}
.dd{position:relative;display:flex;align-items:center}
.dd>button svg{transition:transform var(--t1) var(--ease)}
.dd>button[aria-expanded=true] svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 10px);left:-14px;width:min(540px,80vw);background:#fff;border:1px solid var(--ink);padding:20px 22px 16px;box-shadow:0 18px 40px -22px rgba(22,22,22,.4);
  opacity:0;transform:translateY(-4px);visibility:hidden;transition:opacity var(--t1) var(--ease),transform var(--t1) var(--ease),visibility 0s linear var(--t1)}
.dd.open .dd-panel{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.dd-panel ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.dd-panel li{break-inside:avoid}
.dd-panel li a{display:block;padding:7px 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--paper-2)}
.dd-panel li a small{display:block;font-weight:400;color:var(--muted);font-size:14px}
.dd-panel .dd-all{display:inline-block;margin-top:12px;font-weight:600;color:var(--red)}
.head-tel{font:600 17px/1 var(--sans);text-decoration:none;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:3px;font:600 17px/1.1 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:background var(--t1) var(--ease),color var(--t1) var(--ease)}
.btn:hover{background:var(--ink);color:#fff}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-sm{min-height:42px;padding:0 16px;font-size:16px}
.menu-btn{display:none}
.actions{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.tel-line{font:600 18px/1 var(--sans);text-decoration:none;white-space:nowrap;padding:12px 4px}
.textlink{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}

@media (max-width:1160px){.head-tel{display:none}}
@media (max-width:899px){
  .nav{display:none}
  .head-call{margin-left:auto}
  .menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;font:600 16px/1 var(--sans);color:var(--ink);cursor:pointer}
}
@media (max-width:360px){.head-in{gap:10px}.sign{padding:6px 11px 5px}.sign b{font-size:15px}.sign span{font-size:9.5px}.head-call,.menu-btn{padding:0 11px}}

/* phone sheet */
.sheet{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column;padding:12px var(--gut) 28px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease),visibility 0s linear var(--t2)}
.sheet.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sheet-top{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin-bottom:14px}
.sheet-close{min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;font:600 16px/1 var(--sans);cursor:pointer;color:var(--ink)}
.sheet nav a{display:block;font:700 28px/1.1 var(--slab);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule)}
.sheet nav a[aria-current=page]{color:var(--red)}
.sheet .sub{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 0 14px;border-bottom:1px solid var(--rule)}
.sheet .sub a{font:600 16px/1.3 var(--sans);border:0;padding:4px 0;text-decoration:underline}
.sheet-foot{margin-top:22px;display:grid;gap:10px}
.sheet-foot .btn{width:100%}
html.sheet-open{overflow:hidden}

/* ---------- markers: the numbered points on the storefront ---------- */
.mk{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
  font:700 15px/1 var(--sans);flex:none;box-shadow:0 0 0 3px #fff}
.sec-mark{display:flex;align-items:center;gap:12px;margin-bottom:18px;font:600 15px/1.2 var(--sans);color:var(--muted)}
.sec-mark .mk{width:26px;height:26px;font-size:14px;box-shadow:none}

/* ---------- home opening ---------- */
.opening{padding:clamp(26px,4vw,52px) 0 clamp(40px,5vw,72px)}
.opening-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,36px)}
.where{font:600 15px/1.3 var(--sans);color:var(--muted);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px 14px}
.where span+span::before{content:"·";margin-right:14px;color:var(--sky)}
.opening h1{max-width:none;text-wrap:wrap}
.opening h1 em{font-style:normal;color:var(--red)}
.opening-side .lede{margin-bottom:18px}

.storefront{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.shot{position:relative;margin:0;aspect-ratio:2/1;overflow:hidden;background:var(--paper-2);border-top:1px solid var(--ink)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.shot .pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);text-decoration:none;
  transition:transform var(--t1) var(--ease)}
.shot .pin:hover,.shot .pin.hot{transform:translate(-50%,-50%) scale(1.18)}
.shot .pin .mk{box-shadow:0 0 0 3px #fff,0 4px 14px rgba(0,0,0,.35)}
.legend{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.legend li{border-bottom:1px solid var(--rule)}
.legend a{display:grid;grid-template-columns:30px 1fr;gap:4px 14px;padding:14px 0;text-decoration:none}
.legend a .mk{grid-row:span 2;box-shadow:none}
.legend b{font:700 19px/1.2 var(--slab)}
.legend span:last-child{font-size:15.5px;line-height:1.4;color:var(--ink-2)}
.legend a:hover b,.legend a.hot b{color:var(--red)}
.cap{font:italic 400 15px/1.4 var(--sans);color:var(--muted);margin:10px 0 0}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,7vw,104px) 0;border-top:1px solid var(--rule)}
.sec-white{background:#fff}
.sec-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px)}
.sec-head p{color:var(--ink-2);margin:12px 0 0}

/* 1 — the sign: how an estimate goes */
.estimate{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.estimate h2{margin-bottom:16px}
.ways{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ways li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ways h3{font-size:21px}
.ways p{margin:0;color:var(--ink-2);font-size:17px}
.ways q{display:block;quotes:"“" "”";font-style:italic;color:var(--ink);margin-top:8px}
.ways cite{font-style:normal;font-size:15px;color:var(--muted);display:block;margin-top:2px}

/* 2 — the bays: the guide (signature) */
.guide{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.choices{border:0;margin:0;padding:0;min-width:0}
.choices legend{font:700 21px/1.2 var(--slab);margin:0 0 14px;padding:0}
.choices .opts{border-top:1px solid var(--ink)}
.choices label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 4px 13px 0;border-bottom:1px solid var(--rule);cursor:pointer;
  font:600 18px/1.25 var(--sans);transition:color var(--t1) var(--ease),padding var(--t2) var(--ease)}
.choices label small{display:block;font-weight:400;font-size:14.5px;color:var(--muted)}
.choices input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.choices label::after{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink);flex:none;transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.choices label:hover{color:var(--red)}
.choices label:has(input:checked){color:var(--red);padding-left:12px;box-shadow:inset 3px 0 0 var(--red)}
.choices label:has(input:checked)::after{background:var(--red);border-color:var(--red)}
.choices label:has(input:focus-visible){outline:3px solid var(--red);outline-offset:2px}
.panels{background:#fff;border:1px solid var(--ink);padding:clamp(22px,3vw,40px);min-height:100%}
.panel h3{font-size:clamp(24px,2.2vw,30px);margin-bottom:6px}
.panel .kicker{font:600 15px/1.3 var(--sans);color:var(--muted);margin:0 0 18px}
.panel dl{margin:0 0 22px;display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--rule)}
.panel dt,.panel dd{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
.panel dt{font:600 15px/1.45 var(--sans);color:var(--muted);padding-right:16px}
.panel dd{font-size:17px;line-height:1.5}
.panel dd p{margin:0}
.panel dd a{font-weight:600}
.prep{margin:0 0 20px;padding:14px 16px;background:var(--paper);border-left:3px solid var(--leaf);font-size:16px;line-height:1.5}
.prep b{display:block;font-weight:600;margin-bottom:2px}
/* One panel at a time, chosen by the radios. Pure CSS, so it works without JavaScript;
   browsers without :has() simply show every panel. */
@supports selector(:has(*)){
  .panel{display:none}
  .guide:has(#g-unsure:checked) .p-unsure,.guide:has(#g-brakes:checked) .p-brakes,.guide:has(#g-ac:checked) .p-ac,
  .guide:has(#g-engine:checked) .p-engine,.guide:has(#g-electric:checked) .p-electric,.guide:has(#g-tires:checked) .p-tires,
  .guide:has(#g-maint:checked) .p-maint{display:block;animation:panel-in var(--t2) var(--ease)}
}
.panel+.panel{margin-top:32px}
@supports selector(:has(*)){.panel+.panel{margin-top:0}}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* warranty band */
.warr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.warr-figure{font:700 clamp(36px,5vw,68px)/1 var(--slab);margin:0 0 14px;letter-spacing:-.01em}
.warr-figure small{display:block;font:600 16px/1.3 var(--sans);color:var(--muted);letter-spacing:0;margin-top:10px}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.facts li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px}
.facts b{font-weight:600;color:var(--muted);font-size:15px;padding-top:2px}

/* 3 — the flowerpots: neighbors' words */
.words{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:start}
.lead-quote{margin:0}
.lead-quote blockquote{margin:0;font:500 clamp(26px,2.6vw,36px)/1.25 var(--slab);text-wrap:pretty}
.lead-quote figcaption{margin-top:16px;font-weight:600}
.lead-quote figcaption span{font-weight:400;color:var(--muted)}
.qlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.qlist li{padding:18px 0;border-bottom:1px solid var(--rule)}
.qlist blockquote{margin:0 0 6px;font-size:18px;line-height:1.5}
.qlist cite{font-style:normal;font-weight:600;font-size:15.5px}
.more{margin-top:20px}

/* 4 — door 4215: visit and drop-off */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);align-items:start}
.visit address{font:700 clamp(26px,2.6vw,34px)/1.2 var(--slab);font-style:normal;margin:14px 0 20px}
.hours{border-collapse:collapse;width:100%;font-size:17px;border-top:1px solid var(--ink)}
.hours th,.hours td{text-align:left;padding:11px 0;border-bottom:1px solid var(--rule);font-weight:400}
.hours th{font-weight:600}
.hours caption{text-align:left;font:600 15px/1.3 var(--sans);color:var(--muted);padding-bottom:8px}
.paths{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.paths li{border-bottom:1px solid var(--rule)}
.paths a{display:block;padding:13px 0;text-decoration:none;font-weight:600}
.paths a small{display:block;font-weight:400;color:var(--muted);font-size:14.5px}
.paths a:hover{color:var(--red)}

/* ---------- inner pages ---------- */
.page-open{padding:clamp(26px,4vw,56px) 0 clamp(40px,5vw,72px)}
.page-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:end}
.crumb{font-size:15px;color:var(--muted);margin:0 0 14px;display:block}
.crumb a{color:var(--muted)}
.page-open h1{margin-bottom:18px;max-width:18ch}
.page-open .lede{margin-bottom:22px}
.aside{border-top:1px solid var(--ink);padding-top:16px}
.aside-big{font:700 clamp(48px,6vw,84px)/.95 var(--slab);letter-spacing:-.015em;margin:0 0 10px}
.aside p{font-size:16.5px;color:var(--ink-2)}
.wide-shot{margin:0}
.wide-shot .frame{aspect-ratio:3/1;overflow:hidden;background:var(--paper-2);border-top:1px solid var(--ink)}
.wide-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}

.svc-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.jump{list-style:none;margin:0;padding:0;position:sticky;top:96px;border-top:1px solid var(--ink)}
.jump a{display:block;padding:9px 0;border-bottom:1px solid var(--rule);text-decoration:none;font-weight:600;font-size:16px}
.svc{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:10px 40px;padding:28px 0;border-bottom:1px solid var(--rule);scroll-margin-top:90px}
.svc:first-child{border-top:1px solid var(--ink)}
.svc p{color:var(--ink-2);font-size:17px}
.from-tip{border-left:3px solid var(--leaf);padding:4px 0 4px 14px;font-size:16px!important}
.svc .actions{margin-top:6px}
.svc .actions a:not(.btn){font-size:16px;font-weight:600}

.steps{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--ink)}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:26px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:700 18px/1 var(--sans)}
.steps h3{margin-bottom:8px}
.steps p{color:var(--ink-2)}

.review-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(32px,5vw,80px)}
.review-list li{break-inside:avoid;padding:20px 0;border-top:1px solid var(--rule)}
.review-list blockquote{margin:0 0 8px;font-size:18.5px;line-height:1.5}
.review-list cite{font-style:normal;font-weight:600}

.also{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
.also a{display:block;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.also b{display:block;font:700 20px/1.25 var(--slab)}
.also span{font-size:16px;color:var(--ink-2)}
.also a:hover b{color:var(--red)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#e9eae6;padding:56px 0 28px}
.foot a{color:#fff}
.foot a:hover{color:#ffb4a6}
.foot a.sign{background:#fff;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.foot-h{font:600 14px/1.3 var(--sans);color:#aeb4b8;margin:0 0 10px;letter-spacing:.02em}
.foot p{font-size:16px;margin:0 0 10px;color:#dfe1dd}
.foot ul{list-style:none;margin:0;padding:0;font-size:16px}
.foot li{padding:3px 0}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:18px;border-top:1px solid #3a3f43;font-size:14.5px;color:#aeb4b8}

.sticky-action a{border-radius:3px}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .storefront{grid-template-columns:1fr}
  .legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .visit{grid-template-columns:1fr 1fr}
  .visit>:last-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .opening-top,.estimate,.warr,.words,.page-grid,.guide,.svc-layout{grid-template-columns:minmax(0,1fr)}
  .opening h1{max-width:none}
  .ways li,.svc{grid-template-columns:1fr}
  .jump{position:static;display:flex;flex-wrap:wrap;gap:0 18px;border-top:0}
  .jump a{border:0;padding:6px 0;text-decoration:underline}
  .review-list{columns:1}
  .also{grid-template-columns:1fr}
  .choices legend{margin-bottom:10px}
  .choices .opts{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .choices label{font-size:16.5px;padding:12px 2px 12px 0;min-height:52px}
  .choices label small{display:none}
  .panel dl{grid-template-columns:1fr}
  .panel dt{padding-bottom:0;border-bottom:0}
  .panel dd{padding-top:2px}
}
@media (max-width:640px){
  body{font-size:17px}
  .opening{padding-top:20px}
  .where{font-size:14px;margin-bottom:10px}
  .opening-side .actions .btn{flex:1 1 auto}
  .storefront{margin:0 calc(var(--gut) * -1)}
  .shot{aspect-ratio:1200/739}
  .shot img{object-position:50% 50%}
  .shot .pin{top:var(--yp)}
  .shot .pin .mk{width:26px;height:26px;font-size:13px}
  .legend,.cap{padding:0 var(--gut)}
  .legend{grid-template-columns:1fr;border-top:0}
  .legend a{padding:11px 0}
  .legend b{font-size:17.5px}
  .visit{grid-template-columns:1fr}
  .visit>:last-child{grid-column:auto}
  .wide-shot{margin:0 calc(var(--gut) * -1)}
  .wide-shot .frame{aspect-ratio:1200/739;border-top:0}
  .wide-shot img{object-position:50% 50%}
  .wide-shot .cap{padding:0 var(--gut)}
  .foot-grid{grid-template-columns:1fr}
  .facts li{grid-template-columns:1fr;gap:2px}
  .steps li{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .steps li::before{width:34px;height:34px;font-size:16px}
}
@media (max-width:360px){
  .choices .opts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}