:root {
--bg: #0b0c10;
--panel: #111319;
--text: #e9eef5;
--muted: #a7b0be;
--accent: #ef3e36; /* CN Red */
--accent-600: #cc312c;
--line: #232736;
--card: #161924;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
background: var(--bg); color: var(--text);
}
img { max-width: 100%; height: auto; }

a {
  color: var(--accent); /* or use #ef3e36 */
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

.container { width: min(1120px, 92%); margin: 0 auto; }
.section { padding: 64px 0; }
.section.alt { background: var(--panel); }
.section-title { font-size: 1.875rem; margin: 0 0 20px; }
.muted { color: var(--muted); }
.tiny { font-size: .875rem; }


.site-header { position: sticky; top: 0; backdrop-filter: saturate(160%) blur(6px); background: rgba(11,12,16,.8); border-bottom: 1px solid var(--line); z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; padding: 14px 0; }
.main-nav a { color: var(--text); text-decoration: none; margin-left: 20px; opacity: .9; }
.main-nav a:hover, .main-nav a.active { color: #fff; opacity: 1; }
.brand {
    display: flex;
    align-items: center
    gap: 10px; 
}
/* Center and scale logo consistently */
.site-logo {
  display: block;
  margin: 0 auto;             /* centers logo in its container */
  max-height: 60px;           /* adjust size if needed */
  height: auto;
  width: auto;
}

/* If the logo sits inside a flex container (like a navbar) */
header, .navbar, .nav-container {
  display: flex;
  align-items: center;        /* vertically center */
  justify-content: space-between; /* if you have nav links on the right */
}

/* On mobile, if it looks too big or misaligned */
@media (max-width: 600px) {
  .site-logo {
    max-height: 48px;
  }
}

/* Center and resize hero logo cleanly */
.hero-logo {
  display: block;
  margin: 40px auto 20px;     /* centers the logo and adds breathing room */
  max-width: 220px;           /* adjust this value to make the logo smaller/larger */
  height: auto;               /* keeps proportions */
  object-fit: contain;
}

/* Responsive size for phones */
@media (max-width: 600px) {
  .hero-logo {
    max-width: 150px;         /* scales down for mobile */
    margin: 20px auto 10px;
  }
}

.hero { padding: 72px 0 32px; background:
radial-gradient(800px 400px at 0% 0%, rgba(239,62,54,.08), transparent),
radial-gradient(700px 300px at 100% 20%, rgba(239,62,54,.06), transparent);
}
.hero-grid { display: grid;
    /* Default to single column for mobile */
    grid-template-columns: 1fr;
    gap: 40px; /* Increased gap for better separation */
    align-items: center; }

  .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  flex: 0 0 auto;        /* 👈 stops flexbox from stretching it */
}


        
.hero-art{
    margin: 0; /* Remove default figure margin */
    /* Ensure the art is vertically centered on desktop */
    align-self: center;
    /* On mobile, center the image */
    text-align: center;
        }
.hero-art img { 
    /* Set a max width to prevent it from dominating the space */
    max-width: 100%;
    /* Ensure the image remains centered in its new smaller space */
    display: inline-block;
}
.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin: 0 0 10px; }
.accent { color: var(--accent); }
.hero-copy p { color: var(--muted); font-size: 1.125rem; }
.hero-cta { display: flex; gap: 12px; margin: 16px 0 18px; }
.trust-badges { list-style: none; padding: 0; display: flex; gap: 16px; color: var(--muted); }


.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.card h3 { margin: 0 0 8px; font-size: 1.1rem; }


.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.feature-panel { display: grid; gap: 14px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }


.coverage-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.coverage-tags li { background: #131725; border: 1px solid var(--line); color: var(--muted); padding: 6px 10px; border-radius: 999px; font-size: .9rem; }


.checklist { padding-left: 18px; }
.checklist li { margin: 8px 0; }


.cta { background: linear-gradient(90deg, var(--accent) 0, var(--accent-600) 100%); color: white; text-align: center; padding: 48px 0; }
.cta .btn { background: #0b0c10; }
/* --- BUTTON STYLING --- */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    justify-content: center;
    border-radius: 10px; /* Slightly rounded corners */
    text-decoration: none;
    font-weight: 600; /* Semi-bold */
    transition: background-color 0.2s, opacity 0.2s, transform 0.1s;
    cursor: pointer;
    text-align: center;
    white-space: nowrap; /* Prevents button text from wrapping */
}

/* Primary Button (Request a Ride) */
.btn-primary {
    background: var(--accent); /* Your CN Red color */
    color: #fff;
    }

.btn-primary:hover {
    background: var(--accent-600); /* Slightly darker shade on hover */
    
}

/* Ghost/Outline Button (Our Services) */
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    
}

.btn-light {
    background: transparent; /*light background */
    color: var(--accent); /* Dark text */
    border: 1px solid var(--accent);
}

.btn-light:hover {
    background: var(--accent);
    color: #fff;
}
/* --- END BUTTON STYLING --- */

.service-card {
    margin: 10px;
    border-radius: 12px;
    padding: 15px;
}
.services-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 15px;
  padding: 0 10px;
}

.service-card {
  flex: 0 0 80%;
  scroll-snap-align: center;
}
@media (max-width: 600px) {
    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .service-card h3 {
        font-size: 1.1rem;
  }
  .service-card p {
    font-size: 0.9rem;
  }

.main-nav {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: center;
    }
    
     .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }
.site-footer { border-top: 1px solid var(--line); background: #0d0f15; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 20px 0; }
.footer-grid nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
}
/* ---------- BUTTONS: mobile-safe, high specificity ---------- */
.hero-cta a,
.hero-cta a:link,
.hero-cta a:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary button */
.hero-cta a.btn.btn-primary {
  background: #ef3e36;        /* accent */
  color: #ffffff !important;
  border-color: #ef3e36;
}

/* Outline button */
.hero-cta a.btn.btn-ghost {
  background: transparent;
  color: #ef3e36 !important;
  border-color: #ef3e36;
}

/* Hover/active (works on mobile too for tap) */
.hero-cta a.btn.btn-primary:active,
.hero-cta a.btn.btn-primary:hover { background: #cc312c; border-color: #cc312c; }
.hero-cta a.btn.btn-ghost:active,
.hero-cta a.btn.btn-ghost:hover { background: #ef3e36; color: #fff !important; }

/* Make the two buttons stack nicely on phones */
@media (max-width: 768px) {
  .hero-cta { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-cta a { width: 100%; }
}

/* Force general link color so phone doesn’t show default blue anywhere */
a { color: #ef3e36; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header contact links (dispatch/email) should look like text, not default blue */
.contact-aside a,
.footer-grid nav a { color: #e9eef5; text-decoration: none; }
.contact-aside a:hover,
.footer-grid nav a:hover { color: #ffffff; text-decoration: underline; }
/* --- FIX the stray brace area: keep this block only --- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile first */
  gap: 40px;
  align-items: center;
}


/* --- Typo fix --- */
.btn-ghost:hover {
  color: #fff;
  background: var(--accent);
}

/* --- Responsive layout cleanups --- */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .two-col { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 48px 0; }
}

/* --- Service carousel: tighter, non-overlapping cards --- */
.services-container {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 14px;
  padding: 0 12px 8px;
}
.service-card {
  flex: 0 0 85%;
  max-width: 85%;
  scroll-snap-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  line-height: 1.45;
  word-break: break-word;
}
@media (min-width: 480px) and (max-width: 767px) {
  .service-card { flex-basis: 70%; max-width: 70%; }
}

/* Optional: hide iOS scrollbar track but keep scrollability */
.services-container::-webkit-scrollbar { height: 8px; }
.services-container::-webkit-scrollbar-thumb { background: #2a2f3f; border-radius: 999px; }
/* ========== Mobile Card Layout (Stacked) ========== */
@media (max-width: 768px) {
  .services-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px 32px !important;
    overflow: visible !important;
  }

  .service-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transform: none !important;
  }

  .service-card h3 {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .service-card p {
    font-size: 1rem !important;
    line-height: 1.4;
  }

  /* Adjust section heading size for small screens */
  .section-title, h2 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.2;
    text-align: left;
    margin-bottom: 20px;
  }
}
/* Phones: stack the generic .cards grid */
@media (max-width: 767px) {
  .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px 24px !important;
  }
  .card {
    margin: 0 !important;
    border-radius: 16px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--line);
  }
}
/* ---------- Layout primitives ---------- */
.container{
  width:min(1120px, 100% - 32px);
  margin-inline:auto;
}

/* ---------- Header: logo + nav alignment ---------- */
.site-header .container{
  display:flex;
  align-items:center;              /* vertically center logo & links */
  justify-content:space-between;   /* logo left, nav right */
  gap:16px;
  padding-block:12px;
}

.brand{ display:flex; align-items:center; text-decoration:none; }
.site-logo{
  display:block;
  height:42px;        /* matches your original intent */
  width:auto;
}

/* nav links */
.main-nav{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;     /* prevents overflow on narrower screens */
}
.main-nav a{ line-height:1; }

/* keep the red button aligned */
.main-nav .btn{ padding:10px 14px; border-radius:14px; }

/* Phones: wrap neatly, keep button full-width at the end */
@media (max-width: 768px){
  .site-header .container{ flex-wrap:wrap; }
  .main-nav{
    width:100%;
    justify-content:flex-start;
    gap:14px;
  }
  .main-nav .btn{
    order:99;          /* send to end of row */
    width:100%;        /* large, easy tap target */
  }
}

/* ---------- Hero alignment & scaling ---------- */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:40px;
  align-items:center;
}
.hero-art img{ display:block; width:100%; height:auto; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hero h1{ font-size:clamp(28px, 7vw, 48px); line-height:1.1; }
}

/* ---------- Services cards: no bunching on mobile ---------- */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}
.card{
  background:#121418; border:1px solid #2a2e36;
  border-radius:16px; padding:16px;
}
@media (max-width: 600px){
  .cards{ grid-template-columns:1fr; gap:14px; }
}

/* ---------- Footer logo (keeps alignment consistent) ---------- */
.site-footer img{ height:36px; width:auto; display:block; }
/* --- HERO: fix image overlapping CTA --- */
.hero { position: relative; overflow: hidden; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:40px;
  align-items:center;
}

/* Kill any absolute/translate that might be lingering */
.hero-art,
.hero-art img{
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

.hero-art{
  justify-self: end;          /* keeps image to the right on desktop */
  max-width: 560px;           /* guardrail so it can’t sprawl over the CTA */
}

.hero-art img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

/* Ensure the text/CTA sits ABOVE the image layer */
.hero-copy{ position: relative; z-index: 2; }
.hero-cta  { position: relative; z-index: 3; }

/* Prevent any child from forcing overflow */
.hero-grid > * { min-width: 0; }

/* Mobile: stack neatly so nothing can overlap */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-art{
    justify-self: center;
    max-width: 92vw;
  }
}