/* Light enhancements only: keep existing colors, improve feel */
html { scroll-behavior: smooth; }

/* Design tokens */
:root {
  --brand-blue-1: #03478c;
  --brand-blue-2: #2a7ad6;
  --brand-blue-3: #0b5fb3;
  --surface: #ffffff;
  --text-strong: #0f172a;   /* slate-900 */
  --text-muted: #64748b;    /* slate-500 */
  --shadow-1: 0 8px 24px rgba(0,0,0,.12);
  --shadow-2: 0 16px 40px rgba(0,0,0,.18);
  --ring: 0 0 0 3px rgba(42,122,214,.18);
  --radius-card: 12px;
  --radius-pop: 12px;
  --gap-1: .5rem;
  --gap-2: .75rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;
  --leading: 1.65;
  --leading-tight: 1.35;
  --transition-fast: .18s ease;
  --transition-med: .28s ease;
}

/* Keep original .bg-blue color, just add subtle depth */
.navbar.bg-blue {
  position: relative;
  border-radius: 0;
  /* deeper, layered shadow for more depth */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/* subtle top highlight sheen */
.navbar.bg-blue::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 60%);
}
/* soft light bloom for “brightness” feel */
.navbar.bg-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.10) 25%, rgba(255,255,255,0) 60%);
}
.navbar-dark .navbar-nav .nav-link {
  transition: opacity .2s ease, text-decoration-color .2s ease;
  text-decoration: none;
}
.navbar-dark .navbar-nav .nav-link:hover {
  opacity: .9;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.7);
}
/* Modern active/hover underline indicator */
.navbar-dark .navbar-nav .nav-link {
  position: relative;
}
.navbar-dark .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: .35rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(255,255,255,.9);
  transition: transform var(--transition-med);
}
.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .nav-link:focus::after,
.navbar-dark .navbar-nav .nav-link.active::after {
  transform: scaleX(1);
}

/* Elevate the first hero image after navbar without changing colors */
.navbar + img.img-fluid {
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

/* Feature cards - keep white background, add modern hover */
.icon-box-v3 {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.icon-box-v3::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue-2), var(--brand-blue-3));
  opacity: .85;
}
.icon-box-v3:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.10);
}
.icon-box-v3 img {
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.12));
}

/* Buttons - refined primary and outline with subtle glow */
.btn-primary {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-blue-1), var(--brand-blue-3));
  border-color: var(--brand-blue-3);
  box-shadow: 0 6px 16px rgba(11,95,179,.22);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(11,95,179,.28), var(--ring);
  filter: brightness(1.02);
}
.btn-outline-primary {
  color: var(--brand-blue-3);
  background: #fff;
  border-color: var(--brand-blue-2);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: linear-gradient(90deg, var(--brand-blue-1), var(--brand-blue-3));
  box-shadow: 0 10px 24px rgba(11,95,179,.24), var(--ring);
  transform: translateY(-1px);
}
/* Better focus rings */
:is(a, button, .btn, .fab):focus {
  outline: none !important;
  box-shadow: var(--ring);
}

/* Maps - ensure never overflow the grid, square corners */
.mapouter,
.gmap_canvas {
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none;
  max-width: 100%;
}
.mapouter iframe,
.gmap_canvas iframe {
  display: block;
  width: 100% !important;
  height: 300px;
  border: 0;
}

/* Ensure main content container never shows child overflow */
.container.box-shadow {
  overflow: hidden;
}

/* Tables - slight rounding and shadow for modern feel */
.table {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.table thead th {
  background: linear-gradient(90deg, rgba(3,71,140,.08), rgba(11,95,179,.06));
  border-bottom: 1px solid rgba(3,71,140,.18);
}
.table tbody tr:nth-child(odd) { background: rgba(2,32,71,.015); }
.table td, .table th { vertical-align: middle; }

/* Gentle spacing utilities (optional) */
.mb-6 { margin-bottom: 3rem !important; }
.mt-6 { margin-top: 3rem !important; }

 /* Subtle premium typography for headings */
 h1, h2, h3, h4, h5, h6 {
   letter-spacing: .3px;
 }
 body {
   color: var(--text-strong);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: var(--leading);
 }
 .sub-head, p, li, td, th {
   color: var(--text-strong);
 }
 .text-muted { color: var(--text-muted) !important; }
 h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem); line-height: var(--leading-tight); }
 h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); line-height: var(--leading-tight); }
 h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: var(--leading-tight); }
 
 /* Links */
 a { transition: color var(--transition-fast), text-underline-offset var(--transition-fast); }
 a:hover { text-underline-offset: 4px; }
 
 /* Section titles: elegant underline accent (for non-blue headings) */
 .section-title {
   position: relative;
   padding-bottom: .35rem;
   margin-bottom: .85rem;
 }
 .section-title::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 72px;
   height: 3px;
   border-radius: 0;
   background: linear-gradient(90deg, var(--brand-blue-2), var(--brand-blue-3));
   opacity: .9;
 }
 
 /* Phone popover animation */
 .popover-phone {
   opacity: 0;
  transform: translateY(20px) scale(.94);
  transition: opacity .30s cubic-bezier(.2,.9,.2,1), transform .30s cubic-bezier(.2,.9,.2,1);
   will-change: opacity, transform;
 }
 .popover-phone.is-open {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
 
 /* FAB expand morph (index.html prototype) */
 .fab-hidden { 
   transform: scale(0);
   opacity: 0;
   transition: transform .25s ease, opacity .25s ease;
 }
 .fab-expand {
   position: fixed;
   right: 16px;
   bottom: 80px;
   z-index: 100001;
   background: #ffffff;
   border: 1px solid #e5e7eb;
   box-shadow: 0 12px 24px rgba(0,0,0,.18);
   border-radius: 28px;            /* start as circle-ish */
   transform-origin: bottom right; /* grow from FAB */
   transform: translateY(0) scale(0);
   opacity: 0;
   transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .25s ease, border-radius .35s cubic-bezier(.2,.9,.2,1), padding .2s ease;
   padding: 0;
   pointer-events: none;
   overflow: hidden;
   min-width: 220px;
 }
 .fab-expand.is-open {
   transform: translateY(-70px) scale(1);
   border-radius: 12px;
   opacity: 1;
   pointer-events: auto;
   padding: 8px 10px;
 }
 .fab-expand a {
   display: block;
   padding: 10px 12px;
   text-decoration: none;
   color: #0d6efd;
   font-weight: 700;
 }
 .fab-expand a + a {
   border-top: 1px solid #f1f5f9;
 }

/* Navbars - force square corners across the site */
.navbar,
.navbar .navbar-toggler,
.navbar .dropdown-menu,
.navbar .nav-link,
.navbar .navbar-brand {
  border-radius: 0 !important;
}
/* navbar controls + links get clearer affordance */
.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,.28);
}
.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
  background: rgba(255,255,255,.08);
}
.navbar-dark .navbar-nav .nav-link {
  padding: .6rem .9rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.75);
}
 
/* Images - force square corners */
img {
  border-radius: 0 !important;
}
img.img-fluid,
.img-fluid {
  border-radius: 0 !important;
}
/* Also force images inside feature cards to be square */
.icon-box-v3 img {
  border-radius: 0 !important;
}

/* Modern subtle gradient for blue headers/navbars */
.bg-blue {
  background: var(--brand-blue-1) !important; /* fallback */
  background: linear-gradient(90deg, var(--brand-blue-1) 0%, var(--brand-blue-2) 50%, var(--brand-blue-3) 100%) !important;
}

/* Kill ALL Bootstrap roundings if any class slips in */
.rounded,
.rounded-top,
.rounded-right,
.rounded-bottom,
.rounded-left,
.rounded-circle,
.rounded-pill {
  border-radius: 0 !important;
}

 /* Floating contact FABs (right side) */
 .contact-fab {
   position: fixed;
   right: 16px;
   bottom: 80px;
   display: flex;
   flex-direction: column;
   gap: 12px;
  z-index: 9999;
 }
 .contact-fab .fab {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 12px 24px rgba(0,0,0,.16);
   transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
   will-change: transform;
 }
 .contact-fab .fab:hover {
   transform: translateY(-3px) scale(1.03);
   box-shadow: 0 16px 30px rgba(0,0,0,.18);
   filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
 }
 .contact-fab .fab:focus {
   box-shadow: 0 16px 30px rgba(0,0,0,.18), var(--ring);
 }
 .contact-fab .fab svg {
   width: 26px;
   height: 26px;
 }
 .fab-email { background: #ff2d2d; }
 .fab-line { background: #06C755; }
 
 @media (max-width: 576px) {
   .contact-fab {
     right: 12px;
     bottom: 70px;
     gap: 10px;
   }
   .contact-fab .fab {
     width: 52px;
     height: 52px;
   }
 }
 
 /* Call/Line button hover bounce */
 .call-bounce {
   display: inline-block;
   transition: transform .25s ease, filter .25s ease;
   will-change: transform;
 }
 .call-bounce:hover {
   transform: translateY(-3px) scale(1.03);
   filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
 }
 a[href^="tel:"], a[href*="line.me"] {
   display: inline-block;
   transition: transform .25s ease, filter .25s ease;
 }
 a[href^="tel:"]:hover, a[href*="line.me"]:hover {
   transform: translateY(-3px) scale(1.03);
   filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
 }
 
/* Page transition (fade) */
body.page-fade {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s ease, transform .7s ease;
}
body.page-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}
body.page-fade.is-exiting {
  opacity: 0;
  transform: translateY(6px);
}

/* Cross-page overlay for seamless transitions */
.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(180deg, rgba(3,71,140,.06) 0%, #ffffff 140px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.page-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

 /* On-scroll reveal */
 .reveal {
   opacity: 0;
   transform: translateY(16px);
  transition: opacity 1.4s cubic-bezier(.22,.61,.36,1), transform 1.4s cubic-bezier(.22,.61,.36,1);
 }
 .reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
 }
 @media (prefers-reduced-motion: reduce) {
   .reveal, .reveal.is-visible {
     transition: none;
     transform: none;
     opacity: 1;
   }
 }
 
/* Footer: brighten text readability slightly */
footer.bg-blue .container {
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* Container box with modern depth (keeps edges square) */
.container.box-shadow {
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}