:root{
  --marken-vh:100vh;
}

@supports (height: 100dvh){
  :root{
    --marken-vh:100dvh;
  }
}

body.marken-page{
  scroll-snap-type:y mandatory;
  scroll-padding-top:0;
  background:#0a0a0b;
}

body.marken-page .site-footer{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

html.marken-rubber-snap body.marken-page{
  scroll-snap-type:none;
}

html.marken-rubber-snap body.marken-page .marken-hero,
html.marken-rubber-snap body.marken-page .brand-story,
html.marken-rubber-snap body.marken-page .site-footer{
  scroll-snap-align:none;
  scroll-snap-stop:normal;
}

.marken-main{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

.marken-main section{
  margin-top:0;
}

.marken-hero{
  position:relative;
  width:100vw;
  min-height:var(--marken-vh);
  height:var(--marken-vh);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 52px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 14px);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.marken-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
}

.marken-hero__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 600px at 72% 78%, rgba(163, 169, 180, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(10,10,11,0.20) 0%, rgba(10,10,11,0.74) 72%, rgba(10,10,11,0.95) 100%);
  z-index:1;
  pointer-events:none;
}

.marken-hero__content{
  position:relative;
  z-index:3;
  width:min(1100px, calc(100% - 34px));
  margin:0 auto;
  padding:18px 18px 6px;
  color:#ffffff;
}

.marken-eyebrow{
  margin:0 0 12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
}

.marken-hero__content h1{
  margin:0;
  font-size:clamp(32px, 5.3vw, 66px);
  line-height:1.03;
  color:#ffffff;
}

.marken-hero__content p{
  margin:14px 0 0;
  max-width:60ch;
  color:rgba(255,255,255,0.82);
  line-height:1.6;
}

.marken-hero .section-cta{
  margin-top:20px;
}

.marken-hero .cta-primary{
  background-color:rgba(255,255,255,0.24);
  border-color:rgba(255,255,255,0.45);
  color:#ffffff;
  --cta-text:#ffffff;
  --cta-fill:rgba(24,24,26,0.92);
}

.marken-hero .cta-secondary{
  background-color:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.35);
  color:#ffffff;
  --cta-text:#ffffff;
  --cta-fill:rgba(255,255,255,0.92);
}

.marken-hero .cta-secondary::after{
  color:#111318;
}

.brand-carousel-shell{
  position:relative;
  z-index:3;
  width:100%;
  margin-top:30px;
  padding:14px 0 24px;
  overflow:visible;
}

.brand-carousel{
  position:relative;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:auto;
  overscroll-behavior-x:contain;
  touch-action:pan-x pinch-zoom;
  cursor:grab;
}

.brand-carousel:active{
  cursor:grabbing;
}

.brand-carousel::-webkit-scrollbar{
  display:none;
}

.brand-track{
  display:flex;
  align-items:center;
  gap:14px;
  width:max-content;
  min-width:max-content;
  padding:0 16px;
  will-change:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.brand-chip{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  min-width:240px;
  min-height:90px;
  padding:10px 18px;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  color:inherit;
  text-align:inherit;
  cursor:pointer;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.29);
  background:rgba(255,255,255,0.11);
  backdrop-filter:blur(14px) saturate(175%);
  -webkit-backdrop-filter:blur(14px) saturate(175%);
  box-shadow:none;
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-chip:hover,
.brand-chip:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.18);
}

.brand-chip:focus-visible{
  outline:2px solid rgba(255,255,255,0.58);
  outline-offset:2px;
}

.brand-chip__logo{
  width:176px;
  height:58px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.brand-story{
  position:relative;
  width:100vw;
  min-height:var(--marken-vh);
  height:var(--marken-vh);
  --bike-entry-x:-44vw;
  --bike-entry-rotate:-7deg;
  --bike-entry-x-mobile:-34vw;
  --bike-entry-rotate-mobile:-6deg;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:calc(var(--nav-h) + env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px);
  background:
    radial-gradient(980px 520px at 14% 48%, var(--brand-glow), rgba(12,12,13,0) 64%),
    linear-gradient(180deg, #141517 0%, #0a0a0b 100%);
  border-top:1px solid rgba(255,255,255,0.08);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  box-sizing:border-box;
}

.brand-story__inner{
  width:min(1180px, calc(100% - 36px));
  height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  min-height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  max-height:880px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,0.26);
  background:
    linear-gradient(130deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.09) 100%);
  backdrop-filter:blur(16px) saturate(165%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:0 26px 64px rgba(0,0,0,0.36);
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:16px;
  padding:30px 26px;
  position:relative;
  overflow:hidden;
  contain:layout paint;
}

@media (hover: none) and (pointer: coarse){
  .brand-chip{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .brand-story__inner{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 16px 36px rgba(0,0,0,0.24);
  }

  .brand-story__price-card{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .brand-story__bike img{
    filter:none;
    box-shadow:none;
  }
}

html.ios-marken-perf .brand-story__price-card{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html.ios-marken-perf .brand-story__bike img{
  filter:none;
  box-shadow:none;
}

.brand-story__inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  border:1px solid var(--brand-accent);
  pointer-events:none;
}

.brand-story__bike{
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:0;
}

.brand-story__bike img{
  width:min(92%, 720px);
  max-width:720px;
  max-height:min(100%, 460px);
  object-fit:contain;
  backface-visibility:hidden;
  transform:translate3d(var(--bike-entry-x), 0, 0) rotate(var(--bike-entry-rotate));
  opacity:0;
  filter:drop-shadow(0 24px 38px rgba(0,0,0,0.45));
  transition:
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-story__copy{
  min-width:0;
  padding:10px 8px;
  backface-visibility:hidden;
  opacity:0;
  transform:translate3d(48px, 0, 0);
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay:120ms;
}

.brand-story__copy h2{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.04em;
  color:#ffffff;
  font-size:clamp(34px, 5.4vw, 74px);
  line-height:0.98;
}

.brand-story__title-brand,
.brand-story__title-model{
  min-width:0;
  display:block;
}

.brand-story__title-brand{
  display:flex;
  align-items:center;
  min-height:clamp(30px, 4.6vw, 56px);
}

.brand-story__title-brand-logo{
  display:block;
  width:clamp(170px, 20vw, 300px);
  max-width:100%;
  height:clamp(28px, 4.4vw, 54px);
  object-fit:contain;
  object-position:left center;
  filter:brightness(0) invert(1);
}

.brand-story__badges {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.44);
  background: rgba(255,255,255,0.2);
  color: #fff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand-badge.is-muted {
  background: rgba(139,16,40,0.35);
  border-color: rgba(255,192,202,0.48);
}

.brand-story__price-card{
  margin:14px 0 0;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:fit-content;
  max-width:100%;
  padding:6px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.34);
  background:rgba(255,255,255,0.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-decoration:none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.brand-story__price-card:hover,
.brand-story__price-card:focus-visible{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.44);
  transform:translateY(-1px);
}

.brand-story__price-card:focus-visible{
  outline:2px solid rgba(255,255,255,0.42);
  outline-offset:2px;
}

.brand-story__price-value{
  font-size:16px;
  line-height:1.1;
  color:rgba(255,255,255,0.86);
  letter-spacing:-0.005em;
  font-weight:600;
}

.brand-story__copy p{
  margin:14px 0 0;
  color:rgba(255,255,255,0.82);
  font-size:17px;
  line-height:1.63;
  max-width:34ch;
}

.brand-story .section-cta{
  margin-top:22px;
}

.brand-story .cta-primary{
  background-color:rgba(255,255,255,0.22);
  border-color:rgba(255,255,255,0.38);
  color:#ffffff;
  --cta-text:#ffffff;
  --cta-fill:rgba(22,22,24,0.92);
}

.brand-story .cta-secondary{
  background-color:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.32);
  color:#ffffff;
  --cta-text:#ffffff;
  --cta-fill:rgba(255,255,255,0.92);
}

.brand-story .cta-secondary::after{
  color:#111318;
}

.brand-story.is-active .brand-story__bike img{
  transform:translate3d(0, 0, 0) rotate(0deg);
  opacity:1;
}

.brand-story.is-active .brand-story__copy{
  transform:translate3d(0, 0, 0);
  opacity:1;
}

@media (max-width: 1024px){
  .brand-story__inner{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0, 44%) minmax(0, 56%);
    gap:0;
    padding:16px 16px 20px;
    height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px);
    min-height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 14px);
    max-height:860px;
  }

  .brand-story__bike{
    justify-content:center;
    min-height:0;
  }

  .brand-story__bike img{
    width:min(88%, 620px);
    max-height:100%;
    transform:translate3d(var(--bike-entry-x-mobile), 0, 0) rotate(var(--bike-entry-rotate-mobile));
    filter:none;
    box-shadow:none;
  }

  .brand-story__copy{
    min-height:0;
    margin-top:8px;
    padding:8px 2px;
    display:flex;
    flex-direction:column;
  }

  .brand-story__copy h2{
    font-size:clamp(32px, 10vw, 52px);
  }

  .brand-story__title-brand-logo{
    width:clamp(140px, 46vw, 220px);
    height:clamp(24px, 8vw, 40px);
  }

  .brand-story__copy p{
    max-width:58ch;
  }

  .brand-story{
    padding:calc(var(--nav-h) + env(safe-area-inset-top) + 7px) 0 calc(env(safe-area-inset-bottom) + 7px);
  }

  .brand-story .section-cta{
    margin-top:auto;
    padding-top:16px;
  }
}

@media (max-width: 1024px){
  .marken-hero{
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 36px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 10px);
  }

  .marken-hero__content{
    width:calc(100% - 22px);
    padding:14px 10px 4px;
  }

  .marken-hero__content h1{
    font-size:clamp(28px, 11vw, 44px);
  }

  .marken-hero__content p{
    max-width:46ch;
  }

  .marken-hero .section-cta,
  .brand-story .section-cta{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .marken-hero .section-cta a,
  .brand-story .section-cta a{
    width:100%;
    min-width:0;
    padding:0 10px;
    font-size:14px;
  }

  .marken-hero .section-cta .cta-primary::after,
  .marken-hero .section-cta .cta-secondary::after,
  .brand-story .section-cta .cta-primary::after,
  .brand-story .section-cta .cta-secondary::after{
    padding:0 10px;
  }

  .brand-chip{
    min-width:228px;
    min-height:84px;
    border-radius:18px;
  }

  .brand-chip__logo{
    width:160px;
    height:54px;
  }

  .brand-story{
    padding:calc(var(--nav-h) + env(safe-area-inset-top) + 6px) 0 calc(env(safe-area-inset-bottom) + 6px);
  }

  .brand-story__inner{
    width:calc(100% - 16px);
    height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
    min-height:calc(var(--marken-vh) - var(--nav-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
    max-height:820px;
  }

  .brand-story__bike img{
    width:min(86%, 520px);
  }
}

@media (prefers-reduced-motion: reduce){
  .brand-story__bike img,
  .brand-story__copy{
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
}