:root{
  /* colors taken from the logo and the real storefront */
  --paper:#F8F1E2;   /* warm cream, the logo's background */
  --card:#FFFBF2;    /* the ticket itself */
  --grease:#1E1D1A;  /* shop ink */
  --yellow:#FFC21A;  /* the building / logo outline: fills, never text on cream */
  --maroon:#84060F;  /* the sign / logo letters */
  --teal:#0F9AAE;    /* the logo's small diamond, used once */
  --ink:var(--maroon);
  --rule:#D9CFB8;
  --mute:#5F574A;
  --gutter:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--grease);
  font:400 17px/1.55 "Archivo",system-ui,sans-serif;
  padding-bottom:60px; /* room for the call bar */
}
a{color:inherit}
:focus-visible{outline:3px solid var(--maroon);outline-offset:3px}
.dark :focus-visible,.cta :focus-visible{outline-color:var(--yellow)}
h2{font-weight:800;font-stretch:112%;font-size:30px;line-height:1.1;margin:0 0 20px}

/* ---------- dark top band ---------- */
.dark{background:var(--grease);color:var(--paper);overflow:hidden}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--gutter);max-width:1120px;margin:0 auto;
}
.logo{display:block;width:150px;line-height:0}
.logo img{width:100%;height:auto}
.lang{display:flex;border:2px solid var(--paper)}
.lang button{
  font:600 14px/1 "Archivo",sans-serif;color:var(--paper);background:transparent;
  border:0;padding:9px 11px;cursor:pointer;min-height:40px;
}
.lang button[aria-pressed="true"]{background:var(--paper);color:var(--grease)}

.hero{
  max-width:1120px;margin:0 auto;padding:18px var(--gutter) 48px;
  display:grid;gap:40px;
}
h1{
  font-weight:900;font-stretch:115%;
  font-size:clamp(44px,12.5vw,92px);line-height:.95;letter-spacing:-.01em;
  margin:0 0 16px;max-width:11ch;
}
.lede{font-size:19px;margin:0 0 24px;max-width:34ch;color:#D6D3CA}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  min-height:54px;padding:0 20px;text-decoration:none;
  font:700 17px/1 "Archivo",sans-serif;border:2px solid currentColor;
}
.btn-call{background:var(--yellow);color:var(--grease);border-color:var(--grease);flex:1 1 220px;box-shadow:4px 4px 0 var(--grease)}
.dark .btn-call{box-shadow:4px 4px 0 var(--paper)}
.btn-line{background:transparent;flex:1 1 160px}
.btn:active{transform:translate(2px,2px);box-shadow:none}

/* the ticket */
.ticket-wrap{position:relative;padding:0 6px 0 0}
.ticket{
  position:relative;background:var(--card);color:var(--grease);
  border:2px solid var(--grease);padding:0 0 22px;transform:rotate(-1.5deg);
  box-shadow:8px 8px 0 var(--maroon);
}
.ticket::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:10px;
  background:radial-gradient(circle at 7px 10px,var(--grease) 4px,transparent 4.5px) 0 0/14px 10px repeat-x;
}
.ticket-head{
  display:flex;justify-content:space-between;align-items:baseline;
  background:var(--grease);color:var(--paper);padding:10px 16px;margin:-1px;
  font-weight:700;font-stretch:110%;font-size:15px;border-bottom:4px solid var(--yellow);
}
.ticket-no{font-weight:500;opacity:.8}
.ticket dl{margin:0;padding:4px 16px 0}
.ticket dl div{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule)}
.ticket dl div:last-child{border-bottom:0}
.ticket dt{font-size:14px;color:var(--mute);padding-top:2px}
.ticket dd{margin:0;font-weight:600}
.ticket dd a{text-decoration-thickness:2px;text-underline-offset:3px}
.ticket small{display:block;font-weight:400;font-size:14px;color:var(--mute);margin-top:2px}

/* the one big moment: the stamp lands on the ticket */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.langrow{align-items:center}
.stamp{
  display:inline-flex;margin:4px 0 2px 4px;flex-direction:column;align-items:center;
  padding:6px 12px 8px;border:3px solid var(--ink);outline:1.5px solid var(--ink);outline-offset:3px;
  color:var(--ink);
  transform:rotate(-11deg);
  animation:stamp .55s cubic-bezier(.3,1.6,.5,1) .7s both;
}
.stamp span{font:italic 400 22px/1 "Yellowtail",cursive}
.stamp strong{font-weight:900;font-stretch:120%;font-size:22px;line-height:1;letter-spacing:.06em;text-transform:uppercase}
@keyframes stamp{
  0%{opacity:0;transform:rotate(-4deg) scale(2.2)}
  60%{opacity:1;transform:rotate(-12deg) scale(.94)}
  100%{opacity:1;transform:rotate(-11deg) scale(1)}
}

.hazard{
  height:14px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 16px,var(--grease) 16px 32px);
}

/* ---------- body sections ---------- */
main{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.work,.steps,.visit{padding:44px 0 48px}
.steps,.visit{border-top:3px solid var(--grease)}

.tiles{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr 1fr}
.tiles li{
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:132px;
  background:var(--card);border:2px solid var(--grease);padding:14px;
  box-shadow:4px 4px 0 var(--grease);
  font-weight:700;font-size:18px;line-height:1.2;
}
.tiles svg{width:44px;height:44px;fill:none;stroke:var(--grease);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.tiles svg path:first-child,.tiles svg circle:first-child{fill:rgba(255,194,26,.4)}
.tiles .tile-ask{background:var(--maroon);color:var(--paper);padding:0}
.tiles .tile-ask a{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:14px;text-decoration:none}
.tile-ask span{font-weight:500}
.tile-ask strong{font-size:22px;font-weight:900;font-stretch:110%}

.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px 1fr;align-items:start;counter-increment:s}
.steps li::before{
  content:counter(s);grid-row:span 2;
  font:400 64px/0.9 "Yellowtail",cursive;color:var(--maroon);
  text-shadow:2px 2px 0 var(--yellow);
}
.steps h3{margin:6px 0 2px;font-size:22px;font-weight:800;font-stretch:110%}
.steps p{margin:0;color:var(--mute)}

.address{font-size:24px;font-weight:800;font-stretch:108%;line-height:1.25;margin:0 0 10px}
.visit p{max-width:44ch}
.visit .actions{margin-top:20px}
.visit-body{display:grid;gap:28px}
.map{border:2px solid var(--grease);box-shadow:6px 6px 0 var(--maroon);background:var(--card);line-height:0}
.map iframe{width:100%;height:280px;border:0;filter:grayscale(.35) contrast(1.05)}

/* ---------- big maroon call band ---------- */
.cta{background:var(--maroon);color:var(--paper);border-top:3px solid var(--grease);border-bottom:3px solid var(--grease)}
.cta-in{max-width:1120px;margin:0 auto;padding:44px var(--gutter) 48px}
.cta h2{margin:0 0 6px}
.bignum{
  display:inline-block;text-decoration:none;
  font-weight:900;font-stretch:100%;font-size:clamp(40px,11vw,112px);line-height:1;letter-spacing:-.02em;
  color:var(--yellow);text-shadow:3px 3px 0 var(--grease);
}
.bignum:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.cta p{margin:14px 0 0;font-weight:600}

/* ---------- footer ---------- */
.foot{
  max-width:1120px;margin:0 auto;padding:22px var(--gutter) 28px;
  font-size:14px;color:var(--mute);
}
.foot p{margin:0 0 8px}
.demo{font-weight:600;color:var(--grease)}

/* sticky call bar on phones */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;align-items:center;justify-content:center;gap:.35em;
  min-height:60px;padding:0 var(--gutter) env(safe-area-inset-bottom);
  background:var(--yellow);color:var(--grease);border-top:3px solid var(--grease);
  font:800 18px/1 "Archivo",sans-serif;text-decoration:none;
}

@media (min-width:820px){
  body{padding-bottom:0}
  .callbar{display:none}
  .logo{width:210px}
  .top{padding-top:22px}
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;padding:44px var(--gutter) 84px;gap:56px}
  .tiles{grid-template-columns:repeat(5,1fr)}
  .tiles li{min-height:150px;font-size:18px}
  .steps ol{grid-template-columns:repeat(3,1fr);gap:28px}
  .work,.steps,.visit{padding:64px 0}
  .visit-body{grid-template-columns:1fr 1.2fr;align-items:start}
  .map iframe{height:340px}
  .cta-in{padding:64px var(--gutter)}
}

@media (prefers-reduced-motion:reduce){
  .stamp{animation:none}
  .btn:active{transform:none}
}

/* Spanish headline is longer: scale it down so it doesn't tower */
html[lang="es"] h1{font-size:clamp(38px,10.5vw,74px);max-width:13ch}
@media (min-width:820px){ .tiles svg{width:54px;height:54px} }
@media (min-width:820px){ html[lang="es"] h1{font-size:64px;max-width:none} }

/* trust badges: the shop's own claims */
.badges{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.badges li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;line-height:1.2}
.badges svg{flex:none;width:30px;height:30px;padding:5px;background:var(--yellow);
  fill:none;stroke:var(--grease);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}

/* the real storefront */
.storefront{margin:0;position:relative;background:var(--grease);border-bottom:3px solid var(--grease)}
.storefront img{display:block;width:100%;height:clamp(200px,48vw,440px);object-fit:cover;object-position:40% 30%}
.storefront figcaption{
  position:absolute;left:var(--gutter);bottom:14px;max-width:calc(100% - 32px);
  background:var(--grease);color:var(--paper);padding:8px 12px;font-weight:700;font-size:15px;
  box-shadow:4px 4px 0 var(--maroon);
}

/* mobile mechanic callout */
.mobile-note{
  display:flex;align-items:center;gap:14px;margin:30px 0 0;padding:14px 16px;
  background:var(--card);border:2px solid var(--grease);box-shadow:4px 4px 0 var(--maroon);max-width:640px;
}
.mobile-note svg{flex:none;width:40px;height:40px;fill:none;stroke:var(--grease);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.mobile-note strong{font-weight:800}
@media (min-width:820px){
  .badges{max-width:520px;gap:14px 24px}
  .storefront img{height:380px}
  .storefront figcaption{left:calc(50% - 560px + var(--gutter));bottom:22px;font-size:17px}
}
@media (min-width:820px) and (max-width:1150px){ .storefront figcaption{left:var(--gutter)} }

/* the shop's own slogan, in the logo's script */
.slogan{font:400 clamp(30px,8vw,52px)/1.1 "Yellowtail",cursive;margin:0 0 18px;color:var(--paper);text-shadow:2px 2px 0 var(--grease)}
.near{font-weight:600;margin:0 0 10px}
/* "call and ask" tile spans the full row */
.tiles .tile-ask{grid-column:1/-1;min-height:0}
.tiles .tile-ask a{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* the people: taped photo over the repair order */
.team{
  position:relative;z-index:2;margin:0 0 18px auto;max-width:460px;
  background:#FBFAF6;padding:8px 8px 4px;transform:rotate(2.2deg);
  box-shadow:6px 8px 0 rgba(0,0,0,.45);
}
.team::before{ /* strip of masking tape */
  content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;
  background:rgba(236,222,180,.85);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.team img{display:block;width:100%;height:auto;aspect-ratio:520/238;object-fit:cover}
.team figcaption{font:400 26px/1.3 "Yellowtail",cursive;color:var(--grease);padding:4px 4px 2px}
.ticket{z-index:1}

/* bilingual services band: the one continuous motion */
.marquee{background:var(--yellow);border-bottom:3px solid var(--grease);overflow:hidden;padding:12px 0}
.track{display:flex;width:max-content;animation:roll 38s linear infinite}
.track>div{display:flex;align-items:center;flex:none}
.marquee span{font-weight:900;font-stretch:118%;font-size:24px;line-height:1;white-space:nowrap;color:var(--grease);text-transform:uppercase;padding:0 16px}
.marquee span.en{font-weight:600;text-transform:none;font-stretch:100%}
.marquee i{flex:none;width:12px;height:12px;background:var(--teal);outline:2px solid var(--grease);transform:rotate(45deg)}
@keyframes roll{to{transform:translateX(-50%)}}
@media (min-width:820px){ .marquee span{font-size:30px} .team figcaption{font-size:28px} }
@media (prefers-reduced-motion:reduce){ .track{animation:none} }
@media (min-width:820px){
  .hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  h1{font-size:clamp(56px,5.6vw,72px);max-width:none}
}
.cta .slogan{margin-bottom:28px;color:var(--yellow)}
.cta h2{color:var(--paper)}

/* bigger logo */
.logo{width:190px}
@media (min-width:820px){ .logo{width:280px} }

/* "What we work on": full-width maroon band, like the shop's sign */
html,body{overflow-x:clip}
.work{position:relative;isolation:isolate;color:var(--paper)}
.work::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--maroon);z-index:-1}
.work .tiles li{color:var(--grease)}
.tiles .tile-ask{background:var(--yellow);color:var(--grease)}
.steps{border-top:0}

/* "How it works": full-width yellow band, like the building */
.steps{position:relative;isolation:isolate}
.steps::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--yellow);border-bottom:3px solid var(--grease);z-index:-1}
.steps li::before{text-shadow:2px 2px 0 var(--grease)}
.steps p{color:var(--grease)}
.mobile-note{box-shadow:4px 4px 0 var(--grease)}
.visit{border-top:0}
.steps .mobile-note{margin-top:44px}

/* "Find the shop": full-width near-black band, like the top of the page */
.visit{position:relative;isolation:isolate;color:var(--paper)}
.visit::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--grease);z-index:-1}
.visit .btn-call{box-shadow:4px 4px 0 var(--paper)}
.visit .btn-line{color:var(--paper)}
.map{border-color:var(--paper);box-shadow:6px 6px 0 var(--yellow)}
.visit :focus-visible{outline-color:var(--yellow)}

/* moving services band: pinned to the bottom of the screen at all times
   (phones: sits right on top of the yellow call bar) */
.marquee{
  position:fixed;left:0;right:0;z-index:9;
  bottom:calc(60px + env(safe-area-inset-bottom));
  padding:9px 0;border-top:3px solid var(--grease);border-bottom:0;
}
.marquee span{font-size:19px}
body{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
.callbar{border-top-width:2px}
@media (min-width:820px){
  .marquee{bottom:0;padding:11px 0}
  .marquee span{font-size:24px}
  body{padding-bottom:52px}
}
.marquee span.en{font-weight:900;font-stretch:118%;text-transform:uppercase}

/* top of the hero: live open/closed sign + slogan */
.status{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  padding:8px 14px;border:2px solid var(--paper);font-weight:700;font-size:15px;line-height:1;
}
.status .dot{width:10px;height:10px;border-radius:50%;background:#8C877C;flex:none}
.status.open{border-color:var(--yellow);color:var(--yellow)}
.status.open .dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(255,194,26,.25)}
.kicker{font:400 clamp(26px,7vw,40px)/1.15 "Yellowtail",cursive;color:var(--yellow);margin:0 0 10px;text-shadow:2px 2px 0 var(--maroon)}
@media (min-width:820px){
  .hero{align-items:start}
  .hero-copy{padding-top:28px}
}
/* open = green, like an OPEN sign */
.status.open{border-color:#3BD16F;color:#3BD16F}
.status.open .dot{background:#3BD16F;box-shadow:0 0 0 4px rgba(59,209,111,.25)}

/* leave a review */
.review{padding:52px 0 56px;text-align:center;display:flex;flex-direction:column;align-items:center}
.review h2{margin:14px 0 10px}
.review p{max-width:38ch;margin:0 0 24px;color:var(--mute)}
.review .btn-call{flex:none;padding:0 28px}
.stars{display:flex;gap:6px}
.stars svg{width:34px;height:34px;fill:var(--yellow);stroke:var(--grease);stroke-width:1.6;stroke-linejoin:round}
@media (min-width:820px){ .review{padding:72px 0 76px} .stars svg{width:40px;height:40px} }