/* Mobile Arc: old-school shop.
   Porcelain enamel signs (navy field, gold ring, grommets) are the one loud element.
   Everything else is quiet: concrete-grey walls, enamel-white panels, Franklin Gothic text.
   Bungee is sign lettering, used only for signs and headings. */
:root {
  --navy: #13294b;
  --navy-deep: #0c1c36;
  --orange: #f57c00;
  --orange-text: #a85000;
  --gold: #ffc531;
  --wall: #e2e3de;
  --enamel: #fafaf7;
  --ink: #13294b;
  --ink-2: #4a5466;
  --line: #c7cac2;
  --sign: "Bungee", "Arial Black", Impact, sans-serif;
  --sign-inline: "Bungee Inline", "Bungee", "Arial Black", Impact, sans-serif;
  --body: "Libre Franklin", "Franklin Gothic Medium", "Segoe UI", Arial, sans-serif;
  --wrap: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--body); font-size: 19px; line-height: 1.6; color: var(--ink); background: var(--wall); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--sign); font-weight: 400; line-height: 1.05; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--ink-2); max-width: 34em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.block { padding-block: 76px; }
.block.white { background: var(--enamel); }
@media (max-width: 700px) { .block { padding-block: 52px; } body { font-size: 18px; } }

/* Pinstripe rule: navy line, orange line. Separates the header and footer from the page. */
.pinstripe { height: 9px; background: linear-gradient(var(--navy) 0 4px, transparent 4px 6px, var(--orange) 6px 9px); }

/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--enamel); }
.top .wrap { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand img { width: 48px; height: 48px; }
.brand span { font-family: var(--sign); font-size: 1.35rem; line-height: 1; }
.brand small { display: block; font-family: var(--body); font-weight: 600; font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
.nav { margin-left: auto; display: flex; gap: 6px 24px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 1rem; padding: 6px 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current=page] { border-bottom-color: var(--orange); }
.nav .btn { border: 0; padding: 12px 18px; }
.menu-btn { display: none; }
@media (max-width: 920px) {
  .menu-btn { display: inline-flex; margin-left: auto; align-items: center; gap: 8px; font: 700 1rem var(--body); color: var(--navy); background: none; border: 2px solid var(--navy); border-radius: 6px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--enamel); flex-direction: column; align-items: stretch; gap: 0; padding: 8px max(20px, env(safe-area-inset-right, 0px)) 18px max(20px, env(safe-area-inset-left, 0px)); box-shadow: 0 10px 20px rgba(19,41,75,.15); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 12px; justify-content: center; }
  .brand small { display: none; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; font-family: var(--sign); font-size: 1.05rem; line-height: 1; text-decoration: none; border: 3px solid var(--navy); border-radius: 8px; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.btn-orange { background: var(--orange); color: var(--navy-deep); border-color: var(--orange); }
.btn-orange:hover { background: var(--gold); border-color: var(--gold); }
.btn-plain { background: transparent; color: var(--navy); }
.btn-plain:hover { background: var(--navy); color: #fff; }
.on-navy .btn-plain { color: #fff; border-color: #fff; }
.on-navy .btn-plain:hover { background: #fff; color: var(--navy); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Porcelain enamel sign ---------- */
.enamel {
  position: relative; background: var(--navy); color: #fff; border-radius: 22px; padding: 34px;
  box-shadow: inset 0 0 0 7px var(--navy), inset 0 0 0 10px var(--gold), 0 3px 0 rgba(0,0,0,.25), 0 22px 40px rgba(19,41,75,.28);
}
.enamel .grommet { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--wall); box-shadow: inset 0 2px 3px rgba(0,0,0,.45), 0 0 0 3px #9aa3ad; }
.enamel .g1 { top: 20px; left: 20px; } .enamel .g2 { top: 20px; right: 20px; }
.enamel .g3 { bottom: 20px; left: 20px; } .enamel .g4 { bottom: 20px; right: 20px; }

/* ---------- Home hero ---------- */
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 64px 72px; }
.shop-sign { text-align: center; padding: 48px 38px 40px; transform: rotate(-1.5deg); }
.shop-sign img { width: 92px; height: 92px; margin: 0 auto 14px; }
.shop-sign .name { font-family: var(--sign-inline); font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .95; color: #fff; display: block; }
.shop-sign .trade { display: block; font-family: var(--sign); color: var(--gold); font-size: clamp(1rem, 2vw, 1.3rem); margin-top: 12px; }
.shop-sign .since { display: inline-block; margin-top: 22px; background: var(--orange); color: var(--navy-deep); font-family: var(--sign); font-size: 1.05rem; padding: 8px 18px; border-radius: 4px; }
.shop-sign .tel { display: block; margin-top: 18px; font-family: var(--sign); font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; text-decoration: none; }
.hero h1 { color: var(--navy); }
.hero .lead { margin-bottom: 28px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 56px; } .shop-sign { transform: none; max-width: 520px; width: 100%; margin: 0 auto; } }

/* ---------- Steps (a real sequence) ---------- */
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 4px solid var(--navy); padding-top: 16px; }
.steps li::before { content: counter(s); font-family: var(--sign); font-size: 2.2rem; color: var(--orange); line-height: 1; display: block; margin-bottom: 8px; }
.steps b { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.steps span { color: var(--ink-2); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Brands ---------- */
.brands { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0; margin-top: 28px; border: 3px solid var(--navy); border-radius: 10px; overflow: hidden; background: var(--enamel); }
.brands div { padding: 22px 20px; border-left: 3px solid var(--navy); }
.brands div:first-child { border-left: 0; background: var(--navy); color: #fff; }
.brands b { font-family: var(--sign); font-size: 1.6rem; display: block; line-height: 1.1; }
.brands div:first-child b { font-size: 2.2rem; color: var(--gold); }
.brands span { font-size: .98rem; color: var(--ink-2); }
.brands div:first-child span { color: #d5dce6; }
@media (max-width: 800px) { .brands { grid-template-columns: 1fr 1fr; } .brands div:first-child { grid-column: 1 / -1; } .brands div { border-left: 0; border-top: 3px solid var(--navy); } .brands div:first-child { border-top: 0; } .brands div:nth-child(3), .brands div:nth-child(4) ~ div { border-left: 3px solid var(--navy); } }
.kinds { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 700; }
.kinds li::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--orange); border-radius: 50%; margin-right: 10px; vertical-align: 2px; }

/* ---------- Split rows (photo + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split img { width: 100%; border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; }
.split img.tall { aspect-ratio: 4/5; object-position: top; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } .split.flip > :first-child { order: 0; } }

/* ---------- Hours sign + visit ---------- */
.visit { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.hours-sign { padding: 40px 34px 34px; }
.hours-sign h2 { color: var(--gold); font-family: var(--sign-inline); text-align: center; margin-bottom: 18px; }
.hours-sign table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.hours-sign td { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.hours-sign td:last-child { text-align: right; font-weight: 700; }
.hours-sign tr.closed td { color: #a9b6c8; }
.hours-sign p { margin: 18px 0 0; text-align: center; color: #d5dce6; font-size: .98rem; }
.towns { list-style: none; padding: 0; margin: 18px 0 26px; columns: 2; column-gap: 32px; font-weight: 600; }
.towns li { padding: 6px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.towns li.home { color: var(--orange-text); }
address { font-style: normal; line-height: 1.7; }
.big-tel { font-family: var(--sign); font-size: 1.8rem; color: var(--navy); text-decoration: none; display: inline-block; margin: 6px 0; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; gap: 36px; } .hours-sign { max-width: 520px; } }

/* ---------- Page header (inner pages) ---------- */
.page-top .wrap { padding-block: 54px 10px; }
.page-top .lead { margin-bottom: 0; }

/* ---------- Services page ---------- */
.svc { display: grid; grid-template-columns: 15rem 1fr; gap: 28px; padding-block: 30px; border-top: 3px solid var(--navy); }
.svc:last-of-type { border-bottom: 3px solid var(--navy); }
.svc h2 { font-size: 1.5rem; margin: 0; }
.svc ul { margin: 8px 0 0; padding-left: 1.2em; }
.svc li { margin-bottom: 4px; }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; gap: 8px; } }
.symptoms { columns: 2; column-gap: 40px; padding-left: 1.2em; margin: 18px 0 0; }
.symptoms li { margin-bottom: 8px; break-inside: avoid; }
@media (max-width: 600px) { .symptoms { columns: 1; } }
.not-list { margin-top: 30px; padding: 20px 22px; border: 2px dashed var(--navy); border-radius: 10px; background: var(--enamel); }

/* ---------- About page ---------- */
.portrait { margin: 0; position: relative; }
.portrait img { width: 100%; border-radius: 14px; aspect-ratio: 3/4; object-fit: cover; object-position: top; box-shadow: 0 0 0 8px var(--enamel), 0 0 0 11px var(--navy); }
.portrait figcaption { margin-top: 22px; font-weight: 700; }
.history { list-style: none; padding: 0; margin: 26px 0 0; border-left: 4px solid var(--orange); }
.history li { padding: 0 0 18px 22px; position: relative; }
.history li::before { content: ""; position: absolute; left: -11px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 3px solid var(--wall); }
.history b { display: block; }
.quote { font-size: 1.28rem; line-height: 1.5; border-left: 0; margin: 0 0 22px; font-weight: 600; }

/* ---------- Booking form ---------- */
.book-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
.ticket { background: var(--enamel); border-radius: 12px; border: 3px solid var(--navy); overflow: hidden; }
.ticket-head { background: var(--navy); color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ticket-head b { font-family: var(--sign); font-weight: 400; font-size: 1.2rem; }
.ticket-head span { color: var(--gold); font-weight: 600; font-size: .95rem; }
form.request { padding: 26px 24px 30px; display: grid; gap: 24px; }
@media (max-width: 600px) { form.request { padding: 22px 16px 26px; } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend, .f { display: block; font-weight: 800; font-size: 1.05rem; margin-bottom: 10px; padding: 0; }
legend em, .f em { font-style: normal; font-weight: 400; color: var(--ink-2); font-size: .95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border: 2px solid var(--navy); border-radius: 8px; font-weight: 600; background: #fff; user-select: none; transition: background-color .15s ease, color .15s ease; }
.chip input:checked + span { background: var(--navy); color: #fff; }
.chip input:checked + span::before { content: "\2713"; color: var(--gold); font-weight: 900; margin-right: 8px; }
.chip input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 12px 14px; min-height: 48px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field textarea { min-height: 110px; resize: vertical; }
.field .err-text { color: #a12a1a; font-size: .95rem; margin-top: 6px; display: none; }
.field.bad input, .field.bad textarea { border-color: #a12a1a; }
.field.bad .err-text { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: 14px 16px; border-radius: 8px; font-weight: 700; display: none; }
.form-msg.ok { display: block; background: #e3f2e8; color: #1d6537; }
.form-msg.err { display: block; background: #fbe9e7; color: #a12a1a; }
.aside-card { background: var(--enamel); border-radius: 12px; padding: 24px; border: 2px solid var(--line); }
.aside-card h3 { margin-bottom: 10px; }

/* ---------- For Sale page ---------- */
.shop-section { margin-bottom: 56px; }
.shop-section > h2 { padding-bottom: 12px; border-bottom: 3px solid var(--navy); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 26px; }
.item { background: var(--enamel); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--line); }
.item .ph { aspect-ratio: 4/3; background: #d4d6d0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); font-weight: 600; }
.item .ph img { width: 100%; height: 100%; object-fit: cover; }
.item .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.item h3 { font-family: var(--body); font-weight: 800; font-size: 1.2rem; margin: 0; line-height: 1.25; }
.item .price { align-self: flex-start; font-family: var(--sign); font-size: 1.5rem; color: var(--navy); border: 3px solid var(--navy); border-radius: 6px; padding: 4px 12px 2px; font-variant-numeric: tabular-nums; }
.item .desc { color: var(--ink-2); font-size: 1rem; margin: 0; flex: 1; }
.item .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.item .btn { font-size: .92rem; padding: 10px 16px; min-height: 44px; }
.tag { align-self: flex-start; background: var(--orange); color: var(--navy-deep); font-weight: 700; font-size: .85rem; padding: 3px 10px; border-radius: 4px; }
.note { background: var(--enamel); border-left: 6px solid var(--orange); padding: 16px 18px; border-radius: 0 8px 8px 0; font-size: 1rem; }
.loading { color: var(--ink-2); }

/* ---------- Footer + phone call bar ---------- */
footer { background: var(--navy); color: #d5dce6; font-size: .98rem; }
footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding-block: 44px 40px; }
footer h3 { color: var(--gold); font-size: 1.05rem; margin-bottom: 10px; }
footer a { color: #fff; }
footer .tel { font-family: var(--sign); font-size: 1.4rem; color: #fff; text-decoration: none; }
footer .credit { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; font-size: .9rem; color: #a9b6c8; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 800px) { footer .wrap { grid-template-columns: 1fr; gap: 24px; padding-bottom: 100px; } }
.callbar { display: none; }
@media (max-width: 700px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--navy); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 14px rgba(0,0,0,.2); }
  .callbar a { min-height: 56px; display: flex; align-items: center; justify-content: center; font-family: var(--sign); font-size: 1.05rem; text-decoration: none; color: var(--navy-deep); background: var(--orange); }
  .callbar a + a { background: var(--navy); color: #fff; }
}

/* ---------- Stats strip (home, under the hero) ---------- */
.stats { background: var(--navy); color: #fff; border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); }
.stats ul { list-style: none; margin: 0; padding: 40px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stats li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stats svg { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stats b { font-family: var(--sign); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: #fff; }
.stats span { color: #d5dce6; font-weight: 600; font-size: .98rem; max-width: 14em; }
.stats .stars { text-align: center; margin: -10px 0 0; padding-bottom: 30px; font-weight: 700; }
.stats .stars span { color: var(--gold); letter-spacing: 3px; margin-right: 8px; }
@media (max-width: 800px) { .stats ul { grid-template-columns: 1fr 1fr; gap: 30px 16px; padding: 32px 0; } }

/* ---------- Photo hero that stays put while the page slides over it ---------- */
.hero-photo { position: relative; color: #fff; overflow: hidden; background: var(--navy-deep); }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(12,28,54,.55) 0%, rgba(12,28,54,.72) 45%, rgba(12,28,54,.92) 100%), url("img/hero-shop.webp") center / cover no-repeat;
}
.hero-photo .wrap { position: relative; z-index: 1; padding-block: 88px 96px; }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-photo .lead { color: #dfe5ee; }
.hero-photo .btn-plain { color: #fff; border-color: #fff; }
.hero-photo .btn-plain:hover { background: #fff; color: var(--navy); }
.hero-photo .enamel { box-shadow: inset 0 0 0 7px var(--navy), inset 0 0 0 10px var(--gold), 0 3px 0 rgba(0,0,0,.25), 0 26px 50px rgba(0,0,0,.5); }
.over { position: relative; z-index: 2; background: var(--wall); box-shadow: 0 -18px 40px rgba(0,0,0,.35); }

/* Only pin it where the whole hero fits on screen; on phones it scrolls normally. */
@media (min-width: 901px) and (min-height: 600px) {
  .hero-photo { position: sticky; top: 0; z-index: 1; min-height: calc(100vh - 83px); display: flex; align-items: center; }
  .hero-photo > .wrap { width: 100%; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* As the next section slides up over it, the hero dims and drifts back a little.
         Driven by the covering section, because a pinned element never "leaves" the screen. */
      main { timeline-scope: --cover; }
      .over { view-timeline: --cover block; }
      .hero-bg { animation: hero-recede linear both; animation-timeline: --cover; animation-range: entry 0% entry 100%; }
      .hero-photo .wrap { animation: hero-fade linear both; animation-timeline: --cover; animation-range: entry 0% entry 80%; }
    }
  }
}
@keyframes hero-recede { to { transform: scale(1.08); filter: brightness(.45); } }
@keyframes hero-fade { to { opacity: .15; transform: translateY(-40px); } }

/* ---------- Reviews (home) ---------- */
.reviews { background: var(--navy-deep); color: #fff; }
.reviews h2 { color: #fff; }
.reviews .lead { color: #d5dce6; font-weight: 700; }
.reviews .gold { color: var(--gold); letter-spacing: 3px; margin-right: 8px; }
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.tickets figure { margin: 0; background: var(--enamel); color: var(--ink); border-radius: 6px; padding: 26px 24px 22px; border-top: 6px solid var(--orange); display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.tickets blockquote { margin: 0 0 18px; font-size: 1.02rem; line-height: 1.55; flex: 1; }
.tickets blockquote::before { content: "\201C"; display: block; font-family: var(--sign); font-size: 2.6rem; line-height: .8; color: var(--orange); margin-bottom: 4px; }
.tickets figcaption { font-weight: 800; color: var(--navy); }
.tickets figcaption::before { content: "\2605\2605\2605\2605\2605"; display: block; color: var(--orange); letter-spacing: 2px; font-size: .9rem; margin-bottom: 2px; }
.reviews .more { margin: 30px 0 0; }
.reviews .more a { color: var(--gold); font-weight: 700; }
@media (max-width: 900px) { .tickets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tickets { grid-template-columns: 1fr; } }

/* ---------- Scroll cue + peek (desktop pinned hero) ---------- */
.scroll-cue { display: none; }
@media (min-width: 901px) and (min-height: 600px) {
  .hero-photo { min-height: calc(100vh - 83px - 88px); }
  .scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 2px; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1; color: #fff; text-decoration: none; font: 700 .85rem var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
  .scroll-cue:hover { color: var(--gold); opacity: 1; }
  .scroll-cue svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: no-preference) { .scroll-cue svg { animation: cue-bob 1.6s ease-in-out infinite; } html { scroll-behavior: smooth; } }
}
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
#more { scroll-margin-top: 83px; }
/* Fit the pinned hero on short laptop screens (1366x768 and up) */
@media (min-width: 901px) and (min-height: 600px) {
  .hero-photo .wrap { padding-block: 40px 84px; }
  .hero-photo h1 { font-size: min(clamp(2.3rem, 5.6vw, 3.9rem), 6.2vh); }
  .hero-photo .shop-sign { padding: min(48px, 4vh) 38px min(40px, 3.5vh); }
  .hero-photo .shop-sign img { width: min(92px, 9vh); height: min(92px, 9vh); }
}
/* Mid-width or zoomed-in screens (for example 1366x768 at 150% scaling): keep the sign and headline side by side */
@media (min-width: 700px) and (max-width: 900px) {
  .hero .wrap { grid-template-columns: .9fr 1.1fr; gap: 32px; padding-block: 36px 44px; }
  .shop-sign { transform: rotate(-1.5deg); padding: 30px 22px 26px; }
  .shop-sign img { width: 64px; height: 64px; margin-bottom: 8px; }
  .shop-sign .name { font-size: 2.3rem; }
  .shop-sign .trade { font-size: .9rem; }
  .shop-sign .since { font-size: .85rem; padding: 6px 12px; margin-top: 14px; }
  .shop-sign .tel { font-size: 1.3rem; margin-top: 12px; }
  .hero h1 { font-size: 2rem; }
  .hero .lead { font-size: 1rem; margin-bottom: 18px; }
  .hero .actions .btn { padding: 12px 16px; font-size: .95rem; }
}
/* Bigger tap targets for text links on phones */
@media (max-width: 800px) {
  footer a, .block p > a:not(.btn), .visit > div > a:not(.big-tel), .reviews .more a { display: inline-block; padding-block: 11px; }
  footer .tel, .big-tel { padding-block: 6px; }
  footer .credit a { padding-block: 12px; }
}
/* Phones: headline and buttons first, compact sign under them, shorter reviews list */
@media (max-width: 699px) {
  .hero-photo .wrap { padding-block: 32px 44px; gap: 30px; }
  .hero-photo .shop-sign { order: 2; padding: 26px 20px 24px; }
  .hero-photo .shop-sign img { width: 60px; height: 60px; margin-bottom: 8px; }
  .hero-photo .shop-sign .name { font-size: 2.3rem; }
  .hero-photo .shop-sign .since { margin-top: 14px; font-size: .9rem; }
  .hero-photo h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .tickets figure:nth-child(n+5) { display: none; }
}

/* =========================================================
   Old-school shop details. Enamel signs stay rare (hero sign, hours sign).
   Everything else borrows from the rest of a shop: pegboard, paper work
   orders, masking tape, manila price tags, a clipboard, stamped steel.
   ========================================================= */
:root { --type: "Special Elite", "Courier New", Courier, monospace; --kraft: #c8a26b; --paper: #fbf7ea; --tape: rgba(236, 222, 170, .88); --stamp: #c2410c; }

/* Faint concrete grain on the wall color */
body { 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Buttons: hard drop shadow that presses in, like a shop counter bell */
.btn { box-shadow: 4px 4px 0 var(--navy-deep); transition: background-color .15s ease, color .15s ease, transform .08s ease, box-shadow .08s ease; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy-deep); }
.hero-photo .btn { box-shadow: 4px 4px 0 rgba(0,0,0,.55); }

/* Section headings: the header's navy and orange pinstripe, short */
.block > .wrap > h2::after, .block .split h2::after, .page-top h1::after {
  content: ""; display: block; width: 92px; height: 9px; margin-top: 14px;
  background: linear-gradient(var(--navy) 0 4px, transparent 4px 6px, var(--orange) 6px 9px);
}
.reviews > .wrap > h2::after { background: linear-gradient(var(--gold) 0 4px, transparent 4px 6px, var(--orange) 6px 9px); }

/* Steps: stenciled numbers, spray-paint orange */
.steps li::before { font-family: var(--sign); font-size: 3rem; color: transparent; -webkit-text-stroke: 0; background: var(--orange); -webkit-background-clip: text; background-clip: text; letter-spacing: .04em; text-shadow: none; }
.steps li { border-top: 4px dashed var(--navy); }

/* Stats band: stamped steel plate with rivets */
.stats { position: relative; background: linear-gradient(180deg, #17315a, var(--navy) 40%, #0f2342); }
.stats::before, .stats::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle, #c9d0d8 0 2.5px, #6d7886 3px 4px, transparent 4.5px) 0 0 / 46px 12px repeat-x; opacity: .75; }
.stats::before { top: 8px; } .stats::after { bottom: 8px; }

/* Brands: hung on a pegboard wall */
.pegboard {
  background:
    radial-gradient(circle, rgba(60,40,15,.55) 0 3px, transparent 3.5px) 0 0 / 30px 30px,
    linear-gradient(180deg, #d4b483, var(--kraft));
  border-block: 6px solid #9c7a48;
}
.pegboard .lead, .pegboard .kinds { color: var(--navy-deep); }
.pegboard .brands { box-shadow: 0 14px 26px rgba(60,40,15,.35); }
.pegboard p > a { color: var(--navy-deep); font-weight: 700; }
.pegboard .kinds li { background: var(--paper); padding: 6px 12px; border-radius: 3px; box-shadow: 0 2px 0 rgba(60,40,15,.35); }

/* Photos: taped to the wall */
.taped { display: block; position: relative; padding: 10px 10px 34px; background: #fff; box-shadow: 0 12px 26px rgba(19,41,75,.25); transform: rotate(-1.2deg); }
.split.flip .taped, .taped:nth-of-type(even) { transform: rotate(1deg); }
.taped img { border-radius: 2px !important; box-shadow: none !important; border: 0 !important; }
.taped::before, .taped::after { content: ""; position: absolute; width: 110px; height: 30px; background: var(--tape); box-shadow: 0 1px 2px rgba(0,0,0,.15); top: -12px; }
.taped::before { left: -18px; transform: rotate(-32deg); }
.taped::after { right: -18px; transform: rotate(32deg); }
.portrait img { box-shadow: 0 0 0 10px #fff, 0 0 0 11px #ddd, 0 16px 30px rgba(19,41,75,.25); border-radius: 2px; }
.portrait { transform: rotate(-1deg); }
.portrait::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -22px; width: 130px; height: 32px; margin-left: -65px; background: var(--tape); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.portrait figcaption { font-family: var(--type); font-weight: 400; }

/* Reviews: carbon-copy work orders */
.tickets figure {
  position: relative; border-top: 0; border-radius: 2px; padding: 0 0 22px; overflow: hidden;
  background: repeating-linear-gradient(var(--paper) 0 31px, #d9e3ee 31px 32px) 0 66px / 100% 100% no-repeat, var(--paper);
  box-shadow: 0 2px 0 rgba(0,0,0,.25), 0 14px 26px rgba(0,0,0,.35);
}
.tickets figure:nth-child(3n+1) { transform: rotate(-.7deg); }
.tickets figure:nth-child(3n+2) { transform: rotate(.5deg); }
.tickets figure:nth-child(3n) { transform: rotate(-.2deg); }
.tickets figure::before {
  content: "MOBILE ARC \00B7  WORK ORDER"; display: block; background: var(--navy); color: var(--gold);
  font-family: var(--sign); font-size: .82rem; letter-spacing: .06em; padding: 10px 18px; margin-bottom: 18px;
  border-bottom: 3px dashed var(--orange);
}
.tickets blockquote { font-family: var(--type); font-size: 1.02rem; line-height: 32px; padding: 0 20px; margin: 0 0 12px; color: #26324a; }
.tickets blockquote::before { content: "Notes:"; display: block; font-family: var(--body); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0; line-height: 1.4; }
.tickets figcaption { padding: 0 20px; font-family: var(--type); font-weight: 400; font-size: 1.05rem; color: var(--navy); }
.tickets figcaption::before { content: "Customer:"; display: inline; font-family: var(--body); font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: 8px; letter-spacing: .1em; }
.tickets figcaption::after {
  content: "\2605\2605\2605\2605\2605"; position: absolute; right: 16px; bottom: 16px; color: var(--stamp);
  font-size: .95rem; letter-spacing: 2px; padding: 4px 8px; border: 2px solid var(--stamp); border-radius: 4px;
  transform: rotate(-8deg); opacity: .8;
}

/* For Sale: manila price tags on a string */
.item { border: 2px solid var(--line); }
.item .price {
  position: relative; border: 0; border-radius: 4px 14px 14px 4px; background: #e9cf96; color: var(--navy-deep);
  padding: 6px 16px 4px 30px; box-shadow: 2px 3px 0 rgba(60,40,15,.3); transform: rotate(-2deg);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.item .price::before { content: ""; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--enamel); box-shadow: inset 0 0 0 2px #b8955a; }

/* Booking form: on a clipboard */
.ticket { position: relative; overflow: visible; border: 0; background: var(--paper); border-radius: 4px; box-shadow: 0 0 0 16px #8a6a3d, 0 0 0 17px #6e532d, 0 22px 36px rgba(60,40,15,.35); margin: 30px 16px 16px; }
.ticket::before { content: ""; position: absolute; left: 50%; top: -34px; width: 150px; height: 46px; margin-left: -75px; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #e8ebee, #9aa3ad 60%, #7d8692); box-shadow: 0 3px 4px rgba(0,0,0,.35); z-index: 2; }
.ticket-head { border-radius: 4px 4px 0 0; padding-top: 22px; }
.ticket-head b::before { content: "Work order: "; color: var(--gold); }
@media (max-width: 600px) { .ticket { margin-inline: 10px; box-shadow: 0 0 0 10px #8a6a3d, 0 0 0 11px #6e532d, 0 16px 28px rgba(60,40,15,.35); } }

/* Services list: shop labels from a label maker */
.svc h2 { display: inline-block; align-self: start; background: var(--navy); color: #fff; font-size: 1.15rem; padding: 8px 12px 6px; border-radius: 3px; letter-spacing: .04em; box-shadow: 2px 2px 0 rgba(0,0,0,.2); }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
.pegboard { background: radial-gradient(circle, rgba(60,40,15,.32) 0 3px, transparent 3.5px) 0 0 / 32px 32px, linear-gradient(180deg, #d4b483, var(--kraft)); }
.pegboard .lead, .pegboard p > a { display: inline-block; background: var(--paper); padding: 6px 14px; border-radius: 3px; box-shadow: 0 2px 0 rgba(60,40,15,.35); }
main { overflow-x: clip; }

/* Footer credit with the Groundwork mark */
footer .credit { align-items: center; }
footer .credit .built { display: inline-flex; align-items: center; gap: 10px; color: #d5dce6; text-decoration: none; font-weight: 600; }
footer .credit .built img { width: 32px; height: auto; opacity: .9; }
footer .credit .built:hover { color: #fff; text-decoration: underline; }
footer .credit .built:hover img { opacity: 1; }
.aside-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
.aside-card h2::after { display: none; }

/* ---------- Links page (/links): one-tap list for cards, QR codes and Facebook ---------- */
.links-page { max-width: 480px; margin: 0 auto; padding: 36px 18px 40px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.links-sign { width: 100%; padding: 30px 22px 24px; transform: rotate(-1deg); }
.links-sign img { width: 72px; height: 72px; margin-bottom: 8px; }
.links-sign .name { font-size: 2.6rem; }
.links-sign .trade { font-size: 1rem; margin-top: 8px; }
.links-sign .where { display: block; margin-top: 12px; color: #d5dce6; font-weight: 600; font-size: .95rem; }
.link-list { width: 100%; display: grid; gap: 14px; }
.lk { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px; background: var(--enamel); color: var(--navy); text-decoration: none; border: 3px solid var(--navy); border-radius: 10px; box-shadow: 4px 4px 0 var(--navy-deep); font-family: var(--sign); font-size: 1.1rem; line-height: 1.15; transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease; }
.lk small { grid-column: 2; font-family: var(--body); font-weight: 600; font-size: .88rem; color: var(--ink-2); letter-spacing: 0; }
.lk .ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); display: grid; place-items: center; }
.lk .ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk:hover { background: #fff; }
.lk:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy-deep); }
.lk:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.lk-main { background: var(--orange); border-color: var(--navy-deep); color: var(--navy-deep); font-size: 1.3rem; }
.lk-main:hover { background: var(--gold); }
.lk-main small { color: var(--navy-deep); }
.lk-main .ic { background: var(--navy-deep); }
.links-hours { margin: 0; text-align: center; font-weight: 700; color: var(--ink-2); font-size: .95rem; }
.links-built { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 10px; }
.links-built img { width: 28px; height: auto; filter: brightness(0) saturate(100%) invert(14%) sepia(39%) saturate(1500%) hue-rotate(195deg); opacity: .8; }
.links-built:hover { color: var(--navy); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .lk:active { transform: none; } }
.pay { width: 100%; text-align: center; }
.pay h2 { font-size: 1.3rem; margin-bottom: 12px; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button.lk { width: 100%; cursor: pointer; text-align: left; }
.lk-pay { grid-template-columns: 36px 1fr; column-gap: 10px; min-height: 60px; padding: 10px 12px; font-size: 1rem; }
.lk-pay .ic { width: 36px; height: 36px; }
.lk-pay .ic b { color: var(--gold); font-family: var(--sign); font-size: 1.1rem; }
.lk-pay small { font-size: .78rem; overflow-wrap: anywhere; }
.pay-note { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); }
@media (max-width: 360px) { .pay-row { grid-template-columns: 1fr; } }
.pay .lk { text-align: left; }
footer .links-link { display: inline-block; margin-top: 8px; color: var(--gold); font-weight: 700; }