/* =========================================================
   ONEWAY CAB — MAIN STYLESHEET
   =========================================================
   HOW TO CHANGE COLORS / THEME
   Just edit the values inside :root below.
   - --color-primary    -> main brand color (header, footer, headings)
   - --color-secondary  -> call-to-action buttons, links, hover states
   - --color-highlight  -> price tags, stars, badges, small accents
   Everything on the site is built from these variables, so changing
   them here updates the whole site instantly.
   ========================================================= */

:root{
  /* ---------- BRAND COLORS (edit these) ---------- */
  --color-primary:        #0B3D62;   /* deep navy blue  */
  --color-primary-dark:   #07273F;   /* darker shade for hover/footer */
  --color-primary-light:  #11507F;   /* lighter shade for gradients */

  --color-secondary:      #FF7A30;   /* orange - buttons / CTAs */
  --color-secondary-dark: #E5631E;   /* orange hover */

  --color-highlight:      #FFC845;   /* amber/gold - prices, stars, badges */

  /* ---------- NEUTRAL / BASE COLORS ---------- */
  --color-bg:        #F6F9FC;        /* page background */
  --color-surface:   #FFFFFF;        /* card / panel background */
  --color-dark:      #102433;        /* near-black for footer / dark sections */
  --color-text:      #25313D;        /* main text color */
  --color-text-light:#6B7A88;        /* secondary text color */
  --color-border:    #E3EAF0;        /* borders, dividers */
  --color-success:   #1FA463;        /* "available", verified badges */
  --color-white:     #FFFFFF;
  --color-overlay:   rgba(10,30,48,.55); /* dark overlay on hero images */

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* ---------- LAYOUT ---------- */
  --container-w: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS / TRANSITIONS ---------- */
  --shadow-sm: 0 2px 8px rgba(16,36,51,.06);
  --shadow-md: 0 10px 30px rgba(16,36,51,.10);
  --shadow-lg: 0 20px 50px rgba(16,36,51,.16);
  --transition: all .25s ease;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto;}

a{text-decoration:none;color:inherit;}

ul{list-style:none;}

button{font-family:inherit;cursor:pointer;border:none;background:none;}

h1,h2,h3,h4,h5{
  font-family:var(--font-heading);
  color:var(--color-primary);
  line-height:1.25;
  font-weight:700;
}

:focus-visible{
  outline:3px solid var(--color-secondary);
  outline-offset:2px;
}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 20px;
}

section{padding:80px 0;}

/* =========================================================
   UTILITIES
   ========================================================= */
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:10px;
}

.section-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 50px;
}

.section-head h2{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom:14px;
}

.section-head p{
  color:var(--color-text-light);
  font-size:1.05rem;
}

.section-head.align-left{
  margin:0 0 50px;
  text-align:left;
}

.text-center{text-align:center;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  transition:var(--transition);
  white-space:nowrap;
}

.btn-primary{
  background:var(--color-secondary);
  color:var(--color-white);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{
  background:var(--color-secondary-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.btn-outline{
  background:transparent;
  border:2px solid var(--color-white);
  color:var(--color-white);
}
.btn-outline:hover{
  background:var(--color-white);
  color:var(--color-primary);
}

.btn-dark-outline{
  background:transparent;
  border:2px solid var(--color-primary);
  color:var(--color-primary);
}
.btn-dark-outline:hover{
  background:var(--color-primary);
  color:var(--color-white);
}

.btn-block{width:100%;}
.btn-sm{padding:10px 20px;font-size:.85rem;}

/* Badges / pills */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,200,69,.15);
  color:var(--color-primary);
  border:1px solid rgba(255,200,69,.4);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:.8rem;
  font-weight:700;
}

/* Grid helpers */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* =========================================================
   TOP STRIP (marquee announcement bar)
   ========================================================= */
.top-strip{
  background:var(--color-dark);
  color:var(--color-white);
  overflow:hidden;
  white-space:nowrap;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
}
.top-strip .marquee{
  display:inline-flex;
  padding-left:100%;
  animation:marquee 70s linear infinite;
}
.top-strip .marquee span{
  padding:10px 40px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.top-strip .marquee span::before{
  content:"•";
  color:var(--color-highlight);
  margin-right:8px;
}
@keyframes marquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}
@media (prefers-reduced-motion: reduce){
  .top-strip .marquee{animation:none; padding-left:20px;}
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--color-surface);
  box-shadow:var(--shadow-sm);
}

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
}

.logo{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.08rem;
  color:var(--color-primary);
  letter-spacing:-.01em;
  text-decoration:none;
  transition:opacity .2s ease;
}
.logo:hover{opacity:.85;}
.logo img{height:44px;width:44px;border-radius:10px;box-shadow:0 2px 10px rgba(11,61,98,.15);}
.logo .logo-text{line-height:1.15;}
.logo .logo-text small{
  display:block;
  font-size:.65rem;
  font-weight:500;
  color:var(--color-text-light);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-links a{
  font-weight:600;
  font-size:.95rem;
  color:var(--color-text);
  transition:var(--transition);
  position:relative;
}
.nav-links a:hover,
.nav-links a.active{
  color:var(--color-secondary);
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-8px;
  height:3px;
  background:var(--color-secondary);
  border-radius:2px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:6px;
}
.nav-toggle span{
  width:26px;height:3px;border-radius:2px;
  background:var(--color-primary);
  transition:var(--transition);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color:var(--color-white);
  padding:70px 0 140px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/hero-pattern.svg') repeat;
  opacity:.12;
  pointer-events:none;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}
.hero-content .eyebrow{color:var(--color-highlight);}
.hero-content h1{
  color:var(--color-white);
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom:18px;
}
.hero-content h1 em{
  font-style:normal;
  color:var(--color-highlight);
}
.hero-content p{
  color:rgba(255,255,255,.85);
  font-size:1.05rem;
  max-width:520px;
  margin-bottom:30px;
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.hero-stats{
  display:flex;
  gap:36px;
  flex-wrap:wrap;
}
.hero-stats .stat strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.6rem;
  color:var(--color-highlight);
}
.hero-stats .stat span{
  font-size:.82rem;
  color:rgba(255,255,255,.75);
}

.hero-media img{
  width:100%;
  height:100%;
  max-height:480px;
  object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:block;
}

/* ---- Booking widget ---- */
.booking-widget{
  position:relative;
  z-index:2;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  margin-top:-90px;
  padding:8px;
}
.booking-tabs{
  display:flex;
  gap:6px;
  padding:8px;
}
.booking-tabs button{
  flex:1;
  padding:14px 10px;
  border-radius:var(--radius-md);
  font-weight:700;
  font-size:.92rem;
  color:var(--color-text-light);
  transition:var(--transition);
}
.booking-tabs button.active{
  background:var(--color-primary);
  color:var(--color-white);
}
.booking-panel{
  display:none;
  padding:24px;
}
.booking-panel.active{
  display:grid;
}
.booking-panel form{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  align-items:end;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field label{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--color-text-light);
}
.field input,
.field select{
  padding:13px 14px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.95rem;
  color:var(--color-text);
  background:var(--color-surface);
  transition:var(--transition);
}
.field input:focus,
.field select:focus{
  border-color:var(--color-secondary);
}
.booking-panel .btn{
  grid-column:span 1;
  height:50px;
}

/* =========================================================
   TRUST / WHY CHOOSE US
   ========================================================= */
.why-us{background:var(--color-surface);}
.why-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:32px 26px;
  transition:var(--transition);
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.why-icon{
  width:54px;height:54px;
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-primary);
  color:var(--color-white);
  margin-bottom:18px;
}
.why-card h3{font-size:1.15rem;margin-bottom:8px;}
.why-card p{color:var(--color-text-light);font-size:.95rem;}

/* =========================================================
   ROUTES
   ========================================================= */
.route-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
  transition:var(--transition);
}
.route-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.route-card .route-img{
  position:relative;
  height:200px;
  overflow:hidden;
  background:#e8edf2;
}
.route-card .route-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease, opacity .4s ease;
  opacity:0;
}
.route-card .route-img img.loaded{
  opacity:1;
}
.route-card:hover .route-img img{
  transform:scale(1.06);
}
.route-card .route-img .tag{
  position:absolute;
  top:14px;left:14px;
  background:var(--color-secondary);
  color:var(--color-white);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-pill);
}
.route-card .route-img .city-name{
  position:absolute;
  bottom:14px;left:18px;
  color:var(--color-white);
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:800;
}
.route-card .route-img .count{
  position:absolute;
  bottom:14px;right:14px;
  background:rgba(16,36,51,.55);
  color:var(--color-white);
  font-size:.75rem;
  padding:5px 12px;
  border-radius:var(--radius-pill);
}
.route-card .route-img::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(7,30,48,.75) 100%);
}
.route-list{padding:18px 18px 6px;}
.route-list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--color-border);
  font-size:.88rem;
}
.route-list li:last-child{border-bottom:none;}
.route-list .route-name{color:var(--color-text);font-weight:600;}
.route-list .route-km{color:var(--color-text-light);font-size:.78rem;}
.route-list .route-price{
  color:var(--color-highlight);
  background:var(--color-primary);
  font-weight:700;
  padding:2px 10px;
  border-radius:var(--radius-pill);
  font-size:.8rem;
  white-space:nowrap;
}
.route-card .route-cta{
  display:block;
  text-align:center;
  margin:16px 18px 20px;
  padding:12px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:.9rem;
  background:var(--color-bg);
  color:var(--color-primary);
  border:1.5px solid var(--color-border);
  transition:var(--transition);
}
.route-card .route-cta:hover{
  background:var(--color-primary);
  color:var(--color-white);
  border-color:var(--color-primary);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{background:var(--color-surface);}
.service-card{
  background:var(--color-bg);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:var(--transition);
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.service-card .service-img{height:170px;overflow:hidden;}
.service-card .service-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition);}
.service-card:hover .service-img img{transform:scale(1.06);}
.service-body{padding:24px;}
.service-body h3{font-size:1.2rem;margin-bottom:8px;}
.service-body > p{color:var(--color-text-light);font-size:.92rem;margin-bottom:14px;}
.service-body ul{margin-bottom:18px;}
.service-body ul li{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;color:var(--color-text);
  padding:5px 0;
}
.service-body ul li::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--color-secondary);
  flex-shrink:0;
}
.service-link{
  font-weight:700;
  color:var(--color-primary);
  font-size:.9rem;
  display:inline-flex;align-items:center;gap:6px;
}
.service-link:hover{color:var(--color-secondary);}

/* =========================================================
   FLEET
   ========================================================= */
.fleet-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.fleet-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  border:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.fleet-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 32px rgba(0,0,0,.13);
}
/* Image area — tag lives inside here now */
.fleet-card .fleet-img{
  position:relative;
  height:190px;
  overflow:hidden;
  background:#f0f2f5;
}
.fleet-card .fleet-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .35s ease;
}
.fleet-card:hover .fleet-img img{transform:scale(1.04);}
/* Gradient overlay so tag is always readable over any photo */
.fleet-card .fleet-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.28) 0%, transparent 55%);
  pointer-events:none;
}
.fleet-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--color-highlight);
  color:var(--color-primary-dark);
  font-size:.67rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.fleet-tag--premium{
  background:var(--color-secondary);
  color:#fff;
}
.fleet-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.fleet-body h3{font-size:1.12rem;margin-bottom:2px;color:var(--color-primary);}
.fleet-body .fleet-model{color:var(--color-text-light);font-size:.8rem;margin-bottom:10px;line-height:1.4;}
.fleet-body .fleet-price{
  font-family:var(--font-heading);
  color:var(--color-secondary);
  font-weight:800;
  font-size:1.25rem;
  margin-bottom:12px;
}
.fleet-body .fleet-price span{
  font-size:.75rem;color:var(--color-text-light);font-weight:500;
}
.fleet-specs{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;
}
.fleet-specs span{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  font-size:.72rem;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  color:var(--color-text-light);
  font-weight:600;
}
.fleet-btn{
  display:block;
  text-align:center;
  margin-top:auto;
  padding:11px 0;
  background:var(--color-primary);
  color:#fff;
  font-size:.85rem;
  font-weight:700;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background .18s ease;
}
.fleet-btn:hover{background:var(--color-secondary);}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{background:var(--color-surface);}
.testimonial-card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:28px;
  height:100%;
}
.testimonial-card .stars{color:var(--color-highlight);font-size:.95rem;margin-bottom:14px;letter-spacing:2px;}
.testimonial-card p{color:var(--color-text);font-size:.95rem;margin-bottom:20px;}
.testimonial-author{display:flex;align-items:center;gap:14px;}
.testimonial-author .avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--color-primary);
  color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-family:var(--font-heading);
  flex-shrink:0;
}
.testimonial-author strong{display:block;font-size:.95rem;color:var(--color-primary);}
.testimonial-author span{font-size:.8rem;color:var(--color-text-light);}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:linear-gradient(120deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color:var(--color-white);
  text-align:center;
  padding:60px 0;
}
.cta-band h2{color:var(--color-white);margin-bottom:10px;font-size:clamp(1.5rem,3vw,2.2rem);}
.cta-band p{color:rgba(255,255,255,.9);margin-bottom:28px;}
.cta-band .hero-actions{justify-content:center;}
.cta-band .btn-outline{border-color:rgba(255,255,255,.6);}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--color-dark);color:rgba(255,255,255,.75);}
.footer-top{padding:70px 0 40px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
}
.footer-about .logo{color:var(--color-white);margin-bottom:16px;}
.footer-about p{font-size:.92rem;line-height:1.7;margin-bottom:20px;}
.social-links{display:flex;gap:10px;}
.social-links a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  transition:var(--transition);
}
.social-links a:hover{background:var(--color-secondary);}
.footer-col h4{
  color:var(--color-white);
  font-size:1.05rem;
  margin-bottom:20px;
}
.footer-col ul li{margin-bottom:12px;}
.footer-col ul li a{
  font-size:.92rem;
  transition:var(--transition);
}
.footer-col ul li a:hover{color:var(--color-highlight);padding-left:4px;}
.footer-col .contact-item{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.92rem;margin-bottom:14px;
}
.footer-col .contact-item svg{flex-shrink:0;margin-top:3px;color:var(--color-highlight);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0;
  text-align:center;
  font-size:.85rem;
}
.footer-bottom a{color:var(--color-highlight);font-weight:600;}

/* Floating mobile action bar */
.mobile-bar{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:1000;
  background:var(--color-surface);
  box-shadow:0 -4px 20px rgba(16,36,51,.12);
}
.mobile-bar .container{
  display:flex;
  padding:10px 20px;
  gap:10px;
}
.mobile-bar a{
  flex:1;
  text-align:center;
  padding:12px;
  border-radius:var(--radius-sm);
  font-weight:700;
  font-size:.88rem;
}
.mobile-bar a.call{background:var(--color-primary);color:var(--color-white);}
.mobile-bar a.book{background:var(--color-secondary);color:var(--color-white);}
.mobile-bar a.whatsapp{background:#25D366;color:var(--color-white);}

/* =========================================================
   INNER PAGE HEADER (About / Services / Contact)
   ========================================================= */
.page-hero{
  background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color:var(--color-white);
  padding:64px 0;
  text-align:center;
}
.page-hero .eyebrow{color:var(--color-highlight);}
.page-hero h1{color:var(--color-white);font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:10px;}
.breadcrumbs{
  display:flex;justify-content:center;gap:8px;
  font-size:.9rem;color:rgba(255,255,255,.8);
}
.breadcrumbs a{font-weight:600;color:var(--color-highlight);}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.about-media{position:relative;}
.about-media img{width:100%;height:100%;max-height:420px;object-fit:cover;object-position:center;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:block;}
.about-media .badge-float{
  position:absolute;
  bottom:-24px;right:-24px;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:18px 24px;
  text-align:center;
}
.about-media .badge-float strong{
  display:block;font-family:var(--font-heading);
  font-size:1.8rem;color:var(--color-secondary);
}
.about-media .badge-float span{font-size:.8rem;color:var(--color-text-light);}

.about-content h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px;}
.about-content p{color:var(--color-text-light);margin-bottom:16px;}
.value-list{display:grid;gap:14px;margin-top:20px;}
.value-list li{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:14px 16px;
}
.value-list .v-icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--color-highlight);
  color:var(--color-primary-dark);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;flex-shrink:0;
}
.value-list strong{display:block;color:var(--color-primary);font-size:.98rem;}
.value-list span{font-size:.85rem;color:var(--color-text-light);}

.mission-vision{background:var(--color-surface);}
.mv-card{
  background:var(--color-bg);
  border-radius:var(--radius-md);
  padding:36px;
  border:1px solid var(--color-border);
  height:100%;
}
.mv-card .why-icon{margin-bottom:22px;}
.mv-card h3{font-size:1.3rem;margin-bottom:12px;}
.mv-card p{color:var(--color-text-light);}

.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.timeline-card{
  text-align:center;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:30px 20px;
  position:relative;
}
.timeline-card .t-year{
  font-family:var(--font-heading);
  color:var(--color-secondary);
  font-size:1.6rem;font-weight:800;
  margin-bottom:8px;
}
.timeline-card h4{font-size:1.02rem;margin-bottom:6px;}
.timeline-card p{font-size:.85rem;color:var(--color-text-light);}

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.service-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding:60px 0;
  border-bottom:1px solid var(--color-border);
}
.service-detail:last-child{border-bottom:none;}
.service-detail.reverse .service-detail-media{order:2;}
.service-detail-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);}
.service-detail-content .eyebrow{margin-bottom:10px;}
.service-detail-content h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:14px;}
.service-detail-content p{color:var(--color-text-light);margin-bottom:18px;}
.feature-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-bottom:24px;
}
.feature-grid div{
  display:flex;align-items:center;gap:10px;
  font-size:.92rem;font-weight:600;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:10px 14px;
}
.feature-grid div::before{
  content:"✓";
  width:22px;height:22px;border-radius:50%;
  background:var(--color-success);
  color:var(--color-white);
  font-size:.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Pricing table */
.pricing{background:var(--color-surface);}
.pricing-table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.pricing-table th,
.pricing-table td{
  padding:16px 20px;
  text-align:left;
  border-bottom:1px solid var(--color-border);
  font-size:.95rem;
}
.pricing-table thead th{
  background:var(--color-primary);
  color:var(--color-white);
  font-family:var(--font-heading);
}
.pricing-table tbody tr:last-child td{border-bottom:none;}
.pricing-table tbody tr:hover{background:var(--color-bg);}
.pricing-table .price{
  color:var(--color-secondary);
  font-weight:800;
}

/* FAQ accordion */
.faq{background:var(--color-surface);}
.faq-item{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  margin-bottom:14px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 22px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1rem;
  color:var(--color-primary);
  background:var(--color-bg);
  text-align:left;
}
.faq-question .icon{
  width:26px;height:26px;border-radius:50%;
  background:var(--color-secondary);
  color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;flex-shrink:0;
  transition:var(--transition);
}
.faq-item.open .faq-question .icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-answer p{padding:0 22px 18px;color:var(--color-text-light);font-size:.93rem;}
.faq-item.open .faq-answer{max-height:240px;}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
}
.contact-info-card{
  background:var(--color-primary);
  color:var(--color-white);
  border-radius:var(--radius-lg);
  padding:40px;
  height:100%;
}
.contact-info-card h3{color:var(--color-white);margin-bottom:8px;}
.contact-info-card > p{color:rgba(255,255,255,.8);margin-bottom:30px;font-size:.95rem;}
.contact-info-item{
  display:flex;gap:16px;align-items:flex-start;
  margin-bottom:24px;
}
.contact-info-item .ci-icon{
  width:46px;height:46px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--color-highlight);
}
.contact-info-item strong{display:block;font-size:.95rem;margin-bottom:2px;}
.contact-info-item span, .contact-info-item a{font-size:.9rem;color:rgba(255,255,255,.8);}
.contact-info-item a:hover{color:var(--color-highlight);}

.contact-form-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:40px;
  box-shadow:var(--shadow-sm);
}
.contact-form-card h3{margin-bottom:6px;}
.contact-form-card > p{color:var(--color-text-light);margin-bottom:24px;font-size:.92rem;}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.form-grid .full{grid-column:span 2;}
.field textarea{
  padding:13px 14px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:.95rem;
  resize:vertical;
  min-height:120px;
  background:var(--color-surface);
}
.field textarea:focus{border-color:var(--color-secondary);}
.field select{appearance:none;}

.map-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
  height:360px;
}
.map-wrap iframe{width:100%;height:100%;border:0;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{display:block;margin-top:30px;}
  .hero-media img{max-height:320px;}
  .hero{padding-bottom:160px;}
  .booking-panel form{grid-template-columns:repeat(2,1fr);}
  .booking-panel .btn{grid-column:span 2;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .fleet-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .about-grid,
  .service-detail,
  .contact-grid{grid-template-columns:1fr;}
  .service-detail.reverse .service-detail-media{order:0;}
  .timeline{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  section{padding:56px 0;}
  .nav-wrap{padding:22px 0;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-actions .btn{display:none;}

  .site-header.nav-open .nav-links{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--color-surface);
    padding:20px;
    gap:18px;
    box-shadow:var(--shadow-md);
  }

  .hero{padding:40px 0 200px;text-align:center;}
  .hero-content p{margin-inline:auto;}
  .hero-actions{justify-content:center;}
  .hero-stats{justify-content:center;}

  .booking-widget{margin-top:-160px;}
  .booking-tabs{flex-wrap:wrap;}
  .booking-panel form{grid-template-columns:1fr;}
  .booking-panel .btn{grid-column:span 1;}

  .grid-2,
  .grid-3,
  .grid-4,
  .fleet-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .timeline{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid .full{grid-column:span 1;}

  .mobile-bar{display:block;}
  body{padding-bottom:64px;}

  .about-media .badge-float{
    position:static;
    margin-top:-40px;
    display:inline-block;
  }
}

@media (max-width:480px){
  .hero-content h1{font-size:2rem;}
  .container{padding:0 16px;}
  section{padding:44px 0;}
}