:root{
  --ink:#1a1a1a;
  --ink-2:#242424;
  --panel:#2a2a2a;
  --paper:#ffffff;
  --paper-2:#f4f4f4;
  --line:#383838;
  --amber:#e01b24;
  --amber-dark:#b3141b;
  --amber-tint:#fdeced;
  --text-on-dark:#ffffff;
  --text-muted-dark:#b3b3b3;
  --text-body:#1a1a1a;
  --text-muted:#5e5e5e;
  --danger:#c23b2f;
  --danger-tint:#fbe7e4;
  --success:#3f7d3a;
  --success-tint:#e9f3e6;
  --footer-bg:#000000;
  --red-light:#ff3b42;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--text-body);font-family:'Work Sans',sans-serif;}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1.02;}
.eyebrow{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:600;color:var(--amber);}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

/* NAV */
header.main{background:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:20;}
nav.wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;}
.logo{white-space:nowrap;font-family:'Archivo Black',sans-serif;color:#fff;font-size:22px;letter-spacing:.01em;display:flex;align-items:center;gap:2px;}
.logo span{color:var(--amber);}
.navlinks{display:flex;gap:22px;}
.navlinks>div{position:relative;}
.navlinks a.top{white-space:nowrap;color:var(--text-on-dark);font-size:14px;font-weight:600;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:10px 2px;display:inline-block;border-bottom:2px solid transparent;}
.navlinks>div:hover a.top{border-bottom:2px solid var(--amber);color:#fff;}
.navlinks>div.active a.top{border-bottom:2px solid var(--amber);color:#fff;}
.dropdown{display:none;position:absolute;top:100%;left:0;background:var(--panel);border:1px solid var(--line);min-width:230px;padding:10px 0;box-shadow:0 12px 24px rgba(0,0,0,.35);}
.navlinks>div:hover .dropdown{display:block;}
.dropdown a{display:block;padding:9px 18px;font-size:13.5px;color:var(--text-on-dark);}
.dropdown a:hover{background:var(--ink);color:var(--red-light);}
.navright{display:flex;align-items:center;gap:20px;}
.navphone{display:flex;align-items:center;gap:9px;color:var(--text-on-dark);}
.navphone svg{width:19px;height:19px;fill:var(--amber);flex:none;}
.navphone span{white-space:nowrap;display:flex;flex-direction:column;line-height:1.12;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;letter-spacing:.02em;}
.navphone small{font-family:'Work Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted-dark);margin-bottom:1px;}
.navphone:hover{color:#fff;}
.navphone:hover small{color:var(--red-light);}
.navcta{white-space:nowrap;background:var(--amber);color:#fff;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;letter-spacing:.04em;font-size:14px;padding:12px 22px;border-radius:2px;}
.navcta:hover{background:var(--amber-dark);}

/* GENERIC PAGE HEADER (non-home pages) */
.pagehead{background:var(--ink);color:#fff;padding:44px 0;}
.pagehead h1{font-size:40px;color:#fff;}
.pagehead p{font-family:'Work Sans',sans-serif;text-transform:none;letter-spacing:0;color:var(--text-muted-dark);font-size:15px;margin-top:10px;max-width:56ch;}
.breadcrumb{font-size:12.5px;color:var(--text-muted-dark);margin-bottom:12px;}
.breadcrumb a:hover{color:var(--amber);}

/* FORM ELEMENTS (shared across booking + all applications) */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;border:1px solid #dcdcdc;border-radius:4px;padding:11px 12px;font-size:14.5px;font-family:'Work Sans',sans-serif;background:#fff;color:var(--text-body);}
.field textarea{resize:vertical;min-height:110px;}
.field .hint{font-size:12px;color:var(--text-muted);margin-top:5px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.btn-amber{background:var(--amber);color:#fff;border:none;padding:14px 22px;border-radius:4px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:.05em;cursor:pointer;}
.btn-amber:hover{background:var(--amber-dark);}
.btn-amber.full{width:100%;}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:13px 22px;border-radius:4px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-weight:700;font-size:14px;letter-spacing:.05em;cursor:pointer;}
.btn-outline:hover{background:var(--ink);color:#fff;}
.fine{font-size:11.5px;color:var(--text-muted);text-align:center;margin-top:10px;}
.card{background:#fff;border:1px solid #e2e2e2;border-radius:6px;padding:28px;}
.formcard{max-width:720px;}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;font-size:13.5px;color:var(--text-body);}
.checkline input{margin-top:3px;}
/* .ok / .err set colour only. They used to set display:block, which made
   every status box - success and failure alike - visible on page load. */
.form-status{border-radius:4px;padding:14px 16px;font-size:14px;margin-top:16px;display:none;}
.form-status.ok{background:var(--success-tint);color:var(--success);border:1px solid var(--success);}
.form-status.err{background:var(--danger-tint);color:var(--danger);border:1px solid var(--danger);}

/* FOOTER */
footer{background:var(--footer-bg);color:var(--text-muted-dark);padding:50px 0 20px;font-size:13.5px;}
.est-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.splitgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:48px;}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px;border-bottom:1px solid var(--line);}
footer h4{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-size:14px;margin-bottom:14px;}
footer a{display:block;margin-bottom:9px;color:var(--text-muted-dark);}
footer a:hover{color:var(--red-light);}
.social{display:flex;gap:10px;margin-top:18px;}
.social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0;border:none;border-radius:6px;background:var(--amber);transition:background .15s;}
.social svg{width:16px;height:16px;fill:#fff;}
.social a:hover{background:var(--amber-dark);}

.footbottom{display:flex;justify-content:space-between;padding-top:18px;flex-wrap:wrap;gap:10px;}
.chatbubble{position:fixed;bottom:22px;right:22px;background:var(--amber);color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;box-shadow:0 10px 24px rgba(0,0,0,.35);text-align:center;line-height:1.1;}

/* SHARED DARK SECTION (fare estimator on Home + Ride With Us) */
section.estimator{background:var(--ink);color:var(--text-on-dark);padding:70px 0;}


/* MOBILE NAV */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;background:transparent;border:1px solid var(--line);border-radius:4px;cursor:pointer;}
.navtoggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s;}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .navtoggle span:nth-child(2){opacity:0;}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobilemenu{display:none;background:var(--ink-2);border-bottom:1px solid var(--line);max-height:calc(100vh - 64px);overflow-y:auto;}
body.nav-open .mobilemenu{display:block;}
.mobilemenu a{display:block;padding:13px 20px;color:var(--text-on-dark);border-bottom:1px solid var(--line);font-size:15px;}
.mobilemenu a.mm-top{background:var(--ink);font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:15px;}
.mobilemenu a.mm-sub{padding-left:36px;font-size:14px;color:var(--text-muted-dark);}
.mobilemenu a:hover,.mobilemenu a:focus{color:var(--red-light);}

@media(max-width:1120px){
  nav.wrap{gap:16px;}
  .navlinks{gap:14px;}
  .navlinks a.top{font-size:13px;letter-spacing:.04em;}
  .navphone small{display:none;}
  .navphone span{font-size:18px;}
  .navphone svg{width:17px;height:17px;}
  .navright{gap:14px;}
  .navcta{padding:11px 16px;font-size:13px;}
}
/* the links stop fitting before 1000px once the condensed webfont is slow or
   missing, so the drawer takes over at 1080 */
@media(max-width:1080px){
  .navlinks{display:none;}
  .navtoggle{display:flex;}
  .navright{gap:12px;}
  .navphone small{display:block;}
  .navphone span{font-size:20px;}
}
@media(max-width:1000px){
  .row2,.row3{grid-template-columns:1fr;}
  .footgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .est-grid,.splitgrid{grid-template-columns:1fr;gap:32px;}
}
@media(max-width:620px){
  .wrap{padding:0 18px;}
  nav.wrap{height:64px;gap:10px;}
  .logo{font-size:19px;}
  .navphone span{display:none;}
  .navphone svg{width:21px;height:21px;}
  .navcta{padding:10px 13px;font-size:12.5px;}
  .navtoggle{width:40px;height:36px;padding:0 9px;}
  .mobilemenu{max-height:calc(100vh - 64px);}
  .card{padding:20px;}
  .footgrid{grid-template-columns:1fr;gap:24px;}
  .footbottom{flex-direction:column;align-items:flex-start;gap:8px;font-size:12px;}
}