/* NOVA + Elementor compatibility. Keep the original front-end geometry intact. */
.elementor-page main#top > .elementor{width:100%;}
.elementor-page .elementor-section.nova-el-shell{padding:0!important;margin:0!important;width:100%!important;max-width:none!important;}
.elementor-page .elementor-section.nova-el-shell>.elementor-container{max-width:none!important;width:100%!important;}
.elementor-page .elementor-section.nova-el-shell .elementor-column-gap-default>.elementor-column>.elementor-element-populated,
.elementor-page .elementor-section.nova-el-shell .elementor-column>.elementor-element-populated{padding:0!important;}
.elementor-page .elementor-section.nova-el-shell .elementor-widget-wrap{padding:0!important;}
.elementor-page .elementor-section.nova-el-shell .elementor-widget{margin:0!important;width:100%!important;max-width:none!important;}
.elementor-page .elementor-section.nova-el-shell .elementor-widget-container{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;}
.elementor-page .nova-el-shell .portfolio.section,
.elementor-page .nova-el-shell .about.section,
.elementor-page .nova-el-shell .services.section,
.elementor-page .nova-el-shell .contact.section{width:100%!important;max-width:none!important;}

/* Elementor and some themes use generic .grid rules. Force NOVA's exact portfolio grid. */
.elementor-page .nova-el-shell .portfolio-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:1220px!important;margin-left:auto!important;margin-right:auto!important;align-items:stretch!important;}
.elementor-page .nova-el-shell .portfolio-grid>.work{display:block;min-width:0!important;width:auto!important;min-height:260px!important;margin:0!important;}
.elementor-page .nova-el-shell .work-img{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;}
.elementor-page .nova-el-shell .filters{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;}
.elementor-page .nova-el-shell .service-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}

/* Counter rendering */
.nova-counter{display:block;color:var(--gold2);font:800 42px Manrope,sans-serif;line-height:1.15;}
.elementor-editor-active .nova-counter{opacity:1!important;}
.elementor-editor-active .reveal{opacity:1!important;transform:none!important;}

@media (max-width:900px){
 .elementor-page .nova-el-shell .portfolio-grid,.elementor-page .nova-el-shell .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media (max-width:600px){
 .elementor-page .nova-el-shell .portfolio-grid,.elementor-page .nova-el-shell .service-grid{grid-template-columns:1fr!important;}
 .elementor-page .nova-el-shell .portfolio-grid>.work{min-height:300px!important;}
 .nova-counter{font-size:34px;}
}

/* ================================================================
   v5 — TRUE FULL-WIDTH + RESPONSIVE HARDENING
   Elementor/the page wrapper must never constrain the NOVA sections.
   ================================================================ */
html,
body,
body.elementor-page,
body.elementor-default{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:hidden!important;
}

body.elementor-page #top,
body.elementor-default #top,
main#top{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Elementor legacy section structure */
body.elementor-page #top > .elementor,
body.elementor-page #top > .elementor > .elementor-inner,
body.elementor-page #top > .elementor > .elementor-inner > .elementor-section-wrap,
body.elementor-page #top .elementor-section-wrap{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

body.elementor-page #top .nova-el-shell,
body.elementor-page #top section.nova-el-shell{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

body.elementor-page #top .nova-el-shell > .elementor-container,
body.elementor-page #top .nova-el-shell > .e-con-inner,
body.elementor-page #top .nova-el-shell.e-con,
body.elementor-page #top .nova-el-shell .e-con{
  --container-max-width:100%;
  --content-width:100%;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

body.elementor-page #top .nova-el-shell .elementor-column,
body.elementor-page #top .nova-el-shell .elementor-widget-wrap,
body.elementor-page #top .nova-el-shell .elementor-element,
body.elementor-page #top .nova-el-shell .elementor-widget,
body.elementor-page #top .nova-el-shell .elementor-widget-container{
  max-width:none!important;
  min-width:0!important;
}

/* Every NOVA section paints edge-to-edge; only its inner content is capped. */
body.elementor-page #top .nova-el-shell .hero,
body.elementor-page #top .nova-el-shell .section{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

.nav{
  width:100%!important;
  max-width:none!important;
}

/* Tablet */
@media (max-width:900px){
  .nav{height:68px;padding:0 22px!important;}
  .logo span{font-size:24px;}
  .nav.open nav{
    top:68px!important;
    width:100%!important;
    max-width:none!important;
    padding:24px 22px 30px!important;
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
  }
  .hero{min-height:100dvh;}
  .hero-content{width:calc(100% - 44px)!important;max-width:760px!important;padding-top:96px!important;}
  .hero h1{font-size:clamp(40px,8.2vw,66px)!important;}
  .section{padding:92px 28px!important;}
  .split,.contact-grid{width:100%!important;max-width:760px!important;}
  .portfolio-grid,.service-grid{width:100%!important;max-width:760px!important;}
}

/* Phone */
@media (max-width:600px){
  .nav{height:64px;padding:0 18px!important;}
  .logo span{font-size:22px;}
  .logo small{font-size:8px;margin-top:5px;}
  .nav.open nav{top:64px!important;padding:22px 18px 28px!important;}
  .nav.open nav a{font-size:12px;}
  .nav-cta{width:100%;text-align:center;padding:12px 16px!important;}

  .hero{
    min-height:100dvh!important;
    align-items:center!important;
  }
  .hero-media{background-position:center center!important;}
  .hero-content{
    width:calc(100% - 36px)!important;
    max-width:none!important;
    padding-top:84px!important;
    padding-bottom:84px!important;
  }
  .eyebrow{font-size:9px!important;letter-spacing:.16em!important;margin-bottom:14px!important;}
  .hero h1{
    font-size:clamp(34px,10.8vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .lead{font-size:14px!important;line-height:1.6!important;margin:22px 0!important;max-width:100%!important;}
  .actions{width:100%!important;gap:14px!important;}
  .actions .btn{justify-content:center;max-width:100%;}
  .play i{width:42px;height:42px;}
  .scroll{bottom:15px!important;white-space:nowrap;}

  .section{padding:74px 18px!important;}
  .section-head{width:100%!important;margin-bottom:34px!important;}
  .split h2,.section-head h2{font-size:clamp(31px,9vw,42px)!important;}
  .split{gap:34px!important;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 18px!important;}
  .stats strong,.nova-counter{font-size:34px!important;}
  .stats span{font-size:9px!important;line-height:1.35!important;}

  .filters{justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:8px!important;margin-left:0!important;margin-right:0!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .filters::-webkit-scrollbar{display:none;}
  .filters button{flex:0 0 auto!important;padding:10px 16px!important;}

  body.elementor-page #top .nova-el-shell .portfolio-grid,
  body.elementor-page #top .nova-el-shell .service-grid,
  .portfolio-grid,.service-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:none!important;
    gap:12px!important;
  }
  .work{min-height:64vw!important;max-height:360px;}
  .service{min-height:0!important;padding:28px 22px!important;}
  .service p{min-height:0!important;}

  .contact-grid{gap:28px!important;}
  .contact-info{padding:0!important;}
  .contact-form{padding:22px 18px!important;}
  .contact-form input,.contact-form textarea{font-size:16px!important;} /* prevents iOS zoom */
  footer{padding:28px 18px!important;}
}

/* Small phones */
@media (max-width:420px){
  .hero-content{width:calc(100% - 30px)!important;}
  .hero h1{font-size:clamp(31px,10.2vw,41px)!important;}
  .section{padding-left:15px!important;padding-right:15px!important;}
  .stats{gap:24px 12px!important;}
  .stats strong,.nova-counter{font-size:30px!important;}
  .work{min-height:72vw!important;}
  .contact-form{padding:20px 15px!important;}
}

/* ================================================================
   v6 — VIEWPORT FULL-BLEED FIX
   Do not rely on Elementor's JS "stretch section" calculation.
   Each NOVA shell escapes any parent max-width and paints 100vw.
   ================================================================ */
body.elementor-page #top > .elementor,
body.elementor-page #top > .elementor > .elementor-element,
body.elementor-page #top .elementor-element,
body.elementor-page #top .elementor-widget,
body.elementor-page #top .elementor-widget-container {
  min-width:0;
}

body.elementor-page #top .nova-el-shell,
body.elementor-page #top section.nova-el-shell,
body.elementor-page #top .e-con.nova-el-shell {
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow:visible!important;
}

body.elementor-page #top .nova-el-shell > .elementor-container,
body.elementor-page #top .nova-el-shell > .e-con-inner,
body.elementor-page #top .nova-el-shell .elementor-column,
body.elementor-page #top .nova-el-shell .elementor-widget-wrap,
body.elementor-page #top .nova-el-shell .elementor-widget,
body.elementor-page #top .nova-el-shell .elementor-widget-container {
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Elementor can inject inline width/left values on legacy stretched sections. */
body.elementor-page #top .elementor-section-stretched.nova-el-shell {
  left:auto!important;
  right:auto!important;
  width:100vw!important;
  max-width:100vw!important;
}

/* Keep the header itself viewport-wide, while its contents remain naturally aligned. */
header.nav {
  left:0!important;
  right:0!important;
  width:100vw!important;
  max-width:100vw!important;
}

/* Mobile: avoid horizontal overflow caused by 100vw + browser scrollbar rounding. */
@supports (width: 100dvw) {
  body.elementor-page #top .nova-el-shell,
  body.elementor-page #top section.nova-el-shell,
  body.elementor-page #top .e-con.nova-el-shell,
  header.nav {
    width:100dvw!important;
    max-width:100dvw!important;
  }
  body.elementor-page #top .nova-el-shell,
  body.elementor-page #top section.nova-el-shell,
  body.elementor-page #top .e-con.nova-el-shell {
    margin-left:calc(50% - 50dvw)!important;
    margin-right:calc(50% - 50dvw)!important;
  }
}

@media (max-width:900px){
  .hero-content{width:min(760px,calc(100% - 40px))!important;}
  .section{padding-left:20px!important;padding-right:20px!important;}
  .portfolio-grid,.service-grid,.split,.contact-grid{max-width:100%!important;}
}

@media (max-width:600px){
  .hero-content{width:calc(100% - 30px)!important;}
  .section{padding-left:15px!important;padding-right:15px!important;}
  .stats{width:100%!important;}
  .contact-grid,.split{width:100%!important;}
}


/* ================================================================
   v8 — SAFE VIEWPORT ROOT
   Full-width is applied once around the Elementor document. We do NOT
   modify Elementor's flex-basis/display/position hierarchy.
   ================================================================ */
html, body { margin:0!important; padding:0!important; width:100%!important; max-width:none!important; overflow-x:hidden!important; }
main#top { width:100%!important; max-width:none!important; margin:0!important; padding:0!important; overflow:visible!important; }

/* One stable full-viewport wrapper around the entire Elementor document. */
.nova-viewport-root {
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100vw!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  overflow:visible!important;
}

/* Neutralise the older v6 per-section viewport escape. Sections are simply
   100% of the viewport root now, so there is no double stretching. */
body.elementor-page #top .nova-viewport-root .nova-el-shell,
body.elementor-page #top .nova-viewport-root section.nova-el-shell,
body.elementor-page #top .nova-viewport-root .e-con.nova-el-shell,
body.elementor-page #top .nova-viewport-root .elementor-section-stretched.nova-el-shell {
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

body.elementor-page #top .nova-viewport-root > .elementor,
body.elementor-page #top .nova-viewport-root .nova-el-shell > .elementor-container,
body.elementor-page #top .nova-viewport-root .nova-el-shell > .e-con-inner {
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Keep original NOVA inner content caps while section backgrounds span edge to edge. */
body.elementor-page #top .nova-viewport-root .hero,
body.elementor-page #top .nova-viewport-root .section {
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

header.nav { left:0!important; right:0!important; width:100%!important; max-width:none!important; }

@supports (width:100dvw) {
  .nova-viewport-root { width:100dvw!important; }
}

@media (max-width:900px) {
  .nova-viewport-root { width:100%!important; left:auto!important; transform:none!important; }
}

/* v9 – WordPress editable primary menu */
.nav nav .nova-primary-menu{
  display:flex;
  align-items:center;
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav nav .nova-primary-menu > li{margin:0;padding:0;list-style:none;}
.nav nav .nova-primary-menu > li > a{display:block;}
.nav nav .nova-primary-menu > li.nav-cta-item > a{
  border:1px solid #80651f;
  padding:11px 22px;
  border-radius:3px;
}
@media(max-width:900px){
  .nav.open nav .nova-primary-menu{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    margin:0;
    padding:0;
  }
  .nav.open nav .nova-primary-menu > li{width:100%;}
  .nav.open nav .nova-primary-menu > li.nav-cta-item > a{width:100%;text-align:center;}
}


/* ================================================================
   v16 — HOMEPAGE FULL-WIDTH SAFETY
   Target only NOVA homepage shells. No Elementor flex/display overrides.
   ================================================================ */
body.home.elementor-page #top .nova-viewport-root .nova-home-hero,
body.home.elementor-page #top .nova-viewport-root .nova-home-about,
body.home.elementor-page #top .nova-viewport-root .nova-home-portfolio,
body.home.elementor-page #top .nova-viewport-root .nova-home-services,
body.home.elementor-page #top .nova-viewport-root .nova-home-contact {
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  left:auto!important;
  right:auto!important;
}

body.home.elementor-page #top .nova-viewport-root .nova-home-hero > .elementor-container,
body.home.elementor-page #top .nova-viewport-root .nova-home-about > .elementor-container,
body.home.elementor-page #top .nova-viewport-root .nova-home-portfolio > .elementor-container,
body.home.elementor-page #top .nova-viewport-root .nova-home-services > .elementor-container,
body.home.elementor-page #top .nova-viewport-root .nova-home-contact > .elementor-container {
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Hero background/media must physically fill the viewport shell. */
body.home.elementor-page #top .nova-viewport-root .nova-home-hero .hero,
body.home.elementor-page #top .nova-viewport-root .nova-home-hero .hero-media,
body.home.elementor-page #top .nova-viewport-root .nova-home-hero .elementor-widget-container {
  width:100%!important;
  max-width:none!important;
}

/* Avoid Elementor's generated stretched-section inline left/width values. */
body.home.elementor-page #top .nova-viewport-root .nova-home-hero.elementor-section-stretched {
  left:auto!important;
  right:auto!important;
  width:100%!important;
  max-width:none!important;
}


/* v18 mobile service visual ordering */
@media (max-width: 767px) {
  body:not(.home) .nova-inner-page-root .elementor-section .elementor-container {
    display: flex !important;
  }
  body:not(.home) .nova-inner-page-root .nova-service-visual {
    order: -1 !important;
  }
}


/* v19 — REAL mobile ordering for the Services page.
   The service visuals are embedded inside Elementor HTML widgets, so detect
   those image columns directly instead of relying on non-existent custom classes. */
@media (max-width: 767px) {
  body:not(.home) .nova-inner-page-root .elementor-section > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* Any legacy Elementor column that contains the embedded service-card image
     becomes the first, full-width column on mobile. */
  body:not(.home) .nova-inner-page-root .elementor-section > .elementor-container > .elementor-column:has(.elementor-widget-html img) {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* In a two-column service row, the non-image column follows the visual. */
  body:not(.home) .nova-inner-page-root .elementor-section > .elementor-container:has(> .elementor-column .elementor-widget-html img) > .elementor-column:not(:has(.elementor-widget-html img)) {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Remove desktop-side spacing from the service pair only on mobile. */
  body:not(.home) .nova-inner-page-root .elementor-section > .elementor-container:has(> .elementor-column .elementor-widget-html img) > .elementor-column > .elementor-element-populated {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}