:root{font:16px/1.5 Arial,Helvetica,sans-serif;color:#F4F7F9;background:#18162F;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#18162F}img{display:block;max-width:100%}a{color:inherit}a:focus-visible{outline:3px solid #F4F7F9;outline-offset:4px;box-shadow:0 0 0 7px #E6007E}header{border-bottom:1px solid #5E7A86;padding:18px max(22px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;align-items:center;gap:16px}header a{text-decoration:none;font-weight:700}.brand-mark{display:inline-flex;align-items:center;gap:9px;line-height:1.12;color:#F4F7F9}.brand-mark img{width:43px;height:43px;flex:none}.brand-name{font-size:16px;letter-spacing:.065em}header>a:last-child{font-size:14px}main{overflow:hidden}.wrap{max-width:1160px;margin:auto;padding-left:22px;padding-right:22px}.hero{display:grid;grid-template-columns:43% 57%;align-items:center;min-height:630px;padding-top:58px;padding-bottom:72px;gap:0}.hero-copy{position:relative;z-index:2;padding:15px 25px 15px 0}.hero h1{font-size:clamp(3.2rem,5.6vw,5.8rem);letter-spacing:-.06em;line-height:1.02;margin:0 0 24px;max-width:650px}.hero p{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.45;max-width:445px;color:#D5DEE3;margin:0}.primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:#F4F7F9;color:#18162F;padding:13px 24px;border-radius:9px;font-weight:700;text-decoration:none;margin-top:30px}.primary:hover{background:#fff}.hero-media{position:relative;margin-right:-4vw;min-width:0}.hero-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#18162F 0,transparent 24%),linear-gradient(0deg,#18162F 0,transparent 24%);z-index:1;pointer-events:none}.hero-media img{width:100%;height:575px;object-fit:cover;object-position:67% 47%;border-radius:6px}.pillar{display:grid;grid-template-columns:52% 48%;align-items:center;gap:4%;padding-top:80px;padding-bottom:80px;border-top:1px solid #3c4059}.pillar.reverse{grid-template-columns:46% 54%}.pillar.reverse .pillar-copy{order:1}.pillar.reverse .pillar-visual{order:2}.pillar-copy{max-width:480px;padding:10px 22px}.pillar .label{font-size:.85rem;font-weight:700;letter-spacing:.17em;color:#d9e1e6;margin:0 0 15px}.pillar h2{font-size:clamp(2rem,3.4vw,3.65rem);letter-spacing:-.045em;line-height:1.12;margin:0 0 20px}.pillar-copy>p:not(.label){color:#C7D2D8;font-size:1.17rem;line-height:1.55;margin:0}.section-link{display:inline-block;margin-top:24px;font-size:1.06rem;font-weight:700;text-decoration:none;border-bottom:2px solid #E6007E;padding-bottom:3px}.section-link:hover{text-decoration:underline;text-decoration-color:#E6007E}.pillar-visual{position:relative;min-height:520px}.pillar-photo{width:67%;height:500px;object-fit:cover;border-radius:18px;object-position:center 42%}.pillar.reverse .pillar-photo{margin-left:auto;object-position:center 45%}.pillar-ui{position:absolute;width:min(65%,370px);right:3%;bottom:3%;background:#28263e;border:1px solid #657887;border-radius:18px;box-shadow:0 18px 45px #090914b8;padding:22px;color:#F4F7F9}.pillar.reverse .pillar-ui{right:auto;left:2%;bottom:5%}.pillar-ui .ui-kicker{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:#C4D1D9;margin-bottom:12px}.pillar-ui .ui-card-heading{display:block;font-size:1.25rem;line-height:1.2;margin:0 0 12px}.pillar-ui p{font-size:.95rem;color:#C4D1D9;line-height:1.4;margin:0 0 10px}.pillar-ui .ui-action{display:inline-block;background:#F4F7F9;color:#18162F;padding:9px 12px;border-radius:8px;font-size:.9rem;font-weight:700;text-decoration:none}.pillar-ui .ui-top{display:flex;justify-content:space-between;gap:12px;align-items:start;border-left:3px solid #E6007E;padding-left:10px;margin-bottom:17px}.pillar-ui .ui-top small{font-size:.82rem;color:#C4D1D9;white-space:nowrap}.pillar-ui .ui-card-link{font-weight:700;text-decoration:none}.pillar-ui .ui-card-link span{color:#E6007E}.pillar-ui .ui-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #526677}.pillar-ui .ui-row span{color:#C4D1D9}.pillar-ui .ui-row strong{text-align:right}.pillar-ui .ui-empty{color:#C4D1D9}.pillar-ui .ui-bike{background:#211f37;border:1px solid #657887;border-radius:10px;padding:12px;margin:14px 0}.pillar-ui .ui-bike b{display:block}.pillar-ui .ui-bike small{color:#C4D1D9}.pillar-ui .ui-plus{color:#F4F7F9;font-weight:700}.ride-band{position:relative;min-height:470px;display:grid;place-items:center;isolation:isolate;text-align:center;overflow:hidden;margin-top:50px}.ride-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%;z-index:-2}.ride-band::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#101029c7,#10102945 55%,#101029a6);z-index:-1}.ride-band .wrap{padding-top:100px;padding-bottom:100px}.ride-band h2{font-size:clamp(2.5rem,6vw,5.5rem);letter-spacing:-.055em;line-height:1;margin:0 0 20px}.ride-band p{font-size:1.28rem;max-width:650px;margin:auto;color:#fff;text-shadow:0 2px 8px #101029}.story{display:grid;grid-template-columns:33% 1fr;gap:7%;align-items:center;padding-top:95px;padding-bottom:105px}.story img{width:100%;height:390px;object-fit:cover;object-position:center 45%;border-radius:16px}.story h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.14;letter-spacing:-.04em;margin:0 0 20px}.story p{font-size:1.08rem;color:#C7D2D8;max-width:650px;margin:0 0 17px}.story .section-link{margin-top:8px}footer{max-width:1160px;margin:auto;padding:0 22px 30px;font-size:.85rem;color:#AEBCC5}footer a{color:#F4F7F9;text-decoration:none}footer a:hover{text-decoration:underline}
@media(max-width:820px){.hero{min-height:0;grid-template-columns:1fr;padding-top:30px;padding-bottom:45px}.hero-copy{padding:0}.hero h1{font-size:clamp(2.75rem,8vw,4.3rem);max-width:650px}.hero p{max-width:600px}.hero-media{margin:30px -22px 0}.hero-media img{height:clamp(300px,56vw,500px);object-position:69% 46%;border-radius:0}.hero-media::before{background:linear-gradient(0deg,#18162F 0,transparent 22%)}.pillar,.pillar.reverse{grid-template-columns:1fr;gap:28px;padding-top:62px;padding-bottom:64px}.pillar .pillar-copy,.pillar.reverse .pillar-copy{order:1;padding:0}.pillar .pillar-visual,.pillar.reverse .pillar-visual{order:2}.pillar-visual{min-height:470px}.pillar-photo,.pillar.reverse .pillar-photo{height:450px;width:66%;margin:0}.pillar-ui,.pillar.reverse .pillar-ui{right:2%;left:auto;bottom:0;width:min(64%,400px)}.story{grid-template-columns:35% 1fr;gap:5%}}
@media(max-width:600px){header{padding:15px 16px}.brand-mark img{width:35px;height:35px}.brand-name{font-size:.76rem;letter-spacing:.025em}.wrap{padding-left:18px;padding-right:18px}.hero{padding-top:26px}.hero h1{font-size:clamp(2.75rem,11vw,3.7rem);margin-bottom:17px}.hero p{font-size:1.09rem}.hero .primary{margin-top:22px}.hero-media{margin:25px -18px 0}.hero-media img{height:340px;object-position:71% center}.pillar,.pillar.reverse{padding-top:54px;padding-bottom:60px;gap:25px}.pillar h2{font-size:clamp(2rem,8vw,2.65rem)}.pillar-copy>p:not(.label){font-size:1.04rem}.pillar-visual{min-height:405px}.pillar-photo,.pillar.reverse .pillar-photo{height:360px;width:65%;border-radius:12px}.pillar-ui,.pillar.reverse .pillar-ui{width:72%;right:0;left:auto;bottom:0;padding:17px;border-radius:14px}.pillar-ui .ui-card-heading{font-size:1.12rem}.pillar-ui p{font-size:.88rem}.pillar-ui .ui-top{display:block}.pillar-ui .ui-top small{display:block;margin-top:5px}.ride-band{min-height:400px;margin-top:12px}.ride-band h2{font-size:clamp(2.5rem,11vw,3.6rem)}.ride-band p{font-size:1.06rem}.story{grid-template-columns:1fr;padding-top:60px;padding-bottom:70px;gap:27px}.story img{height:350px;object-position:center 35%}.story p{font-size:1rem}footer{padding:0 18px 26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A short visual pause after the three pillars. */
.ride-band{min-height:330px}.ride-band .wrap{padding-top:65px;padding-bottom:65px}
@media(max-width:600px){.ride-band{min-height:290px}.ride-band .wrap{padding-top:55px;padding-bottom:55px}}
/* Let the actual product lead the three pillars, with photography providing context. */
.hero-media img{height:525px}
.progress-visual{display:grid;align-items:center;min-height:450px;padding:42px;background:#211f38;border-radius:20px}
.progress-visual .pillar-ui{position:relative;right:auto;bottom:auto;width:min(100%,500px);margin:auto;padding:36px;border-color:#708393;box-shadow:0 20px 45px #11102580}
.progress-visual .pillar-ui .ui-card-heading{font-size:clamp(1.5rem,2.4vw,2rem)}
.progress-visual .pillar-ui p{font-size:1.02rem}
.progress-visual .pillar-ui .ui-strava-note{border-top:1px solid #526677;margin:25px 0 0;padding-top:18px;color:#C4D1D9;font-size:.9rem}
.events-pillar .pillar-visual{min-height:470px;display:flex;align-items:center}
.events-pillar .pillar-photo{width:43%;height:420px;margin-left:auto;object-position:27% 51%}
.events-pillar .pillar-ui{width:min(73%,420px);left:0;right:auto;bottom:auto;padding:28px}
.bikes-pillar .pillar-visual{min-height:470px;display:flex;align-items:end}
.bikes-pillar .pillar-photo{width:100%;height:320px;object-position:center 64%;border-radius:18px}
.bikes-pillar .pillar-ui{width:min(62%,350px);left:4%;right:auto;bottom:27%;padding:22px}
.story{grid-template-columns:28% 1fr;gap:7%;padding-top:72px;padding-bottom:80px}
.story img{height:290px}
@media(max-width:820px){
 .hero-media img{height:clamp(290px,49vw,420px)}
 .progress-visual{min-height:350px;padding:28px}
 .progress-visual .pillar-ui{width:min(100%,540px)}
 .events-pillar .pillar-visual,.bikes-pillar .pillar-visual{min-height:420px}
 .events-pillar .pillar-photo{width:45%;height:390px;margin-left:auto}
 .events-pillar .pillar-ui{width:min(75%,430px);left:0;right:auto;bottom:auto}
 .bikes-pillar .pillar-photo{width:100%;height:290px}
 .bikes-pillar .pillar-ui{width:min(65%,380px);left:4%;right:auto;bottom:25%}
 .story{grid-template-columns:28% 1fr}
}
@media(max-width:600px){
 .hero-media img{height:295px}
 .progress-visual{min-height:310px;padding:18px;border-radius:14px}
 .progress-visual .pillar-ui{padding:23px}
 .progress-visual .pillar-ui .ui-card-heading{font-size:1.45rem}
 .progress-visual .pillar-ui p{font-size:.96rem}
 .events-pillar .pillar-visual{min-height:370px}
 .events-pillar .pillar-photo{width:45%;height:345px;object-position:22% 48%}
 .events-pillar .pillar-ui{width:78%;padding:20px}
 .bikes-pillar .pillar-visual{min-height:400px}
 .bikes-pillar .pillar-photo{height:255px;object-position:center 66%}
 .bikes-pillar .pillar-ui{width:min(78%,330px);left:4%;bottom:27%;padding:18px}
 .story{grid-template-columns:1fr;padding-top:50px;padding-bottom:58px;gap:24px}
 .story img{height:230px;width:100%;object-position:center 37%}
}

/* Preserve each photograph's subject; interface previews remain readable. */
.events-pillar .pillar-photo{width:70%;object-position:center 58%}
.events-pillar .pillar-ui{width:min(48%,310px);left:0}
.bikes-pillar .pillar-visual{display:block;min-height:0}
.bikes-pillar .pillar-photo{width:100%;height:auto;aspect-ratio:800/603;object-fit:contain}
.bikes-pillar .pillar-ui{position:relative;left:auto;right:auto;bottom:auto;width:min(86%,410px);margin:-12px 0 0 auto}
.story img{height:355px;object-position:center 12%}
@media(max-width:820px){
 .events-pillar .pillar-visual,.bikes-pillar .pillar-visual{display:block;min-height:0}
 .events-pillar .pillar-photo{width:100%;height:390px;object-position:center 60%}
 .events-pillar .pillar-ui,.bikes-pillar .pillar-ui{position:relative;left:auto;right:auto;bottom:auto;width:calc(100% - 28px);margin:-15px auto 0;padding:22px}
 .bikes-pillar .pillar-photo{width:100%;height:auto;aspect-ratio:800/603;object-fit:contain}
 .story img{height:410px;object-position:center 12%}
}
@media(max-width:600px){
 .pillar.reverse.events-pillar .pillar-photo{width:100%;height:340px;margin:0;object-position:center 61%}
 .pillar.reverse.events-pillar .pillar-ui,.bikes-pillar .pillar-ui{width:100%;margin:14px 0 0;padding:19px}
 .bikes-pillar .pillar-photo{border-radius:12px}
 .story img{width:100%;height:430px;object-position:center 13%}
}

/* Display this portrait source near its native width on large screens. */
@media(min-width:1280px){.ride-band{max-width:1280px;margin-left:auto;margin-right:auto;border-radius:20px}}

/* Entire homepage interface previews act as the links they describe. */
.pillar-ui[href]{display:block;text-decoration:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.pillar-ui[href]:hover{border-color:#E6007E;box-shadow:0 18px 45px #090914b8,0 0 0 2px #E6007E}
.pillar-ui[href]:focus-visible{outline:3px solid #F4F7F9;outline-offset:4px;box-shadow:0 0 0 7px #E6007E}
@media(prefers-reduced-motion:reduce){.pillar-ui[href]{transition:none}}

/* Keep the photographs and preview cards at their designed proportions. Tighten
   only the relationships between copy and stacked sections. */
@media(max-width:820px){
 .pillar,.pillar.reverse{padding-top:52px;padding-bottom:56px;gap:24px}
 .pillar .label{margin-bottom:8px}
 .pillar h2{margin-bottom:12px}
 .pillar .section-link{margin-top:12px}
}
@media(max-width:600px){
 .hero{padding-bottom:36px}
 .pillar,.pillar.reverse{padding-top:40px;padding-bottom:44px;gap:20px}
 .pillar .label{margin-bottom:8px}
 .pillar h2{margin-bottom:12px}
 .pillar .section-link{margin-top:8px}
 .story{padding-top:48px;padding-bottom:56px;gap:20px}
 .story h2{margin-bottom:12px}
 .story p{margin-bottom:12px}
 .story .section-link{margin-top:4px}
}

/* Two static entry points within Events; keep the existing editorial hierarchy. */
.events-pillar .event-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px;max-width:100%}
.events-pillar .event-actions .section-link{margin-top:0;max-width:100%;overflow-wrap:anywhere}
.events-pillar .event-plan-link{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:6px 0;font-size:1rem;font-weight:400;line-height:1.4;color:#C7D2D8;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}

/* Small-screen rhythm only; approved tablet and desktop compositions stay intact. */
@media(max-width:430px){
 .progress-pillar{gap:28px}
 .events-pillar .event-actions{gap:14px}
 .bikes-pillar{gap:26px;padding-bottom:36px}
 .bikes-pillar .pillar-ui{margin-top:20px}
 .ride-band{margin-top:20px}
 .story{padding-top:56px;gap:26px}
}
