/* Northline (v2, October 2026). Hand written; the pages come from scripts/showcase/northline.py.
   Type, grid, colour and motion values are measured in design/showcase/northline-v2/ (see
   docs/showcase/northline.md). Class names carry the nl- prefix. */

@font-face{font-family:'Inter Tight NL';src:url('/static/inter-tight-nl-645e5d967346.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --paper:#f5f2ec;--ink:#0c0b09;--rule:#d9d4ca;--mute:#58534b;--soft:#736d64;--pill:#ebe5da;--field:#2a2824;--alert:#e5603f;--stone:#e9e3d8;
  --font:'Inter Tight NL',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* grid and spacing: the reference's own fluid sizes, so they also stop growing where its sizes do (1920 px) */
  --margin:clamp(.875rem,.434rem + 1.23vw,2.429rem);--gap:1rem;--bar:34px;
  --fs:calc(100svh - var(--bar));
  --s-2:clamp(1.75rem,1.678rem + .36vw,2.108rem);--s-3:clamp(2.25rem,2.036rem + 1.07vw,3.321rem);--s-4:clamp(2.5rem,2.072rem + 2.14vw,4.642rem);
  --pad-s:clamp(3rem,2.428rem + 2.86vw,5.858rem);--pad-m:clamp(4rem,3.142rem + 4.29vw,8.287rem);--pad-l:clamp(5.5rem,4.214rem + 6.43vw,11.929rem);
  /* type roles: the reference's fluid sizes where it uses them as they are; the rest are fitted to its measured sizes */
  --t-display:clamp(2.5rem,1.813rem + 5.84vw,9.229rem);
  --t-h1h:clamp(3.02rem,2.32rem + 4.2vw,7.52rem);
  --t-h2:clamp(2.39rem,1.95rem + 2.2vw,4.59rem);
  --t-stage:clamp(30px,calc(62.88px + (100vw - 1440px) * .02489),76px);
  --t-h3:clamp(32.5px,calc(56px + (100vw - 1440px) * .02238),56px);
  --t-mark:clamp(24.69px,calc(56px + (100vw - 1440px) * .02982),56px);
  --t-foot:clamp(36.75px,calc(47.98px + (100vw - 1440px) * .0107),47.98px);
  --t-h4:clamp(1.51rem,1.358rem + .76vw,2.268rem);
  --t-h5:clamp(1.2rem,1.126rem + .37vw,1.571rem);
  --t-large:clamp(1.25rem,1.06rem + .26vw,1.6rem);
  --t-main-f:clamp(1rem,.986rem + .07vw,1.071rem);--t-main:var(--t-main-f);
  --t-small:.875rem;
  --t-pre:clamp(136px,calc(256px + (100vw - 1440px) * .11429),256px);
  /* the indented first word of a statement: the reference's 5rem step */
  --indent:clamp(3rem,2.428rem + 2.86vw,5.858rem);
  /* eases: the reference's own curves as measured (design/showcase/northline-v2/reference, Copy spec 4.1) */
  --e1:cubic-bezier(.87,0,.13,1);   /* primary: underline links */
  --e2:cubic-bezier(.16,1,.3,1);    /* secondary: lines, mini nav, hovers, settle */
  --e3:cubic-bezier(.53,.23,.25,1); /* tertiary: preloader fade */
  --e4:cubic-bezier(.7,0,.22,1);    /* menu: menu and drawer clip */
  --e5:cubic-bezier(.76,0,.24,1);   /* transition: page screen, facade lift */
  --e6:cubic-bezier(.83,0,.17,1);   /* text loader: preloader mark */
}
/* from 1440 px display type takes the reference's 7.5rem step, from 1920 px its 8rem step (152 px, where it stops) */
@media (min-width:1440px){:root{--t-display:clamp(4.25rem,3.322rem + 4.64vw,8.892rem)}}
/* from 1920 px the type steps up a size: small labels take the body size, body text 1.25rem, leads the h5 size,
   the lead and process statements the h2 size, stage titles the 5rem step and button labels 1rem */
@media (min-width:1920px){
  :root{--t-display:clamp(4.5rem,3.5rem + 5vw,9.5rem);--t-small:var(--t-main-f);--t-main:1.25rem;--t-large:var(--t-h5);--t-stage:clamp(3rem,2.428rem + 2.86vw,5.858rem)}
  .nl-process-text,.nl-sv-text,.nl-lead-title{--t-h3:var(--t-h2)}
  .nl .nl-pill,.nl .nl-mini-menu{font-size:1rem}
  .nl .nl-detail-main .nl-large{max-width:24.8em}
  .nl .nl-foot{padding-bottom:1.5rem}
}
@media (max-width:479px){:root{--t-large:var(--t-main)}}
@media (max-width:359px){:root{--bar:44px}}

html{background:var(--paper);scroll-behavior:auto;scroll-padding-top:0}
body.nl{margin:0;background:var(--paper);color:var(--ink);font:500 var(--t-main)/1.2 var(--font);letter-spacing:-.024em;font-kerning:normal;text-rendering:optimizeLegibility}
body.nl.menu-open,body.nl.nl-drawer-open{overflow:hidden}
/* resets kept at class weight (:where adds none) so every component rule below wins over them */
.nl :where(a){color:inherit;text-decoration:none}
.nl :where(p,h1,h2,h3,ul,ol,figure,dl,dd){margin:0}
.nl :where(ul,ol){padding:0;list-style:none}
.nl :where(button){font:inherit;color:inherit;letter-spacing:inherit}
.nl :focus-visible{outline:2px solid currentColor;outline-offset:4px}
.nl .nl-pill:focus-visible,.nl .nl-mini-menu:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
/* containers that take focus from a script (the preview, a section reached from the services index) show no ring */
.nl [tabindex="-1"]:focus{outline:none}
.nl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{background:var(--paper);color:var(--ink);font-weight:650;text-transform:uppercase;font-size:var(--t-small)}

/* ---------- type roles ---------- */
.nl-display{font-size:var(--t-display);line-height:.95;font-weight:500;letter-spacing:-.006em;text-transform:uppercase}
.nl-statement{font-size:var(--t-h3);line-height:1.05;font-weight:650;letter-spacing:-.0375em;text-wrap:pretty}
.nl-large{font-size:var(--t-large);line-height:1.2;letter-spacing:-.021em;text-wrap:pretty}
.nl-eyebrow{font-size:var(--t-small);line-height:1.2;font-weight:650;letter-spacing:0;text-transform:uppercase;font-feature-settings:"case"}
/* a statement's first word sits in from the edge; after splitting, only the first line keeps the indent */
.nl-indent{text-indent:var(--indent)}
.nl-indent .nl-line{text-indent:0}
.nl-indent .nl-line:first-child{text-indent:var(--indent)}
.nl-statement-group .nl-statement+.nl-statement{margin-top:1.05em}

/* split lines (site.js wraps each rendered line; without JavaScript the text is plain) */
/* a split line keeps the break the paragraph had (shaping inside one run can be a hair wider than
   word by word), and its mask reaches .15em past the right edge so nothing is clipped */
.nl-line{display:block;overflow:hidden;padding:0 .15em .08em 0;margin:0 -.15em -.08em 0}
.nl-line-in{display:block;white-space:nowrap}
.nl-w{display:inline}

/* ---------- masks, roll labels, underline links, pills ---------- */
.nl-mask{display:block;overflow:hidden}
.nl-ri{display:block}
.nl-rt{display:block;text-shadow:0 var(--roll,1.2em) 0 currentColor;transition:transform .545s var(--e2)}
.nl-dot{display:block;flex:none;width:8px;height:8px;border:1px solid currentColor;border-radius:50%;transition:transform .545s var(--e2),background-color .3s var(--e2)}
.nl-pill{display:inline-flex;align-items:center;gap:1rem;min-height:48px;padding:0 1.25rem;border:0;border-radius:100vw;background:var(--ink);color:var(--paper);font-size:var(--t-small);font-weight:650;line-height:1.2;letter-spacing:0;text-transform:uppercase;white-space:nowrap;cursor:pointer;font-feature-settings:"case"}
.nl-pill .nl-mask{line-height:1.2}
.nl-pill-light{background:var(--paper);color:var(--ink)}
.nl-ul{position:relative;display:inline-flex;align-items:center;gap:.75rem}
.nl-ul::before,.nl-ul::after{content:'';position:absolute;left:0;right:0;bottom:-.2em;height:.1em;background:currentColor;transition:transform .725s var(--e1)}
.nl-ul::before{transform-origin:right center}
.nl-ul::after{transform:scaleX(0);transform-origin:left center;transition-delay:0s}
.nl-uline{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-small);font-weight:650;line-height:1;letter-spacing:0;text-transform:uppercase;font-feature-settings:"case"}
@media (hover:hover) and (min-width:768px){
  .nl-pill:hover .nl-rt,.nl-navlink:hover .nl-rt,.nl-menu-btn:hover .nl-rt,.nl-mini-menu:hover .nl-rt,.nl-menu-close:hover .nl-rt,.nl-drawer-close:hover .nl-rt,
  .nl-menu-small:hover .nl-rt,.nl-foot-link:hover .nl-rt,.nl-foot-legal a:hover .nl-rt,.nl-back:hover .nl-rt{transform:translateY(calc(-1 * var(--roll,1.2em)))}
  .nl-pill:hover .nl-dot,.nl-hero-link:hover .nl-dot{transform:scale(.6);background:currentColor}
  .nl-hero-link:hover .nl-ul::before,.nl-uline:hover .nl-ul::before,.nl-hp-end:hover .nl-ul::before{transform:scaleX(0)}
  .nl-hero-link:hover .nl-ul::after,.nl-uline:hover .nl-ul::after,.nl-hp-end:hover .nl-ul::after{transform:scaleX(1);transition-delay:.2s}
}

/* ---------- showcase top bar ---------- */
.nl-bar{position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:var(--bar);padding:0 var(--margin);background:var(--ink);color:var(--paper);font-size:12px;line-height:1.2;letter-spacing:0}
.nl-bar p{color:rgba(245,242,236,.78);text-wrap:balance}
.nl-bar a{position:relative;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(245,242,236,.45);text-underline-offset:3px}
.nl-bar a::after{content:'';position:absolute;left:-.5rem;right:-.5rem;top:50%;height:44px;transform:translateY(-50%)}
.nl-bar a:hover{text-decoration-color:currentColor}

/* ---------- header ---------- */
.nl-head{position:absolute;z-index:10;top:var(--bar);left:0;right:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:var(--margin) var(--margin) 0;color:var(--ink)}
[data-tone=light] .nl-head,[data-tone=ink] .nl-head{color:var(--paper)}
.nl-mark{grid-column:1 / 6;justify-self:start;padding-block:max(0px,(44px - 1.05em) / 2);margin-block:min(0px,(1.05em - 44px) / 2);font-size:var(--t-mark);line-height:1.05;font-weight:650;letter-spacing:-.0375em}
.nl-mark .nl-mask{padding-bottom:.06em}
.nl-nav{grid-column:7 / 11;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0}
.nl-nav ul{display:flex;align-items:center;flex-wrap:nowrap}
.nl-nav li{display:flex;align-items:center;margin-right:.5rem}
.nl-navlink{display:flex;align-items:center;min-height:44px;--roll:1.4em}
.nl-navlink .nl-mask{line-height:1;padding-block:.125rem}
.nl-comma{font-weight:600;font-size:1.2em;line-height:1}
/* the pill rises into its slot on arrival; the slot keeps 6 px round it so the focus ring is never clipped */
.nl-head-cta{grid-column:11 / 13;justify-self:end;display:block;margin:-6px;padding:6px;overflow:hidden}
.nl-head-pill{vertical-align:top}
.nl-menu-btn{display:none;grid-column:12 / 13;justify-self:end;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;margin:-6px 0;padding:0;border:0;background:none;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0;cursor:pointer;--roll:1em}
/* without JavaScript the menu cannot open, so MENU becomes a link to the footer navigation */
.nl-menu-jump{display:none;grid-column:12 / 13;justify-self:end;align-items:center;min-height:44px;margin:-6px 0;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0}
@media (max-width:1199px){.nl-nav{grid-column:6 / 11}}
@media (max-width:991px){
  .nl-nav,.nl-head-cta{display:none}
  .nl-menu-btn{display:flex}
  html:not(.nl-js) .nl-menu-btn{display:none}
  html:not(.nl-js) .nl-menu-jump{display:flex}
  .nl-mark{grid-column:1 / 11}
}

/* ---------- mini nav: after 500 px of scroll. It steps aside while text or a control passes under it,
   turns light over ink sections and dark photographs, and leaves the footer to its own links (site.js) ---------- */
.nl-mini{position:fixed;z-index:20;top:var(--margin);right:var(--margin);display:flex;gap:.5rem;pointer-events:none}
/* the slot masks the pill as it rises; 6 px of room round its top and sides keeps the focus ring whole */
.nl-mini-slot{display:block;margin:-6px -6px 0;padding:6px 6px 0;overflow:hidden}
.nl-mini-slot:focus-within{overflow:visible}
/* going: MENU first, ENQUIRE .05 s after it; coming: ENQUIRE first, MENU .1 s after it */
.nl-mini .nl-mini-slot>*{transform:translateY(110%);visibility:hidden;pointer-events:auto;transition:transform .875s var(--e2),visibility 0s linear .875s,background-color .3s var(--e2),color .3s var(--e2)}
.nl-mini .nl-mini-slot:first-child>*{transition-delay:.05s,.925s,0s,0s}
.nl-mini-on:not(.nl-mini-away) .nl-mini .nl-mini-slot>*{transform:none;visibility:visible;transition:transform .875s var(--e2),visibility 0s,background-color .3s var(--e2),color .3s var(--e2)}
.nl-mini-on:not(.nl-mini-away) .nl-mini .nl-mini-slot+.nl-mini-slot>*{transition-delay:.1s,0s,0s,0s}
.nl-mini-dark .nl-mini-enquire{background:var(--paper);color:var(--ink)}
/* while the script looks at what lies under the pills, the hit test passes through them */
.nl-mini-menu{display:flex;align-items:center;min-height:48px;padding:0 .75rem;border:0;border-radius:100vw;background:var(--pill);color:var(--ink);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;cursor:pointer;--roll:1.2em}
.nl-mini-menu .nl-mask{line-height:1.2}

/* ---------- full screen menu ---------- */
.nl-menu{position:fixed;z-index:50;inset:0;display:flex;flex-direction:column;padding:var(--margin);overflow-y:auto;overscroll-behavior:contain;background:var(--ink);color:var(--paper);visibility:hidden;clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .5s var(--e4),visibility 0s linear .5s}
.nl-menu[data-open]{visibility:visible;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path 1s var(--e4),visibility 0s}
.nl-menu-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nl-menu-mark{font-size:var(--t-mark);line-height:1.05;font-weight:650;letter-spacing:-.0375em}
.nl-menu-close,.nl-drawer-close{display:flex;align-items:center;justify-content:flex-end;min-width:44px;min-height:44px;padding:0;border:0;background:none;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0;cursor:pointer;--roll:1em}
.nl-menu-list{margin:auto 0;padding:var(--s-4) 0}
.nl-menu-link{display:block;min-height:44px;margin-bottom:clamp(0px,var(--t-h2) - 40px,4px);font-size:var(--t-h2);line-height:1;font-weight:500;letter-spacing:-.006em;text-transform:uppercase}
.nl-menu-link .nl-mask{line-height:1}
.nl-mr{display:block;transform:translateY(100%);transition:transform .3s var(--e4)}
.nl-menu[data-open] .nl-mr{transform:none;transition:transform 1.15s var(--e2) calc(.55s + var(--i,0) * .0425s)}
.nl-menu-foot{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0}
.nl-menu-small{display:flex;align-items:center;min-height:44px;--roll:1em}
.nl-menu-note{margin-top:1.5rem;color:rgba(245,242,236,.62)}
@media (hover:hover) and (min-width:768px){
  .nl-menu-list:hover .nl-menu-link{opacity:.35}
  .nl-menu-list .nl-menu-link{transition:opacity .3s var(--e2)}
  .nl-menu-list .nl-menu-link:hover{opacity:1}
}

/* ---------- photo covers and reveals ---------- */
.nl-cover{position:relative;display:block;overflow:hidden;background:var(--stone)}
.nl-cover img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.nl-cover::after{content:'';position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.nl-motion .nl-cover:not(.is-in)::after{opacity:1}
.nl-motion .nl-cover:not(.is-in) img{transform:scale(1.1025)}
.nl-motion .nl-cover.is-in::after{transition:opacity .6s var(--e2)}
.nl-motion .nl-cover.is-in img{transition:transform 1.2s var(--e2)}
.nl-motion [data-split]:not(.is-in) .nl-line-in{transform:translateY(120%)}
.nl-motion [data-split].is-in .nl-line-in{transition:transform 1s var(--e2) calc(var(--d,0s) + var(--i,0) * var(--st,.0625s))}
[data-intro]{--st:.0825s}
/* rule rows rise 20 px and fade in, one after another */
.nl-motion [data-rows]:not(.is-in) li{opacity:0;transform:translateY(20px)}
.nl-motion [data-rows].is-in li{transition:opacity .8s var(--e2) calc(var(--i,0) * .0625s),transform 1s var(--e2) calc(var(--i,0) * .0625s)}

/* ---------- intro (after the preloader or the page screen) ---------- */
.nl-motion:not(.nl-in) .nl-head .nl-ri,.nl-motion:not(.nl-in) .nl-head-pill,.nl-motion:not(.nl-in) .nl-hero .nl-ri,.nl-motion:not(.nl-in) .nl-hh .nl-ri,.nl-motion:not(.nl-in) .nl-homes .nl-ri,.nl-motion:not(.nl-in) .nl-gal-actions .nl-mini-slot>*{transform:translateY(120%)}
.nl-motion:not(.nl-in) .nl-nav .nl-ri,.nl-motion:not(.nl-in) .nl-hero-row .nl-ri,.nl-motion:not(.nl-in) .nl-hh-row .nl-ri{transform:translateY(200%)}
.nl-motion.nl-in .nl-head .nl-ri,.nl-motion.nl-in .nl-head-pill,.nl-motion.nl-in .nl-hero .nl-ri,.nl-motion.nl-in .nl-hh .nl-ri,.nl-motion.nl-in .nl-homes .nl-ri,.nl-motion.nl-in .nl-gal-actions .nl-mini-slot>*{transition:transform 1s var(--e2) var(--d,0s)}

/* ---------- preloader (first page of a tab) and page screen ---------- */
.nl-loader{display:none}
html.nl-first .nl-loader{position:fixed;z-index:10000;inset:0;display:block;background:var(--ink);color:var(--paper);pointer-events:none;animation:nl-gone .35s var(--e3) 1.6s forwards}
.nl-pre-line{position:absolute;top:0;left:0;width:100%;height:5px;background:var(--paper);transform:translateX(-100%);animation:nl-line-a 1s var(--e5) .05s forwards,nl-line-b 1s var(--e5) 1.2s forwards}
.nl-pre-foot{position:absolute;left:var(--margin);right:var(--margin);bottom:var(--margin);display:flex;align-items:flex-end;gap:5rem}
.nl-pre-mark{height:.8em;overflow:hidden;font-size:var(--t-pre);line-height:.8;font-weight:650;letter-spacing:-.0375em}
.nl-pre-roll{display:block;animation:nl-roll .875s var(--e6) .05s forwards}
.nl-pre-roll span{display:block;height:.8em}
.nl-pre-text{font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-pre-spin{width:21px;height:21px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:butt;animation:nl-spin .6s linear infinite}
@keyframes nl-line-a{to{transform:translateX(-42%)}}
@keyframes nl-line-b{from{transform:translateX(-42%)}to{transform:none}}
@keyframes nl-roll{to{transform:translateY(-.8em)}}
@keyframes nl-spin{to{transform:rotate(1turn)}}
@keyframes nl-gone{to{opacity:0;visibility:hidden}}
@media (max-width:479px){.nl-pre-foot{flex-wrap:wrap;gap:1rem}.nl-pre-text{max-width:20ch}}
.nl-screen{position:fixed;z-index:10000;inset:0;background:var(--ink);opacity:0;visibility:hidden;pointer-events:none}
html.nl-arrive .nl-screen{opacity:1;visibility:visible;animation:nl-gone 0s 3s forwards}
html.nl-arrive.nl-in .nl-screen{opacity:0;visibility:hidden;transition:opacity .875s var(--e2),visibility 0s .875s}
html.nl-js.nl-leave .nl-screen{opacity:1;visibility:visible;animation:none;transition:opacity .35s var(--e2)}

/* ---------- home hero: the facade lifts to show the inside; the next section slides over it ---------- */
.nl-hero{position:relative;z-index:1;height:calc(2 * var(--fs))}
.nl-hero-stick{position:sticky;top:0;height:var(--fs);overflow:hidden;background:var(--ink);color:var(--paper)}
.nl-hero-media,.nl-hero-drift,.nl-hero-settle,.nl-hero-inside,.nl-hero-facade,.nl-hero-shade,.nl-hero-tint,.nl-hero-inside-shade{position:absolute;inset:0}
.nl-hero picture{display:block;position:absolute;inset:0}
.nl-hero-img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.nl-hero-drift{will-change:transform}
.nl-motion:not(.nl-in) .nl-hero-settle,.nl-motion:not(.nl-in) .nl-hh-settle{transform:scale(1.1);filter:blur(5px)}
.nl-motion.nl-in .nl-hero-settle,.nl-motion.nl-in .nl-hh-settle{transition:transform 1.8s var(--e2),filter 1.8s var(--e2)}
.nl-hero-facade{clip-path:inset(0 0 0 0);transition:clip-path .875s var(--e5)}
.nl-hero-facade .nl-hero-img{transition:transform .875s var(--e5)}
.nl-hero-inside .nl-hero-img{transition:transform 1s var(--e5)}
.nl-hero-inside-shade{background:var(--ink);opacity:.6;transition:opacity 1s var(--e5)}
.nl-hero-shade{z-index:2;background:var(--ink);opacity:0}
/* the tint: light through the middle of the photo, darker only where text sits. The two soft burns
   (behind the nav and behind VIEW HOME) were sized by measuring every label's backdrop */
.nl-hero-tint{z-index:3;--burn:radial-gradient(18% 9% at 56% 6%,rgba(12,11,9,.45),rgba(12,11,9,0));background:
  var(--burn),
  radial-gradient(30% 30% at 100% 50%,rgba(12,11,9,.22),rgba(12,11,9,0)),
  linear-gradient(180deg,rgba(12,11,9,.30) 0%,rgba(12,11,9,.22) 35%,rgba(12,11,9,.22) 60%,rgba(12,11,9,.40) 100%)}
/* the nav starts further left below 1200 px; below 992 only MENU sits at the top, at the right */
@media (max-width:1199px){.nl-hero-tint{--burn:radial-gradient(26% 10% at 53% 6%,rgba(12,11,9,.5),rgba(12,11,9,0))}}
@media (max-width:991px){.nl-hero-tint{--burn:radial-gradient(20% 12% at 100% 0%,rgba(12,11,9,.45),rgba(12,11,9,0))}}
@media (hover:hover) and (min-width:768px){
  .nl-hero:has(.nl-hero-link:hover,.nl-hero-link:focus-visible) .nl-hero-facade{clip-path:inset(0 0 100% 0)}
  .nl-hero:has(.nl-hero-link:hover,.nl-hero-link:focus-visible) .nl-hero-facade .nl-hero-img{transform:scale(1)}
  .nl-hero:has(.nl-hero-link:hover,.nl-hero-link:focus-visible) .nl-hero-inside .nl-hero-img{transform:scale(1)}
  .nl-hero:has(.nl-hero-link:hover,.nl-hero-link:focus-visible) .nl-hero-inside-shade{opacity:.3}
}
@media (hover:none),(max-width:767px){.nl-hero-inside{display:none}}
/* keep the lit doors below the middle row: on narrow screens the photo sits a little lower in its frame */
@media (min-width:768px) and (max-aspect-ratio:3/2){.nl-hero-facade .nl-hero-img{transform-origin:50% 0}}
@media (max-width:767px){.nl-hero-facade .nl-hero-img{object-position:50% 0}}
@media (max-width:359px){.nl-hero-facade .nl-hero-img{object-position:50% 27%}}
.nl-hero-row{position:absolute;z-index:4;top:50%;left:var(--margin);right:var(--margin);display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translateY(-50%);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;white-space:nowrap}
.nl-hero-link{display:flex;align-items:center;min-height:44px}
.nl-hero-link .nl-mask{padding-bottom:.35em;margin-bottom:-.35em}
.nl-hero-link .nl-ul{line-height:1}
.nl-hero-foot{position:absolute;z-index:4;left:var(--margin);right:var(--margin);bottom:var(--margin);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap)}
.nl-hero-title{max-width:16em;font-size:var(--t-h4);line-height:1.2;font-weight:500;letter-spacing:-.0375em;text-wrap:pretty}
.nl-hero-scroll{font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;white-space:nowrap;font-feature-settings:"case"}
@media (max-width:767px){
  .nl-hero-featured{display:none}
  .nl-hero-tint{background:linear-gradient(180deg,rgba(12,11,9,.30) 0%,rgba(12,11,9,.22) 30%,rgba(12,11,9,.24) 55%,rgba(12,11,9,.43) 78%,rgba(12,11,9,.50) 100%)}
}
/* short phones (such as 375 by 667) put the lit doors right behind the statement: a little more shade there */
@media (max-width:767px) and (min-aspect-ratio:11/20){
  .nl-hero-tint{background:linear-gradient(180deg,rgba(12,11,9,.30) 0%,rgba(12,11,9,.22) 30%,rgba(12,11,9,.26) 55%,rgba(12,11,9,.48) 78%,rgba(12,11,9,.54) 100%)}
}
@media (max-width:479px){
  .nl-hero-foot{flex-direction:column;align-items:flex-start;gap:var(--gap)}
  .nl-hero-title{font-size:var(--t-h5)}
}

/* ---------- about: the curtain that slides over the hero ---------- */
.nl-about{position:relative;z-index:2;margin-top:calc(var(--bar) - 100svh);padding:var(--s-3) var(--margin) var(--pad-l);background:var(--paper)}
.nl-about-title{margin-bottom:var(--s-2)}
.nl-about-media,.nl-about-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.nl-about-photo{grid-column:5 / -1;width:calc(var(--t-display) * 3.45);max-width:100%;aspect-ratio:3 / 2}
.nl-about-body{margin-top:var(--s-2);align-items:start}
.nl-about-copy{grid-column:5 / 10;grid-row:1}
.nl-about-copy .nl-large{max-width:21.4em}
.nl-about-copy .nl-large+.nl-large{margin-top:1em}
.nl-about-pill{margin-top:var(--s-2)}
.nl-about-eyebrow{grid-column:10 / -1;grid-row:1;justify-self:end;white-space:nowrap}
@media (max-width:991px){
  .nl-about{padding-top:var(--s-3)}
  .nl-about-title{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .nl-about-photo{grid-column:1 / -1}
  .nl-about-body{display:block}
  .nl-about-eyebrow{justify-self:start;margin-bottom:1rem}
}
@media (max-width:767px){.nl-about-photo{width:100%}}

/* ---------- featured homes ---------- */
.nl-featured{position:relative;z-index:2;padding:0 var(--margin) var(--pad-l);background:var(--paper)}
.nl-featured-head{display:block;margin-bottom:var(--s-2);font-weight:inherit}
.nl-fh-a{display:block}
.nl-fh-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
.nl-fh-b{grid-column:3 / span 7}
.nl-fh-count{grid-column:10 / -1;justify-self:end;letter-spacing:-.036em}
.nl-feat-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--pad-m);align-items:start}
/* each row pairs a wide landscape card (seven columns) with an upright one (five), the landscape centred beside it,
   so the heights stay close and the stagger never leaves a tall blank under the shorter card */
.nl-feat-land{grid-column:1 / span 7;align-self:center}
.nl-feat-port{grid-column:8 / span 5}
.nl-feat-link{display:block}
.nl-feat-cover{width:100%}
.nl-feat-land .nl-feat-cover{aspect-ratio:16 / 11}
.nl-feat-port .nl-feat-cover{aspect-ratio:.7356}
.nl-feat-cap{display:flex;justify-content:space-between;gap:1rem;margin-top:11px;overflow:hidden;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-feat-title{display:flex;min-width:0}
.nl-feat-index{margin-right:1.5rem}
.nl-feat-sub{display:block;margin-top:.45em;color:var(--mute)}
.nl-feat-aside{position:relative;align-self:flex-start;overflow:hidden;text-align:right}
.nl-feat-year{display:block;color:var(--mute);white-space:nowrap;transition:transform .545s var(--e2)}
.nl-feat-cta{position:absolute;top:0;right:0;white-space:nowrap;transform:translateY(105%);transition:transform .545s var(--e2)}
@media (hover:hover) and (min-width:1060px){
  .nl-feat-link:hover .nl-feat-year,.nl-feat-link:focus-visible .nl-feat-year{transform:translateY(-105%)}
  .nl-feat-link:hover .nl-feat-cta,.nl-feat-link:focus-visible .nl-feat-cta{transform:none}
}
.nl-feat-more{display:flex;justify-content:center;margin-top:var(--s-4)}
@media (max-width:991px){.nl-feat-index{margin-right:1rem}}
@media (max-width:767px){
  .nl-feat-list{row-gap:var(--pad-s)}
  .nl-feat-1{grid-column:1 / span 10}
  .nl-feat-2{grid-column:4 / span 9}
  .nl-feat-3{grid-column:2 / span 10}
  .nl-feat-4{grid-column:1 / span 9}
  .nl-feat-5{grid-column:2 / span 11}
  .nl-feat-6{grid-column:1 / span 9}
  .nl-feat-more{margin-top:var(--s-4)}
}
@media (max-width:479px){.nl-fh-b{grid-column:1 / span 8}}

/* ---------- process block (home) ---------- */
.nl-process{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:0 var(--margin) var(--pad-l);background:var(--paper)}
.nl-process-side{grid-column:1 / span 3}
.nl-process-eyebrow{margin-bottom:var(--s-2)}
.nl-process-photo{aspect-ratio:1}
.nl-process-rows{margin-top:1.5rem}
.nl-process-main{grid-column:5 / -1;padding-top:.15em}
.nl-process-text{max-width:15.8em;font-size:var(--t-h3)}
.nl-process-text .nl-statement{font-size:1em}
.nl-process-lead{max-width:23.5em;margin-top:var(--s-2)}
.nl-process-pill{margin-top:var(--s-3)}
.nl-rows li{display:flex;gap:0;padding:.5rem 0;border-bottom:1px solid var(--rule);line-height:1.2}
.nl-rows-i{flex:none;width:2.4em;color:var(--mute)}
@media (max-width:767px){
  .nl-process{display:block}
  .nl-process-main{margin-top:var(--pad-s)}
}

/* ---------- site note (home and approach) ---------- */
.nl-note{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:0 var(--margin) var(--pad-l);background:var(--paper)}
.nl-note-eyebrow{grid-column:1 / -1;margin-bottom:1.5rem}
.nl-note-side{grid-column:1 / span 5}
.nl-note-photo{aspect-ratio:3 / 2}
.nl-note-copy{margin-top:1.4rem}
.nl-note-copy .nl-large+.nl-large{margin-top:1.2em}
.nl-note-sign{margin-top:var(--s-2);font-size:var(--t-small);font-weight:650;line-height:1.5;letter-spacing:0;text-transform:uppercase;font-feature-settings:"case"}
.nl-note-card{grid-column:8 / -1;display:block}
.nl-note-frame{position:relative;display:block;aspect-ratio:.754;overflow:hidden;background:var(--stone)}
.nl-note-bg{position:absolute;inset:0}
.nl-note-wash{position:absolute;inset:0;background:rgba(12,11,9,.56);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s var(--e2)}
.nl-note-inner{position:absolute;left:20%;right:20%;top:50%;display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--paper);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;opacity:0;transform:translateY(-50%) scale(.6);transition:transform .875s var(--e2),opacity .5s var(--e2)}
.nl-note-in-img{display:block;width:100%;aspect-ratio:2 / 3;overflow:hidden}
.nl-note-in-img img{display:block;width:100%;height:100%;object-fit:cover}
.nl-note-bg img{transition:transform .875s var(--e2)}
.nl-note-cap{display:flex;align-items:baseline;gap:1.5rem;margin-top:11px;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-note-cta{margin-left:auto}
@media (hover:hover) and (min-width:768px){
  .nl-note-card:hover .nl-note-wash,.nl-note-card:focus-visible .nl-note-wash{opacity:1}
  .nl-note-card:hover .nl-note-inner,.nl-note-card:focus-visible .nl-note-inner{opacity:1;transform:translateY(-50%) scale(1)}
  .nl-note-card:hover .nl-note-bg img,.nl-note-card:focus-visible .nl-note-bg img{transform:scale(1.1)}
}
@media (max-width:767px){
  .nl-note{display:block}
  .nl-note-card{margin-top:var(--s-4)}
  .nl-note-inner{display:none}
}

/* ---------- call to action band ---------- */
.nl-cta{display:flex;flex-direction:column;align-items:center;padding:0 var(--margin) var(--s-2);background:var(--paper)}
.nl-cta-title{align-self:stretch;margin-bottom:var(--s-2)}
.nl-cta-a,.nl-cta-b{display:block}
.nl-cta-b{text-align:right}
@media (max-width:767px){
  .nl-cta{align-items:flex-start}
  .nl-cta-a,.nl-cta-b{display:inline}
  .nl-cta-b{text-align:left}
}

/* ---------- footer ---------- */
.nl-foot{position:relative;z-index:2;padding:var(--s-2) var(--margin) 1rem;border-top:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.nl-foot-top,.nl-foot-base{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.nl-foot-art{grid-column:1 / span 3}
.nl-foot-photo{aspect-ratio:4 / 5}
.nl-foot-mono{display:block;width:100%;height:auto;margin-top:1.2rem;fill:var(--ink)}
.nl-foot-nav{grid-column:5 / span 4}
.nl-foot-nav ul{margin-top:1rem}
.nl-foot-link{display:block;width:fit-content;font-size:var(--t-foot);line-height:1.05;font-weight:650;letter-spacing:-.0375em;--roll:1.05em}
.nl-foot-link .nl-mask{line-height:1.05}
.nl-foot-nav li{display:flex}
.nl-foot-nav li+li{margin-top:.4rem}
.nl-foot-info{grid-column:9 / span 4}
.nl-foot-info p:not(.nl-eyebrow){font-size:var(--t-main);line-height:1.2}
.nl-foot-ack p:not(.nl-eyebrow){max-width:25.4em;margin-top:1rem}
.nl-foot-facts{margin-top:var(--s-4)}
.nl-foot-facts .nl-eyebrow{margin-bottom:1rem}
.nl-foot-facts p+p{margin-top:4px}
.nl-foot-facts b{font-weight:650}
.nl-foot-base{margin-top:var(--pad-m);align-items:end;font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-foot-time{grid-column:1 / span 4}
.nl-foot-legal{grid-column:5 / span 4;display:flex;flex-direction:column;align-items:flex-start}
.nl-foot-legal a{display:flex;align-items:center;min-height:24px;--roll:1.2em}
.nl-foot-credit{grid-column:9 / -1;justify-self:end}
.nl-foot-credit a{text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.2em}
.nl-foot-note{max-width:62ch;margin-top:var(--s-3);color:var(--mute);font-size:var(--t-small);line-height:1.35}
@media (max-width:767px){
  .nl-foot{padding-top:30px}
  .nl-foot-top{display:flex;flex-direction:column}
  .nl-foot-nav{order:1}
  .nl-foot-info{order:2;margin-top:var(--s-4)}
  .nl-foot-art{order:3;margin-top:var(--s-4)}
  .nl-foot-info p:not(.nl-eyebrow){font-size:var(--t-small);line-height:1.37}
  .nl-foot-facts{margin-top:var(--s-4)}
  .nl-foot-link{padding-block:3px;margin-block:-3px}
  .nl-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:var(--s-4)}
  .nl-foot-time{width:100%;margin-bottom:.75rem}
  .nl-foot-legal{flex-direction:row;flex-wrap:wrap;column-gap:1.5rem}
  .nl-foot-legal a{min-height:44px}
  .nl-foot-credit{width:100%;text-align:right}
  .nl-foot-credit a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- lead sections (services, approach, enquire): eyebrow at c1, statement and photo from c5 ---------- */
.nl-lead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:calc(var(--margin) + var(--t-mark) * 1.05 + var(--pad-s) * .96) var(--margin) 0}
.nl-lead-eyebrow{grid-column:1 / span 4;grid-row:1;padding-top:.6rem}
.nl-lead-title{grid-column:5 / -1;grid-row:1;max-width:14em}
.nl-lead-photo{grid-column:5 / -1;grid-row:2;margin-top:var(--s-2);aspect-ratio:1.454}
/* phones: the eyebrow sits 40 px under the header's 44 px tap row, not a third of the way down the screen, and the
   photo runs to the foot of the first screen (never shorter than its own shape), so no heading meets the fold */
@media (max-width:767px){
  .nl-lead{display:flex;flex-direction:column;min-height:calc(100svh - var(--bar));padding-top:calc(var(--margin) + 44px + 2.5rem)}
  .nl-lead-eyebrow{padding:0;margin-bottom:1rem}
  .nl-lead-photo{flex:1 0 auto;align-self:stretch;min-height:calc((100vw - 2 * var(--margin)) / 1.454);margin-top:var(--s-2);aspect-ratio:auto}
  .nl-lead-photo img{position:absolute;inset:0}
}
/* upright tablets: the same, in the grid */
@media (min-width:768px) and (max-width:991px) and (orientation:portrait){
  .nl-lead{min-height:calc(100svh - var(--bar));grid-template-rows:auto 1fr}
  .nl-lead-photo{align-self:stretch;min-height:calc((100vw - 2 * var(--margin)) * 2 / 3 / 1.454);aspect-ratio:auto}
  .nl-lead-photo img{position:absolute;inset:0}
}

/* ---------- homes: the strip runs sideways while the page is pinned ---------- */
.nl-homes{position:relative}
.nl-homes-stick{display:flex;flex-direction:column;padding:calc(var(--margin) * 2 + var(--t-mark) * 1.05 + var(--s-3)) var(--margin) var(--pad-s)}
.nl-homes-row{order:-1;margin-bottom:var(--s-3)}
.nl-homes-title{font-size:var(--t-h1h);line-height:.95;letter-spacing:-.026em}
.nl-homes-progress{display:none}
.nl-homes-filters{margin-top:var(--s-2)}
.nl-filters{display:flex;flex-direction:column;align-items:flex-start}
.nl-filter{display:inline-flex;align-items:center;gap:.4rem;min-height:24px;padding:0;border:0;background:none;color:var(--soft);font-size:var(--t-small);font-weight:650;line-height:1.2;letter-spacing:0;text-transform:uppercase;cursor:pointer;font-feature-settings:"case";transition:color .3s var(--e2)}
.nl-filter[aria-pressed=true]{color:var(--ink)}
.nl-filter-mark{display:block;width:6px;height:6px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .545s var(--e2)}
.nl-filter[aria-pressed=true] .nl-filter-mark{transform:none}
.nl-filter:not([aria-pressed=true]) .nl-filter-mark{width:0;margin-right:-.4rem}
@media (hover:hover){.nl-filter:hover{color:var(--ink)}}
html:not(.nl-js) .nl-homes-filters{display:none}
.nl-strip{display:grid;gap:33px}
.nl-strip-item{transition:opacity .6s var(--e2),transform .6s var(--e2)}
.nl-strip-item.is-out{opacity:0;transform:scale(.9)}
.nl-strip-item[hidden]{display:none}
.nl-strip-link{display:block}
.nl-strip-land .nl-strip-cover{aspect-ratio:16 / 11}
.nl-strip-port .nl-strip-cover{aspect-ratio:.737}
.nl-strip-title{display:block;margin-top:12px;font-size:var(--t-small);font-weight:650;line-height:1.2;letter-spacing:0;text-transform:uppercase;font-feature-settings:"case"}
.nl-strip-sub{display:block;margin-top:.2em;color:var(--mute)}
/* not pinned (touch screens, reduced motion or no JavaScript): two columns from 768 px, one below.
   On phones and touch screens each filter is a 44 px tap target */
@media (min-width:768px){.nl-strip{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-4);align-items:end}}
@media (max-width:767px),(pointer:coarse){.nl-filter{min-height:44px}}
/* phones: the five filters run in one row that scrolls sideways inside its own strip */
@media (max-width:767px){
  .nl-homes-filters{margin-inline:calc(-1 * var(--margin))}
  .nl-filters{flex-direction:row;gap:1.25rem;overflow-x:auto;padding-inline:var(--margin);scrollbar-width:none;overscroll-behavior-x:contain}
  .nl-filters::-webkit-scrollbar{display:none}
  .nl-filter{white-space:nowrap}
  /* the row fades out at whichever edge has more filters past it, so a cut word reads as a row to scroll */
  .nl-filters{--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
  .nl-filters.is-more-left{--fl:2.5rem}
  .nl-filters.is-more-right{--fr:3.5rem}
}
/* pinned (wide screens, with JavaScript and motion): the section is as tall as the sideways travel */
html.nl-strip-on .nl-homes{height:var(--strip-h,100svh)}
html.nl-strip-on .nl-homes-stick{position:sticky;top:0;display:block;height:100svh;padding:0;overflow:hidden;overflow:clip}
html.nl-strip-on .nl-strip-view{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;overflow:clip;transform:translateY(calc(-.5 * var(--strip-shift,0px)))}
html.nl-strip-on .nl-strip{display:flex;align-items:flex-end;gap:16px;width:max-content;padding:0 var(--margin);will-change:transform}
html.nl-strip-on .nl-strip-item{flex:none;width:280px}
html.nl-strip-on .nl-strip-title{font-size:12px}
/* shorter screens: smaller entries keep the strip clear of the header and of the five filters below it */
@media (max-height:749px){html.nl-strip-on .nl-strip-item{width:12.5rem}}
@media (max-height:639px){html.nl-strip-on .nl-strip-item{width:10rem}}
/* until the top bar has scrolled away, the row and the strip sit higher by its remaining height */
html.nl-strip-on .nl-homes-row{position:absolute;z-index:2;left:var(--margin);right:var(--margin);bottom:24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin:0;transform:translateY(calc(-1 * var(--strip-shift,0px)))}
html.nl-strip-on .nl-homes-title{grid-column:1 / span 6}
/* the counter and the end link share one cell, and one is always gone before the other comes in, so they never
   meet. At the end the counter fades in .2 s, then the link comes up over .2 s; going back, the link fades over .4 s,
   then the counter returns over .4 s */
html.nl-strip-on .nl-homes-progress{grid-column:7 / span 4;display:grid;align-items:end;min-height:24px;font-size:var(--t-small);font-weight:650;line-height:1.2;letter-spacing:0;text-transform:uppercase;font-feature-settings:"case"}
.nl-hp-num{margin-left:1rem}
.nl-hp-count,.nl-hp-end{grid-area:1 / 1}
.nl-hp-count{white-space:nowrap;transition:opacity .4s var(--e2) .4s}
.nl-hp-end{display:inline-grid;row-gap:6px;justify-self:start;margin-bottom:-9px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--e2),transform .4s var(--e2),visibility 0s .4s}
.nl-hp-bar{display:block;width:100%;height:3px;background:var(--rule)}
.nl-hp-bar span{display:block;height:100%;width:100%;background:var(--ink);transform:scaleX(var(--end,0));transform-origin:left center}
.nl-homes.is-end .nl-hp-count,.nl-homes:has(.nl-hp-end:focus-visible) .nl-hp-count{opacity:0;transition:opacity .2s var(--e2)}
.nl-homes.is-end .nl-hp-end,.nl-hp-end:focus-visible{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--e2) .2s,transform .2s var(--e2) .2s,visibility 0s .2s}
html.nl-strip-on :is(.nl-homes-title,.nl-homes-progress,.nl-homes-filters){grid-row:1}
html.nl-strip-on .nl-homes-filters{grid-column:9 / -1;justify-self:end;margin:0}
html.nl-strip-on .nl-filters{align-items:flex-start}
html.nl-strip-on .nl-filter{min-height:24px;white-space:nowrap}
/* below 1200 px the longest filter would reach the counter: the stack lines up on the right instead */
@media (max-width:1199px){html.nl-strip-on .nl-filters{align-items:flex-end}}
/* the header stays in place while the strip is pinned, then leaves with it */
html.nl-strip-on .nl-p-homes .nl-head{position:fixed;top:0;transform:translateY(var(--head-y,var(--bar)))}
html.nl-strip-on .nl-p-homes .nl-head.nl-head-away{transform:translateY(calc(-100% - 2px))}
html.nl-strip-on .nl-p-homes .nl-head.nl-head-away,html.nl-strip-on .nl-p-homes .nl-head.nl-head-back{transition:transform .5s cubic-bezier(.76,0,.24,1)}
/* the strip rises into view on arrival */
.nl-motion.nl-strip-on .nl-strip-view{clip-path:inset(100% 0 0 0)}
.nl-motion.nl-strip-on.nl-in .nl-strip-view{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--e5) .1s}

/* ---------- tables ---------- */
.nl-table-wrap{overflow-x:auto}
.nl-table{width:100%;border-collapse:collapse;font-size:var(--t-main)}
.nl-table th{padding:0 1rem .75rem 0;border-bottom:1px solid var(--rule);color:var(--mute);font-size:var(--t-small);font-weight:650;text-align:left;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-table td{padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.nl-table a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
/* table links are 44 px tall tap targets without changing the rows */
.nl-table a{display:inline-block;padding:.85rem 0;margin:-.85rem 0}
@media (max-width:479px){.nl-table,.nl-table th{font-size:.875rem}.nl-table th,.nl-table td{padding-right:.5rem}.nl-table :is(th,td):last-child{padding-right:0}}

/* ---------- home pages: the photo holds the screen while the title, story and details pass over it ---------- */
/* overflow clip (not hidden) keeps the section from becoming a scroll box, so the photo can stick */
.nl-hh{position:relative;z-index:1;overflow:clip;background:var(--ink);color:var(--paper)}
.nl-hh-media{position:absolute;inset:0}
.nl-hh-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.nl-hh-settle{position:absolute;inset:0}
.nl-hh picture{display:block;position:absolute;inset:0}
.nl-hh-img{display:block;width:100%;height:100%;object-fit:cover}
.nl-hh-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,9,var(--h0,.45)) 0,rgba(12,11,9,var(--h1,.30)) calc(var(--fs) * .12),rgba(12,11,9,var(--h2,.30)) calc(var(--fs) * .45),rgba(12,11,9,var(--h3,.50)) calc(var(--fs) * .75),rgba(12,11,9,var(--h4,.52)) 100%)}
/* each photo needs its own shade: the Headland sky sits behind the nav, the pale Saddle living room behind the story */
.nl-p-headland-house .nl-hh-tint{--h0:.52;--h1:.38}
.nl-p-saddle-house .nl-hh-tint{--h0:.68;--h1:.44;--h2:.24;--h3:.56;--h4:.58}
@media (max-width:479px){.nl-p-saddle-house .nl-hh-tint{--h3:.57;--h4:.58}}
.nl-hh-shade{position:absolute;inset:0;background:var(--ink);opacity:0}
.nl-hh-first{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--fs);padding:0 var(--margin) 24px}
.nl-hh-title{max-width:10ch;margin-bottom:calc(var(--pad-s) * 1.2)}
.nl-hh-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-hh-label:first-child{grid-column:1 / span 6}
.nl-hh-state{grid-column:7 / span 3}
.nl-hh-scroll{grid-column:10 / -1;justify-self:end;white-space:nowrap}
.nl-hh-body{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:var(--pad-s) var(--margin) var(--s-4)}
.nl-hh-story{grid-column:7 / -1;max-width:24.1em}
.nl-hh-story .nl-large{font-size:var(--t-large)}
.nl-hh-story .nl-large+.nl-large{margin-top:.6em}
.nl-hh-details{grid-column:7 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--s-4);margin-top:calc(var(--pad-s) * .9)}
.nl-hh-details dt{color:var(--rule);font-size:var(--t-main)}
.nl-hh-details dd{margin-top:12px;font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
@media (max-width:767px){
  .nl-hh-row{display:flex;justify-content:space-between;gap:1rem}
  .nl-hh-state{display:none}
  .nl-hh-first{padding-bottom:14px}
  .nl-hh-title{margin-bottom:var(--s-3)}
  .nl-hh-body{display:block;padding-top:50px}
  .nl-hh-details{margin-top:var(--s-4)}
}
.nl-hg{padding:var(--margin) var(--margin) 0}
.nl-hg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);grid-auto-flow:dense}
.nl-hg-land{grid-column:span 12}
.nl-hg-port{grid-column:span 6}
.nl-hg-land .nl-cover{aspect-ratio:3 / 2}
.nl-hg-port .nl-cover{aspect-ratio:2 / 3}
@media (max-width:767px){.nl-hg-land,.nl-hg-port{grid-column:1 / -1}}

/* ---------- next home ---------- */
.nl-next{margin-top:var(--s-3);padding:0 var(--margin);border-top:1px solid var(--rule)}
.nl-next-top,.nl-next-foot{display:flex;align-items:center;justify-content:space-between}
.nl-next-top{padding-top:26px}
.nl-next-foot{padding:calc(var(--pad-l) * .9) 0 26px}
.nl-plus{font-size:var(--t-h3);font-weight:300;line-height:1;letter-spacing:-.0375em;color:var(--mute)}
.nl-next-link{display:flex;flex-direction:column;align-items:center;text-align:center}
.nl-next-name{display:block;max-width:16ch;margin-top:calc(var(--pad-l) - 1rem)}
.nl-next-cover{width:50%;margin-top:var(--s-4)}
.nl-next-land .nl-next-cover{aspect-ratio:16 / 11}
.nl-next-port .nl-next-cover{aspect-ratio:.736}
.nl-next-cover img{transition:transform .875s var(--e2)}
@media (hover:hover){.nl-next-link:hover .nl-next-cover img,.nl-next-link:focus-visible .nl-next-cover img{transform:scale(1.1)}}
@media (max-width:767px){
  .nl-next-name{margin-top:var(--pad-s)}
  .nl-next-cover{width:80%;margin-top:var(--s-3)}
  .nl-next-foot{padding-top:var(--pad-s)}
}

/* ---------- services ---------- */
.nl-sx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:var(--pad-l) var(--margin) 0}
.nl-sx-eyebrow{grid-column:1 / -1;margin-bottom:1rem}
.nl-sx-title{grid-column:1 / -1}
.nl-sx-title>span{display:block}
.nl-sx-body{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--pad-s)}
.nl-sx-list{grid-column:1 / span 9}
.nl-sx-link{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gap);align-items:center;min-height:44px}
.nl-sx-note{grid-column:1 / span 4;justify-self:end;text-align:right;font-size:var(--t-small);line-height:1.2}
.nl-sx-name{grid-column:5 / -1;font-size:var(--t-h2);line-height:1.05;font-weight:650;letter-spacing:-.0375em}
.nl-sx-row{transition:opacity .3s var(--e2)}
.nl-sx-aside{grid-column:11 / -1;position:relative}
.nl-sx-stick{position:sticky;top:calc(50lvh - 10rem);display:grid}
.nl-sx-swap{grid-area:1 / 1;opacity:0;transition:opacity .3s var(--e2)}
.nl-sx-swap.is-on{opacity:1}
.nl-sx-img{display:block;aspect-ratio:.734;overflow:hidden;background:var(--stone)}
.nl-sx-img img{display:block;width:100%;height:100%;object-fit:cover}
.nl-sx-swap figcaption{margin-top:1rem;font-size:var(--t-small);font-weight:650;line-height:1.35;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-sx-cards{display:none}
/* at rest the first row is lit and the rest sit at .3, as the reference's list does; hover or focus moves the light */
@media (hover:hover) and (min-width:768px){html.nl-js .nl-sx-row:not(.is-on){opacity:.3}}
@media (max-width:991px){.nl-sx-list{grid-column:1 / span 10}.nl-sx-aside{display:none}}
@media (max-width:767px){
  .nl-sx{display:block}
  .nl-sx-body{display:none}
  .nl-sx-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--gap);margin-top:var(--s-3)}
  .nl-sx-card .nl-cover{aspect-ratio:.734}
  .nl-sx-card span:last-child{display:block;margin-top:.75rem;font-size:var(--t-mark);line-height:1.05;font-weight:650;letter-spacing:-.0375em}
}
.nl-sv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;align-content:start;min-height:100svh;padding:var(--pad-m) var(--margin) 0;scroll-margin-top:0}
.nl-sx+.nl-sv{padding-top:var(--s-4)}
.nl-sv-eyebrow{grid-column:1 / span 4;grid-row:1}
.nl-sv-photo{grid-column:5 / -1;grid-row:1;aspect-ratio:1.454}
.nl-sv-main{grid-column:5 / -1;margin-top:calc(var(--pad-s) * .9)}
.nl-sv-text{max-width:15.8em;font-size:var(--t-h3)}
.nl-sv-facts{display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;max-width:46rem;margin-top:var(--s-3);padding-top:1rem;border-top:1px solid var(--rule);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-sv-main .nl-uline{margin-top:var(--s-3)}
@media (min-width:768px){
  .nl-sv-b .nl-sv-eyebrow{grid-column:9 / -1}
  .nl-sv-b .nl-sv-photo,.nl-sv-b .nl-sv-main{grid-column:1 / span 8}
}
@media (max-width:767px){
  .nl-sv{display:block}
  .nl-sv-eyebrow{margin-bottom:1rem}
  .nl-sv-main{margin-top:var(--s-3)}
  .nl-sv-facts{flex-direction:column;gap:.6rem}
}

/* ---------- approach ---------- */
.nl-detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:var(--s-2) var(--margin) var(--s-4)}
.nl-detail-eyebrow{grid-column:1 / span 4}
.nl-detail-main{grid-column:5 / span 5}
.nl-detail-main .nl-large{max-width:19.7em}
.nl-detail-pill{margin-top:var(--s-2)}
.nl-detail-year{grid-column:11 / -1;justify-self:end;font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
@media (max-width:767px){
  .nl-detail{display:flex;flex-direction:column;gap:1rem}
  .nl-detail-year{display:none}
}
.nl-band{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100svh;min-height:32rem;padding:var(--s-2) var(--margin) var(--s-2);overflow:hidden;background:var(--ink);color:var(--paper)}
.nl-band-media{position:absolute;inset:0;overflow:hidden}
.nl-band-media::after{content:'';position:absolute;inset:0;background:rgba(12,11,9,.32)}
.nl-band-drift{position:absolute;left:0;right:0;top:-8%;height:116%;will-change:transform}
.nl-band picture{display:block;position:absolute;inset:0}
.nl-band-img{display:block;width:100%;height:100%;object-fit:cover}
.nl-band-title{position:relative;max-width:10ch}
.nl-band-arrow{position:relative;align-self:flex-end;letter-spacing:-.02em}
.nl-stages{position:relative;background:var(--ink);perspective:250vw}
.nl-stage{position:sticky;top:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:48px var(--margin) 112px;border-top:1px solid var(--rule);background:var(--paper);transform-origin:50% 10%}
.nl-stage-i{grid-column:1 / span 4;letter-spacing:-.02em}
.nl-stage-main{grid-column:5 / -1}
.nl-stage-title{font-size:var(--t-stage);line-height:.95;font-weight:500;letter-spacing:-.006em;text-transform:uppercase;max-width:19ch}
.nl-stage-cover{width:calc((100% - 7 * var(--gap)) * .75 + 5 * var(--gap));aspect-ratio:2 / 1;margin-top:24px}
.nl-stage-text{max-width:34.3em;margin-top:24px}
.nl-stage-shade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
@media (max-width:767px){
  .nl-stages{background:var(--paper);perspective:none}
  .nl-stage{position:relative;display:block;padding:36px var(--margin) 48px;transform:none!important}
  .nl-stage-cover{width:100%;margin-top:var(--s-3)}
  .nl-stage-title{margin-top:var(--s-3)}
  .nl-stage-shade{display:none}
}
.nl-p-approach .nl-note{padding-top:var(--pad-m)}

/* ---------- studio ---------- */
.nl-mono{padding:calc(var(--margin) + var(--t-mark) * 1.05 + 19px) var(--margin) var(--pad-l)}
/* the mark never runs past the first screen: on short or very wide windows it is capped to the height left under the header and centred */
.nl-mono-svg{display:block;width:100%;height:auto;max-height:calc(100svh - var(--bar) - var(--margin) - var(--t-mark) * 1.05 - 19px - 4px);fill:var(--ink)}
.nl-mono-photo{position:relative;margin-top:19px}
.nl-mono-cover{width:80%;margin:0 auto;aspect-ratio:3 / 2}
.nl-mono-label{position:absolute;top:50%;color:#fff;mix-blend-mode:difference;transform:translateY(-50%);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;white-space:nowrap;font-feature-settings:"case"}
.nl-mono-left{left:0}
.nl-mono-right{right:0}
.nl-mono-text{max-width:14.2em;margin:var(--pad-m) auto 0;text-align:center;text-wrap:balance}
/* the labels sit in the margins and just clear the photo's edges: the photo is 80% wide where the longer label
   allows it and narrower where that label would run onto it; below 992 they sit above it, lined up with its edges */
@media (min-width:992px){.nl-mono-cover{width:min(80%,100% - 2 * (var(--t-small) * 10.48 + 1.75rem))}}
@media (min-width:768px) and (max-width:991px){
  .nl-mono-photo{margin-top:calc(19px + var(--t-small) * 1.2 + .75rem)}
  .nl-mono-label{top:auto;bottom:100%;padding-bottom:.75rem;transform:none}
  .nl-mono-left{left:10%}
  .nl-mono-right{right:10%}
}
/* phones and upright tablets: the statement comes straight after the mark and the photo follows, so the first
   screen never cuts it */
@media (max-width:991px) and (orientation:portrait){
  .nl-mono{display:flex;flex-direction:column}
  .nl-mono-text{order:1;margin:var(--s-3) 0 0}
  .nl-mono-photo{order:2}
}
@media (max-width:767px){
  .nl-mono-cover{width:100%}
  .nl-mono-label{display:none}
  .nl-mono-text{margin:var(--s-3) 0 0;text-align:left}
  .nl-mono-photo{margin-top:var(--s-3)}
}
.nl-ethos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:0 var(--margin) var(--pad-l)}
.nl-ethos-port{grid-column:1 / span 3;aspect-ratio:.737}
.nl-ethos-land{grid-column:5 / -1;aspect-ratio:1.454}
.nl-ethos-main{position:relative;grid-column:5 / -1;margin-top:calc(var(--pad-s) * .9)}
.nl-ethos-eyebrow{position:absolute;top:.55em;left:0;font-size:var(--t-small)}
.nl-ethos-text{max-width:none}
.nl-ethos-text .nl-indent{--indent:calc(25% + .25 * var(--gap))}
@media (max-width:767px){
  .nl-ethos{display:block}
  .nl-ethos-land{margin-top:var(--gap)}
  .nl-ethos-eyebrow{position:static;margin-bottom:1rem}
  .nl-ethos-text .nl-indent{--indent:calc(var(--t-h3) * 1.43)}
}
.nl-team{padding:0 var(--margin) var(--pad-l)}
.nl-team-eyebrow{margin-bottom:1rem}
.nl-team-title>span{display:block}
.nl-team-list{margin-top:var(--pad-s)}
.nl-team-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;transition:opacity .3s var(--e2)}
.nl-team-note{grid-column:1 / span 4;justify-self:end;text-align:right;font-size:var(--t-small);line-height:1.2}
.nl-team-name{grid-column:5 / -1;font-size:var(--t-h2);line-height:1.05;font-weight:650;letter-spacing:-.0375em}
@media (hover:hover) and (min-width:768px){html.nl-js .nl-team-row:not(.is-on){opacity:.3}}
@media (max-width:767px){
  .nl-team-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--gap)}
  .nl-team-row{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.4rem}
  .nl-team-note{justify-self:auto;text-align:left;font-size:var(--t-main)}
  .nl-team-name{font-size:var(--t-mark)}
}
.nl-recent{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:0 var(--margin) var(--pad-l)}
.nl-recent-side{grid-column:1 / span 3}
.nl-recent-side p:not(.nl-eyebrow){max-width:17.8em;margin-top:1.5rem}
.nl-recent-photo{grid-column:5 / -1;aspect-ratio:4 / 5}
.nl-recent-table{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--s-3)}
.nl-recent-table-eyebrow{grid-column:1 / span 4}
.nl-recent-tw{grid-column:5 / -1}
@media (max-width:767px){
  .nl-recent{display:block}
  .nl-recent-photo{margin-top:var(--s-3)}
  .nl-recent-table{display:block}
  .nl-recent-table-eyebrow{margin-bottom:var(--s-2)}
}

/* ---------- gallery: a grid without JavaScript or with reduced motion, a draggable canvas otherwise ---------- */
body.nl-p-gallery{background:var(--ink);color:var(--paper)}
.nl-head-gallery{display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:30}
.nl-back{display:flex;align-items:center;min-height:44px;font-size:var(--t-small);font-weight:650;line-height:1;text-transform:uppercase;letter-spacing:0;--roll:1em}
.nl-gal-actions{display:flex;align-items:center;gap:.5rem}
.nl-gal-actions .nl-menu-jump{grid-column:auto}
html:not(.nl-js) .nl-gal-menu{display:none}
html:not(.nl-js) .nl-gal-actions .nl-mini-slot:has(.nl-gal-menu){display:none}
html:not(.nl-js) .nl-gal-actions .nl-menu-jump{display:flex}
.nl-gal{position:relative;padding:calc(var(--margin) + 48px + var(--s-4)) var(--margin) var(--pad-m)}
.nl-gal-canvas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--gap);align-items:start}
.nl-still-cover{aspect-ratio:3 / 2}
.nl-still-port .nl-still-cover{aspect-ratio:2 / 3}
.nl-still-fig{margin:0}
.nl-still-fig:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.nl-gal-hint{display:none}
.nl-gal-intro{max-width:34ch;margin-top:var(--pad-s);font-size:var(--t-small);line-height:1.25}
.nl-gal-note{margin-top:.75rem;color:rgba(245,242,236,.7)}
.nl-gal-tip{display:none}
@media (max-width:767px){.nl-gal-canvas{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.nl-gal-canvas{grid-template-columns:1fr}}
/* canvas mode */
html.nl-canvas body.nl-p-gallery{overflow:hidden;height:100svh}
html.nl-canvas .nl-gal{position:fixed;z-index:5;top:var(--bar);left:0;right:0;bottom:0;padding:0;overflow:hidden;overflow:clip;background:var(--ink)}
html.nl-canvas .nl-p-gallery .nl-foot{display:none}
html.nl-canvas .nl-gal-view{position:absolute;inset:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
html.nl-canvas .nl-gal-view.is-down{cursor:grabbing}
html.nl-canvas .nl-gal-press{position:absolute;inset:0;transition:transform 1s var(--e2)}
html.nl-canvas .nl-gal-view.is-down .nl-gal-press{transform:scale(.9);transition:transform 1.2s var(--e2)}
html.nl-canvas .nl-gal-canvas{position:absolute;left:0;top:0;display:block;width:212vw;height:150vw;will-change:transform}
html.nl-canvas .nl-still{position:absolute;left:calc(var(--x) * 1vw);top:calc(var(--y) * 1vw);width:calc(var(--w) * 1vw)}
/* phones held upright get their own, taller canvas so the opening view is full of photographs */
@media (max-width:767px) and (orientation:portrait){
  html.nl-canvas .nl-gal-canvas{width:262vw;height:292vw}
  html.nl-canvas .nl-still{left:calc(var(--px) * 1vw);top:calc(var(--py) * 1vw);width:calc(var(--pw) * 1vw)}
}
html.nl-canvas .nl-still-fig{position:relative;display:block}
html.nl-canvas .nl-still img{-webkit-user-drag:none;pointer-events:none}
html.nl-canvas .nl-still{transition:transform 1.2s var(--e2) var(--gd,0s),filter 1.2s var(--e2) var(--gd,0s)}
html.nl-canvas:not(.nl-gal-in) .nl-still{transform:scale(.9);filter:blur(5px)}
html.nl-canvas .nl-gal-intro{position:absolute;z-index:3;left:var(--margin);bottom:var(--margin);max-width:21em;margin:0;color:#fff;mix-blend-mode:difference;pointer-events:none}
html.nl-canvas .nl-gal-note{color:inherit;opacity:.8}
html.nl-canvas .nl-gal-tip{position:absolute;z-index:3;right:var(--margin);bottom:var(--margin);display:block;width:clamp(15rem,22.2vw,20rem);padding:8px;border-radius:4px;background:var(--paper);color:var(--ink);transition:opacity .5s var(--e2),filter .5s var(--e2)}
html.nl-canvas .nl-gal-view.is-down~.nl-gal-tip{opacity:0;filter:blur(50px)}
.nl-gal-tip-img{display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:2px}
.nl-gal-tip-img img{display:block;width:100%;height:100%;object-fit:cover}
.nl-gal-tip p{margin-top:.7rem;font-size:12px;font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0}
html.nl-canvas .nl-head-gallery{position:fixed;top:var(--bar)}
html.nl-canvas .nl-back{color:#fff;mix-blend-mode:difference}
/* phones: the photographs fill the screen, so the words sit on an ink strip and BACK is a pill like ENQUIRE and MENU */
@media (max-width:767px){
  html.nl-canvas .nl-gal-tip{display:none}
  html.nl-canvas .nl-gal-hint{display:block;margin-bottom:.5rem;font-weight:650;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
  html.nl-canvas .nl-gal-intro{left:0;right:0;bottom:0;max-width:none;padding:14px var(--margin) calc(14px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);mix-blend-mode:normal;font-size:12px;line-height:1.3}
  html.nl-canvas .nl-gal-note{margin-top:.4rem;opacity:.72}
  html.nl-canvas .nl-back{min-height:44px;padding:0 .9rem;border-radius:100vw;background:var(--pill);color:var(--ink);mix-blend-mode:normal}
  /* the three pills sit on an ink band, as the words at the foot do, so the canvas runs between the two bands */
  html.nl-canvas .nl-head-gallery{padding-bottom:calc(var(--margin) * .75);background:var(--ink)}
  html.nl-canvas .nl-gal-actions .nl-pill,html.nl-canvas .nl-gal-actions .nl-mini-menu{min-height:44px}
  html.nl-canvas .nl-gal-actions .nl-pill{gap:.75rem;padding:0 1rem}
  /* both bands soften into the canvas, so a photograph passing under them fades away instead of being sliced */
  html.nl-canvas .nl-head-gallery::after,html.nl-canvas .nl-gal-intro::before{content:"";position:absolute;left:0;right:0;pointer-events:none}
  html.nl-canvas .nl-head-gallery::after{top:100%;height:24px;background:linear-gradient(var(--ink),rgba(12,11,9,0))}
  html.nl-canvas .nl-gal-intro::before{bottom:100%;height:64px;background:linear-gradient(rgba(12,11,9,0),var(--ink))}
}
@media (max-width:479px){.nl-back-long{display:none}}

/* ---------- enquiry drawer (every page but enquire.html) ---------- */
.nl-drawer{position:fixed;z-index:9000;inset:0;visibility:hidden;pointer-events:none;transition:visibility 0s linear .6s}
.nl-drawer.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.nl-drawer-back{position:absolute;inset:0;background:rgba(12,11,9,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .5s var(--e4)}
.nl-drawer.is-open .nl-drawer-back{opacity:1;transition:opacity 1s var(--e4)}
.nl-drawer-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:min(100%,50rem);padding:24px;overflow-y:auto;overscroll-behavior:contain;background:var(--ink);color:var(--paper);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);transition:clip-path .5s var(--e4)}
.nl-drawer.is-open .nl-drawer-panel{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path 1s var(--e4)}
.nl-drawer-panel:focus{outline:none}
.nl-drawer-bar{position:absolute;top:0;left:0;right:0;height:4px}
.nl-drawer-bar span{display:block;width:calc(var(--step,1) / 3 * 100%);height:100%;background:var(--paper);transition:width .875s var(--e2)}
/* eyebrow and CLOSE share the first row; the intro and the photo start level on the second */
.nl-drawer-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);row-gap:1.1rem;align-items:start}
.nl-drawer-eyebrow{grid-column:1;grid-row:1;align-self:center}
.nl-drawer-intro{grid-column:1;grid-row:2;max-width:19.6em;font-size:var(--t-main);line-height:1.2}
.nl-drawer [data-split]{--d:.55s;--st:.0425s}
.nl-motion .nl-drawer [data-split].is-in .nl-line-in{transition-duration:1.15s}
.nl-drawer-close{grid-column:2;grid-row:1;margin-top:-10px;margin-bottom:-10px;color:var(--paper)}
.nl-drawer-photo{grid-column:2;grid-row:2;width:10rem;aspect-ratio:.74;margin-top:.15em}
.nl-drawer-photo img{transform:none}
.nl-drawer-photo{background:transparent}
.nl-drawer-photo::after{content:none}
.nl-drawer-body{margin-top:auto;padding-top:var(--s-4)}
.nl-drawer .nl-step{display:none}
.nl-drawer .nl-step.is-current{display:block}
.nl-drawer .nl-form-required{margin-bottom:var(--s-2)}
.nl-drawer .nl-form-actions{justify-content:flex-end}
.nl-drawer .nl-form-clear{display:none}
.nl-drawer .nl-step-back{margin-right:auto}
.nl-drawer.is-open .nl-drawer-photo img{animation:nl-drawer-photo 1.2s var(--e2) .35s both}
@keyframes nl-drawer-photo{from{transform:scale(1.1);opacity:0}to{transform:none;opacity:1}}
@media (max-width:767px){
  .nl-drawer-panel{width:100%;padding:16px var(--margin) 24px}
  .nl-drawer-photo{width:6rem}
}

/* ---------- enquire page: the drawer as a page (intro on paper, the form on an ink half to the right edge) ---------- */
.nl-eqp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding:calc(var(--margin) + var(--t-mark) * 1.05 + var(--pad-s) * .96) var(--margin) var(--pad-l)}
.nl-eqp-side{grid-column:1 / span 5;position:sticky;top:var(--margin);padding-top:24px}
.nl-eqp-eyebrow{margin-bottom:1.4rem}
.nl-eqp-title{max-width:12em}
.nl-eqp-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);align-items:start;margin-top:var(--s-3)}
.nl-eqp-intro p{max-width:19.6em;font-size:var(--t-main);line-height:1.2}
.nl-eqp-photo{width:calc((100vw - 2 * var(--margin) - 11 * var(--gap)) / 6 + var(--gap));aspect-ratio:.734;margin-top:.15em}
.nl-eqp-panel{grid-column:7 / -1;margin-right:calc(-1 * var(--margin));padding:24px var(--margin) var(--pad-m) 24px;background:var(--ink);color:var(--paper)}
.nl-eqp-steps{margin-bottom:var(--s-4)}
/* the side is sticky beside a long form: what follows an enquiry fills the paper under the photo */
.nl-eqp-next{max-width:28rem;margin-top:var(--s-4)}
.nl-eqp-next .nl-eyebrow{margin-bottom:.9rem}
.nl-eqp-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.nl-eqp-list li{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:var(--gap);padding:.75rem 0;border-bottom:1px solid var(--rule);font-size:var(--t-main);line-height:1.25}
.nl-eqp-num{font-size:var(--t-small);font-weight:650;line-height:1.55;font-feature-settings:"case","tnum"}
@media (max-height:899px){
  .nl-eqp-next{margin-top:var(--s-2)}
  .nl-eqp-list li{padding:.45rem 0;font-size:var(--t-small);line-height:1.3}
  .nl-eqp-num{line-height:1.3}
}
@media (max-height:760px){.nl-eqp-next{display:none}}
@media (max-width:991px){
  .nl-eqp-next{display:none}
  .nl-eqp{display:block}
  .nl-eqp-side{position:static;padding-top:0}
  .nl-eqp-panel{margin:var(--s-3) calc(-1 * var(--margin)) 0;padding:24px var(--margin) var(--pad-m)}
}
@media (max-width:767px){
  .nl-eqp{padding:calc(var(--margin) + 44px + 2.5rem) var(--margin) 0}
  .nl-eqp-eyebrow{margin-bottom:1rem}
  .nl-eqp-photo{width:6rem}
}

/* ---------- enquiry preview form (drawer and page) ---------- */
.nl-form,.nl-result{color:var(--paper)}
.nl-form-all{margin:0;padding:0;border:0;min-width:0}
.nl-form-required{margin-bottom:var(--s-2);font-size:var(--t-small);color:rgba(245,242,236,.62)}
.nl-form-required span,.nl-req{color:var(--alert)}
.nl-step{margin:0 0 var(--s-3);padding:0;border:0;min-width:0}
.nl-step-title{display:block;width:100%;margin-bottom:1.25rem;padding:0 0 .9rem;border-bottom:1px solid rgba(245,242,236,.35);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case"}
.nl-step-row{display:flex;justify-content:space-between;gap:1rem}
.nl-fields{display:grid;gap:1.25rem}
.nl-fields-2{grid-template-columns:1fr 1fr}
.nl-field-wide{grid-column:1 / -1}
.nl-field label{display:block;margin-bottom:.75rem;font-size:var(--t-main)}
.nl-opt{color:rgba(245,242,236,.62)}
.nl-field input,.nl-field select,.nl-field textarea{display:block;width:100%;min-height:64px;padding:.75rem .75rem;border:1px solid transparent;border-radius:4px;background:var(--field);color:var(--paper);font:500 1rem/1.3 var(--font);letter-spacing:-.01em}
.nl-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);background-position:calc(100% - 1.3rem) 50%,calc(100% - 1rem) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.nl-field textarea{min-height:7.5rem;resize:vertical}
.nl-field :focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.nl-field [aria-invalid=true]{border-color:var(--alert)}
.nl-help{margin-top:.6rem;font-size:var(--t-small);color:rgba(245,242,236,.62)}
/* tiles: a radio group drawn as tiles (the chosen one turns paper). Each radio is a clear box over its whole tile,
   so it is the tap target and carries its own focus ring */
.nl-tiles{margin:0;padding:0;border:0;min-width:0}
.nl-tiles legend{display:block;margin-bottom:.75rem;padding:0;font-size:var(--t-main)}
.nl-tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.nl-tile{position:relative;display:flex;align-items:center;justify-content:center;min-height:62px;padding:.75rem;text-align:center;border-radius:4px;background:var(--field);color:var(--paper);font-size:var(--t-small);font-weight:650;line-height:1.2;text-transform:uppercase;letter-spacing:0;font-feature-settings:"case";cursor:pointer;transition:background-color .3s var(--e2),color .3s var(--e2)}
.nl-tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:4px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.nl-tile input:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.nl-tile input:disabled{cursor:not-allowed}
.nl-tile:has(input:checked){background:var(--paper);color:var(--ink)}
.nl-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.nl-form-actions [hidden]{display:none}
.nl-text-button{min-height:44px;padding:0;border:0;background:none;color:var(--paper);font-size:var(--t-small);font-weight:650;text-transform:uppercase;letter-spacing:0;cursor:pointer;font-feature-settings:"case"}
.nl-form-clear{text-decoration:underline;text-underline-offset:.25em}
.nl-form-note{margin-top:var(--s-2);font-size:var(--t-small);color:rgba(245,242,236,.62)}
.nl-form :disabled{cursor:not-allowed}
.nl-result{padding:var(--s-2) 0 0}
.nl-result-title{margin-bottom:var(--s-2);font-size:var(--t-h4);line-height:1.2;font-weight:500;letter-spacing:-.0375em}
.nl-result-summary{padding:1rem;border-radius:4px;background:var(--field);white-space:pre-line}
.nl-result-note{margin:1rem 0 var(--s-2);color:rgba(245,242,236,.75)}
@media (max-width:767px){.nl-fields-2{grid-template-columns:1fr}}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  .nl *,.nl *::before,.nl *::after{transition-duration:0s!important;transition-delay:0s!important;animation-duration:0s!important;animation-delay:0s!important}
}