/* =========================================================================
   RFS Auto Group
   Light industrial. Concrete ground, shop signage type, polished metal
   headings, red where it counts.
   ========================================================================= */

:root{
  --bg:#ececE9;          /* light concrete, not paper */
  --card:#ffffff;
  --ink:#111214;
  --mut:#6c7076;
  --line:#d7d8d4;
  --line-2:#c6c8c3;
  --red:#e01420;
  --red-dk:#b30f19;

  --f-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* condensed signage for display, normal width for reading */
  --sign:"wdth" 78,"wght" 700;
  --sign-6:"wdth" 82,"wght" 600;
  --norm:"wdth" 100,"wght" 400;
  --norm-5:"wdth" 100,"wght" 500;

  --pad:clamp(18px,4vw,54px);
  --max:1360px;
  --ease:cubic-bezier(.16,.84,.28,1);

  /* polished metal, dark enough to read on a light ground */
  --metal:linear-gradient(177deg,#79828a 0%,#15181b 22%,#9aa3ab 44%,
                                 #0e1113 58%,#69727a 78%,#1c2024 100%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-variation-settings:var(--norm);
  font-size:clamp(.95rem,.92rem + .16vw,1.05rem);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html.has-intro body{overflow:hidden}

img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

/* a whisper of tooth so flat colour does not look like a screenshot */
.grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */

.mono{
  font-family:var(--f-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mut);line-height:1.4;
}
.eyebrow{display:flex;align-items:center;gap:.6em;margin-bottom:16px}
.pip{width:6px;height:6px;background:var(--red);border-radius:50%;flex:none}

.h2{
  font-family:var(--f-disp);font-variation-settings:var(--sign);
  font-size:clamp(1.75rem,1.1rem + 2.1vw,2.9rem);
  line-height:.98;letter-spacing:.005em;text-transform:uppercase;
}
.chrome{
  color:var(--ink);
  background:var(--metal);background-size:100% 260%;
  background-position:0 var(--shine,50%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (-webkit-background-clip:text){ .chrome{-webkit-text-fill-color:currentColor} }

.lede{max-width:46ch;margin-top:14px;color:var(--mut)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-disp);font-variation-settings:var(--sign-6);
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.9em 1.5em;border:1.5px solid transparent;border-radius:2px;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  white-space:nowrap;
}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:var(--ink);border-color:var(--ink)}
.btn--wire{border-color:var(--line-2);color:var(--ink)}
.btn--wire:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--lg{font-size:.875rem;padding:1.05em 1.7em}

.sec{padding-block:clamp(46px,5vw,74px)}
/* the header is sticky, so an anchor landing flush at the top of the viewport
   lands underneath it. Hold everything it can jump to clear of the bar. */
[id]{scroll-margin-top:clamp(68px,8vw,86px)}
.sec--panel{background:var(--card);border-block:1px solid var(--line)}

/* heading reveal: a red rule draws, then the heading clips up behind it */
.rvh{position:relative;padding-top:22px}
.rvh::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease);
}
.rvh.in::before{transform:scaleX(1)}
.rvh .h2{clip-path:inset(0 0 105% 0);transition:clip-path .8s var(--ease) .14s}
.rvh.in .h2{clip-path:inset(0 0 -6% 0)}
.rvh .eyebrow{opacity:0;transition:opacity .6s ease .08s}
.rvh .lede{opacity:0;transition:opacity .7s ease .4s}
.rvh.in .eyebrow,.rvh.in .lede{opacity:1}

.rv{opacity:0;transition:opacity .7s ease}
.rv.in{opacity:1}

/* =========================================================================
   INTRO: the badge assembles itself
   ========================================================================= */

.intro{display:none}
html.has-intro .intro{
  display:grid;place-items:center;position:fixed;inset:0;z-index:9000;
  background:var(--bg);
  animation:lift .7s var(--ease) 1.98s both;
}
@keyframes lift{to{transform:translateY(-101%)}}

.intro__logo{position:relative;width:min(66vw,520px);aspect-ratio:900/509}
.lyr{position:absolute;inset:0;width:100%;height:auto}
/* gear 0.12-1.07, pistons 0.45-1.20, wings 0.70-1.40, word 0.88-1.53,
   then the badge holds for about half a second before the curtain lifts */
.lyr--gear {animation:gearIn .95s var(--ease) .12s both;transform-origin:50% 51.2%}
.lyr--pist {animation:dropIn .75s var(--ease) .45s both}
.lyr--wingl{animation:fromL  .70s var(--ease) .70s both}
.lyr--wingr{animation:fromR  .70s var(--ease) .70s both}
.lyr--word {animation:wordIn .65s var(--ease) .88s both}

/* a deliberate skip should fade, not cut */
html.has-intro .intro.is-skip{animation:none;opacity:0;transition:opacity .26s ease}

@keyframes gearIn{from{opacity:0;transform:scale(.34) rotate(-230deg)}
                  to  {opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-13%) scale(.97)}
                  to  {opacity:1;transform:none}}
@keyframes fromL {from{opacity:0;transform:translateX(-16%)} to{opacity:1;transform:none}}
@keyframes fromR {from{opacity:0;transform:translateX(16%)}  to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;transform:scale(.94)}       to{opacity:1;transform:none}}

/* =========================================================================
   HEADER
   ========================================================================= */

.head{position:sticky;top:0;z-index:80;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .3s ease}
.head.is-stuck{border-bottom-color:var(--line)}
.head__in{
  max-width:var(--max);margin-inline:auto;padding:12px var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2.6vw,42px);
  transition:padding .3s var(--ease);
}
.head.is-stuck .head__in{padding-block:8px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:clamp(24px,3vw,32px);width:auto;transition:height .3s var(--ease)}
.head.is-stuck .brand img{height:clamp(21px,2.6vw,27px)}

.nav{display:none}
.nav a{font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.11em;
       text-transform:uppercase;color:var(--mut);transition:color .2s ease}
.nav a:hover{color:var(--ink)}

.head__act{margin-left:auto;display:flex;align-items:center;gap:12px}
.tel{display:none;font-family:var(--f-mono);font-size:.6875rem;font-weight:500;letter-spacing:.08em}
.tel:hover{color:var(--red)}
.burger{width:36px;height:36px;display:grid;place-content:center;gap:6px;flex:none}
.burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (min-width:900px){
  .nav{display:flex;gap:clamp(16px,2vw,30px)}
  .tel{display:block}
  .burger{display:none}
}
@media (max-width:899px){
  .nav.is-open{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);padding:4px var(--pad) 16px;
  }
  .nav.is-open a{padding:13px 0;border-top:1px solid var(--line);
    font-family:var(--f-disp);font-variation-settings:var(--sign-6);
    font-size:1rem;letter-spacing:.04em;color:var(--ink)}
}

/* =========================================================================
   HERO
   Same language as the work tiles: dark photography, white type, a red
   rule, and a data panel pinned over the corner.
   ========================================================================= */

.hero{padding-top:clamp(12px,1.6vw,20px)}

.stage{
  position:relative;overflow:hidden;border-radius:3px;background:#0b0c0e;
  min-height:clamp(480px,72vh,720px);display:flex;
}
.stage__poster,.stage__vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 58%;
}
.stage__vid{opacity:0;transition:opacity .9s ease}
.stage__vid.is-on{opacity:1}
.stage::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(125% 95% at 0% 100%,rgba(6,7,8,.94) 0%,rgba(6,7,8,.68) 34%,
                                        rgba(6,7,8,.22) 64%,rgba(6,7,8,0) 84%),
    linear-gradient(to top,rgba(6,7,8,.42) 0%,rgba(6,7,8,.08) 48%,rgba(6,7,8,0) 74%);
}

.stage__in{
  position:relative;z-index:2;align-self:flex-end;color:#fff;
  padding:clamp(22px,3.4vw,44px);max-width:44rem;
}
.stage__eyebrow{color:rgba(255,255,255,.9);opacity:0;transition:opacity .6s ease .1s}
.stage__addr{border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.stage__addr:hover{border-bottom-color:#fff;color:#fff}
.stage__eyebrow,.stage__h1,.stage__sub{text-shadow:0 1px 22px rgba(0,0,0,.6)}
.is-ready .stage__eyebrow{opacity:1}

.stage__h1{
  margin-top:14px;
  font-family:var(--f-disp);font-variation-settings:var(--sign);
  font-size:clamp(1.85rem,.9rem + 3.1vw,3.3rem);
  line-height:1.02;letter-spacing:.004em;text-transform:uppercase;
}
.stage__h1 .ln{display:block;overflow:hidden;padding-bottom:.03em}
.stage__h1 .ln__i{display:block;transform:translateY(108%)}
.is-ready .stage__h1 .ln__i{transform:none;transition:transform .85s var(--ease)}
.is-ready .stage__h1 .ln:nth-of-type(2) .ln__i{transition-delay:.09s}

.stage__in::before{
  content:"";position:absolute;left:clamp(22px,3.4vw,44px);top:0;
  width:clamp(72px,8vw,120px);height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;
}
.is-ready .stage__in::before{transform:scaleX(1);transition:transform .8s var(--ease) .3s}

.stage__sub{
  max-width:40ch;margin-top:14px;color:rgba(255,255,255,.8);
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);opacity:0;
}
.stage__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;opacity:0}
.is-ready .stage__sub{opacity:1;transition:opacity .7s ease .4s}
.is-ready .stage__cta{opacity:1;transition:opacity .7s ease .48s}

.btn--glass{
  border-color:rgba(255,255,255,.55);color:#fff;
  background:rgba(255,255,255,.1);
}
.btn--glass:hover{background:#fff;border-color:#fff;color:var(--ink)}

/* the data panel, pinned over the corner on desktop */
/* frosted over the hero footage: dark tint so white type survives a bright sky */
.card{
  background:linear-gradient(180deg,rgba(10,11,13,.58),rgba(10,11,13,.22));
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;padding:16px 18px 14px;color:#fff;opacity:0;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card{background:rgba(10,11,13,.72)}
}
.is-ready .card{opacity:1;transition:opacity .7s ease .56s}
.card__k{display:flex;align-items:center;gap:.6em;color:#fff;
  padding-bottom:11px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.22)}
.card__k .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);flex:none}
.card__k .dot.is-open{background:#2bd968}
.card__k .dot.is-shut{background:var(--red)}
.hours .row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:.88rem}
.hours .row b{font-variation-settings:var(--norm-5)}
.hours .row--off{color:rgba(255,255,255,.62)}
.card__map{display:inline-flex;gap:.4em;margin-top:10px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.22);width:100%;color:rgba(255,255,255,.8)}
.card__map:hover{color:#fff}

.hero .hours{margin:0 clamp(22px,3.4vw,44px) clamp(22px,3.4vw,44px)}
@media (min-width:920px){
  .hero .hours{
    position:absolute;z-index:2;right:clamp(22px,3.4vw,44px);
    top:clamp(22px,3.4vw,44px);width:274px;margin:0;
  }
}
@media (max-width:919px){
  .stage{
    flex-direction:column;justify-content:space-between;
    min-height:clamp(460px,68vh,600px);
  }
  .hero .hours{
    order:-1;align-self:flex-end;position:relative;z-index:2;
    width:min(258px,76%);margin:clamp(16px,4vw,22px) clamp(16px,4vw,22px) 0;
  }
  .stage::after{
    background:
      radial-gradient(150% 78% at 0% 100%,rgba(6,7,8,.95) 0%,rgba(6,7,8,.8) 38%,
                                          rgba(6,7,8,.4) 68%,rgba(6,7,8,0) 92%),
      linear-gradient(to top,rgba(6,7,8,.4) 0%,rgba(6,7,8,.06) 52%,rgba(6,7,8,0) 78%);
  }
}

/* =========================================================================
   TICKER
   ========================================================================= */

.tick{background:var(--red);color:#fff;overflow:hidden;padding:11px 0;margin-top:clamp(30px,3.4vw,46px)}
.tick__row{display:flex;width:max-content;animation:roll 34s linear infinite}
.tick:hover .tick__row{animation-play-state:paused}
.tick__set{display:flex;align-items:center;padding-right:0}
.tick__set b{
  font-family:var(--f-disp);font-variation-settings:var(--sign-6);
  font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}
.tick__set i{display:block;width:6px;height:6px;background:#fff;border-radius:50%;margin:0 26px;flex:none}
@keyframes roll{to{transform:translateX(-50%)}}

/* =========================================================================
   WORK TILES
   ========================================================================= */

.tiles{
  display:grid;gap:12px;margin-top:clamp(26px,3vw,40px);
  grid-template-columns:1fr;
}
.tile{
  position:relative;display:block;overflow:hidden;border-radius:3px;
  background:var(--ink);isolation:isolate;
}
.tile img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform .7s var(--ease),opacity .4s ease;opacity:.95;
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,9,10,.92) 0%,rgba(8,9,10,.4) 44%,rgba(8,9,10,0) 74%);
}
.tile__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 18px;color:#fff}
.tile__t{
  font-family:var(--f-disp);font-variation-settings:var(--sign);
  font-size:clamp(1.15rem,.95rem + .7vw,1.55rem);
  line-height:1;text-transform:uppercase;letter-spacing:.01em;
}
.tile__p{margin-top:8px;max-width:38ch;color:rgba(255,255,255,.78);font-size:.92rem}
.tile__go{display:inline-flex;gap:.5em;align-items:center;margin-top:14px;color:#fff}
.tile__go i{font-style:normal;transition:transform .3s var(--ease)}
.tile:hover img{transform:scale(1.045);opacity:1}
.tile:hover .tile__go i{transform:translateX(5px)}
.tile__body::before{
  content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);
}
.tile:hover .tile__body::before{transform:scaleX(1)}

/* Tablet: three even pairs. Five columns is too narrow for the copy here. */
@media (min-width:700px){
  .tiles{grid-template-columns:repeat(12,1fr)}
  .tile{grid-column:span 6}
  .tile img{aspect-ratio:16/10}
}

/* Desktop: every pair splits at a different column, 7 then 5 then 8, so no
   two rows share a seam. */
@media (min-width:1040px){
  .tile--a{grid-column:span 7}
  .tile--b{grid-column:span 5}
  .tile--c{grid-column:span 5}
  .tile--d{grid-column:span 7}
  .tile--e{grid-column:span 8}
  .tile--f{grid-column:span 4}
  .tile--a img,.tile--d img,.tile--e img{aspect-ratio:16/9}
  .tile--f img{aspect-ratio:4/3}
}

/* =========================================================================
   REVIEWS
   ========================================================================= */

.reviews{
  display:grid;gap:12px;margin-top:clamp(26px,3vw,40px);
  grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews::-webkit-scrollbar{display:none}
.review{
  display:flex;flex-direction:column;scroll-snap-align:start;
  background:var(--bg);border:1px solid var(--line);border-radius:3px;
  padding:clamp(20px,2.4vw,28px);
}
.review:nth-child(2){transition-delay:.07s}
.review:nth-child(3){transition-delay:.14s}

.stars{display:flex;gap:3px;margin-bottom:16px}
.star{width:15px;height:15px;fill:var(--red);flex:none}

.review__q{
  margin:0;flex:1;
  font-size:clamp(1rem,.95rem + .28vw,1.12rem);line-height:1.5;
}
.review__q::before{content:"\201C"}
.review__q::after{content:"\201D"}
.review__by{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

.rvh__cta{margin-top:16px;opacity:0;transition:opacity .7s ease .5s}
.rvh.in .rvh__cta{opacity:1}
.lnk{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);
  padding-bottom:3px;border-bottom:1px solid var(--line-2);
}
.lnk:hover{color:var(--red);border-bottom-color:var(--red)}

.rvcar__ui{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;
}
.rvcar__count{color:var(--mut)}
.rvcar__nav{display:flex;gap:8px;margin-left:auto}
.rvcar__btn{
  display:grid;place-items:center;width:42px;height:42px;
  border:1.5px solid var(--line-2);border-radius:2px;color:var(--ink);
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.rvcar__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rvcar__btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.rvcar__btn:disabled{opacity:.3;cursor:default}

@media (min-width:760px){.reviews{grid-auto-columns:calc((100% - 24px)/3)}}

/* =========================================================================
   VISIT
   ========================================================================= */

.visit{display:grid;gap:clamp(34px,4vw,64px)}
.visit__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.data dt{padding-top:14px;border-top:1px solid var(--line)}
.data dd{padding:4px 0 18px}
.data dd a:hover{color:var(--red)}
.data .row{display:flex;justify-content:space-between;gap:20px;max-width:22rem;padding:2px 0}
.data .row--off{color:var(--mut)}
@media (min-width:900px){.visit{grid-template-columns:1.1fr .9fr;align-items:start}}

.map{
  margin-top:clamp(28px,3vw,42px);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;background:var(--card);
}
.map iframe{
  display:block;width:100%;height:clamp(240px,32vw,380px);border:0;
  filter:grayscale(1) contrast(1.04);transition:filter .5s ease;
}
.map:hover iframe{filter:none}

/* =========================================================================
   FOOTER
   ========================================================================= */

.foot{background:var(--red);color:#fff;margin-top:clamp(30px,3.5vw,52px)}
.foot a:hover{opacity:.74}
.foot__in{display:grid;gap:34px;padding-block:clamp(44px,5vw,72px) clamp(28px,3vw,44px)}
.foot__logo{width:min(64vw,190px);height:auto;filter:brightness(0) invert(1)}
.foot__line{
  margin-top:16px;font-family:var(--f-disp);font-variation-settings:var(--sign-6);
  font-size:clamp(1rem,.9rem + .5vw,1.25rem);text-transform:uppercase;line-height:1.2;letter-spacing:.02em;
}
.foot__nav{display:flex;flex-direction:column;gap:9px}
.foot__meta{display:flex;flex-direction:column;gap:9px}
.foot__meta .mono{color:rgba(255,255,255,.74)}
.foot__tel{font-family:var(--f-disp);font-variation-settings:var(--sign-6);font-size:1.1rem;letter-spacing:.03em}
.foot__social{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.foot__social a{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,.4);
}
.foot__social a:hover{border-bottom-color:#fff;opacity:1}
.foot__creds{padding-bottom:clamp(24px,3vw,36px)}
.foot__marks{
  display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,30px);
  background:#fff;border-radius:3px;padding:12px 18px;
}
.foot__marks img{height:38px;width:auto;object-fit:contain}
.foot__marks-caa{height:48px}

.foot__bar{
  border-top:1px solid rgba(255,255,255,.3);
  padding-block:14px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}
.foot__bar .mono{color:rgba(255,255,255,.74)}
.foot__bar-end{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.foot__bar a.mono{
  border-bottom:1px solid rgba(255,255,255,.38);padding-bottom:2px;
}
.foot__bar a.mono:hover{color:#fff;border-bottom-color:#fff;opacity:1}
.foot__k{color:rgba(255,255,255,.66);margin-bottom:10px}
.foot__area-list{display:flex;flex-wrap:wrap;font-size:.875rem;color:rgba(255,255,255,.86)}
.foot__area-list li{display:flex;align-items:center;white-space:nowrap;line-height:1.75}
.foot__area-list li::after{content:"\00b7";margin:0 .5em;color:rgba(255,255,255,.45)}
.foot__area-list li:last-child::after{content:none}

@media (min-width:820px){.foot__in{grid-template-columns:1fr 1fr;gap:40px}}
@media (min-width:1080px){.foot__in{grid-template-columns:1.05fr .82fr .9fr 1.06fr;gap:clamp(26px,2.6vw,40px)}}

/* =========================================================================
   SERVICE PAGES
   The hero reuses .stage, just shorter and without the hours panel. Below it
   the detail blocks alternate sides so the seam between photo and copy keeps
   moving down the page, the same rhythm as the work tiles.
   ========================================================================= */

/* Taller than it first was. These photographs are about 3:2 and the hero is
   much wider than that, so a short band cropped the heads off people. */
.stage--page{min-height:clamp(340px,50vh,520px)}
/* Each page names the point of its photo worth keeping, since the crop is
   vertical and what matters sits at a different height in every shot. */
.stage--page .stage__poster{object-position:var(--focus,50% 50%)}
/* A page hero is shorter than the home one, so the copy sits higher up the
   photograph. Wash the left side down hard rather than trusting each image. */
.stage--page::after{
  background:
    linear-gradient(100deg,rgba(6,7,8,.93) 0%,rgba(6,7,8,.76) 30%,
                           rgba(6,7,8,.34) 60%,rgba(6,7,8,.04) 88%),
    linear-gradient(to top,rgba(6,7,8,.5) 0%,rgba(6,7,8,.1) 52%,rgba(6,7,8,0) 80%);
}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;color:rgba(255,255,255,.78)}
.crumb a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.crumb a:hover{color:#fff;border-bottom-color:#fff}
.crumb i{font-style:normal;color:rgba(255,255,255,.5)}

/* ---------- alternating detail blocks ---------- */

.alt{display:grid;gap:clamp(22px,3vw,40px);margin-top:clamp(38px,4.4vw,68px)}
.alt:first-of-type{margin-top:clamp(30px,3.4vw,48px)}

.alt__media{position:relative;overflow:hidden;border-radius:3px;background:var(--ink)}
.alt__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.alt__t{
  font-family:var(--f-disp);font-variation-settings:var(--sign);
  font-size:clamp(1.3rem,1.05rem + .9vw,1.85rem);
  line-height:1;text-transform:uppercase;letter-spacing:.008em;
}
.alt__body>.mono{margin-bottom:12px}
.alt__p{margin-top:14px;color:var(--mut);max-width:52ch}

@media (min-width:900px){
  .alt{grid-template-columns:repeat(12,1fr);gap:clamp(28px,3.2vw,54px);align-items:center}
  /* both children are pinned to the one row: on a flipped block the photo is
     placed to the right of the copy, and auto placement would otherwise push
     the copy down onto a row of its own */
  .alt__media,.alt__body{grid-row:1}
  .alt__media{grid-column:1 / span 7}
  .alt__body {grid-column:8 / span 5}
  .alt--flip .alt__media{grid-column:6 / span 7}
  .alt--flip .alt__body {grid-column:1 / span 5}
  .alt__media img{aspect-ratio:16/10}
}

/* ---------- the actual list of work ---------- */

.spec{margin-top:22px;border-top:1px solid var(--line)}
.spec li{
  position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.spec li::before{
  content:"";position:absolute;left:0;top:1.02em;width:9px;height:2px;background:var(--red);
}
.sec--panel .spec{border-top-color:var(--line)}

/* ---------- closing call to action ---------- */

.cta{
  background:var(--ink);color:#fff;border-radius:3px;
  padding:clamp(26px,3.6vw,52px);display:grid;gap:clamp(20px,2.4vw,30px);
}
.cta__t{
  font-family:var(--f-disp);font-variation-settings:var(--sign);
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);
  line-height:1;text-transform:uppercase;
}
.cta__p{margin-top:12px;color:rgba(255,255,255,.72);max-width:44ch}
.cta__act{display:flex;gap:10px;flex-wrap:wrap;align-content:center}
@media (min-width:820px){
  .cta{grid-template-columns:1fr auto;align-items:center}
}

/* ---------- the other five services ---------- */

.rel{display:grid;gap:10px;margin-top:clamp(24px,2.8vw,36px)}
.rel a{
  display:flex;flex-direction:column;gap:7px;padding:16px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.rel a:hover{border-color:var(--ink);transform:translateY(-2px)}
.rel b{
  font-family:var(--f-disp);font-variation-settings:var(--sign-6);
  font-size:.95rem;text-transform:uppercase;letter-spacing:.02em;
}
.rel span{color:var(--mut);font-size:.85rem;line-height:1.45}
@media (min-width:640px){.rel{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.rel{grid-template-columns:repeat(5,1fr)}}

/* =========================================================================
   PAGE TRANSITION
   Clicking a work tile grows it into the hero of the page it opens.

   The named element is the whole card and the whole hero, not the photograph
   inside them. Naming the inner parts was the obvious thing to try and it is
   wrong: the photograph and the heading each fly in on their own path while
   the hero's own dark box sits there empty waiting for them, so three
   separate things move at once and none of them is the card.

   Named as containers, one box travels and the card's contents cross fade
   into the hero's inside it. The photograph is the same file at both ends,
   which is what sells it.

   Opt in CSS. A browser without cross document view transitions just follows
   the link and gets the page.
   ========================================================================= */

@view-transition{navigation:auto}

.tile[href="/mechanical-repair"],
[data-svc="mechanical-repair"] .stage--page{view-transition-name:vt-mechanical}

.tile[href="/inspections"],
[data-svc="inspections"] .stage--page{view-transition-name:vt-inspections}

.tile[href="/heating-ac"],
[data-svc="heating-ac"] .stage--page{view-transition-name:vt-heating}

.tile[href="/tires-alignment"],
[data-svc="tires-alignment"] .stage--page{view-transition-name:vt-tires}

.tile[href="/insurance-claims"],
[data-svc="insurance-claims"] .stage--page{view-transition-name:vt-insurance}

.tile[href="/autobody-paint"],
[data-svc="autobody-paint"] .stage--page{view-transition-name:vt-autobody}

/* The card and the hero are different shapes, so the snapshot fills the
   travelling box and crops rather than stretching to fit it. Covering makes
   it overflow the box, which without this clip paints the hero outside its
   own frame and across the page. */
::view-transition-group(vt-mechanical),
::view-transition-image-pair(vt-mechanical),
::view-transition-group(vt-inspections),
::view-transition-image-pair(vt-inspections),
::view-transition-group(vt-heating),
::view-transition-image-pair(vt-heating),
::view-transition-group(vt-tires),
::view-transition-image-pair(vt-tires),
::view-transition-group(vt-insurance),
::view-transition-image-pair(vt-insurance),
::view-transition-group(vt-autobody),
::view-transition-image-pair(vt-autobody){
  overflow:clip;
}
::view-transition-old(vt-mechanical),::view-transition-new(vt-mechanical),
::view-transition-old(vt-inspections),::view-transition-new(vt-inspections),
::view-transition-old(vt-heating),::view-transition-new(vt-heating),
::view-transition-old(vt-tires),::view-transition-new(vt-tires),
::view-transition-old(vt-insurance),::view-transition-new(vt-insurance),
::view-transition-old(vt-autobody),::view-transition-new(vt-autobody){
  width:100%;height:100%;object-fit:cover;object-position:left center;
  mix-blend-mode:normal;
}

::view-transition-group(*){
  animation-duration:.7s;
  animation-timing-function:cubic-bezier(.32,.08,.24,1);
}

/* No cross fade inside the travelling box. The card and the hero hold
   different words, so dissolving one through the other is precisely the
   double exposure that reads as several frames at once. The incoming hero is
   shown from the first frame, scaled down into the space the card occupied,
   and the only thing that animates is the box growing. */
::view-transition-old(vt-mechanical),
::view-transition-old(vt-inspections),
::view-transition-old(vt-heating),
::view-transition-old(vt-tires),
::view-transition-old(vt-insurance),
::view-transition-old(vt-autobody){
  animation:none;opacity:0;
}
::view-transition-new(vt-mechanical),
::view-transition-new(vt-inspections),
::view-transition-new(vt-heating),
::view-transition-new(vt-tires),
::view-transition-new(vt-insurance),
::view-transition-new(vt-autobody){
  animation:none;opacity:1;
}

/* The rest of the page swaps quickly underneath. A long cross fade here is
   what makes the whole thing look like several frames at once: two entire
   pages superimposed for half a second while the card is still travelling. */
::view-transition-group(root),
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.15s;
  animation-timing-function:ease-out;
}

/* the header and the grain overlay are identical on both pages. Naming them
   holds them still, and keeps a full viewport noise layer and a sticky bar
   out of the two page sized snapshots the root cross fade composites */
.head{view-transition-name:site-head}
.grain{view-transition-name:site-grain}

/* Never cross fade those two. The header is compact on a scrolled home page
   and full height on a page that opens at the top, so fading one into the
   other prints the logo and the nav twice, half a step apart. Show the
   incoming one only and let the box resize under it. */
::view-transition-old(site-head),::view-transition-old(site-grain){
  animation:none;opacity:0;
}
::view-transition-new(site-head),::view-transition-new(site-grain){
  animation:none;opacity:1;
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv,.card,.stage__sub,.stage__cta,.stage__eyebrow,.rvh .eyebrow,.rvh .lede{opacity:1}
  .stage__h1 .ln__i{transform:none}
  .stage__in::before{transform:scaleX(1)}
  .rvh .h2{clip-path:none}
  .rvh::before{transform:scaleX(1)}
  .tick__row{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
}