:root{
  --navy:#0a1d4d;              /* deep navy */
  --navy-800:#0b1a44;
  --navy-900:#071432;          /* darkest background */
  --red:#b22222;               /* brand accent */
  --text:#eef2ff;              /* primary text */
  --muted:#c3cffb;             /* muted text */
  --soft:rgba(255,255,255,.08);
  /* offset that aligns navbar logo under topbar phone number text on mobile */
  --phone-text-offset: 1.125rem; /* ≈ .875rem icon + .25rem spacing */
}

body{font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--navy-900);color:var(--text);line-height:1.65;font-size:17px}
.brand-text{color:#fff}
.topbar{background:var(--navy);padding-top:.25rem;padding-bottom:0;margin-bottom:-.75rem}
/* Ensure phone text hugs the top inside the topbar */
.topbar .container{align-items:flex-start !important}

/* Navbar (dark) */
.nav-dark{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-900) 100%)}
.navbar-dark .navbar-brand{color:#fff}
.navbar-dark .nav-link{color:rgba(255,255,255,.88)}
.navbar-dark .nav-link:hover{color:#fff}
.navbar{backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--soft);padding-left:0;padding-right:0}
.navbar .container{padding-left:.75rem;padding-right:.75rem}
.navbar-brand{margin-left:0}
.navbar-dark .nav-link.active{color:#fff;position:relative}
.navbar-dark .nav-link.active::after{content:"";position:absolute;left:8px;right:8px;bottom:4px;height:3px;background:var(--red);border-radius:3px}

/* Logo sizes (responsive) */
.logo-navbar{width:clamp(140px, 14vw, 220px);height:clamp(56px, 7vw, 110px);object-fit:contain}
.logo-footer{width:clamp(140px, 14vw, 200px);height:clamp(48px, 6vw, 96px);object-fit:contain}
/* (intentionally left no navbar overrides to respect request) */

/* Buttons */
.btn-primary{background:linear-gradient(180deg,#c93131,#b22222);border-color:#b22222}
.btn-primary:hover{background:#9d1d1d;border-color:#9d1d1d;box-shadow:0 10px 22px rgba(178,34,34,.45)}
.btn-outline-light:hover{color:#fff;background:rgba(255,255,255,.1)}
.btn-accent{background:var(--red);color:#fff}
.btn-accent:hover{background:#8f1a1a;color:#fff}
.text-accent{color:var(--red)!important}

/* Hero */
.hero{background:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1800&auto=format&fit=crop') center/cover no-repeat;min-height:72vh;display:flex;align-items:center}
.hero video.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,8,20,.75), rgba(10,29,77,.82));z-index:1}
.hero .container{position:relative;z-index:2}
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero .lead{color:var(--muted)}
.quote-card{border-radius:18px;box-shadow:0 18px 38px rgba(0,0,0,.55)}

/* Sections */
.section{padding:72px 0}
.section-alt{background:var(--navy-800)}
.section-title{font-family:'Kanit', sans-serif;color:#ffffff;font-weight:800;letter-spacing:.2px}
h1,.display-5{font-weight:800;font-size:clamp(2rem, 3.6vw, 3rem)}
h2{font-weight:800;font-size:clamp(1.5rem, 2.6vw, 2.2rem)}
p{color:var(--muted)}
.text-muted{color:var(--muted)!important}

/* Timeline */
.timeline{position:relative}
.titem{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.ticon{width:40px;height:40px;border-radius:10px;background:#0e214e;color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 8px 18px rgba(0,0,0,.45);border:1px solid var(--soft)}

/* Services */
.service-card{border:1px solid var(--soft);background:#0f1e46;border-radius:16px;transition:transform .2s ease, box-shadow .2s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.5)}
.service-icon{width:48px;height:48px;border-radius:12px;background:rgba(178,34,34,.12);color:#ff6b6b;display:grid;place-items:center;font-size:22px;margin-bottom:10px}
.service-card .text-muted{color:#d6defe!important}
/* Ensure card titles have strong contrast on dark background */
.service-card h6{color:#ffffff;font-weight:700;margin-top:6px}

/* Dark cards */
.card-dark{background:#0f1e46;color:#fff;border:1px solid var(--soft)}
.card-dark .form-label{color:#e4e9ff}
.card-dark .form-control,.card-dark .form-select, .card-dark textarea{background:#0b1a42;color:#f1f5ff;border-color:#3a4e87}
.card-dark .form-control::placeholder{color:#b8c6f7}
.card-dark .form-control:focus,.card-dark .form-select:focus{border-color:var(--red);box-shadow:0 0 0 .25rem rgba(178,34,34,.2)}

/* Reviews */
.review{background:#0f1e46;border:1px solid var(--soft);border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.45)}

/* Areas */
.area-badge{background:#0f1e46;color:#f1f5ff;padding:10px 12px;border-radius:999px;border:1px solid var(--soft);box-shadow:0 6px 14px rgba(0,0,0,.35)}

/* Footer */
.footer{background:var(--navy)}
.hover-light:hover{opacity:1!important;color:#fff!important}
.footer .small{color:#d9e2ff}

/* Micro interactions */
.reveal{opacity:0;transform:translateY(10px);transition:all .5s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive hero images for smaller screens */
@media (max-width: 991.98px){
  .hero{min-height:64vh;background-position: 60% center}
}
@media (max-width: 575.98px){
  .hero{min-height:58vh;background:url('https://images.unsplash.com/photo-1542281286-9e0a16bb7366?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat}
  /* Larger logo on mobile as requested */
  .logo-navbar{width:clamp(248px, 66vw, 400px);height:clamp(96px, 26vw, 190px)}
  .logo-footer{width:clamp(200px, 56vw, 320px);height:clamp(72px, 20vw, 150px)}
  .navbar .container{display:flex;align-items:center;justify-content:space-between;max-width:100%;padding-left:.75rem;padding-right:.75rem}
  /* Brand starts exactly under phone text start */
  /* Flush logo to the viewport left edge on mobile only */
  .navbar-brand{margin:0 0 0 calc(-.75rem) !important;padding-left:0 !important;display:flex !important;align-items:center;justify-content:flex-start !important;text-align:left;flex:0 0 auto}
  /* Do not shift the image further left on mobile, keep box edge flush */
  .navbar-brand .logo-navbar{display:block;margin:0 !important;transform:none}
  .navbar-toggler{margin:0}
}

/* Themed image treatment for dark navy UI */
.img-theme{filter:saturate(.9) contrast(1.08) brightness(.82) hue-rotate(200deg)}

/* Utility: make an <img> fill its container height while preserving crop */
.img-cover{width:100%;height:100%;object-fit:cover;border-radius:12px}

/* Gallery thumbnails: uniform height with cover crop */
.gallery-thumb{height:200px}
@media (min-width: 768px){.gallery-thumb{height:220px}}
@media (min-width: 1200px){.gallery-thumb{height:240px}}