/* ─────────────────────────────────────────────────────────────────────────
   Boneshaker Bicycles — page scaffolding.
   Layout and web-scale sizing only. Every color, font, radius and shadow
   comes from organic.css (the Organic design system). The voice is warm and
   a little playful: Caprasimo headings over Figtree, soft circles as marks,
   over-rounded containers, whitespace over rules, photographs washed so they
   sit back into the cream page.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; }
/* a small terracotta ring with a sage hub — the system's soft-circle mark,
   standing in for the old raster banner logo */
.brand-mark { width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg),
  inset 0 0 0 7px var(--color-accent-2); }
@media (max-width: 560px) { .nav a:not(.btn) { display: none; } }

/* — kicker (Figtree label; terracotta small text takes the deep step) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* ── HERO ─────────────────────────────────────────────────────────────────
   A left-aligned display headline with the carousel living inside the hero
   as its showpiece. A soft sage circle rises past the top-right edge — the
   system's decoration shape at page scale. */
.hero { position: relative; padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.hero::before {
  content: ""; position: absolute; right: -180px; top: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--color-accent-2-200); pointer-events: none; z-index: -1;
}
@media (max-width: 1420px) { .hero::before { right: 0; } }

.hero-lede { max-width: 62ch; }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: clamp(43px, 6.26vw, 82px);
  letter-spacing: 0; margin: 0;
  margin-left: -0.028em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.display .accent { color: var(--color-accent); }
.hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.25 * var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  text-box: trim-both cap alphabetic;
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); align-items: center; }
.hero .vet { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-2-700); }
.hero .vet svg { width: 17px; height: 17px; }

/* the carousel sits in the hero, below the lede */
.hero .carousel { margin-top: calc(2 * var(--leading)); }

/* ── CAROUSEL ─────────────────────────────────────────────────────────────
   One over-rounded washed frame, slides crossfading, soft-circle dots. */
.carousel { position: relative; }
.car-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--half); flex-wrap: wrap; }
.car-head .kicker { margin: 0; }
/* The live shop's photos are a mix of portrait and landscape, so no single
   frame ratio fits them all. Each slide shows its photo WHOLE (object-fit:
   contain — nothing cropped) floating over a blurred, washed copy of the same
   photo, so the frame is always full and portraits never leave empty bars. */
.car-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: calc(2 * var(--radius-lg));
  overflow: hidden; background: var(--color-neutral-200); box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) { .car-frame { aspect-ratio: 4 / 3; } }
/* isolate: keep the slide's internal z-index (backdrop under photo) contained,
   so the active slide (opacity 1) can't lift its <img> above the arrow buttons */
.car-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease;
  isolation: isolate; }
.car-slide.on { opacity: 1; }
/* the photo and its blurred backdrop are purely decorative — never let them
   intercept clicks meant for the arrows/dots */
.car-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg) center / cover no-repeat;
  filter: blur(32px) saturate(0.7) brightness(1.04); transform: scale(1.2);
}
.car-slide img { position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; display: block; pointer-events: none; }
.car-slide figcaption {
  position: absolute; z-index: 2; left: var(--space-4); bottom: var(--space-4);
  background: var(--color-bg); color: var(--color-text); font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.car-btn {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-content: center; background: var(--color-bg); color: var(--color-text);
  box-shadow: var(--shadow-md);
}
.car-btn:hover { background: var(--color-accent-100); }
.car-btn:active { background: var(--color-accent-200); }
.car-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.car-btn svg { width: 20px; height: 20px; }
.car-prev { left: var(--space-4); } .car-next { right: var(--space-4); }
.car-dots { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--leading); }
.car-dot { width: 12px; height: 12px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--color-accent-200); }
.car-dot:hover { background: var(--color-accent-400); }
.car-dot.on { background: var(--color-accent); }
.car-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── SEED BED (stats) ──────────────────────────────────────────────────────
   Four soft tinted circles, staggered and overlapping like seeds thrown. */
.bed { position: relative; padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
  min-height: calc(17 * var(--leading)); }
.seed { position: absolute; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  padding: var(--leading); box-sizing: border-box; }
.seed-a { width: 240px; left: 64px; top: calc(2.5 * var(--leading)); background: var(--color-accent-100); }
.seed-b { width: 190px; left: 208px; top: calc(9 * var(--leading)); background: var(--color-accent-200); }
.seed-c { width: 310px; right: 96px; top: calc(-3.5 * var(--leading)); background: var(--color-accent-2-300); }
.seed-d { width: 175px; right: 321px; top: calc(4.5 * var(--leading)); background: var(--color-accent-2-100); }
.seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
.seed-a .stat-num, .seed-b .stat-num { color: var(--color-accent-700); }
.seed-d .stat-num { color: var(--color-accent-2-700); }
.seed-c .stat-num { color: var(--color-accent-2-800); }
.seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0; max-width: 17ch; text-wrap: balance; }

/* ── SECTION HEADS ─────────────────────────────────────────────────────────*/
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); margin: 0; text-box: trim-both cap alphabetic; }

/* — feature rows (a drawn terracotta dot hangs at each feature) — */
.feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0; }
.f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); }
@media (max-width: 1280px) { .f-title::before { display: none; } }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* ── RENTALS ───────────────────────────────────────────────────────────────*/
.rentgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  margin-top: var(--leading); }
@media (max-width: 1080px) { .rentgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .rentgrid { grid-template-columns: 1fr; } }
.rent-art { border-radius: var(--radius-lg); aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: var(--half); }
.rent-art img { width: 100%; height: 100%; object-fit: cover; }
.rent-price { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; color: var(--color-accent-700); margin: 0 0 var(--half); }
.rent-price small { font-size: 15px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-family: var(--font-body); font-weight: 600; }

/* ── SERVICE ───────────────────────────────────────────────────────────────*/
.svcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
  margin-top: var(--leading); }
@media (max-width: 880px) { .svcgrid { grid-template-columns: 1fr; } }
.svc { border-radius: calc(2 * var(--radius-lg)); padding: calc(1.5 * var(--leading)) clamp(20px, 3vw, 44px); }
.svc-a { background: var(--color-accent-100); }
.svc-b { background: var(--color-accent-2-100); }
.svc h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px;
  line-height: var(--leading); margin: 0; }
.svc .price { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 44px; line-height: calc(1.5 * var(--leading)); margin: var(--half) 0 0; }
.svc-a .price { color: var(--color-accent-700); } .svc-b .price { color: var(--color-accent-2-700); }
.svc ul { margin: var(--half) 0 0; padding: 0 0 0 1.2em; font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.svc .fine { font-size: 13px; line-height: var(--half); margin: var(--leading) 0 0;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* ── SHOP + TEAM ───────────────────────────────────────────────────────────*/
.brandrow { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--leading); }
.teamgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6);
  margin-top: var(--leading); }
@media (max-width: 720px) { .teamgrid { grid-template-columns: 1fr; } }
.member { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 480px) { .member { grid-template-columns: 1fr; } }
.member figure { margin: 0; width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.member img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px;
  line-height: var(--leading); margin: 0; }
.member p { font-size: 14.5px; line-height: calc(0.86 * var(--leading)); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* ── VISIT / HOURS ─────────────────────────────────────────────────────────*/
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--color-accent-2-100); border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.hours { display: grid; grid-template-columns: auto auto; gap: 4px var(--space-6); justify-content: start;
  margin-top: var(--leading); font-size: 15.5px; line-height: var(--leading); }
.hours .d { font-weight: 600; }
.visit-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--leading) var(--space-6); }
@media (max-width: 720px) { .visit-cols { grid-template-columns: 1fr; } }

/* ── QUOTE ─────────────────────────────────────────────────────────────────*/
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: calc(1.5 * var(--leading));
  max-width: 32ch; margin: 0; text-indent: -0.559em; text-box: trim-both cap alphabetic;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0; text-indent: -1.347em; text-box: trim-both cap alphabetic; }
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer .pitch { display: block; margin-top: var(--half);
  color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ── RESPONSIVE COLLAPSE (seed bed constellation) ──────────────────────────*/
@media (max-width: 1080px) {
  .bed { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--leading) var(--half); justify-items: center; padding-bottom: calc(3.5 * var(--leading)); }
  .seed { position: static; width: min(clamp(160px, 44vw, 240px), 100%); }
  .seed-c { width: min(clamp(180px, 50vw, 280px), 100%); }
  .seed-b, .seed-d { transform: translateY(var(--leading)); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(1.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -160px; }
}
@media (max-width: 389px) {
  .bed { grid-template-columns: 1fr; gap: var(--leading); }
  .seed { width: clamp(160px, 56vw, 220px); }
  .seed-c { width: clamp(180px, 62vw, 240px); }
  .seed-a, .seed-c { justify-self: start; }
  .seed-b, .seed-d { transform: none; justify-self: end; }
}