html{scroll-behavior:smooth;background:#F6F4EF;overflow-x:hidden;scroll-snap-type:y proximity}
body{margin:0;background:#F6F4EF;color:#171C1A;font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
::selection{background:#5B7F8A;color:#fff}

@keyframes nl-emerge{0%{opacity:0;filter:blur(12px);transform:translateY(14px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes nl-cue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(7px);opacity:.85}}

/* Hover states: the design canvas used a `style-hover` attribute (editor-only),
   ported here as real classes since inline styles can't express :hover. */
.nl-link-fade{transition:opacity .3s}
.nl-link-fade:hover{opacity:.6}

.nl-lift:hover{transform:translateY(-2px)}

.nl-lift-deep:hover{transform:translateY(-2px);background:#0F221D}

.nl-lift-nav:hover{transform:translateY(-1px)}

/* Featured-work thumbnail frame. The hatch-pattern background shows briefly
   while each photo loads (or if an image ever fails to load). */
.nl-work-frame{
  overflow:hidden;
  background:#E7E1D6;
  background-image:repeating-linear-gradient(135deg,rgba(23,51,43,.05) 0 1px,rgba(23,51,43,0) 1px 11px);
  box-shadow:0 24px 60px -34px rgba(20,33,29,.55),inset 0 0 0 1px rgba(23,51,43,.1);
}

/* Projects rail: position dots below the focused card, updated by main.js. */
.nl-dot{width:6px;height:6px;border-radius:50%;background:rgba(20,33,29,.22);transition:background .3s,width .3s,height .3s}
.nl-dot-active{width:8px;height:8px;background:#A8402B}

/* Projects rail arrows: click/keyboard nav, seated beside the dot row. */
.nl-proj-arrow{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(20,33,29,.18);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#14211D;
  cursor:pointer;
  transition:background .3s,border-color .3s,color .3s;
}
.nl-proj-arrow:hover{background:#17332B;border-color:#17332B;color:#F6F4EF}

/* Mobile nav: hamburger toggle + full-screen menu (opened/closed via main.js). */
.nl-nav-primary-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nl-nav-toggle{display:none;-webkit-appearance:none;appearance:none;background:none;border:none;padding:8px;margin:-8px 0;cursor:pointer;color:inherit;align-items:center;justify-content:center}

.nl-mobile-menu{position:fixed;inset:0;z-index:61;background:#F6F4EF;display:none;flex-direction:column;align-items:center;justify-content:center;gap:30px;opacity:0;transition:opacity .3s ease}
.nl-mobile-menu.nl-open{display:flex}
.nl-mobile-menu.nl-visible{opacity:1}
.nl-mobile-link{font-family:Newsreader,Georgia,serif;font-size:clamp(28px,7vw,40px);font-weight:300;letter-spacing:-.02em;color:#14211D;transition:opacity .3s}
.nl-mobile-link:hover{opacity:.6}
.nl-mobile-cta{font-family:"Instrument Sans",system-ui,sans-serif;font-size:15px;font-weight:600;background:#17332B;color:#F6F4EF;border-radius:999px;padding:15px 28px;margin-top:8px}
.nl-mobile-cta:hover{opacity:1}
.nl-mobile-close{position:absolute;top:18px;right:clamp(20px,4vw,40px);background:none;border:none;padding:8px;cursor:pointer;color:#14211D}

@media (max-width:720px){
  .nl-nav-primary-links{display:none}
  .nl-nav-toggle{display:flex}
  #nav-cta{display:none}
}

/* Process steps: the desktop grid gives step 1 no left padding (it sits flush
   against the border-free left edge) while steps 2-4 get 32px to clear the
   divider. Once the grid collapses to one column on mobile, match step 1's
   left padding to the rest so all four steps line up. */
@media (max-width:720px){
  .nl-process-grid > div:first-child{padding-left:32px!important}
}

/* Footer: links pinned far right on desktop, stacked below the address block on mobile. */
.nl-footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px}

@media (max-width:600px){
  .nl-footer-row{flex-direction:column;gap:28px}
}

/* Contact form. */
.nl-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){
  .nl-form-row{grid-template-columns:1fr}
}
.nl-input{
  width:100%;
  padding:14px 16px;
  font-family:inherit;
  font-size:15px;
  color:#14211D;
  background:rgba(246,244,239,.9);
  border:1px solid rgba(23,51,43,.18);
  border-radius:10px;
  transition:border-color .3s,background .3s;
}
.nl-input::placeholder{color:rgba(23,51,43,.4)}
.nl-input:focus{outline:none;border-color:#17332B;background:#F6F4EF}

/* Three feature sections (short-term rentals / restaurants / construction). Each
   150vh section snaps its pinned start into view, then a bit more scroll reveals
   the headline group and, shortly after, the tag row / mock-calendar highlight
   (driven by main.js toggling opacity+transform via [data-story-early/-late]). */
.nl-feature{scroll-snap-align:start}
.nl-feature-row{flex-wrap:wrap}
.nl-feature-text{gap:20px}
.nl-cal-card{width:min(78vw,340px);flex:0 0 auto}
.nl-cal-img{width:100%;height:auto;display:block}
.nl-cal-card--lg{width:min(78vw,600px)}

/* Lets the oversized hero card sit on the right and slide behind the text
   instead of wrapping underneath it when the row runs out of horizontal room. */
.nl-feature-row--overlay{position:relative;flex-wrap:nowrap}
.nl-feature-row--overlay .nl-feature-text{position:relative;z-index:2}
.nl-feature-row--overlay .nl-cal-wrap{position:absolute;top:50%;right:0;transform:translateY(-50%);z-index:1}

@media (max-width:820px){
  .nl-feature-row{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
  .nl-feature-text{gap:12px}
  .nl-cal-card{width:210px}
  .nl-cal-img{height:290px;object-fit:cover;object-position:top}
  .nl-cal-card--lg{width:300px}
  .nl-feature-row--overlay{position:static;flex-wrap:wrap}
  .nl-feature-row--overlay .nl-feature-text{position:static;z-index:auto}
  .nl-feature-row--overlay .nl-cal-wrap{position:static;top:auto;right:auto;transform:none}
}

/* Short-term rentals: a 360vh pinned section that pages horizontally through
   three acts (what / why / how) as the visitor scrolls, one scroll-progress
   bucket per act. main.js drives [data-deck-track]'s transform and toggles
   each slide's [data-story-early/-late] children, [data-deck-seg] fee-bar
   widths and [data-deck-halo] opacity, plus plays the how-it-works video only
   while its slide is active. */
.nl-deck-track{position:relative;display:flex;width:300%;height:100%;will-change:transform;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.nl-deck-slide{position:relative;flex:0 0 33.3334%;width:33.3334%;height:100%;display:flex;align-items:center;padding:0 clamp(24px,6.5vw,104px)}

.nl-fee-track{height:10px;border-radius:999px;background:rgba(237,241,236,.09);overflow:hidden;display:flex}
.nl-fee-seg{height:100%;width:0;background:#5B7F8A;transition:width 1.1s cubic-bezier(.22,.61,.36,1) .3s}
.nl-fee-payoff{display:flex;align-items:flex-start;gap:18px;padding:18px 22px;margin-top:8px;border:1px solid rgba(91,127,138,.4);border-radius:14px;background:rgba(91,127,138,.08);max-width:540px}

.nl-widget-halo{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(91,127,138,.4) 0%,rgba(91,127,138,0) 68%);filter:blur(2px);opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1) .2s}

@media (prefers-reduced-motion:reduce){
  .nl-deck-track{transition:none}
}

@media (max-width:820px){
  .nl-deck-slide{padding:0 20px}
  .nl-fee-payoff{padding:14px 18px;gap:14px}
  .nl-widget-halo{width:380px;height:380px}
}