/* Cycle House — site styles
   Layout follows the Cycle House Wireframes PDF.
   Palette and type follow the Valo Media brand board:
   charcoal + graphite grounds, stone / linen / sand / oat naturals,
   geometric sans (Outfit stands in for Clother Bold). */

:root {
  --ink: #2b2a28;
  --ink-deep: #242321;   /* charcoal pushed one step darker for depth */
  --graphite: #393939;
  --stone: #ada699;
  --linen: #eae3d7;
  --sand: #d5c9ae;
  --oat: #c2b79f;
  --glow: #e9b98a;       /* cove lighting in the studio renderings */
  --line: rgba(173,166,153,.28);
  --muted: #bdb5a7;

  --display: "Outfit", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;

  --wrap: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--linen);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }

/* Section name, tracked like the CYCLE HOUSE wordmark */
.eyebrow {
  font-family: var(--display);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 1.1rem;
}
.muted { color: var(--muted); }
.light .muted { color: #5e5a53; }

.section { padding: var(--section) 0; }
.light { background: var(--linen); color: var(--ink); }
.light .eyebrow { color: #7d7566; }
.panel { background: var(--graphite); }

/* Basalt texture from the moodboard, drawn in SVG so no image is needed */
.stone {
  background-color: var(--ink-deep);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(233,185,138,.10), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .78 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 .9rem var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--sand);
  background: var(--sand);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn:hover { background: var(--linen); border-color: var(--linen); }
.btn-outline { background: transparent; color: var(--linen); border-color: rgba(234,227,215,.55); }
.btn-outline:hover { background: rgba(234,227,215,.08); border-color: var(--linen); }
.btn-small { padding: .55rem 1.1rem; font-size: .78rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.light .btn { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.light .btn:hover { background: var(--graphite); border-color: var(--graphite); }
.light .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }

.text-link {
  font: 600 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: .9rem var(--gutter);
  transition: background-color .3s;
}
.site-header.scrolled, .site-header.solid { background: rgba(43,42,40,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-left, .nav-right { display: flex; align-items: center; gap: 1.6rem; }
.nav-right { justify-content: flex-end; }
.site-header nav a:not(.btn) {
  font: 500 .78rem var(--display); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; opacity: .85;
}
.site-header nav a:not(.btn):hover, .site-header nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; justify-self: center; }
.brand-mark { width: 1.9rem; height: 1.9rem; color: var(--linen); }
.brand-word { font: 600 .95rem var(--display); letter-spacing: .18em; text-transform: uppercase; }

.nav-toggle {
  display: none; background: none; border: 1.5px solid rgba(234,227,215,.5); color: inherit;
  font: 600 .8rem var(--display); letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; justify-self: end;
}
@media (max-width: 72rem) {
  .site-header { grid-template-columns: auto 1fr; }
  .brand { justify-self: start; grid-column: 1; grid-row: 1; }
  .nav-toggle { display: block; grid-column: 2; grid-row: 1; }
  .site-nav { display: none; grid-column: 1 / -1; padding: 1.25rem 0 .75rem; }
  .site-nav.open { display: grid; gap: 1.2rem; }
  .nav-left, .nav-right { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .site-header:has(.site-nav.open) { background: var(--ink); }
}
@media (min-width: 72.01rem) {
  .site-nav { display: contents; }
  .nav-left { grid-column: 1; grid-row: 1; }
  .brand { grid-column: 2; grid-row: 1; }
  .nav-right { grid-column: 3; grid-row: 1; }
}

/* ---------- Home: hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: max(100svh, 70vw); overflow: hidden; background: var(--ink-deep);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(43,42,40,.6) 40%, rgba(43,42,40,.2) 75%),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(36,35,33,.6) 100%);
}
.hero-inner {
  position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 9rem var(--gutter) clamp(3rem, 7vw, 5.5rem);
  display: grid; gap: 2rem; align-items: end;
}
@media (min-width: 56rem) { .hero-inner { grid-template-columns: 1.5fr 1fr; gap: 4rem; } }
.hero h1 { text-transform: uppercase; letter-spacing: .04em; }
.hero-side p { color: #e2dbcf; font-size: 1.1rem; max-width: 26em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 40rem) {
  .hero { min-height: 0; display: block; }
  .hero-img { position: relative; height: auto; aspect-ratio: 4 / 3.4; }
  .hero-shade { background: linear-gradient(to top, var(--ink) 0, transparent 40%); height: calc(100vw * 3.4 / 4); }
  .hero-inner { padding-top: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: lights-up 2.4s ease-out both; }
  .hero-inner > * { animation: rise .9s .5s ease-out both; }
  .hero-inner > :nth-child(2) { animation-delay: .8s; }
  @keyframes lights-up { from { filter: brightness(.12); transform: scale(1.04); } to { filter: none; transform: none; } }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* The cove-light strip, the site's signature divider */
.glow-line { height: 2px; background: var(--glow); box-shadow: 0 0 12px 2px rgba(233,185,138,.7), 0 0 40px 6px rgba(233,185,138,.28); }

/* ---------- Home: experience ---------- */
.experience { text-align: center; }
.experience .statement {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.25;
  max-width: 24em; margin: 0 auto 4.5rem;
}
.pillars { display: grid; gap: 2.5rem; text-align: left; border-top: 1px solid var(--line); padding-top: 2.5rem; }
@media (min-width: 48rem) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.pillars h3 { margin-bottom: .6rem; }
.pillars p { color: var(--muted); margin: 0; }

/* ---------- Section heads ---------- */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }

/* ---------- Class rows (Up next + Schedule) ---------- */
.class-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.class-row {
  display: grid; align-items: center; gap: .4rem 1.5rem;
  grid-template-columns: 5.5rem 1fr auto;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
.class-time { font: 600 1.35rem var(--display); }
.class-time small { display: block; font: 500 .7rem var(--display); letter-spacing: .16em; color: var(--muted); margin-top: .2rem; }
.class-name { font: 600 1.15rem var(--display); }
.class-meta { color: var(--muted); font-size: .92rem; }
.class-spots { font: 500 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.class-action { display: flex; align-items: center; gap: 1.5rem; justify-content: flex-end; }
@media (max-width: 40rem) {
  .class-row { grid-template-columns: 4.6rem 1fr; }
  .class-action { grid-column: 2; justify-content: space-between; margin-top: .4rem; }
  .class-time { font-size: 1.1rem; }
}
.sample-note {
  font-size: .85rem; color: var(--muted); border: 1px dashed var(--line);
  padding: .7rem 1rem; border-radius: 6px; margin: 0 0 2rem;
}

/* ---------- Instructors ---------- */
.coaches { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .coaches { grid-template-columns: 1.3fr 1fr; } }
.coach-card { background: var(--graphite); display: grid; }
@media (min-width: 36rem) { .coach-card.founder-card { grid-template-columns: 1fr 1.2fr; } }
.portrait {
  min-height: 18rem; background: var(--ink-deep);
  display: grid; place-items: center; text-align: center; padding: 1rem;
  color: var(--stone); font-size: .85rem;
  border: 1px dashed var(--line);
}
.coach-body { padding: 1.75rem; }
.coach-body p { color: var(--muted); }
.coach-name { font: 600 1.4rem var(--display); margin-bottom: .2rem; }
.audition-card { background: transparent; border: 1px solid var(--line); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.audition-card p { color: var(--muted); }

/* ---------- Ways to ride ---------- */
.rides-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .rides-grid { grid-template-columns: 1fr 2fr; gap: 5rem; } }
.ride-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ride-list li { display: grid; gap: .4rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 40rem) { .ride-list li { grid-template-columns: 12rem 1fr; } }
.ride-list h3 { font-size: 1.6rem; }
.ride-list p { margin: 0; color: var(--muted); }
.ride-tags { font: 500 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-top: .6rem !important; }
.ride-promise { margin-top: 3rem; font: 500 clamp(1.3rem, 2.6vw, 1.8rem)/1.35 var(--display); max-width: 30em; }

/* ---------- Who it's for ---------- */
.riders { list-style: none; margin: 2.5rem 0 3.5rem; padding: 0; border-top: 1px solid var(--stone); }
.riders li { font: 500 clamp(1.25rem, 2.8vw, 1.85rem)/1.25 var(--display); padding: 1rem 0; border-bottom: 1px solid var(--stone); }
.split { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }
.belong { font: 600 1.35rem/1.4 var(--display); margin: 0; }

/* ---------- Before & after ---------- */
.amenities { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) { .amenities { grid-template-columns: 1.1fr 1fr; gap: 4.5rem; } }
.amenities img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.amenity-list { margin: 2rem 0 0; }
.amenity-list div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.amenity-list div:first-child { border-top: 1px solid var(--line); }
.amenity-list dt { font: 600 1rem var(--display); }
.amenity-list dd { margin: 0; color: var(--muted); text-align: right; }

/* ---------- Membership ---------- */
.membership-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) { .membership-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.founding-card { border: 1px solid var(--sand); padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(213,201,174,.04); }
.founding-card .price { font: 600 2.4rem var(--display); margin: .3rem 0 .4rem; }
.founding-card .price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.founding-card ul { margin: 0 0 1.75rem; padding-left: 1.1rem; color: var(--muted); }
.founding-card .btn { width: 100%; }

/* ---------- Community ---------- */
.community h2 { margin-bottom: 2.5rem; }
.give-back { list-style: none; padding: 0; margin: 0; }
.give-back li { padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.give-back li:first-child { padding-top: 0; }
.give-back strong { display: block; color: var(--linen); font: 600 1.1rem var(--display); margin-bottom: .2rem; }

/* ---------- Visit ---------- */
.visit-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .visit-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; } }
.hours { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 1.5rem 0; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; color: var(--muted); }
.map-box { min-height: 20rem; border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; color: var(--stone); padding: 1rem; font-size: .9rem; background: var(--ink-deep); }

/* ---------- Final CTA / signup ---------- */
.final { text-align: center; padding: clamp(5rem, 11vw, 9rem) 0; }
.final h2 { font-size: clamp(2.4rem, 6vw, 4.5rem); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.25rem; }
.final p { max-width: 34em; margin-left: auto; margin-right: auto; color: #d9d2c5; }
.signup { max-width: 30rem; margin: 2rem auto 0; text-align: left; }
.signup label { display: block; font-weight: 600; margin-bottom: .5rem; }
.signup-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup input {
  flex: 1 1 14rem; font: inherit; padding: .85rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--stone); background: rgba(234,227,215,.06); color: var(--linen);
}
.signup input::placeholder { color: #9b9488; }
.form-status { min-height: 1.6em; margin: .75rem 0 0; font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); border-top: 1px solid var(--line); padding: 4rem 0 2.5rem; font-size: .95rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.6fr; } }
.site-footer .brand { justify-self: start; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .muted { font-size: .9rem; }
.footer-signup .signup { margin: .75rem 0 0; max-width: none; }
.footer-signup .signup input { padding: .7rem 1rem; }
.footer-signup .btn { padding: .7rem 1.2rem; }
.fine { margin-top: 3rem; font-size: .82rem; color: var(--stone); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* ---------- Inner pages ---------- */
.page-top { padding: 8.5rem 0 3rem; }
.page-top .lede { color: var(--muted); max-width: 30em; margin: 0; }
.page-head { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 52rem) { .page-head { grid-template-columns: 1fr 1fr; } }

/* Schedule */
.week { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.day-tab {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: .8rem 1rem 1rem; min-width: 4.2rem; text-align: center;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.day-tab span { display: block; font: 600 .72rem var(--display); letter-spacing: .16em; }
.day-tab strong { display: block; font: 600 1.6rem var(--display); color: inherit; }
.day-tab[aria-selected="true"] { color: var(--linen); border-bottom-color: var(--sand); }
.filters { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filters label { display: grid; gap: .35rem; font: 500 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.filters select {
  font: inherit; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--linen);
  background: var(--graphite); border: 1px solid var(--line); border-radius: 6px; padding: .6rem 2rem .6rem .8rem; min-width: 11rem;
}
.day-title { font: 500 .78rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.coach-dot {
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--graphite); border: 1px solid var(--line);
  display: grid; place-items: center; font: 600 .8rem var(--display); color: var(--sand);
}
.sched-row { grid-template-columns: 6.5rem 3rem 1fr auto; }
@media (max-width: 40rem) {
  .sched-row { grid-template-columns: 4.6rem 1fr; }
  .sched-row .coach-dot { display: none; }
}
.empty { padding: 3rem 0; color: var(--muted); }

/* Book a bike */
.book-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .book-grid { grid-template-columns: 1.7fr 1fr; } }
.room { background: var(--graphite); padding: clamp(1.25rem, 3vw, 2rem); }
.room-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.75rem; }
.legend { display: flex; gap: 1.1rem; font-size: .85rem; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; border: 1.5px solid var(--linen); }
.legend .taken::before { background: #4a4846; border-color: #4a4846; }
.legend .yours::before { background: var(--sand); border-color: var(--sand); }
.podium { margin: 0 auto 1.75rem; width: max-content; padding: .7rem 2rem; border: 1px solid var(--glow); box-shadow: 0 0 18px rgba(233,185,138,.25); font: 600 .75rem var(--display); letter-spacing: .2em; text-transform: uppercase; }
.bikes { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(.35rem, 1.2vw, .8rem); max-width: 34rem; margin: 0 auto; }
.bike {
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--linen); background: transparent; color: var(--linen);
  font: 600 clamp(.75rem, 1.6vw, .95rem) var(--display); cursor: pointer; padding: 0;
}
.bike:hover:not(:disabled) { background: rgba(234,227,215,.12); }
.bike:disabled { background: #4a4846; border-color: #4a4846; color: #7a766f; cursor: not-allowed; }
.bike[aria-pressed="true"] { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.room-foot { text-align: center; margin: 1.5rem 0 0; font: 500 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.summary { border: 1px solid var(--line); padding: 1.75rem; position: sticky; top: 6rem; }
.summary h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0 0 1.5rem; font-size: .95rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; }
.summary label { font-size: .95rem; }
.summary select { width: 100%; font: inherit; color: var(--linen); background: var(--graphite); border: 1px solid var(--line); border-radius: 6px; padding: .65rem .8rem; margin: .4rem 0 1.25rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.5rem; color: var(--muted); }
.check input { margin-top: .3rem; accent-color: var(--sand); }
.summary .btn { width: 100%; }
.summary .small { font-size: .88rem; color: var(--muted); margin: 1rem 0 0; }

/* Pricing */
.intro-offer { border: 1px solid var(--sand); padding: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 3rem; }
.intro-offer h2 { font-size: 1.9rem; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); padding: .8rem 1rem; cursor: pointer; font: 600 .78rem var(--display); letter-spacing: .16em; text-transform: uppercase; }
.tab[aria-selected="true"] { color: var(--linen); border-bottom-color: var(--sand); }
.plans { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { background: var(--graphite); padding: 1.75rem; display: flex; flex-direction: column; border: 1px solid transparent; }
.plan.popular { border-color: var(--sand); }
.plan-flag { font: 600 .7rem var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--sand); margin: 0 0 .6rem; min-height: 1em; }
.plan .price { font: 600 2rem var(--display); margin: .4rem 0 .1rem; }
.plan .per { color: var(--muted); font-size: .88rem; margin-bottom: 1.25rem; }
.plan ul { padding-left: 1.1rem; margin: 0 0 1.75rem; color: #d9d2c5; flex: 1; }
.plan li + li { margin-top: .35rem; }
.extras { display: grid; gap: 1.5rem; background: var(--graphite); padding: 1.75rem; margin-top: 3rem; }
@media (min-width: 52rem) { .extras { grid-template-columns: repeat(3, 1fr); } }
.extras h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.extras p { margin: 0; color: var(--muted); font-size: .95rem; }
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.2rem 0; font: 600 1.1rem var(--display); }
.faq details p { color: var(--muted); margin: 0 0 1.2rem; }

/* ---------- The bike ---------- */
.bike-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 52rem) { .bike-grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.bike-copy > p:not(.eyebrow) { margin-top: 1.25rem; max-width: 32em; }
.bike-specs { margin: 2rem 0 0; }
.bike-specs div { padding: 1rem 0; border-top: 1px solid var(--stone); }
.bike-specs dt { font: 600 1.1rem var(--display); }
.bike-specs dd { margin: .2rem 0 0; color: #5e5a53; }
/* Product shots are on white; multiply drops the white into the linen background */
.bike-figure { margin: 0; position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 1rem; }
.bike-figure img { mix-blend-mode: multiply; width: 100%; }
.bike-main { max-height: 34rem; object-fit: contain; }
.bike-detail { align-self: start; }

/* ---------- Fixes ---------- */
[hidden] { display: none !important; }
.bikes .bike[aria-pressed="true"] { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.site-footer ul { align-content: start; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.75rem); }
@media (min-width: 56rem) {
  .hero-inner { grid-template-columns: auto minmax(18rem, 1fr); }
  .hero h1 { white-space: nowrap; font-size: clamp(2.5rem, 4.9vw, 4.5rem); }
}
.bike-figure { grid-template-columns: 1.4fr 1fr; }
.site-header nav a { white-space: nowrap; }

/* 18-bike room (private rides seat up to 18) */
.bikes { grid-template-columns: repeat(6, 1fr); max-width: 26rem; }

/* Pricing additions */
.price-unit { font-size: 1rem; font-weight: 400; color: var(--muted); }
@media (min-width: 64rem) { .plans-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40rem) and (max-width: 63.99rem) { .plans-4 { grid-template-columns: 1fr 1fr; } }
.plans-note { color: var(--muted); font-size: .88rem; margin: 1rem 0 0; }
.perks { margin-top: 2rem; padding: 1.5rem 1.75rem; border: 1px solid var(--line); display: grid; gap: 1rem; align-items: center; }
@media (min-width: 52rem) { .perks { grid-template-columns: auto 1fr; gap: 2.5rem; } }
.perks h3 { font-size: 1.15rem; }
.perks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem; color: var(--muted); }
.perks strong { color: var(--linen); font-weight: 600; }

/* ---------- Dark rock textures ----------
   rock-basalt.jpg: rough basalt with raking warm light (feature sections, page heads)
   rock-stone.jpg: softer river stone (cards, membership, footer) */
.stone {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(233,185,138,.16), transparent 55%),
    linear-gradient(rgba(36,35,33,.25), rgba(36,35,33,.55)),
    url("images/rock-basalt.jpg") center / cover;
}
.rock-top {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(233,185,138,.14), transparent 50%),
    linear-gradient(to bottom, rgba(43,42,40,.15) 0%, rgba(43,42,40,.55) 60%, var(--ink) 100%),
    url("images/rock-basalt.jpg") center / cover;
  margin-bottom: 2.5rem;
}
.rock-soft {
  background:
    radial-gradient(ellipse at 85% 50%, rgba(233,185,138,.08), transparent 55%),
    linear-gradient(rgba(57,57,57,.45), rgba(43,42,40,.7)),
    url("images/rock-stone.jpg") center / cover;
}
.plan, .extras, .coach-card, .room {
  background:
    linear-gradient(rgba(57,57,57,.86), rgba(57,57,57,.93)),
    url("images/rock-stone.jpg") center / cover;
}
.founding-card, .intro-offer, .perks, .summary, .audition-card {
  background:
    linear-gradient(rgba(36,35,33,.72), rgba(36,35,33,.86)),
    url("images/rock-basalt.jpg") center / cover;
}
.portrait, .map-box {
  background:
    linear-gradient(rgba(36,35,33,.35), rgba(36,35,33,.65)),
    url("images/rock-basalt.jpg") center / cover;
}
.site-footer {
  background:
    linear-gradient(rgba(36,35,33,.78), rgba(36,35,33,.9)),
    url("images/rock-stone.jpg") center / cover;
  border-top: 0;
  box-shadow: inset 0 2px 0 var(--glow), 0 -10px 30px -12px rgba(233,185,138,.45);
}
.final h2, h1, h2 { text-wrap: balance; }

/* =========================================================
   MOTION
   Everything below only runs when <html> has .motion, which
   script.js adds unless the visitor has "reduce motion" on.
   ========================================================= */

/* Footer: the glow now comes from its own lighting divider */
.site-footer { box-shadow: none; }

/* 1. Gold dividers switch on like the studio's LED strips */
.motion .glow-line {
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.motion .glow-line.lit {
  animation: strip-on 1.4s cubic-bezier(.2,.7,.2,1) forwards, strip-flicker .9s .25s steps(1, end);
}
@keyframes strip-on {
  0%   { transform: scaleX(0); opacity: .6; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes strip-flicker {
  0%   { filter: brightness(1); }
  12%  { filter: brightness(.35); }
  20%  { filter: brightness(1.25); }
  34%  { filter: brightness(.55); }
  46%  { filter: brightness(1); }
}

/* Hero headline: a slow, faint warm glow */
.motion .hero h1 { animation: glow-breathe 5s 1.8s ease-in-out infinite; }
@keyframes glow-breathe {
  0%, 100% { text-shadow: 0 0 0 rgba(233,185,138,0); }
  50%      { text-shadow: 0 0 28px rgba(233,185,138,.28); }
}

/* 2. Feedback ------------------------------------------------ */

/* Bike picker: gold fill, glow ring, steady halo */
.motion .bike { transition: background-color .25s, border-color .25s, color .25s, transform .2s; }
.motion .bike:not(:disabled):active { transform: scale(.92); }
.bikes .bike[aria-pressed="true"] { box-shadow: 0 0 16px rgba(233,185,138,.45); }
.motion .bike.pop { animation: bike-ring .7s ease-out; }
@keyframes bike-ring {
  0%   { box-shadow: 0 0 0 0 rgba(233,185,138,.75), 0 0 16px rgba(233,185,138,.45); transform: scale(.9); }
  45%  { transform: scale(1.08); }
  100% { box-shadow: 0 0 0 16px rgba(233,185,138,0), 0 0 16px rgba(233,185,138,.45); transform: scale(1); }
}
.motion .flash { animation: flash 1s ease-out; }
@keyframes flash {
  0%   { background: rgba(213,201,174,.35); box-shadow: 0 0 0 4px rgba(213,201,174,.35); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}
.motion .btn { transition: background-color .2s, border-color .2s, color .2s, opacity .35s, transform .2s, box-shadow .3s; }
.motion .btn:not([disabled]):hover { box-shadow: 0 0 22px -4px rgba(233,185,138,.55); }
.motion .btn:not([disabled]):active { transform: translateY(1px) scale(.98); }

/* Sliding underline for day tabs and plan tabs */
.week, .tabs { position: relative; }
.tab-ind {
  position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--sand);
  box-shadow: 0 0 10px rgba(233,185,138,.6);
  pointer-events: none;
}
.motion .tab-ind { transition: transform .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1); }
.has-ind .day-tab[aria-selected="true"], .has-ind .tab[aria-selected="true"] { border-bottom-color: transparent; }
.motion .day-tab, .motion .tab { transition: color .25s; }

/* Class lists cross-fade when the day or filters change */
.motion .refresh > * { animation: row-in .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Membership panels cross-fade; cards lift on hover */
.motion .panel-in { animation: row-in .45s cubic-bezier(.2,.8,.2,1) both; }
.motion .plan { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.motion .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.motion .plan.popular:hover { transform: translateY(-6px); box-shadow: 0 18px 44px -14px rgba(233,185,138,.35); }

/* FAQ: smooth open/close (height animated in script.js) */
.faq details { overflow: hidden; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .6rem; height: .6rem;
  border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
  transform: rotate(45deg) translate(-2px, -2px);
}
.motion .faq summary::after { transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Mobile menu slides down */
.motion .site-nav.open { animation: menu-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Signup confirmation */
.form-status.ok { color: var(--sand); }
.form-status.ok::before {
  content: "✓"; display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; margin-right: .5rem; border-radius: 50%;
  background: var(--sand); color: var(--ink); font-size: .85rem; font-weight: 700;
  box-shadow: 0 0 14px rgba(233,185,138,.6);
}
.light .form-status.ok { color: var(--ink); }
.motion .form-status.ok::before { animation: bike-ring .7s ease-out; }
.form-status.err { color: #f0b9a0; }

/* 3. Parallax rock: the texture sits on its own layer and drifts slower than the page */
.px { position: relative; isolation: isolate; }
.px::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; z-index: -1;
  background: inherit;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
  pointer-events: none;
}
.px { overflow: hidden; }

/* =========================================================
   MOBILE BREATHING ROOM (phones only, desktop unchanged)
   Wider side margins, taller sections, more space between
   label → heading → text, and full-width tap targets.
   ========================================================= */
@media (max-width: 40rem) {
  :root { --gutter: 1.5rem; --section: 5.75rem; }
  body { line-height: 1.7; }
  p { margin-bottom: 1.25em; }

  .eyebrow { margin-bottom: 1.4rem; font-size: .74rem; }
  h2 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); line-height: 1.12; }
  .section h2 + p, .section h2 + .lede, .section h2 + .muted { margin-top: 1.5rem !important; }
  .lede { font-size: 1.12rem; margin-bottom: 3rem; }
  .text-link { display: inline-block; margin-top: .75rem; }

  /* Header */
  .site-header { padding: 1.1rem var(--gutter); }
  .site-nav.open { gap: 1.6rem; padding: 1.75rem 0 1.25rem; }
  .nav-left, .nav-right { gap: 1.5rem; }

  /* Hero */
  .hero-inner { padding: 2.25rem var(--gutter) 4.5rem; gap: 2rem; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 2.9rem); line-height: 1.08; }
  .hero-side p { font-size: 1.08rem; }
  .hero-actions { flex-direction: column; gap: .9rem; margin-top: 2rem; }
  .hero-actions .btn { width: 100%; padding: 1.05rem 1.5rem; }

  /* Experience */
  .experience .statement { font-size: 1.5rem; line-height: 1.35; margin-bottom: 3.75rem; }
  .pillars { gap: 3rem; padding-top: 3rem; }
  .pillars h3 { margin-bottom: .75rem; }

  /* Rides */
  .rides-grid { gap: 3rem; }
  .ride-list li { padding: 2rem 0; gap: .75rem; }
  .ride-tags { margin-top: 1rem !important; }
  .ride-promise { margin-top: 3.5rem; font-size: 1.3rem; }

  /* Bike */
  .bike-grid { gap: 3.5rem; }
  .bike-specs { margin-top: 2.5rem; }
  .bike-specs div { padding: 1.25rem 0; }
  .bike-figure { gap: 1.25rem; }

  /* Class rows (Up next + Schedule) */
  .section-head { margin-bottom: 2.75rem; gap: 1rem; }
  .sample-note { margin-bottom: 2.5rem; }
  .class-row { padding: 1.6rem 0; gap: .5rem 1.25rem; }
  .class-action { margin-top: .9rem; }

  /* Instructors */
  .coaches { gap: 1.5rem; }
  .portrait { min-height: 15rem; }
  .coach-body, .audition-card { padding: 2.25rem 1.5rem; }
  .coach-name { margin-bottom: .9rem; }
  .audition-card { gap: 2rem; }
  .audition-card .btn { width: 100%; }
  .audition-card h3 { margin-bottom: 1rem; }
  .give-back strong { margin-bottom: .4rem; }

  /* Who it's for */
  .riders { margin: 3rem 0 3.5rem; }
  .riders li { padding: 1.35rem 0; font-size: 1.3rem; line-height: 1.35; }
  .split { gap: 2.5rem; }
  .belong { font-size: 1.25rem; line-height: 1.5; }

  /* Before & after: stack each amenity instead of squeezing two columns */
  .amenities { gap: 3rem; }
  .amenity-list { margin-top: 2.5rem; }
  .amenity-list div { flex-direction: column; gap: .3rem; padding: 1.15rem 0; }
  .amenity-list dd { text-align: left; }

  /* Membership + community */
  .membership-grid { gap: 3rem; }
  .founding-card { padding: 2.25rem 1.5rem; }
  .founding-card ul { margin-bottom: 2rem; }
  .founding-card ul li + li { margin-top: .35rem; }
  .community h2 { margin-bottom: 2.25rem; }
  .give-back li { padding: 1.35rem 0; }

  /* Visit */
  .visit-grid { gap: 3rem; }
  .hours { gap: .6rem 1.5rem; margin: 2rem 0; }
  .map-box { min-height: 15rem; }

  /* Final CTA + signup forms: full-width field and button */
  .final { padding: 6.5rem 0; }
  .final h2 { font-size: clamp(2rem, 9.5vw, 2.6rem); margin-bottom: 1.75rem; }
  .signup { margin-top: 2.5rem; }
  .signup-row { flex-direction: column; gap: .8rem; }
  .signup input, .signup .btn { width: 100%; flex: none; }
  .signup input { padding: 1rem 1.25rem; }
  .signup .btn { padding: 1rem 1.5rem; }

  /* Footer: two link columns side by side, roomier taps */
  .site-footer { padding: 4.5rem 0 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 3rem 1.5rem; }
  .footer-grid > :first-child, .footer-signup { grid-column: 1 / -1; }
  .site-footer ul { gap: 1rem; }
  .footer-signup .eyebrow { margin-bottom: 1rem; }
  .fine { flex-direction: column; gap: .5rem; margin-top: 3.5rem; }

  /* Inner pages */
  .page-top { padding: 7.75rem 0 3.25rem; }
  .page-head { gap: 1.75rem; }

  /* Schedule */
  .week { margin-bottom: 2rem; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 2.75rem; }
  .filters label:last-child { grid-column: 1 / -1; }
  .filters select { min-width: 0; width: 100%; padding: .8rem 2rem .8rem .9rem; }
  .day-title { margin-bottom: .75rem; }

  /* Book */
  .book-grid { gap: 2.5rem; }
  .room { padding: 2rem 1.25rem; }
  .room-head { margin-bottom: 2rem; }
  .bikes { gap: .7rem; }
  .podium { margin-bottom: 2rem; }
  .summary { padding: 2rem 1.5rem; position: static; }

  /* Memberships */
  .intro-offer { padding: 2rem 1.5rem; gap: 1.75rem; margin-bottom: 3.5rem; }
  .intro-offer .btn { width: 100%; }
  .tabs { margin-bottom: 2rem; }
  .plans { gap: 1.5rem; }
  .plan { padding: 2rem 1.5rem; }
  .plan ul { margin-bottom: 2rem; }
  .plans-note { margin-top: 1.5rem; }
  .perks { padding: 2rem 1.5rem; margin-top: 2.5rem; gap: 1.25rem; }
  .perks ul { flex-direction: column; gap: .8rem; }
  .extras { padding: 2rem 1.5rem; gap: 2.25rem; margin-top: 3.5rem; }
  .faq summary { padding: 1.4rem 0; font-size: 1.05rem; line-height: 1.35; }
  .faq details p { margin-bottom: 1.5rem; }
}
@media (max-width: 40rem) {
  .sched-row, .class-row { grid-template-columns: 5.4rem 1fr; }
  .class-time { font-size: 1.05rem; white-space: nowrap; }
  .tab { white-space: nowrap; letter-spacing: .1em; font-size: .72rem; padding: .85rem .7rem; }
  .summary select { font-size: .95rem; }
}

/* =========================================================
   MOBILE LAYOUT, after ouraring.com's phone patterns:
   one idea per screen (centered statement + single pill),
   swipeable rounded cards, image-first feature blocks,
   round header icon button, footer email with inline arrow.
   ========================================================= */
.nav-bars { display: none; }

@media (max-width: 40rem) {
  :root { --radius: 18px; }

  /* Round icon menu button */
  .nav-toggle {
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid rgba(234,227,215,.45);
  }
  .nav-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-bars, .nav-bars::before, .nav-bars::after {
    display: block; width: 1.05rem; height: 1.5px; background: var(--linen); border-radius: 2px;
    transition: transform .3s, background-color .3s;
  }
  .nav-bars { position: relative; }
  .nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
  .nav-bars::before { top: -5px; } .nav-bars::after { top: 5px; }
  .nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-bars::after { transform: translateY(-5px) rotate(-45deg); }

  /* Statement headings: larger, a touch lighter, more air */
  h2 { font-size: clamp(2.2rem, 10vw, 2.7rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
  .lede, .hero-side p { font-size: 1.2rem; line-height: 1.55; }

  /* Hero: centered, one idea, compact pills */
  .hero-inner { text-align: center; justify-items: center; padding-top: 2.75rem; padding-bottom: 5rem; }
  .hero-side p { margin-left: auto; margin-right: auto; }
  .hero-actions { align-items: center; }
  .hero-actions .btn { width: auto; min-width: 15rem; }

  /* Centered section intros (statement pattern) */
  .rides-grid > :first-child,
  #who > .wrap > .eyebrow, #who > .wrap > h2,
  .membership-grid > :first-child,
  .community > .wrap > .eyebrow, .community > .wrap > h2,
  #instructors .section-head { text-align: center; }
  #instructors .section-head { justify-content: center; }
  .rides-grid > :first-child p, .membership-grid > :first-child p { margin-left: auto; margin-right: auto; max-width: 22em; }
  #who > .wrap > h2 { margin-left: auto; margin-right: auto; max-width: 11em; }

  /* Rounded cards and images */
  .coach-card, .audition-card, .portrait, .founding-card, .map-box, .room, .summary,
  .plan, .intro-offer, .perks, .extras, .amenities img, .sample-note { border-radius: var(--radius); }
  .coach-card { overflow: hidden; }
  .portrait { border-radius: var(--radius) var(--radius) 0 0; border: 0; }
  .founding-card .btn, .plan .btn, .intro-offer .btn, .audition-card .btn { width: 100%; }

  /* Swipeable card rows: pillars, rides, plans */
  .pillars, .ride-list, .plans {
    display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) .5rem; scroll-padding: 0 var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-top: 0;
  }
  .pillars::-webkit-scrollbar, .ride-list::-webkit-scrollbar, .plans::-webkit-scrollbar { display: none; }
  .pillars > *, .ride-list > li, .plans > .plan { flex: 0 0 82%; scroll-snap-align: start; }

  .pillars { padding-top: 0; margin-top: -1rem; }
  .pillars > div {
    background: rgba(36,35,33,.62); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 2rem 1.5rem; backdrop-filter: blur(2px);
  }
  .ride-list li {
    display: flex; flex-direction: column; gap: .9rem;
    border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem;
    background: linear-gradient(rgba(57,57,57,.86), rgba(57,57,57,.93)), url("images/rock-stone.jpg") center / cover;
  }
  .ride-list h3 { font-size: 1.7rem; }
  .ride-promise { text-align: center; }
  .plans { padding-top: .5rem; padding-bottom: 1rem; }

  .swipe-hint {
    display: block; text-align: center; margin: 1rem 0 0;
    font: 500 .7rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
  }

  /* Image-first feature blocks */
  .bike-figure { order: -1; background: #f3eee5; border-radius: var(--radius); padding: 1.75rem 1.25rem; }
  .bike-grid { display: flex; flex-direction: column; }

  /* Footer: large wordmark, inline arrow on the email field */
  .site-footer .footer-grid > :first-child .brand-mark { width: 2.6rem; height: 2.6rem; }
  .site-footer .footer-grid > :first-child .brand-word { font-size: 1.35rem; letter-spacing: .2em; }
  .footer-signup .signup-row { position: relative; flex-direction: row; }
  .footer-signup .signup input { padding: 1rem 4rem 1rem 1.25rem; }
  .footer-signup .signup .btn {
    position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
    width: 2.8rem; height: 2.8rem; padding: 0; border-radius: 50%; font-size: 0;
  }
  .footer-signup .signup .btn::before { content: "→"; font-size: 1.15rem; letter-spacing: 0; }
}
@media (min-width: 40.01rem) { .swipe-hint { display: none; } }
@media (max-width: 40rem) { .rides-grid > *, .membership-grid > *, .bike-grid > *, .wrap > * { min-width: 0; } }

/* =========================================================
   BRAND MENU STATE, BIKE DETAIL TILE, MOBILE MOTION
   ========================================================= */

/* Menu: the page or section you're on, and the link you tap, glow in cove-light gold */
.site-header nav a:not(.btn) { transition: color .3s, text-shadow .3s, opacity .3s; }
.site-header nav a:not(.btn)[aria-current],
.site-header nav a:not(.btn).picked,
.site-header nav a:not(.btn):active {
  color: var(--glow); opacity: 1;
  text-decoration-color: var(--glow);
  text-shadow: 0 0 14px rgba(233,185,138,.55);
}
.site-header nav a.btn.picked { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 24px -2px rgba(233,185,138,.75); }
.motion .site-header nav a:not(.btn).picked { animation: nav-pick .55s ease-out; }
@keyframes nav-pick {
  0%   { text-shadow: 0 0 0 rgba(233,185,138,0); transform: none; }
  40%  { text-shadow: 0 0 24px rgba(233,185,138,.95); transform: translateX(4px); }
  100% { text-shadow: 0 0 14px rgba(233,185,138,.55); transform: translateX(4px); }
}
@media (max-width: 72rem) {
  /* A short glowing bar marks the current item in the open menu */
  .site-nav a:not(.btn) { position: relative; display: inline-block; }
  .site-nav a:not(.btn)[aria-current]::after, .site-nav a:not(.btn).picked::after {
    content: ""; position: absolute; left: -1rem; top: 50%; width: 3px; height: 1.1em; transform: translateY(-50%);
    border-radius: 2px; background: var(--glow); box-shadow: 0 0 10px 1px rgba(233,185,138,.7);
  }
  .site-nav a:not(.btn)[aria-current], .site-nav a:not(.btn).picked { text-decoration: none; }
  /* Menu items cascade in */
  .motion .site-nav.open a { animation: row-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  .motion .site-nav.open a.picked:not(.btn) { animation: nav-pick .55s ease-out both; }
}

/* Bike close-up: its own rounded tile, so the photo's cropped edges run off the frame on purpose */
.bike-detail-tile {
  align-self: start; overflow: hidden; isolation: isolate;
  border-radius: 18px; background: #e2d9c8;
  aspect-ratio: 1010 / 968;
}
.bike-detail-tile .bike-detail { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) {
  .bike-figure { grid-template-columns: 1.25fr 1fr; align-items: center; }
  .bike-detail-tile { align-self: center; border-radius: 14px; background: #e6decf; }
}

/* Mobile motion: scroll reveals, card rows, swipe focus */
@media (max-width: 40rem) {
  .motion .reveal {
    opacity: 0; transform: translateY(26px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms);
  }
  .motion .reveal.in { opacity: 1; transform: none; }

  /* Headings come up a touch further, like a curtain lifting */
  .motion .section h2.reveal, .motion .final h2.reveal { transform: translateY(40px); clip-path: inset(0 0 100% 0); transition-property: opacity, transform, clip-path; }
  .motion .section h2.reveal.in, .motion .final h2.reveal.in { transform: none; clip-path: inset(0 0 -20% 0); }

  /* Card rows: the row stays put, its cards deal in from the right */
  .motion .pillars.reveal, .motion .ride-list.reveal { opacity: 1; transform: none; }
  .motion .pillars.reveal > *, .motion .ride-list.reveal > * {
    opacity: 0; transform: translateX(48px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), filter .45s;
    transition-delay: calc(var(--k, 0) * 110ms + 120ms), calc(var(--k, 0) * 110ms + 120ms), 0s, 0s;
  }
  .motion .pillars.reveal.in > *, .motion .ride-list.reveal.in > * { opacity: 1; transform: none; }

  /* Bike: the photo settles in from slightly larger */
  .motion .bike-figure.reveal { transform: scale(1.05); }
  .motion .bike-figure.reveal.in { transform: none; }

  /* Swipe rows: the card in view comes forward */
  .motion .swipe-row > * { transition: scale .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
  .motion .swipe-row > :not(.is-active) { scale: .95; filter: brightness(.72); }
  .motion .swipe-row > .is-active { box-shadow: 0 18px 40px -22px rgba(233,185,138,.4); }

  /* Buttons press in and glow on tap */
  .motion .btn:not([disabled]):active { transform: scale(.96); box-shadow: 0 0 26px -4px rgba(233,185,138,.7); }

  /* Up next + schedule rows: the time picks up a soft glow when tapped */
  .class-row:active .class-time { color: var(--glow); text-shadow: 0 0 12px rgba(233,185,138,.5); }
}

/* =========================================================
   HERO: studio bike image
   The bike sits right of center, so the copy takes the darker
   left side on wide screens and the image is anchored on the bike.
   ========================================================= */
.hero-img { object-position: 64% 50%; }
@media (min-width: 56rem) {
  .hero { min-height: 100svh; align-items: center; }
  .hero-shade {
    background:
      linear-gradient(to right, rgba(36,35,33,.88) 0%, rgba(36,35,33,.55) 32%, rgba(36,35,33,0) 58%),
      linear-gradient(to top, var(--ink) 0%, rgba(43,42,40,0) 30%);
  }
  .hero-inner { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 8rem; padding-bottom: 6rem; align-items: center; }
  .hero-inner > * { max-width: 34rem; }
  .hero h1 { white-space: normal; font-size: clamp(2.6rem, 4.4vw, 4.1rem); line-height: 1.04; }
}
@media (min-width: 40.01rem) and (max-width: 55.99rem) {
  .hero-shade { background: linear-gradient(to top, var(--ink) 8%, rgba(43,42,40,.6) 45%, rgba(43,42,40,.15) 80%); }
}
@media (max-width: 40rem) {
  .hero-img { aspect-ratio: 4 / 3.3; object-position: 66% 50%; }
  .hero-shade { height: calc(100vw * 3.3 / 4); }
}
@media (min-width: 56rem) {
  /* Wider image layer anchored left pushes the bike right, clear of the copy */
  .hero-img { width: 118%; left: 0; right: auto; object-position: 0 58%; }
}
@media (min-width: 56rem) and (max-width: 80rem) { .hero-inner > * { max-width: 29rem; } }
@media (min-width: 56rem) and (max-width: 80rem) {
  .hero-img { width: 100%; object-position: 70% 50%; }
}
@media (min-width: 56rem) and (max-width: 80rem) {
  .hero-shade { background: linear-gradient(to right, rgba(36,35,33,.92) 0%, rgba(36,35,33,.7) 38%, rgba(36,35,33,0) 66%), linear-gradient(to top, var(--ink) 0%, rgba(43,42,40,0) 30%); }
}
@media (min-width: 56rem) {
  /* Pin hero copy to the left edge so wide screens never push it into the bike */
  .hero-inner { max-width: none; margin: 0; padding-left: clamp(2.5rem, 7vw, 8rem); padding-right: 2.5rem; }
}
@media (min-width: 80.01rem) { .hero-inner > * { max-width: 40rem; } }
@media (min-width: 80.01rem) and (max-width: 110rem) { .hero h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); } }

/* =========================================================
   HERO LIGHTS-UP REVEAL
   Three stacked copies of the same photo: a dark room, the two
   light strips only, and the fully lit scene. The strips flicker
   on, then warm light spreads until the bike is revealed.
   Without motion (or JS), only the lit photo shows.
   ========================================================= */
.hero-layer-strips, .hero-layer-lit { position: absolute !important; top: 0; left: 0; }
@media (max-width: 40rem) { .hero-layer-strips, .hero-layer-lit { width: 100%; } }

.motion .hero .hero-img { animation: none; }
.motion .hero .hero-layer-strips, .motion .hero .hero-layer-lit { opacity: 0; }
.motion .hero .hero-inner > * { animation: none; opacity: 0; }

.motion .hero.go .hero-layer-strips { animation: strips-on 1.5s .45s linear forwards; }
.motion .hero.go .hero-layer-lit { animation: lights-spread 3.6s 1.9s cubic-bezier(.45,0,.2,1) forwards; }
.motion .hero.go .hero-inner > * { animation: rise 1s 2.6s cubic-bezier(.2,.7,.2,1) both; }
.motion .hero.go .hero-inner > :nth-child(2) { animation-delay: 2.95s; }

@keyframes strips-on {
  0%   { opacity: 0; }
  10%  { opacity: .85; }  12% { opacity: .1; }
  22%  { opacity: 1; }    25% { opacity: .25; }
  30%  { opacity: .25; }  34% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes lights-spread {
  0%   { opacity: 0;   filter: brightness(.55) saturate(.8); transform: scale(1.035); }
  35%  { opacity: .45; filter: brightness(.75) saturate(.9); }
  100% { opacity: 1;   filter: none; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   HERO HEADLINE: "This is your house."
   Always one line. On load the words appear one by one, the
   line glows like neon once, then settles to solid white.
   ========================================================= */
.hero .hero-title {
  white-space: nowrap;
  color: #fff;
  line-height: 1.04;
  /* sized so the full line always fits its column */
  font-size: min(clamp(2.4rem, 3.9vw, 4.5rem), calc((100vw - 2 * var(--gutter)) / 13.6));
}
.hero .hero-title .w { display: inline-block; }
@media (min-width: 56rem) {
  .hero-inner > div:first-child { max-width: none; }
}

.motion .hero .hero-title { animation: none; }
.motion .hero .hero-title .w { opacity: 0; }
.motion .hero.go .hero-title .w {
  animation: word-in .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(2.7s + var(--i) * .34s);
}
.motion .hero.go .hero-title { animation: neon-once 1.9s 4.35s ease-out both; }

@keyframes word-in {
  from { opacity: 0; transform: translateY(.18em); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes neon-once {
  0%   { text-shadow: none; }
  14%  { text-shadow: 0 0 4px #fff, 0 0 12px rgba(255,236,210,.9), 0 0 28px rgba(233,185,138,.9), 0 0 60px rgba(233,185,138,.65); }
  20%  { text-shadow: 0 0 2px #fff, 0 0 6px rgba(255,236,210,.4), 0 0 14px rgba(233,185,138,.35); }
  28%  { text-shadow: 0 0 4px #fff, 0 0 12px rgba(255,236,210,.9), 0 0 28px rgba(233,185,138,.9), 0 0 60px rgba(233,185,138,.65); }
  62%  { text-shadow: 0 0 4px #fff, 0 0 12px rgba(255,236,210,.85), 0 0 26px rgba(233,185,138,.8), 0 0 54px rgba(233,185,138,.55); }
  100% { text-shadow: none; }
}

/* Katy's photo */
.coach-photo { display: block; width: 100%; height: 100%; min-height: 18rem; max-height: 34rem; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 35.99rem) { .coach-photo { aspect-ratio: 4 / 5; height: auto; } }