/* Nour Nagy 2026 modules — v2.2.0
   Header/footer glass, CSS-3D service overlay, portfolio filters, fit-out calculator.
   Token-safe: consumes existing --cream/--ink/--bronze vars; no palette changes.
   Every motion block has a prefers-reduced-motion fallback at the foot of its section. */

/* ===== HEADER (glass) ===== */
/* Always-on warm-white glass bar (base `nav` only glassed on scroll). */
#main-nav{
  background:rgba(246,242,236,.72);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  border-bottom:1px solid rgba(26,24,21,.06);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
}
/* Shrink state: tighter padding, deeper glass. */
#main-nav.sc{
  background:rgba(246,242,236,.82);
  padding-top:.85rem;padding-bottom:.85rem;
  border-color:rgba(26,24,21,.1);
}
/* v4.11.0 — the glass above is 82% cream, so whatever sits behind the nav bleeds
   through it. Over a dark band (the 600vh hero video, #s-stmt, #s-stats) it blends to
   ~#cdcac4, and the bronze .nav-cta label reads 3.29:1 — under the 4.5:1 WCAG 2.2 AA
   floor. Giving the button its own opaque fill fixes the ratio at 4.56:1 no matter what
   is behind it, on every page and every band.
   Scoped to .sc on purpose: unscrolled over the hero the nav is not glass, the label is
   #f6f1e9 on near-black (17.6:1), and the button stays the outlined transparent pill the
   client approved. The fill only appears once the bar is already cream. */
#main-nav.sc .nav-cta{background:var(--surface)}

/* ND monogram mark left of the wordmark. */
#main-nav .nav-logo{display:inline-flex;align-items:center}
.nav-mark{
  height:26px;width:auto;display:inline-block;
  vertical-align:middle;margin-right:.6rem;
  transition:height .4s var(--ease);
}
#main-nav.sc .nav-mark{height:22px}

/* Wordmark letters ripple/pop on logo hover. */
.nl-word{display:inline-flex}
.nl-ch{display:inline-block;will-change:transform}
.nl-sp{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .nav-logo:hover .nl-ch{animation:nlPop .5s var(--ease) both;animation-delay:calc(var(--i) * 35ms)}
}
@keyframes nlPop{
  0%{transform:translateY(0)}
  40%{transform:translateY(-5px);color:var(--bronze-l)}
  100%{transform:translateY(0)}
}

/* Dropdown triggers row (sits between nav-links and CTA). */
.nav-drops{display:flex;align-items:center;gap:2.2rem}
.nav-drop-wrap{position:relative}
.nav-drop-trig{
  position:relative;display:inline-block;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--linen2);transition:color .3s;padding-bottom:.2rem;cursor:pointer;
}
.nav-drop-trig::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--bronze);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav-drop-wrap:hover .nav-drop-trig,
.nav-drop-wrap:focus-within .nav-drop-trig{color:var(--bronze-l)}
.nav-drop-wrap:hover .nav-drop-trig::after,
.nav-drop-wrap:focus-within .nav-drop-trig::after{transform:scaleX(1);transform-origin:left}

/* Premium frosted-glass dropdown panel. */
.nav-drop{
  position:absolute;top:calc(100% + 1.1rem);left:50%;transform:translateX(-50%) translateY(10px) scale(.98);
  min-width:248px;padding:.8rem;
  display:flex;flex-direction:column;gap:.1rem;
  background:rgba(250,247,241,.92);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(161,120,80,.28);border-radius:16px;
  box-shadow:0 34px 80px -30px rgba(20,17,13,.4),0 4px 14px rgba(20,17,13,.08);
  opacity:0;pointer-events:none;transform-origin:top center;
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  z-index:1001;
}
.nav-drop::before{ /* hover bridge so the pointer can travel to the panel */
  content:'';position:absolute;left:0;right:0;top:-1.1rem;height:1.1rem;
}
.nav-drop a{
  display:block;padding:.68rem .95rem;border-radius:10px;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--linen);white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:color .3s,background .3s,opacity .4s var(--ease),transform .4s var(--ease);
}
.nav-drop a:hover,.nav-drop a:focus-visible{background:rgba(161,120,80,.12);color:var(--bronze-l);outline:none}
.nav-drop-wrap:hover .nav-drop,
.nav-drop-wrap:focus-within .nav-drop,
.nav-drop-wrap .nav-drop.nn-open{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1);
}
/* Staggered link fade-in. */
.nav-drop-wrap:hover .nav-drop a,
.nav-drop-wrap:focus-within .nav-drop a{opacity:1;transform:translateY(0)}
.nav-drop a:nth-child(2){transition-delay:.04s}
.nav-drop a:nth-child(3){transition-delay:.08s}
.nav-drop a:nth-child(4){transition-delay:.12s}
.nav-drop a:nth-child(5){transition-delay:.16s}
.nav-drop a:nth-child(6){transition-delay:.2s}

/* Loader + mobile-menu marks. */
.ld-mark{height:34px;width:auto;display:block;margin:0 auto 1rem;opacity:.9}
.mm-mark{height:40px;width:auto;display:block;margin-bottom:2rem;filter:brightness(0) invert(1);opacity:.85}

@media(max-width:820px){
  .nav-drops{display:none}
}

@media(prefers-reduced-motion:reduce){
  #main-nav,.nav-mark,.nav-drop,.nav-drop a,.nav-drop-trig::after{transition:none!important}
  .nav-drop,.nav-drop a{transform:none!important}
  .nav-drop{left:auto;right:0}
  .nav-drop-wrap:hover .nav-drop,
  .nav-drop-wrap:focus-within .nav-drop{transform:none!important}
}

/* ===== FOOTER (luxury) ===== */
.nn-foot{
  position:relative;overflow:hidden;
  padding:clamp(4rem,8vw,7rem) 6vw 2rem;
}
/* Particle canvas sits behind all content. */
.nn-foot .foot-particles{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
/* Subtle bronze radial lighting. */
.nn-foot::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 0%,rgba(161,120,80,.08),transparent 60%),
            radial-gradient(90% 70% at 90% 20%,rgba(196,161,122,.06),transparent 65%);
}
.nn-foot .ft-top,
.nn-foot .ft-g,
.nn-foot .ft-bot{position:relative;z-index:1}

/* Editorial top block. */
.nn-foot .ft-top{
  text-align:center;max-width:620px;margin:0 auto clamp(3rem,6vw,5rem);
}
.nn-foot .ft-mark{
  height:clamp(60px,10vw,92px);width:auto;display:block;margin:0 auto 1.4rem;
  animation:nnFootFloat 6s ease-in-out infinite;
}
.nn-foot .ft-word{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:.02em;
  color:var(--linen);margin-bottom:1.2rem;
}
.nn-foot .ft-blurb{
  font-size:.85rem;line-height:1.8;color:var(--linen2);
  max-width:44ch;margin:0 auto;
}

/* Reveal targets. */
.nn-foot .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.nn-foot .rv.in{opacity:1;transform:translateY(0)}
.nn-foot .ft-g .rv:nth-child(2){transition-delay:.08s}
.nn-foot .ft-g .rv:nth-child(3){transition-delay:.16s}
.nn-foot .ft-g .rv:nth-child(4){transition-delay:.24s}

@keyframes nnFootFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media(max-width:720px){
  .nn-foot{padding-left:7vw;padding-right:7vw}
  .nn-foot .ft-g{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:440px){
  .nn-foot .ft-g{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .nn-foot .ft-mark{animation:none}
  .nn-foot .rv{opacity:1;transform:none;transition:none}
}

/* ===== FEATURED PROJECTS (homepage strip) ===== */
#s-featured{padding:clamp(5rem,10vw,9rem) 6vw;background:var(--ink);position:relative}
#s-featured .feat-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
#s-featured .feat-eye{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-l);margin-bottom:.7rem}
#s-featured .feat-head{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,3.6rem);line-height:1;color:var(--linen)}
#s-featured .feat-head em{font-style:italic;color:var(--bronze-l)}
#s-featured .feat-all{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--linen);padding-bottom:.3rem;border-bottom:1px solid var(--bronze);transition:color .3s,border-color .3s}
#s-featured .feat-all:hover{color:var(--bronze-l)}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.feat-card{position:relative;display:block;transform-style:preserve-3d}
.feat-mask{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/4;box-shadow:0 20px 50px -26px rgba(26,24,21,.35)}
.feat-mask::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,24,21,.5),transparent 45%);opacity:.85;transition:opacity .5s var(--ease)}
.feat-img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1s var(--ease)}
.feat-card:hover .feat-img{transform:scale(1.08)}
.feat-card:hover .feat-mask::after{opacity:1}
.feat-meta{position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;z-index:2;color:#fff}
.feat-city{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-d);display:block;margin-bottom:.35rem}
.feat-t{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.6vw,1.5rem);line-height:1.05;margin-bottom:.3rem}
.feat-type{font-size:.66rem;letter-spacing:.02em;color:rgba(255,255,255,.72);display:block;line-height:1.4}
@media(max-width:1000px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}

/* ===== SERVICE CARD EXPLORE ACTION ===== */
.sc-acts{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:auto}
.sc-explore{background:none;border:1px solid var(--bronze);color:var(--bronze-l);font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:.55rem 1.1rem;border-radius:2px;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.sc-explore:hover{background:var(--bronze);color:#fff}

/* ===== SERVICE FLOATING-BUBBLE OVERLAY ===== */
#nn-ov{position:fixed;inset:0;z-index:9998;display:flex;visibility:hidden;opacity:0;pointer-events:none;
  background:rgba(246,242,236,.86);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  transition:opacity .5s var(--ease),visibility 0s linear .5s}
#nn-ov.open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .5s var(--ease)}
#nn-ov::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 30% 30%,rgba(161,120,80,.10),transparent 70%),radial-gradient(50% 50% at 80% 70%,rgba(196,161,122,.10),transparent 70%)}
.nn-ov-x{position:absolute;top:1.4rem;right:1.6rem;z-index:5;width:48px;height:48px;border-radius:50%;border:1px solid rgba(26,24,21,.16);background:rgba(255,255,255,.5);color:var(--linen);font-size:1.6rem;line-height:1;cursor:pointer;transition:background .3s,transform .3s var(--ease)}
.nn-ov-x:hover{background:#fff;transform:rotate(90deg)}
.nn-ov-hint{position:absolute;top:1.7rem;left:1.8rem;z-index:5;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-l)}
.nn-stage{position:relative;flex:1;perspective:1400px;transform-style:preserve-3d;display:flex;align-items:center;justify-content:center;overflow:hidden}
.nn-bub{position:absolute;border:none;background:none;padding:0;cursor:pointer;
  width:clamp(150px,20vw,290px);aspect-ratio:1;border-radius:50%;overflow:visible;
  transition:margin .5s var(--ease)}
.nn-bub img{width:100%;height:100%;object-fit:cover;border-radius:50%;
  box-shadow:0 30px 60px -18px rgba(26,24,21,.4);transition:box-shadow .4s var(--ease),filter .4s}
.nn-bub-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(161,120,80,.35);opacity:0;transition:opacity .4s,inset .4s var(--ease)}
.nn-bub-cap{position:absolute;left:50%;bottom:-1.9rem;transform:translateX(-50%);white-space:nowrap;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--linen2);opacity:0;transition:opacity .4s}
.nn-bub:hover img,.nn-bub.active img{box-shadow:0 40px 80px -18px rgba(26,24,21,.5);filter:saturate(1.05)}
.nn-bub:hover .nn-bub-ring,.nn-bub.active .nn-bub-ring{opacity:1;inset:-10px}
.nn-bub:hover .nn-bub-cap,.nn-bub:focus-visible .nn-bub-cap{opacity:1}
.nn-ov-info{position:absolute;left:clamp(1.6rem,5vw,4rem);bottom:clamp(1.6rem,6vh,4rem);z-index:5;max-width:min(360px,80vw)}
.nn-ov-city{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-l);display:block;margin-bottom:.5rem}
.nn-ov-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.02;color:var(--linen);margin-bottom:.7rem}
.nn-ov-cap{font-size:.82rem;line-height:1.65;color:var(--linen2);margin-bottom:1.1rem}
.nn-ov-link{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--linen);padding-bottom:.3rem;border-bottom:1px solid var(--bronze);transition:color .3s}
.nn-ov-link:hover{color:var(--bronze-l)}
/* Mobile: vertical scroll stack, no 3D scatter/parallax. */
@media(max-width:760px){
  #nn-ov{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nn-stage{display:block;overflow:visible;padding:4.8rem 1.2rem 1rem;perspective:none;min-height:0}
  .nn-bub{position:relative!important;transform:none!important;margin:0 auto 2.4rem!important;width:min(70vw,300px);display:block;z-index:1!important}
  .nn-bub-cap{position:static;transform:none;opacity:1;text-align:center;margin-top:.8rem}
  .nn-ov-info{position:relative;left:0;bottom:0;margin:.5rem auto 3.5rem;text-align:center;max-width:88vw}
  .nn-ov-hint{position:static;display:block;text-align:center;padding:4.5rem 0 .5rem}
}
@media(prefers-reduced-motion:reduce){
  #nn-ov{transition:opacity .01s}
  .nn-bub{transition:none}
  .nn-bub img,.nn-bub-ring,.nn-bub-cap{transition:none}
}


/* ===== PORTFOLIO ARCHIVE (filters + cards) ===== */
.pf-filterbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.pf-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pf-chip{background:rgba(255,255,255,.72);border:1px solid rgba(161,120,80,.4);color:var(--linen);cursor:pointer;
  font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:.5rem 1.05rem;border-radius:100px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.pf-chip:hover{border-color:var(--bronze-l);color:var(--bronze-l);background:rgba(161,120,80,.08)}
.pf-chip.on{background:var(--bronze-l);color:#faf7f1;border-color:var(--bronze-l)}
.pf-chip.on:hover{background:var(--bronze-l);color:#faf7f1}
.pf-countw{font-size:.72rem;letter-spacing:.1em;color:var(--linen2)}
.pf-count{font-family:var(--serif);font-size:1.3rem;color:var(--bronze-l);font-variant-numeric:tabular-nums}
.pf-grid .pf-card.pf-hide{display:none}
.pf-card{transform-style:preserve-3d}
/* Mobile: chips become a single horizontal-scroll rail (no ragged wrap) */
@media(max-width:640px){
  .pf-filterbar{gap:1rem;margin-bottom:1.8rem}
  .pf-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    gap:.55rem;padding-bottom:.4rem;width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .pf-chips::-webkit-scrollbar{display:none}
  .pf-chips{scrollbar-width:none}
  .pf-chip{flex:0 0 auto;scroll-snap-align:start;padding:.62rem 1.15rem}
}
.pf-imgw{position:relative;overflow:hidden;border-radius:3px}
.pf-imgw img{transition:transform 1s var(--ease)}
.pf-card:hover .pf-imgw img{transform:scale(1.06)}
.pf-badge{position:absolute;top:.8rem;left:.8rem;background:rgba(246,242,236,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--linen);padding:.35rem .7rem;border-radius:100px}
.pf-body{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.pf-go{color:var(--bronze-l);transition:transform .4s var(--ease)}
.pf-card:hover .pf-go{transform:translateX(6px)}

/* ===== SINGLE PROJECT (cinematic) ===== */
.pf-hero2{position:relative;height:88vh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.pf-hero2-img{position:absolute;inset:0}
.pf-hero2-img img{width:100%;height:100%;object-fit:cover}
.pf-hero2-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,24,21,.72),rgba(26,24,21,.15) 55%,transparent)}
.pf-hero2-in{position:relative;z-index:2;padding:clamp(2rem,6vw,5rem);color:#fff;max-width:1000px}
.pf-hero2-cat{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-d);margin-bottom:1rem}
.pf-hero2-t{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);line-height:.98;margin-bottom:.8rem}
.pf-hero2-type{font-size:.9rem;color:rgba(255,255,255,.8);max-width:44ch}
.pf-hero2-scroll{position:absolute;bottom:1.6rem;right:2rem;z-index:2;color:rgba(255,255,255,.7);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.pf-intro{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pf-intro-meta{border-left:1px solid rgba(26,24,21,.12);padding-left:2rem}
.pf-meta-row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(26,24,21,.08)}
.pf-services{margin-top:1.4rem}
.pf-svc-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pf-svc-list li{font-size:.66rem;letter-spacing:.06em;color:var(--linen2);border:1px solid rgba(161,120,80,.3);border-radius:100px;padding:.3rem .8rem}
.pf-gal2 .bi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem)}
.pf-shot2{margin:0}
.pf-shot2.wide{grid-column:1 / -1}
.pf-shot2-img{aspect-ratio:4/3;overflow:hidden;border-radius:3px;box-shadow:0 24px 60px -30px rgba(26,24,21,.4)}
.pf-shot2-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pf-shot2:hover .pf-shot2-img img{transform:scale(1.04)}
.pf-shot2 figcaption{padding:.9rem .2rem 0}
.pf-shot2-cap{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.35;color:var(--linen)}
.pf-shot2-mat{display:block;font-size:.64rem;letter-spacing:.06em;color:var(--linen2);margin-top:.35rem}
.rv2{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv2.in{opacity:1;transform:none}
.pf-next,a.pf-next{position:relative;display:block;min-height:340px;overflow:hidden;color:#fff}
.pf-next-bg{position:absolute;inset:0}
.pf-next-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5);transition:transform 1.2s var(--ease),filter .6s}
.pf-next:hover .pf-next-bg img{transform:scale(1.06);filter:brightness(.42)}
.pf-next-in{position:relative;z-index:2;height:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:3rem 1.5rem}
.pf-next-lbl{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-d)}
.pf-next-t{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5vw,3.6rem);line-height:1}
.pf-next-go{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--bronze);padding-bottom:.3rem;transition:color .3s}
.pf-next:hover .pf-next-go{color:var(--bronze-d)}
@media(max-width:820px){.pf-intro{grid-template-columns:1fr}.pf-intro-meta{border-left:none;padding-left:0;border-top:1px solid rgba(26,24,21,.12);padding-top:1.5rem}.pf-gal2 .bi{grid-template-columns:1fr}.pf-hero2-scroll{display:none}}
@media(prefers-reduced-motion:reduce){.rv2{opacity:1;transform:none;transition:none}.pf-hero2-img img,.pf-next-bg img,.pf-shot2-img img{transition:none}}

/* ===== INNER-PAGE CHROME CONSISTENCY ===== */
.nd-nav .nav-logo{display:inline-flex;align-items:center}
.nd-nav .nav-mark{height:24px}
/* ===== NOIR CINEMATIC BANDS (v2.4) ===== */
.nn-band--noir{
  background:var(--noir);
  color:var(--noir-ink);
}
.nn-band--noir h1,.nn-band--noir h2,.nn-band--noir h3,
.nn-band--noir .panel-h,.nn-band--noir .sh{color:var(--noir-ink)}
.nn-band--noir em{color:var(--bronze-d);font-style:italic}
/* Light bronze, not emerald: --emerald-l (#2f6b57) on noir (#14120f) is ~2.4:1 and fails AA.
   This tone is the one .nn-band--noir em already uses, so label and heading italic agree. */
.nn-band--noir .eyebrow,.nn-band--noir .stag,.nn-band--noir .stmt-eye{color:var(--bronze-d)}
.nn-band--noir p,.nn-band--noir .slead,.nn-band--noir .ti-pr{color:rgba(245,239,228,.72)}
.nn-band--noir a:not(.btn-bronze):not(.btn-ghost):hover{color:var(--bronze-d)}

/* ===== ACCENTS + DISPLAY TYPE (v2.4) ===== */
/* Primary CTA deepens to oxblood on hover for a richer, less "dull" feel.
   Inner pages define a higher-specificity .nn-inner .btn-bronze:hover, so match it too. */
.btn-bronze:hover,.nn-inner .btn-bronze:hover{background:var(--bronze-l);border-color:var(--bronze-l);color:var(--noir-ink)}
/* Eyebrows pick up the emerald jewel note. Light/front sections only: inner page-heros
   sit on a dark image overlay where emerald reads as near-black, so exclude .nn-inner.
   Noir band override (above) still wins on any noir eyebrow. */
body:not(.nn-inner) .eyebrow{color:var(--emerald)}
/* Slightly larger editorial display scale for the section headings.
   (.hero-panel h1 is the front mega-title at clamp(5rem,15vw,13rem); leaving it alone so
   this scale-up doesn't shrink it.) */
/* Floor is vw-led so the display type actually shrinks on a 390px phone — the old 3rem
   floor let the italic "unmistakably" run past the viewport edge. The 6.1rem ceiling is
   the largest size at which that same word still fits the 666px panel column on desktop;
   at the previous 7rem it overflowed the panel by ~27px. */
.panel-h{font-size:clamp(2.15rem,7.2vw,6.1rem)}
.sh{font-size:clamp(2.6rem,5.6vw,4.6rem)}
/* Closing-CTA heading. Replaces the inline font-size that was copy-pasted across six templates. */
.cta-h{font-size:clamp(2rem,6vw,5.5rem);text-align:center}
.sh--c{text-align:center}

/* ===== PORTFOLIO MEGA-MENU (v2.4) ===== */
.nav-mega{
  left:auto;right:0;transform:translateX(0) translateY(8px);
  width:min(560px,86vw);padding:1rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
}
.nav-drop-wrap:hover .nav-mega,
.nav-drop-wrap:focus-within .nav-mega{transform:translateX(0) translateY(0)}
.nav-drop .nav-mega-card{
  display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:4px;
  opacity:0;transform:translateY(6px);
  transition:background .25s,color .3s,opacity .4s var(--ease),transform .4s var(--ease);
  text-transform:none;letter-spacing:normal;white-space:normal;
}
.nav-mega-card:hover{background:rgba(20,17,13,.05)}
.nav-mega-thumb{
  flex:0 0 64px;width:64px;height:48px;border-radius:3px;
  background:var(--ink) center/cover no-repeat;
}
.nav-mega-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.nav-mega-cat{
  font-family:var(--serif);font-size:1.05rem;line-height:1.05;color:var(--linen);
}
.nav-mega-count{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--linen2);
}
.nav-drop-wrap:hover .nav-mega-card,
.nav-drop-wrap:focus-within .nav-mega-card{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .nav-mega,.nav-mega-card{transform:none!important;transition:none!important}
}

/* ── v2.4.1 Phase 2 — video ─────────────────────────────── */
/* Services showreel (noir band, click-to-play) */
.nn-reel .bi{text-align:center}
.nn-reel-stage{position:relative;max-width:1000px;margin:2.4rem auto 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0d0c0a;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);cursor:pointer}
.nn-reel-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nn-play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,18,15,.30);border:0;cursor:pointer;transition:opacity .4s ease,background .4s ease;z-index:2}
.nn-play-btn:hover{background:rgba(20,18,15,.16)}
.nn-play-btn::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:rgba(245,239,228,.12);border:1px solid rgba(245,239,228,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.nn-play-ico{position:relative;z-index:1;width:0;height:0;border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--noir-ink);margin-left:6px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.nn-reel-stage.playing .nn-play-btn{opacity:0;pointer-events:none}

/* Portfolio card hover preview */
.pf-card .pf-imgw{position:relative}
.pf-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;z-index:2;pointer-events:none}
.pf-card.has-preview .pf-preview{opacity:1}

/* Behind-the-scenes reel (About/Studio) */
.nn-bts-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.nn-bts-reel{justify-self:center;width:100%;max-width:340px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0d0c0a;box-shadow:0 40px 90px -40px rgba(0,0,0,.55)}
.nn-bts-reel video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.nn-bts-grid{grid-template-columns:1fr}.nn-bts-reel{max-width:300px;margin-top:1.6rem}}

/* ── v2.4.2 Phase 3 — maximized /services ───────────────── */
.svc-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(2rem,5vw,5.5rem);align-items:start}

/* Sticky discipline side-nav */
.svc-sidenav{position:sticky;top:110px;align-self:start}
.svc-sidenav-lbl{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-l);margin-bottom:1.2rem}
.svc-sidenav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.svc-sidenav a{display:flex;gap:.7rem;align-items:baseline;padding:.55rem .6rem;border-left:2px solid var(--border);color:var(--text3);transition:color .3s,border-color .3s,background .3s}
.svc-sidenav a:hover{color:var(--text)}
.svc-sidenav a.on{color:var(--linen);border-left-color:var(--bronze-l);background:linear-gradient(90deg,rgba(161,120,80,.08),transparent)}
.svc-sidenav-n{font-size:.66rem;letter-spacing:.1em;color:var(--bronze-l);font-variant-numeric:tabular-nums}
.svc-sidenav-t{font-family:var(--serif);font-size:1.02rem;line-height:1.25}

/* Discipline sections */
.svc-disc{scroll-margin-top:100px;padding:clamp(2.4rem,5vw,3.6rem) 0;border-top:1px solid var(--border)}
.svc-disc:first-child{border-top:0;padding-top:0}
.svc-disc-head{display:flex;gap:1.4rem;align-items:baseline;margin-bottom:1.8rem}
.svc-disc-num{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);color:var(--bronze);line-height:1;font-variant-numeric:tabular-nums}
.svc-disc-title{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;color:var(--linen)}
.svc-disc-tag{font-size:.98rem;color:var(--emerald);margin-top:.4rem;font-style:italic;font-family:var(--serif)}
.svc-disc-media{border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin-bottom:1.8rem;box-shadow:0 30px 70px -40px rgba(20,17,13,.45)}
.svc-disc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc-disc:hover .svc-disc-media img{transform:scale(1.04)}
.svc-disc-body .slead{max-width:60ch;margin-bottom:2rem}
.svc-disc-cols{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;margin-bottom:2rem}
.svc-h4{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-l);margin-bottom:1rem}
.svc-swatches{display:flex;flex-wrap:wrap;gap:.5rem}
.sw-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem .4rem .5rem;border:1px solid var(--border);border-radius:999px;font-size:.78rem;color:var(--text2)}
.sw-dot{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,17,13,.14)}
.svc-stats{display:flex;gap:2.6rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--border)}
.svc-stat-n{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.svc-stat-l{display:block;font-size:.76rem;color:var(--text3);margin-top:.5rem;max-width:16ch}

/* Closing CTA — light editorial (maroon retired per client feedback v2.5.6). */
.cta-band.cta-oxblood{background:var(--surface)}
.cta-band.cta-oxblood .stag{color:var(--bronze-l)}

/* ===== EYEBROW + CTA BUTTON GROUP (v3.7.4) ===== */
/* Rule lines track the label colour instead of being hardcoded bronze. */
.stag::before,.stag::after,.eyebrow::before,.eyebrow::after{background:currentColor;opacity:.55}
/* A centred .stag needs a line on BOTH sides — with only ::before, flex centres the
   line+text group and the text lands right of true centre. */
.stag--c{justify-content:center}
.stag--c::after{content:"";display:block;width:2.2rem;height:1px;background:currentColor}

/* Base lives here, not inner.css, because the front page needs it too (inner.css is inner-only).
   Equal-fr columns inside a fit-content track make both buttons exactly as wide as the
   longer label — same width and height at every breakpoint, no magic numbers. */
.cta-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1.2rem;width:fit-content;max-width:100%;margin:3rem auto 0;justify-content:center}
/* Gap owns the spacing; kill any stray button margin. */
.cta-btns>.btn-bronze,.cta-btns>.btn-ghost,.cta-btns>.btn-outline{margin:0;width:100%}
@media(max-width:560px){
  /* Stacked, full-size tap targets. */
  .cta-btns{grid-auto-flow:row;width:min(100%,20rem);gap:.9rem}
}

@media(max-width:900px){
  .svc-layout{grid-template-columns:1fr;gap:2rem}
  .svc-sidenav{position:static;top:auto;margin-bottom:1rem;overflow-x:auto}
  .svc-sidenav ul{flex-direction:row;gap:.4rem;min-width:max-content}
  .svc-sidenav a{border-left:0;border-bottom:2px solid var(--border);white-space:nowrap}
  .svc-sidenav a.on{border-left:0;border-bottom-color:var(--bronze-l);background:none}
  .svc-sidenav-t{font-size:.9rem}
  .svc-disc-cols{grid-template-columns:1fr;gap:1.6rem}
}
@media(prefers-reduced-motion:reduce){.svc-disc-media img{transition:none}.svc-disc:hover .svc-disc-media img{transform:none}}

/* ── v2.5.0 — client typography (LEMONMILK display + Felixti accent) ────── */
/* Accent/em words render in the Felixti script, never LEMONMILK caps. */
h1 em, h2 em, h3 em,
.sh em, .sh-light em, .panel-h em, .hero-panel h1 em, .page-hero h1 em,
.feat-head em, #s-featured .feat-head em, .cta-band .sh em, .cta-box h3 em,
.nn-band--noir em, .ht-name em, .svc-disc-tag, .pf-year {
  font-family: var(--script);
  font-style: italic;
  text-transform: none;
  letter-spacing: .005em;
}
/* Bump script accents slightly so they balance the geometric caps. */
h1 em, .sh em, .panel-h em, .hero-panel h1 em, .page-hero h1 em, .feat-head em { font-size: 1.08em; }

/* Display face for nav, eyebrows, labels and buttons (LEMONMILK is all-caps). */
.eyebrow, .stag, .feat-eye, .svc-sidenav-lbl, .svc-h4,
.nav-links a, .nav-cta, .nav-drop-trig, .nav-drop a,
.btn-bronze, .btn-ghost, .btn-outline, .btn-outline, .nn-inner .btn-bronze, .nn-inner .btn-ghost {
  font-family: var(--display);
}
/* LEMONMILK caps read best with a touch more tracking at small sizes. */
.nav-links a, .nav-cta, .nav-drop-trig, .eyebrow, .stag { letter-spacing: .2em; }
.btn-bronze, .btn-ghost, .btn-outline { letter-spacing: .18em; }

/* ── Awwwards elevation Phase 2 (v2.6.1) ──────────────────────────────── */
/* Page-transition curtain — continuous upward wipe. */
#nn-curtain{position:fixed;inset:0;z-index:9999;background:var(--noir,#14120f);transform:translateY(100%);pointer-events:none;display:flex;align-items:center;justify-content:center}
#nn-curtain .nn-curtain-mark{font-family:var(--display);letter-spacing:.34em;text-transform:uppercase;font-size:.72rem;color:var(--noir-ink,#f5efe4);opacity:0}
#nn-curtain.in{transform:translateY(0);transition:transform .6s cubic-bezier(.76,0,.24,1)}
#nn-curtain.in .nn-curtain-mark{opacity:.9;transition:opacity .4s .12s}
#nn-curtain.cover{transform:translateY(0)}
#nn-curtain.reveal{transform:translateY(-100%);transition:transform .78s cubic-bezier(.76,0,.24,1)}
@media(prefers-reduced-motion:reduce){#nn-curtain{display:none!important}}

/* Current-page wayfinding — persistent bronze underline. */
.nav-links a,.nav-drop-trig{position:relative}
.nav-links a::after,.nav-drop-trig::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--bronze);transition:right .4s var(--ease)}
.nav-links a:hover::after,.nav-drop-trig:hover::after,.nav-links a.is-current::after,.nav-drop-trig.is-current::after{right:0}
/* Current-page emphasis (v4.13.0).
   font-weight is deliberately NOT used here: fonts.css maps the single bundled
   LEMONMILK-Light.otf to `font-weight:300 700`, so the browser always finds a face
   claiming 700 and renders Light unchanged — font-weight:700 measures identical to
   300 (51.88px both). -webkit-text-stroke thickens the real outline, so it works
   whatever weights are bundled. Narrowing the @font-face range would let faux bold
   through, but would also thicken .ld-count, .mm-links a and .nd-nav .nav-logo,
   which all set font-weight:400 on var(--display).
   paint-order keeps the stroke behind the fill so tracked caps at .7rem thicken
   instead of muddying; where unsupported the stroke paints centred, still correct. */
.nav-links a.is-current,.nav-drop-trig.is-current{
  color:var(--bronze-l);
  -webkit-text-stroke:.3px currentColor;
  paint-order:stroke fill;
}
/* No glow rule here, deliberately. A text-shadow halo needs a dark surround to read
   as light; on the cream glass it is invisible at any usable strength. The one dark
   ground — the homepage nav over the hero video — never carries .is-current anyway:
   main.js resolves `here` to '/' there, and no nav link points at '/' (the logo is
   home). So a glow could only ever be dead code. Measured, not assumed. */
body.home nav:not(.sc) .nav-links a.is-current,body.home nav:not(.sc) .nav-drop-trig.is-current{color:#fff}
.mm-links a.is-current{color:var(--bronze-d)}

/* Work showcase — more expensive, layered hover reveal. */
.feat-card .feat-meta{transform:translateY(0);transition:transform .55s var(--ease)}
.feat-card .feat-city,.feat-card .feat-type{opacity:.0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.feat-card .feat-t{transition:transform .55s var(--ease)}
.feat-card:hover .feat-city,.feat-card:focus-visible .feat-city{opacity:1;transform:translateY(0);transition-delay:.05s}
.feat-card:hover .feat-type,.feat-card:focus-visible .feat-type{opacity:.72;transform:translateY(0);transition-delay:.1s}
.feat-card:hover .feat-t,.feat-card:focus-visible .feat-t{transform:translateY(-2px)}
.feat-card .feat-t::after{content:'';display:block;width:0;height:1px;background:var(--bronze-d);margin-top:.5rem;transition:width .5s var(--ease) .08s}
.feat-card:hover .feat-t::after,.feat-card:focus-visible .feat-t::after{width:2rem}
.feat-mask::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 120%,rgba(161,120,80,.28),transparent 60%);opacity:0;transition:opacity .6s var(--ease)}
.feat-card:hover .feat-mask::before,.feat-card:focus-visible .feat-mask::before{opacity:1}
@media(prefers-reduced-motion:reduce){
  .feat-card .feat-city,.feat-card .feat-type{opacity:1;transform:none;transition:none}
  .feat-card .feat-img,.feat-card .feat-meta,.feat-card .feat-t{transition:none}
}

/* ── v2.7.0 — accessibility safety net (WCAG 2.2 AA) ──────────────────── */
/* Every keyboard-focusable control gets a visible ring, even ones without a
   bespoke :focus-visible rule above. Mouse users are unaffected. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--bronze,#a17850);
  outline-offset:3px;
  border-radius:2px;
}
/* Skip animating anything on request — blanket parity for late additions. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ═════════════════════════════════════════════════════════════════════════
   v4.0 — HOMEPAGE RESTRUCTURE (client brief 2026-07-14)
   Palette note: this sheet loads on the FRONT page too, where inner.css is not
   present — so only style.css :root tokens are safe here (--ink/--surface/--linen/
   --linen2/--bronze/--bronze-l/--bronze-d/--noir/--noir-ink/--ease).
   --bronze-l (#8a6342) is the DEEP bronze (use on light), --bronze-d (#c4a17a) the
   LIGHT bronze (use on noir). Both clear AA against their own ground.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═ v4.6.0 — statement: full-bleed faded background photo, copy overlaid (client ref) ═ */
#s-stmt{position:relative;overflow:hidden;min-height:clamp(560px,86vh,760px);display:flex;align-items:center}
#s-stmt .stmt-bg{position:absolute;inset:0;z-index:0}
#s-stmt .stmt-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* The "faded" look + text legibility: darker on the left where the copy sits, easing lighter
   to the right so the photo still reads; a gentle vertical tint underneath. Over image, under copy. */
#s-stmt .stmt-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,18,15,.9) 0%,rgba(20,18,15,.72) 42%,rgba(20,18,15,.44) 100%),linear-gradient(0deg,rgba(20,18,15,.5),rgba(20,18,15,.18))}
#s-stmt .stmt-inner{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:9rem 4rem}
#s-stmt .stmt-copy{max-width:560px}
#s-stmt .stmt-rule{display:block;width:1px;height:64px;background:var(--bronze-d);margin-bottom:2.2rem}
#s-stmt .stmt-txt{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.14;color:var(--noir-ink);margin-bottom:1.8rem}
#s-stmt .stmt-txt em{font-style:italic;color:var(--bronze-d)}
#s-stmt .stmt-p{font-family:var(--sans);color:rgba(245,239,228,.86);font-size:.98rem;line-height:1.9;max-width:46ch;margin-bottom:2.2rem}
#s-stmt .stmt-p strong{color:var(--noir-ink);font-weight:500}
#s-stmt .btn-ghost{margin-top:0;color:var(--noir-ink);border-color:rgba(245,239,228,.32)}
#s-stmt .btn-ghost:hover{background:var(--noir-ink);border-color:var(--noir-ink);color:var(--noir)}
@media(max-width:900px){
  #s-stmt{min-height:clamp(520px,80vh,680px)}
  #s-stmt .stmt-inner{padding:5rem 1.4rem}
  #s-stmt .stmt-ov{background:linear-gradient(90deg,rgba(20,18,15,.9) 0%,rgba(20,18,15,.76) 60%,rgba(20,18,15,.6) 100%),linear-gradient(0deg,rgba(20,18,15,.5),rgba(20,18,15,.25))}
}

/* ═ v4.0 — services 4-card grid ═ */
.svc4-band{background:var(--ink);padding:8rem 4rem}
.svc4-hdr{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:1440px;margin:0 auto 3.5rem}
.svc4-lede{max-width:44ch;color:var(--linen2);font-size:.95rem;line-height:1.85;margin-top:1.2rem}
.svc4-by{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-l);display:flex;align-items:center;gap:1rem;white-space:nowrap}
.svc4-byline{display:inline-block;width:120px;height:1px;background:var(--bronze-l)}
.svc4-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:1440px;margin:0 auto}
.svc4-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);box-shadow:0 1px 0 rgba(26,24,21,.06);transition:box-shadow .5s var(--ease)}
.svc4-card:hover{box-shadow:0 22px 60px -26px rgba(26,24,21,.32)}
.svc4-imglink{display:block;aspect-ratio:4/3;overflow:hidden}
.svc4-imglink img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.svc4-card:hover .svc4-imglink img{transform:scale(1.05)}
.svc4-body{display:flex;flex-direction:column;flex:1;padding:1.8rem 1.6rem 2rem}
.svc4-num{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;color:var(--bronze-l)}
.svc4-t{font-family:var(--serif);font-weight:300;font-size:1.45rem;line-height:1.2;margin:.7rem 0 .9rem}
.svc4-t em{font-style:italic;color:var(--bronze-l)}
.svc4-d{font-size:.88rem;line-height:1.8;color:var(--linen2);margin-bottom:1.5rem;flex:1}
/* .btn-outline's base rules live in inner.css, which the front page does not load — so the
   card button carries its own full appearance here. */
.svc4-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;align-self:flex-start;min-height:3.1rem;padding:.85rem 1.6rem;background:transparent;border:1px solid var(--bronze);color:var(--bronze-l);font-family:var(--display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease)}
.svc4-btn:hover{background:var(--bronze);color:#fff}
@media(max-width:1100px){.svc4-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .svc4-band{padding:5rem 1.4rem}
  .svc4-grid{grid-template-columns:1fr}
  .svc4-hdr{flex-direction:column;align-items:flex-start}
  /* The nowrap label plus its 120px rule measures ~323px and pushes the document
     past a 320px viewport. The rule is decorative — drop it on the narrowest screens. */
  .svc4-by{white-space:normal}
  .svc4-byline{display:none}
}

/* ─ BACK TO TOP ─
   Fixed control, revealed past 65% scroll by main.js; the ring traces scroll
   progress. The fill is SOLID on purpose: a translucent fill blends with
   whatever scrolls behind it and measures 2.10:1 over a --noir band — the same
   failure the .nav-cta fix corrected in v4.11.0. The arrow uses --bronze-l (the
   DEEP shade — the token suffixes read backwards) for 4.56:1 on --surface, and
   #fff on --bronze-l for 5.32:1 at hover. */
#nn-top{
  position:fixed;right:2rem;bottom:2rem;z-index:900;
  width:48px;height:48px;padding:0;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(12px);visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s,
             background .35s var(--ease),border-color .35s var(--ease);
}
/* The visibility timing is asymmetric and must stay so. visibility is discrete;
   `transition:visibility .4s` flips it at the END in BOTH directions, so the
   entrance fade would run for 400ms while still hidden and never be seen.
   0s .4s on hide (stay visible through the fade), 0s 0s on show. */
#nn-top.on{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s 0s,
             background .35s var(--ease),border-color .35s var(--ease);
}
.nn-top-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.nn-top-trk{fill:none;stroke:rgba(161,120,80,.18);stroke-width:1.5}
/* stroke-dasharray must match C in main.js (2πr, r=22). */
.nn-top-ring{
  fill:none;stroke:var(--bronze);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:138.23;stroke-dashoffset:138.23;
}
.nn-top-arw{
  position:relative;width:16px;height:16px;fill:none;stroke:var(--bronze-l);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .35s var(--ease),transform .35s var(--ease);
}
#nn-top:hover{background:var(--bronze-l);border-color:var(--bronze-l)}
#nn-top:hover .nn-top-arw{stroke:#fff;transform:translateY(-2px)}
#nn-top:hover .nn-top-trk{stroke:rgba(255,255,255,.25)}
#nn-top:hover .nn-top-ring{stroke:#fff}
#nn-top:focus-visible{outline:2px solid var(--bronze-l);outline-offset:3px}
@media(max-width:640px){#nn-top{right:1.2rem;bottom:1.2rem}}
/* The button is a control, not decoration — it still appears, just without the rise. */
@media(prefers-reduced-motion:reduce){
  #nn-top{transform:none;transition:opacity .01s,visibility 0s .01s}
  #nn-top.on{transform:none;transition:opacity .01s,visibility 0s 0s}
}

/* ─ HEADER BUBBLES ─
   The footer's bronze motes, rebuilt in CSS. Deliberately NOT a port of
   nn-footer.js: that canvas is cheap only because an IntersectionObserver gates its
   requestAnimationFrame loop to when the footer is on screen. #main-nav is
   position:fixed, so the gate would never fire and the loop would run on every page
   forever, competing with the cursor loop, Lenis and the hero scrub. These six
   transform/opacity animations run on the compositor — no main-thread work.

   Six, not the footer's sixty: that canvas is 1425x805 and the nav is 1425x79, so
   reusing its `min(60, W/22)` count is 10.2x the density and reads as speckle rather
   than motes. Six matches the footer's density per unit area. Speed (6-24px/s), size
   (r .6-1.8 -> 1.2-3.2px) and alpha (.1-.45) are taken from the canvas. */
.nav-bubbles{
  position:absolute;inset:0;z-index:-1;
  overflow:hidden;pointer-events:none;
}
/* overflow:hidden lives HERE, never on #main-nav — .nav-drop hangs below the bar at
   top:calc(100% + 1.1rem), and clipping the nav would erase the dropdown menus.
   z-index:-1 works because #main-nav (position:fixed, z-index:1000) is a stacking
   context: negative-z children paint above the element's own background but below its
   in-flow content, so the bubbles sit over the glass and under the text with no
   changes to the logo, links or CTA. position:absolute also keeps this out of the
   nav's flex flow. */
.nav-bubbles i{
  position:absolute;bottom:-6px;
  width:var(--s);height:var(--s);border-radius:50%;
  background:var(--bronze);opacity:0;
  animation:navBub var(--d) linear var(--delay) infinite;
}
@keyframes navBub{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:var(--a)}
  88%{opacity:var(--a)}
  100%{transform:translate(var(--dx),-100px);opacity:0}
}
/* Sizes and alphas run bolder than the footer's own (r .6-1.8, a .1-.45) on purpose.
   Measured: at the footer's exact values these change 0.05% of the header's pixels —
   present but visually negligible, because the footer's subtlety relies on 805px of
   open cream to breathe in and this bar is 79px of mostly text. These values measure
   0.125% and actually read, while staying well under the nav copy.
   Negative delays start each bubble mid-flight, so they never pulse in unison and the
   field is already populated on first paint. */
.nav-bubbles i:nth-child(1){left:8%;  --s:5px;  --a:.42;--d:13s;--delay:0s;  --dx:14px}
.nav-bubbles i:nth-child(2){left:22%; --s:3.5px;--a:.32;--d:17s;--delay:-6s; --dx:-10px}
.nav-bubbles i:nth-child(3){left:39%; --s:6px;  --a:.48;--d:11s;--delay:-3s; --dx:8px}
.nav-bubbles i:nth-child(4){left:57%; --s:4px;  --a:.36;--d:15s;--delay:-9s; --dx:-14px}
.nav-bubbles i:nth-child(5){left:74%; --s:5.5px;--a:.45;--d:12s;--delay:-5s; --dx:12px}
.nav-bubbles i:nth-child(6){left:89%; --s:3px;  --a:.30;--d:19s;--delay:-11s;--dx:-8px}
/* Pure decoration — hide rather than freeze. */
@media(prefers-reduced-motion:reduce){.nav-bubbles{display:none}}

/* ─ WHATSAPP BUTTON ─
   Stacked directly above #nn-top on the same corner (not the opposite one):
   same size, same border/surface/hover-to-bronze language, same z-index
   layer, same right offset — just a stack instead of a mirror. The bottom
   offset is #nn-top's bottom + its 48px height + a 1rem gap, at both
   breakpoints (2rem+48px+1rem=6rem desktop; 1.2rem+48px+1rem=5.2rem mobile),
   so the two buttons always sit a fixed rem apart regardless of viewport.
   Two differences from #nn-top remain deliberate: always visible from first
   paint (no .on class, no scroll gate — this is a contact CTA, not a
   scroll-progress utility), and no ring (there is no progress to show).
   Icon colour reuses --bronze-l at rest and #fff on hover — the exact
   pairing already measured on .nn-top-arw at 4.56:1 / 5.32:1, so it carries
   the same contrast guarantee here. */
#nn-whatsapp{
  position:fixed;right:2rem;bottom:6rem;z-index:900;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nn-wa-icon{width:20px;height:20px;fill:var(--bronze-l);transition:fill .35s var(--ease)}
#nn-whatsapp:hover{background:var(--bronze-l);border-color:var(--bronze-l)}
#nn-whatsapp:hover .nn-wa-icon{fill:#fff}
#nn-whatsapp:focus-visible{outline:2px solid var(--bronze-l);outline-offset:3px}
@media(max-width:640px){#nn-whatsapp{right:1.2rem;bottom:5.2rem}}

/* ─ CALCULATOR HUB GRID ─ */
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;margin-top:2.6rem}
.calc-card{display:block;padding:2rem;border:1px solid var(--border);border-radius:4px;background:var(--surface);transition:border-color .3s,transform .3s var(--ease)}
.calc-card:hover{border-color:var(--bronze-l);transform:translateY(-4px)}
.calc-card-t{font-family:var(--serif);font-size:1.3rem;font-weight:300;color:var(--text);margin-bottom:.8rem}
.calc-card-d{font-size:.85rem;line-height:1.6;color:var(--linen2);margin-bottom:1.4rem}
.calc-card-cta{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-l)}
@media(max-width:640px){.calc-grid{grid-template-columns:1fr}}

/* ─ CALCULATOR TOOL FORM ─ */
.calc-back{display:inline-block;margin-bottom:2rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-l)}
.calc-form{margin-top:1rem}
.calc-form .calc-calculate{margin-top:.6rem}
.calc-results{margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--border)}
.calc-results-list{display:grid;grid-template-columns:1fr auto;gap:.6rem 1.5rem;margin:0 0 1.8rem}
.calc-results-list dt{margin:0;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--linen2)}
.calc-results-list dd{margin:0;font-family:var(--serif);font-size:1.1rem;color:var(--text);text-align:right}
.calc-actions{display:flex;gap:1rem;flex-wrap:wrap}
.calc-copy.is-copied::after{content:" — Copied";font-size:.65rem;text-transform:none;letter-spacing:0}
@media(max-width:640px){
  .calc-results-list{grid-template-columns:1fr}
  .calc-results-list dd{text-align:left}
}

/* ─ CALCULATORS NAV BUTTON ─
   Reuses .nav-cta's existing base rule (style.css:127) and its .sc
   scroll-state fill (nn-2026.css:29) verbatim — the only new rule is a
   static bronze glow. Deliberately not a hover-only reveal and not a
   pulse/loop: the first always-on glow anywhere in the nav, but still fully
   static, so it adds no new motion precedent. rgba(138,99,66) is --bronze-l
   (#8a6342) — the DEEP shade, not --bronze-d. */
.nav-calc{
  box-shadow:0 0 0 1px rgba(138,99,66,.25),0 0 18px 2px rgba(138,99,66,.35);
  transition:background .3s,color .3s,box-shadow .3s;
}
.nav-calc:hover{box-shadow:0 0 0 1px rgba(138,99,66,.4),0 0 24px 4px rgba(138,99,66,.5)}
/* display:flex only above the 768px mobile-nav breakpoint (style.css:238-241
   hides .nav-cta entirely below it). Scoped in a min-width query, not on the
   bare .nav-calc selector: that selector has the same specificity as style.css's
   `.nav-cta{display:none}` mobile rule, and nn-2026.css loads after style.css,
   so an unscoped display:flex here would silently win the cascade on mobile
   too and leave the button floating over the logo instead of collapsing into
   the burger menu like every other .nav-cta. */
@media(min-width:769px){.nav-calc{display:inline-flex;align-items:center;gap:.45rem}}
/* Icon mirrors .nn-top-arw's stroke treatment (nn-2026.css:675) so every line
   icon in the theme shares one visual language. Stroke is set explicitly
   rather than via currentColor since .nav-cta's own hover transitions
   background/color, not stroke — this keeps the two in lockstep manually. */
.nav-calc-icon{
  width:14px;height:14px;flex:none;fill:none;stroke:var(--bronze-l);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s;
}
.nav-calc:hover .nav-calc-icon{stroke:#fbfaf7}