/* NG Companies - Static Site Styles */
/* Matching ngcompanies.com theme — refined pass */

/* === FONTS === */
@font-face{font-family:'Barlow';font-weight:400;src:url('/assets/fonts/Barlow-Regular.woff2') format('woff2'),url('/assets/fonts/Barlow-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Barlow';font-weight:700;src:url('/assets/fonts/Barlow-Bold.woff2') format('woff2'),url('/assets/fonts/Barlow-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Clash';font-weight:600;src:url('/assets/fonts/ClashDisplay-Medium.woff2') format('woff2'),url('/assets/fonts/ClashDisplay-Medium.otf') format('opentype');font-display:block}
@font-face{font-family:'Clash';font-weight:700;src:url('/assets/fonts/ClashDisplay-SemiBold.woff2') format('woff2'),url('/assets/fonts/ClashDisplay-SemiBold.otf') format('opentype');font-display:block}
@font-face{font-family:'Clash';font-weight:900;src:url('/assets/fonts/ClashDisplay-Bold.woff2') format('woff2'),url('/assets/fonts/ClashDisplay-Bold.otf') format('opentype');font-display:block}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
html.fixed{height:100%;overflow:hidden}
body{font-size:1em;font-family:'Barlow',sans-serif;color:#000;line-height:1.6;background:#f5f5f5;overscroll-behavior-y:none;padding-top:var(--nav-height);overflow-x:hidden;width:100%}
body.has-hero{padding-top:0}
img{max-width:100%}
a{color:#F26A21;text-decoration:underline;transition:color .3s}
a:hover{color:#F26A21;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font:inherit}
p:last-of-type{margin-bottom:0}
b,strong{font-weight:900}

/* === VARIABLES === */
:root{
  --primary:#F26A21;
  --primary-dark:#d85a15;
  --charcoal:#141713;
  --dark:#141713;
  --text:#000;
  --text-light:#555;
  --white:#F5F5F5;
  --pure-white:#fff;
  --gray-light:#f5f5f5;
  --border:#ddd;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --nav-height:90px;
  --hamburger-color:#1D2B28;
}

/* === UTILITIES === */
.container{width:85%;max-width:1800px;margin:0 auto;box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-center{text-align:center}
.color-orange{color:var(--primary)!important}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{font-family:'Clash',sans-serif;color:#141713;line-height:1.2;font-weight:700}
h1{font-size:4em;text-transform:uppercase;word-spacing:.25em;letter-spacing:1px;color:#F5F5F5}
h2{font-size:2.5em;text-transform:uppercase;letter-spacing:1px;word-spacing:.25em;color:#000}
h3{font-weight:600;word-spacing:.25em}
h4{font-size:1.5em;letter-spacing:1px}
h5{font-family:'Clash',sans-serif;color:#F5F5F5;font-weight:600;font-size:1.3em}
h6{font-family:'Barlow',sans-serif;font-weight:700}
p{margin-bottom:1em}
.number{font-family:'Clash',sans-serif;font-weight:700;font-size:4em}
.blockquote{font-family:'Clash',sans-serif;color:#fff;font-size:1.5em}

/* === BUTTONS === */
.btn{
  padding:.8em 1.5em;padding-bottom:.7em;font-size:1em;transition:background .3s,color .3s,border-color .3s;border-radius:0;
  display:inline-flex;cursor:pointer;font-family:'Clash',sans-serif;line-height:1;
  text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-weight:700;
  border:1px solid transparent;align-items:center;justify-content:center;
}
.btn-primary{background:var(--primary);color:#000;border-color:var(--primary)}
.btn-primary:hover{background:#000;color:#fff;border-color:#000;text-decoration:none}
.btn-dark{background:#000;color:#fff;border-color:#000}
.btn-dark:hover{background:var(--primary);color:#000;border-color:var(--primary)}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.btn-outline-dark{background:transparent;color:#000;border:2px solid #000}
.btn-outline-dark:hover{background:#000;color:#fff}
.btn-sm{padding:.5em 1em;font-size:.85em}
/* Dark background button inversion */
.section-dark .btn-primary:hover,.cta-banner .btn-primary:hover{background:#fff;color:#000}
/* Secondary button with animated underline */
.btn-secondary{
  background:transparent;font-family:'Clash',sans-serif;text-transform:uppercase;
  font-weight:700;font-size:1em;color:#000;text-decoration:none;
  padding:.5em 0;letter-spacing:1px;display:inline-flex;align-items:center;position:relative;
}
.btn-secondary::before{
  content:'';height:2px;width:50%;transition:width .3s;background:#000;
  position:absolute;bottom:-3px;left:0;right:0;margin:0 auto;
}
.btn-secondary:hover::before{width:100%}
.btn-secondary:hover{text-decoration:none;color:#000}
/* Text button */
.btn-text{text-transform:lowercase;font-style:italic;cursor:pointer;text-decoration:underline;color:var(--primary)}
.btn-text:hover{text-decoration:none}

/* === SITE HEADER / NAV === */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:var(--white);transition:.5s background;
  height:var(--nav-height);border-bottom:1px solid var(--primary);
}
.site-header.transparent{background:transparent}
.site-header.transparent.scrolled,.site-header.transparent.menu-open{background:var(--white)}
.site-header.transparent.menu-open .logo-white{opacity:0;pointer-events:none}
.site-header.transparent.menu-open .logo-color{opacity:1;pointer-events:auto}
.site-header.transparent.menu-open .nav-menu>li>a{color:var(--charcoal)}
.site-header.transparent.menu-open .header-phone{color:var(--charcoal)}
.site-header.transparent.menu-open .header-social a{color:var(--charcoal)}
.site-header.menu-open .hamburger span{background:var(--hamburger-color)}
/* Ensure header is fully opaque over hero - use solid white not var */
.site-header.menu-open{background:#F5F5F5!important}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:85%;max-width:1800px;margin:0 auto;height:100%;
  box-sizing:border-box;
}

/* Hero under header for transparent pages */
body.has-hero .hero{margin-top:calc(-1 * var(--nav-height));padding-top:var(--nav-height)}

/* Logo */
.logo{display:flex;align-items:center;flex-shrink:0;height:100%;text-decoration:none;position:relative}
.logo-color{display:flex;align-items:center;height:100%}
.logo-white{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;opacity:0;pointer-events:none}
.logo svg{height:85%;width:auto;display:block;max-height:80px}
.site-header.transparent .logo-white{opacity:1;pointer-events:auto}
.site-header.transparent .logo-color{opacity:0;pointer-events:none}
.site-header.transparent.scrolled .logo-white{opacity:0;pointer-events:none}
.site-header.transparent.scrolled .logo-color{opacity:1;pointer-events:auto}

/* Nav menu */
.main-nav{flex:1;display:flex;justify-content:flex-start;margin-left:3em;height:100%}
.nav-menu{display:flex;gap:0;align-items:center;height:100%;margin:0;padding:0}
.nav-menu>li{position:relative;height:100%;display:flex;align-items:center;padding-right:3em}
.nav-menu>li>a{
  display:flex;align-items:center;gap:.5em;color:var(--charcoal);
  font-family:'Clash',sans-serif;font-size:1em;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none;
  transition:color .3s;white-space:nowrap;position:relative;
}
.site-header.transparent .nav-menu>li>a{color:#F5F5F5}
.site-header.transparent.scrolled .nav-menu>li>a{color:var(--charcoal)}
.nav-menu>li>a:hover{color:var(--primary);text-decoration:none}
.nav-menu>li>a .chevron{width:10px;height:10px;transition:.3s transform}
.nav-menu>li:hover>a .chevron{transform:rotate(180deg)}

/* Dropdowns */
.dropdown{
  position:absolute;top:100%;left:0;min-width:280px;
  background:var(--white);border-bottom:1px solid var(--primary);
  padding:2em;opacity:0;pointer-events:none;transition:opacity .2s;z-index:999;
}
.nav-menu>li:hover>.dropdown,.nav-menu>li:focus-within>.dropdown{opacity:1;pointer-events:auto}
.dropdown a{
  display:flex;align-items:flex-start;padding:.7em .5em;
  color:var(--charcoal);font-family:'Barlow',sans-serif;font-size:.9em;
  text-transform:none;text-decoration:none;letter-spacing:1px;
  border-bottom:1px solid var(--primary);position:relative;left:0;transition:left .3s,color .3s;
}
.dropdown a:last-child{border-bottom:none}
.dropdown a:hover{left:10px;color:var(--primary)}
.dropdown.mega{min-width:500px}
.dropdown.mega .dropdown-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}

/* Header right */
.header-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header-phone{
  color:var(--charcoal);font-weight:700;font-size:.9em;
  display:flex;align-items:center;gap:6px;text-decoration:none;
}
.site-header.transparent .header-phone{color:#F5F5F5}
.site-header.transparent.scrolled .header-phone{color:var(--charcoal)}
.header-phone svg{width:16px;height:16px}
.header-phone:hover{color:var(--primary)}
.header-social{display:flex;gap:10px}
.header-social a{color:var(--charcoal);display:flex;transition:color .3s;text-decoration:none}
.header-social a svg{width:20px;height:20px}
.site-header.transparent .header-social a{color:#F5F5F5}
.site-header.transparent.scrolled .header-social a{color:var(--charcoal)}
.header-social a:hover{color:var(--primary)}
.header-contact-btn{
  padding:.6em 1.2em;background:var(--primary);color:#000;
  font-family:'Clash',sans-serif;font-size:.85em;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none;
  transition:none;
}
.header-contact-btn:hover{background:#000;color:#fff;text-decoration:none;transition:background .3s,color .3s}

/* Hamburger */
.hamburger{display:none;flex-direction:column;width:30px;padding:4px 0;position:relative;z-index:3}
.hamburger span{
  display:block;width:100%;height:4px;margin:3.5px 0;
  background:var(--hamburger-color);transition:all .2s ease-in-out;
}
.site-header.transparent .hamburger span{background:#fff}
.site-header.transparent.scrolled .hamburger span{background:var(--hamburger-color)}
/* Hamburger X animation */
.hamburger.close span:first-child{transform:translateY(11px) rotate(135deg)}
.hamburger.close span:nth-child(2){transform:scale(0)}
.hamburger.close span:last-child{transform:translateY(-11px) rotate(-135deg)}

/* Mobile nav */
.mobile-menu{
  display:none;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;
  background:#fff;z-index:1000;overflow-y:auto;
  padding:2em 30px 4em;
}
.mobile-menu.open{display:block}
.mobile-menu a{
  display:block;padding:.6em 0;color:var(--charcoal);
  font-family:'Clash',sans-serif;font-size:2em;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;text-decoration:none;
  border-bottom:none;
}
.mobile-menu .mobile-sub{padding-left:0}
.mobile-menu .mobile-sub a{
  font-family:'Barlow',sans-serif;font-weight:700;font-size:1.2em;
  text-transform:none;color:var(--text-light);
}
.mobile-menu .mobile-section-title{
  font-family:'Clash',sans-serif;font-size:2em;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--charcoal);
  padding:.6em 0 .2em;border:none;margin-top:.5em;
}
.mobile-menu .mobile-phone{
  display:flex;align-items:center;gap:.5em;padding:1em 0;
  font-weight:700;color:var(--primary);border:none;font-size:1.3em;text-decoration:none;
}

/* === HERO === */
.hero{
  position:relative;overflow:hidden;background:var(--charcoal);
  min-height:100vh;display:flex;align-items:center;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.5));z-index:1;
}
.hero-content{
  position:relative;z-index:2;width:85%;max-width:1800px;
  margin:0 auto;padding:6em 0;color:#F5F5F5;
}
.hero-content h1{color:#F5F5F5;margin-bottom:.5em}
.hero-content h2{color:#F5F5F5}
.hero-content p{font-size:1em;margin-bottom:1.5em;color:rgba(255,255,255,.9)}
.hero-sm{min-height:400px}
.hero-sm .hero-content{padding:4em 0}

/* Page header hero (inner pages) */
.page-hero{
  background:var(--charcoal);padding:calc(3em + 20px) 0 3em;
  position:relative;overflow:hidden;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#F5F5F5;margin-bottom:.3em}
.page-hero p{color:rgba(255,255,255,.8);font-size:1em}

/* Breadcrumbs */
.breadcrumb{padding:12px 0;font-size:.85rem;color:rgba(255,255,255,.7)}
.breadcrumb a{color:#F26A21}
.breadcrumb span{margin:0 6px;color:rgba(255,255,255,.4)}

/* === SECTIONS === */
.section{padding:6em 0}
.section-sm{padding:3em 0}
.section-gray{background:var(--white)}
.section-dark{background:var(--charcoal);color:#F5F5F5}
.section-dark h2,.section-dark h3,.section-dark h4{color:#F5F5F5}
.section-dark p{color:rgba(255,255,255,.85)}
.section-dark a:not(.btn){color:var(--primary)}
.section-white{background:#fff}

.section-header{text-align:center;max-width:900px;margin:0 auto 3em}
.section-header h2{margin-bottom:.5em}
.section-header p{color:var(--text-light);font-size:1em}
.section-dark .section-header h2{color:#F5F5F5}
.section-dark .section-header p{color:rgba(255,255,255,.85)}

/* === SERVICE CARDS === */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.service-card{
  background:#fff;overflow:hidden;transition:transform .3s;
  text-decoration:none;color:var(--text);display:block;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.service-card img{width:100%;height:auto;object-fit:cover;display:block;transition:.5s transform}
.service-card:hover img{transform:scale(1.05)}
.service-card-body{padding:1.5em}
.service-card-body h3{margin-bottom:.5em;font-size:1em;color:#000}
.service-card-body p{font-size:.85em;color:var(--text-light);margin-bottom:.8em}
.service-card-link{
  color:#9A4A12;font-family:'Clash',sans-serif;font-weight:700;
  font-size:.85em;text-transform:uppercase;letter-spacing:1px;
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;position:relative;
}
.service-card-link::before{
  content:'';height:2px;width:50%;background:var(--primary);
  position:absolute;bottom:-3px;left:0;transition:width .3s;
}
.service-card-link:hover::before{width:100%}

/* === SPLIT SECTION === */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3em;align-items:center}
.split-text h2{margin-bottom:.5em;color:#000}
.split-text p{color:var(--text-light)}
.split-image{overflow:hidden}
.split-image img{width:100%;height:100%;object-fit:cover;display:block}
.split.reverse{direction:rtl}
.split.reverse>*{direction:ltr}

/* === STATS / METRICS === */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;text-align:center}
.stat-card{padding:1.5em}
.stat-number{font-family:'Clash',sans-serif;font-size:4em;font-weight:700;color:var(--primary);margin-bottom:.2em;line-height:1}
.stat-label{font-size:.95em;color:var(--text-light)}

/* === MARKETS GRID === */
.markets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.market-item{display:flex;flex-direction:column;align-items:center;gap:12px;padding:1.5em;text-align:center}
.market-item img{width:48px;height:48px}
.market-item span{font-family:'Clash',sans-serif;font-weight:600;font-size:.85em;color:var(--charcoal);text-transform:uppercase;letter-spacing:1px}

/* === MAP === */
.map-container{width:100%;height:500px;overflow:hidden}
/* Google Maps info window */
.gm-style .gm-style-iw-d{font-size:1em;padding:2em;color:#000;background:#F5F5F5;border-radius:10px}
.gm-style .gm-style-iw-c{border-radius:15px;padding:0;box-shadow:none;background:#F5F5F5}
.gm-style .gm-style-iw-c a{color:var(--primary);text-decoration:underline}

/* === LOCATION CARDS === */
.locations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.location-card{
  background:#fff;border-bottom:2px solid var(--primary);padding:1.5em;
  transition:transform .3s;text-decoration:none;display:block;
}
.location-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.location-card h3{margin-bottom:.5em;font-size:1em;color:#000}
.location-card p{font-size:.9em;color:var(--text-light);margin-bottom:.3em}
.location-card .location-phone{color:var(--primary);font-weight:700;display:flex;align-items:center;gap:6px;margin-top:.5em}
.location-card .location-avail{font-size:.8em;color:var(--text-light);margin-top:.3em}
.location-card .learn-more{
  display:inline-block;margin-top:.8em;color:var(--primary);
  font-family:'Clash',sans-serif;font-weight:700;font-size:.85em;
  text-transform:uppercase;letter-spacing:1px;
}

/* === PARTNER LOGOS === */
.partner-logos{display:flex;align-items:center;justify-content:center;gap:3em;flex-wrap:wrap}
.partner-logos img{height:50px;width:auto;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.partner-logos img:hover{filter:none;opacity:1}

/* === PROJECT CARDS === */
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.project-card{background:#fff;overflow:hidden;transition:transform .3s;text-decoration:none;display:block;color:var(--text)}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.project-card img{width:100%;height:250px;object-fit:cover;display:block;transition:.5s transform}
.project-card:hover img{transform:scale(1.05)}
.project-card-body{padding:1.5em}
.project-card-body h3{font-size:1em;margin-bottom:.5em;color:#000}
.project-card-body p{font-size:.85em;color:var(--text-light);margin-bottom:.8em}
.project-card-body .project-meta{display:flex;gap:.8em;flex-wrap:wrap;font-size:.75em;color:var(--text-light);margin-bottom:.5em}
.project-card-body .project-meta span{background:var(--gray-light);padding:.2em .8em;font-family:'Clash',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* === FAQ ACCORDION === */
/* Related articles carousel */
.related-carousel{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.related-carousel-wrap{position:relative}
.related-carousel-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:60px;background:linear-gradient(to right,transparent,var(--gray-light));pointer-events:none;z-index:2;display:none}
@media(max-width:1024px){
  .related-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:1em;scroll-padding:0 16px}
  .related-carousel .news-card{width:280px;min-width:280px;max-width:280px;flex-shrink:0;scroll-snap-align:start;overflow:hidden}
  .related-carousel .news-card img{width:280px;height:auto;aspect-ratio:4/3;object-fit:cover}
  .related-carousel-wrap::after{display:block}
}
.related-carousel::-webkit-scrollbar{height:4px}
.related-carousel::-webkit-scrollbar-track{background:transparent}
.related-carousel::-webkit-scrollbar-thumb{background:var(--primary);border-radius:2px}
/* Swipe hint text */
.swipe-hint{display:none;text-align:center;font-size:.8em;color:var(--text-light);margin-top:.5em}
.swipe-hint::before{content:'← swipe →'}
@media(max-width:1024px){.swipe-hint{display:block}}

.faq-list{max-width:900px;margin:0 auto}
details.faq-item{border-bottom:1px solid rgba(0,0,0,.1)}
details.faq-item summary{
  padding:1.2em 0;font-family:'Clash',sans-serif;font-weight:600;font-size:1em;
  cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;color:var(--charcoal);
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'+';font-size:1.5rem;font-weight:300;color:var(--primary);transition:.3s transform;flex-shrink:0;margin-left:1em}
details.faq-item[open] summary::after{content:'\2212'}
details.faq-item .faq-answer{padding:0 0 1.5em;font-size:.95em;color:var(--text-light);line-height:1.7}

/* === CTA BANNER === */
.cta-banner{background:var(--charcoal);padding:6em 0;text-align:center;color:#F5F5F5}
.cta-banner h2{color:#F5F5F5;margin-bottom:.5em}
.cta-banner p{color:rgba(255,255,255,.8);margin-bottom:1.5em;max-width:700px;margin-left:auto;margin-right:auto}

/* === TESTIMONIALS === */
.testimonial-card{background:#fff;padding:2em;max-width:700px;margin:0 auto;border-left:3px solid var(--primary)}
.testimonial-card blockquote{font-family:'Clash',sans-serif;font-size:1em;font-style:italic;color:var(--charcoal);margin-bottom:1em;line-height:1.6}
.testimonial-card blockquote::before{content:'\201C';font-size:2rem;color:var(--primary);line-height:0;vertical-align:-.4em;margin-right:.2em}
.testimonial-author{font-family:'Clash',sans-serif;font-weight:700;color:var(--charcoal)}
.testimonial-role{font-size:.85em;color:var(--text-light)}
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.testimonials-grid .testimonial-card{max-width:none}

/* === CONTACT FORM === */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.form-group{display:flex;flex-direction:column;gap:.4em}
.form-group.full{grid-column:1/-1}
.form-group label{font-weight:700;font-size:.9em;color:var(--charcoal)}
.form-group input,.form-group select,.form-group textarea{
  padding:.7em 1em;border:1px solid #ccc;font-size:1em;transition:border-color .3s;background:#fff;font-family:'Barlow',sans-serif;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}
.form-group textarea{resize:vertical;min-height:120px}
.form-note{font-size:.8em;color:var(--text-light);margin-top:.5em}

/* === NEWS / ARTICLE CARDS === */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.news-card{background:#fff;overflow:hidden;transition:transform .3s;text-decoration:none;display:block;color:var(--text)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:.5s transform}
.news-card:hover img{transform:scale(1.05)}
.news-card-body{padding:1.5em}
.news-card-body .news-category{
  display:inline-block;background:var(--primary);color:#000;font-family:'Clash',sans-serif;
  font-size:.7em;font-weight:700;padding:.4em .8em;margin-bottom:.5em;text-transform:uppercase;letter-spacing:1px;
}
.news-card-body h3{font-size:1em;margin-bottom:.5em;color:#000}
.news-card-body p{font-size:.85em;color:var(--text-light)}

/* Featured article */
.news-featured{display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:center;margin-bottom:3em}
.news-featured img{width:100%;height:350px;object-fit:cover;display:block}
.news-featured-body .news-category{display:inline-block;background:var(--primary);color:#000;font-family:'Clash',sans-serif;font-size:.7em;font-weight:700;padding:.4em .8em;margin-bottom:.8em;text-transform:uppercase;letter-spacing:1px}
.news-featured-body h2{font-size:1.5em;margin-bottom:.5em;color:#000}
.news-featured-body p{color:var(--text-light);margin-bottom:1em}

/* Article detail */
.article-content{max-width:900px;margin:0 auto;padding:3em 24px;background:#fff}
.article-content .article-category{display:inline-block;background:var(--primary);color:#000;font-family:'Clash',sans-serif;font-size:.7em;font-weight:700;padding:.4em .8em;margin-bottom:1em;text-transform:uppercase;letter-spacing:1px}
.article-content h1{margin-bottom:1em;color:#000}
.article-content img.article-hero{width:100%;height:400px;object-fit:cover;margin-bottom:2em}
.article-content .article-body{font-size:1em;line-height:1.8;color:#000}
.article-content .article-body h2{font-size:1.5em;margin:2em 0 .8em;color:#000}
.article-content .article-body h3{font-size:1.2em;margin:1.5em 0 .6em;color:#000}
.article-content .article-body p{margin-bottom:1.2em;color:#000}
.article-content .article-body ul{margin:0 0 1.2em 24px;list-style:disc;color:#000}
.article-content .article-body li{margin-bottom:.5em;color:#000}

/* Filter bar */
.filter-bar{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:2em}
.filter-btn{
  padding:.6em 1.2em;border:1px solid var(--primary);font-family:'Clash',sans-serif;
  font-size:.8em;font-weight:700;color:#000;background:transparent;cursor:pointer;
  transition:background .3s,color .3s;text-transform:uppercase;letter-spacing:1px;
  white-space:nowrap;
}
.filter-btn:hover,.filter-btn.active{background:var(--primary);color:#000;border-color:var(--primary)}

/* === PROJECT DETAIL === */
.project-detail{max-width:900px;margin:0 auto;padding:3em 24px;background:#fff}
.project-detail img.project-hero{width:100%;height:400px;object-fit:cover;margin-bottom:1.5em}
.project-detail .project-meta{display:flex;gap:.8em;margin-bottom:1em;flex-wrap:wrap}
.project-detail .project-meta span{background:var(--gray-light);padding:.3em 1em;font-family:'Clash',sans-serif;font-size:.8em;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.project-detail h1{margin-bottom:1em;color:#000}
.project-detail .project-body{font-size:1em;line-height:1.8}

/* === VALUES / ICON CARDS === */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.value-card{text-align:center;padding:2em 1.5em}
.value-card .value-icon{width:56px;height:56px;margin:0 auto 1em;background:rgba(242,106,33,.1);border-radius:50%;display:flex;align-items:center;justify-content:center}
.value-card .value-icon svg{width:28px;height:28px;color:var(--primary)}
.value-card h3{font-size:1em;margin-bottom:.5em;color:#000}
.value-card p{font-size:.85em;color:var(--text-light)}

/* === BENEFITS LIST === */
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.benefit-card{background:#fff;border-left:3px solid var(--primary);padding:1.5em}
.benefit-card h3{font-size:1em;margin-bottom:.5em;color:var(--charcoal)}
.benefit-card p{font-size:.9em;color:var(--text-light)}

/* === CERTIFICATION BADGES === */
.cert-grid{display:flex;gap:2em;justify-content:center;flex-wrap:wrap}
.cert-item{text-align:center;padding:1em}
.cert-item img{width:60px;height:60px;margin:0 auto .5em}
.cert-item span{font-size:.85em;font-weight:600}

/* === EMPLOYEE TESTIMONIALS === */
.emp-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}

/* === FOOTER === */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,.8);padding:4em 0 1.5em}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3em;margin-bottom:3em}
.footer-brand .footer-logo{height:auto;width:200px;margin-bottom:1em}
.footer-brand .footer-phone{color:#fff;font-weight:700;font-size:1.1em;display:flex;align-items:center;gap:.5em;margin-bottom:1em;text-decoration:none}
.footer-brand .footer-phone:hover{color:var(--primary)}
.footer-social{display:flex;gap:12px}
.footer-social a{color:rgba(255,255,255,.6);display:flex;transition:color .3s;text-decoration:none}
.footer-social a:hover{color:#fff}
.footer-social a svg{width:20px;height:20px}
.footer-col .footer-heading{color:#fff;font-family:'Clash',sans-serif;font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:1em}
.footer-col a{display:block;padding:.3em 0;color:rgba(255,255,255,.6);font-size:.9em;transition:color .3s;text-decoration:none}
.footer-col a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5em;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1em}
.footer-legal{display:flex;gap:1em;flex-wrap:wrap}
.footer-legal a{font-size:.8em;color:rgba(255,255,255,.6);text-decoration:none}
.footer-legal a:hover{color:#fff}
.footer-credit{display:flex;align-items:center;gap:.5em;font-size:.8em;color:rgba(255,255,255,.4);text-decoration:none}
.footer-credit img{height:16px}

/* === LOCATION DETAIL PAGE === */
.location-detail-services{display:flex;gap:1em;flex-wrap:wrap;margin-bottom:1.5em}
.location-detail-services a{
  padding:.5em 1em;background:transparent;border:1px solid var(--primary);
  font-family:'Clash',sans-serif;font-size:.8em;font-weight:700;color:#000;
  text-transform:uppercase;letter-spacing:1px;transition:background .3s,color .3s;text-decoration:none;
}
.location-detail-services a:hover{background:var(--primary);color:#000}
.location-info{display:grid;grid-template-columns:1fr 1fr;gap:2em;margin-bottom:3em}
.location-info .location-address{font-size:1em;line-height:1.8}
.location-info .location-map{overflow:hidden;min-height:300px}

/* === IMAGE-TEXT SECTIONS === */
.image-text{
  position:relative;display:flex;align-items:center;
  min-height:600px;padding:3em 0;margin-bottom:6em;background:#f5f5f5;
  overflow:hidden;
}
.image-text .image-text-bg{position:absolute;top:0;left:0;width:58%;height:100%;overflow:hidden}
.image-text.right .image-text-bg{left:auto;right:0}
.image-text .image-text-bg img{width:100%;height:100%;object-fit:cover}
.image-text .image-text-content{position:relative;z-index:2;width:85%;max-width:1800px;margin:0 auto;display:flex}
.image-text.left .image-text-content{justify-content:flex-end}
.image-text.right .image-text-content{justify-content:flex-start}
.image-text .text-card{background:#EBEBEB;padding:2.5em;max-width:550px;box-shadow:4px 4px 15px rgba(0,0,0,.1)}
.image-text .text-card h2{margin-bottom:.5em;color:#000}
.image-text .text-card p{color:var(--text-light);margin-bottom:1.5em}

/* === SCROLL ARROW === */
.scroll-arrow{
  position:absolute;bottom:2em;left:50%;transform:translateX(-50%);z-index:3;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  animation:bounce 2s ease infinite;opacity:.8;text-decoration:none;
}
.scroll-arrow svg{width:28px;height:28px}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}
  40%{transform:translateX(-50%) translateY(10px)}
  60%{transform:translateX(-50%) translateY(5px)}
}

/* === FADE-IN ANIMATIONS === */
.fade-in{opacity:0;transform:translateY(50px);transition:.6s opacity ease-in-out,.6s transform ease-in-out}
.fade-in.in{opacity:1;transform:translateY(0)}
.fade-in.count-0{transition-delay:0s}
.fade-in.count-1{transition-delay:.2s}
.fade-in.count-2{transition-delay:.4s}
.fade-in.count-3{transition-delay:.6s}
.fade-in.count-4{transition-delay:.8s}
.fade-in.count-5{transition-delay:1s}
.fade-in.count-6{transition-delay:1.2s}

/* HR animation */
hr{border:none;border-top:1px solid var(--primary);margin:1.5em 0;width:100%;max-width:0;transition:max-width .5s}
hr.in{max-width:100%}

/* ============================================================
   RESPONSIVE — matching original's 10+ breakpoint cascade
   ============================================================ */

@media(max-width:1400px){
  .container{width:90%}
  .header-inner{width:90%}
  .header-contact-btn{display:none}
  .image-text{min-height:500px}
}
@media(max-width:1200px){
  .image-text{min-height:400px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  html{font-size:16px}
  .container{width:100%;padding:0 20px}
  .header-inner{width:100%;padding:0 20px}
  h1{font-size:3em}
  h2{font-size:1.8em}
  .section{padding:4em 0}
  .section-sm{padding:2em 0}
  .stat-number{font-size:2.5em}
  .split{grid-template-columns:1fr;gap:2em}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .news-featured{grid-template-columns:1fr}
  .locations-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .location-info{grid-template-columns:1fr}
  /* Hamburger activation */
  .main-nav{display:none}
  .header-right{display:none}
  .hamburger{display:flex}
  .site-header{height:70px}
  body{padding-top:70px}
  body.has-hero{padding-top:0}
  body.has-hero .hero{margin-top:-70px;padding-top:70px}
  .mobile-menu{top:70px;height:calc(100vh - 70px)}
  .hero{min-height:70vh}
  .hero-content{padding:4em 0;width:100%;padding-left:20px;padding-right:20px}
}
@media(max-width:767px){
  html{font-size:17px}
  .container{width:100%;padding:0 15px}
  .header-inner{width:100%;padding:0 15px}
  .section{padding:3em 0}
  .section-sm{padding:1.5em 0}
  h1{font-size:2em}
  h2{font-size:1.3em}
  h3{font-size:1.4em}
  h4{font-size:1.2em}
  h5{font-size:1.2em}
  .btn{font-size:.8em}
  .hero{min-height:auto}
  .hero-content{padding:6em 15px 4em}
  .services-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr;gap:1em}
  .markets-grid{grid-template-columns:repeat(3,1fr);gap:1em}
  .projects-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}.news-card{max-width:500px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.5em}
  .footer-brand{grid-column:1/-1}
  .footer-col h4{margin-bottom:.5em;font-size:.75em}
  .footer-col a{padding:.2em 0;font-size:.85em}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:auto}
  .values-grid{grid-template-columns:1fr 1fr}
  .benefits-grid{grid-template-columns:1fr}
  .partner-logos{gap:1.5em}
  .partner-logos img{height:36px}
  .map-container{height:400px}
  .locations-grid{grid-template-columns:1fr}
  .dropdown{min-width:200px}
  .dropdown.mega{min-width:280px}
  .dropdown.mega .dropdown-grid{grid-template-columns:1fr}
  .filter-bar{justify-content:center}
  /* Image-text sections stack vertically */
  .image-text{display:block;min-height:auto;margin-bottom:0;padding:0}
  .image-text+.image-text{margin-top:0}
  .image-text .image-text-bg{position:relative;width:100%;height:400px}
  .image-text.right .image-text-bg{left:0;right:auto}
  .image-text .image-text-content{width:100%;padding:0 15px}
  .image-text .text-card{max-width:none;margin-top:-4em;position:relative;z-index:2}
  .image-text:after{display:none}
  /* Mobile menu typography */
  .mobile-menu a{font-size:2em}
  .mobile-menu .mobile-section-title{font-size:2em}
  .mobile-menu .mobile-sub a{font-size:1.2em}
  /* Article/project detail */
  .article-content img.article-hero{height:200px}
  .project-detail img.project-hero{height:200px}
  .news-featured img{height:250px}
  .cta-banner{padding:4em 0}
  .testimonials-grid{grid-template-columns:1fr}
}
@media(max-width:400px){
  h2{font-size:1.4em}
}

/* ============================================================
   VIEW TRANSITIONS (smooth page navigation)
   ============================================================ */
@view-transition{navigation:auto}
/* Keep header and footer fixed during transitions */
.site-header{view-transition-name:header}
.mobile-menu{view-transition-name:mobile-menu}
.site-footer{view-transition-name:footer}
/* Only animate the main content area */
main{view-transition-name:main-content}
/* Fade content quickly, persistent elements stay put */
::view-transition-old(main-content){animation:fade-out .12s ease-in forwards}
::view-transition-new(main-content){animation:fade-in-vt .12s ease-out forwards}
::view-transition-old(header),::view-transition-new(header),
::view-transition-old(footer),::view-transition-new(footer),
::view-transition-old(mobile-menu),::view-transition-new(mobile-menu){animation:none}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes fade-in-vt{from{opacity:0}to{opacity:1}}

/* ============================================================
   DARK MODE
   ============================================================ */
@media(prefers-color-scheme:dark){
  :root{
    --primary:#F26A21;
    --primary-dark:#ff8844;
    --charcoal:#0d0f0c;
    --dark:#0d0f0c;
    --text:#e0e0e0;
    --text-light:#aaa;
    --white:#1a1c1a;
    --pure-white:#1a1c1a;
    --gray-light:#1a1c1a;
    --border:#333;
    --shadow:0 2px 8px rgba(0,0,0,.3);
    --shadow-lg:0 8px 24px rgba(0,0,0,.4);
    --hamburger-color:#e0e0e0;
  }
  body{background:#111;color:#e0e0e0}
  h1,h2,h3,h4,h5,h6{color:#e0e0e0}
  h1{color:#F5F5F5}
  h2{color:#e0e0e0}
  /* Nav */
  .site-header{background:#1a1c1a;border-bottom-color:#F26A21}
  .site-header.transparent{background:transparent}
  .site-header.transparent.scrolled{background:#1a1c1a}
  .site-header.menu-open{background:#1a1c1a!important}
  .nav-menu>li>a{color:#e0e0e0}
  .site-header.transparent .nav-menu>li>a{color:#F5F5F5}
  .site-header.transparent.scrolled .nav-menu>li>a{color:#e0e0e0}
  .header-phone{color:#e0e0e0}
  .site-header.transparent .header-phone{color:#F5F5F5}
  .site-header.transparent.scrolled .header-phone{color:#e0e0e0}
  .header-social a{color:#e0e0e0}
  .site-header.transparent .header-social a{color:#F5F5F5}
  .site-header.transparent.scrolled .header-social a{color:#e0e0e0}
  .site-header.transparent .hamburger span{background:#fff}
  /* Logo — show white logo always in dark mode */
  .logo-white{opacity:1!important}
  .logo-color{opacity:0!important}
  /* Dropdowns */
  .dropdown{background:#1e201e;border-bottom-color:#F26A21}
  .dropdown a{color:#ccc;border-bottom-color:rgba(242,106,33,.2)}
  .dropdown a:hover{color:var(--primary)}
  /* Mobile menu */
  .mobile-menu{background:#1a1c1a}
  .mobile-menu a{color:#e0e0e0;border-bottom-color:rgba(242,106,33,.15)}
  .mobile-menu .mobile-sub a{color:#aaa}
  .mobile-menu .mobile-section-title{color:#aaa}
  /* Cards */
  .service-card,.project-card,.news-card,.location-card{background:#1e201e;color:#e0e0e0}
  .service-card-body h3,.project-card-body h3,.news-card-body h3,.location-card h3{color:#e0e0e0}
  .benefit-card{background:#1e201e;border-left-color:var(--primary)}
  .benefit-card h3{color:#e0e0e0}
  .testimonial-card{background:#1e201e;border-left-color:var(--primary)}
  .testimonial-card blockquote{color:#ccc}
  .testimonial-author{color:#e0e0e0}
  .value-card .value-icon{background:rgba(242,106,33,.15)}
  .value-card h3{color:#e0e0e0}
  /* Image-text sections */
  .image-text{background:#111}
  .image-text .text-card{background:#1e201e;box-shadow:4px 4px 15px rgba(0,0,0,.3)}
  .image-text .text-card h2{color:#e0e0e0}
  /* Sections */
  .section-gray{background:#161816}
  .section-header h2{color:#e0e0e0}
  /* Hero / page hero — already dark, keep as-is */
  .hero-content h1{color:#F5F5F5}
  .page-hero h1{color:#F5F5F5}
  /* Forms */
  .form-group input,.form-group select,.form-group textarea{background:#1e201e;border-color:#444;color:#e0e0e0}
  .form-group label{color:#e0e0e0}
  /* Buttons */
  .btn-primary:hover{background:#222;color:#fff;border-color:#222}
  .btn-dark{background:#333;color:#fff;border-color:#333}
  .btn-dark:hover{background:var(--primary);color:#000;border-color:var(--primary)}
  .btn-outline-dark{color:#e0e0e0;border-color:#e0e0e0}
  .btn-outline-dark:hover{background:#e0e0e0;color:#111}
  .btn-secondary{color:#e0e0e0}
  .btn-secondary::before{background:#e0e0e0}
  /* Filter buttons */
  .filter-btn{color:#e0e0e0;border-color:var(--primary)}
  /* News category tags — keep orange */
  /* FAQ */
  details.faq-item{border-bottom-color:rgba(255,255,255,.1)}
  details.faq-item summary{color:#e0e0e0}
  /* Partner logos */
  .partner-logos img{filter:grayscale(1) brightness(2);opacity:.4}
  .partner-logos img:hover{filter:none;opacity:1}
  /* Market icons — invert for dark bg */
  .market-item img{filter:brightness(0) invert(1);opacity:.8}
  .market-item span{color:#e0e0e0}
  /* Location cards */
  .location-card{border-bottom-color:var(--primary)}
  .location-card .learn-more{color:var(--primary)}
  /* Project meta tags */
  .project-card-body .project-meta span,.project-detail .project-meta span{background:#2a2c2a}
  /* Article content */
  .article-content{background:#1e201e}
  .article-content h1,.article-content .article-body h2,.article-content .article-body h3{color:#e0e0e0}
  .project-detail{background:#1e201e}
  .project-detail h1{color:#e0e0e0}
  /* Footer — already dark, minor tweaks */
  .site-footer{background:#0a0c0a}
  /* Breadcrumbs */
  .breadcrumb{color:#aaa}
  /* News featured */
  .news-featured-body h2{color:#e0e0e0}
  /* HR */
  hr{border-top-color:var(--primary)}
  /* Scroll arrow */
  .scroll-arrow svg{stroke:#fff}
  /* CTA banner — darken further */
  .cta-banner{background:#0a0c0a}
  /* Location detail */
  .location-detail-services a{color:#e0e0e0;border-color:var(--primary)}
  /* Split sections */
  .split-text h2{color:#e0e0e0}
  /* Section white override */
  .section-white{background:#1e201e}
  /* Mobile menu — slightly lighter for contrast */
  .mobile-menu{background:#1e201e}
  /* Contact btn in dark header */
  .header-contact-btn{background:var(--primary);color:#000}
  /* Stat labels */
  .stat-label{color:#aaa}
  /* News featured body text */
  .news-featured-body p{color:#aaa}
  /* Filter btn active state */
  .filter-btn.active{background:var(--primary);color:#000}
  /* Form labels and notes */
  .form-note{color:#888}
  /* Service card link color */
  .service-card-link{color:var(--primary)}
  /* Location phone link */
  .location-card .location-phone{color:var(--primary)}
  .location-card .location-avail{color:#888}
  /* Testimonial role */
  .testimonial-role{color:#888}
  /* Project detail body */
  .project-detail .project-body{color:#ccc}
  /* Article body text */
  .article-content .article-body{color:#ccc}
  .article-content .article-body p{color:#ccc}
  .article-content .article-body li{color:#ccc}
  /* Blockquote */
  .blockquote{color:#ccc}
  /* Section dark btn hover — white on dark bg */
  .section-dark .btn-primary:hover,.cta-banner .btn-primary:hover{background:#333;color:#fff;border-color:#333}
  /* Generic paragraph text */
  p{color:#ccc}
  .section-dark p{color:rgba(255,255,255,.85)}
  .cta-banner p{color:rgba(255,255,255,.8)}
  .hero-content p{color:rgba(255,255,255,.9)}
  .footer-col a{color:rgba(255,255,255,.6)}
}