:root{
  --navy:#0E2A52; --navy-2:#123A73; --accent:#FF6A1A; --accent-2:#E65C12;
  --text:#1B1F2A; --muted:#6B7280; --light:#F6F8FC; --border:#E5E7EB;
  --radius:16px; --shadow:0 12px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',sans-serif;margin:0;color:var(--text);line-height:1.7;background:#fff}
img{max-width:100%;height:auto;border-radius:12px;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.center{text-align:center}
.h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(32px,4.5vw,52px);line-height:1.2;margin:0 0 12px}
.h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);margin:0 0 16px}
.lead{color:var(--muted);font-size:18px}
.muted{color:var(--muted)}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.badge{background:var(--accent);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600}
.btn{display:inline-flex;gap:10px;align-items:center;padding:12px 20px;border-radius:999px;font-weight:600;transition:.2s ease;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn-sm{padding:8px 14px;font-size:14px}

/* Topbar & Header */
.topbar{background:var(--navy);color:#fff;font-size:14px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:44px}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo a{font-weight:700;color:var(--navy)}
.logo-strong{color:var(--navy)}
.logo-accent{color:var(--accent)}
.menu{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.menu a{padding:8px 6px;border-radius:8px}
.menu a:hover{background:#f3f4f6}
.header-cta{display:flex;gap:10px}

/* Layout */
.content-with-sidebar{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:40px 0}
.sidebar{padding:24px;background:#F8FAFC;border-radius:12px}

/* Hero */
.hero{position:relative;color:#fff;min-height:420px;display:flex;align-items:center}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,82,.55),rgba(14,42,82,.75))}
.hero-inner{position:relative;z-index:1;max-width:900px}

/* Intro */
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.intro-media{position:relative;overflow:visible}
.intro .since{position:absolute;left:-12px;top:-12px}
.bullets{padding-left:18px;margin:0 0 16px}
.bullets li{margin:6px 0}

/* Features */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.content-with-sidebar{grid-template-columns:1fr}.intro-grid{grid-template-columns:1fr}.section{padding:48px 0}}

/* Feature card */
.feature{display:flex;gap:16px;align-items:flex-start}
.feature .icon{width:44px;height:44px;border-radius:12px;background:var(--light);display:grid;place-items:center;color:var(--accent);font-size:22px}

/* Service grid */
.light{background:var(--light)}
.service-card{position:relative;overflow:hidden}
.service-card img{width:100%;height:220px;object-fit:cover;border-radius:12px}
.service-card h3{margin:12px 0 0}
.service-card .mini{position:absolute;bottom:12px;right:12px}

/* Band / counters */
.band{background:var(--navy);color:#fff}
.counter-card{position:relative;background:#fff;color:var(--text)}
.counter-card:before{content:"";position:absolute;top:-8px;left:24px;width:60px;height:8px;background:var(--accent);border-radius:4px}

/* Footer */
.site-footer{color:#fff}
.footer-widgets{background:var(--navy-2);padding:40px 0}
.footer-widget{color:#fff}
.footer-widget-title{margin:0 0 12px}
.main-footer{background:var(--navy);padding:18px 0}
.main-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.footer-menu ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.footer-menu a{color:#cbd5e1}

/* === Dropdown Menu Styles & Fixes === */
.site-header{z-index:9999} /* keep above hero overlay */
.main-nav{position:relative}
.menu{list-style:none;display:flex;gap:20px;margin:0;padding:0}
.menu li{position:relative}
.menu li a{display:block; padding:10px 10px; border-radius:8px}
.menu li a:hover{background:#f3f4f6}

/* Submenu */
.menu .sub-menu{
  position:absolute; left:0; top:100%;
  min-width:240px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  padding:8px 0; display:none; z-index:2000;
}
.menu .sub-menu li a{padding:10px 14px; white-space:nowrap; font-size:14px}
.menu .sub-menu .sub-menu{left:100%; top:0} /* third level */

/* Show on hover (desktop) */
@media (hover:hover){
  .menu li:hover > .sub-menu{display:block}
}

/* Mobile nav */
.nav-toggle{display:none;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px}
@media (max-width:900px){
  .header-inner{gap:12px}
  .nav-toggle{display:inline-block}
  .main-nav{width:auto}
  .menu-wrap{display:none; position:absolute; top:72px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow);}
  .menu-wrap.open{display:block}
  .menu{flex-direction:column; gap:0; padding:8px}
  .menu li a{padding:12px 14px}
  .menu .sub-menu{position:static; min-width:unset; border:none; box-shadow:none; padding:0 0 8px 12px; display:none}
  .menu li.open > .sub-menu{display:block}
}

/* Limit very long dropdown height with scroll */
.menu .sub-menu{max-height:60vh; overflow:auto}

/* Hero overlay z-index lower than header */
.hero .overlay{z-index:0}


/* === Header layout improvements === */
.header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.topbar .btn{display:none} /* avoid double CTA crowding on desktop */
@media(max-width:900px){
  .topbar .btn{display:inline-flex}
}

/* Keep dropdowns above everything */
.main-nav,.menu-wrap,.menu,.menu .sub-menu{overflow:visible}

/* Submenu scroll only for first level; nested remain visible */
.menu > li > .sub-menu{max-height:60vh;overflow:auto}
.menu .sub-menu .sub-menu{overflow:visible}

/* Caret indicators for items with children */
.menu .menu-item-has-children > a::after{
  content:"▾"; margin-left:6px; font-size:12px; opacity:.6;
}
.menu .sub-menu .menu-item-has-children > a::after{
  content:"▸";
}

/* Improve submenu spacing & look */
.menu .sub-menu{padding:8px;border-radius:12px}
.menu .sub-menu li{margin:0}
.menu .sub-menu li a{border-radius:8px}
.menu .sub-menu li a:hover{background:#f5f7fb}

/* Desktop: ensure menu container doesn't clip dropdown */
@media(min-width:901px){
  .menu-wrap{position:static !important; display:block !important; box-shadow:none !important; border:none !important;}
}


/* === v1.0.3: Nested submenu visibility fix === */
.menu .sub-menu{z-index: 3000}
/* Desktop: don't clip nested flyouts */
@media (min-width:901px){
  .menu > li > .sub-menu{max-height:none; overflow:visible}
  .menu .sub-menu .sub-menu{left: calc(100% + 6px); top: 0; z-index: 3100}
}


/* === v1.0.4: Sticky header stack + responsive polish === */

/* Make topbar sticky */
.topbar{position:sticky; top:0; z-index:10000}

/* Make header sticky below the topbar */
.site-header{position:sticky; top:44px; z-index:9999}

/* Mobile topbar height adjustment */
@media(max-width:900px){
  .site-header{top:44px} /* same height used on mobile */
}

/* Hero responsive tweaks */
@media(max-width:900px){
  .hero{min-height:320px}
  .h1{font-size:clamp(26px,7vw,36px)}
  .lead{font-size:16px}
}

/* Improve grid responsiveness for cards/sections */
@media(max-width:1200px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .container{padding:0 16px}
  .btn{padding:10px 16px}
  .intro-grid{grid-template-columns:1fr;gap:20px}
  .content-with-sidebar{grid-template-columns:1fr}
}

/* Mobile menu panel spacing so it doesn't overlay hero awkwardly */
@media(max-width:900px){
  .menu-wrap{top:calc(72px + 0px)} /* header height */
}


/* === v1.0.5: Mobile menu panel inside header + overlay + clean mobile header === */
@media(max-width:900px){
  .header-cta{display:none} /* hide pill buttons on small screens */
  .header-inner{grid-template-columns:1fr auto auto}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:40px}
  /* menu panel becomes fixed dropdown under header, not pushing layout */
  .menu-wrap{
    position:fixed; left:0; right:0;
    top:0; /* will be set via JS to sit below sticky header */
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:var(--shadow); display:none;
    max-height:60vh; overflow:auto;
  }
  .menu-wrap.open{display:block}
  body.no-scroll{overflow:hidden}
  .menu{flex-direction:column; gap:0; padding:8px}
  .menu .menu-item-has-children > a{display:flex; justify-content:space-between; align-items:center}
  .menu .sub-menu{position:static; display:none; padding-left:12px}
  .menu li.open > .sub-menu{display:block}
  .menu-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9998}
}

/* overlay sits just below the sticky header z-index */
.menu-overlay[hidden]{display:none}
.menu-overlay{backdrop-filter:saturate(120%) blur(0px)}


/* === v1.0.6: Header clean + topbar CTA + single-line menu === */
/* Show the topbar CTA on desktop; hide on very small screens */
.topbar .btn{display:inline-flex}
@media(max-width:480px){ .topbar .btn{display:none} }

/* Header grid without right CTAs */
.header-inner{grid-template-columns:auto 1fr auto}
/* Keep main nav in one line */
.menu{flex-wrap:nowrap}
.menu a{white-space:nowrap; line-height:1; padding:12px 10px}

/* Reduce spacing & font-size slightly at medium widths to avoid wrapping */
@media(max-width:1220px){
  .menu{gap:14px}
  .menu a{padding:10px 8px; font-size:15px}
}
@media(max-width:1080px){
  .menu{gap:10px}
  .menu a{font-size:14px}
}

/* Ensure logo + menu alignment stays centered */
.main-nav{display:flex; align-items:center}


/* === v1.0.7: Mobile horizontal scroll & side gap fix === */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Ensure fixed panels don't overflow viewport */
@media(max-width:900px){
  .menu-wrap{left:0; right:auto; width:100vw; box-sizing:border-box}
  .topbar, .site-header{left:0; right:auto; width:100vw}
}

/* Containers and sections must not overflow */
.container{box-sizing:border-box; max-width:1200px; width:100%}
.section, header, footer, .hero, .band{overflow-x:clip}

/* Media elements safe sizing */
img, video{max-width:100%; height:auto; display:block}

/* Prevent long words/links forcing overflow */
a, p, h1, h2, h3, h4, h5, h6{word-break:break-word; overflow-wrap:anywhere}

/* Grid safety on small screens */
@media(max-width:640px){
  .grid{margin-left:0; margin-right:0}
  .card{padding:20px}
}

/* Buttons should not extend outside */
.btn{max-width:100%}


/* === v1.0.8: Mobile content cut fix & typography tuning === */

/* 1) Don't clip section content horizontally */
.section, header, footer, .hero, .band{overflow-x:visible}

/* 2) Slightly larger side padding on small screens so text never hugs the edge */
@media(max-width:640px){
  .container{padding:0 20px}
}

/* 3) Safer heading sizes & line-heights on mobile */
@media(max-width:640px){
  h1, .h1{font-size:clamp(24px,7vw,32px); line-height:1.25}
  h2, .h2{font-size:clamp(20px,6vw,28px); line-height:1.3}
  p{font-size:16px; line-height:1.7}
}

/* 4) Ensure Gutenberg blocks & theme images are fully responsive */
.entry-content img,
.wp-block-image img,
.alignwide img,
.alignfull img{max-width:100%; width:100%; height:auto}
.wp-block-image{margin:0}

/* 5) Cards should not crop inner text */
.card{overflow:visible}

/* 6) Prevent long words/URLs from sticking out */
.entry-content, .card, .widget, .footer-widget{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* 7) Single column pages spacing */
@media(max-width:640px){
  .content-with-sidebar{padding:24px 0}
}


/* === v1.1.0: Mega Menu (3-column) for 'Services' === */
/* Add CSS class 'mega' to the top-level Services menu item in WP Menus */
@media(min-width:901px){
  .menu > li.mega {position:static;} /* allow full-width dropdown */
  .menu > li.mega > .sub-menu{
    position:absolute; left:0; right:0; top:100%;
    margin:0 auto; padding:20px; max-width:1100px;
    background:#fff; border:1px solid var(--border);
    border-radius:16px; box-shadow:var(--shadow); display:none;
  }
  .menu > li.mega:hover > .sub-menu{display:grid;}
  /* 3-column grid */
  .menu > li.mega > .sub-menu{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  }
  /* Column heading */
  .menu > li.mega > .sub-menu > li > a{
    display:block; font-weight:700; padding:10px 12px; border-radius:10px;
    background:#f8fafc; margin-bottom:8px;
  }
  /* Inner list (links) */
  .menu > li.mega > .sub-menu > li > .sub-menu{
    position:static; display:block; border:none; box-shadow:none; padding:0; margin:0;
  }
  .menu > li.mega > .sub-menu > li > .sub-menu > li > a{
    padding:8px 12px; display:block; border-radius:8px; font-size:15px;
  }
  .menu > li.mega > .sub-menu > li > .sub-menu > li > a:hover{
    background:#f5f7fb;
  }
  /* small icon bullets (optional via emoji) */
  .menu > li.mega > .sub-menu > li.mega-col-1 > a::before{content:"📚 ";}
  .menu > li.mega > .sub-menu > li.mega-col-2 > a::before{content:"🛠️ ";}
  .menu > li.mega > .sub-menu > li.mega-col-3 > a::before{content:"📍 ";}
}


/* === v1.2.0: Get Quote Modal === */
.quote-modal[hidden]{display:none}
.quote-modal{position:fixed; inset:0; z-index:12000; display:block}
.quote-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.quote-panel{
  position:relative; z-index:1; background:#fff; margin:6vh auto 0; max-width:720px;
  width:clamp(320px,92vw,720px); border-radius:16px; box-shadow:var(--shadow); padding:24px;
}
.quote-close{position:absolute; right:12px; top:8px; background:#fff; border:1px solid var(--border);
  border-radius:999px; width:34px; height:34px; font-size:20px; line-height:1}
.quote-form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px}
.quote-form label{display:flex; flex-direction:column; gap:6px; font-weight:500}
.quote-form input, .quote-form textarea{
  border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit
}
.quote-form .consent{flex-direction:row; align-items:center; gap:10px; margin:10px 0}
.quote-form .actions{display:flex; gap:10px; margin-top:12px}
#quoteStatus{margin-top:10px; font-size:14px}
@media(max-width:640px){ .quote-form .row{grid-template-columns:1fr} .quote-panel{margin:4vh auto} }