/* ============================================================ ZenDrive — Luxe (white · Mitsubishi-red · cognac · charcoal) Car-centric prototype · Mitsubishi Outlander SEL ============================================================ */ :root{ /* palette — drawn from the car: White Diamond + Mitsubishi red + Brick-Brown leather */ --white:#ffffff; --paper:#f6f4f1; /* warm off-white */ --paper-2:#efeae4; --ink:#15110e; /* warm near-black */ --ink-soft:#403a34; --charcoal:#161310; /* dark sections */ --charcoal-2:#211c18; --red:#e60012; /* Mitsubishi red */ --red-deep:#b00010; --red-tint:#fbe7e8; --red-on-dark:#ff5a63; /* WCAG-AA red for text on dark surfaces */ --red-ink:#c2000d; /* WCAG-AA red for small text on light/paper (#e60012 on paper = 4.37 fails) */ --cognac:#8a4d2b; /* Brick-Brown semi-aniline leather */ --tan:#b9824f; --tan-soft:#e9d9c7; --line:rgba(20,17,14,.12); --line-2:rgba(20,17,14,.07); --line-light:rgba(255,255,255,.16); --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --wrap:1240px; --r:8px; /* card radius */ --r-lg:16px; --shadow:0 1px 2px rgba(20,17,14,.05),0 12px 34px -16px rgba(20,17,14,.22); --shadow-lg:0 30px 80px -30px rgba(20,17,14,.45); --ease:cubic-bezier(.22,.61,.36,1); --t:.5s var(--ease); --sp-section:clamp(60px,7vw,116px); /* unified vertical rhythm for all sections */ } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px} .vehicle :focus-visible,.benefits :focus-visible,.coverage :focus-visible,.reserve :focus-visible,.cta :focus-visible,.ft :focus-visible,.topstrip :focus-visible{outline-color:#fff} h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.05} p{margin:0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)} /* ---------- shared type ---------- */ .eyebrow{ font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.22em; text-transform:uppercase;margin:0 0 18px;display:inline-flex;align-items:center;gap:10px;color:var(--ink-soft); } .eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.6} .eyebrow--red{color:var(--red-ink)} .eyebrow--light{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.55)} /* WCAG AA: lighter red for red text on dark sections (#e60012 on charcoal = 3.85:1 fails; #ff5a63 = 6.08:1) */ .sec-head--light .eyebrow--red,.coverage .eyebrow--red,.reserve .eyebrow--red,.vehicle .eyebrow--red,.benefits .eyebrow--red,.spotlight .eyebrow--red{color:var(--red-on-dark)} .sec-head{max-width:760px;margin:0 auto clamp(30px,3.6vw,50px);text-align:center} .sec-head--left{text-align:left;margin-inline:0} .sec-title{font-size:clamp(2rem,4.6vw,3.4rem)} .sec-lead{margin-top:18px;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.65} .sec-head--light .sec-title,.sec-head--light .sec-lead{color:#fff} .sec-head--light .sec-lead{color:rgba(255,255,255,.74)} /* ---------- buttons ---------- */ .btn{ --bg:var(--ink);--fg:#fff;--bd:transparent; display:inline-flex;align-items:center;gap:.55em;justify-content:center; font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em; padding:14px 26px;border-radius:var(--r);border:1.5px solid var(--bd); background:var(--bg);color:var(--fg);cursor:pointer; transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease); will-change:transform;white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn .arr{transition:transform .3s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn--sm{padding:10px 18px;font-size:14px} .btn--lg{padding:17px 32px;font-size:16px} .btn--red{--bg:var(--red);--fg:#fff;box-shadow:0 12px 26px -12px rgba(230,0,18,.7)} .btn--red:hover{--bg:var(--red-deep)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)} .btn--ghost:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)} .btn--glass{--bg:rgba(255,255,255,.1);--fg:#fff;--bd:rgba(255,255,255,.5);backdrop-filter:blur(8px)} .btn--glass:hover{--bg:rgba(255,255,255,.95);--fg:var(--ink);--bd:#fff} .btn--white{--bg:#fff;--fg:var(--ink)} .btn--white:hover{--bg:var(--paper)} .btn--outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)} .btn--outline-light:hover{--bg:rgba(255,255,255,.12);--bd:#fff} /* ---------- top strip ---------- */ .topstrip{background:var(--ink);color:rgba(255,255,255,.92);font-size:13px;letter-spacing:.02em} .topstrip__in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:38px} .topstrip__loc{display:inline-flex;align-items:center;gap:9px;font-weight:500} .topstrip .dot{width:7px;height:7px;border-radius:50%;background:#e60012;box-shadow:0 0 0 0 rgba(230,0,18,.6);animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(230,0,18,.5)}70%{box-shadow:0 0 0 7px rgba(230,0,18,0)}100%{box-shadow:0 0 0 0 rgba(230,0,18,0)}} .topstrip__msg{opacity:.75} .topstrip__cta{font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:1px} .topstrip__cta:hover{border-color:var(--red);color:#fff} @media(max-width:860px){.topstrip__msg,.topstrip__cta{display:none}.topstrip__in{justify-content:center}} @media(max-width:560px){.topstrip__cta{display:none}.topstrip__in{justify-content:center}} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--line-2);transition:box-shadow .3s,background .3s} .hdr.is-stuck{box-shadow:0 8px 30px -18px rgba(20,17,14,.3)} .hdr__in{display:flex;align-items:center;gap:28px;height:72px} .brand{display:inline-flex;align-items:center;gap:11px} .brand__mark{width:24px;height:24px;fill:var(--red);flex:0 0 auto;transition:transform .5s var(--ease)} .brand:hover .brand__mark{transform:rotate(180deg)} .brand__name{font-family:var(--sans);font-weight:800;letter-spacing:.16em;font-size:18px;color:var(--ink)} .brand__name span{color:var(--red)} .brand--light .brand__name{color:#fff} .brand--light .brand__name span{color:var(--red)} .nav{display:flex;gap:30px;margin-left:8px} .nav a{font-size:15px;font-weight:500;color:var(--ink-soft);position:relative;padding:6px 0;white-space:nowrap} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .3s var(--ease)} .nav a:hover{color:var(--ink)} .nav a.is-current{color:var(--ink)} .nav a:hover::after,.nav a.is-current::after{right:0} .hdr__actions{margin-left:auto;display:flex;gap:12px;align-items:center} .hdr__link{font-size:14px;font-weight:600;color:var(--ink-soft);white-space:nowrap;padding:6px 2px;transition:color .25s var(--ease)} .hdr__link:hover{color:var(--ink)} .hdr__link--accent{color:var(--ink)} .hdr__link--accent:hover{color:var(--red)} .hdr__sep{width:1px;height:22px;background:var(--line);align-self:center} .burger{display:none;margin-left:auto;width:44px;height:44px;border:none;background:none;cursor:pointer;flex-direction:column;gap:5px;justify-content:center;align-items:center} .burger span{width:24px;height:2px;background:var(--ink);transition:.3s var(--ease)} .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded=true] span:nth-child(2){opacity:0} .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobnav{display:none;flex-direction:column;gap:4px;padding:8px clamp(20px,5vw,56px) 24px;background:#fff;border-bottom:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .mobnav a{padding:14px 0;font-size:18px;font-weight:500;border-bottom:1px solid var(--line-2)} .mobnav .btn{margin-top:14px} @media(max-width:1119px){ .nav,.hdr__actions{display:none} .burger{display:flex} .mobnav.is-open{display:flex} } /* ---------- hero (split · text left · White Diamond cutout right) ---------- */ .hero{position:relative;background:var(--paper);overflow:hidden} .hero__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center;min-height:min(86vh,800px);padding-block:clamp(40px,6vh,86px)} .hero__copy{max-width:520px} .hero__title{font-size:clamp(2.8rem,6vw,5rem);font-weight:400;line-height:1.0;letter-spacing:-.025em;color:var(--ink)} .hero__title em{font-style:italic} .hero__sub{margin-top:22px;max-width:440px;font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--ink-soft);line-height:1.65} .hero__cta{margin-top:34px;display:flex;align-items:center;gap:24px;flex-wrap:wrap} .hero__link{color:var(--ink);font-weight:600;font-size:15px;border-bottom:1.5px solid var(--line);padding-bottom:3px;transition:border-color .25s} .hero__link:hover{border-color:var(--ink)} .hero__spec{margin-top:clamp(30px,5vh,46px);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft)} .hero__stage{position:relative;display:flex;align-items:center;justify-content:center} .hero__stage::before{content:"";position:absolute;width:128%;height:80%;right:-14%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(230,0,18,.07),transparent 72%);pointer-events:none} .hero__car{position:relative;z-index:1;width:min(118%,880px);max-width:none;margin-right:-8%;filter:drop-shadow(0 42px 50px rgba(20,17,14,.3));animation:carfloat 6s var(--ease) infinite} .hero__shadow{position:absolute;z-index:0;bottom:9%;left:14%;right:4%;height:7%;border-radius:50%;background:radial-gradient(50% 100% at 50% 0,rgba(20,17,14,.32),transparent 72%);filter:blur(8px)} @media(max-width:900px){ .hero__grid{grid-template-columns:1fr;text-align:center;min-height:0;padding-top:clamp(24px,4vh,40px);padding-bottom:clamp(40px,6vh,64px);gap:6px} .hero__copy{max-width:560px;margin-inline:auto;order:2} .hero__sub{margin-inline:auto} .hero__cta{justify-content:center} .hero__stage{order:1} .hero__car{width:min(94%,560px);margin-right:0} } @media(max-width:560px){ .hero__cta{flex-direction:column;align-items:stretch;gap:13px} .hero__link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1.5px solid var(--line);border-radius:8px;padding:0 18px} .hero__link:hover{border-color:var(--ink);background:rgba(20,17,14,.04)} } /* ---------- marquee ---------- */ .marquee{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;border-block:1px solid rgba(0,0,0,.06)} .marquee__row{display:inline-flex;align-items:center;gap:34px;padding:15px 17px;font-family:var(--serif);font-style:italic;font-size:20px;animation:scrollx 26s linear infinite} .marquee__row i{font-style:normal;font-size:10px;opacity:.7} .marquee:hover .marquee__row{animation-play-state:paused} @keyframes scrollx{to{transform:translateX(-50%)}} /* ---------- the vehicle (dark showroom) ---------- */ .vehicle{background:radial-gradient(125% 65% at 50% 0,rgba(255,255,255,.05),transparent 60%),var(--charcoal);color:#fff;padding:clamp(46px,6vw,80px) 0 var(--sp-section);position:relative} .vehicle::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 42%,rgba(230,0,18,.10),transparent 70%);pointer-events:none} .viewer{position:relative;margin:0 auto clamp(40px,5vw,64px);max-width:1040px} .viewer__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background: radial-gradient(70% 80% at 50% 40%,#2a2420,#131009); border:1px solid var(--line-light);box-shadow:var(--shadow-lg);cursor:grab;aspect-ratio:16/9} .viewer__stage.is-grabbing{cursor:grabbing} .viewer__stage img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;transition:transform .2s var(--ease)} .viewer__hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px; font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.85);background:rgba(0,0,0,.4); border:1px solid var(--line-light);padding:8px 16px;border-radius:40px;backdrop-filter:blur(6px);transition:opacity .4s} .viewer__hint .grab{animation:nudge 2s var(--ease) infinite;display:inline-block} @keyframes nudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}} .viewer__badge{position:absolute;top:18px;left:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:#fff;background:rgba(0,0,0,.42);border:1px solid var(--line-light);padding:7px 14px;border-radius:40px;backdrop-filter:blur(6px)} .viewer__track{margin:16px auto 0;height:3px;width:min(360px,70%);background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden} .viewer__fill{height:100%;width:8%;background:var(--red);border-radius:3px} .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .vcard{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--charcoal-2);border:1px solid var(--line-light)} .vcard img{display:block;width:100%;height:236px;aspect-ratio:auto;object-fit:cover;object-position:center;transition:transform .7s var(--ease)} .vcard:hover img{transform:scale(1.07)} .vcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 18px;color:#fff;font-size:14px; background:linear-gradient(0deg,rgba(0,0,0,.78),transparent)} .vcard figcaption b{display:block;font-family:var(--serif);font-size:19px;font-weight:500;margin-bottom:2px} @media(max-width:760px){.vgrid{grid-template-columns:1fr}.vcard img{height:210px}} /* ---------- interior ---------- */ .interior{background:var(--paper);padding:var(--sp-section) 0} .igal{display:grid;grid-template-columns:1fr;gap:18px;max-width:1100px;margin:0 auto} .igal__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;background:#2a211b} .igal__stage img{width:100%;height:100%;object-fit:cover;animation:fade .6s var(--ease)} @keyframes fade{from{opacity:.3}to{opacity:1}} .igal__cap{position:absolute;left:22px;bottom:20px;color:#fff;font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.6rem); text-shadow:0 2px 24px rgba(0,0,0,.6);max-width:70%} .igal__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .igal__t{padding:0;border:2px solid transparent;border-radius:var(--r);overflow:hidden;cursor:pointer;background:none;aspect-ratio:4/3;transition:border-color .3s,transform .3s} .igal__t img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);filter:saturate(.95)} .igal__t:hover img{transform:scale(1.08)} .igal__t.is-on{border-color:var(--red)} .igal__t.is-on img{filter:none} .ifeat{list-style:none;margin:clamp(36px,4vw,52px) auto 0;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;gap:10px 12px} .ifeat li{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:40px;padding:10px 18px;font-size:14.5px;font-weight:500} .ifeat span{font-family:var(--serif);font-style:italic;color:var(--cognac);font-size:15px} @media(max-width:680px){.igal__thumbs{grid-template-columns:repeat(5,1fr);gap:7px}} /* ---------- seats ---------- */ .seats{background:var(--white);padding:var(--sp-section) 0} .seats__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center} .seatpick{display:inline-flex;gap:10px;margin-top:30px;background:var(--paper);padding:7px;border-radius:14px;border:1px solid var(--line)} .seatpick__b{width:64px;height:64px;border:none;border-radius:10px;background:transparent;cursor:pointer; font-family:var(--serif);font-size:26px;color:var(--ink-soft);transition:.3s var(--ease)} .seatpick__b:hover{background:#fff;color:var(--ink)} .seatpick__b.is-on{background:var(--red);color:#fff;box-shadow:0 10px 22px -10px rgba(230,0,18,.7)} .seats__note{margin-top:22px;font-size:17px;color:var(--ink-soft)} .seats__note b{color:var(--ink);font-weight:600} .seats__viz{display:flex;justify-content:center} .cabin{width:min(360px,84vw);background:linear-gradient(165deg,#221b16,#15100c);border-radius:24px;padding:34px 30px 22px; border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);position:relative} .cabin__row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;justify-items:center;margin-bottom:18px} .cabin__row--front{margin-bottom:26px} .seat{width:78px;height:84px;border-radius:14px 14px 18px 18px;background:#332a23;border:1px solid rgba(255,255,255,.08); position:relative;transition:.45s var(--ease);display:flex;align-items:center;justify-content:center;font-size:22px;color:rgba(255,255,255,.25)} .seat::after{content:"";position:absolute;left:12px;right:12px;top:-9px;height:16px;border-radius:10px;background:#332a23;border:1px solid rgba(255,255,255,.08)} .seat--wheel{background:#1c1611;color:rgba(255,255,255,.5)} .seat.is-on{background:linear-gradient(160deg,var(--tan),var(--cognac));color:#fff;box-shadow:0 0 0 2px rgba(230,0,18,.5),0 14px 30px -14px rgba(185,130,79,.8)} .seat.is-on::after{background:var(--cognac)} .cabin__tag{text-align:center;color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px} @media(max-width:860px){.seats__in{grid-template-columns:1fr;gap:36px}} /* ---------- memberships ---------- */ .memb{background:var(--paper);padding:var(--sp-section) 0} .passgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px;align-items:stretch} .pass{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px 28px;display:flex;flex-direction:column; position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s} .pass:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(20,17,14,.2)} .pass--feat{border-color:var(--red);box-shadow:0 30px 70px -34px rgba(230,0,18,.45)} .pass--feat::before{content:"Most popular";position:absolute;top:-12px;left:26px;background:var(--red);color:#fff; font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:30px} .pass__name{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .pass__route{margin-top:6px;font-family:var(--serif);font-size:24px} .pass__tiers{display:flex;gap:4px;margin-top:14px;background:#f1ece6;border-radius:999px;padding:4px} .pass__tier{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink-soft);padding:8px 6px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent} .pass__tier.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)} .pass__tier:focus-visible{outline:2px solid #e60012;outline-offset:2px} .pass__price{margin-top:20px;display:flex;align-items:baseline;gap:6px} .pass__price b{font-family:var(--serif);font-size:42px;font-weight:500;letter-spacing:-.02em} .pass__price span{color:var(--ink-soft);font-size:14px} .pass__per{margin-top:8px;font-size:14px;color:var(--ink-soft)} .pass__per b{color:var(--red-ink);font-weight:700} .pass__meta{margin:20px 0 16px;padding:18px 0;border-block:1px solid var(--line-2);font-size:14.5px;color:var(--ink-soft);display:grid;gap:11px} .pass__meta div{display:flex;align-items:center;gap:9px} .pass__meta .tick{color:var(--red);font-weight:700} .pass__inv{margin-top:auto} .pass__bar{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden;margin-bottom:8px} .pass__bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--tan),var(--red));transition:width 1.2s var(--ease)} .pass__inv small{font-size:12px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:10px;white-space:nowrap} .pass__inv .low{color:var(--red-ink);font-weight:600} .pass .btn{margin-top:auto;width:100%} .pass__cta--out{background:var(--paper-2);color:var(--ink-soft);border:1px solid var(--line);cursor:not-allowed;pointer-events:none} .pass__demo{position:absolute;top:14px;right:14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft); background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:4px 10px} .trustrow{list-style:none;margin:clamp(28px,4vw,40px) auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:860px;font-size:14.5px;font-weight:500;color:var(--ink-soft)} .trustrow li{display:inline-flex;align-items:center;gap:8px} .trustrow__t{color:var(--red-ink);font-weight:700} .memb__fine{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:18px;max-width:720px;margin-inline:auto} @media(max-width:1080px){.passgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.passgrid{grid-template-columns:1fr}} /* ---------- benefits (dark) ---------- */ .benefits{background:var(--charcoal);color:#fff;padding:var(--sp-section) 0} .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .bcard{background:var(--charcoal-2);border:1px solid var(--line-light);border-radius:var(--r-lg);padding:32px 28px;transition:transform .4s var(--ease),border-color .4s} .bcard:hover{transform:translateY(-5px);border-color:rgba(230,0,18,.5)} .bcard__i{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;border-radius:12px; background:rgba(230,0,18,.14);color:var(--red);font-size:22px;margin-bottom:18px} .bcard h3{font-size:21px;margin-bottom:8px} .bcard p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.6} @media(max-width:860px){.bgrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.bgrid{grid-template-columns:1fr}} /* ---------- how ---------- */ .how{background:var(--white);padding:var(--sp-section) 0} .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s} .steps li{padding:28px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);position:relative;transition:transform .4s var(--ease)} .steps li:hover{transform:translateY(-5px)} .steps__n{font-family:var(--serif);font-style:italic;font-size:40px;color:var(--tan);display:block;margin-bottom:14px} .steps h3{font-size:20px;margin-bottom:8px} .steps p{color:var(--ink-soft);font-size:15px} @media(max-width:860px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:480px){.steps{grid-template-columns:1fr}} /* ---------- faq ---------- */ .faq{background:var(--paper);padding:var(--sp-section) 0} .faq__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:start} .faq__list details{border-bottom:1px solid var(--line);padding:6px 0} .faq__list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 0;font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:500} .faq__list summary::-webkit-details-marker{display:none} .faq__list summary i{position:relative;width:18px;height:18px;flex:0 0 auto} .faq__list summary i::before,.faq__list summary i::after{content:"";position:absolute;background:var(--red);transition:.3s var(--ease)} .faq__list summary i::before{left:0;right:0;top:8px;height:2px} .faq__list summary i::after{top:0;bottom:0;left:8px;width:2px} .faq__list details[open] summary i::after{transform:scaleY(0)} .faq__list details p{padding:0 0 22px;color:var(--ink-soft);max-width:60ch;line-height:1.7;animation:fade .4s var(--ease)} @media(max-width:860px){.faq__in{grid-template-columns:1fr;gap:22px}.faq .sec-head{margin-bottom:0}} /* ---------- cta band ---------- */ .cta{background:var(--red);color:#fff;padding:var(--sp-section) 0;position:relative;overflow:hidden} .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 80% 10%,rgba(255,255,255,.16),transparent 60%)} .cta__in{position:relative;text-align:center;max-width:760px;margin-inline:auto} .cta h2{font-size:clamp(2rem,4.4vw,3.2rem)} .cta p{margin-top:14px;font-size:1.15rem;color:rgba(255,255,255,.9)} .cta__btns{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- footer ---------- */ .ft{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(56px,7vw,86px) 0 0} .ft__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px} .ft__brand p{margin-top:18px;max-width:34ch;font-size:14.5px;line-height:1.65} .ft__col h4{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px} .ft__col a{display:block;padding:6px 0;font-size:14.5px;color:rgba(255,255,255,.65);transition:color .25s} .ft__col a:hover{color:#fff} .ft__legal{margin-top:clamp(40px,5vw,64px);padding:26px 0 34px;border-top:1px solid var(--line-light);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5)} .ft__links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:18px} .ft__links a{font-size:13px;color:rgba(255,255,255,.72);transition:color .25s} .ft__links a:hover{color:#fff;text-decoration:underline} .ft__legal p+p{margin-top:10px} .ft__attr{color:rgba(255,255,255,.56)} @media(max-width:860px){.ft__in{grid-template-columns:1fr 1fr}} @media(max-width:480px){.ft__in{grid-template-columns:1fr;gap:26px}.ft__col h4{margin-bottom:9px}.ft__col a{padding:4px 0}.ft__brand p{margin-top:14px}} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hero__car{animation:none} .marquee__row{animation:none} } /* ============================================================ v3 additions — maps · form · estimator · sticky · motion ============================================================ */ /* ---- Lenis smooth scroll ---- */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} /* ---- motion utilities ---- */ [data-par]{will-change:transform} .rise{clip-path:inset(0 -.06em 112% 0);transform:translateY(.3em);transition:clip-path .95s var(--ease) .04s,transform .95s var(--ease) .04s} .rise.is-in{clip-path:inset(0 -.06em -.14em 0);transform:none} /* ---- shared form controls ---- */ select{appearance:none;-webkit-appearance:none;font:inherit; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315110e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;background-size:13px;cursor:pointer} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--line);outline:none;cursor:pointer} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 3px 10px -2px rgba(230,0,18,.7);cursor:pointer;transition:transform .2s} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--red);border:3px solid #fff;cursor:pointer} /* ---- sticky reserve bar ---- */ .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(140%);transition:transform .55s var(--ease);pointer-events:none} .stickybar.is-on{transform:none} .stickybar.is-on .stickybar__in{pointer-events:auto} .stickybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px; background:rgba(20,17,14,.92);backdrop-filter:blur(16px) saturate(1.3);color:#fff;border:1px solid rgba(255,255,255,.14); border-radius:14px;padding:11px 12px 11px 20px;box-shadow:var(--shadow-lg)} .stickybar__info{display:flex;flex-direction:column;gap:1px;min-width:0} .stickybar__route{font-family:var(--serif);font-size:18px;display:flex;align-items:center;gap:9px} .stickybar__meta{font-size:13px;color:rgba(255,255,255,.62)} .stickybar__dot{width:8px;height:8px;border-radius:50%;background:#e60012;box-shadow:0 0 0 0 rgba(230,0,18,.6);animation:pulse 2.4s infinite} @media(max-width:560px){.stickybar__meta{display:none}} /* ---- assurance strip ---- */ .assure{background:#fff;border-bottom:1px solid var(--line-2)} .assure__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;padding:20px 0} .assure__i{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500;color:var(--ink)} .assure__i b{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:9px;background:var(--red-tint);color:var(--red);font-size:16px} @media(max-width:760px){.assure__in{justify-content:flex-start;gap:14px 20px}.assure__i span{font-size:13.5px}} /* ---- coverage map (dark) ---- */ .coverage{background:var(--charcoal);color:#fff;padding:var(--sp-section) 0;overflow:hidden} .cov{display:grid;grid-template-columns:1.45fr .9fr;gap:30px;align-items:start} .cov__map{position:relative;aspect-ratio:1000/600;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-light);box-shadow:var(--shadow-lg)} .cov__chip{position:absolute;left:16px;bottom:14px;font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.62); background:rgba(0,0,0,.4);border:1px solid var(--line-light);padding:6px 12px;border-radius:30px;backdrop-filter:blur(6px)} .cov__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .covitem{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--line-light);border-radius:12px; background:var(--charcoal-2);cursor:pointer;color:#fff;font:inherit;text-align:left;width:100%; transition:transform .35s var(--ease),border-color .35s,background .35s} .covitem:hover{border-color:rgba(255,255,255,.32);transform:translateX(5px)} .covitem.is-on{border-color:var(--red);background:linear-gradient(90deg,rgba(230,0,18,.16),transparent 80%)} .covitem__pin{width:36px;height:36px;flex:0 0 auto;border-radius:9px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--red);font-size:16px;transition:.35s} .covitem.is-on .covitem__pin{background:var(--red);color:#fff} .covitem__main{display:block;flex:1;min-width:0} .covitem__city{display:block;font-family:var(--serif);font-size:19px;line-height:1.1} .covitem__meta{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px} .covitem__price{text-align:right;font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap} .covitem__price b{display:block;font-family:var(--serif);font-size:18px;color:#fff;font-weight:500} @media(max-width:880px){.cov{grid-template-columns:1fr}.cov__map{min-height:360px}} /* leaflet map (real routes, dark) */ #map{position:absolute;inset:0;width:100%;height:100%;background:#13100d;z-index:0} .leaflet-container{background:#13100d;font-family:var(--sans)} .leaflet-container:focus-visible{outline:2px solid #fff;outline-offset:-3px} .leaflet-div-icon{background:transparent!important;border:none!important} .leaflet-control-zoom{border:none!important;box-shadow:none!important;margin:14px!important} .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;background:rgba(20,17,14,.86)!important;color:#fff!important;border:1px solid var(--line-light)!important;backdrop-filter:blur(6px)} .leaflet-control-zoom a:first-child{border-radius:9px 9px 0 0} .leaflet-control-zoom a:last-child{border-radius:0 0 9px 9px} .leaflet-control-zoom a:hover{background:var(--red)!important} .leaflet-control-attribution{background:rgba(0,0,0,.62)!important;color:rgba(255,255,255,.72)!important;font-size:11px;padding:2px 7px} .leaflet-control-attribution a{color:rgba(255,255,255,.72)!important} path.mroute{transition:stroke-opacity .4s,stroke-width .4s;cursor:pointer} path.mroute.is-active{filter:drop-shadow(0 0 6px rgba(230,0,18,.9))} .mk__lab{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 5px #000,0 0 8px rgba(0,0,0,.95);pointer-events:none} .mk-dest .mk__dot{display:block;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #13100d;box-shadow:0 0 0 2px rgba(255,255,255,.18);transition:transform .3s,background .3s,box-shadow .3s} .mk-dest:hover .mk__dot{transform:scale(1.18)} .mk-dest.is-on .mk__dot{background:var(--red);box-shadow:0 0 0 3px rgba(230,0,18,.35),0 0 12px rgba(230,0,18,.85)} .mk-hub .mk__core{display:block;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 12px rgba(230,0,18,.85)} .mk-hub .mk__pulse{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);opacity:.5;animation:mpulse 2.6s var(--ease) infinite} .mk-hub .mk__pulse.d2{animation-delay:1.3s} .mk-hub .mk__lab{bottom:auto;top:15px} .mk-car i{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.9),0 0 16px rgba(230,0,18,.7)} @keyframes mpulse{0%{transform:scale(.5);opacity:.55}80%{transform:scale(3.2);opacity:0}100%{opacity:0}} @media(max-width:600px){.mk-dest .mk__lab,.mk-hub .mk__lab{display:none}} /* ---- savings estimator (white) ---- */ .savings{background:#fff;padding:var(--sp-section) 0} .savings__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center} .savings__copy .sec-lead em{font-style:italic;color:var(--ink)} .savings__fine{margin-top:18px;font-size:13px;color:var(--ink-soft)} .calc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)} .calc__field{margin-bottom:22px} .calc__field label{display:block;font-size:14px;font-weight:600;margin-bottom:11px;color:var(--ink)} .calc__field label b{color:var(--red)} .calc__field select{border:1.5px solid var(--line);border-radius:10px;padding:14px 40px 14px 16px;font-size:16px;color:var(--ink);width:100%;transition:border-color .25s} .calc__field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)} .calc__money{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .25s} .calc__money:focus-within{border-color:var(--red)} .calc__money span{padding:0 2px 0 16px;color:var(--ink-soft);font-size:20px;font-family:var(--serif)} .calc__money input{border:none;outline:none;font-size:22px;font-family:var(--serif);padding:13px 16px 13px 4px;width:100%;background:none;color:var(--ink)} .calc__out{margin-top:6px;border-top:1px dashed var(--line);padding-top:20px} .calc__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px;color:var(--ink-soft);font-size:15px} .calc__row b{font-family:var(--serif);font-size:22px;color:var(--ink)} .calc__save{display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:12px;padding:18px 22px;margin-top:6px} .calc__save span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)} .calc__save b{font-family:var(--serif);font-size:clamp(2.1rem,4vw,2.9rem);color:#fff;line-height:1.05;margin-top:5px} @media(max-width:880px){.savings__in{grid-template-columns:1fr;gap:40px}} /* ---- reserve form (dark w/ light card) ---- */ .reserve{background:var(--charcoal-2);color:#fff;padding:var(--sp-section) 0 clamp(42px,5vw,64px);border-bottom:1px solid rgba(255,255,255,.10)} .reserve__in{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(36px,5vw,64px);align-items:start} .reserve__intro .sec-lead{color:rgba(255,255,255,.74)} .reserve__points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px} .reserve__points li{display:flex;align-items:center;gap:12px;font-size:15.5px} .reserve__points b{color:var(--red);font-size:17px} .reserve__note{margin-top:26px;font-size:13px;color:rgba(255,255,255,.5);max-width:34ch} .reserve__card{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px);box-shadow:var(--shadow-lg);position:relative} .rform__grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px} .fld{display:flex;flex-direction:column;gap:5px} .fld--full{grid-column:1/-1} .fld>span{font-size:13px;font-weight:600;color:var(--ink)} .fld>span i{font-style:normal;font-weight:400;color:var(--ink-soft)} .fld input,.fld select,.fld textarea{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:14.5px;color:var(--ink);background-color:#fff;transition:border-color .25s,box-shadow .25s;width:100%} .fld select{padding-right:40px} .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)} .fld.is-bad input,.fld.is-bad select{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)} .fld textarea{resize:vertical;min-height:56px} .rform__sec{border:0;margin:0 0 16px;padding:0;min-width:0} .rform__sec:last-of-type{margin-bottom:0} .rform__sec>legend{padding:0 0 8px;margin-bottom:12px;width:100%;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line)} .zd-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .rform__foot{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .rform__summary{font-size:14px;color:var(--ink-soft);flex:1;min-width:220px;line-height:1.5} .rform__foot .btn{flex:0 0 auto} .rform__assure{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)} .rdone{text-align:center;padding:24px 8px 12px;animation:fade .5s var(--ease)} .rdone__check{width:74px;height:74px;margin:0 auto 18px} .rdone__check svg{width:100%;height:100%;fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .rdone__check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .6s var(--ease) forwards} .rdone__check path{stroke-dasharray:42;stroke-dashoffset:42;animation:draw .45s var(--ease) .5s forwards} @keyframes draw{to{stroke-dashoffset:0}} .rdone h3{font-size:28px;margin-bottom:8px} .rdone p{color:var(--ink-soft);max-width:42ch;margin:0 auto 22px} .rdone__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media(max-width:880px){.reserve__in{grid-template-columns:1fr}} @media(max-width:560px){.rform__grid{grid-template-columns:1fr}} /* reduced motion */ @media (prefers-reduced-motion:reduce){ .rise{clip-path:none;transform:none;transition:none} .mk__pulse{animation:none} [data-par]{transform:none!important} } /* ============================================================ v4 — suggestbikes-style intro sections (cutout car) ============================================================ */ /* MARQUE — big editorial cutout (white) */ .marque{position:relative;background:var(--white);padding:clamp(80px,10vw,150px) 0;overflow:hidden} .marque__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none; font-family:var(--serif);font-weight:600;font-size:clamp(7rem,25vw,23rem);line-height:.8;letter-spacing:-.02em;white-space:nowrap; color:transparent;-webkit-text-stroke:1.5px rgba(20,17,14,.09);text-stroke:1.5px rgba(20,17,14,.09)} .marque__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(28px,5vw,70px);align-items:center} .marque__copy{max-width:480px} .marque__chips{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px} .marque__chips span{border:1px solid var(--line);border-radius:40px;padding:9px 16px;font-size:13.5px;font-weight:600;background:#fff} .marque__car{position:relative} .marque__car img{width:100%;display:block;filter:drop-shadow(0 42px 50px rgba(20,17,14,.3));animation:carfloat 6s var(--ease) infinite} .marque__shadow{position:absolute;left:10%;right:10%;bottom:-3%;height:9%;z-index:-1;border-radius:50%; background:radial-gradient(50% 100% at 50% 0,rgba(20,17,14,.32),transparent 72%);filter:blur(7px)} @keyframes carfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @media(max-width:820px){ .marque__in{grid-template-columns:1fr;text-align:center} .marque__copy{margin-inline:auto}.marque__chips{justify-content:center} .marque__car{order:-1;max-width:540px;margin-inline:auto} } /* SPOTLIGHT — cutout + animated stats (dark) */ .spotlight{position:relative;background:var(--charcoal);color:#fff;padding:clamp(76px,9vw,140px) 0;overflow:hidden;text-align:center} .spotlight::before{content:"";position:absolute;inset:0;background:radial-gradient(52% 60% at 50% 44%,rgba(230,0,18,.16),transparent 70%);pointer-events:none} .spotlight__ghost{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:0;pointer-events:none; font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(6rem,22vw,20rem);line-height:.8;white-space:nowrap;color:rgba(255,255,255,.045)} .spotlight__in{position:relative;z-index:1;max-width:900px;margin-inline:auto} .spotlight .eyebrow{justify-content:center} .spotlight__car{max-width:min(700px,88%);margin:4px auto clamp(26px,4vw,44px);display:block; filter:drop-shadow(0 34px 50px rgba(0,0,0,.6));animation:carfloat 6.6s var(--ease) infinite} .spotlight__lead{margin:16px auto 0;max-width:560px;color:rgba(255,255,255,.74);font-size:clamp(1rem,1.4vw,1.18rem)} .spotlight__stats{display:flex;justify-content:center;gap:clamp(26px,6vw,72px);margin-top:clamp(36px,5vw,56px);flex-wrap:wrap} .spstat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:#fff} .spstat span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:8px;display:block} @media (prefers-reduced-motion:reduce){ .marque__car img,.spotlight__car{animation:none} } /* ============================================================ v5 — real UX: form validation messages, skip link, map loading ============================================================ */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:14px} .skip:focus{left:0} .fld__err{display:none;margin-top:2px;color:var(--red-ink);font-size:12.5px;line-height:1.3} .fld.is-bad .fld__err{display:block} .fld .req{color:var(--red-ink);font-style:normal;font-weight:700} .map-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#13100d;color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none} .map-loading::before{content:"";width:16px;height:16px;margin-right:10px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--red);animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media(max-width:560px){.ft__col a{padding:10px 0}} @media (prefers-reduced-motion:reduce){.map-loading::before{animation:none}} /* ============================================================ v6 — UX-audit polish (forms, mobile touch, states) ============================================================ */ .btn:disabled{cursor:default;opacity:.72;transform:none} .btn[aria-busy="true"]{cursor:wait} .burger span{transition:transform .3s var(--ease),opacity .2s var(--ease)} .burger:hover span{opacity:.65} .seatpick__b:focus-visible{outline-offset:4px} /* mobile: bigger labels + 16px inputs (no iOS zoom) + larger touch */ @media(max-width:560px){ .fld>span{font-size:14px} .fld input,.fld select,.fld textarea{padding:15px 14px;font-size:16px} .calc__field select{padding:15px 40px 15px 16px;font-size:16px} .calc__money input{font-size:24px} } /* ============================================================ v7 — award-level refinement (research-informed, stays clean) "Refine, don't redesign": optical type, scale, grain, single-accent discipline, unified motion. All reduced-motion safe. ============================================================ */ :root{ --step-0:clamp(1rem,.95rem + .25vw,1.1rem); --r:12px; --r-lg:18px; --ease-reveal:cubic-bezier(.16,1,.3,1); } html{font-optical-sizing:auto} body{font-size:var(--step-0)} /* display type — solid & confident (lower opsz = chunkier strokes, heavier weight) */ .hero__title{font-size:clamp(2.85rem,2.4rem + 5vw,5.6rem);font-weight:560;font-variation-settings:"opsz" 34;letter-spacing:-.022em} .sec-title{font-size:clamp(1.95rem,1.6rem + 1.7vw,3.05rem);font-weight:540;font-variation-settings:"opsz" 30;letter-spacing:-.014em} .eyebrow{letter-spacing:.16em} /* (film grain removed — read as noise on the clean surfaces) */ /* single-accent discipline — red only on intent; decorative red → warm neutral */ .hero__stage::before{background:radial-gradient(closest-side,rgba(255,248,240,.12),transparent 72%)} .vehicle::before{background:radial-gradient(60% 50% at 50% 42%,rgba(255,248,240,.08),transparent 70%)} .bcard:hover{border-color:rgba(255,255,255,.30)} .btn--red{box-shadow:0 12px 26px -16px rgba(20,17,14,.6)} .btn--red:active{--bg:#cc000f;transform:translateY(1px)} .pass--feat{box-shadow:0 30px 70px -34px rgba(20,17,14,.42)} .pass__bar i{background:linear-gradient(90deg,var(--tan),var(--cognac))} /* hero grounding (planted, not floating) */ .hero__car{filter:drop-shadow(0 34px 44px rgba(20,17,14,.3))} .hero__shadow{opacity:.95;filter:blur(9px)} /* dark cards: faint light top edge for depth (no muddy shadow) */ .bcard,.vcard,.covitem{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} /* calmer, slower image zoom */ .vcard img{transition:transform .8s var(--ease)} .vcard:hover img{transform:scale(1.04)} /* unified, quieter reveal motion (one expo easing) */ .reveal{transform:translateY(14px);transition:opacity .7s var(--ease-reveal),transform .7s var(--ease-reveal)} .rise{transition:clip-path .85s var(--ease-reveal) .04s,transform .85s var(--ease-reveal) .04s} /* instrument-cluster figures */ .calc__save b,.calc__row b,.pass__price b,.pass__per b{font-variant-numeric:tabular-nums} /* sticky header: clear at top → frosted on scroll */ .hdr{background:transparent;backdrop-filter:none;border-bottom:1px solid transparent} .hdr.is-stuck{background:rgba(246,244,241,.82);backdrop-filter:blur(11px) saturate(1.2);border-bottom:1px solid var(--line-2)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr.is-stuck{background:rgba(246,244,241,.97)}} /* touch: kill hover transforms */ @media(hover:none){.pass:hover,.bcard:hover,.steps li:hover,.vcard:hover{transform:none}} @media (prefers-reduced-motion:reduce){.vcard img{transition:none}} /* ============================================================ v8 — hero stage = framed real photo (cutout read washed/fringed on light) ============================================================ */ .hero__stage{display:block;align-self:center;position:relative;aspect-ratio:16/10; border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line-2)} .hero__stage::before{display:none} .hero__photo{width:100%;height:100%;object-fit:cover;object-position:50% 54%;display:block} @media(max-width:900px){.hero__stage{aspect-ratio:16/11}} /* ============================================================ v9 — client change-list (contact-us note, call line, address hint) ============================================================ */ .how__note{text-align:center;margin-top:clamp(28px,4vw,42px);color:var(--ink-soft);font-size:15.5px} .how__note a{color:var(--red-ink);font-weight:600;border-bottom:1px solid var(--red-ink);padding-bottom:1px} .how__note a:hover{color:var(--red-deep)} .reserve__call{margin-top:18px;font-size:15.5px;color:rgba(255,255,255,.82)} .reserve__call a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px} .reserve__call a:hover{border-color:#fff} .fld__hint{margin-top:4px;font-size:12px;color:var(--ink-soft)} /* ============================================================ v10 — interior as portrait cards (native res = sharp, no upscaling) ============================================================ */ .igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;max-width:1100px;margin:0 auto} .icard{position:relative;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:67/89;background:#1a1714} .icard img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)} .icard:hover img{transform:scale(1.05)} .icard figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;color:#fff;font-size:13.5px;font-weight:500;letter-spacing:.01em;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)} @media(max-width:560px){.igrid{grid-template-columns:1fr 1fr}} /* ░░ v11 — real 360° turntable ░░ */ .spin360{cursor:grab;touch-action:pan-y;aspect-ratio:1000/563;user-select:none} .spin360.is-grabbing{cursor:grabbing} .spin360__img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;transition:none} .spin360:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px} .spin360 .viewer__hint .grab{animation:spin360hint 2.6s linear infinite} @keyframes spin360hint{to{transform:rotate(360deg)}} .viewer__hint.is-gone{opacity:0!important;transform:translateX(-50%) translateY(6px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)} .spin360__track{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(320px,62%);height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;z-index:2;pointer-events:none} .spin360__fill{display:block;height:100%;width:3%;border-radius:3px;background:var(--red-on-dark);transition:width .08s linear} @media(prefers-reduced-motion:reduce){.spin360 .viewer__hint .grab{animation:none}} /* ░░ v12 — hero comes alive (subtle, reduced-motion safe) ░░ */ @media (prefers-reduced-motion: no-preference){ .hero__photo{animation:heroKen 26s var(--ease) infinite alternate;will-change:transform;transform-origin:58% 56%} @keyframes heroKen{from{transform:scale(1.015)}to{transform:scale(1.075) translate(-1.1%,-0.6%)}} /* staggered entrance for hero copy */ .hero__title.reveal{transition-delay:.04s} .hero__sub.reveal{transition-delay:.15s} .hero__cta.reveal{transition-delay:.26s} .hero__spec.reveal{transition-delay:.37s} .hero__stage.reveal{transition-delay:.18s} } /* ░░ v13 — single-ride path + honest-premium ░░ */ .pass--feat::before{content:"Most popular"} /* member-vs-single value line on each pass card */ .pass__save{margin-top:7px;font-size:12.5px;color:var(--ink-soft)} .pass__save b{color:var(--red-ink);font-weight:700} /* "just need one ride" band */ .singleband{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:18px 26px;flex-wrap:wrap; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 26px;box-shadow:var(--shadow)} .singleband__txt{display:flex;flex-direction:column;gap:3px;min-width:0} .singleband__txt > b{font-family:var(--serif);font-size:20px;font-weight:560;letter-spacing:-.01em;color:var(--ink)} .singleband__txt span{font-size:14px;color:var(--ink-soft)} .singleband__txt span b{color:var(--ink);font-weight:700} .singleband .btn{flex:0 0 auto} @media(max-width:560px){.singleband{flex-direction:column;align-items:stretch;text-align:left}.singleband .btn{width:100%}} /* reserve booking-type toggle */ .rmode{display:inline-flex;gap:4px;padding:4px;background:var(--paper-2);border-radius:999px;margin-bottom:24px} .rmode__b{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--ink-soft); padding:9px 18px;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease)} .rmode__b.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,17,14,.14)} .rmode__b:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* sticky single-ride alt action */ .stickybar__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto} .stickybar__alt{appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:600; color:rgba(255,255,255,.72);white-space:nowrap;transition:color .2s var(--ease)} .stickybar__alt:hover{color:#fff} .stickybar__alt:focus-visible{outline:2px solid var(--red-on-dark);outline-offset:3px;border-radius:4px} @media(max-width:560px){.stickybar__alt{display:none}} /* ░░ mobile polish — UX audit 2026-06-14 ░░ */ @media(max-width:980px){ .mobnav{padding-top:16px} .mobnav .btn{margin-top:20px;padding-block:16px} } @media(max-width:560px){ main{padding-bottom:84px} .vehicle,.interior,.seats,.memb,.benefits,.how,.faq,.coverage,.reserve{padding-block:clamp(56px,14vw,72px)} .topstrip__in{height:auto;min-height:38px;padding-block:8px;justify-content:center;text-align:center} .topstrip__loc{align-items:flex-start;line-height:1.35} .topstrip .dot{margin-top:5px} .pass__meta div{align-items:flex-start} .bcard{padding:26px 22px} .bcard__i{margin-bottom:14px} .rmode{display:flex;width:100%} .rmode__b{flex:1;min-width:0;padding:10px 6px;font-size:13px;white-space:nowrap;text-align:center} .rform__foot{flex-direction:column;align-items:stretch;gap:16px} .rform__foot .btn{flex:1 1 auto;width:100%} .rform__summary{flex:none;min-width:0;text-align:left} .cta__btns{flex-direction:column;align-items:stretch} .cta__btns .btn{width:100%} } /* ============ golden-hour hero (photo) ============ */ .hero--photo{position:relative;min-height:min(92vh,880px);display:flex;align-items:center;padding-top:clamp(72px,12vh,116px);padding-bottom:clamp(120px,17vh,158px);background:#0b0a09;overflow:hidden} .hero--photo .hero__bg{position:absolute;inset:0;z-index:0} .hero--photo .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%} .hero--photo .hero__scrim{position:absolute;inset:0;z-index:1;background: linear-gradient(95deg,rgba(7,6,5,.88) 0%,rgba(7,6,5,.64) 30%,rgba(7,6,5,.20) 56%,rgba(7,6,5,0) 76%), linear-gradient(0deg,rgba(7,6,5,.55),rgba(7,6,5,0) 30%)} .hero--photo .wrap{position:relative;z-index:2;width:100%} .hero--photo .hero__copy{max-width:580px;text-align:left;margin:0} .hero--photo .hero__title{color:#fff;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,7.4vw,5.7rem);line-height:.97;letter-spacing:-.02em;text-shadow:0 2px 30px rgba(0,0,0,.4)} .hero--photo .hero__title em{font-style:italic;color:var(--red-on-dark)} .hero--photo .hero__sub{color:rgba(255,255,255,.88);max-width:480px;margin-top:24px;font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.65;text-shadow:0 1px 16px rgba(0,0,0,.5)} .hero--photo .hero__cta{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap} /* hero spec strip (overlaid on the photo) */ .herospec{background:var(--charcoal);color:#fff} .hero--photo .herospec{position:absolute;left:0;right:0;bottom:0;z-index:3;background:linear-gradient(0deg,rgba(7,6,5,.93),rgba(7,6,5,.42));border-top:1px solid rgba(255,255,255,.14)} .herospec__in{display:grid;grid-template-columns:repeat(4,1fr)} .herospec__item{padding:18px 16px;border-left:1px solid rgba(255,255,255,.1)} .herospec__item:first-child{border-left:0;padding-left:0} .herospec__item b{display:block;font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.34rem);font-weight:500;letter-spacing:-.005em} .herospec__item span{display:block;margin-top:3px;font-size:12.5px;color:rgba(255,255,255,.6)} @media(max-width:760px){ .hero--photo{min-height:0;padding-top:clamp(56px,14vh,84px);padding-bottom:0;flex-direction:column;align-items:stretch} .hero--photo .herospec{position:static;width:100%;background:var(--charcoal);border-top:0;margin-top:clamp(26px,6vh,40px)} .hero--photo .hero__copy{max-width:100%;margin:0} .hero--photo .hero__scrim{background:linear-gradient(0deg,rgba(7,6,5,.86),rgba(7,6,5,.6) 45%,rgba(7,6,5,.72))} .hero--photo .hero__bg img{object-position:66% 50%} .hero--photo .hero__cta .btn{flex:1 1 100%} .herospec__in{grid-template-columns:repeat(2,1fr)} .herospec__item{padding:18px 14px;border-top:1px solid rgba(255,255,255,.1)} .herospec__item:nth-child(odd){border-left:0} .herospec__item:nth-child(-n+2){border-top:0} } /* ============ mountains gallery (made for Utah) ============ */ .mtn{background:var(--paper);padding-block:clamp(56px,9vh,104px)} .mtn__feature{margin-top:clamp(28px,4vh,44px);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)} .mtn__feature img{display:block;width:100%;aspect-ratio:1920/900;object-fit:cover;object-position:50% 60%} .mtn__grid{margin-top:clamp(14px,2vw,24px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)} .mtn__card{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .mtn__card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover} .mtn__card figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;color:#fff;font-family:var(--serif);font-size:1.08rem;letter-spacing:-.01em;background:linear-gradient(0deg,rgba(7,6,5,.72),transparent)} @media(max-width:760px){ .mtn__grid{grid-template-columns:1fr} .mtn__feature img{aspect-ratio:3/2} } /* buy card (replaces the old lead form) */ .rbuy{display:flex;flex-direction:column;gap:16px} .rbuy__summary{font-family:var(--serif);font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--ink);margin:2px 0} .rbuy__cta{width:100%} .rbuy__note{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0} /* ── Reviews / social proof ─────────────────────────────────────────────── */ .reviews{background:var(--paper);padding:var(--sp-section) 0;position:relative} .rev-preview-note{max-width:var(--wrap);margin:0 auto 26px;padding:9px 18px;border-radius:999px; background:var(--red-tint);color:var(--red-ink);font-size:12.5px;font-weight:600;letter-spacing:.02em; width:max-content;max-width:calc(100% - 48px)} .rev-top{display:grid;grid-template-columns:1.5fr .8fr;gap:40px;align-items:end;margin-bottom:48px} .rev-top .sec-head{margin:0} .rev-score{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px; box-shadow:var(--shadow);justify-self:end} .rev-score__n{font-family:var(--serif);font-size:48px;line-height:1;letter-spacing:-.02em} .rev-score__stars{color:var(--red);font-size:17px;letter-spacing:3px;margin:6px 0 5px} .rev-score__meta{font-size:13px;color:var(--ink-soft)} .rev-score__meta b{color:var(--ink)} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rev-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:15px} .rev-card__stars{color:var(--red);font-size:14px;letter-spacing:2px} .rev-card__quote{font-family:var(--serif);font-size:18px;line-height:1.42;color:var(--ink);letter-spacing:-.005em} .rev-card__who{display:flex;align-items:center;gap:12px;margin-top:auto} .rev-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--cognac),var(--tan));color:#fff;font-family:var(--serif);font-size:17px} .rev-card__name{display:block;font-weight:700;font-size:14px;color:var(--ink);font-family:var(--sans)} .rev-card__ctx{display:block;font-size:12px;color:var(--ink-soft);margin-top:1px} .rev-card__tag{position:absolute;top:14px;right:14px;font-size:9px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line-2); border-radius:999px;padding:3px 8px} @media(max-width:900px){.rev-top{grid-template-columns:1fr;gap:22px}.rev-score{justify-self:start} .rev-grid{grid-template-columns:1fr}} /* ---------- 2026-07-12 single-pass layout: with only the Park City card on sale, the auto-fit grid stretched one card to full width and the "Most popular" badge compared it to nothing. Centered single-column grid; badge off (restore both when routes return). */ .passgrid{grid-template-columns:1fr;max-width:520px;margin-inline:auto} .pass--feat::before{content:none} /* ── reserve picker (2026-07-14) ───────────────────────────────────────────── Replaces the