/* =========================================================
   01. Design Tokens
   ========================================================= */
:root {
    --ct-navy: #0b2d5b;
    --ct-navy-dark: #071d3c;
    --ct-gold: #d4a017;
    --ct-gold-dark: #b88910;
    --ct-background: #f4f6f8;
    --ct-surface: #ffffff;
    --ct-text: #222222;
    --ct-text-muted: #667085;
    --ct-border: #e4e7ec;
    --ct-radius: .75rem;
    --ct-shadow: 0 1rem 2.5rem rgba(7, 29, 60, .10);
}

/* =========================================================
   02. Base / Reset
   ========================================================= */
html { scroll-behavior: smooth; }
body { color: var(--ct-text); background: var(--ct-surface); font-family: "Inter", sans-serif; line-height: 1.7; }
img { max-width: 100%; height: auto; }
a { color: var(--ct-navy); text-decoration: none; }
a:hover { color: var(--ct-gold-dark); }
:focus-visible { outline: 3px solid var(--ct-gold); outline-offset: 3px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1100; padding: .75rem 1rem; background: var(--ct-gold); color: var(--ct-navy-dark); }
.skip-link:focus { top: 1rem; }

/* =========================================================
   03. Typography
   ========================================================= */
h1, h2, h3, h4, h5, h6 { color: var(--ct-navy-dark); font-family: "Montserrat", sans-serif; font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.eyebrow { color: var(--ct-gold-dark); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lead { color: var(--ct-text-muted); }

/* =========================================================
   04. Layout Utilities
   ========================================================= */
.section { padding: 5rem 0; }
.section-alt { background: var(--ct-background); }
.section-heading { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.content-narrow { max-width: 52rem; }

/* =========================================================
   05. Header / Navigation
   ========================================================= */
.site-header { box-shadow: 0 .25rem 1rem rgba(7, 29, 60, .08); }
.utility-bar { padding: .45rem 0; color: #fff; background: var(--ct-navy-dark); font-size: .875rem; }
.utility-bar a { color: #fff; }
.navbar { min-height: 5.25rem; }
.navbar-brand img { width: 13.75rem; height: auto; max-height: 4rem; object-fit: contain; }
.navbar .nav-link { color: var(--ct-navy-dark); font-weight: 600; padding: .65rem .75rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--ct-gold-dark); }
.dropdown-menu { border: 0; border-radius: var(--ct-radius); box-shadow: var(--ct-shadow); }

/* =========================================================
   06. Buttons
   ========================================================= */
.btn { border-radius: .55rem; font-weight: 700; padding: .7rem 1.25rem; }
.btn-primary, .btn-cus { color: var(--ct-navy-dark); background: var(--ct-gold); border-color: var(--ct-gold); }
.btn-primary:hover, .btn-primary:focus, .btn-cus:hover, .btn-cus:focus { color: #fff; background: var(--ct-gold-dark); border-color: var(--ct-gold-dark); }
.btn-outline-light:hover { color: var(--ct-navy-dark); }

/* =========================================================
   07. Hero
   ========================================================= */
.hero, .page-hero { position: relative; display: grid; min-height: 31rem; place-items: center; overflow: hidden; background: var(--ct-navy-dark); color: #fff; }
.hero img, .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .46; }
.hero::after, .page-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(7,29,60,.92), rgba(7,29,60,.38)); }
.hero-content, .page-hero-content { position: relative; z-index: 1; max-width: 54rem; padding: 5rem 0; }
.hero h1, .hero h2, .page-hero h1 { color: #fff; }
.page-hero { min-height: 23rem; }

/* =========================================================
   08. Forms
   ========================================================= */
.quote { background: var(--ct-background); }
.quote-form { padding: clamp(1.25rem, 3vw, 2.5rem); background: #fff; border: 1px solid var(--ct-border); border-radius: 1rem; box-shadow: var(--ct-shadow); }
.form-control, .form-select { min-height: 3rem; border-color: var(--ct-border); border-radius: .5rem; }
.form-control:focus, .form-select:focus { border-color: var(--ct-gold); box-shadow: 0 0 0 .25rem rgba(212,160,23,.2); }
.iti { width: 100%; }
.hide { display: none; }
#returnBooking[style] { margin-top: 1rem; }

/* =========================================================
   09. Cards
   ========================================================= */
.ct-card { height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); box-shadow: 0 .5rem 1.5rem rgba(7,29,60,.07); transition: transform .2s ease, box-shadow .2s ease; }
.ct-card:hover { transform: translateY(-4px); box-shadow: var(--ct-shadow); }
.ct-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ct-card-body { padding: 1.5rem; }
.icon-card { padding: 1.5rem; text-align: center; }
.icon-card i { display: inline-grid; width: 3rem; height: 3rem; place-items: center; color: var(--ct-navy); background: rgba(212,160,23,.18); border-radius: 50%; font-size: 1.35rem; }

/* =========================================================
   10. Home / Service / Fleet / Location Pages
   ========================================================= */
.trust-strip { position: relative; z-index: 2; margin-top: -2rem; }
.split-image { width: 100%; min-height: 26rem; object-fit: cover; border-radius: 1rem; }
.check-list { list-style: none; padding: 0; }
.check-list li { margin-bottom: .75rem; }
.check-list i { color: var(--ct-gold-dark); margin-right: .65rem; }
.fleet-card .capacity { color: var(--ct-text-muted); font-size: .925rem; }
.location-link { display: block; padding: 1.25rem; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); font-family: "Montserrat", sans-serif; font-weight: 700; }
.testimonial-card { padding: 1.75rem; }
.stars { color: var(--ct-gold); }
.accordion-button:not(.collapsed) { color: var(--ct-navy-dark); background: rgba(212,160,23,.12); }

/* =========================================================
   11. CTA
   ========================================================= */
.quote-cta { padding: 4rem 0; color: #fff; background: var(--ct-navy); }
.quote-cta h2 { color: #fff; }

/* =========================================================
   12. Legal / Content Pages
   ========================================================= */
.legal-content h2 { margin-top: 2.25rem; font-size: 1.45rem; }

/* =========================================================
   13. Footer
   ========================================================= */
.site-footer { color: #dbe4f0; background: var(--ct-navy-dark); }
.site-footer h2 { color: #fff; font-size: 1rem; }
.site-footer a { color: #dbe4f0; }
.site-footer a:hover { color: var(--ct-gold); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-logo { padding: .35rem; background: #fff; border-radius: .5rem; }
.social-links { display: flex; gap: .65rem; }
.social-links a { display: inline-grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.footer-bottom { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }

/* =========================================================
   14. Responsive
   ========================================================= */
@media (max-width: 991.98px) {
    .utility-bar .container { justify-content: center !important; text-align: center; }
    .navbar-collapse { padding: 1rem 0; }
    .navbar-nav .btn { margin-top: .5rem; }
    .hero, .page-hero { min-height: 25rem; }
}
@media (max-width: 575.98px) {
    .section { padding: 3.5rem 0; }
    .utility-bar span { display: none; }
    .utility-bar .d-flex { flex-direction: column; gap: 0 !important; }
    .navbar-brand img { width: 10.5rem; }
    .hero-content, .page-hero-content { text-align: center; }
}