/* The new site header and footer on the pages that still use layout.html (the Webflow pages).
   Every rule is scoped to .nlc, so nothing here reaches the Webflow page content, and the element
   resets keep Webflow's base styles (h4, p, a, ul, input) out of the header and footer.
   Copied from laia.css; keep the two in step. /assets is cached for a year: rename the file
   (new date) whenever it changes, and update the <link> in layout.html. */
.nlc { --ink: #101828; --ink-2: #475467; --ink-3: #667085; --line: #eaecf0; --hi: #ff0; --wrap: 1200px;
  font: 400 17px/1.55 "Space Grotesk", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; background: #fff; }
.nlc *, .nlc *::before, .nlc *::after { box-sizing: border-box; }
.nlc a { color: inherit; text-decoration: none; }
.nlc h4, .nlc p, .nlc ul, .nlc li, .nlc small { font-family: inherit; line-height: 1.55; letter-spacing: normal; }
.nlc .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.nlc .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; font-weight: 500; font-size: 15px; line-height: 1.55; border: 1px solid var(--ink); transition: transform .15s, background .15s; }
.nlc .btn:hover { transform: translateY(-1px); }
.nlc .btn-dark { background: var(--ink); color: #fff; }
.nlc .btn-dark:hover { background: #000; }

/* header */
.nlc.top { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nlc.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; position: relative; }
.nlc .logo { font-size: 36px; line-height: 43px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.nlc .nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nlc .nav a:not(.btn):hover { box-shadow: inset 0 -0.35em var(--hi); }
.nlc .menu { display: none; }
.nlc .menu summary { list-style: none; cursor: pointer; display: block; position: relative; width: 40px; height: 40px; margin-right: -8px;
  font-size: 0; color: transparent; -webkit-tap-highlight-color: transparent; }
.nlc .menu summary::before, .nlc .menu summary::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.nlc .menu summary::before { top: 13px; box-shadow: 0 6px 0 var(--ink); }
.nlc .menu summary::after { top: 25px; }
.nlc .menu[open] summary::before { transform: translateY(6px) rotate(45deg); box-shadow: none; }
.nlc .menu[open] summary::after { transform: translateY(-6px) rotate(-45deg); }
.nlc .menu summary::-webkit-details-marker { display: none; }
.nlc .menu[open] .menu-panel { display: flex; }
.nlc .menu-panel { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; padding: 8px 24px 20px; }
.nlc .menu-panel a { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
@media (max-width: 860px) { .nlc .nav { display: none; } .nlc .menu { display: block; } }

/* footer */
footer.nlc { padding: 72px 0 32px; font-size: 15px; border-top: 1px solid var(--line); }
.nlc .foot { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; }
.nlc .foot .logo { display: inline-block; }
.nlc .foot h4 { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.nlc .foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.nlc .foot li { margin: 0; padding: 0; }
.nlc .foot ul a:hover { box-shadow: inset 0 -0.35em var(--hi); }
.nlc .news p { color: var(--ink-2); margin: 10px 0 14px; max-width: 320px; font-size: 15px; }
.nlc .news form { display: flex; gap: 8px; max-width: 360px; margin: 0; }
.nlc .news input[type=email] { flex: 1; min-width: 0; height: auto; margin: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: var(--ink); }
.nlc .news button { font: inherit; font-size: 15px; font-weight: 500; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.nlc .news small { display: block; color: var(--ink-3); margin-top: 10px; font-size: 13px; }
.nlc .news small a { text-decoration: underline; }
.nlc .legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.nlc .legal a { text-decoration: underline; }
@media (max-width: 900px) { .nlc .foot { grid-template-columns: 1fr 1fr; } .nlc .news { grid-column: 1 / -1; } }

/* The one rule that reaches Webflow content: its page containers were 80rem (1280px) wide; at the
   new design's content width (1152px) the text lines up with the header's logo, as on the new pages. */
.uui-container-large, .uui-container-large-2, .uui-container-test, .tag-container-test { max-width: 1152px; }

/* /about: the page label with the yellow mark (as on /research and /contact), its short headline,
   and the intro as paragraphs that keep the old bold look */
.nl-mark { display: inline-block; color: #101828; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.55; letter-spacing: .1em; text-transform: uppercase; padding: 0 3px; box-shadow: inset 0 -0.55em #ff0; margin: 24px 0 18px; }
/* the headline and the text in the same format as the /research intro (laia.css .offer-hero h1, .lede) */
h1.nl-about-title { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.1;   /* the homepage section-title size */
  font-weight: 600; letter-spacing: -0.02em; color: #101828; max-width: 900px; margin: 0 0 24px; }
p.nl-about { font-family: "Space Grotesk", sans-serif; font-size: 19px; line-height: 1.55; font-weight: 400; color: #475467; max-width: 640px; margin: 0 0 18px; }

/* /…/works (the six Lab field pages): label, title and intro as on the new pages, then the field's
   study (dark button) and its product or a custom project (arrow link), as on the homepage's Lab cards */
h1.nl-page-title { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #101828; margin: 0 0 20px; }
p.text-main-subpage.nl-lede { font-size: 19px; line-height: 1.55; font-weight: 400; color: #475467; max-width: 640px; margin: 0 0 14px; }
.nl-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.nl-btn { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 500; line-height: 1.55; text-decoration: none; background: #101828; color: #fff; border: 1px solid #101828; transition: transform .15s, background .15s; }
.nl-btn:hover { background: #000; color: #fff; transform: translateY(-1px); }
.nl-link { font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 500; color: #101828; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.nl-link::after { content: " →"; }
.nl-link:hover { box-shadow: inset 0 -0.35em #ff0; color: #101828; }

/* All Webflow pages: the dash taglines in the site's typeface and grey; light section dividers;
   "Get started" in the new button style */
.uui-text-size-xlarge { font-family: "Space Grotesk", sans-serif; color: #667085; }
.uui-section_heroproject { border-top-color: #eaecf0; border-bottom-color: #eaecf0; }
.carousel-button-link { border: 1px solid #d0d5dd; border-radius: 8px; color: #101828; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 500; padding: 9px 18px; transition: border-color .15s, transform .15s; }
.carousel-button-link:hover { border-color: #101828; border-radius: 8px; background: #fff; color: #101828; transform: translateY(-1px); }
.carousel-button-link .text-block-3 { font: inherit; }

/* field pages: the old spacers between the intro and the next step go (the tagline they framed is
   gone), and the buttons get room above the first divider */
[class^="uui-space"]:has(+ .nl-ctas) { display: none; }
.nl-ctas { margin-bottom: 48px; }

/* project lists: a name and its "Coming Soon" pill sat in two equal halves, so a longer name wrapped and
   the pill stretched to two lines (Landboxes - Spaceport). Now the name takes its own width and the pill
   follows at its own height; if there is no room it moves under the name */
.div-coming-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.div-coming-soon > .coming-soon-badge { height: auto; align-self: center; }

/* project pages (/<field>/<project>): label, title and summary as on the new pages; "Read More" kept
   (it reveals the long text in place) and styled as a link; the facts in light lines with small grey
   labels; section names as small bold headings over regular text; the end leads back to the field
   and on to its study and product */
h1.nl-project-title { font-family: "Space Grotesk", sans-serif; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #101828; margin: 0 0 18px; }
.main-text.nl-summary { font-size: 19px; line-height: 1.55; font-weight: 400; color: #475467; max-width: 760px; }
.read-more-link { color: #101828; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 500; }   /* its own single underline, as before; no hover highlight */
.read-more-link .text-span-4 { font-weight: 500; }
[class^="tag-div-test"] { border-color: #eaecf0 !important; }
[class^="tag-div-test"] > .text-tag:first-child { font-size: 13px; line-height: 1.5rem; letter-spacing: .06em; text-transform: uppercase; color: #667085; font-weight: 500; }
[class^="tag-div-test"] > :nth-child(2) { font-size: 17px; line-height: 1.5rem; font-weight: 400; color: #101828; }
.section-text-project .main-text, .show-div .main-text { font-size: 17px; line-height: 1.65; font-weight: 400; color: #475467; }
.section-text-project .text-title, .show-div .text-title { display: block; text-decoration: none; font-size: 20px; line-height: 1.3; font-weight: 600; color: #101828; margin-bottom: 6px; }
.section-text-project .text-title + br, .section-text-project .text-title + br + br,
.show-div .text-title + br, .show-div .text-title + br + br { display: none; }
.nl-ctas-end { margin: 20px 0 48px; }

/* the image viewer (Webflow lightbox) no longer locks the page: it used to add .w-lightbox-noscroll
   (overflow: hidden), which hid a permanent scrollbar and slid the page 7.5px sideways and back.
   The page behind stays scrollable, the scrollbar stays, nothing moves. */
html.w-lightbox-noscroll { overflow: visible !important; }