/* V2 — six viewport scenes, retaining the V1 hero and shop interactions. */

.hero.scene{padding-top:148px}.hero-bottom{height:64px}.hero-stage{bottom:80px}.hero-copy h1{font-size:clamp(80px,min(7.4vw,14vh),144px)}
.collection-content{display:flex;flex-direction:column;justify-content:safe center;gap:clamp(20px,3.5vh,45px)}.collection .section-heading{margin-bottom:0;flex-shrink:0}.collection h2{font-size:clamp(36px,4.4vw,76px)}.collection .eyebrow{margin-bottom:16px}.collection .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;flex-shrink:0}/* Photo cards retain the supplied 3:2 composition; labels sit outside the image. */
.panorama-card{position:relative;display:block;aspect-ratio:auto;text-align:left;padding:0;color:var(--ink);border-radius:0;background:transparent;isolation:isolate}
.panorama-photo{display:block;overflow:hidden;border-radius:3px;aspect-ratio:1600/1067;background:#d6dbd0}
.panorama-photo img{display:block;width:100%;height:auto;transition:transform 1s var(--ease)}
.panorama-card .cat-top{position:static;display:flex;justify-content:space-between;gap:10px;padding:0 0 12px;font-size:10px}
.panorama-card .category-bottom{position:static;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 0}
.panorama-card .category-bottom>span:first-child{font-size:clamp(20px,1.85vw,32px);letter-spacing:-.04em;line-height:1.08}
.panorama-card .category-bottom br{display:none}
.panorama-card:hover .circle-arrow{background:var(--ink);color:var(--paper);transform:rotate(45deg)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.panorama-card:hover .panorama-photo img{transform:scale(1.018)}}
.collection .brand-strip{padding:24px 0 0;border:0;border-top:1px solid var(--line);margin-top:0;flex-shrink:0;gap:20px}.brand-strip>.micro{font-size:9px}
.selection-content{display:flex;flex-direction:column}.selection .section-heading{margin-bottom:22px;flex-shrink:0}.selection h2{font-size:clamp(35px,3.9vw,66px)}.selection .eyebrow{margin-bottom:15px}.selection-tabs{flex-shrink:0}.selection-tabs button{font-size:11px;padding:9px 18px}
.statement.scene{display:flex;align-items:center}.statement-content{padding:calc(var(--header-height) + 25px) 8% 65px;max-width:none;width:65%}.statement-content h2{font-size:clamp(64px,8vw,150px);line-height:1.02}.statement-content p{font-size:16px;line-height:1.8;margin:30px 0 35px}.statement-bg{transition:transform 2.3s var(--ease);transform:scale(1.04)}.statement.is-active .statement-bg{transform:scale(1)}.statement-caption{right:var(--scene-pad);bottom:40px}.media-slot-label{position:absolute;right:var(--scene-pad);top:calc(var(--header-height) + 30px);font-size:9px;letter-spacing:1px;color:#e3e8dbb0;border:1px solid #ffffff25;padding:10px 13px;border-radius:2px}.statement-shade{background:linear-gradient(90deg,#111a14eb 0%,#111a14a3 36%,#111a1425 80%)}
.details-content{display:flex;flex-direction:column;justify-content:safe center;gap:clamp(32px,6vh,90px)}.detail-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center}.detail-intro{max-width:none}.detail-intro h2{font-size:clamp(34px,3.5vw,64px)}.detail-intro .eyebrow{line-height:1.7}.bicycle-wrap{display:flex;align-items:center;justify-content:center}.bicycle-drawing{display:block;width:100%;height:auto;max-height:35vh;object-fit:contain}.service-grid{margin-top:0;gap:4vw}.service-grid article{padding-top:22px}.service-grid h3{font-size:clamp(19px,1.7vw,29px);margin:22px 0 14px}.service-grid p{font-size:14px;line-height:1.8;max-width:390px;min-height:75px}.service-grid .text-link{font-size:13px;padding-top:15px}
.closing{padding-top:var(--header-height);background:var(--ink);color:var(--paper);display:flex;flex-direction:column}.closing-scroll{display:flex;flex-direction:column}.closing-top{display:grid;grid-template-columns:1.15fr 1fr;gap:8vw;padding:clamp(22px,4vh,54px) var(--scene-pad);flex:1;align-items:center;min-height:300px}.closing-invite .eyebrow{margin-bottom:20px}.closing-invite h2{font-size:clamp(46px,5.9vw,96px);line-height:1;max-width:680px;margin-bottom:25px}.closing-invite .pill{min-height:46px;padding-left:20px;font-size:11px}.closing-invite .btn-arrow{width:31px;height:31px}.newsletter{max-width:680px}.newsletter>.eyebrow{color:#aab39e;margin-bottom:10px;font-size:9px}.newsletter h3{font-size:clamp(25px,2.4vw,39px);font-weight:500;letter-spacing:-1.1px;margin:0}.newsletter>p{font-size:12px;line-height:1.7;color:#b7beae;margin:10px 0 18px}.newsletter-names{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.newsletter label{display:block;min-width:0}.newsletter label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.newsletter input{width:100%;background:#ffffff08;border:1px solid #ffffff26;border-radius:0;color:#f5f5ef;padding:12px 15px;min-height:42px;font-size:12px}.newsletter input::placeholder{color:#bdc4b7;opacity:1}.newsletter input:disabled{opacity:1;-webkit-text-fill-color:#bdc4b7}.newsletter-email{display:flex;gap:10px}.newsletter-email label{flex:1}.newsletter-email button{border:1px solid #7d8670;padding:10px 18px;color:#e4e9dc;font-size:11px;white-space:nowrap}.newsletter-email button span{margin-left:14px}.newsletter-email button:disabled{cursor:not-allowed;opacity:.72}#newsletter-status{font-size:10px;line-height:1.5;color:#a3ad98;margin:10px 0 0}


@media(min-width:1800px){.collection-content{gap:4vh}.collection .category-grid{gap:25px}.collection .brand-strip{padding-top:3vh}.newsletter input{min-height:48px}.newsletter>p{font-size:14px}.closing-top{padding-top:5vh;padding-bottom:5vh}}
@media(max-height:800px) and (min-width:761px){.hero.scene{padding-top:105px}.hero-copy{padding-top:20px}.hero-copy h1{font-size:clamp(70px,12vh,105px)}.hero-copy p{margin:18px 0;font-size:13px}.hero-stage{top:90px;bottom:70px}.hero-bottom{height:55px}.collection h2{font-size:43px}.collection .eyebrow{margin-bottom:10px}.collection-content{gap:20px}.collection .brand-strip{padding-top:18px}.selection .section-heading{margin-bottom:14px}.selection h2{font-size:38px}.selection .eyebrow{margin-bottom:10px}.closing-top{min-height:270px;padding-top:20px;padding-bottom:20px}.closing-invite h2{font-size:58px;margin-bottom:20px}.bicycle-drawing{max-height:30vh}.details-content{gap:32px}}
@media(max-width:1100px) and (min-width:761px){.collection h2{font-size:45px}.panorama-card .cat-top{font-size:8px;left:16px;right:16px;top:16px}.panorama-card .category-bottom{left:16px;right:16px;bottom:16px}.panorama-card .category-bottom>span:first-child{font-size:20px}.closing-top{gap:5vw}.brand-strip .brand{font-size:20px}}
@media(max-width:760px){.hero.scene{padding:calc(var(--header-height) + 28px) 24px 0}.hero-copy{padding-top:22px;width:100%}.hero-copy h1{font-size:clamp(52px,8.7svh,76px);line-height:.98}.hero-copy h1>span{display:block}.hero-copy p{margin:18px 0;font-size:12px;line-height:1.55}.hero-copy .pill{font-size:11px;min-height:46px;padding-left:18px}.hero-copy .btn-arrow{width:30px;height:30px}.hero-stage{top:43%;bottom:70px;left:0;right:0}.hero-bike{width:100%;height:100%;left:0;top:0}.stage-word{font-size:62vw;top:-1%;right:10px}.stage-ring{width:85vw;height:85vw;top:-5%;right:5%}.stage-note{display:none}.hero-product{left:24px;right:24px;bottom:0;padding-top:9px}.hero-product button[data-product]{font-size:14px}.hero-product .micro{font-size:7px}.hero-bottom{left:24px;right:24px;height:52px;font-size:7px}.hero-bottom>span:last-child{display:none}.hero-bottom a{font-size:10px}.hero-bottom a span{padding-left:8px}.hero-eyebrow{font-size:8px;letter-spacing:1px}.bike-shadow{bottom:21%}.collection-content{justify-content:flex-start;gap:19px}.collection .section-heading{display:block}.collection h2{font-size:36px;line-height:1.05}.collection h2 br{display:none}.collection .eyebrow{font-size:8px;margin-bottom:12px}.collection .section-heading p{font-size:11px;margin:12px 0 0;line-height:1.6;max-width:none}.collection .category-grid{grid-template-columns:1fr;gap:28px}.panorama-card .cat-top{top:12px;left:15px;right:15px;font-size:8px}.panorama-card .category-bottom{bottom:13px;left:15px;right:15px;align-items:center}.panorama-card .category-bottom>span:first-child{font-size:18px}.panorama-card .category-bottom br{display:none}.panorama-card .circle-arrow{height:28px;width:28px;font-size:17px}.collection .brand-strip{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:space-between;padding-top:15px;margin-top:auto}.brand-strip>.micro{display:none}.brand-strip .brand{font-size:16px}.brand.tenways{font-size:14px}.brand.rayvolt{font-size:12px}.brand.rayvolt span{font-size:5px;letter-spacing:5px}.brand.wayel span{font-size:5px}.brand.wayel{font-size:20px}.brand.egret{font-size:21px}.selection .section-heading{margin-bottom:16px}.selection h2{font-size:34px}.selection .section-heading>.text-link{font-size:10px;margin-top:12px;padding:5px 0;gap:20px}.selection .eyebrow{font-size:8px;margin-bottom:12px}.selection-tabs{gap:5px;padding:3px 0 10px;min-height:44px;overflow-x:auto}.selection-tabs button{font-size:10px;padding:8px 12px}.statement-content{width:100%;padding:calc(var(--header-height) + 40px) 24px 55px}.statement-content h2{font-size:clamp(58px,15vw,88px)}.statement-content .eyebrow{font-size:9px}.statement-content p{font-size:14px;line-height:1.8;margin:25px 0 30px}.statement-content .pill{font-size:11px}.statement-bg{object-position:65% center}.statement-shade{background:linear-gradient(90deg,#111a14d9,#111a1470)}.statement-caption{left:24px;right:24px;bottom:25px;font-size:7px}.media-slot-label{left:24px;right:auto;top:calc(var(--header-height) + 18px);font-size:7px;padding:8px 10px}.details-content{justify-content:flex-start;gap:22px}.detail-heading{display:block}.detail-intro .eyebrow{font-size:8px;margin-bottom:13px}.detail-intro h2{font-size:30px;letter-spacing:-1.3px}.bicycle-wrap{margin-top:12px;justify-content:flex-end}.bicycle-drawing{max-height:19svh;width:85%}.service-grid{grid-template-columns:1fr;gap:17px;margin-top:0}.service-grid article{display:grid;grid-template-columns:20px 1fr;gap:0 8px;padding-top:13px}.service-num{font-size:8px;padding-top:3px}.service-grid h3{font-size:19px;margin:0 0 6px}.service-grid p{font-size:11px;line-height:1.6;min-height:0;max-width:none}.service-grid .text-link{font-size:11px;padding:8px 0 0;gap:18px}.closing-top{grid-template-columns:1fr;gap:32px;padding:30px 24px;flex:none;min-height:0}.closing-invite .eyebrow{font-size:8px;margin-bottom:15px}.closing-invite h2{font-size:60px;margin-bottom:22px}.newsletter{padding-top:25px;border-top:1px solid #ffffff24}.newsletter h3{font-size:30px}.newsletter>p{font-size:12px;margin-bottom:15px}.newsletter input{font-size:12px;padding:12px;min-height:44px}.newsletter-email{gap:7px}.newsletter-email button{padding:10px 12px;font-size:10px}.newsletter-email button span{margin-left:5px}#newsletter-status{font-size:10px}}
@media(max-width:760px) and (max-height:740px){.hero.scene{padding-top:calc(var(--header-height) + 20px)}.hero-copy{padding-top:18px}.hero-copy h1{font-size:8.3svh}.hero-copy p{margin:12px 0;font-size:11px}.hero-stage{top:46%;bottom:66px}.hero-product .micro{display:none}.hero-copy .pill{font-size:10px;min-height:42px}.hero-copy .btn-arrow{width:27px;height:27px}.hero-bottom{height:48px}.collection .section-heading p{display:none}.collection-content{gap:15px}.collection h2{font-size:31px}.collection .brand-strip{padding-top:12px;gap:12px}.bicycle-drawing{max-height:17svh}}
@media(prefers-reduced-motion:reduce){.statement-bg{transform:none}}

.collection .brand-strip .brand{margin-left:0;margin-right:0}

@media(max-width:760px){.panorama-card .cat-top{padding-bottom:10px;font-size:9px}.panorama-card .category-bottom{padding-top:12px}.panorama-card .category-bottom>span:first-child{font-size:22px}}
@media(min-width:761px) and (max-height:950px){.collection.scene.section-pad{padding-top:calc(var(--header-height) + 24px);padding-bottom:24px}.collection-content{gap:22px}.collection h2{font-size:clamp(34px,3.8vw,64px)}.collection .brand-strip{padding-top:18px}}

/* Four Gocycle colours, with full-width imagery above the model controls. */
.hero-stage .hero-bike{height:calc(100% - 58px);object-position:center bottom}
.hero-product{gap:12px}
.hero-product>div:first-child{min-width:0}
.hero-product .hero-model-link{font-size:16px;font-weight:600;padding:4px 0;text-align:left;white-space:nowrap}
.hero-model-link>span[aria-hidden]{padding-left:12px}
.hero-product .swatches{gap:0;flex-shrink:0}
.hero-product .swatch{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;padding:0;border:0;background:transparent;box-shadow:none}
.hero-product .swatch:before{content:'';width:18px;height:18px;border-radius:50%;background:var(--swatch);border:2px solid var(--stone);box-shadow:0 0 0 1px #20231e33}
.hero-product .swatch.active:before{box-shadow:0 0 0 1px var(--ink)}
@media(max-width:760px){.hero-stage .hero-bike{height:calc(100% - 50px)}.hero-product .hero-model-link{font-size:13px}.hero-model-link>span[aria-hidden]{padding-left:8px}}

/* On mobile, the bicycle fills the space after the copy instead of overlapping it. */
@media(max-width:760px){
  .hero.scene{display:flex;flex-direction:column;padding-bottom:70px}
  .hero.scene .hero-eyebrow,.hero.scene .hero-copy{flex-shrink:0}
  .hero-copy h1{font-size:clamp(52px,8svh,68px)}
  .hero-copy p{margin:14px 0}
  .hero-stage{position:relative;inset:auto;flex:1 1 0;min-height:0;margin:6px -24px 0}
}
@media(max-width:760px) and (max-height:740px){
  .hero.scene{padding-bottom:66px}
  .hero-copy p{margin:12px 0}
}

/* Both layers share the same geometry; opacity alone changes between colours. */
.hero-bike-layer{animation:none;opacity:0;pointer-events:none;transition:transform 1.1s var(--ease)}
.hero-bike-layer[data-hero-current="true"]{opacity:1}
.hero-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}
.hero-autoplay{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;font-size:14px;line-height:1;flex:0 0 36px}
.hero-autoplay:hover{background:#20231e0c}
@media(max-width:360px){.hero-controls{gap:0}.hero-product{left:16px;right:16px;gap:6px}.hero-product .hero-model-link{font-size:12px}.hero-model-link>span[aria-hidden]{padding-left:5px}}

/* Keep the full hero artwork and CTA reachable in short landscape windows. */
.hero-layout{display:contents}
@media(max-height:600px){
  .hero.scene{display:flex;flex-direction:column;padding:var(--header-height) 0 52px}
  .hero-layout{display:block;position:relative;min-height:420px;padding:24px var(--scene-pad);overflow:hidden}
  .hero-copy{padding-top:20px}
  .hero-stage{top:24px;bottom:24px}
  .hero-bottom{height:52px}
  .statement.scene{padding-top:var(--header-height);flex-direction:column;align-items:stretch}
  .statement-content{width:100%;padding:24px var(--scene-pad) 100px}
}
@media(max-height:600px) and (max-width:760px){
  .hero-layout{display:flex;flex-direction:column;min-height:650px}
  .hero-stage{position:relative;inset:auto;flex:1 0 300px;margin:12px -24px 0}
  .hero-stage .hero-bike{height:calc(100% - 50px)}
}