:root{
  --nl-dark:#151d2b;
  --nl-dark-card:#1e2740;
  --nl-cream:#f7f8fa;
  --nl-cream-card:#f0ede5;
  --nl-teal-card:#143a45;
  --nl-red-card:#7d1212;
  --nl-orange:#9b1717;
  --nl-orange-hero:#151d2b;
  --nl-text-cream:#f4f2ed;
  --nl-accent:#f49a33;
}
html{ overflow-x:hidden; max-width:100%; }
body{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  background:var(--nl-dark);
  color:var(--nl-text-cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
::selection{ background:var(--nl-orange); color:#000; }
a{ text-decoration:none; color:inherit; }
.container-nl{ max-width:1440px; }
main .container-nl{ padding-left:calc(1.5rem + 30px) !important; }
@media(min-width:992px){ main .container-nl{ padding-left:calc(3rem + 30px) !important; } }

/* Header */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background-color .2s ease, backdrop-filter .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-bottom:1px solid transparent;
}
#site-header.scrolled{
  background-color:rgba(17,18,19,.9);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(255,255,255,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.nl-logo{ color:#fff; }
.nl-nav a{
  color:rgba(255,255,255,.7);
  font-size:.9rem;
  padding:.5rem 0;
  position:relative;
  transition:color .2s ease;
}
.nl-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:#fff; transform:scaleX(0); transform-origin:right;
  transition:transform .2s ease;
}
.nl-nav a:hover{ color:#fff; }
.nl-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nl-nav a[aria-current="page"]{ color:#fff; }
.nl-dropdown{ position:relative; }
.nl-dropdown-btn{
  background:none; border:none; color:rgba(255,255,255,.7); font-size:.9rem; font-family:inherit;
  display:flex; align-items:center; gap:.3rem; padding:.5rem 0; cursor:pointer; transition:color .2s ease;
}
.nl-dropdown-btn i{ transition:transform .2s ease; }
.nl-dropdown:hover .nl-dropdown-btn, .nl-dropdown:focus-within .nl-dropdown-btn{ color:#fff; }
.nl-dropdown:hover .nl-dropdown-btn i, .nl-dropdown:focus-within .nl-dropdown-btn i{ transform:rotate(180deg); }
.nl-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px); margin-top:.5rem;
  background:#161e2b; border:1px solid rgba(255,255,255,.12); border-radius:.6rem; padding:.5rem;
  min-width:230px; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  box-shadow:0 20px 45px rgba(0,0,0,.45); z-index:20;
}
.nl-dropdown:hover .nl-dropdown-menu, .nl-dropdown:focus-within .nl-dropdown-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.nl-dropdown-menu a{ display:block; padding:.6rem .75rem; border-radius:.4rem; font-size:.85rem; color:rgba(255,255,255,.75); }
.nl-dropdown-menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.mobile-submenu{ border-bottom:1px solid rgba(255,255,255,.15); }
.mobile-submenu summary{ display:flex; align-items:center; justify-content:space-between; min-height:64px; font-size:1.5rem; letter-spacing:-0.02em; cursor:pointer; list-style:none; }
.mobile-submenu summary::-webkit-details-marker{ display:none; }
.mobile-submenu[open] summary i{ transform:rotate(180deg); }
.mobile-submenu summary i{ transition:transform .2s ease; width:20px; height:20px; }
.mobile-submenu-list{ display:flex; flex-direction:column; gap:.25rem; padding-bottom:1rem; }
.mobile-submenu-list a{ font-size:.95rem; color:rgba(255,255,255,.65); padding:.5rem 0; }
.mobile-submenu-list a:hover{ color:#fff; }
.btn-nl-orange{
  background:var(--nl-orange); color:#fff; border:none; font-weight:500; font-size:.9rem;
  border-radius:.5rem; padding:.6rem 1.25rem;
}
.btn-nl-orange:hover{ background:#b81f1f; color:#fff; }
.btn-nl-outline{
  border:1px solid rgba(255,255,255,.5); color:#fff; border-radius:.5rem; font-size:.9rem; font-weight:500;
  padding:.6rem 1.5rem;
}
.btn-nl-outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }

#menu-button{ background:none; border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:.5rem; width:44px; height:44px; }
#menu-button:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); }
#mobile-menu{
  position:fixed; inset:0; z-index:900; background:rgba(17,18,19,.98); backdrop-filter:blur(10px);
  padding:6rem 1.25rem 2rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-link{
  display:flex; align-items:center; justify-content:space-between; min-height:64px;
  border-bottom:1px solid rgba(255,255,255,.15); font-size:1.5rem; letter-spacing:-0.02em;
}

/* Page header (dark hero shell used by internal pages) */
#page-header{
  position:relative; overflow:hidden; background:var(--nl-dark); padding:9rem 0 4rem; border-bottom:1px solid rgba(255,255,255,.1);
}
#page-header::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 85%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 35%, #000 40%, transparent 85%);
}
.page-eyebrow{ display:flex; align-items:center; gap:.4rem; color:var(--nl-accent); font-size:.9rem; font-weight:500; }
.page-badge{ width:56px; height:56px; border-radius:.75rem; background:var(--nl-orange); display:flex; align-items:center; justify-content:center; margin-top:1.5rem; position:relative; z-index:1; }
.page-title{ color:#fff; font-weight:500; letter-spacing:-0.02em; line-height:1.05; font-size:2.6rem; margin-top:1.25rem; max-width:none; position:relative; z-index:1; }
@media(min-width:576px){ .page-title{ font-size:3.4rem; } }
.page-sub{ color:rgba(255,255,255,.55); font-size:1.05rem; line-height:1.6; margin-top:1rem; max-width:560px; position:relative; z-index:1; }
.page-header-sketch{ position:relative; z-index:1; opacity:.9; }
.page-header-sketch img{ width:100%; height:auto; max-width:320px; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; position:relative; z-index:1; }

/* Floating icon rail */
#icon-rail{ position:fixed; right:1.25rem; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:.5rem; }
.rail-btn{
  position:relative; width:44px; height:44px; border-radius:.6rem; background:#fff;
  border:1px solid rgba(155,23,23,.35); color:var(--nl-orange); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08); transition:all .2s ease;
}
.rail-btn:hover{ border-color:var(--nl-orange); }
.rail-btn.is-active{ background:var(--nl-orange); color:#fff; border-color:var(--nl-orange); }
.rail-btn .rail-tip{
  position:absolute; right:calc(100% + .6rem); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--nl-dark); color:#fff; font-size:.78rem; padding:.35rem .7rem; border-radius:.4rem;
  white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.rail-btn:hover .rail-tip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
@media(max-width:991px){ #icon-rail{ display:none; } }

.work-card-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; color:#fff; font-weight:700; font-size:.9rem; background:var(--nl-orange); border:1px solid var(--nl-orange); border-radius:.5rem; padding:.65rem 1.1rem; }
.work-card-link i{ transition:transform .2s ease; }
.work-card-link:hover{ background:#b81f1f; border-color:#b81f1f; }

/* Lightbox (pages with dynamic photo galleries) */
#lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(10,12,18,.95); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s ease; }
#lightbox.lb-open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:88vw; max-height:82vh; object-fit:contain; border-radius:.4rem; }
.lb-close, .lb-prev, .lb-next{ position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lb-close{ top:1.5rem; right:1.5rem; }
.lb-prev{ left:1.5rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.5rem; top:50%; transform:translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:rgba(255,255,255,.18); }

/* Final CTA */
#svc-cta{ background:var(--nl-orange); color:#fff; padding:5rem 0; text-align:center; }
#svc-cta h2{ font-size:2.2rem; font-weight:500; letter-spacing:-0.02em; }
@media(min-width:576px){ #svc-cta h2{ font-size:2.8rem; } }
#svc-cta p{ color:rgba(255,255,255,.85); font-size:1.05rem; margin-top:.75rem; }
#svc-cta .cta-btn-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.75rem; }

/* Footer */
footer.nl-footer{ background:var(--nl-dark); border-top:1px solid rgba(255,255,255,.1); }
.footer-col p.label{ font-size:.75rem; color:rgba(255,255,255,.35); }
.footer-col a{ display:block; font-size:.9rem; margin-top:.75rem; color:#fff; }
.footer-col a:hover{ color:var(--nl-orange); }

[data-reveal]{ opacity:1; }