/* NAR v1.13 — Social reel carousel: deferred video loading + glass navigation. */
.nar-showcase-carousel{padding:120px 0 0;overflow:hidden}
.nar-showcase-carousel>.container-fluid{width:100%;max-width:none;padding:0}
.nar-showcase-carousel__head{width:min(1440px,calc(100% - 60px));margin:0 auto 55px}
.nar-showcase-carousel__track{width:100%;overflow:visible;cursor:grab}
.nar-showcase-carousel__track:active{cursor:grabbing}
.nar-showcase-carousel .swiper-wrapper{align-items:stretch}
.nar-showcase-carousel .swiper-slide{width:min(28vw,420px);flex:0 0 min(28vw,420px)}
.nar-social-card{width:100%}
.nar-social-card__media{height:560px;background:#111;position:relative;overflow:hidden}
.nar-social-card__video,.nar-social-card__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nar-social-card__video{background:#111}
.nar-social-card__instagram{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(22,22,22,.55);backdrop-filter:blur(12px) saturate(125%);-webkit-backdrop-filter:blur(12px) saturate(125%);border:1px solid rgba(239,238,218,.28);box-shadow:0 8px 22px rgba(0,0,0,.16);color:#EFEEDA;font-size:20px;z-index:2;text-decoration:none;transition:transform .3s ease,background .3s ease,border-color .3s ease,color .3s ease}
.nar-social-card__instagram:hover{transform:scale(1.06);background:rgba(82,104,60,.72);border-color:rgba(218,199,71,.65);color:#fff}
.nar-social-card__caption{display:flex;align-items:baseline;justify-content:space-between;gap:15px}
.nar-social-card__caption span{opacity:.6}
.nar-showcase-carousel__controls{width:min(1440px,calc(100% - 60px));margin:25px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nar-showcase-carousel__hint{text-align:left;text-transform:uppercase;font-size:12px;opacity:.55}
.nar-showcase-carousel__hint span{margin-left:8px}
.nar-showcase-carousel__nav{display:flex;align-items:center;gap:10px}
.nar-showcase-carousel__arrow{width:48px;height:48px;border-radius:999px;border:1px solid rgba(239,238,218,.28);background:rgba(22,22,22,.42);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);color:#EFEEDA;display:flex;align-items:center;justify-content:center;font:inherit;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.14);transition:transform .3s ease,background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease}
.nar-showcase-carousel__arrow:hover{transform:translateY(-2px);background:rgba(82,104,60,.78);border-color:rgba(218,199,71,.72);color:#fff}
.nar-showcase-carousel__arrow:focus-visible{outline:2px solid #DAC747;outline-offset:4px}
.nar-showcase-carousel__arrow.swiper-button-disabled{opacity:.35;cursor:default;transform:none}
.nar-showcase-carousel__arrow span{display:block;transform:translateY(-1px)}
.nar-site-footer{width:100%;max-width:none;margin:110px 0 0}

.nar-site-footer>.sub-bg{width:100%}
.nar-parallax-media{margin-top:0}
.nar-parallax-media>div{position:relative;overflow:hidden}
.nar-parallax-media__image{position:relative;z-index:0}
.nar-parallax-media__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.nar-feature-grid .item{min-height:300px;padding:32px;border-radius:24px}
.nar-smart-calculator{width:100%;padding:135px 0 0}
.nar-smart-calculator>.container{max-width:1480px;width:calc(100% - 60px)}
.nar-smart-calculator__head{margin-bottom:60px}
.nar-smart-calculator__form>.row{align-items:stretch;margin-left:-12px;margin-right:-12px}
.nar-smart-calculator__form>.row>[class*="col-"]{padding-left:12px;padding-right:12px}
.nar-smart-calculator__intro{height:100%;min-height:560px;display:flex;flex-direction:column;padding:42px!important}
.nar-smart-calculator__questions{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nar-smart-calculator__question{height:100%;padding:28px!important;border-radius:26px}
.nar-smart-calculator__question-head h5{font-size:21px}
.nar-smart-calculator__option{min-height:54px}
.nar-smart-calculator__result{margin-top:auto}
.nar-smart-calculator__result strong{font-size:58px}
.nar-smart-calculator__cta{margin-top:22px}
@media(max-width:1199px){
    .nar-showcase-carousel .swiper-slide{width:42vw;flex-basis:42vw}
    .nar-smart-calculator__questions{grid-template-columns:1fr}
    .nar-smart-calculator__intro{min-height:0}
}
@media(max-width:991px){
    .nar-showcase-carousel{padding-top:95px}
    .nar-showcase-carousel__head,.nar-showcase-carousel__controls{width:calc(100% - 40px)}
    .nar-showcase-carousel .swiper-slide{width:72vw;flex-basis:72vw}
    .nar-social-card__media{height:500px}
    .nar-smart-calculator{padding-top:95px}
    .nar-smart-calculator>.container{width:calc(100% - 40px)}
    .nar-site-footer{margin-top:80px}
}
@media(max-width:575px){
    .nar-showcase-carousel{padding-top:75px}
    .nar-showcase-carousel__head,.nar-showcase-carousel__controls{width:calc(100% - 30px)}
    .nar-showcase-carousel .swiper-slide{width:88vw;flex-basis:88vw}
    .nar-social-card__media{height:440px}
    .nar-showcase-carousel__controls{flex-direction:row;align-items:center}
    .nar-showcase-carousel__hint{font-size:10px}
    .nar-showcase-carousel__arrow{width:44px;height:44px;font-size:19px}
    .nar-showcase-carousel .item .cont h6{font-size:16px}
    .nar-showcase-carousel .item .cont span{opacity:1}
    .nar-showcase-carousel .nar-showcase-card__media:after{opacity:1}
    .nar-smart-calculator{padding-top:75px}
    .nar-smart-calculator>.container{width:calc(100% - 30px)}
    .nar-smart-calculator__intro{padding:25px!important}
    .nar-smart-calculator__question{padding:22px!important;border-radius:24px}
    .nar-site-footer{margin-top:65px}
}

/* Every Home section is an anchor target; keep it clear of the fixed navbar. */
html{scroll-behavior:smooth}
#home,#who-we-are,#services,#what-we-do,#interactive-demos,#smart-calculator,#contact{scroll-margin-top:110px}

/* Responsive refinement */
@media(max-width:575px){
 #who-we-are.intro-style1{padding:0!important;margin:0!important}
 #who-we-are.intro-style1 .sec-head{margin-bottom:35px!important}
 #who-we-are.intro-style1 .fit-vid,#who-we-are.intro-style1 .box-bord{display:block!important;float:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
 #who-we-are.intro-style1 .fit-vid{margin-bottom:20px!important}
 #services.serv-style2{padding-top:55px!important}
 .nar-smart-calculator__option{display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;gap:12px!important;white-space:normal!important;writing-mode:horizontal-tb!important}
 .nar-smart-calculator__option input{flex:0 0 20px!important;width:20px!important;min-width:20px!important;height:20px!important;margin:0!important}
 .nar-smart-calculator__option span{display:block!important;position:static!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;writing-mode:horizontal-tb!important;word-break:normal!important;overflow-wrap:anywhere!important;white-space:normal!important;line-height:1.35!important}
 .nar-smart-calculator__question-head h5{font-size:22px!important;line-height:1.15!important}
 .nar-smart-calculator__question-head p{line-height:1.45!important}
 .nar-smart-calculator__questions{gap:14px!important}
 .nar-smart-calculator__question{height:auto!important}
 .nar-contact-footer{border-radius:24px!important}
 .nar-contact-form label{display:block!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.06em!important;margin-bottom:18px!important}
 .nar-contact-form input,.nar-contact-form textarea{display:block!important;width:100%!important;box-sizing:border-box!important;margin-top:8px!important;padding:13px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.22)!important;background:transparent!important;color:inherit!important;border-radius:0!important;outline:0!important}
 .nar-contact-form textarea{resize:vertical!important;min-height:100px!important}
 .nar-contact-footer .links ul{gap:12px 0!important}.nar-contact-footer .links li{margin-right:20px!important}.nar-contact-footer .copyright{margin-top:20px}
}
@media(min-width:576px){
 .nar-contact-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:24px}
 .nar-contact-form input,.nar-contact-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:9px;padding:13px 0;border:0;border-bottom:1px solid rgba(255,255,255,.22);background:transparent;color:inherit;border-radius:0;outline:0}
 .nar-contact-form textarea{resize:vertical;min-height:120px}
}
.nar-contact-form input:focus,.nar-contact-form textarea:focus{border-bottom-color:currentColor}
.nar-contact-notice{padding:14px 18px;border:1px solid rgba(255,255,255,.15);border-radius:14px;margin-bottom:24px;font-size:13px}.nar-contact-notice--success{background:rgba(255,255,255,.04)}.nar-contact-notice--error{border-color:rgba(255,100,100,.4)}
.nar-site-footer{margin-top:130px!important}@media(max-width:991px){.nar-site-footer{margin-top:95px!important}}@media(max-width:575px){.nar-site-footer{margin-top:75px!important}}

@media(max-width:991px){.nar-parallax-media .h-700px{height:70svh!important;min-height:420px}.nar-parallax-media .h-800px{height:78svh!important;min-height:470px}}

/* NAR v1.8.2 — compact hero marquee without changing the hero layout or flow. */
.nar-hero>.main-marq.xlrg{margin-top:40px!important}
.nar-hero>.main-marq.xlrg .box .item{padding-left:18px!important;padding-right:18px!important}
.nar-hero>.main-marq.xlrg .box .item h4{font-size:clamp(28px,5vw,76px)!important;line-height:1.05!important}
.nar-hero>.main-marq.xlrg .box .item .w-50px{width:32px!important}
.nar-hero>.main-marq.xlrg .box .item .w-50px svg{width:32px!important;height:32px!important}
@media(max-width:575px){
  .nar-hero>.main-marq.xlrg{margin-top:30px!important}
  .nar-hero>.main-marq.xlrg .box .item{padding-left:12px!important;padding-right:12px!important}
  .nar-hero>.main-marq.xlrg .box .item h4{font-size:clamp(24px,7.5vw,38px)!important}
  .nar-hero>.main-marq.xlrg .box .item .w-50px{width:26px!important}
  .nar-hero>.main-marq.xlrg .box .item .w-50px svg{width:26px!important;height:26px!important}
}

/* NAR v1.9 — Hero = full-screen STAGE (background/video + title) followed by marquee + works below the fold.
   The stage is exactly one screen tall; on first paint only the title is visible. */
.nar-hero{position:relative;box-sizing:border-box;height:auto!important;min-height:0!important;padding:0 0 120px!important;background:#161616!important}
/* Background layers now belong to the stage, not to the whole hero. */
.nar-hero:before,.nar-hero:after{display:none!important}
.nar-hero__stage{--nar-hero-fade:50%;position:relative;box-sizing:border-box;width:100%;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px 0 70px}
.nar-hero__stage:before{content:"";position:absolute;inset:0;background:#141414;opacity:.5;z-index:1;pointer-events:none}
.nar-hero__stage:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--nar-hero-fade);background:linear-gradient(transparent,#161616);z-index:2;pointer-events:none}
.nar-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.nar-hero__stage>.container{position:relative;z-index:7;width:100%}
.nar-hero>.main-marq,.nar-hero>.portfolio-elegant{position:relative;z-index:2}
.nar-hero>.main-marq{width:100%;max-width:none}
@media(max-width:575px){.nar-hero__stage{padding:120px 0 90px}}
.nar-hero>.main-marq .slide-har{width:max-content;min-width:100%}
.nar-hero>.main-marq .box{width:max-content;flex:0 0 auto}
.nar-hero>.main-marq .box .item{flex:0 0 auto}
@media(min-width:576px){.nar-hero .caption h1{white-space:nowrap;max-width:none}}

/* Mobile menu: fullscreen panel using the same existing site color. */
@media(max-width:991px){
  body.nar-menu-is-open{overflow:hidden!important}
  .navbar{z-index:100001!important}
  .navbar .navbar-toggler{position:relative!important;z-index:100002!important;pointer-events:auto!important;cursor:pointer!important}
  .navbar .navbar-collapse#navbarSupportedContent{
    position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:none!important;
    margin:0!important;padding:105px 30px 50px!important;border:0!important;border-radius:0!important;
    background:#161616!important;color:#fff!important;display:block!important;overflow-y:auto!important;overflow-x:hidden!important;
    opacity:0;visibility:hidden;transform:translateY(-22px);pointer-events:none!important;
    transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s;
    z-index:100000!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open{
    opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;transition-delay:0s!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .navbar-nav{display:flex!important;flex-direction:column!important;align-items:flex-start!important;width:100%!important;gap:0!important;margin:0!important;padding:0!important}
  .navbar .navbar-collapse#navbarSupportedContent .nav-item{width:100%!important;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item{opacity:1;transform:none}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(1){transition-delay:.06s}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(2){transition-delay:.12s}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(3){transition-delay:.18s}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(4){transition-delay:.24s}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(5){transition-delay:.30s}
  .navbar .navbar-collapse#navbarSupportedContent.nar-mobile-menu-open .nav-item:nth-child(6){transition-delay:.36s}
  .navbar .navbar-collapse#navbarSupportedContent .nav-link{display:block!important;width:100%!important;padding:11px 0!important;margin:0!important;background:transparent!important;color:#fff!important;font-size:clamp(34px,10vw,58px)!important;line-height:1.08!important;text-transform:uppercase!important;letter-spacing:0!important}
  .navbar .navbar-collapse#navbarSupportedContent .nav-link .rolling-text{display:block!important;height:auto!important;line-height:1.08!important;overflow:visible!important;color:#fff!important}
  .navbar .navbar-collapse#navbarSupportedContent .nav-link .rolling-text .block:nth-child(n+2){display:none!important}
  .navbar .navbar-collapse#navbarSupportedContent .nav-link .rolling-text .letter{transform:none!important}
}

/* Keep the original desktop Services stack and run the same ScrollTrigger behavior on mobile. */
@media(max-width:991px){
  #services .cardStacking__cards{position:relative}
  #services .stackCard{will-change:transform}
}

/* Final refinement: menu trigger remains clickable above the fullscreen panel. */
@media(max-width:991px){
  .navbar{z-index:100001!important}
  .navbar .navbar-toggler{pointer-events:auto!important;cursor:pointer!important;position:relative!important;z-index:100002!important}
  .navbar .navbar-collapse#navbarSupportedContent{z-index:100000!important}
}

/* Mobile Services: the pins end at the last card (pinSpacing:false), so no extra bottom padding is needed. */
@media(max-width:991px){
  #services .cardStacking__cards{padding-bottom:0!important}
}


/* NAR v1.10 — Hero fade handoff, five-up Featured Works and compact editable feature cards. */
.nar-hero__stage{overflow:visible!important}
.nar-hero__stage:after{bottom:-70px!important;height:190px!important;background:linear-gradient(to bottom,rgba(22,22,22,0),#161616 78%,#161616 100%)!important;z-index:2!important}
.nar-hero>.main-marq{z-index:3!important}

@media(min-width:992px){
  .nar-hero>.portfolio-elegant{margin-top:55px!important}
  .nar-hero>.portfolio-elegant>.container{width:100%!important;max-width:none!important;padding-left:20px!important;padding-right:20px!important}
  .nar-hero>.portfolio-elegant .work-boxs{display:flex!important;align-items:flex-start;gap:10px;width:100%}
  .nar-hero>.portfolio-elegant .item,
  .nar-hero>.portfolio-elegant .item.active{
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    flex:1 1 0!important;
    padding:0!important;
    transition:flex .7s ease,transform .45s ease;
  }
  .nar-hero>.portfolio-elegant .item.active{flex:1.65 1 0!important}
  .nar-hero>.portfolio-elegant .item .bg-img,
  .nar-hero>.portfolio-elegant .item.active .bg-img{height:clamp(360px,29vw,460px)!important}
  .nar-hero>.portfolio-elegant .item .cont{padding-left:5px;padding-right:5px}
}

.nar-features-compact{padding-bottom:120px!important}
.nar-features-compact .item{padding:30px 26px!important;background:var(--nar-feature-bg,#1C1C1C)!important;color:var(--nar-feature-text,#FFFFFF)!important}
.nar-features-compact .item h1,
.nar-features-compact .item h2,
.nar-features-compact .item h3,
.nar-features-compact .item h4,
.nar-features-compact .item h5,
.nar-features-compact .item h6,
.nar-features-compact .item p,
.nar-features-compact .item span,
.nar-features-compact .item a,
.nar-features-compact .item li,
.nar-features-compact .item .main-color{color:var(--nar-feature-text,#FFFFFF)!important}
.nar-features-compact .mt-60px{margin-top:42px!important}
.nar-features-compact .mb-60px{margin-bottom:42px!important}
.nar-features-compact .w-60px{margin-bottom:22px!important}
.nar-features-compact .item h6.mb-80px{margin-bottom:52px!important}

@media(max-width:991px){
  .nar-features-compact{padding-top:105px!important;padding-bottom:95px!important}
  .nar-features-compact .item{padding:28px 22px!important}
  .nar-features-compact .mt-60px{margin-top:35px!important}
  .nar-features-compact .mb-60px{margin-bottom:35px!important}
}