:root{--navy:#061b2b;--navy2:#0b2a3f;--ink:#102331;--gold:#c9952e;--gold2:#f0c56a;--mist:#f4f6f7;--line:#d8e0e5;--muted:#5c6e79;--white:#fff;--radius:18px} *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{margin:0;font:16px/1.68 Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden} img{max-width:100%;height:auto} a{color:#0b527c;text-decoration:none} a:hover{text-decoration:underline} .wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto;min-width:0} .wrap>*{min-width:0} p,li,td,th,a,h1,h2,h3,span{overflow-wrap:break-word} p{max-width:100%} .eyebrow{display:block;color:#76540d;font-size:12px;font-weight:900;letter-spacing:1.05px;text-transform:uppercase} .lead{font-size:18px;line-height:1.7;color:#344956} .section{padding:64px 0} .section.alt{background:var(--mist)} .section.dark{background:var(--navy);color:#e9f0f4} .section.dark h2,.section.dark h3{color:#fff} .section h2,.route-strip h2{font:700 clamp(29px,3.7vw,44px)/1.13 Georgia,serif;margin:7px 0 18px;color:var(--ink);max-width:940px} .section h3,.route-strip h3{font:700 21px/1.24 Georgia,serif;margin:4px 0 10px;color:var(--ink)} .section p{margin:0 0 16px} .section-note{margin:22px 0 0!important;padding:16px 18px;border-left:4px solid var(--gold);background:#fff;border-radius:0 12px 12px 0;color:#3d515d} .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} .btn,.btn:visited{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:#071c2b!important;border:1px solid var(--gold);padding:12px 18px;border-radius:5px;font-weight:900;letter-spacing:.15px;line-height:1.2;text-align:center} .btn:hover,.btn:focus{background:#dfb252;color:#071c2b!important;text-decoration:none} .btn.out,.btn.out:visited{background:transparent;color:#fff!important;border-color:#fff} .text-link{font-weight:900;color:#76540d} /* Navigation */ .nav{position:sticky;top:0;z-index:100;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)} .navin{min-height:76px;display:flex;align-items:center;gap:22px;position:relative} .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;letter-spacing:1px;font-size:20px;line-height:1;flex:0 0 auto} .brand:hover{text-decoration:none} .brand small{display:block;font-size:11px;letter-spacing:2px;margin-top:6px} .crest{width:40px;height:46px;border:3px solid var(--gold);clip-path:polygon(50% 0,100% 15%,92% 70%,50% 100%,8% 70%,0 15%);display:grid;place-items:center;color:var(--gold2);font:900 22px Georgia,serif} .links{margin-left:auto;display:flex;align-items:center;gap:15px;min-width:0} .links>a,.dropbtn{color:#fff;background:transparent;border:0;font:800 11.5px Arial,sans-serif;letter-spacing:.25px;white-space:nowrap} .links>a:hover,.dropbtn:hover{color:var(--gold2);text-decoration:none} .navdrop{position:relative} .dropbtn{padding:27px 0;cursor:pointer} .dropdown{display:none;position:absolute;top:61px;left:-12px;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px;box-shadow:0 18px 40px rgba(0,0,0,.18)} .dropdown a{display:block;padding:9px 11px;border-radius:8px;color:var(--ink);font-size:13px;font-weight:700;white-space:normal} .dropdown a:hover{background:var(--mist);text-decoration:none} .navdrop:hover .dropdown,.navdrop:focus-within .dropdown,.navdrop.open .dropdown{display:block} .menuBtn{display:none;background:none;border:0;color:#fff;font-size:28px} .navquote{padding:10px 14px!important;color:#071c2b!important} /* Hero */ .pagehero{min-height:465px;display:flex;align-items:center;position:relative;overflow:hidden;background:#061b2b url('/assets/images/vancouver-suburban-hero.webp') center center/cover no-repeat;color:#fff} .hero-copy{padding:58px 0;max-width:650px;margin:0;min-width:0} .pagehero .eyebrow{color:var(--gold2)} .pagehero h1{font:700 clamp(38px,4.7vw,61px)/1.04 Georgia,serif;margin:8px 0 16px;color:#fff;max-width:650px;word-break:normal} .pagehero p{font-size:18px;line-height:1.65;color:#eef4f7;max-width:620px;margin:0} .pagehero .actions{max-width:620px} /* Summary + trust */ .inner-summary{position:relative;z-index:5;margin-top:-28px} .inner-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(7,28,43,.09)} .inner-summary-grid>div{padding:18px 15px;text-align:center;border-right:1px solid var(--line);min-width:0} .inner-summary-grid>div:last-child{border-right:0} .inner-summary-grid strong{display:block;color:var(--ink);font:700 17px/1.25 Georgia,serif} .inner-summary-grid span{display:block;color:#687984;font-size:12px;margin-top:4px} .trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#213d50} .trust-grid>div{padding:17px 18px;text-align:center;background:var(--navy);color:#fff;min-width:0} .trust-grid b,.trust-grid span{display:block} .trust-grid span{font-size:12px;color:#d5e0e6;margin-top:3px} /* Core layouts */ .inner-split,.content-columns{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:32px;align-items:start} .inner-split>*,.content-columns>*{min-width:0} .trip-card{background:var(--navy);color:#fff;border-radius:18px;padding:28px;box-shadow:0 16px 34px rgba(7,28,43,.13);overflow:hidden} .trip-card .eyebrow{color:var(--gold2)} .trip-card h3{color:#fff} .trip-card p,.trip-card li,.trip-card span{color:#e8f0f3} .trip-card ul{padding-left:20px;display:grid;gap:9px;margin:18px 0 24px} .info-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 10px 28px rgba(7,28,43,.06)} .info-panel h3{margin-top:0} .info-panel ul{padding-left:20px;display:grid;gap:8px} .info-stack{display:grid;gap:12px} .info-stack>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0} .info-stack strong,.info-stack span{display:block} .info-stack span{color:#657680;margin-top:4px} /* "What to know" and content cards */ .master-card-section{padding-top:58px} .master-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px} .master-info-grid article,.feature-row article,.service-grid article,.route-grid article,.resource-grid article{min-width:0} .master-info-grid article{background:#fff;border:1px solid var(--line);border-radius:17px;padding:24px;box-shadow:0 10px 24px rgba(7,28,43,.05);color:var(--ink)} .master-info-grid article h3{color:var(--ink);margin-top:0} .master-info-grid article p{color:#4d606b;margin-bottom:0} .feature-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0} .feature-row article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;color:var(--ink)} .feature-row article h3{color:var(--ink)} .feature-row article p{color:#526671} .service-grid,.route-grid,.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px} .service-grid article,.route-grid article,.resource-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 8px 20px rgba(7,28,43,.04);color:var(--ink)} .service-grid article h3,.route-grid article h3,.resource-grid article h3{color:var(--ink)} .service-grid article p,.route-grid article p,.resource-grid article p{color:#556873} /* Fleet */ .fleet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px} .fleet-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);box-shadow:0 10px 24px rgba(7,28,43,.06)} .fleet-card img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#eef2f4;display:block} .fleet-card>div{padding:19px} .fleet-card h3{color:var(--ink);font-size:19px} .fleet-card span{color:#76540d;font-size:12px;font-weight:800} .fleet-card p{font-size:14px;color:#536671} .vehicle-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center} .vehicle-detail>*{min-width:0} .vehicle-detail.reverse .vehicle-photo{order:2} .vehicle-detail.reverse>div:last-child{order:1} .vehicle-photo{background:#eef2f4;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:360px;display:flex;align-items:center;justify-content:center} .vehicle-photo img{display:block;width:100%;height:360px;object-fit:contain;background:#eef2f4} .vehicle-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px} .vehicle-specs span{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;min-width:0} .vehicle-specs b{display:block;color:var(--ink);margin-bottom:2px} /* Tables */ .tablewrap{overflow:auto;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:24px;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;min-width:720px} th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink)} th{background:#edf1f3} .rate-note{font-size:14px;color:#52636e;margin-top:14px;background:#fff;border-left:4px solid var(--gold);padding:15px 17px;border-radius:0 10px 10px 0} /* FAQ */ .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin:10px 0;color:var(--ink)} .faq summary{font-weight:900;cursor:pointer;color:var(--ink)} .faq details p{margin:10px 0 0;color:#4d606b} /* Related route strip */ .route-strip{padding:52px 0;background:var(--navy);color:#fff} .route-strip .eyebrow{color:var(--gold2)} .route-strip h2,.route-strip h3{color:#fff} .route-strip .route-grid article{background:#0c2a3d;border-color:#375061;color:#fff;box-shadow:none} .route-strip .route-grid article h3{color:#fff} .route-strip .route-grid article p{color:#dce6ea} .route-strip .route-grid article a{color:var(--gold2)} /* Forms */ .quote-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .quote-form label{display:grid;gap:6px;font-weight:800;font-size:14px;min-width:0} .quote-form input,.quote-form select,.quote-form textarea{width:100%;min-width:0;padding:12px;border:1px solid #bcc8cf;border-radius:7px;font:inherit} .quote-form textarea{resize:vertical} .quote-form button{margin-top:16px} .hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important} .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px} .process-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0} .process-grid b{color:#76540d} /* Footer */ .footer{background:#041522;color:#dce7ec;padding:52px 0 20px} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:25px} .footer-grid>*{min-width:0} .footer h3{color:#fff;font-size:15px;margin-top:0} .footer p{font-size:13px} .footer a{color:#fff} .footer a:hover{color:var(--gold2)} .fine{border-top:1px solid #29404f;margin-top:30px;padding-top:18px;font-size:12px;color:#9fb0ba} /* Responsive */ @media(max-width:1120px){ .links{gap:9px}.links>a,.dropbtn{font-size:10.8px} .footer-grid{grid-template-columns:1.5fr repeat(3,minmax(0,1fr))} } @media(max-width:900px){ .navin{min-height:70px}.menuBtn{display:block;margin-left:auto} .links{display:none;position:absolute;left:-20px;right:-20px;top:70px;background:var(--navy);padding:10px 20px 20px;flex-direction:column;align-items:stretch;max-height:calc(100vh - 70px);overflow:auto} .links.open{display:flex} .links>a{padding:10px 2px} .dropbtn{width:100%;padding:10px 2px;display:flex;justify-content:space-between} .dropdown{position:static;display:none;box-shadow:none;border:0;background:#0b293d;min-width:0;margin:0;padding:5px} .dropdown a{color:#fff} .dropdown a:hover{background:#12364e} .navdrop:hover .dropdown{display:none} .navdrop.open .dropdown{display:block} .navquote{text-align:center} .pagehero{min-height:440px;background-position:58% center} .hero-copy{max-width:560px;padding:50px 0} .pagehero h1{font-size:clamp(36px,7vw,50px);max-width:560px} .pagehero p{max-width:520px} .inner-summary{margin-top:-18px} .inner-summary-grid,.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .inner-summary-grid>div:nth-child(2){border-right:0} .inner-summary-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)} .inner-split,.content-columns,.vehicle-detail{grid-template-columns:1fr} .vehicle-detail.reverse .vehicle-photo,.vehicle-detail.reverse>div:last-child{order:initial} .master-info-grid,.feature-row,.service-grid,.route-grid,.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:620px){ .wrap{width:min(100% - 24px,1180px)} .pagehero{min-height:465px;background-position:63% center} .hero-copy{max-width:100%;padding:46px 0} .pagehero h1{font-size:38px;line-height:1.07;max-width:88%} .pagehero p{font-size:17px;max-width:88%} .actions{max-width:88%} .actions .btn{width:100%} .inner-summary-grid,.trust-grid,.master-info-grid,.feature-row,.service-grid,.route-grid,.resource-grid,.fleet-grid,.process-grid,.form-grid{grid-template-columns:1fr} .inner-summary-grid>div{border-right:0!important;border-bottom:1px solid var(--line)} .inner-summary-grid>div:last-child{border-bottom:0} .vehicle-photo{min-height:250px} .vehicle-photo img{height:auto;max-height:320px} .vehicle-specs{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} .section{padding:50px 0} .section h2{font-size:31px} table{min-width:650px} } @media(max-width:430px){ .pagehero{background-position:66% center} .pagehero h1,.pagehero p,.actions{max-width:94%} .footer-grid{grid-template-columns:1fr} } /* V5 fixed navigation and hero-safe gutters */ body{padding-top:76px} .nav{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:1000} .pagehero .wrap{width:min(1180px,calc(100% - 72px))} .pagehero .hero-copy{padding-left:10px;padding-right:10px} @media(max-width:900px){body{padding-top:70px}.pagehero .wrap{width:min(100% - 36px,1180px)}} @media(max-width:620px){.pagehero .wrap{width:min(100% - 28px,1180px)}.pagehero .hero-copy{padding-left:4px;padding-right:4px}} .contact-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .contact-choice-grid article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:0 10px 24px rgba(7,28,43,.05);min-width:0} .contact-choice-grid h2{font-size:28px!important;margin-top:6px!important} .contact-choice-grid .btn{margin-top:8px;max-width:100%;overflow-wrap:anywhere} @media(max-width:900px){.contact-choice-grid{grid-template-columns:1fr}}