/* NAR v1.11 — Glass header, earth-tone palette, testimonial cards, studio statement and footer refinement. */
:root{
  --nar-olive:#52683C;
  --nar-teal:#619FAE;
  --nar-vermilion:#EC4A33;
  --nar-mustard:#DAC747;
  --nar-sage:#B4C2B1;
  --nar-brown:#5A402D;
  --nar-cream:#EFEEDA;
  --nar-glass-dark:rgba(22,24,20,.58);
  --nar-glass-light:rgba(239,238,218,.52);
  --nar-glass-border:rgba(239,238,218,.24);
}

/* Palette bridge: replace the old purple / lime accent system without rewriting the vendor stylesheet. */
body{background:#161616;color:var(--nar-cream)}
body .sub-bg{background:var(--nar-olive)}
body .sub-bg2{background:var(--nar-sage)}
.bg-light{background:var(--nar-cream)!important;color:var(--nar-brown)!important}
.bg-light p{color:var(--nar-brown)!important}
.main-color{color:var(--nar-mustard)!important}
.main-colorbg{background-color:var(--nar-mustard)!important}
.main-color2{color:var(--nar-teal)!important}
.main-colorbg2{background-color:var(--nar-teal)!important}

body.light{background:var(--nar-cream);color:var(--nar-brown)}
body.light .sub-bg{background:var(--nar-olive)}
body.light .sub-bg2{background:var(--nar-sage)}
body.light .bg-light{background:var(--nar-brown)!important;color:var(--nar-cream)!important}
body.light .bg-light p{color:var(--nar-cream)!important}
body.light .bg-light.main-colorbg{background:var(--nar-mustard)!important;color:var(--nar-brown)!important}
body.light .bg-light.main-colorbg2{background:var(--nar-teal)!important;color:var(--nar-brown)!important}
body.light .navbar .nav-link{color:var(--nar-brown)!important}
body.light .navbar .icon-bar{color:var(--nar-brown)!important}
body.light .navbar .logo,
body.light .navbar .navbar-nav,
body.light .navbar .dark-mode-icon .theme-icon,
body.light .navbar .container{
  background:var(--nar-glass-light)!important;
  border-color:rgba(90,64,45,.18)!important;
  color:var(--nar-brown)!important;
}
body.light .navbar .logo:before,
body.light .navbar .navbar-nav:before,
body.light .navbar .dark-mode-icon .theme-icon:before{
  background:linear-gradient(90deg,transparent,rgba(90,64,45,.38),transparent);
}

::selection{background:var(--nar-mustard);color:var(--nar-brown)}
::-moz-selection{background:var(--nar-mustard);color:var(--nar-brown)}

/* -------------------- Floating glass header -------------------- */
.navbar,
.navbar.nav-scroll{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:16px!important;
  width:100%!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  transform:none!important;
  transition:top .45s ease,opacity .35s ease!important;
  z-index:100001!important;
}
.navbar .container{
  position:relative;
  width:min(1440px,calc(100% - 32px))!important;
  max-width:none!important;
  padding:0!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px;
}
.navbar .logo,
.navbar .navbar-nav,
.navbar .dark-mode-icon .theme-icon{
  position:relative;
  border:1px solid var(--nar-glass-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 50px rgba(0,0,0,.16)!important;
}
.navbar .logo,
.navbar .navbar-nav{
  background:var(--nar-glass-dark)!important;
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
}
.navbar .logo{
  width:126px!important;
  max-width:126px!important;
  height:52px;
  margin:0!important;
  padding:0 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:28px!important;
  overflow:hidden;
}
.navbar .logo:after{display:none!important}
.navbar .logo img{width:100%;height:auto;display:block}
.navbar .navbar-nav{
  margin:0!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
}
.navbar .navbar-nav .nav-link{
  margin:0 8px!important;
  padding:13px 9px 11px!important;
  color:var(--nar-cream)!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
}
.navbar .navbar-nav .nav-link:hover{color:var(--nar-mustard)!important}
.navbar .dark-mode-icon{display:flex!important;align-items:center}
.navbar .dark-mode-icon .theme-icon{
  width:52px!important;
  height:52px!important;
  padding:0!important;
  border-radius:50%!important;
  background:var(--nar-glass-dark)!important;
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  color:var(--nar-cream)!important;
}
.navbar .dark-mode-icon .theme-icon:hover{border-color:rgba(236,74,51,.5)!important;color:var(--nar-vermilion)!important}
.navbar .navbar-toggler{display:none}

/* Fine top reflection on each glass capsule. */
.navbar .logo:before,
.navbar .navbar-nav:before,
.navbar .dark-mode-icon .theme-icon:before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  pointer-events:none;
  opacity:.8;
}

@media(max-width:991px){
  .navbar,.navbar.nav-scroll{top:12px!important}
  .navbar .container{
    width:calc(100% - 24px)!important;
    padding:6px 8px!important;
    gap:8px!important;
    border-radius:32px!important;
    background:var(--nar-glass-dark)!important;
    border:1px solid var(--nar-glass-border)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 55px rgba(0,0,0,.2)!important;
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
  }
  .navbar .logo{
    width:98px!important;
    max-width:98px!important;
    height:42px!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    padding:0 7px!important;
  }
  .navbar .navbar-toggler{
    display:flex!important;
    order:3!important;
    position:relative!important;
    z-index:100003!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(239,238,218,.16)!important;
    border-radius:50%!important;
    background:rgba(239,238,218,.06)!important;
    color:var(--nar-cream)!important;
  }
  .navbar .navbar-toggler:focus{outline:none!important;box-shadow:none!important}
  .navbar .navbar-toggler .icon-bar{color:inherit!important}
  .navbar .dark-mode-icon{
    order:2!important;
    margin-left:auto!important;
    margin-right:2px!important;
  }
  .navbar .dark-mode-icon .theme-icon{
    width:42px!important;
    height:42px!important;
    border:0!important;
    box-shadow:none!important;
    background:rgba(239,238,218,.06)!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent{
    position:fixed!important;
    inset:76px 12px 12px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:112px 28px 34px!important;
    border:1px solid rgba(239,238,218,.18)!important;
    border-radius:30px!important;
    background:rgba(20,26,22,.82)!important;
    backdrop-filter:blur(30px) saturate(135%);
    -webkit-backdrop-filter:blur(30px) saturate(135%);
    box-shadow:0 35px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16)!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent:before{
    content:"";
    position:absolute;
    top:0;
    left:12%;
    right:12%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  }
  .navbar .navbar-collapse#navbarSupportedContent .navbar-nav{
    margin:0!important;
    padding:0!important;
    display:flex!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .nav-link{color:var(--nar-cream)!important}
  .navbar .navbar-collapse#navbarSupportedContent .nav-link:hover{color:var(--nar-mustard)!important}
}

@media (prefers-reduced-transparency: reduce){
  .navbar .logo,.navbar .navbar-nav,.navbar .dark-mode-icon .theme-icon,.navbar .container,
  .navbar .navbar-collapse#navbarSupportedContent{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .navbar .logo,.navbar .navbar-nav,.navbar .dark-mode-icon .theme-icon,.navbar .container{background:var(--nar-brown)!important}
  .navbar .navbar-collapse#navbarSupportedContent{background:var(--nar-brown)!important}
  body.light .navbar .logo,body.light .navbar .navbar-nav,body.light .navbar .dark-mode-icon .theme-icon,body.light .navbar .container{background:var(--nar-cream)!important;color:var(--nar-brown)!important}
}

/* -------------------- Testimonial rain / retained staggered layout -------------------- */
.nar-features-compact{padding-top:30px!important;padding-bottom:125px!important}
.nar-features-compact .stack-title h2{color:var(--nar-cream)!important}
.nar-features-compact .item{
  position:relative;
  min-height:300px;
  padding:30px 28px!important;
  border-radius:30px!important;
  border:1px solid rgba(239,238,218,.18)!important;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16)!important;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease,border-color .45s ease!important;
}
.nar-features-compact .item:before{
  content:"“";
  position:absolute;
  top:10px;
  right:20px;
  font-family:Georgia,serif;
  font-size:92px;
  line-height:1;
  color:currentColor;
  opacity:.12;
  pointer-events:none;
}
.nar-features-compact .item:hover{
  transform:translateY(-8px) rotate(-.35deg);
  border-color:rgba(236,74,51,.55)!important;
  box-shadow:0 30px 65px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
.nar-features-compact .item .w-60px{
  width:62px!important;
  height:62px!important;
  margin-bottom:24px!important;
  border-radius:50%!important;
  overflow:hidden;
  border:2px solid rgba(239,238,218,.4);
  box-shadow:0 8px 25px rgba(0,0,0,.16);
}
.nar-features-compact .item .w-60px img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.nar-features-compact .item h6.mb-80px{
  margin-bottom:18px!important;
  font-size:11px!important;
  line-height:1.45!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  opacity:.78;
}
.nar-features-compact .item p{
  position:relative;
  z-index:1;
  max-width:30rem;
  margin:0!important;
  font-size:18px!important;
  line-height:1.48!important;
  font-weight:400;
}
.nar-features-compact .item:nth-child(5) p,
.nar-features-compact .item:nth-child(6) p{font-size:17px!important}
@media(max-width:991px){
  .nar-features-compact{padding-top:15px!important;padding-bottom:95px!important}
  .nar-features-compact .item{min-height:260px;padding:24px 22px!important}
  .nar-features-compact .item p{font-size:16px!important;line-height:1.5!important}
  .nar-features-compact .item h6.mb-80px{margin-bottom:16px!important}
}

/* Services stack: olive → mustard → cream → teal → coffee. */
#services .cardStacking__cards>.stackCard:nth-child(1)>.item{background:var(--nar-olive)!important;color:var(--nar-cream)!important}
#services .cardStacking__cards>.stackCard:nth-child(2)>.item{background:var(--nar-mustard)!important;color:var(--nar-brown)!important}
#services .cardStacking__cards>.stackCard:nth-child(3)>.item{background:var(--nar-cream)!important;color:var(--nar-brown)!important}
#services .cardStacking__cards>.stackCard:nth-child(4)>.item{background:var(--nar-teal)!important;color:var(--nar-brown)!important}
#services .cardStacking__cards>.stackCard:nth-child(5)>.item{background:var(--nar-brown)!important;color:var(--nar-cream)!important}
#services .cardStacking__cards>.stackCard>.item h2,
#services .cardStacking__cards>.stackCard>.item h6,
#services .cardStacking__cards>.stackCard>.item p,
#services .cardStacking__cards>.stackCard>.item a{color:inherit!important}
#services .tags span{border-color:currentColor!important;color:inherit!important;background:transparent!important}

/* -------------------- Studio statement -------------------- */
.nar-studio-statement{
  position:relative;
  padding:145px 0 135px;
  margin-top:10px;
  background:var(--nar-cream);
  color:var(--nar-brown);
  overflow:hidden;
}
.nar-studio-statement:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 82% 20%,rgba(97,159,174,.18),transparent 35%),radial-gradient(circle at 8% 90%,rgba(218,199,71,.16),transparent 32%);
  pointer-events:none;
}
.nar-studio-statement .container{position:relative;z-index:1}
.nar-studio-statement__meta{margin-bottom:35px}
.nar-studio-statement__meta .butn-bord-sm{border-color:rgba(90,64,45,.45)!important;color:var(--nar-brown)!important}
.nar-studio-statement__meta .butn-bord-sm:before{background:var(--nar-brown)!important}
.nar-studio-statement__copy-wrap{max-width:1220px}
.nar-studio-statement__copy{
  margin:0;
  font-size:clamp(48px,6.3vw,100px)!important;
  line-height:1.02!important;
  font-weight:400!important;
  letter-spacing:-.035em;
}
.nar-studio-statement__word{
  display:inline-block;
  margin-right:.22em;
  opacity:.12;
  transform:translateY(.35em);
  will-change:transform,opacity;
}
@media(max-width:991px){
  .nar-studio-statement{padding:100px 0 90px}
  .nar-studio-statement__copy{font-size:clamp(42px,10vw,72px)!important}
}
@media(max-width:575px){
  .nar-studio-statement{padding:78px 0 72px}
  .nar-studio-statement__copy{font-size:clamp(38px,11vw,54px)!important;line-height:1.08!important}
}

/* -------------------- Footer refinement -------------------- */
.nar-contact-footer{background:var(--nar-olive)!important;color:var(--nar-cream)!important}
.nar-footer-brand{width:min(220px,62vw)!important;margin:0!important}
.nar-footer-brand img{display:block;width:100%;height:auto!important}
.nar-contact-footer .nar-contact-footer__intro h6,
.nar-contact-footer .nar-contact-footer__intro p{color:var(--nar-cream)!important}
.nar-contact-form input:focus,
.nar-contact-form textarea:focus{border-bottom-color:var(--nar-mustard)!important}
.nar-contact-form .butn:hover,
.nar-contact-form button:hover{background:var(--nar-mustard)!important;color:var(--nar-brown)!important;border-color:var(--nar-mustard)!important}
.nar-contact-form .butn:focus-visible,
.nar-contact-form button:focus-visible{outline:2px solid var(--nar-vermilion)!important;outline-offset:3px}
.nar-contact-notice--error{border-color:rgba(236,74,51,.6)!important;background:rgba(236,74,51,.08)!important}

/* Teal / vermilion use in interactive accents. */
a:hover{color:var(--nar-vermilion)}
input:focus,textarea:focus,select:focus{box-shadow:none!important}
.nar-smart-calculator__option input:checked + span{color:var(--nar-vermilion)!important}
.nar-smart-calculator__cta:hover{background:var(--nar-vermilion)!important;border-color:var(--nar-vermilion)!important;color:var(--nar-cream)!important}

@media(prefers-reduced-motion:reduce){
  .nar-features-compact .item,.navbar{transition:none!important}
  .nar-studio-statement__word{opacity:1!important;transform:none!important}
  .nar-features-compact .item:hover{transform:none!important}
}

/* NAR v1.12 — compact mobile menu + shorter testimonial scroll. */
@media(max-width:991px){
  /* Let the menu breathe edge-to-edge instead of opening as a small floating panel. */
  .navbar .navbar-collapse#navbarSupportedContent{
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    padding:92px 26px calc(24px + env(safe-area-inset-bottom))!important;
    border-radius:0!important;
    border:0!important;
    background:rgba(20,26,22,.9)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 90px rgba(0,0,0,.25)!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .navbar-nav{
    height:100%!important;
    min-height:0!important;
    justify-content:center!important;
    gap:2px!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .nav-item{
    width:100%!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .nav-link{
    padding:6px 0!important;
    font-size:clamp(25px,7.8vw,43px)!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }
  .navbar .navbar-collapse#navbarSupportedContent .nav-link .rolling-text{
    line-height:1!important;
  }
}

/* The testimonial section keeps the original staggered card choreography, but moves through it faster. */
.nar-features-compact{
  margin-top:-18px!important;
  padding-top:0!important;
  padding-bottom:58px!important;
}
.nar-features-compact .stack-title h2{
  font-size:clamp(54px,8vw,104px)!important;
  line-height:.94!important;
  margin-bottom:20px!important;
}
.nar-features-compact .item{
  min-height:214px!important;
  padding:24px 24px!important;
}
.nar-features-compact .item.mt-60px{margin-top:28px!important}
.nar-features-compact .item.mb-60px{margin-bottom:28px!important}
.nar-features-compact .item .w-60px{
  width:54px!important;
  height:54px!important;
  margin-bottom:18px!important;
}
.nar-features-compact .item h6.mb-80px{
  margin-bottom:12px!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.nar-features-compact .item p{
  font-size:15px!important;
  line-height:1.4!important;
}

@media(max-width:991px){
  .nar-features-compact{
    margin-top:-12px!important;
    padding-top:0!important;
    padding-bottom:38px!important;
  }
  .nar-features-compact .item{
    min-height:188px!important;
    padding:20px 18px!important;
  }
  .nar-features-compact .item.mt-60px{margin-top:18px!important}
  .nar-features-compact .item.mb-60px{margin-bottom:18px!important}
  .nar-features-compact .item .w-60px{
    width:48px!important;
    height:48px!important;
    margin-bottom:14px!important;
  }
  .nar-features-compact .item h6.mb-80px{
    margin-bottom:10px!important;
    font-size:9px!important;
  }
  .nar-features-compact .item p{
    font-size:14px!important;
    line-height:1.38!important;
  }
}

@media(max-width:575px){
  .nar-features-compact{
    margin-top:-6px!important;
    padding-bottom:28px!important;
  }
  .nar-features-compact .stack-title h2{
    font-size:clamp(42px,12vw,64px)!important;
    margin-bottom:14px!important;
  }
}

@media (prefers-reduced-transparency: reduce){
  .navbar .navbar-collapse#navbarSupportedContent{background:var(--nar-brown)!important}
}