/* Shared page chrome: keeps header, footer, gutters and side panel consistent. */
:root{
  --site-paper:#f8f7f2;
  --site-ink:#17352f;
  --site-text:#44514c;
  --site-muted:#738078;
  --site-line:#d9ddd7;
  --site-footer:#203c34;
  --site-gutter:clamp(44px,calc(5vw + 20px),112px);
  --site-serif:"Cormorant Garamond",Georgia,serif;
  --site-sans:Inter,Arial,sans-serif;
}

html{scroll-behavior:smooth}
body{background:var(--site-paper);color:var(--site-ink);font-family:var(--site-sans)}
main{display:block}

html.ns-page-loading:not(.ns-page-ready) body{
  overflow:hidden;
}
html.ns-page-loading:not(.ns-page-ready) body:before{
  content:"N SQUARE VENTURES\A ARCHITECTURE  |  INTERIORS  |  CONSTRUCTION";
  position:fixed;
  inset:0;
  z-index:9998;
  background:#f8f7f2;
  color:#17352f;
  display:grid;
  place-items:center;
  white-space:pre;
  text-align:center;
  font:500 12px/2 Inter,Arial,sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
}
html.ns-page-loading:not(.ns-page-ready) body:after{
  content:"NS";
  position:fixed;
  left:50%;
  top:calc(50% - 76px);
  z-index:9999;
  width:58px;
  height:58px;
  border:1px solid rgba(23,53,47,.35);
  background-image:linear-gradient(rgba(23,53,47,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(23,53,47,.12) 1px,transparent 1px);
  background-size:14px 14px;
  color:#17352f;
  display:grid;
  place-items:center;
  font:500 24px Georgia,serif;
  transform:translate(-50%,-50%);
  animation:nsPagePulse 1.1s ease-in-out infinite;
}
@keyframes nsPagePulse{
  50%{opacity:.45;transform:translate(-50%,-50%) scale(.96)}
}

.header,
body>header{
  height:78px!important;
  display:grid!important;
  grid-template-columns:260px 1fr auto!important;
  align-items:center!important;
  padding:0 var(--site-gutter)!important;
  border-bottom:1px solid var(--site-line)!important;
  background:rgba(248,247,242,.96)!important;
  position:relative;
  z-index:20;
}

.brand{display:flex!important;align-items:center!important;gap:13px!important;font:21px var(--site-serif)!important;letter-spacing:.16em!important}
.brand small{display:block!important;font:500 10px var(--site-sans)!important;letter-spacing:.28em!important;margin-top:1px}
.mark{width:39px!important;height:39px!important;border:1px solid currentColor!important;display:grid!important;place-items:center!important;font:500 23px var(--site-serif)!important}

.nav{display:flex!important;justify-content:center!important;gap:38px!important;font:600 16px var(--site-sans)!important}
.nav a{position:relative!important;padding-bottom:0!important;border:0!important}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:1px;background:var(--site-ink);transition:.25s}
.nav a:hover:after,.nav a.active:after,.nav a.on:after,.nav a[aria-current]:after{right:0}

.head-actions,.act{display:flex!important;align-items:center!important;gap:28px!important;font:13px var(--site-sans)!important}
.inquire,.act>a{display:inline-flex!important;align-items:center!important;gap:18px!important}
.menu-dot,.dot,.site-menu-trigger{
  width:48px!important;height:48px!important;border:0!important;border-radius:50%!important;
  background:var(--site-ink)!important;color:#fff!important;display:grid!important;place-items:center!important;
  font:22px var(--site-sans)!important;cursor:pointer!important;padding:0!important;
}

.footer,
body>footer,
footer{
  padding:56px var(--site-gutter) 26px!important;
  background:var(--site-footer)!important;
  color:#f8f7f2!important;
}
.footer-main,.fm{display:grid!important;grid-template-columns:1.1fr .9fr .7fr!important;gap:44px!important;align-items:start!important}
.footer .brand,footer .brand{color:#f8f7f2!important}
.footer .mark,footer .mark{border-color:#f8f7f2!important}
.footer-tag,.tag{font:500 clamp(32px,4vw,58px)/1 var(--site-serif)!important;letter-spacing:-.015em!important;margin-top:42px!important;max-width:430px!important}
.footer-links,.links{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:14px 40px!important;font-size:14px!important}
.footer-links a,.links a{padding-bottom:10px!important;border-bottom:1px solid rgba(255,255,255,.18)!important}
.footer-contact,.fc,.contact{font-size:12px!important;line-height:1.9!important;color:rgba(248,247,242,.78)!important}
.footer-contact a,.fc a,.contact a{color:#f8f7f2!important;border-bottom:1px solid rgba(248,247,242,.4)!important;padding-bottom:2px}
.footer-bottom,.bottom{border-top:1px solid rgba(255,255,255,.18)!important;margin-top:54px!important;padding-top:20px!important;display:flex!important;justify-content:space-between!important;gap:24px!important;font-size:10px!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:rgba(248,247,242,.68)!important}

.site-scrim{position:fixed;inset:0;background:rgba(10,25,20,.28);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.site-scrim.open{opacity:1;pointer-events:auto}
.site-side{
  position:fixed;right:0;top:0;height:100%;width:min(420px,92vw);z-index:100;
  background:var(--site-ink);color:#f8f7f2;transform:translateX(102%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);padding:34px 38px;
  display:flex;flex-direction:column;
}
.site-side.open{transform:none}
.site-side-top{display:flex;align-items:flex-start;justify-content:space-between}
.site-side .brand{color:#f8f7f2!important}.site-side .mark{border-color:#f8f7f2!important}
.site-close{border:0;background:transparent;color:#fff;cursor:pointer;font:12px var(--site-sans);letter-spacing:.08em}
.site-side-label{margin-top:58px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,247,242,.72)}
.site-side-nav{margin-top:10px}
.site-side-nav a{display:grid;grid-template-columns:1fr auto;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.18);font:400 31px/1 var(--site-serif)}
.site-side-nav span{font:400 10px var(--site-sans);opacity:.72;align-self:center}
.site-side-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:end;font-size:10px;line-height:1.9;color:rgba(248,247,242,.8)}
.site-cross{width:44px;height:44px;position:relative}
.site-cross:before,.site-cross:after{content:"";position:absolute;background:rgba(255,255,255,.45)}
.site-cross:before{width:100%;height:1px;top:50%}.site-cross:after{height:100%;width:1px;left:50%}

@media(max-width:900px){
  .header,body>header{grid-template-columns:1fr auto!important}
  .nav{display:none!important}
  .footer-main,.fm{grid-template-columns:1fr!important}
  .footer-links,.links{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  :root{--site-gutter:24px}
  .header,body>header{height:70px!important}
  .brand{gap:10px!important;font-size:17px!important}
  .mark{width:34px!important;height:34px!important;font-size:21px!important}
  .head-actions .inquire,.act>a{display:none!important}
  .site-side{padding:28px 26px}
  .site-side-nav a{font-size:28px}
  .footer-bottom,.bottom{display:grid!important}
}

/* Shared reference footer */
.site-footer,
body>footer.site-footer{
  background:#153f35!important;
  color:#f4f0e7!important;
  padding:0!important;
  border-top:1px solid rgba(244,240,231,.24)!important;
  border-bottom:1px solid rgba(244,240,231,.22)!important;
}
.site-footer-grid,
.site-footer .footer-main{
  display:grid!important;
  grid-template-columns:minmax(330px,1.4fr) minmax(150px,.7fr) minmax(320px,1.08fr) minmax(300px,1fr)!important;
  gap:clamp(54px,6vw,118px)!important;
  align-items:start!important;
  min-height:520px!important;
  padding:112px var(--site-gutter) 104px!important;
}
.site-footer .brand{
  color:#f4f0e7!important;
  gap:28px!important;
  align-items:center!important;
  font:400 clamp(25px,1.85vw,34px)/1 var(--site-serif)!important;
  letter-spacing:.18em!important;
}
.site-footer .brand .mark{
  width:72px!important;
  height:72px!important;
  border-color:rgba(244,240,231,.92)!important;
  font:400 36px/1 var(--site-serif)!important;
}
.site-footer .brand small{
  margin-top:9px!important;
  font:600 12px/1 var(--site-sans)!important;
  letter-spacing:.3em!important;
}
.site-footer-brand p{
  margin:72px 0 0!important;
  max-width:440px!important;
  color:rgba(244,240,231,.66)!important;
  font:400 clamp(15px,1vw,19px)/1.7 var(--site-sans)!important;
  letter-spacing:0!important;
}
.site-footer h2{
  margin:4px 0 52px!important;
  color:rgba(244,240,231,.66)!important;
  font:700 11px/1 var(--site-sans)!important;
  letter-spacing:.34em!important;
  text-transform:uppercase!important;
}
.site-footer-col,
.site-footer .footer-links{
  display:flex!important;
  flex-direction:column!important;
  gap:31px!important;
  font-size:0!important;
}
.site-footer-col a,
.site-footer .footer-links a{
  display:block!important;
  padding:0!important;
  border:0!important;
  color:#f4f0e7!important;
  font:400 clamp(15px,1.05vw,20px)/1.25 var(--site-sans)!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.site-footer-col a:hover,
.site-footer-location a:hover{
  color:#fff!important;
}
.site-footer-location{
  color:#f4f0e7!important;
}
.site-footer-location strong{
  display:block!important;
  margin-top:0!important;
  color:#f4f0e7!important;
  font:500 clamp(32px,2.35vw,46px)/1.08 var(--site-serif)!important;
  letter-spacing:-.01em!important;
}
.site-footer-location a{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  width:min(100%,315px)!important;
  margin-top:60px!important;
  padding:0 0 15px!important;
  border:0!important;
  border-bottom:1px solid rgba(244,240,231,.22)!important;
  color:rgba(244,240,231,.66)!important;
  font:400 clamp(14px,1vw,18px)/1.25 var(--site-sans)!important;
}

/* Cross-page alignment pass */
.hero,
.expert-hero,
.jhero,
section.hero{
  border-top:0!important;
}
.copy,
.jcopy,
.expert-copy,
.hero-copy{
  min-width:0!important;
}
.copy p,
.jcopy p,
.lead,
.intro p,
.journal-head p{
  max-width:430px!important;
}
.project,
.card,
.post,
.service{
  min-width:0!important;
}
.project{
  display:block!important;
  color:inherit!important;
}
.project[hidden]{
  display:none!important;
}
.filters button.on,
.filters button.active{
  border-bottom:2px solid var(--site-ink)!important;
  color:var(--site-ink)!important;
  font-weight:600!important;
}
.card-image img,
.media img,
.post img,
.service img,
.heroimg img,
.photo img,
.jimage img{
  display:block!important;
}
.site-footer .footer-contact,
.site-footer-location{
  font-size:inherit!important;
  line-height:normal!important;
}
.site-footer .footer-links{
  grid-template-columns:1fr!important;
}
.site-footer .footer-bottom,
.site-footer .bottom,
.site-footer .footer-tag,
.site-footer .tag{
  display:none!important;
}

@media(max-width:1100px){
  .site-footer-grid,
  .site-footer .footer-main{
    grid-template-columns:1fr 1fr!important;
    min-height:0!important;
    gap:46px 58px!important;
    padding-top:62px!important;
    padding-bottom:62px!important;
  }
  .site-footer-brand p{margin-top:36px!important}
}
@media(max-width:900px){
  .hero,
  .expert-hero,
  .jhero,
  section.hero{
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
  }
  .copy,
  .jcopy,
  .expert-copy,
  .hero-copy{
    min-height:0!important;
    padding-top:46px!important;
    padding-bottom:46px!important;
  }
  .heroimg,
  .photo,
  .jimage{
    min-height:360px!important;
    height:360px!important;
  }
  .panel,
  .feature{
    min-height:300px!important;
  }
}
@media(max-width:680px){
  .site-footer-grid,
  .site-footer .footer-main{
    grid-template-columns:1fr!important;
    gap:36px!important;
    padding-top:48px!important;
    padding-bottom:50px!important;
  }
  .site-footer .brand{
    gap:14px!important;
    font-size:24px!important;
  }
  .site-footer .brand .mark{
    width:58px!important;
    height:58px!important;
    font-size:32px!important;
  }
  .site-footer .brand small{
    margin-top:8px!important;
    font-size:12px!important;
  }
  .site-footer-brand p{
    margin-top:28px!important;
    font-size:17px!important;
  }
  .site-footer h2{
    margin-bottom:20px!important;
    font-size:13px!important;
  }
  .site-footer-col{gap:16px!important}
  .site-footer-col a,
  .site-footer .footer-links a{
    font-size:18px!important;
  }
  .site-footer-location strong{
    font-size:32px!important;
  }
  .site-footer-location a{
    margin-top:26px!important;
    font-size:17px!important;
  }
}
@media(max-width:560px){
  .copy h1,
  .jcopy h1,
  .expert-copy h1,
  .hero-copy h1{
    font-size:clamp(46px,13vw,60px)!important;
  }
  .heroimg,
  .photo,
  .jimage{
    min-height:300px!important;
    height:300px!important;
  }
  .locart span{
    font-size:clamp(24px,8vw,34px)!important;
    text-align:center!important;
    padding:0 20px!important;
  }
}

.cms-image-shell{
  position:relative;
  overflow:hidden;
  background:#e6e8e2;
  isolation:isolate;
}
.cms-image-shell:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(105deg,#dde2dc 0%,#f8f7f2 42%,#e1e5df 74%);
  background-size:240% 100%;
  animation:cmsImageLoading 1.35s ease-in-out infinite;
  transition:opacity .35s ease;
}
.cms-lazy-image{
  position:relative;
  z-index:1;
  opacity:0;
  transform:scale(1.012);
  transition:opacity .42s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.cms-lazy-image.is-loaded{
  opacity:1;
  transform:none;
}
.cms-image-shell:has(.cms-lazy-image.is-loaded):before{
  opacity:0;
  animation:none;
}
.cms-lazy-image.is-broken{
  background:#e6e8e2;
}
.post-image{
  display:block;
}
.detail-gallery .cms-image-shell{
  display:block;
}
.post-image img{
  height:260px;
  object-fit:cover;
  filter:saturate(.78);
}
@keyframes cmsImageLoading{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
@media(max-width:600px){
  .post-image img{height:240px}
}
@media(prefers-reduced-motion:reduce){
  .cms-image-shell:before{animation:none}
}
