/* =============================================
   CEYLON DRIVER SOLUTIONS — SHARED STYLES
   Light theme · Brand colors · Montserrat
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&display=swap');
@import url('icons.css');

/* ROOT */
:root {
    --navy:        #1C3D6E;
    --navy-dark:   #142d52;
    --navy-light:  #2a5296;
    --yellow:      #F5B800;
    --yellow-light:#FFD040;
    --yellow-dark: #D4A000;
    --green:       #2D7A38;
    --white:       #ffffff;
    --light:       #F5F7FA;
    --light-2:     #EBF0F8;
    --text:        #1C3D6E;
    --text-2:      #4B6080;
    --gray:        #8898AA;
    --border:      #DDE4F0;
    --shadow:      0 4px 24px rgba(28,61,110,0.10);
    --shadow-lg:   0 12px 48px rgba(28,61,110,0.16);
    --font:        'Montserrat', sans-serif;
    --ease:        0.35s cubic-bezier(0.25,0.46,0.45,0.94);
    --sp:          100px 0;
    --radius:      6px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* =============================================
   UTILITIES
============================================= */
.container { max-width:1280px; margin:0 auto; padding:0 40px; }

.label {
    font-size:0.68rem; font-weight:700;
    letter-spacing:4px; text-transform:uppercase;
    color: var(--yellow-dark); margin-bottom:14px; display:block;
}

.h2 {
    font-family: var(--font);
    font-size: clamp(1.9rem,4vw,3rem);
    font-weight: 800; line-height: 1.1; margin-bottom:18px;
    color: var(--navy);
}
.h2 span { color: var(--yellow); }
.h2 em { font-style: normal; color: var(--yellow); }

.btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 32px;
    font-family:var(--font); font-size:0.75rem;
    font-weight:700; letter-spacing:2px; text-transform:uppercase;
    border:none; cursor:pointer; transition:var(--ease);
    border-radius: var(--radius);
    position:relative; overflow:hidden;
}
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-dark); }
.btn-yellow { background:var(--yellow); color:var(--navy); }
.btn-yellow:hover { background:var(--yellow-light); }
.btn-outline-navy {
    background:transparent; color:var(--navy);
    border:2px solid var(--navy);
}
.btn-outline-navy:hover { background:var(--navy); color:var(--white); }
.btn-outline-white {
    background:transparent; color:var(--white);
    border:2px solid rgba(255,255,255,0.55);
}
.btn-outline-white:hover { border-color:var(--yellow); color:var(--yellow); }
.btn-sm { padding:10px 22px; font-size:0.68rem; }

/* Scroll reveal (CSS — IntersectionObserver adds .vis) */
.rv { opacity:0; transform:translateY(32px); transition:opacity 0.7s ease, transform 0.7s ease; }
.rv.vis { opacity:1; transform:none; }
.rv.d1 { transition-delay:.1s; }
.rv.d2 { transition-delay:.2s; }
.rv.d3 { transition-delay:.3s; }
.rv.d4 { transition-delay:.4s; }

/* SplitText word spans */
.sw { display:inline-block; }

/* Section header */
.sec-hd { text-align:center; margin-bottom:60px; }
.sec-hd p { color:var(--text-2); max-width:520px; margin:0 auto; font-size:0.92rem; }

/* Divider */
.divider { width:56px; height:4px; background:var(--yellow); margin:16px auto 0; border-radius:2px; }
.divider-left { margin:16px 0 0; }

/* =============================================
   NAVIGATION
============================================= */
nav {
    position:fixed; top:0; left:0; right:0;
    z-index:1000; padding:20px 0;
    background:rgba(255,255,255,0.0);
    transition:all 0.4s ease;
}
nav.sc {
    padding:12px 0;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px);
    box-shadow: 0 2px 20px rgba(28,61,110,0.1);
    border-bottom:3px solid var(--yellow);
}
.nav-i {
    display:flex; align-items:center; justify-content:space-between;
    max-width:1280px; margin:0 auto; padding:0 40px;
}
.nav-logo { display:flex; align-items:center; }
.nav-logo img { height:52px; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a {
    font-size:0.72rem; font-weight:600;
    letter-spacing:1.5px; text-transform:uppercase;
    color:var(--white); transition:color 0.3s;
    position:relative;
}
nav.sc .nav-links a { color:var(--navy); }
.nav-links a::after {
    content:''; position:absolute; bottom:-4px; left:0; right:0;
    height:2px; background:var(--yellow);
    transform:scaleX(0); transition:transform 0.3s;
}
.nav-links a:hover, .nav-links a.active { color:var(--yellow-dark); }
nav.sc .nav-links a:hover, nav.sc .nav-links a.active { color:var(--navy); }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-cta {
    padding:11px 24px; background:var(--yellow); color:var(--navy);
    font-size:0.7rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
    border-radius: var(--radius); transition:background 0.3s;
}
.nav-cta:hover { background:var(--yellow-light); }
.ham { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.ham span { display:block; width:26px; height:2px; background:var(--white); transition:.3s; }
nav.sc .ham span { background:var(--navy); }

/* Mobile menu */
.mob-menu {
    display:none; position:fixed; inset:0;
    background:var(--navy); z-index:999;
    flex-direction:column; align-items:center;
    justify-content:center; gap:32px;
}
.mob-menu.open { display:flex; }
.mob-menu a { font-family:var(--font); font-size:1.9rem; font-weight:800; color:var(--white); transition:color 0.3s; }
.mob-menu a:hover { color:var(--yellow); }
.mob-close { position:absolute; top:26px; right:32px; font-size:1.8rem; cursor:pointer; color:rgba(255,255,255,0.5); }

/* =============================================
   PAGE HERO (internal pages)
============================================= */
.page-hero {
    position:relative; height:50vh; min-height:400px;
    display:flex; align-items:flex-end;
    padding-bottom:56px; overflow:hidden;
    margin-top:0;
}
.page-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(28,61,110,0.88) 0%, rgba(28,61,110,0.4) 100%);
    z-index:1;
}
.page-hero-content { position:relative; z-index:2; }
.breadcrumb {
    display:flex; align-items:center; gap:8px;
    font-size:0.68rem; letter-spacing:2px;
    text-transform:uppercase; color:rgba(255,255,255,0.55);
    margin-bottom:12px;
}
.breadcrumb a { color:var(--yellow); transition:opacity 0.3s; }
.breadcrumb a:hover { opacity:.7; }
.breadcrumb span { color:rgba(255,255,255,0.3); }
.page-hero .h2 { color:var(--white); margin-bottom:0; }
.page-hero .h2 em { color:var(--yellow); }

/* =============================================
   STATS BAR
============================================= */
.stats-bar {
    background:var(--navy);
    padding:52px 0;
}
.stats-g { display:grid; grid-template-columns:repeat(4,1fr); }
.stat { text-align:center; padding:0 20px; border-right:1px solid rgba(255,255,255,0.12); }
.stat:last-child { border-right:none; }
.stat-n {
    font-family:var(--font); font-size:clamp(2.2rem,4vw,3.2rem);
    font-weight:900; color:var(--yellow);
    line-height:1; margin-bottom:6px;
}
.stat-l { font-size:0.65rem; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.55); font-weight:500; }

/* =============================================
   GOOGLE REVIEWS STRIP
============================================= */
.gr-strip {
    background:var(--light-2);
    border-top:3px solid var(--yellow);
    border-bottom:1px solid var(--border);
    padding:22px 0;
}
.gr-inner {
    display:flex; align-items:center; justify-content:center;
    gap:28px; flex-wrap:wrap;
}
.gr-badge {
    display:flex; align-items:center; gap:14px;
    padding:10px 22px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:40px;
    box-shadow: 0 2px 12px rgba(28,61,110,0.07);
}
.gr-g-logo {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335);
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:0.9rem; color:white; flex-shrink:0;
}
.gr-stars { color:#FBBC05; font-size:0.88rem; letter-spacing:2px; }
.gr-text { font-size:0.8rem; font-weight:600; color:var(--navy); }
.gr-count { font-size:0.72rem; color:var(--gray); }

/* =============================================
   BOOKING FORM
============================================= */
.book-g { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.book-info h2 { margin-bottom:14px; }
.book-info > p { color:var(--text-2); line-height:1.85; margin-bottom:32px; font-size:0.9rem; }
.cmethods { display:flex; flex-direction:column; gap:12px; }
.cmethod {
    display:flex; align-items:center; gap:16px;
    padding:16px 18px;
    border:1.5px solid var(--border);
    background:var(--white);
    border-radius:var(--radius);
    transition:var(--ease); box-shadow:var(--shadow);
}
.cmethod:hover { border-color:var(--yellow); transform:translateX(4px); }
.cm-icon {
    width:44px; height:44px; min-width:44px;
    background:var(--light-2);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy); font-size:1rem; border-radius:var(--radius);
}
.cm-txt span { display:block; font-size:0.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--yellow-dark); margin-bottom:2px; font-weight:700; }
.cm-txt strong { font-size:0.88rem; font-weight:600; color:var(--navy); }
.book-form {
    background:var(--white); border:1.5px solid var(--border);
    border-radius:var(--radius); padding:42px;
    box-shadow:var(--shadow-lg);
    border-top:4px solid var(--navy);
}
.form-title { font-family:var(--font); font-size:1.4rem; font-weight:800; color:var(--navy); margin-bottom:24px; padding-bottom:16px; border-bottom:1.5px solid var(--border); }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fg { margin-bottom:14px; }
.fg label { display:block; font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--gray); margin-bottom:6px; font-weight:600; }
.fg input, .fg select, .fg textarea {
    width:100%; background:var(--light);
    border:1.5px solid var(--border); border-radius:var(--radius);
    padding:12px 14px; color:var(--navy);
    font-family:var(--font); font-size:0.88rem;
    transition:border-color 0.3s; outline:none;
    -webkit-appearance:none;
}
.fg select option { background:white; color:var(--navy); }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--navy); }
.fg textarea { height:88px; resize:vertical; }
.f-submit {
    width:100%; padding:15px;
    background:var(--navy); color:var(--white);
    font-family:var(--font); font-size:0.75rem;
    font-weight:800; letter-spacing:2px; text-transform:uppercase;
    border:none; cursor:pointer; transition:background 0.3s;
    border-radius:var(--radius); margin-top:6px;
}
.f-submit:hover { background:var(--navy-dark); }
.f-success { display:none; text-align:center; padding:40px 20px; }
.f-check { width:60px; height:60px; background:var(--yellow); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--navy); font-size:1.4rem; font-weight:900; }
.f-success h3 { font-family:var(--font); font-size:1.4rem; font-weight:800; color:var(--navy); margin-bottom:8px; }
.f-success p { color:var(--text-2); font-size:0.86rem; line-height:1.7; }

/* =============================================
   WHATSAPP FLOAT
============================================= */
.wa-float {
    position:fixed; bottom:32px; right:32px;
    z-index:998; width:56px; height:56px;
    background:#25D366; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 24px rgba(37,211,102,0.4);
    transition:transform 0.3s, box-shadow 0.3s;
}
.wa-float:hover { transform:scale(1.1); box-shadow:0 10px 32px rgba(37,211,102,0.55); }
.wa-float svg { width:26px; height:26px; fill:white; }

/* =============================================
   FOOTER
============================================= */
footer { background:var(--navy); color:var(--white); padding:72px 0 36px; }
.foot-g { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; margin-bottom:50px; }
.foot-brand img { height:52px; margin-bottom:18px; }
.foot-brand p { font-size:0.83rem; color:rgba(255,255,255,0.55); line-height:1.8; max-width:265px; margin-bottom:24px; }
.foot-social { display:flex; gap:8px; }
.soc {
    width:36px; height:36px; border:1.5px solid rgba(255,255,255,0.18);
    border-radius:var(--radius);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.5); font-size:0.75rem; font-weight:700;
    transition:var(--ease);
}
.soc:hover { border-color:var(--yellow); color:var(--yellow); }
.foot-col h5 { font-size:0.67rem; letter-spacing:3px; text-transform:uppercase; color:var(--yellow); margin-bottom:20px; font-weight:700; }
.foot-links { display:flex; flex-direction:column; gap:10px; }
.foot-links a { font-size:0.82rem; color:rgba(255,255,255,0.55); transition:color 0.3s; }
.foot-links a:hover { color:var(--yellow); }
.foot-btm { padding-top:32px; border-top:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.foot-btm p { font-size:0.75rem; color:rgba(255,255,255,0.4); }
.foot-gr a {
    display:flex; align-items:center; gap:8px;
    color:rgba(255,255,255,0.55); font-size:0.75rem;
    transition:color 0.3s;
}
.foot-gr a:hover { color:var(--yellow); }
.foot-gr .stars { color:#FBBC05; font-size:0.75rem; }

/* =============================================
   MAP
============================================= */
.leaflet-container { background:#e8edf4; }
.leaflet-popup-content-wrapper { background:var(--white) !important; color:var(--navy) !important; border:2px solid var(--yellow) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow-lg) !important; }
.leaflet-popup-tip { background:var(--white) !important; }
.leaflet-popup-content { margin:14px 18px !important; font-family:var(--font); }

/* =============================================
   RESPONSIVE
============================================= */
@media (max-width:1100px) {
    .book-g { grid-template-columns:1fr; gap:48px; }
    .foot-g { grid-template-columns:1fr 1fr; gap:36px; }
    .stats-g { grid-template-columns:1fr 1fr; }
    .stat:nth-child(2) { border-right:none; }
    .stat:nth-child(3) { border-top:1px solid rgba(255,255,255,0.12); border-right:1px solid rgba(255,255,255,0.12); }
    .stat:nth-child(4) { border-top:1px solid rgba(255,255,255,0.12); border-right:none; }
}
@media (max-width:768px) {
    .container { padding:0 20px; }
    :root { --sp:72px 0; }
    .nav-links, .nav-cta { display:none; }
    .ham { display:flex; }
    .foot-g { grid-template-columns:1fr; gap:30px; }
    .frow { grid-template-columns:1fr; gap:0; }
    .book-form { padding:24px 18px; }
    .nav-i { padding:0 20px; }
    .sec-hd { margin-bottom:40px; }
    .page-hero { height:42vh; min-height:320px; padding-bottom:36px; }
    .gr-inner { gap:16px; flex-direction:column; }
}