* { box-sizing: border-box; }

/* Tapping any control twice in quick succession is a double-tap to the browser, which zooms the
   page — on the lightbox arrows that means paging forward zooms instead of advancing. Opting
   every interactive target out of double-tap zoom (pinch-zoom stays available) also removes the
   ~300ms tap delay that comes with it. */
button, a, summary, label, [role="button"], [role="tab"], input, select, textarea {
  touch-action: manipulation;
}

/* ===== BUTŲ TIPAI apartment-mix cards ===== */
.nm-apt { transition: transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease, border-color .4s ease; }
.nm-apt:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(52,54,148,.18); border-color: #FBAD1D !important; }
.nm-apt-arrow { transition: background .35s ease, color .35s ease, border-color .35s ease, transform .45s cubic-bezier(.16,.8,.24,1); }
.nm-apt:hover .nm-apt-arrow { background: #FBAD1D !important; border-color: #FBAD1D !important; color: #333594 !important; transform: translateX(3px); }
.nm-apt-glow { transition: opacity .45s ease, transform .55s cubic-bezier(.16,.8,.24,1); pointer-events: none; }
.nm-apt:hover .nm-apt-glow { opacity: 1; transform: scale(1); }
@media (max-width: 900px) { [data-nm-loc-grid] { grid-template-columns: 1fr !important; gap: 34px !important; } }
@media (max-width: 980px) { [data-nm-specs-grid] { grid-template-columns: repeat(2, 1fr) !important; } [data-nm-specs-head] { grid-template-columns: 1fr !important; align-items: start !important; gap: 26px !important; } }
@media (max-width: 560px) { [data-nm-specs-grid] { grid-template-columns: 1fr !important; } }

html { scroll-behavior: smooth; }
body { margin: 0; }
/* Kill rubber-band overscroll so nothing can be dragged into view past the footer. */
html, body { overscroll-behavior-y: none; }
/* #pradzia is the hero backdrop the whole page scrolls over, pinned with position:fixed.
   A fixed element is laid out against the viewport, not the document, so on phones — where the
   URL bar retracts at the bottom of the page and the visual viewport grows taller than the
   document — it kept painting in the strip below the footer.
   Below 1024px it is pinned with position:sticky instead. Sticky pins against the same scroll
   position as fixed (so the foreground still slides up over a held-in-place hero and the
   parallax survives on phones) but it is laid out IN the document, so it can never paint past
   the footer — the bug fixed:absolute was introduced for, without losing the animation.
   Sticky takes flow space, which fixed did not, so the negative margin-bottom pulls the
   foreground back over it; left/right must go back to auto or the sticky box is stretched
   against the scrollport rather than sized by the flow. Heights use svh — the SMALL viewport
   unit — so a retracting URL bar cannot make the hero taller than the strip it was measured for.
   !important is required — the position lives in an inline style attribute. */
@media (max-width: 1024px) {
  #pradzia {
    position: sticky !important;
    top: 80px !important;
    left: auto !important;
    right: auto !important;
    height: calc(100vh - 80px) !important;   /* fallback for browsers without svh */
    height: calc(100svh - 80px) !important;
    margin-bottom: calc(-100vh + 80px);
    margin-bottom: calc(-100svh + 80px);
  }
  /* The foreground is the layer that scrolls away over the pinned hero. It must sit above it and
     keep its own height, matched to the same svh basis so the two layers stay registered. */
  [data-nm-hero-fg] { height: calc(100vh - 80px) !important; height: calc(100svh - 80px) !important; }
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #c9c7d6; border-radius: 10px; }
@keyframes nm-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes nm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nm-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes nm-rise { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes nm-left { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes nm-right { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes nm-scalein { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nm-clip { from { transform: translateY(115%); } to { transform: none; } }
@keyframes nm-kenburns { from { transform: scale(1); } to { transform: scale(1.14); } }
@keyframes nm-bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(11px); } }
@keyframes nm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes nm-parallax { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes nm-shrink { to { height: 60px; box-shadow: 0 6px 28px rgba(20,18,60,.42); } }
@keyframes nm-drawline { from { width: 0; } to { width: 56px; } }
@keyframes nm-spin { to { transform: rotate(360deg); } }
/* --- advanced scroll-fx primitives --- */
@keyframes nm-draw { to { stroke-dashoffset: 0; } }
@keyframes nm-mask { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nm-mask-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nm-blurin { from { opacity: 0; filter: blur(16px); transform: translateY(26px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes nm-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes nm-zoomout { from { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes nm-rotin { from { opacity: 0; transform: rotate(-6deg) translateY(40px); } to { opacity: 1; transform: none; } }
/* KONTAKTAI (indigo bg, white fields, agent cutouts over bird) */
[data-nm-input]:focus { border-bottom-color: #FBAD1D !important; }
/* premium custom checkbox with animated tick */
.nm-check { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.nm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nm-check .nm-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(255,255,255,.42); background: transparent; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .28s cubic-bezier(.16,.8,.24,1), border-color .28s; }
.nm-check:hover .nm-box { border-color: #FBAD1D; }
.nm-check:active .nm-box { transform: scale(.88); }
.nm-check input:focus-visible + .nm-box { box-shadow: 0 0 0 3px rgba(245,166,35,.4); }
.nm-check .nm-box svg { width: 13px; height: 13px; display: block; }
.nm-check .nm-box svg path { fill: none; stroke: #333594; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .32s cubic-bezier(.65,0,.45,1) .06s; }
.nm-check input:checked + .nm-box { background: #FBAD1D; border-color: #FBAD1D; animation: nm-checkpop .34s cubic-bezier(.16,.8,.24,1); }
.nm-check input:checked + .nm-box svg path { stroke-dashoffset: 0; }
@keyframes nm-checkpop { 0% { transform: scale(.7); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (max-width: 1024px) {
  [data-nm-contact] { grid-template-columns: 1fr !important; gap: 60px !important; }
  [data-nm-footgrid] { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}
@media (max-width: 600px) {
  [data-nm-footgrid] { grid-template-columns: 1fr !important; }
  [data-nm-formfoot] { flex-direction: column !important; align-items: stretch !important; }
  [data-nm-submit] { justify-content: center !important; }
}
/* PRIVALUMAI right column — scroll-driven card exits (stacked in one place) */
@keyframes nm-cardleft  { to { opacity: 0; transform: translateX(-118%) rotate(-7deg) scale(.92); } }
@keyframes nm-cardright { to { opacity: 0; transform: translateX(118%) rotate(7deg) scale(.92); } }
/* Those exits translate a ~629px card by 118% (~742px) sideways, which counts as scrollable
   overflow and gave the whole page a horizontal scrollbar — dragging the layout off-centre and
   slicing the left column's text off the screen.
   Clip the STAGE, not the section and not the right column.
   - Not the section: it contains the position:sticky stage that drives the whole animation, and
     any overflow on it is unsafe — Safari/iOS can promote the other axis to `auto`, which makes
     the section a scroll container and silently kills the stage's stickiness, leaving the
     section frozen with no animation on iPhone.
   - Not the right column: it is only half the stage wide, so a card exiting left was sliced off
     at the column boundary instead of sweeping across the left column intact.
   The stage is the sticky element ITSELF, not an ancestor of it, so clipping here cannot break
   its own stickiness — and it is wide enough that a card's full 118% travel stays visible for
   the whole exit while still never reaching the page edge. accent-dots.png clips at the same x
   as before, since the stage and the right column share a right edge.
   The zoom-parallax section needs nothing here: its stage already has overflow:hidden. */
[data-nm-splitstage] { overflow: hidden; }
/* Soften where the stage's clip cuts the accent line, so it reads as running off the right side
   rather than stopping dead. The image is 700px wide and hangs 150px past the stage edge, so the
   clip always lands at image-local 550px (78.5%) no matter the viewport — the fade has to finish
   just before that, or the cut is still visible at partial opacity. */
[data-nm-accent-line] {
  -webkit-mask-image: linear-gradient(to right, #000 0 42%, transparent 76%);
  mask-image: linear-gradient(to right, #000 0 42%, transparent 76%);
}
.nm-reveal-word { display: inline-block; overflow: hidden; vertical-align: top; }
.nm-reveal-word > span { display: inline-block; animation: nm-clip 1s both cubic-bezier(.16,.8,.24,1); animation-timeline: view(); animation-range: entry 0% cover 22%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 1024px) { [data-nm-meta] { display: none !important; } }
/* the secondary "Susisiekite" button lives only in the hamburger menu, not the header */
[data-nm-contactcta] { display: none !important; }

/* ===================== HAMBURGER MENU — slice reveal ===================== */
/* the overlay is always mounted; visibility + pointer-events gate it so open AND close animate */
[data-nm-menu] { visibility: hidden; pointer-events: none; }
[data-nm-menu][data-open="1"] { visibility: visible; pointer-events: auto; }
[data-nm-menu][data-open="closing"] { visibility: visible; }
/* 5 vertical indigo panels; +1px width overlap kills sub-pixel seams */
[data-nm-slices] { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-nm-slice] { position: absolute; top: 0; height: 100%; width: calc(20% + 1px); background: #333594; transform: scaleY(0); transition: transform .55s cubic-bezier(.77,0,.18,1); will-change: transform; }
[data-nm-slice]:nth-child(1) { left: 0;   transform-origin: bottom; }
[data-nm-slice]:nth-child(2) { left: 20%; transform-origin: top; }
[data-nm-slice]:nth-child(3) { left: 40%; transform-origin: bottom; }
[data-nm-slice]:nth-child(4) { left: 60%; transform-origin: top; }
[data-nm-slice]:nth-child(5) { left: 80%; transform-origin: bottom; }
/* OPEN — panels sweep in left-to-right */
[data-nm-menu][data-open="1"] [data-nm-slice] { transform: scaleY(1); }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(1) { transition-delay: 0s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(2) { transition-delay: .08s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(3) { transition-delay: .16s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(4) { transition-delay: .24s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(5) { transition-delay: .32s; }
/* CLOSE — panels retract right-to-left (reverse stagger) */
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(1) { transition-delay: .32s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(2) { transition-delay: .24s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(3) { transition-delay: .16s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(4) { transition-delay: .08s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(5) { transition-delay: 0s; }
/* content sits above the panels and fades in once they've covered the screen
   (opacity-only — a translateY here briefly overflowed the bottom and flashed a scrollbar) */
[data-nm-menucontent] { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s ease; }
[data-nm-menu][data-open="1"] [data-nm-menucontent] { opacity: 1; transition-delay: .34s; }
/* The menu is required to open and close identically on every device, so there is deliberately
   no reduced-motion override here — the slice sweep above is transition-driven, and the `*`
   animation-duration cap further down only touches animations, so the full stagger survives
   under Reduce Motion untouched. */
/* map POI markers: highlight on hover */
.nm-poi-pin { transition: transform .15s cubic-bezier(.16,.8,.24,1), box-shadow .15s; }
.nm-poi-pin:hover { transform: scale(1.22); box-shadow: 0 10px 22px rgba(20,18,60,.4) !important; z-index: 500; }
.leaflet-tooltip.nm-tip { background: #333594; color: #fff; border: none; border-radius: 8px; padding: 5px 10px; font: 700 12px/1 'Raleway', sans-serif; box-shadow: 0 8px 20px rgba(20,18,60,.35); }
.leaflet-tooltip.nm-tip::before { border-top-color: #333594; }

/* features editorial grid — responsive */
@media (max-width: 1024px) { [data-nm-featgrid] { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; } }
@media (max-width: 560px) { [data-nm-featgrid] { grid-template-columns: 1fr !important; } }

/* ===== Editorial-Brutalist homepage (index-brutalist.dc.html) — responsive ===== */
@media (max-width: 980px) {
  [data-nm-hero] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-nm-herorender] { margin: 0 0 40px !important; min-height: 320px !important; }
  [data-nm-herorender] > div { min-height: 320px !important; }
  [data-nm-vieta] { grid-template-columns: 1fr !important; }
  [data-nm-projekt] { grid-template-columns: 1fr !important; gap: 56px !important; }
}
@media (max-width: 760px) {
  [data-nm-herostats] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-nm-herostats] > div:nth-child(2) { border-right: none !important; }
  [data-nm-herostats] > div:nth-child(1), [data-nm-herostats] > div:nth-child(2) { border-bottom: 1px solid rgba(36,42,92,.12) !important; }
  [data-nm-numbers] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-nm-numbers] > div:nth-child(2) { border-right: none !important; }
  [data-nm-numbers] > div:nth-child(3), [data-nm-numbers] > div:nth-child(4) { padding-top: 28px !important; }
  [data-nm-bento] { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 170px !important; }
}
@media (max-width: 460px) {
  [data-nm-herostats] { grid-template-columns: 1fr !important; }
  [data-nm-herostats] > div { border-right: none !important; border-bottom: 1px solid rgba(36,42,92,.12) !important; }
  [data-nm-numbers] { grid-template-columns: 1fr !important; }
  [data-nm-numbers] > div { border-right: none !important; padding-top: 28px !important; }
}

/* ===== Editorial-Luxe homepage (index-luxe.dc.html) — responsive ===== */
@media (max-width: 1024px) {
  [data-nm-luxe-intro] { grid-template-columns: 1fr !important; gap: 56px !important; }
  [data-nm-luxe-vieta] { grid-template-columns: 1fr !important; }
  /* MOBILE: feature list on top, the auto-rotating card stack below it (both in normal flow). */
  [data-nm-splitstage] { display: block !important; grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; max-height: none !important; max-width: none !important; }
  [data-nm-split-left] { position: static !important; height: auto !important; padding: 58px 24px 20px !important; justify-content: flex-start !important; overflow: visible !important; }
  [data-nm-split-left] > div { display: flex !important; }   /* keep the numbered feature list visible */
  /* cards are absolutely positioned, so the box needs an explicit height: 4:3 card + insets */
  [data-nm-split-right] { height: calc((100vw - 40px) * 3 / 4 + 44px); margin-bottom: 36px; }
  [data-nm-split-right] > img { display: none !important; }   /* hide the oversized accent dots on small screens */
  [data-nm-splitcard] { inset: 22px 20px !important; }
  [data-nm-heroindex] { display: none !important; }
  /* zoom-reveal keeps its scroll animation on mobile (JS pins the stage + scales the image);
     only drop the -100vh overlap so it runs sequentially after the cards section. */
  [data-nm-zoomtrack] { margin-top: 0 !important; }
  [data-nm-zoomclouds] { top: 20px !important; }
  [data-nm-zoomimg] { width: 62vw !important; max-width: 360px !important; }
  /* Two stacked bands now instead of one centred one, so each has to be smaller to fit
     above and below the card without crowding it. */
  [data-nm-zoommarquee] { font-size: clamp(30px, 11vw, 72px) !important; }
}
/* ===================== ZOOM PARALLAX (7 tiles scale out of a pinned stage) =====================
   Port of the "ZoomParallax" React component. The original expressed each tile's offset as
   Tailwind arbitrary variants ([&>div]:!-top-[30vh] …); those are plain rules here. Every tile
   is centred by flex, then its inner box is nudged off-centre and given its own size, so the
   scale transform pushes it outward along its own vector. JS writes only the scale. */
/* Every tile below is sized and offset in --zp-vw / --zp-vh rather than vw / vh. On desktop the
   two are the same thing — one percent of the real viewport, which is the authored layout — so
   the composition always uses the full window whatever its aspect. The indirection exists only
   so the phone rule at the bottom can redefine them against a fitted stage. */
[data-nm-zptrack] {
  --zp-vw: 1vw;
  --zp-vh: 1vh;
  /* How far each tile sits from centre, as a multiple of its authored offset. 1 = the authored
     spread. The phone rule pulls it in so the tiles can be enlarged without leaving the screen. */
  --zp-ox: 1;
  --zp-oy: 1;
}
[data-nm-zp-item] { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; will-change: transform; }
/* The centre tile is the focal image and the only one still on screen at the end of the scroll.
   Painting it last guarantees nothing on its way out can cover the final full-screen frame —
   in DOM order it is FIRST, so by default all six others painted on top of it. */
[data-nm-zp-item="0"] { z-index: 2; }
/* This is the ONLY place the tile's base box is declared. The centre tile is enlarged for
   sharpness by a rule that initZoomParallax() injects into <head> at runtime, measured from
   whatever this rule computes to — deliberately NOT by a matching rule in this file. A rule
   here would have to agree numerically with the script, and on a live deploy the browser can
   serve a cached copy of one file with a fresh copy of the other; when they disagree the tile
   renders at the wrong size. Measuring at runtime means there is nothing to disagree about. */
[data-nm-zp-inner] { position: relative; height: calc(25 * var(--zp-vh)); width: calc(25 * var(--zp-vw)); overflow: hidden;
  /* The stage is a flex container, and initZoomParallax() lays the centre tile out at its END
     size — several times the viewport — so the compositor only ever downscales the photo. A flex
     item that wide shrinks to the line by default, which squashed exactly that tile to a narrow
     strip while its height stayed put. Nothing here may shrink; the scale transform is the only
     thing allowed to change a tile's size. */
  flex: 0 0 auto;
  /* Every photo here is a bright-sky architectural render, so where two tiles touch they merge
     into one smear. A ring in the section's own background keeps each tile reading as a
     separate card while they pass each other. */
  border: 2px solid #0f1030; }
/* …except the centre tile, which ends the scroll filling the screen. Its ring scales with it, so
   it would frame the finished full-screen photo with a dark band down the left and right edges.
   The six tiles it sits among keep their own rings, so nothing merges into it while they pass. */
[data-nm-zp-item="0"] > [data-nm-zp-inner] { border: 0; }
[data-nm-zp-inner] img { display: block; height: 100%; width: 100%; object-fit: cover; }
[data-nm-zp-item="1"] > div { top: calc(-30 * var(--zp-vh) * var(--zp-oy));  left: calc(5 * var(--zp-vw) * var(--zp-ox));     height: calc(30 * var(--zp-vh)); width: calc(35 * var(--zp-vw)); }
[data-nm-zp-item="2"] > div { top: calc(-10 * var(--zp-vh) * var(--zp-oy));  left: calc(-25 * var(--zp-vw) * var(--zp-ox));   height: calc(45 * var(--zp-vh)); width: calc(20 * var(--zp-vw)); }
[data-nm-zp-item="3"] > div {                                                left: calc(27.5 * var(--zp-vw) * var(--zp-ox));  height: calc(25 * var(--zp-vh)); width: calc(25 * var(--zp-vw)); }
[data-nm-zp-item="4"] > div { top: calc(27.5 * var(--zp-vh) * var(--zp-oy)); left: calc(5 * var(--zp-vw) * var(--zp-ox));     height: calc(25 * var(--zp-vh)); width: calc(20 * var(--zp-vw)); }
[data-nm-zp-item="5"] > div { top: calc(27.5 * var(--zp-vh) * var(--zp-oy)); left: calc(-22.5 * var(--zp-vw) * var(--zp-ox)); height: calc(25 * var(--zp-vh)); width: calc(30 * var(--zp-vw)); }
[data-nm-zp-item="6"] > div { top: calc(22.5 * var(--zp-vh) * var(--zp-oy)); left: calc(25 * var(--zp-vw) * var(--zp-ox));    height: calc(15 * var(--zp-vh)); width: calc(15 * var(--zp-vw)); }
/* Portrait phones only. Measured against a tall viewport the numbers above turn the landscape
   frames into slivers, so here --zp-vw / --zp-vh are one percent of a 16:9 stage instead of one
   percent of the screen — the tiles keep their desktop crops and scale as one block.
   The stage is 230% of the viewport width: at the authored spread that would fling the outer
   tiles clean off the screen, so the offsets are pulled in to 45% horizontally — the axis with no
   room, where the frames now overlap — and 115% vertically, where a phone has height to spare and
   the extra spread is what stops the cluster leaving dead bands top and bottom. Frames end up
   about twice the size of a fitted stage. The vh term in the min() is the safety valve: on a
   short (landscape) phone it shrinks the stage so the composition still fits the height.
   Desktop is untouched — plain vw/vh, the authored spread, the full window. */
@media (max-width: 768px) {
  [data-nm-zptrack] {
    --zp-w: min(230vw, 177.78vh);
    --zp-vw: calc(var(--zp-w) / 100);
    --zp-vh: calc(var(--zp-w) / 177.78);
    --zp-ox: 0.45;
    --zp-oy: 1.15;
  }
}

/* ---------- zoom-parallax tiles are clickable ----------
   The seven tile wrappers are each a full-viewport absolutely-positioned box stacked on top of
   one another, so without this the LAST one would swallow every click on the stage. Only the
   inner image box takes pointer events. */
[data-nm-zp-item] { pointer-events: none; }
[data-nm-zp-inner] { pointer-events: auto; cursor: zoom-in; }
[data-nm-zp-inner]:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 3px; }

/* ===================== GALERIJA (inline, tabbed) =====================
   One shared gallery for the whole quarter, sitting directly in the homepage's #galerija section:
   a pill tab bar of categories over one uniform photo grid per category. The grid is
   deliberately content-agnostic — a category reads the same whether it holds three photos or
   thirty, so the client can fill "Statybų eiga" and the etapas tabs over time. Each tab shows a
   preview of tiles and folds the rest behind .nm-gmore, which is what keeps the section short. */
.nm-gal { position: relative; }

.nm-gtabs { display: flex; flex-wrap: wrap; gap: 10px; }
.nm-gtab { -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  background: #fff; border: 1.5px solid rgba(52, 54, 148, .18); border-radius: 44px;
  padding: 0 22px; color: #333594; font: 700 14px/1 'Raleway', sans-serif; letter-spacing: .02em;
  transition: background .25s, border-color .25s, color .25s,
    transform .25s cubic-bezier(.16, .8, .24, 1), box-shadow .25s; }
.nm-gtab:hover { border-color: #FBAD1D; transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(52, 54, 148, .12); }
.nm-gtab:active { transform: translateY(0) scale(.97); }
.nm-gtab.is-active { background: #333594; border-color: #333594; color: #fff;
  box-shadow: 0 12px 26px rgba(52, 54, 148, .28); }
.nm-gtab:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 3px; }
/* Per-tab photo count, so a visitor can see which categories have content before opening them. */
.nm-gtab-n { font: 700 11px/1 'Raleway', sans-serif; padding: 4px 8px; border-radius: 20px;
  background: rgba(52, 54, 148, .1); color: rgba(52, 54, 148, .7); transition: background .25s, color .25s; }
.nm-gtab.is-active .nm-gtab-n { background: #FBAD1D; color: #333594; }
/* Categories awaiting the client's photos: marked, never left blank. */
.nm-gtab-n.is-soon { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(251, 173, 29, .2); color: #7d5a0c; }
.nm-gtab.is-active .nm-gtab-n.is-soon { background: rgba(255, 255, 255, .16); color: #FBAD1D; }

.nm-gpanels { margin-top: clamp(20px, 2.4vw, 30px); }
/* Explicit, because [hidden] loses to any later rule that sets a display on .nm-gpanel. */
.nm-gpanel[hidden] { display: none; }
/* Tiles past the preview count stay out of the columns until the panel is expanded. */
.nm-gpanel:not(.is-expanded) .nm-ggrid figure.is-more { display: none; }

/* "Rodyti visas" — a quiet outlined pill under the grid, in the same family as the tabs. */
.nm-gmore { -webkit-appearance: none; appearance: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; margin: clamp(16px, 2vw, 24px) auto 0;
  min-height: 46px; padding: 0 26px; background: transparent;
  border: 1.5px solid rgba(52, 54, 148, .22); border-radius: 44px;
  color: #333594; font: 700 14px/1 'Raleway', sans-serif; letter-spacing: .02em;
  transition: background .25s, border-color .25s, color .25s,
    transform .25s cubic-bezier(.16, .8, .24, 1), box-shadow .25s; }
.nm-gmore:hover { border-color: #333594; background: #333594; color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(52, 54, 148, .22); }
.nm-gmore:active { transform: translateY(0) scale(.97); }
.nm-gmore:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 3px; }

/* Masonry columns, not a fixed grid. Every render is shown whole — these are architectural
   visualisations, and cropping one to a uniform box cuts off the building it exists to show.
   The photos are a mix of 4:3 and 16:9, so a shared tile shape could only ever fit one of them;
   instead each tile carries its own aspect-ratio (set inline from the file's real dimensions)
   and the columns absorb the differing heights. Space is reserved before the image loads, so
   full-view costs no layout shift. */
.nm-ggrid { column-count: 3; column-gap: clamp(8px, .9vw, 14px); }
.nm-ggrid figure { position: relative; margin: 0 0 clamp(8px, .9vw, 14px); overflow: hidden;
  border-radius: 14px; background: #e7e3da; cursor: zoom-in;
  aspect-ratio: 4 / 3;   /* fallback until an inline ratio overrides it */
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  box-shadow: 0 2px 10px rgba(20, 18, 60, .06);
  transition: box-shadow .35s, transform .35s cubic-bezier(.16, .8, .24, 1); }
.nm-ggrid figure:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20, 18, 60, .18); }
.nm-ggrid figure:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 3px; }
/* `contain`, not `cover`: with a matching tile ratio the two are identical, but contain is the
   guarantee — an image whose ratio was not recorded is letterboxed on the warm tile background
   rather than silently cropped. */
.nm-ggrid img { display: block; width: 100%; height: 100%; object-fit: contain;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.nm-ggrid figure:hover img { transform: scale(1.04); }
/* Zoom affordance: a scrim plus a magnifier badge that fade in on hover/focus, so the tiles
   announce that they open rather than relying on the cursor alone. */
.nm-ggrid figure::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 18, 60, .38), rgba(20, 18, 60, 0) 55%);
  opacity: 0; transition: opacity .35s; }
.nm-ggrid figure:hover::after, .nm-ggrid figure:focus-visible::after { opacity: 1; }
.nm-gzoom { position: absolute; right: 12px; bottom: 12px; z-index: 1; pointer-events: none;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .94); color: #333594;
  opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s, transform .3s cubic-bezier(.16, .8, .24, 1); }
.nm-ggrid figure:hover .nm-gzoom, .nm-ggrid figure:focus-visible .nm-gzoom {
  opacity: 1; transform: translateY(0) scale(1); }

/* Tiles fade up in sequence when a tab opens, so switching category reads as new content
   arriving rather than an instant swap. --i is set per tile and .is-in is re-toggled per
   selection by initGallery(), which is what replays the stagger. */
.nm-ggrid.is-in figure { animation: nm-gin .45s cubic-bezier(.16, .8, .24, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes nm-gin { from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; } }

/* Shown for a category with no photos yet, so an empty tab reads as "coming" rather than broken. */
.nm-gempty { margin: 0; padding: clamp(52px, 8vw, 96px) 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  border: 1.5px dashed rgba(52, 54, 148, .2); border-radius: 18px; background: rgba(255, 255, 255, .5);
  font: 600 15px/1.6 'Raleway', sans-serif; color: rgba(52, 54, 148, .62); }
.nm-gempty svg { color: rgba(52, 54, 148, .3); }

@media (max-width: 1100px) { .nm-ggrid { column-count: 2; } }
/* One column only once a second column would be too narrow to read a building in — a tablet
   still has room for two. */
@media (max-width: 620px) {
  .nm-ggrid { column-count: 1; }
  /* One column makes six preview tiles a very long strip; fold from the fifth on a phone. */
  .nm-gpanel:not(.is-expanded) .nm-ggrid figure:nth-child(n + 5) { display: none; }
}
@media (max-width: 768px) {
  .nm-gtab { padding: 0 16px; font-size: 13px; }
  /* Horizontal scroll beats wrapping to three rows of pills on a phone. */
  .nm-gtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; padding-bottom: 4px; }
  .nm-gtabs::-webkit-scrollbar { display: none; }
  .nm-gtab { flex: 0 0 auto; scroll-snap-align: start; }
  /* The tab strip scrolls edge to edge on a phone; pull it out to the section gutter so the
     first pill lines up with the heading and the last one can run off the side. */
  .nm-gtabs { margin: 0 -20px; padding: 0 20px 4px; }
  .nm-gmore { width: 100%; }
  [data-nm-galhead] { margin-bottom: 24px !important; }
  [data-nm-galhead] > a { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-ggrid img, .nm-gtab, .nm-gmore, .nm-ggrid figure, .nm-gzoom, .nm-ggrid figure::after { transition: none; }
  .nm-ggrid figure:hover img, .nm-ggrid figure:hover { transform: none; }
  .nm-gtab:hover, .nm-gmore:hover { transform: none; }
  .nm-ggrid.is-in figure { animation: none; }
}

/* ===================== VIETA MAP (Mapbox GL JS) =====================
   The map itself is recoloured in js/nm-map.js against the live layer list; what lives here is
   the chrome Mapbox renders as plain DOM — the marker and the zoom control — so it matches the
   amber/indigo pairing of the address card sitting next to it. */
.nm-map-pin { position: relative; display: block; width: 26px; height: 26px; cursor: default;
  filter: drop-shadow(0 6px 14px rgba(40, 44, 100, .38)); }
.nm-map-pin svg { position: relative; z-index: 1; display: block; }
/* Anchored to the pin's point, not its box, so the ring reads as coming off the map surface. */
.nm-map-pin-pulse { position: absolute; left: 50%; bottom: -6px; width: 22px; height: 22px;
  margin-left: -11px; border-radius: 50%; background: rgba(251, 173, 29, .45);
  animation: nm-map-pulse 2.4s ease-out infinite; }
@keyframes nm-map-pulse {
  0%   { transform: scale(.4); opacity: .85; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .nm-map-pin-pulse { display: none; } }
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden;
  box-shadow: 0 10px 26px rgba(40, 44, 100, .2) !important; }
.maplibregl-ctrl-group button + button { border-top-color: rgba(51, 53, 148, .14) !important; }
.maplibregl-ctrl-group button:hover { background: #FBAD1D !important; }
.maplibregl-ctrl-attrib { font-family: 'Raleway', sans-serif; font-size: 10px; }
/* OSM/OpenFreeMap attribution is required, so it is styled to fit rather than hidden. It renders
   bottom-right by default, clear of the address card in the opposite corner. */
.maplibregl-ctrl-attrib a { color: rgba(51, 53, 148, .7) !important; }

/* ===================== LIGHTBOX GALLERY ===================== */
.nm-lb { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column;
  background: rgba(12,13,40,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: max(14px, env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); }
.nm-lb.is-open { display: flex; animation: nm-fade .22s ease both; }
.nm-lb-view { position: relative; flex: 1 1 auto; overflow: hidden; min-height: 0;
  touch-action: pan-y pinch-zoom; }
.nm-lb-track { display: flex; height: 100%; will-change: transform;
  transition: transform .45s cubic-bezier(.16,.8,.24,1); }
.nm-lb-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.nm-lb-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 10px; -webkit-user-select: none; user-select: none; }
.nm-lb-cap { flex: 0 0 auto; margin: 14px auto 0; max-width: 760px; text-align: center;
  font: 500 14px/1.5 'Raleway', sans-serif; color: rgba(255,255,255,.72); }
/* Thumbnail strip — makes it obvious at a glance that there is more than one photo, and
   doubles as a position indicator. Scrolls horizontally when it outgrows the viewport. */
.nm-lb-thumbs { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 12px; padding: 2px 4px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.nm-lb-thumbs::-webkit-scrollbar { display: none; }
/* justify-content:center collapses the leading overflow when the strip scrolls, so switch to
   start-aligned with auto margins — that centres a short strip AND keeps a long one reachable. */
.nm-lb-thumbs > :first-child { margin-left: auto; }
.nm-lb-thumbs > :last-child { margin-right: auto; }
.nm-lb-thumb { flex: 0 0 auto; width: 88px; height: 58px; padding: 0; border: 0; border-radius: 8px;
  overflow: hidden; background: none; cursor: pointer; opacity: .42; position: relative;
  -webkit-tap-highlight-color: transparent; transition: opacity .25s ease, transform .25s ease;
  box-shadow: inset 0 0 0 2px transparent; }
.nm-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nm-lb-thumb:hover { opacity: .8; }
.nm-lb-thumb.is-active { opacity: 1; box-shadow: inset 0 0 0 2px #FBAD1D; }
.nm-lb-thumb:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 2px; opacity: 1; }
.nm-lb-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 12px; }
.nm-lb-count { font: 700 13px/1 'Raleway', sans-serif; letter-spacing: .12em;
  color: rgba(255,255,255,.8); min-width: 62px; text-align: center; }
.nm-lb-btn { width: 52px; height: 52px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; border: 1.5px solid rgba(255,255,255,.28); border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease, transform .25s ease; }
.nm-lb-btn:hover:not(:disabled) { background: #FBAD1D; border-color: #FBAD1D; color: #333594; }
.nm-lb-btn:active:not(:disabled) { transform: scale(.92); }
.nm-lb-btn:disabled { opacity: .26; cursor: default; }
.nm-lb-btn:focus-visible { outline: 3px solid #FBAD1D; outline-offset: 3px; }
/* Its own row above the photo rather than floating over it: the slide is contain-fitted and can
   reach the full width, so any absolute placement lands on top of the image. As a flex item it
   reserves its own height and the photo never sits under the button. */
.nm-lb-close { align-self: flex-end; margin-bottom: 10px; }
/* Phones + tablets: the image gets the room, the controls sit in a compact bottom row and every
   target stays at/above the 44px touch minimum. Swipe is the primary gesture here. */
@media (max-width: 1024px) {
  .nm-lb { padding: max(10px, env(safe-area-inset-top)) 8px calc(10px + env(safe-area-inset-bottom)); }
  .nm-lb-slide { padding: 0 2px; }
  .nm-lb-cap { margin-top: 10px; font-size: 13px; padding: 0 10px; }
  .nm-lb-btn { width: 46px; height: 46px; }
  .nm-lb-close { margin-bottom: 6px; }
  .nm-lb-bar { gap: 14px; margin-top: 10px; }
  /* Smaller thumbs so the photo keeps the vertical room; the strip scrolls instead of shrinking. */
  .nm-lb-thumbs { gap: 6px; margin-top: 8px; justify-content: flex-start; }
  .nm-lb-thumb { width: 62px; height: 42px; }
}
@media (max-width: 560px) {
  .nm-lb-thumb { width: 52px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .nm-lb-track { transition: none !important; }
  .nm-lb.is-open { animation: none; }
  .nm-lb-thumb { transition: none !important; }
}

/* Desktop short viewports (laptops, or any browser whose UI chrome eats vertical space —
   Firefox's default chrome is taller than Chrome's, which is why this showed up there first).
   The split stage is locked to calc(100vh - 80px), so the feature list has to tighten up or it
   overflows the box and gets clipped. Paired with justify-content:safe center on split-left. */
@media (min-width: 1025px) and (max-height: 800px) {
  [data-nm-feature-list] { margin-top: 22px !important; }
  [data-nm-feature-row] { padding: 12px 0 !important; }
}
@media (min-width: 1025px) and (max-height: 700px) {
  [data-nm-feature-list] { margin-top: 16px !important; gap: 0 !important; }
  [data-nm-feature-row] { padding: 8px 0 !important; }
}
/* "Apie projektą" is an anchor target, so it has to fit in the viewport below the 80px header —
   otherwise clicking the link lands correctly but still leaves the bottom of the section cut off,
   which reads as an imprecise jump. Its 230px of vertical padding is the first thing to give. */
@media (min-width: 1025px) and (max-height: 860px) {
  #projektas { padding: 64px 0 56px !important; }
  [data-nm-prointro-img] { height: 420px !important; }
}
@media (min-width: 1025px) and (max-height: 760px) {
  #projektas { padding: 44px 0 40px !important; }
  [data-nm-prointro] { gap: 48px !important; }
  [data-nm-prointro-img] { height: 380px !important; }
}
@media (max-width: 760px) {
  [data-nm-luxe-hero] [style*="grid-template-columns:repeat(4,1fr)"],
  [data-nm-luxe-hero] div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-nm-split-left] { padding: 44px 20px 28px !important; }
  [data-nm-split-left] h2 { font-size: 26px !important; line-height: 1.12 !important; }
  [data-nm-splitcard] { inset: 18px 16px !important; }
  [data-nm-splitcard] > div { aspect-ratio: 3 / 2 !important; }
  [data-nm-split-right] { height: calc((100vw - 32px) * 2 / 3 + 36px); margin-bottom: 28px; }
  [data-nm-splitcard] > div > div:last-child { font-size: 20px !important; }
  [data-nm-bento] { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 170px !important; }
  /* Inline gallery: tighter section rhythm and the page's 20px phone gutter. */
  #galerija { padding: 64px 0 72px !important; }
  #galerija > div { padding: 0 20px !important; }
}

/* ===== Flagship homepage (index-flagship.dc.html) — responsive ===== */
@media (max-width: 1024px) {
  [data-nm-introgrid] { grid-template-columns: 1fr !important; gap: 28px !important; align-items: flex-start !important; }
  [data-nm-buildings] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-nm-vieta2] { grid-template-columns: 1fr !important; }
  [data-nm-interiors] { grid-template-columns: 1fr 1fr !important; }
  [data-nm-contact] { grid-template-columns: 1fr !important; gap: 56px !important; }
  [data-nm-footgrid] { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}
@media (max-width: 760px) {
  [data-nm-statsgrid] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-nm-statsgrid] > div:nth-child(2) { border-right: none !important; }
  [data-nm-statsgrid] > div:nth-child(3), [data-nm-statsgrid] > div:nth-child(4) { padding-top: 30px !important; }
  [data-nm-buildings] { grid-template-columns: 1fr !important; }
  [data-nm-interiors] { grid-template-columns: 1fr !important; }
  [data-nm-galgrid] { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 170px !important; }
  [data-nm-footgrid] { grid-template-columns: 1fr !important; }
}
@media (max-width: 460px) {
  [data-nm-statsgrid] { grid-template-columns: 1fr !important; }
  [data-nm-statsgrid] > div { border-right: none !important; padding-top: 30px !important; }
}

/* ===== Privalumų bokštas (index-bokstas.dc.html) — responsive ===== */
@media (max-width: 1024px) {
  [data-nm-towergrid] { grid-template-columns: 1fr !important; gap: 10px !important; align-items: start !important; }
  [data-nm-towerleft] { text-align: center; }
  [data-nm-towerleft] > div[style*="flex-wrap"] { justify-content: center; margin-left: auto; margin-right: auto; }
  [data-nm-towerright] { transform: scale(.82); }
}
@media (max-width: 600px) {
  [data-nm-towerright] { transform: scale(.62); }
}

/* ====================== HERO (cinematic flythrough) — title responsive ====================== */
@media (max-width: 900px) { [data-nm-herotitle] { font-size: 56px !important; } }
@media (max-width: 600px) { [data-nm-herotitle] { font-size: 40px !important; } }
@media (max-width: 380px) { [data-nm-herotitle] { font-size: 33px !important; } }

/* ====================== INTRO (Apie projektą) — responsive ====================== */
@media (max-width: 900px) {
  [data-nm-prointro] { grid-template-columns: 1fr !important; gap: 56px !important; }
}

/* ====================== VIETA (map) — responsive ====================== */
@media (max-width: 1024px) {
  [data-nm-vieta2] { grid-template-columns: 1fr !important; }
  [data-nm-vieta2] > div:first-child { padding: 64px 24px !important; }
  /* On a stacked VIETA the column runs the full page width, which would stretch six cards into
     a very wide band — so this is the one place the grid is capped rather than tracking the
     heading. */
  [data-nm-amenities] { max-width: 640px !important; }
}
/* Amenity cards. The labels are long Lithuanian place names ("Jonučių progimnazija",
   "Stotelė „Rato g.“"), so below ~620px two columns leave each card ~40vw wide and every
   label breaks across three lines. One column per row gives each card the full width and
   the text stops fragmenting. */
@media (max-width: 620px) {
  [data-nm-amenities] { grid-template-columns: 1fr !important; gap: 10px !important; max-width: none !important; }
  [data-nm-amenity] { padding: 14px 16px !important; gap: 14px !important; }
  [data-nm-amenity] > span { width: 44px !important; height: 44px !important; border-radius: 13px !important; }
  [data-nm-amenity-l] { font-size: 15px !important; }
  [data-nm-amenity-s] { font-size: 12.5px !important; }
}
/* On touch devices :hover sticks after a tap, leaving a card lifted until you tap elsewhere.
   Keyed to pointer capability rather than width so it also covers touch laptops. */
@media (hover: none) {
  [data-nm-amenity]:hover { transform: none !important; }
}
/* Below the phone-landscape / very-narrow line the map needs less height so the cards above
   it are not pushed entirely off the first screenful. */
@media (max-width: 620px) {
  [data-nm-vieta2] > div:last-child { min-height: 420px !important; }
}

/* ====================== NUMBERS (luxe) — responsive ====================== */
@media (max-width: 680px) {
  [data-nm-luxenums] { grid-template-columns: 1fr !important; }
  [data-nm-luxenums] > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; padding: 30px !important; }
  [data-nm-luxenums] > div:last-child { border-bottom: none !important; }
}

/* ====================== HEADER RESPONSIVE (identical to rinktis.html / butu-paieska.css) ====================== */
/* fixed header offset — match header height at each breakpoint */
@media (max-width: 680px) { [data-nm-page] { padding-top: 70px !important; } }
[data-nm-menumobile] { display: none; }
/* mobile header: logo · favourite · button · hamburger */
@media (max-width: 900px) {
  [data-nm-header] { padding: 0 16px !important; }
  [data-nm-formo] { display: none !important; }
  [data-nm-actions] { gap: 16px !important; }
}
@media (max-width: 760px) {
  /* the new Figma menu, stacked for mobile (legacy panel stays hidden) */
  [data-nm-menumobile] { display: none !important; }
  [data-nm-menutop] { display: flex !important; height: 70px !important; padding: 0 20px !important; }
  /* keep only the X in the top bar on mobile */
  [data-nm-menutop] > div:last-child > *:not(:last-child) { display: none !important; }
  [data-nm-menutop] img[src*="logo"] { height: 40px !important; }
  [data-nm-menugrid] { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; padding: 24px !important; align-content: center !important; }
  /* nav links */
  [data-nm-menugrid] > div:first-child { justify-content: flex-start !important; }
  [data-nm-menugrid] > div:first-child a { font-size: 27px !important; }
  [data-nm-menugrid] > div:first-child > div { gap: 20px !important; }
  /* brand block: left-align under the nav */
  [data-nm-menugrid] > div:nth-child(2) { align-items: flex-start !important; text-align: left !important; justify-content: flex-start !important; }
  [data-nm-menugrid] > div:nth-child(2) img { width: min(300px, 78%) !important; }
  [data-nm-menuaccent] { display: none !important; }
}
@media (max-width: 680px) {
  [data-nm-header] { height: 70px !important; }
  /* Align the pinned hero with the 70px mobile header (kills the 10px top/bottom gaps). All three
     values are re-stated together on purpose: top, height and the margin that cancels the sticky
     element's flow space are one set. Overriding only some of them leaves the backdrop and the
     foreground off by the 80-vs-70 difference, which shows as a 10px band of bare sky under the
     header — the two layers carry the same render and must stay pixel-registered. */
  #pradzia {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
    height: calc(100svh - 70px) !important;
    margin-bottom: calc(-100vh + 70px);
    margin-bottom: calc(-100svh + 70px);
  }
  [data-nm-hero-fg] { height: calc(100vh - 70px) !important; height: calc(100svh - 70px) !important; }
}
@media (max-width: 600px) {
  [data-nm-actions] { gap: 13px !important; }
  [data-nm-cta] { padding: 11px 16px !important; font-size: 13px !important; }
  [data-nm-logo] { height: 32px !important; }
}
@media (max-width: 380px) {
  [data-nm-actions] { gap: 11px !important; }
  [data-nm-cta] { padding: 10px 13px !important; font-size: 12px !important; }
  [data-nm-logo] { height: 32px !important; }
}
/* "Vieta" section bird overlaps the wrapped 2-line heading on narrow screens */
@media (max-width: 760px) {
  .nm-vieta-bird { display: none !important; }
}

/* ====================== ŠAKELĖ (brandbook p.12) ======================
   The brand's one decorative device: a hairline "twig" terminated by a
   Vasaros geltona dot. Horizontal here; the dot always sits at the open end. */
.nm-sakele { position: relative; display: block; width: clamp(34px, 6vw, 78px); height: 1px; background: rgba(255,255,255,.55); flex: 0 0 auto; }
.nm-sakele::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #FBAD1D; transform: translateY(-50%); }
.nm-sakele--left::after  { left: 0; }
.nm-sakele--right::after { right: 0; }
/* on indigo/light surfaces the twig line takes the brand blue instead of white */
.nm-sakele--ink { background: rgba(51,53,148,.45); }
@media (max-width: 560px) {
  /* the tagline needs the full width on phones — drop the flanking twigs */
  [data-nm-tagline] .nm-sakele { display: none; }
  [data-nm-tagline] span { white-space: normal !important; }
}
/* "Apie projektą" highlight rows: one column once the copy column narrows */
@media (max-width: 900px) {
  [data-nm-highlights] { grid-template-columns: 1fr !important; }
}