@font-face{font-family:"Anton";src:url(fonts/anton-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#041e2f; --bg-2:#0b2a3f; --fg:#e5d9c8; --fg-bright:#f6efe0; --accent:#c22c2b; --on-accent:#f6efe0;
  --line:rgba(229,217,200,.22); --line-strong:rgba(229,217,200,.4);
  --head:"Anton",Impact,"Arial Narrow Bold",sans-serif; --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:max(20px,env(safe-area-inset-left,0px)); --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --breath:6.5s; --depth:0.08;
  color-scheme:dark;
}
html[data-motion="short"]{--breath:3s}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1;font-weight:400;text-wrap:balance}
p,ul,ol,dl{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--on-accent);padding:8px 12px;z-index:100}
.skip:focus{left:var(--gutter)}

/* header */
.top{display:flex;align-items:center;gap:14px;padding:10px var(--gutter-r) 10px var(--gutter);max-width:1240px;margin:0 auto}
.top__brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.top__badge{width:40px;height:40px;border-radius:50%;flex:none}
.top__name{font-family:var(--head);font-size:1.05rem;letter-spacing:.02em;line-height:1.05;color:var(--fg-bright)}
.top__name small{display:block;font-size:.66rem;letter-spacing:.1em;color:var(--fg);opacity:.85}
.top__facts{margin-left:auto;display:none;text-align:right}
.top__hours{display:block;font-size:.82rem;opacity:.85}
.top__phone{font-family:var(--head);font-size:1.45rem;letter-spacing:.02em;text-decoration:none;color:var(--fg-bright);white-space:nowrap}

/* hero: phone composition first */
.hero{position:relative;overflow:hidden}
.hero__art{position:relative;height:40vh;height:clamp(280px,40vh,380px);overflow:hidden}
@supports (height:100svh){.hero__art{height:clamp(280px,40svh,380px)}}
.hero__frame{position:relative;height:100%;aspect-ratio:1792/2240;max-width:100%;margin:0 auto}
/* the picture's edges blend into the page: no poster border, no hard line where the lamp's halo is cropped */
.hero__frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to right,var(--bg),transparent 14%,transparent 86%,var(--bg)),linear-gradient(to bottom,var(--bg),transparent 12%,transparent 88%,var(--bg))}
.nowrap{white-space:nowrap}
.hero__plate{position:absolute;inset:0;will-change:transform}
.hero__plate picture{display:block;position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__glow-scroll{position:absolute;left:var(--lamp-x,50%);top:var(--lamp-y,8.5%);width:0;height:0;opacity:calc((1 - var(--glow-progress,.5)) / .45);pointer-events:none}
.hero__glow{position:absolute;left:0;top:0;width:min(140vw,900px);aspect-ratio:1;transform:translate(-50%,-38%) scale(1);
  background:radial-gradient(closest-side,rgba(194,44,43,.58) 0%,rgba(214,82,62,.30) 18%,rgba(229,217,200,.10) 36%,rgba(4,30,47,0) 62%);
  mix-blend-mode:screen;animation:breathe var(--breath) ease-in-out infinite;will-change:opacity,transform}
@keyframes breathe{0%,100%{opacity:.42;transform:translate(-50%,-38%) scale(.96)}50%{opacity:.92;transform:translate(-50%,-38%) scale(1.05)}}
.hero__copy{position:relative;padding:14px var(--gutter-r) 22px var(--gutter);display:grid;gap:10px}
.hero__h1{font-family:var(--head);font-size:clamp(2.3rem,10.5vw,2.8rem);letter-spacing:.01em;color:var(--fg-bright);line-height:.96}
.hero__sub{font-size:.9rem;line-height:1.35;max-width:46ch}
.hero__open{font-weight:600;font-size:.9rem;color:var(--fg-bright)}
.hero__open::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.hero__open[data-state="open"]::before{background:var(--fg-bright)}
.chips{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.chips li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem;font-weight:600;line-height:1.3}
.chips b{font-family:var(--head);font-weight:400;font-size:1.05rem;letter-spacing:.02em;color:var(--fg-bright);text-align:right;white-space:nowrap;flex:none}
.chips b small{font-family:var(--body);font-weight:400;font-size:.76rem;opacity:.85;display:inline;margin-left:5px;white-space:normal}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;font-size:.95rem}
.hero__num,.hero__actions .hero__num{display:none}
.hero__link,.hero__actions a,.find__facts a,.find__link{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.btn{display:inline-block;font-family:var(--head);letter-spacing:.05em;font-size:1rem;padding:13px 22px;border-radius:3px;background:var(--accent);color:var(--on-accent);text-decoration:none}
/* on phones the appointment request is a text link; the fixed bar is the one primary control */
.hero__actions .btn{display:inline-flex;align-items:center;min-height:44px;font-family:var(--body);font-weight:600;font-size:inherit;letter-spacing:0;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline}

/* sections */
.sec{padding:40px var(--gutter-r) 44px var(--gutter);border-top:1px solid var(--line);max-width:1240px;margin:0 auto}
.sec__h2{font-family:var(--head);font-size:clamp(2rem,7vw,2.75rem);letter-spacing:.02em;color:var(--fg-bright);margin-bottom:18px}
.board{background:var(--bg-2);border:1px solid var(--line);padding:6px 18px 10px;box-shadow:0 0 60px rgba(194,44,43,.16)}
.rate{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.rate th,.rate td{padding:12px 0;border-top:1px solid var(--line);vertical-align:top;text-align:left;font-weight:400}
.rate tr:first-child th,.rate tr:first-child td{border-top:0}
.rate th{font-weight:600;padding-right:12px}
.rate td{text-align:right;font-family:var(--head);font-size:1.3rem;color:var(--fg-bright);white-space:nowrap}
.rate td small{font-family:var(--body);font-size:.78rem;opacity:.85;display:block;line-height:1.2}
.rate__sub{opacity:.85;font-weight:400}
.rate__dropin{background:linear-gradient(90deg,rgba(194,44,43,.22),rgba(194,44,43,.05))}
.rate__dropin th{padding-left:12px;box-shadow:inset 3px 0 0 var(--accent)}
.rate__dropin td{padding-right:12px}
.rate__note{display:block;font-weight:400;font-size:.85rem;line-height:1.35;margin-top:4px;max-width:34ch}
.rate__note b{display:block;font-weight:600;color:var(--fg-bright)}
.svc{display:grid;gap:22px}
.svc__list{padding-left:1.1em;line-height:1.75}
.svc__bikes{font-weight:600;color:var(--fg-bright)}
.steps{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.steps li{padding-left:2.2em;position:relative}
.steps b{position:absolute;left:0;top:-2px;font-family:var(--head);font-weight:400;font-size:1.25rem;color:var(--fg-bright)}
.svc__call{margin-top:16px;font-family:var(--head);font-size:1.3rem;letter-spacing:.02em;color:var(--fg-bright)}
.svc__call a{text-decoration:none;border-bottom:2px solid var(--accent)}
.reviews{display:grid;gap:18px}
.review{margin:0;background:var(--bg-2);border:1px solid var(--line);padding:20px;border-radius:3px}
.review__stars{color:var(--accent);letter-spacing:2px;display:block;margin-bottom:8px}
.review cite{display:block;margin-top:12px;font-style:normal;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.techs{margin-top:20px;font-family:var(--head);font-size:1.2rem;letter-spacing:.03em;color:var(--fg-bright);opacity:.9}
.find{display:grid;gap:22px}
.find__facts{display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.find__facts dt{opacity:.7}
.find__facts dd{margin:0}
.find__facts a,.find__link{font-weight:600}
.find__email{user-select:all;-webkit-user-select:all}
.find__help{margin-top:10px;font-size:.88rem;opacity:.85;max-width:44ch}
.foot{padding:26px var(--gutter-r) 28px var(--gutter);border-top:1px solid var(--line);font-size:.84rem;max-width:1240px;margin:0 auto;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot__marks{font-size:.78rem}

/* fixed Call | Text bar, phones only */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr auto;background:var(--accent);color:var(--on-accent);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.bar__cell{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));text-decoration:none;font-family:var(--head);letter-spacing:.05em;font-size:1.1rem}
.bar__cell span{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:1}
.bar__cell--text{border-left:1px solid rgba(246,239,224,.35);padding-left:22px;padding-right:max(22px,env(safe-area-inset-right,0px))}
.bar__cell--text span{font-family:var(--head);font-weight:400;font-size:1.1rem;letter-spacing:.05em;text-transform:none;opacity:1}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

/* desktop composition */
@media (min-width:761px){
  body{padding-bottom:0}
  .bar{display:none}
  .top{padding-block:16px}
  .top__badge{width:56px;height:56px}
  .top__facts{display:block}
  .hero{display:grid;align-items:center;min-height:78vh;min-height:min(78vh,860px)}
  .hero__art{position:absolute;inset:0;height:auto;overflow:hidden}
  .hero__frame{position:absolute;inset:0;height:auto;aspect-ratio:auto;max-width:none;margin:0}
  .hero__img{object-position:70% 50%}
  .hero__art::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(4,30,47,.94) 0%,rgba(4,30,47,.78) 34%,rgba(4,30,47,.18) 60%,rgba(4,30,47,0) 100%);pointer-events:none}
  .hero__frame::after{background:linear-gradient(to bottom,var(--bg),transparent 84px),linear-gradient(to top,var(--bg),transparent 84px)}
  .hero__glow-scroll{left:var(--lamp-x,65%);top:var(--lamp-y,0%)}
  .hero__copy{z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:56px var(--gutter-r) 64px var(--gutter);gap:16px}
  .hero__h1{font-size:clamp(3.4rem,6.4vw,5.6rem);max-width:12ch}
  .hero__sub{font-size:1.1rem;max-width:44ch}
  .hero__open{font-size:1rem}
  .chips{grid-template-columns:repeat(3,auto);justify-content:start;gap:10px;border-top:0}
  .chips li{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line-strong);background:rgba(4,30,47,.55);border-radius:3px;font-size:.84rem}
  .chips b{text-align:left;font-size:1.35rem}
  .chips b small{display:inline;margin-left:6px}
  .hero__actions{gap:14px 22px;margin-top:4px}
  .hero__num,.hero__actions .hero__num{display:inline-flex;font-family:var(--head);font-size:2.2rem;letter-spacing:.02em;color:var(--fg-bright);text-decoration:none;border-bottom:3px solid var(--accent);line-height:1.1}
  .hero__actions{gap:14px 22px}
  .hero__actions .btn{display:inline-block;font-family:var(--head);font-weight:400;font-size:1rem;letter-spacing:.05em;padding:13px 22px;border-radius:3px;background:var(--accent);color:var(--on-accent);text-decoration:none}
  .sec{padding-block:56px 60px}
  .board{padding:10px 26px 14px;max-width:720px}
  .rate th{font-size:1.05rem}
  .rate td{font-size:1.5rem}
  .svc{grid-template-columns:1fr 1fr;gap:40px}
  .reviews{grid-template-columns:1fr 1fr;gap:22px}
  .find{grid-template-columns:1fr 1fr;gap:40px}
}
@media (min-width:1100px){.hero__copy{padding-block:72px 80px}}
/* tablet widths: keep the copy off the bike */
@media (min-width:761px) and (max-width:1099px){
  .hero__copy{max-width:600px;margin:0}
  .hero__img{object-position:82% 50%}
  .hero__art::after{background:linear-gradient(95deg,rgba(4,30,47,.96) 0%,rgba(4,30,47,.84) 40%,rgba(4,30,47,.3) 66%,rgba(4,30,47,0) 100%)}
  .chips{grid-template-columns:repeat(2,auto)}
}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  .hero__glow{animation:none;opacity:.6;transform:translate(-50%,-38%)}
  .hero__glow-scroll{opacity:.9}
}