/* ---------------------------------------------------------------------------
   FONTS

   These load from this site's own assets/fonts/ folder. They used to be
   fetched from Google's servers on every page view. They are local now, so
   the site keeps its typefaces even if Google changes that service, blocks
   it, or it is unreachable. Do not put a Google Fonts link back in.

   Latin characters only, which is all this site uses.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bigshouldersdisplay-600.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/bigshouldersdisplay-700.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bigshouldersdisplay-800.woff2) format('woff2')}
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/bigshouldersdisplay-900.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibmplexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexmono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexmono-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibmplexsans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibmplexsans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibmplexsans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibmplexsans-700.woff2) format('woff2')}

:root{
  --red:#E51922; --red-deep:#B01018;
  --ink:#16191D; --slate:#454B54; --muted:#727982;
  --paper:#fff; --wash:#F6F5F3; --hair:#E3E4E6; --steel:#3E5C76;
  --display:"Big Shoulders Display",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(20px,4.5vw,60px); --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.97;margin:0;text-transform:uppercase}
h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.008em}
h3{font-size:clamp(20px,2vw,25px)}
h4{font-size:18px}
p{margin:0 0 16px}
a{color:var(--steel)}
/* .lede was set larger than body copy (up to 19px against 17px). On any page
   where body paragraphs follow it, the opening paragraph read as a different
   size and looked like a mistake — which it did on 18 of the 24 pages. It now
   inherits the body size and keeps only the colour and measure. Do not put a
   font-size back on this without checking every page that uses it. */
.lede{color:var(--slate);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);margin:0 0 13px}
.eyebrow.pale{color:rgba(255,255,255,.8)}
.ico{width:24px;height:24px;flex:none}

.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--mono);
  font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;
  border:2px solid transparent;white-space:nowrap;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.btn .ico{width:18px;height:18px}
.btn.solid{background:var(--red);color:#fff}
.btn.solid:hover{background:var(--red-deep)}
.btn.line{border-color:var(--ink);color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.white{background:#fff;color:var(--ink)}
.btn.white:hover{background:var(--red);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* utility bar */
.util{background:var(--ink);color:rgba(255,255,255,.72)}
/* The top bar used the mono face, like the rest of the hours-and-phone text.
   It read as cold and technical in the first thing a visitor sees, so it uses
   the body face here instead. Deliberate exception; mono stays everywhere else. */
.util .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding-top:9px;
  padding-bottom:9px;font-family:var(--body);font-size:13px;letter-spacing:.01em}
.util a{color:rgba(255,255,255,.88);text-decoration:none}
.util a:hover{color:#fff}
.util .push{margin-left:auto}
.stat{display:none;align-items:center;gap:7px}
.js .stat{display:inline-flex}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.stat.open .dot{background:#31BE68;box-shadow:0 0 0 3px rgba(49,190,104,.22)}
.stat.open{color:#7BE1A4}
.stat.shut .dot{background:var(--red)}
.stat.shut{color:#FF9298}
/* ---------------------------------------------------------------------------
   TOP BAR ON NARROW SCREENS
   ---------------------------------------------------------------------------
   On a wide screen the bar shows everything at once: open/closed, hours,
   address, phone. Below 780px there is no room, so the last three take turns
   in the same spot on the right instead of the hours and address being hidden.

   Six seconds each, 18s for a full turn. No JavaScript. If you add or remove an
   item, change the 18s and the delays below, and the 30%/33% in the keyframes,
   using: hold percentage = (100 / number of items).

   The open/closed indicator stays put on the left. It is the one thing a
   visitor wants immediately and it is short enough to always fit. */
@media(max-width:780px){
  .util .wrap{position:relative;min-height:40px;font-size:12px}
  .util .hideSm{display:block}
  .util .push{margin-left:0}
  .util .wrap > :nth-child(n+2){
    position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);margin:0;
    white-space:nowrap;opacity:0;animation:utilCycle 18s linear infinite}
  .util .wrap > :nth-child(2){animation-delay:0s}
  .util .wrap > :nth-child(3){animation-delay:6s}
  .util .wrap > :nth-child(4){animation-delay:12s}
}
@keyframes utilCycle{
  0%{opacity:0} 3%{opacity:1} 30%{opacity:1} 33%{opacity:0} 100%{opacity:0}
}
/* If motion is reduced, stop the rotation and show the phone number, which is
   the most useful of the three. Without this the bar would be empty. */
@media(max-width:780px) and (prefers-reduced-motion:reduce){
  .util .wrap > :nth-child(n+2){animation:none;opacity:0}
  .util .wrap > :nth-child(4){opacity:1}
}

/* header */
.head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--hair)}
.head .wrap{display:flex;align-items:center;gap:20px;height:80px}
.brand{margin-right:auto;display:block}
.brand img{height:52px;width:auto;display:block}
.nav{display:flex;gap:26px}
.nav a{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate);text-decoration:none;padding:8px 0;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--red);border-bottom-color:var(--red)}
/* Intoxalock badge, far right of the header. Deliberately smaller than the RD
   logo: it is a partner mark, not a co-brand, and the shop's own identity has
   to stay dominant. Links to the interlock page, where the Intoxalock number
   is the primary button.
   Hidden below 1040px, the same breakpoint where the nav collapses to a burger
   — the header runs out of room and the shop's own logo and the Schedule
   button both matter more on a phone. It still appears in the panel further
   down the home page. */
.ilock-badge{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;
  line-height:1}
.ilock-badge img{height:28px;width:auto;display:block}
.ilock-tel{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.ilock-tel:hover{color:var(--red)}
/* The badge and its number stay visible at every width. Calls to that number
   earn a referral fee, so neither part is something to hide on a phone. They
   shrink in stages instead.
   Note the number sits UNDER the logo, not beside it, so it costs almost no
   horizontal space - hiding it would save about 7px and gain nothing. */
@media(max-width:1040px){
  .ilock-badge img{height:24px}
  .ilock-tel{font-size:11.5px}
}
@media(max-width:820px){
  .ilock-badge img{height:22px}
  .ilock-tel{font-size:11px}
}
@media(max-width:560px){
  .ilock-badge img{height:20px}
  .ilock-tel{font-size:10.5px;letter-spacing:0}
}
.burger{display:none;background:none;border:1px solid var(--hair);padding:10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}
@media(max-width:1040px){
  /* top:100% rather than a fixed pixel value, so the dropdown always sits
     directly under the header even when the header changes height. */
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--hair);flex-direction:column;gap:0;padding:8px var(--gut) 20px}
  .nav.on{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--hair)}
  .burger{display:block}
}
@media(max-width:560px){
  /* Below this width the four things in the header - logo, menu button,
     Schedule button and Intoxalock badge - genuinely cannot fit on one line.
     Rather than drop one, the row is allowed to wrap and the header grows a
     little taller. Nothing is hidden. */
  .head .wrap{height:auto;min-height:68px;flex-wrap:wrap;gap:10px 14px;
    padding-top:10px;padding-bottom:10px}
  .brand img{height:38px}
  .head .btn{padding:10px 12px;font-size:11.5px}
  .burger{padding:8px}
}

/* hero */
/* The hero used to run edge to edge, so its text started left of the header
   logo and the photo bled off the right of the screen. It is now held in the
   same 1200px container as the header and every section below, so the left
   edge of "Auto repair in" lines up with the RD logo above it and the photo's
   right edge lines up with the Schedule button. */
/* align-items:start does two things. It stops the photo stretching to match the
   height of the text beside it - without it the photo is as tall as the
   paragraph, which made it enormous - and it lines the top of the photo up with
   the first line of the paragraph. The photo's own height comes from the
   aspect-ratio further down. */
.hero{display:grid;grid-template-columns:1fr 1fr;background:#fff;align-items:start;
  max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
/* The heading block runs the full width of the hero, above both columns. On a
   phone the hero stacks and this stays first, so the order reads: heading,
   photo, then the paragraph and buttons. */
.hero-head{grid-column:1/-1;padding:clamp(26px,3vw,44px) 0 clamp(16px,1.8vw,26px)}
.hero .copy{padding:0 clamp(20px,3.5vw,58px) clamp(26px,3vw,44px) 0;
  display:flex;flex-direction:column;justify-content:center;width:100%}
/* Red highlight works in the heading or the subhead beneath it. */
.hero .hl{color:var(--red)}
.hero .sub{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,27px);
  text-transform:uppercase;color:var(--slate);margin:14px 0 0;line-height:1.05}
.hero p.txt{margin:20px 0 0;color:var(--slate);max-width:46ch}
.hero .actions{margin-top:30px}
/* The photo's height comes from its own width and this ratio, not from the text
   beside it. Make it taller or shorter by changing this one value: 16/9 is
   shorter and wider, 4/3 is taller. */
.hero .shot{position:relative;aspect-ratio:16/10;min-height:0;
  background:var(--ink) linear-gradient(140deg,#23272D,#16191D)}
/* ---------------------------------------------------------------------------
   HERO PHOTO CYCLE
   ---------------------------------------------------------------------------
   Four photos stacked on top of each other, each fading in, holding, then
   fading out to reveal the next. No JavaScript, so there is nothing to break.

   THE TIMING, IF YOU CHANGE THE NUMBER OF PHOTOS:
   One full loop is 30s and there are 6 photos, so each gets 5s. The delays
   below are 0s, 5s, 10s, 15s, 20s, 25s. With five photos you would use a 25s
   loop, delays of 0s, 5s, 10s, 15s, 20s, and change 16.7%/18.7% in the
   keyframes to 20%/22%.
   The rule is: hold percentage = (100 / number of photos).

   The first photo fades in over the first second rather than being there
   instantly. That is deliberate and reads as intentional.
   --------------------------------------------------------------------------- */
.hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:heroCycle 30s linear infinite}
.hero .shot img:nth-child(1){animation-delay:0s}
.hero .shot img:nth-child(2){animation-delay:5s}
.hero .shot img:nth-child(3){animation-delay:10s}
.hero .shot img:nth-child(4){animation-delay:15s}
.hero .shot img:nth-child(5){animation-delay:20s}
.hero .shot img:nth-child(6){animation-delay:25s}
@keyframes heroCycle{
  0%{opacity:0} 2%{opacity:1} 16.7%{opacity:1} 18.7%{opacity:0} 100%{opacity:0}
}
/* If the visitor has asked their system to reduce motion, or animations are
   unavailable, show the first photo and hold it. Without this the hero would
   be blank for those visitors, because every photo starts at opacity 0. */
@media(prefers-reduced-motion:reduce){
  .hero .shot img{animation:none;opacity:0}
  .hero .shot img:nth-child(1){opacity:1}
}
.hero .shot::after{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--red)}
@media(max-width:940px){
  .hero{grid-template-columns:1fr}
  .hero .copy{order:2;padding-right:0;max-width:none}
  .hero .shot{order:1;min-height:0;aspect-ratio:16/9}
  .hero .shot::after{left:0;right:0;top:auto;bottom:0;width:auto;height:7px}
}

/* page header for inner pages */
.phead{background:var(--wash);border-bottom:1px solid var(--hair)}
/* Tightened 9 Aug 2026. This padding and .pad below stack at the top of every
   inner page, so the two together set the gap under the page title. They used
   to be 68px and 100px, which put 168px of empty space between the heading and
   the first line of content. */
.phead .wrap{padding-top:clamp(28px,3.4vw,46px);padding-bottom:clamp(14px,1.7vw,22px)}
.phead h1{font-size:clamp(36px,4.6vw,60px)}
.phead .sub{font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,26px);
  text-transform:uppercase;color:var(--slate);margin:12px 0 0;line-height:1.05}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--red)}

/* trust strip */
.trust{background:#fff;border-bottom:1px solid var(--hair)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,32px);
  padding-top:34px;padding-bottom:34px}
.trust .wrap>div{display:flex;gap:12px;align-items:flex-start}
.trust .ico{color:var(--red);margin-top:2px}
.trust b{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;
  display:block;line-height:1.1}
.trust small{font-size:13.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
@media(max-width:900px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust .wrap{grid-template-columns:1fr}}

/* sections */
section{scroll-margin-top:90px}
/* The main vertical rhythm of the whole site. Applied top and bottom, so the
   value here is doubled wherever two .pad sections meet. Was 100px, which put
   200px between sections. Change this one number to loosen or tighten the
   entire site at once. */
.pad{padding-top:clamp(38px,4.2vw,64px);padding-bottom:clamp(38px,4.2vw,64px)}
/* A .pad section sitting directly under a page header does not need a full
   section's worth of space above it: the header already provides the break.
   Without this the two paddings stack and every inner page opens with a big
   empty band under its own title. */
.phead + section.pad{padding-top:clamp(8px,1vw,14px)}
.wash{background:var(--wash)}
.shead{max-width:62ch;margin-bottom:clamp(20px,2.4vw,32px)}
.shead h2::after{content:"";display:block;width:64px;height:5px;background:var(--red);margin-top:18px}

/* service grid */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair)}
.svc{background:#fff;padding:26px 22px 30px;text-decoration:none;color:inherit;display:block;
  transition:background .2s,color .2s}
.svc .ico{width:30px;height:30px;color:var(--red);margin-bottom:15px;transition:color .2s}
.svc:hover{background:var(--ink);color:#fff}
.svc:hover .ico{color:#fff}
.svc:hover p{color:rgba(255,255,255,.7)}
.svc h4{margin-bottom:7px}
.svc p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);transition:color .2s}
@media(max-width:1000px){.svcs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.svcs{grid-template-columns:1fr}}

/* photo tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  margin-bottom:clamp(28px,3.4vw,44px)}
.tile{position:relative;overflow:hidden;background:var(--ink) linear-gradient(140deg,#23272D,#16191D)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.93;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;
  background:linear-gradient(to top,rgba(22,25,29,.9),rgba(22,25,29,0));
  font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}

/* two column */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.cols.narrow{grid-template-columns:.9fr 1.1fr}
@media(max-width:880px){.cols,.cols.narrow{grid-template-columns:1fr}}

.frame{position:relative}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.frame::before{content:"";position:absolute;left:-12px;top:-12px;width:86px;height:86px;
  border-left:7px solid var(--red);border-top:7px solid var(--red)}

/* definition rows */
.facts{border-top:2px solid var(--ink)}
.frow{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.frow dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0}
.frow dd{margin:0;text-align:right;font-family:var(--mono);font-size:14.5px;font-weight:500;color:var(--ink)}
.frow dd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
.frow dd a:hover{color:var(--red);border-bottom-color:var(--red)}
dl{margin:0}

/* feature panes */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
/* .spec-one: same panel, one item instead of two. Used on the home page since
   snow plowing was dropped. Add a second .pane and remove this class to go back. */
.spec-one{grid-template-columns:1fr}
.pane{background:#fff;padding:clamp(26px,3.2vw,42px)}
/* Intoxalock logo in the home page panel. Height driven, width auto, so the
   brand's own proportions are preserved whatever we do to the layout. */
.ilock-logo{display:block;height:46px;width:auto;margin:0 0 18px}
/* Line above the Intoxalock number on the home page. Explains why a second
   phone number appears there, so it does not look like a mistake next to the
   shop's own number in the header. */
.ilock-note{margin:20px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--slate)}
.pane .ico{width:40px;height:40px;color:var(--red);margin-bottom:18px}
.pane .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;background:var(--ink);
  color:#fff;padding:5px 10px}
.pane p{margin:12px 0 0;color:var(--slate);font-size:16px}
.pane ul{margin:20px 0 0;padding:0;list-style:none}
.pane li{font-family:var(--mono);font-size:13.5px;color:var(--slate);padding:9px 0 9px 20px;
  position:relative;border-top:1px solid var(--hair)}
.pane li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:2px;background:var(--red)}
.pane .big{display:block;margin-top:22px;font-family:var(--display);font-weight:800;font-size:28px;
  text-transform:uppercase;line-height:1.05}
.pane .big a{color:var(--ink);text-decoration:none}
.pane .big a:hover{color:var(--red)}
@media(max-width:820px){.spec{grid-template-columns:1fr}}

/* band */
.band{position:relative;background:var(--ink);overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.band .wrap{position:relative;padding-top:clamp(52px,6.5vw,90px);padding-bottom:clamp(52px,6.5vw,90px);
  text-align:center;color:#fff}
.band h2{margin-bottom:20px}
.band p{color:rgba(255,255,255,.84);max-width:56ch;margin:0 auto 26px}
.band .actions{justify-content:center}

/* reviews */
.rate{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:32px}
.rate .big{font-family:var(--display);font-weight:900;font-size:68px;line-height:.78;color:var(--red)}
.rate p{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate)}
/* Review cards. A CSS column flow rather than a grid, because real reviews are
   wildly different lengths - one here is five lines and another is one. A grid
   equalises row heights, so a long quote would leave big empty gaps beside it.
   Columns let each card be its own height and pack naturally. */
.qs{columns:3;column-gap:clamp(16px,2.2vw,28px)}
.q{background:#fff;border:1px solid var(--hair);border-top:5px solid var(--red);padding:26px 24px;
  break-inside:avoid;margin:0 0 clamp(16px,2.2vw,28px)}
.q p{margin:0;font-size:16.5px;line-height:1.6}
.q cite{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px;font-style:normal;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){.qs{columns:2}}
@media(max-width:560px){.qs{columns:1}}

/* prose */
.prose h3{margin:34px 0 10px}
.prose p{color:var(--slate)}
.side{background:var(--wash);border:1px solid var(--hair);padding:24px}
.side h4{margin-bottom:14px}
.side ul{list-style:none;margin:0;padding:0}
.side li{border-top:1px solid var(--hair)}
.side li a{display:flex;gap:10px;align-items:center;padding:10px 0;font-size:14.5px;
  color:var(--ink);text-decoration:none}
.side li a .ico{width:19px;height:19px;color:var(--red)}
.side li a:hover{color:var(--red)}

/* map + form */
.map{aspect-ratio:16/11;width:100%;border:1px solid var(--hair)}
/* Photo of the shop front on the contact page, under the address and hours.
   Industrial Lane is a row of near identical units, so knowing what to look
   for is genuinely more useful on arrival than the map is. */
.findus{margin:30px 0 0}
.findus img{width:100%;height:auto;border:1px solid var(--hair)}
.findus figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--slate)}
@media(max-width:880px){.map{aspect-ratio:4/3}}
/* The appointment form, on /schedule/ only.
   Label and border colours here are deliberate and should not be lightened back
   toward the page's hairline grey. A form control's outline needs 3:1 contrast
   against the background to be legible; the old #E3E4E6 border was about 1.3:1
   and the boxes were genuinely hard to see. Labels use slate rather than muted
   for the same reason, with the letter-spacing pulled in so small uppercase
   text stays readable. */
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--muted);padding:11px 13px;border-radius:0;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 2px rgba(229,25,34,.18)}
.field textarea{min-height:96px;resize:vertical}
.formnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--slate);margin-top:12px}
/* One column on phones. Without this the two column grid squeezes name and
   phone to about 160px each, which is where most of these submissions start. */
@media(max-width:560px){.form{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

/* areas */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair)}
.area{background:#fff;padding:24px}
.area .ico{width:26px;height:26px;color:var(--red);margin-bottom:12px}
.area p{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
@media(max-width:820px){.areas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.areas{grid-template-columns:1fr}}

/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding-top:50px}
footer h4{color:#fff;font-size:16px;letter-spacing:.05em;margin-bottom:14px}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(22px,3vw,42px);padding-bottom:42px}
footer a{color:rgba(255,255,255,.78);text-decoration:none}
footer a:hover{color:#fff}
footer p{margin:0 0 8px;font-size:14.5px}
footer .flogo{height:50px;width:auto;margin-bottom:16px}
.flist{list-style:none;margin:0;padding:0;font-size:14.5px}
.flist li{margin-bottom:8px}
.fbar{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.06em;display:flex;flex-wrap:wrap;gap:10px 22px}
.fbar .push{margin-left:auto}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}

/* mobile call bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:var(--ink);
  border-top:4px solid var(--red)}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;
  text-decoration:none;color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.08em}
.mbar a .ico{width:17px;height:17px}
.mbar a+a{border-left:1px solid rgba(255,255,255,.16)}
.mbar a.prime{background:var(--red)}
@media(max-width:720px){.mbar{display:flex}body{padding-bottom:56px}}

.js .rise{opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.js .rise.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--red);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}