/* ==========================================================================
   Bonsai Loftai — Main stylesheet
   Author: Bonsai / Concept Lofts
   Astra child — we ship our own base, layout & components.
   --------------------------------------------------------------------------
   1.  Design tokens (CSS custom properties)
   2.  Reset / base
   3.  Typography
   4.  Layout helpers (container, sections, grid)
   5.  Buttons & UI atoms
   6.  Header / navigation
   7.  Footer
   8.  Homepage sections
   9.  Loftai (CPT) — filter & cards
   10. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
	/* Pagrindinės spalvos */
	--c-warm-white: #fbf7ec; /* PA1 Šilta balta */
	--c-warm-gray:  #ece6da; /* PA2 Šilta pilka */
	--c-black:      #0a0a07; /* PA3 Juoda */

	/* Papildomos spalvos */
	--c-light-gray: #ede9e0; /* PP1 Šviesiai pilka */
	--c-olive-gray: #756d64; /* PP2 Alyvų pilka */
	--c-walnut:     #564741; /* PP3 Riešuto ruda */

	/* Akcentai */
	--c-sand: #e2c9a9; /* A1 Kreminė smėlio */
	--c-azure: #d5d7d6; /* A2 Rami žydra */
	--c-oak:  #ad9780; /* A3 Blukinto ąžuolo */

	/* Semantiniai aliasai */
	--bg:          var(--c-warm-white);
	--text:        var(--c-walnut);
	--text-strong: var(--c-black);
	--text-muted:  var(--c-olive-gray);
	--accent:      var(--c-oak);
	--btn-bg:      var(--c-oak);
	--btn-bg-hover: var(--c-walnut);
	--btn-text:    var(--c-warm-white);

	/* Lofto statusas: laisvas / rezervuotas / parduotas */
	--status-free:     #4f7a52; /* žalia */
	--status-reserved: #c79a3a; /* geltona / gintaro */
	--status-sold:     #b5483f; /* raudona */

	/* Šriftai */
	--font-body:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-head:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-ui:    'Poppins', sans-serif;
	--font-micro: 'Myriad Pro', 'Jost', sans-serif;

	/* Tipografijos skalė (clamp: mobile → desktop)
	   Dizaine: antraštės 51–84pt, tekstas ~34pt — žiniatinkliui sumažinta. */
	--fs-h1:    clamp(2.5rem, 5vw + 1rem, 4.5rem);    /* ~40 → 72px */
	--fs-h2:    clamp(2rem, 3.5vw + 1rem, 3.25rem);   /* ~32 → 52px */
	--fs-h3:    clamp(1.5rem, 2vw + 0.75rem, 2.25rem);
	--fs-h4:    clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
	--fs-body:  clamp(1rem, 0.4vw + 0.9rem, 1.125rem); /* 16 → 18px */
	--fs-small: 0.875rem;
	--fs-micro: 0.8125rem;
	--fs-eyebrow: 0.75rem;

	/* Layout */
	--content-width: 1140px; /* main content */
	--wide-width: 1620px;    /* header + hero band */
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--section-y: clamp(3.5rem, 8vw, 7rem);
	--radius: 0;
	--radius-pill: 999px;

	/* Tranzicijos */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 0.35s;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Offset anchor jumps (e.g. menu → #apie) so the sticky header never covers
	   the target heading. */
	scroll-padding-top: 100px;
}

body.bonsai {
	position: relative;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` (not `hidden`) stops the decorative arches bleeding off the right
	   edge from making a sideways scrollbar — WITHOUT coercing overflow-y to
	   `auto` (which `hidden` does, turning body into a scroll container and
	   spawning a second, nested vertical scrollbar). */
	overflow-x: clip;
}

/* Continuous textured backdrop (soft window shadows) spanning the header +
   hero zone. One image, anchored top, behind both — the header bar and the
   warm margins around the boxed hero let it show through seamlessly.
   Height = approx header (~90px) + hero (920px) + a little breathing room.
   Front page only — other pages keep a clean solid header. */
body.bonsai.home::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Exact height = bottom of the hero box + a small frame, measured in JS
	   (see initHeroBackdrop in main.js) and exposed as --hero-backdrop. This
	   always covers header+hero on any screen and is correct on first paint —
	   no vh guesswork, no "photo slips out", no jump-after-scroll.
	   The calc() is only a fallback before JS runs / when JS is disabled. */
	height: var(--hero-backdrop, calc(88vh + 280px));
	z-index: -1;
	background-image: url('../img/hero-bg1.webp');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: var(--bg);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.5s var(--ease);
}

/* Once the header sticks (JS adds .is-stuck), fade the grey textured photo out
   so the hero margins ease to plain cream (body's --bg shows through) — matching
   the solid cream header. Scroll back to the top and it fades back in. Opacity
   transitions smoothly (background-image can't), so the change is gradual. */
body.bonsai.home.is-stuck::before {
	opacity: 0;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure {
	margin: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
}

#ast-scroll-top {
    display: none !important;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-head);
	font-weight: 300;
	color: var(--text-muted);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: 0.01em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
	margin: 0 0 1.25em;
}

p:last-child {
	margin-bottom: 0;
}

.eyebrow, .developer__projects h4 {
	font-family: var(--font-head);
    font-size: 25px;
    font-weight: 300;
    text-transform: uppercase;
    color: #0A0A07;
    display: inline-block;
    margin-bottom: 14px;
	line-height: unset;
}

.about__content h2 {
    font-size: 70px;
    line-height: 78px;
    color: #634D44;
    font-weight: 100;
	margin-bottom: 32px;
}

.micro {
	font-family: var(--font-micro);
	font-size: var(--fs-micro);
}

.text-muted {
	color: var(--text-muted);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
	width: 100%;
	max-width: calc(var(--content-width) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Wider container for the header + hero band only. */
.container--wide {
	max-width: calc(var(--wide-width) + var(--gutter) * 2);
}

.section { padding-block: var(--section-y); }
/* Apie projektą: extra bottom room on desktop so the claim-band arch doesn't
   climb onto the last block's button. */
@media (min-width: 901px) {
	.section.apie { padding-bottom: 120px; }
}
.section--tight {
    padding-block: 110px 40px;
}
.section--flush { padding-block: 0; }

.bg-warm-white { background: var(--c-warm-white); }
.bg-warm-gray  { background: var(--c-warm-gray); }
.bg-light-gray { background: var(--c-light-gray); }
.bg-sand       { background: var(--c-sand); }
.bg-oak        { background: var(--c-oak); }

.bg-walnut {
	background: var(--c-walnut);
	color: var(--c-warm-white);
}

.grid {
	display: grid;
	gap: var(--gutter);
}

.flow > * + * {
	margin-top: 1rem;
}

/* Restore list markers inside rich-text (WYSIWYG) content. */
.flow ul,
.flow ol {
	margin: 0 0 1rem;
	padding-left: 1.4em;
}
.flow ul { list-style: disc; }
.flow ol { list-style: decimal; }
.flow li { margin-bottom: 0.4em; }
.flow li::marker { color: var(--c-oak); }

/* ==========================================================================
   5. BUTTONS & UI ATOMS
   ========================================================================== */
.btn {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 24px;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-bg);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    cursor: pointer;
    min-width: 220px;
}

.btn:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: var(--btn-text);
}

.btn--outline {
	background: transparent;
	color: var(--text-strong);
	border-color: currentColor;
}

.btn--outline:hover {
	background: var(--btn-bg);
	border-color: var(--btn-bg);
	color: var(--btn-text);
}

/* Button anchors (<a class="btn">) must keep the button text colour in every
   state — otherwise the browser's link/visited/focus colour bleeds through
   (was showing up as blue text on focus). */
.btn:focus,
.btn:focus-visible,
.btn:visited,
.btn:active {
	color: var(--btn-text);
}
.btn--outline:focus,
.btn--outline:focus-visible,
.btn--outline:visited,
.btn--outline:active {
	color: var(--text-strong);
}


.btn-stack {
	display: inline-flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Plain text "read more" link (no border / no padding) — per design. */
.link-more {
	display: inline-block;
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #82796E;
    padding: 0px;
    border: 0;
    border-bottom: 1px solid #82796E;
    padding-bottom: 0px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.link-more:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* ==========================================================================
   6. HEADER / NAVIGATION
   ========================================================================== */
/* Header sits ABOVE the boxed hero, over the shared textured backdrop
   (transparent so body::before shows through). */
.site-header {
	position: relative;
	z-index: 50;
	padding-block: 1.5rem;
	background: transparent;
	    border-bottom: 1px solid var(--c-light-gray);
}

.home .site-header {
	   border-bottom: none;
}

.site-header.is-solid {
	position: fixed;
	inset: 0 0 auto 0;
	background: var(--c-warm-white);
	box-shadow: 0 2px 24px rgba(10, 10, 7, 0.06);
	animation: slideDown var(--dur) var(--ease);
	padding-block: 0.9rem;
	z-index: 9999999999999999;
}

@keyframes slideDown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

.header-inner {
	display: flex;
	align-items: flex-end;
	gap: clamp(1rem, 3vw, 3rem);
}

/* Never let the logo shrink/stretch when the header is crowded (nav + CTAs). */
.site-logo {
	flex: 0 0 auto;
	line-height: 0;
}
.site-logo img {
	height: 71px;
	width: auto;
	max-width: none;
}

/* Sticky (scrolled) header is more compact — shrink the logo to match. */
.site-header.is-solid .site-logo img {
	height: 55px;
	width: auto;
}

/* Centre the menu between logo and search. */
.main-nav {
	margin-inline: auto;
}

.main-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.25rem);
}

.main-nav a {
	    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #756D64;
    white-space: nowrap; /* keep multi-word items (e.g. "Apie projektą") on one line */
}

.main-nav a:hover, .header-search__toggle:hover {
	color: var(--accent);
}

/* --- Header live search --------------------------------------------------- */
.header-search {
	position: relative;
}

.header-search__toggle {
	display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #634D44;
    font-weight: 400;
    white-space: nowrap;
    box-shadow: none;
    transition: color var(--dur) var(--ease);
}

.header-search__toggle svg {
	width: 16px;
    height: 16px;
    stroke-width: 2px;
    stroke: #634D44;
}

/* Dropdown panel anchored to the right edge under the toggle. */
.header-search__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	width: min(380px, 90vw);
	z-index: 50;
	background: var(--c-warm-white);
	box-shadow: 0 12px 32px rgba(10, 10, 7, 0.16);
	border-radius: 12px;
	overflow: hidden;
}

.header-search__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header-search__icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--text-muted);
}

.header-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	letter-spacing: 0;
	text-transform: none;
}

.header-search__input:focus {
	outline: none;
}

.header-search__close {
	flex: none;
	border: 0;
	background: none;
	padding: 0;
	width: 22px;
	height: 22px;
	font-size: 20px;
	line-height: 1;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.header-search__close:hover {
	color: var(--text-strong);
}

.header-search__results {
	max-height: 60vh;
	overflow-y: auto;
}

.header-search__results li + li {
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.header-search__results a {
	display: block;
	padding: 0.65rem 0.9rem;
	transition: background var(--dur) var(--ease);
}

.header-search__results a:hover,
.header-search__results .is-active a {
	background: var(--c-warm-gray);
}

.header-search__type {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.header-search__title {
	display: block;
	font-size: 1rem;
	color: var(--text-strong);
}

.header-search__meta {
	display: block;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.header-search__empty {
	padding: 0.85rem 0.9rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* --- Header CTA buttons (Susisiekti / Rinktis) ---------------------------- */
.header-cta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* Drop the default Astra button drop shadow site-wide. */
button,
.ast-button,
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
a:where(.wp-block-button__link) {
	box-shadow: none;
}

.header-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.15rem;
	border-radius: 0;
	background: var(--btn-bg);
	border: 1px solid var(--btn-bg);
	color: var(--c-warm-white);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
	border-radius: 999px;
}

.header-btn:hover,
.header-btn:focus,
.header-btn:focus-visible {
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: var(--c-warm-white);
}

/* The parent theme's global button:focus rule paints focused controls white on
   transparent; keep our pills brown with white text on focus (incl. the photo
   band CTAs), and give a subtle ring for keyboard users. */
.header-btn:focus-visible {
	outline: 2px solid var(--btn-bg-hover);
	outline-offset: 2px;
}

.header-btn svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

/* The parent theme (Astra) prints a global rule that repaints EVERY <button>
   and submit input transparent with white text on hover/focus, which makes our
   labelled buttons vanish against the warm-white page. Override that same set
   with the brand oak (#ad9780). The `body` prefix raises specificity so this
   wins regardless of where Astra injects its inline CSS. Icon-only utility
   buttons (sliders, lightbox, map close…) keep their own look via their more
   specific rules; the hamburger toggle is explicitly kept chromeless below. */
body button:hover,
body button:focus,
body input[type="reset"]:hover,
body input[type="reset"]:focus,
body input#submit:hover,
body input#submit:focus,
body input[type="button"]:hover,
body input[type="button"]:focus,
body input[type="submit"]:hover,
body input[type="submit"]:focus {
	color: var(--c-warm-white);
	background-color: var(--c-oak);
	border-color: var(--c-oak);
}

.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:focus-visible {
	background: none;
	border-color: transparent;
}

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	margin-left: auto;
}

.nav-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--text-strong);
	margin: 6px 0;
	transition: transform var(--dur) var(--ease), opacity var(--dur);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer {
	position: relative;
	background: #ede9e0;
	padding-block: 84px 0;
	overflow: hidden;
}

/* Photo bleeding in from the far left edge. */
.site-footer__bleed {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: clamp(120px, 16vw, 280px);
	z-index: 0;
}

.site-footer__bleed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-footer .container {
	position: relative;
	z-index: 1;
}

.footer-top {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--gutter);
	align-items: center;
	margin-bottom: 2.5rem;
}

.footer-top h2 {
	color: var(--text-strong);
	margin: 0;
}

.wpforms-field-container input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #82796E !important;
    padding: 0 !important;
    color: #82796E !important;
    font-size: 19px !important;
    line-height: 22px !important;
    font-family: var(--font-head) !important;
    opacity: 1 !important;
}

.wpforms-field-container textarea {
    background: #F9F6F1 !important;
    min-height: 220px !important;
    color: #82796E !important;
    font-size: 19px !important;
    line-height: 22px !important;
	font-family: var(--font-head) !important;
    opacity: 1 !important;
}

.wpforms-field-container input::placeholder, .wpforms-field-container textarea::placeholder {
    color: #82796E !important;
	font-size: 19px !important;
	line-height: 22px !important;
	font-family: var(--font-head) !important;
    opacity: 1 !important;
}

label.wpforms-field-label-inline {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    color: #82796e !important;
}

.wpforms-field-container input {
    border-radius: 0 !important;
}

label.wpforms-field-label-inline a {
    border-bottom: 1px solid #82796E !important;
    padding: 0px;
    height: 24px !important;
    display: inline-block;
}
label.wpforms-field-label-inline a:hover {
    color: #634D44 !important;
}


div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full textarea:focus, div.wpforms-container-full input[type=email]:focus:invalid {
	box-shadow: none !important;
	border-color: transparent !important;
}

label.wpforms-field-label-inline {
    color: #82796E !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    font-family: var(--font-head) !important;
}

li.choice-1.depth-1 label.wpforms-field-label-inline {
    font-size: 16px !important;
    line-height: 24px !important;
}

div.wpforms-container-full button {
    background: #0A0A07 !important;
    color: #EDE9E0 !important;
    font-size: 17px !important;
    font-family: var(--font-head) !important;
    letter-spacing: 1.7px !important;
    padding: 8px 32px !important;
	border-radius: 0 !important;
}

div.wpforms-container-full button:hover {
    background: #0a0a076e !important;
    color: #EDE9E0 !important;
}
div.wpforms-container-full input[type=checkbox]:checked:before, div.wpforms-container-full input[type=radio]:checked:before {
    margin: 0;
    border-width: var(--wpforms-field-border-size, 0);
    border-style: solid;
    border-color: #0A0A07 !important;
    box-shadow: none;
    outline: none;
}
div.wpforms-container-full input[type=checkbox]:checked:after {
    border-top: none;
    border-right: none;
    height: calc(var(--wpforms-field-size-checkbox-size) * 0.6);
    border-left: 4px solid #0A0A07 !important;
    border-bottom: 4px solid #0A0A07 !important;
    background-color: transparent;
    transform: translate(0, 1px) scale(0.5) rotate(-45deg);
    left: calc(-4px + var(--wpforms-field-border-size, 1px));
    top: calc(-3px + var(--wpforms-field-border-size, 1px));
}

li.choice-1.depth-1.wpforms-selected input {
    margin-top: 5px;
}

/* Contact form (WPForms): the consent checkbox stays on its own full-width row.
   The "Siųsti žinutę" button sits bottom-right, in line with that row (per
   mockup) from 640px up; below 640px it stacks normally under the checkbox. */
.site-footer div.wpforms-container-full .wpforms-field-checkbox,
.site-footer div.wpforms-container-full .wpforms-field-gdpr-checkbox {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding-top: 4px !important;
}

@media (min-width: 640px) {
    .site-footer div.wpforms-container-full form {
        position: relative;
        padding-bottom: 8px;
    }
    .site-footer div.wpforms-container-full .wpforms-submit-container {
        position: absolute !important;
        right: 0;
        bottom: 0;
        width: auto !important;
        margin: 0 !important;
        text-align: right !important;
    }
    /* Reserve room on the consent row so its text never runs under the button. */
    .site-footer div.wpforms-container-full .wpforms-field-checkbox,
    .site-footer div.wpforms-container-full .wpforms-field-gdpr-checkbox {
        padding-right: 210px !important;
    }
}

/* Two-line contact heading: lead question + large uppercase "Susisiekime". */
.footer-heading {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	line-height: 1.1;
}

.footer-heading__lead, .footer-heading__main {
	font-family: var(--font-head);
    font-size: 58px;
    font-weight: 100;
    color: #634D44;
    line-height: 69px;
}

.footer-top .site-logo img {
    height: 100px;
}


/* Underline-style form fields (per design). */
.footer-contacts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem 2.5rem;
	margin: 2rem 0 1.5rem;
}

.footer-field label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.4rem;
}

.footer-field input,
.footer-field textarea {
	width: 100%;
	padding: 0.45em 0;
	border: 0;
	border-bottom: 1px solid var(--c-oak);
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--text);
}

.footer-field input:focus,
.footer-field textarea:focus {
	outline: none;
	border-bottom-color: var(--text-strong);
}

.footer-field--full {
	grid-column: 1 / -1;
}

.footer-field textarea {
	min-height: 70px;
	resize: vertical;
}

.footer-form .footer-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.footer-consent {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.footer-person .name {
    font-weight: 500; /* Poppins Medium — per contacts spec */
    color: #634D44;
    margin: 0;
    font-size: 24px;
    font-family: var(--font-head);
    text-align: right;
}

.footer-people {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 16px;
    margin-top: 48px;
    margin-bottom: 56px;
}

/* Socials sit on the same row as the contacts, pushed to the far right. */
.footer-people .social-icons {
	margin-left: auto;
	align-self: center;
}

/* Each person: name+role column, a vertical divider, then email+phone column. */
.footer-person {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.footer-person__contact {
	padding-left: 1.1rem;
	border-left: 1px solid var(--line, rgba(0, 0, 0, 0.18));
}

.footer-person__contact p {
	margin: 0;
    color: #000000;
    font-size: 22px;
    line-height: 33px;
}

.footer-person__contact a {
	color: var(--text-strong);
	font-family: var(--font-head);
	text-align: left;
}

.footer-person .role {
	font-family: var(--font-ui);
    font-size: 15px;
    text-transform: uppercase;
    color: #634D44;
    margin: 0;
    font-weight: 400; /* Poppins Regular */
    text-align: right;
}

/* Email = Poppins Light (300), phone = Poppins SemiBold (600); both #0a0a07
   (inherited from .footer-person__contact a → --text-strong). */
.footer-person__contact .email a { font-weight: 300; }
.footer-person__contact .phone a { font-weight: 600; }

/* Full-width dark bar holding only the copyright line. */
.footer-bottom {
	margin-top: 2.5rem;
    background: #000000;
    font-size: 17px;
    padding-block: 1rem;
    color: #FFFFFF;
}

/* Note on the left, copyright on the right. */
.footer-bottom .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.footer-note {
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}

.footer-bottom .copyright {
	display: block;
	text-align: right;
	letter-spacing: 0.02em;
}

.social-icons {
	display: flex;
	gap: 16px;
}

.social-icons a {
	display: grid;
	place-items: center;
	color: var(--accent, #82796e);
	transition: opacity var(--dur) var(--ease);
}

.social-icons a svg {
	    width: 44px;
    height: 44px;
	display: block;
}

.social-icons a:hover {
	opacity: 0.7;
}

.social-icons a svg path {
    fill: #82796E;
}

/* ==========================================================================
   8. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Shared decorative atoms --------------------------------------------- */
/* Bronze/oak circle that bleeds from the left edge behind a band. */
.deco-circle {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 35% 30%, var(--c-oak), var(--c-walnut));
}

.deco-rect {
	position: absolute;
    z-index: 0;
    pointer-events: none;
    background: #AD9780;
}

/* Peach gradient blob. */
.deco-soft {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, #f6d9b8 0%, #f0c79c 45%, rgba(240, 199, 156, 0) 72%);
}

/* --- 8.1 Hero — boxed photo (max 1620px) with text overlaid --------------
   The box is inset so the shared textured backdrop frames it on all sides. */
.hero {
	padding-top: 0;
    padding-bottom: 0;
}

.hero__box {
	position: relative;
	height: 920px;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    align-items: stretch; /* let .hero__inner fill the height (buttons → bottom) */
}

.hero__box img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Anchor the crop to the TOP so the sky always stays in view (and the
	   headline sits on it) on wide/short viewports where cover would otherwise
	   trim the top. */
	object-position: center top;
	z-index: 0;
}

/* Soft veil so overlay text stays legible on light skies. */


.hero__inner {
	position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* lines at the top, buttons at the bottom */
    align-items: stretch;
    gap: 2rem;
    /* No height:100% — with the box's min-height on mobile that collapses to
       content height and kills space-between. .hero__box{align-items:stretch}
       already stretches this to full height. Side padding keeps text off edge. */
    padding: clamp(4rem, 22vh, 13rem) var(--gutter) clamp(2rem, 6vh, 4.5rem);
    text-align: left;
}

/* Hero headline: each line is a block that steps further right than the one
   above it and fades in from the left, one after another (staggered by --i). */
.hero__lines {
	align-self: center;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Warm taupe over the light evening sky (per doc IS_7 mockup nr.1) —
	   sentence case, not uppercase, no shadow. */
	color: #9B8572;
	text-transform: none;
	font-weight: 300;
	line-height: 1.14;
	letter-spacing: 0.01em;
	text-align: center;
	text-shadow: none;
}

.hero__line {
	display: block;
	/* Descriptor lines (2nd onward) — medium size. */
	font-size: clamp(1rem, 1.4vw + 0.55rem, 1.5rem);
	opacity: 0;
	/* Slow + clearly staggered so each line reads as it arrives. */
	animation: heroLineIn 1.4s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 1.15s + 0.3s);
	will-change: opacity, transform;
}

/* First line = the slogan punch ("Išleisk mažiau. Gauk daugiau.") — kept large;
   the whole headline is pushed DOWN into the open sky (below the corner tree
   canopy) via .hero__inner padding-top instead of being shrunk. */
.hero__line:first-child {
	font-size: clamp(1.9rem, 3.1vw + 0.7rem, 3.3rem);
	color: #9B8572;
	margin-bottom: 0.15em;
}

/* 1100–1600px: hold the slogan at a steady 3rem (the fluid clamp dips below
   that in this band). */
@media (min-width: 1100px) and (max-width: 1600px) {
	.hero__line:first-child { font-size: 3rem; }
}

/* Desktop: lift the headline out of the flow and pin it top-right over the open
   sky (client's exact placement). Phones/tablets keep the centred flow layout —
   fixed px offsets would misplace the text on small screens (where the framing
   trees are cropped out anyway). */
@media (min-width: 1025px) {
	.hero__lines {
		position: absolute;
		top: 120px;
		right: 50px;
	}
}

@keyframes heroLineIn {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__line { animation: none; opacity: 1; }
}

/* Bottom row of the hero: address on the left, CTAs on the right, both on the
   grass. Sits at the bottom because .hero__inner uses justify:space-between. */
.hero__foot {
	/* Holds the address pin seal, pinned near the bottom-right of the hero. */
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 1rem;
	width: 100%;
	position: absolute;
	bottom: 120px;
	right: 0;
}

/* Round project "seal" (doc IS_7 mockup): cream disc with arced address text +
   the big street number, sitting where the hero CTA buttons used to be. Fades in
   after the headline lines. */
.hero__seal {
	width: clamp(96px, 9vw, 132px);
	max-width: 100px;
	opacity: 0;
	animation: heroLineIn 1.2s var(--ease) both;
	animation-delay: 3.9s;
	will-change: opacity, transform;
}
.hero__seal svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 3px 12px rgba(10, 10, 7, 0.20));
}

/* Mobile-only "Rinktis" pill in the hero foot; hidden on desktop. */
.hero__cta-mob { display: none; }
@media (prefers-reduced-motion: reduce) {
	.hero__seal { animation: none; opacity: 1; }
}

/* Address fades in AFTER the headline lines (delay set below), smaller font. */
.hero__address {
	margin: 0;
	align-self: flex-end;
	color: var(--c-warm-white);
	font-size: clamp(1.05rem, 1vw + 0.6rem, 1.875rem); /* ~30px desktop */
	font-weight: 400;
	letter-spacing: 0.03em;
	/* Sits over bright grass — a tight dark shadow keeps it readable. */
	text-shadow: 0 1px 3px rgba(10, 10, 7, 0.75), 0 2px 16px rgba(10, 10, 7, 0.55);
	opacity: 0;
	/* ~3 headline lines finish around 3.3s + 1.4s; address arrives just after. */
	animation: heroLineIn 1.4s var(--ease) both;
	animation-delay: 3.9s;
	will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
	.hero__address { animation: none; opacity: 1; }
}

/* CTAs drop to the bottom of the photo (on the grass), aligned to the right. */
.hero__actions {
	align-self: flex-end;
}

.hero__actions .btn-stack {
	gap: 0.6rem;
}

/* Hero: both CTAs are solid oak/brown (per design), never light/outline. */
.hero__actions .btn,
.hero__aside .btn {
	background: var(--btn-bg);
    color: #F7F1E3;
    border-color: var(--btn-bg);
}

.hero__actions .btn:hover,
.hero__aside .btn:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
}

/* Homepage: hide the repeated in-block CTA stacks (every section) — replaced
   by the floating sticky CTA. The HERO buttons stay in their original spot
   (top-right), and the floating CTA only takes over once you scroll past the
   hero. Kept in markup so reverting = removing these rules. The sticky stack is
   excluded via :not(); the footer form submit isn't a .btn-stack so it stays. */
body.home .btn-stack:not(.sticky-cta__stack) {
	display: none;
}

/* Re-show the hero's own CTA in its original position (more specific wins). */
body.home .hero__actions .btn-stack {
	display: inline-flex;
}

/* --- Sticky CTA (homepage) — the two CTAs float, stacked, no backing panel,
   like a little scrolling header that slides up from the bottom. ----------- */
/* Disabled for now (client request): the floating buttons are hidden on all
   viewports, but the markup + JS are kept so it can be re-enabled by simply
   removing this one rule. Their job is now done by the header CTA buttons. */
.sticky-cta {
	display: none !important;
}

.sticky-cta {
	position: fixed;
	/* Hug the viewport's right edge (a small gutter) so the buttons sit in the
	   screen margin and never overlap the text column. */
	right: clamp(16px, 2.5vw, 36px);
	bottom: clamp(16px, 3vw, 40px);
	left: auto;
	z-index: 90;
	transform: translateY(150%);
	opacity: 0;
	transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
	pointer-events: none;
}

.sticky-cta.is-visible {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
	z-index: 99999999999999999;
}

.sticky-cta__stack {
	gap: 0.6rem;
}

/* Solid oak buttons (per design); a soft shadow keeps them legible over any
   section/photo behind them without adding a background bar. */
.sticky-cta .btn {
	min-width: 220px;
	box-shadow: 0 10px 30px rgba(10, 10, 7, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.sticky-cta { transition: opacity 0.3s linear; }
}

/* Phones: turn the floating stack into a stuck bottom bar — both CTAs side by
   side in one row if they fit, smaller, on a cream panel. Prefixed with
   .sticky-cta so these win over the generic .btn-stack sizing further below. */
@media (max-width: 768px) {
	.sticky-cta {
		right: 0;
		left: 0;
		bottom: 0;
		background: var(--c-warm-white);
		box-shadow: 0 -2px 18px rgba(10, 10, 7, 0.12);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	}
	.sticky-cta .sticky-cta__stack {
		flex-direction: row;
		gap: 8px;
		width: 100%;
		max-width: none;
	}
	.sticky-cta .btn {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		padding: 11px 8px;
		font-size: 13px;
		letter-spacing: 0.05em;
		box-shadow: none;
		text-align: center;
	}
}

/* --- 8.2 Features grid --------------------------------------------------- */
.features {
	background: var(--c-warm-white);
    padding-top: 120px;
    padding-bottom: 40px;
}

/* 1100–1600px: tighter top / roomier bottom padding for the features band. */
@media (min-width: 1100px) and (max-width: 1600px) {
	.features {
		padding-top: 60px;
		padding-bottom: 80px;
	}
}

.features__grid {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem);
    margin-inline: auto;
}

.feature {
	text-align: center;
}

/* Icon only — no circle, no hover fill. */
.feature__icon {
	margin: 0 auto 20px;
	display: grid;
	place-items: center;
}

.feature__icon img {
	width: 180px;
	height: 180px;
	object-fit: contain;
}

/* Built-in brand line icons: thin lines, brand brown via currentColor. */
.feature__icon .feat-svg {
	width: 48px;
	height: 48px;
	color: #82796e;
	transition: color var(--dur) var(--ease);
}

.feature h3 {
	font-size: 20px;
    color: #564741;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.feature p {
	font-size: 18px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 280px;
    margin: auto;
	font-family: var(--font-ui);
}

/* --- 8.3 Claim band — bronze arch + sand rectangle bleed from far left;
   the cream band overlaps them and sits left-of-centre. ------------------- */
.claim {
	position: relative;
    max-width: 1920px;
    margin: auto;
}

.claim .deco-arch {
	background-image: url(../img/elemenet1.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 60px;
    bottom: 0;
    width: clamp(170px, 18vw, 338px);
    height: clamp(220px, 24vw, 440px);
    z-index: 9;
}

.claim .deco-rect {
	left: 0;
	bottom: 0;
	width: clamp(70px, 9vw, 130px);
	height: 55%;
}

.claim-band {
	position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--gutter);
    align-items: center;
    background: #ECE6DA;
    padding: 42px 42px 42px 120px;
    margin-left: clamp(2rem, 7vw, 6rem);
    box-shadow: 0 10px 50px rgba(10, 10, 7, 0.05);
    z-index: 999;
    border-left: 15px solid #000;
    max-width: 1700px;
    margin-left: auto;
}

.claim-band-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: 1175px;
}

.claim-band h2 {
	color: #AD9780;
    margin: 0;
    font-size: 50px;
    line-height: 67px;
    font-weight: 100;
    max-width: 1150px;
}

/* Button on the right of the claim band (auto column of .claim-band grid). */
.claim-band__cta {
    justify-self: end;
    white-space: nowrap;
    border-radius: 99px;
}

/* Mid screens (1101–1600px): narrower claim so the line wraps sooner. */
@media (min-width: 1101px) and (max-width: 1600px) {
    .claim-band h2 {
        max-width: 900px;
    }
}

/* --- 8.4 Full-bleed media band: photo as background, buttons in a normal
   flow container (NO absolute positioning, so alignment is easy to tweak).
   Each band has a modifier (--1 / --2) to position its buttons separately. */
.media-band {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: clamp(420px, 90vh, 1000px);
	display: flex;
}

/* The buttons live inside the centred content container; control vertical
   alignment with .media-band { align-items } and horizontal with
   .media-band__inner { justify-content }. */
.media-band__inner {
	display: flex;
	width: 100%;
}

/* ---- Band 1 (after the claim band): buttons upper-right ---- */
.media-band--1 {
	align-items: flex-start;
}
.media-band--1 .media-band__inner {
	justify-content: flex-end;
	padding-top: clamp(2rem, 7vw, 6rem);
}

/* ---- Band 2 (between Location and Bonuses): buttons centred-right ---- */
.media-band--2 {
	align-items: flex-end;
	padding: 110px 0;
	z-index: 9;
}
.media-band--2 .media-band__inner {
	justify-content: flex-end;
}

/* Photo-band CTA: two header-style pills stacked one under another, sitting in
   the band's content area (band 1 upper-right, band 2 lower-right — driven by
   the .media-band align/justify rules above). Same look as the header's
   "Greita paieškas" / "Susisiekti" buttons, just full-width within the stack. */
.band-cta {
	display: inline-flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: stretch;
}
.band-cta .header-btn {
	justify-content: center;
	gap: 0;
	padding: 0.6rem 1.15rem;
	min-width: 190px;
	box-shadow: 0 12px 30px rgba(10, 10, 7, 0.18);
}
/* Keep the label on the photo bands even where the header collapses to
   icon-only — here the two pills are the section's main call to action.
   (Mobile sizing/centring lives in the ≤1100px block further down.) */
.band-cta .header-btn__label {
	display: inline;
}

/* --- 8.5 About — narrow text left, arch-masked image right -------------- */
.about {
	position: relative;
}

.about .deco-circle {
	width: clamp(180px, 20vw, 300px);
	aspect-ratio: 1;
	left: -7%;
	bottom: 8%;
}

.about .deco-rect {
	width: 260px;
	height: 100%;
	left: 0;
	bottom: 0;
}

.about__content p {
    padding-left: 0;
    font-size: 20px;
    line-height: 34px;
	    font-weight: 400;
	color: #756D64;
}


.about__grid {
	position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.about__content {
}

.about__content .btn,
.about__content .link-more {
	margin-top: 1.5rem;
    margin-left: 0;
}

/* Collapsible About text: only the first paragraph shows; the rest fades out
   and reveals on click ("Plačiau apie projektą"). JS adds .is-clamped and the
   collapsed height, so with no JS the full text simply shows. */
.about__text { position: relative; }
.about__text.is-clamped {
	overflow: hidden;
	transition: max-height 0.55s var(--ease);
}
.about__text.is-clamped:not(.is-open)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4.5em;
	background: linear-gradient(to bottom, rgba(251, 247, 236, 0), var(--bg));
	pointer-events: none;
}

/* The toggle is a <button> styled like the underline link. */
button.about__more {
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
/* A global button:focus/hover rule paints buttons white — keep this one the
   link colour instead so the text stays visible on focus. */
button.about__more:hover,
button.about__more:focus,
button.about__more:focus-visible {
	color: var(--accent);
	background: none;
}

.about__media {
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
    position: relative;
    --photo-w: 440px;
    --arch-w: 330px;
    --arch-h: 640px;
    min-height: 770px;
}

/* Sand arch FRAMES the photo. It lives INSIDE the photo <figure> so it tracks
   the photo at every screen size: the dome peeks just above and a touch past
   the right edge, and the body runs to the photo's foot. Height = photo height
   (100%) + a little, so it always meets the bottom. Photo <img> (z-index:1)
   sits on top; the baked-in transparent arch corners let the sand show through. */
.about__arch {
    position: absolute;
    z-index: 0;
    display: block;
    pointer-events: none;
    top: 120px;
    left: 40%;
    right: -40%;
    bottom: auto;
    width: auto;
    height: calc(100% + 100%);
    background: var(--c-sand);
    border-radius: 50% 50% 0 0 / 21% 21% 0 0;
}

/* Photo overlaps the arch; sits in front. */
.about__media .arch {
	width: 100%;
	max-width: var(--photo-w);
	position: relative;
	z-index: 1;
}

.about__media .arch img {
    width: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    display: block;
}

/* Buttons stay above the arch. */
.about__media .btn-stack {
	z-index: 1;
    position: absolute;
    bottom: 0;
}

/* --- 8.6 Location — left-edge interior photo, centre info, right map ---- */
.location {
	position: relative;
	overflow: hidden;
}

.location__bleed {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: clamp(110px, 15vw, 260px);
	z-index: 0;
}

.location__bleed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.location__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"info map"
		"info actions";
	grid-template-rows: auto auto;
	column-gap: clamp(2rem, 6vw, 5rem);
	row-gap: 1.25rem;
	align-items: start;
}

.location__info { grid-area: info; }

.location__info h2 {
	color: #634D44;
    font-size: 70px;
    margin-bottom: 16px;
    line-height: 78px;
    font-weight: 100;
}

.location__addr {
	font-family: var(--font-head);
    font-size: 43px;
    font-weight: 100;
    color: #634D44;
    margin-bottom: 2.5rem;
    line-height: 54px;
}

.location__info .flow p {
    font-size: 20px;
    line-height: 34px;
	font-weight: 400;
    color: #756D64;
}

.location__info .btn,
.location__info .link-more {
	margin: 1.25rem 0;
}

.travel-list {
	/* ONE shared grid for every row: the time column is a single max-content
	   track measured across all rows, so the destination text always starts on
	   the same x — rows line up no matter how wide each time value is. */
	display: grid;
	grid-template-columns: 24px max-content 1fr;
	align-items: center;
	row-gap: 0.1rem;
	column-gap: 0.85rem;
	margin-top: 0.5rem;
	padding-left: 0;
}

.travel-list li {
	display: contents; /* let icon/time/text flow into the shared grid above */
}

.travel-list .micro {
	font-family: var(--font-body);
	color: #756D64;
	font-size: 20px;
	line-height: 34px;
	font-weight: 400;
	white-space: normal; /* same wrapping as the paragraph text */
}

.travel-list .t-icon {
	color: var(--text-strong);
	display: inline-flex;
	justify-content: center;
	height: 27px;
}

.travel-list .t-time {
	font-family: var(--font-micro);
	font-weight: 700;
	color: var(--text-strong);
	font-size: 20px;
	white-space: nowrap; /* keep the whole "10–15 min." on one line */
}

/* Map cell bleeds out to the right viewport edge. It is its OWN grid item, so
   the % in the margin resolves against the grid container width and lands the
   right edge exactly on the viewport edge. Buttons are a SEPARATE cell below,
   so they never get dragged off-screen with the bleed. */
.location__map {
	grid-area: map;
	width: auto;
	background: var(--c-warm-gray);
	min-height: clamp(360px, 40vw, 540px);
	position: relative;
	margin-right: calc(50% - 50vw);
}

/* Buttons: separate cell under the map, kept inside the content bounds. */
.location__actions {
	grid-area: actions;
	justify-self: end;
}

.location__map iframe,
.location__map-canvas {
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 40vw, 540px);
	border: 0;
	display: block;
}

/* Custom info window: warm-cream bubble matching the site, with place name +
   travel time and a compact close button. We restyle Google's bubble shell so
   the background + tail are cream instead of plain white. */
.gm-style .gm-style-iw-c {
	background: var(--c-warm-white) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 28px rgba(10, 10, 7, 0.16) !important;
	padding: 0 !important;
}

.gm-style .gm-style-iw-d {
	overflow: hidden !important;
}

/* The little pointer/tail under the bubble. */
.gm-style .gm-style-iw-tc::after {
	background: var(--c-warm-white) !important;
}

.bonsai-map-iw {
	position: relative;
	font-family: var(--font-body);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.7rem 2rem 0.7rem 0.9rem;
}

.bonsai-map-iw strong {
	font-weight: 500;
	color: var(--text-strong);
}

.bonsai-map-iw span {
	font-size: var(--fs-small);
	color: var(--accent);
	white-space: nowrap;
}

.bonsai-map-iw__close {
	position: absolute;
	top: 0.3rem;
	right: 0.4rem;
	border: 0;
	background: none;
	padding: 0;
	width: 18px;
	height: 18px;
	line-height: 1;
	font-size: 18px;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.bonsai-map-iw__close:hover {
	color: var(--text-strong);
}

.location__map-placeholder {
	display: grid;
	place-items: center;
	min-height: clamp(360px, 40vw, 540px);
	color: var(--text-muted);
	font-size: var(--fs-small);
	background: var(--c-light-gray);
}

/* Map marker dot (matches the design's placeholder pin). */
.map-pin {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-walnut);
	box-shadow: 0 0 0 7px rgba(86, 71, 65, 0.14);
}

/* --- 8.7 Bonuses — grey panel + photo inside the content container; the
   sunset arch (Group.webp) bleeds from the right edge BEHIND everything.
   NOTE: the grid lives on .bonuses__inner (a .container), NOT on .bonuses. --- */
.bonuses {
	position: relative;
	/* Clip X (trims the sun's right bleed at the section edge → no sideways
	   scroll) but keep Y visible so the sunset arch can still spill DOWN past
	   the section toward the map below. .location comes later in the DOM and is
	   positioned, so it paints over the spill — the sun tucks behind the map. */
	overflow-x: clip;
	overflow-y: visible;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

.bonuses__inner {
	position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    max-width: calc(1211px + var(--gutter) * 2);
}

/* Grey panel: inset vertically so the photo overhangs it top & bottom. */
.bonuses__text {
	background: var(--c-warm-gray);
	padding: clamp(2rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
}

.bonuses__text h2 {
	color: #AD9780;
    font-weight: 100;
    max-width: 12ch;
    font-size: 58px;
    line-height: 65px;
    margin-bottom: 32px;
}

.bonuses__text .slider__nav {
	margin-top: 1.25rem;
}

/* List sits at the bottom of the panel. */
.bonuses__list {
	margin-top: auto;
	padding-top: 2rem;
}

.bonuses__list li {
	padding: 0.18rem 0;
}

/* Each title drives the slider; the active one is emphasised (colour/weight
   only — same size as the design — in sync with the visible photo). */
.bonuses__name {
	background: none;
    padding: 0;
    text-align: left;
    font-family: var(--font-head);
    font-size: 35px;
    font-weight: 300;
    line-height: 28px;
    color: #564741;
    text-decoration: none !important;
    cursor: pointer;
    transition: color var(--dur) var(--ease), font-weight var(--dur);
    border-image-width: 0 !important;
    border: 0 !important;
    text-decoration-thickness: 0 !important;
    box-shadow: none !important;
}

.bonuses__name:hover,
.bonuses__name.is-active {
	
}

.bonuses__name.is-active {
	font-weight: 300;
}

.bonuses__media {
	position: relative;
	min-height: 920px;
}

button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus {
    color: #ffffff;
    background-color: transparent;
    border-color: transparent;
}

/* Sunset arch (Group.webp) lives INSIDE the bonus photo box so it tracks the
   photo: the dome starts at the photo top and the box runs ~190px PAST the
   photo foot, so the sun descends to the map that now sits directly below.
   .bonuses is overflow:visible and .location (later + positioned) paints over
   the spill → the sun tucks BEHIND the map. Hidden on phones (see ≤ rule). */
.bonuses .deco-soft {
	top: 0;
    bottom: -190px;
    left: 100%;
    right: auto;
    transform: translateX(-45%);
    width: clamp(200px, 40vw, 720px);
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background: url(../img/group.webp) no-repeat center bottom / contain;
    z-index: 0;
}

/* Make the photo FILL the whole media column (full width AND height), beating
   the generic .slider__slide img { aspect-ratio: 4/3 } and base img rules. */
.bonuses__media .slider,
.bonuses__media .slider__track,
.bonuses__media .slider__slide {
	height: 100%;
}

.bonuses__media .slider__slide img,
.bonuses__media .slider__placeholder {
	width: 100%;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* Fallback fill for a bonus slide that has no image yet. */
.slider__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	background: linear-gradient(135deg, var(--c-oak), var(--c-walnut));
}

.bonuses__media .slider__nav {
	position: absolute;
	left: clamp(2.5rem, 5vw, 4.5rem);
	bottom: auto;
	top: clamp(2.5rem, 5vw, 4.5rem);
	margin: 0;
}

.bonuses__media .slider__actions {
	position: absolute;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 2;
}

/* --- Gallery homepage block: reuses the .bonuses two-column panel (doc IS_7)
   but without the sunset arch, with a shorter photo column and the "Japandi
   Wave" intro + nav + "Plačiau" link stacked in the panel. ----------------- */
/* Typography mirrors the "Vieta mieste" section (per client): big thin #634D44
   heading + #756D64 body, with the same global eyebrow above. Clamp scales it
   like the location h2 (≈70px desktop → 32px phone) across all screens. */
/* Responsive mirrors .location__info h2 (the "Vieta mieste" heading): 70 → 54
   → 46 → 34 → 30px across the same breakpoints. */
.bonuses--gallery .bonuses__text h2 {
	color: #634D44;
	font-weight: 100;
	max-width: none;
	font-size: 70px;
	line-height: 78px;
	margin-bottom: 16px;
}
/* Subtitle level — mirrors .location__addr (big thin #634D44), sits between the
   heading and the body, like the "Vieta mieste" paantraštė. */
.bonuses--gallery .bonuses__addr {
	font-family: var(--font-head);
	font-size: clamp(22px, 2.4vw, 43px);
	font-weight: 100;
	color: #634D44;
	line-height: 1.25;
	margin: 0 0 1.5rem;
}
.bonuses--gallery .bonuses__intro {
	color: #756D64;
	font-weight: 400;
	font-size: clamp(16px, 1.3vw, 20px);
	line-height: 1.6;
}
.bonuses--gallery .bonuses__foot {
	margin-top: auto;
	padding-top: 1.75rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}
/* Float the round slider arrows over the photo itself, bottom-right (same round
   taupe arrows as the gallery page). The nav lives inside the slider, so it is
   anchored to the photo (never spilling below it) and clipped to the photo box.
   Overrides the top-left placement used by the other bonuses panel. */
.bonuses--gallery .bonuses__media .slider__nav {
	position: absolute;
	top: auto;
	left: auto;
	right: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 4;
	margin: 0;
	gap: 12px;
}
/* No hover state on the gallery arrows. */
.bonuses--gallery .slider__btn:hover {
	filter: none;
}
/* Photo column fills the whole block height so its top/bottom line up with the
   text panel (the grid stretches both columns equally). A min-height keeps it
   sensible if the text is short. */
.bonuses--gallery .bonuses__media {
	min-height: clamp(360px, 38vw, 520px);
	height: 100%;
	align-self: stretch;
}
/* Each slide is a zoom button (click → lightbox); make it fill the photo column
   so the image covers, matching the old bonuses panel. */
.bonuses--gallery .bonuses__media .slider__slide .zoom-btn {
	height: 100%;
	cursor: zoom-in;
}
.bonuses--gallery .bonuses__media .slider__slide .zoom-btn img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* --- 8.8 Gallery — two columns, each a slider with arrows by heading ---- */
.gallery__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.gallery__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.gallery__head h3 {
	margin: 0;
    font-size: 30px;
    color: #564741;
    text-transform: uppercase;
    line-height: 42px;
}

.gallery__col .slider__nav {
	margin: 0;
}

.gallery__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 5rem;
}

/* --- 8.9 Developer ------------------------------------------------------- */
.developer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.developer h2 {
    color: #634D44;
    font-size: 57px;
	font-weight: 100;
}

.developer p {
    font-size: 20px;
    line-height: 35px;
    font-weight: 400;
    color: #0A0A07;
}

.developer__projects h4 {
	color: #82796E;
}

.developer__list {
	columns: 1;
    column-gap: 2.5rem;
    font-size: 22px;
    color: #0A0A07;
}

.developer__list li {
	padding: 0.22rem 0;
	break-inside: avoid;
	font-family: var(--font-head);
}

.developer__list li strong {
	font-weight: 300;
}

/* Two stacked CTAs aligned to the right edge, under the projects column. */
.developer__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 7rem;
}

.developer__actions .btn-stack {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	min-width: 220px;
}

/* --- Shared slider mechanics --------------------------------------------- */
/* IMPORTANT: the clipping window is the STATIC .slider, never .slider__track.
   The track is transformed (translateX); clipping it would move the window
   with it and hide the next slide. Keep overflow off the track. */
.slider {
	position: relative;
	overflow: hidden;
}

.slider__track {
	display: flex;
}

.slider__slide {
	min-width: 100%;
	flex: 0 0 100%;
}

.slider__slide img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.slider__nav {
	display: inline-flex;
	gap: 16px;
}

/* Round arrow buttons for ALL sliders — using the supplied SVG (a #82796e
   circle with a right-pointing chevron). The "prev" button is the same SVG
   mirrored. The old ‹ › text glyph is hidden (font-size:0). */
.slider__btn {
	width: 39px;
	height: 39px;
	border: 0;
	padding: 0;
	font-size: 0;
	background: url('../img/slider-arrow.svg') no-repeat center / contain;
	transition: filter var(--dur) var(--ease);
}

.slider__btn[data-slide="prev"],
.slider__btn[data-album="prev"] {
	transform: scaleX(-1);
}

/* No hover/focus chrome on the round arrow buttons — keep just the SVG (the
   global button:hover/:focus oak fill looked wrong behind these icons). */
.slider__btn:hover,
.slider__btn:focus,
.slider__btn:focus-visible {
	filter: none;
	background: url('../img/slider-arrow.svg') no-repeat center / contain;
	border-color: transparent;
	outline: none;
}
.slider__btn[data-slide="prev"]:hover,
.slider__btn[data-slide="prev"]:focus,
.slider__btn[data-album="prev"]:hover,
.slider__btn[data-album="prev"]:focus {
	transform: scaleX(-1);
}


section#galerija {
    background: #EDE9E0;
    border-top: 20px solid #AD9780;
}
/* ==========================================================================
   9. LOFTAI / FILTER
   ========================================================================== */
.loft-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	margin-bottom: 2.5rem;
}

.loft-filter .field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.loft-filter label {
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.loft-filter select,
.loft-filter input {
	padding: 0;
	border: 1px solid var(--c-oak);
	background: var(--c-warm-white);
	font-family: var(--font-body);
	color: var(--text);
}

.loft-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
}

.loft-grid.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--dur);
}

.loft-card {
	background: var(--c-warm-white);
	border: 1px solid var(--c-light-gray);
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}

.loft-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(10, 10, 7, 0.08);
}

.loft-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.loft-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.loft-card__status {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-ui);
	font-size: var(--fs-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.4em 0.9em;
	background: var(--c-warm-white);
	color: var(--text-strong);
}

/* Coloured status dot — green=free, amber=reserved, red=sold. */
.loft-card__status::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var(--status-free);
	flex: none;
}

.loft-card__status.is-reserved::before { background: var(--status-reserved); }
.loft-card__status.is-sold::before     { background: var(--status-sold); }

.loft-card__body {
	padding: 1.25rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.loft-card__title {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--text-strong);
}

.loft-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
	margin-top: auto;
}

.loft-card__meta span strong {
	color: var(--text-strong);
	font-weight: 500;
}

.loft-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 0;
	color: var(--text-muted);
}

div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before {
    background-color: #ffffff00 !important;
    background-clip: padding-box;
    background-image: none;
    border-radius: 1px;
    border: 1px solid #82796E !important;
	    top: 2px !important; 
}

div.wpforms-container-full input[type=checkbox]:checked:after {
    top: calc(0px + var(--wpforms-field-border-size, 1px)) !important;
}

div.wpforms-container-full li.choice-1.depth-1 input {
    border-bottom: none !important;
}

div.wpforms-container-full input[type=checkbox]:focus:before, div.wpforms-container-full input[type=radio]:focus:before {
    box-shadow: none !important;
    outline: none;
}
/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

/* Body lock when mobile menu open. */
body.nav-open {
	overflow: hidden;
}

/* ==========================================================================
   ≤1600px — retire the wide-canvas decorations early.
   The arches/blobs/rect bleed beyond the fixed 1140px content and only "fit"
   above ~1720px, so on any normal laptop they overflow and shove the layout.
   Hide them and keep the about photo inside its column (no negative offset).
   ========================================================================== */
@media (max-width: 1600px) {
	/* This one bleeds badly and wasn't asked to stay — keep it hidden. */
	.about .deco-circle {
		display: none;
	}

	/* Keep the decorative arches + brown rectangles (they're absolute + behind
	   everything, and body{overflow-x:hidden} clips any bleed) — just scaled to
	   fit. The About arch + brown rect and the Location brown block stay down to
	   992px; the Claim arch + rect keep their vw-based clamp all the way into
	   mobile. The ≤992px / mobile rules below finish the job. */

	/* About: brown rectangle stays as the photo backdrop (left edge) — same slim
	   width as the Location block. Text is cleared off it by the padding rule in
	   the 993–1600 block below. */
	.about .deco-rect {
		display: block;
		width: clamp(70px, 8vw, 180px);
	}

	/* About: shrink-wrap the media box to the (smaller) photo so the sand arch —
	   positioned against this box — always sits BEHIND the photo and overlaps it
	   about halfway, instead of floating off to the side. */
	.about__media {
		min-height: auto;
		--photo-w: clamp(280px, 30vw, 420px);
		max-width: var(--photo-w);
		margin-left: auto;      /* photo to the right; gutter gap from the edge */
		position: relative;
	}
	.about__media .arch {
		max-width: none;
		width: 100%;
		margin: 0;
	}
	.about__media .arch img {
		position: relative;
		right: auto;
		width: 100%;
		height: auto;
	}
	/* The arch is photo-anchored (see base .about__arch, which lives inside the
	   figure) — no per-breakpoint geometry needed; it scales with the photo. */

	/* Location: instead of the interior photo, show the same brown block. */
	.location__bleed {
		display: block;
		width: clamp(70px, 8vw, 180px);
	}
	.location__bleed img {
		display: none;
	}
	.location__bleed::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #AD9780;
	}

	.site-footer__bleed {
		display: none;
	}

	.claim-band {
		max-width: calc(var(--content-width) + var(--gutter) * 2);
		margin-left: auto;
		margin-right: auto;
		gap: 0;
	}
	.about__media .btn-stack {
		position: relative;
	}
}

/* Below 992px the About + Location sections are fully stacked — drop the brown
   side-blocks so they don't sit awkwardly behind the single-column layout.
   The About sand arch STAYS (it's photo-anchored now, so it frames the photo on
   mobile too — the client wants it on every screen).
   (The Claim arch + rect also stay: the user wants them down into mobile.) */
@media (max-width: 992px) {
	.about .deco-rect,
	.location__bleed { display: none; }
}

/* While the brown blocks are visible (993–1600px), push the About + Location
   text right so nothing sits on top of the block. The column starts inside the
   centred container, so container-left + this padding always clears the block. */
@media (min-width: 993px) and (max-width: 1600px) {
	.about__content,
	.location__info {
		padding-left: clamp(1.5rem, 8vw, 180px);
	}
}

/* ==========================================================================
   1101–1600px — LAPTOP BAND.
   The design is authored at a large fixed scale (headings 50–70px, generous
   px paddings). On smaller / OS-scaled laptops the CSS viewport lands here
   (e.g. a 1920px laptop at 125–150% Windows scaling reports ~1280–1536px),
   so without this the desktop sizes feel oversized and crowd the screen.
   We scale type & spacing down proportionally to keep the big-screen look —
   just smaller. True large monitors (≥1601px) are untouched, and ≤1100px is
   handled by the stacking block below.
   ========================================================================== */
@media (min-width: 1101px) and (max-width: 1600px) {
	:root {
		--section-y: clamp(2.75rem, 5.5vw, 4.5rem);
		--gutter:    clamp(1.1rem, 3vw, 2.4rem);
		--fs-h1:     clamp(2.25rem, 4.5vw, 3.5rem);
		--fs-h2:     clamp(1.85rem, 3vw, 2.7rem);
		--fs-h3:     clamp(1.4rem, 1.8vw, 2rem);
	}
	.about__arch {
		left: 40%;
		right: -40%;
		height: calc(100% + 90%);
	}

	/* Address pin sits closer to the foot on laptop widths. */
	.hero__foot { bottom: 30px; }

	/* ---- Eyebrows / small labels ---- */
	.eyebrow,
	.developer__projects h4 { font-size: 20px; margin-bottom: 10px; }

	/* ---- Section headings (drop the big fixed px + airy line-heights) ---- */
	.location__info h2     { font-size: 54px; line-height: 1.1; }
	.location__addr        { font-size: 34px; line-height: 1.25; margin-bottom: 1.75rem; }
	.footer-heading__lead,
	.footer-heading__main  { font-size: 46px; line-height: 1.15; }
	.about__content h2     { font-size: 54px; line-height: 1.1; margin-bottom: 24px; }
	.about__content p      { padding-left: 0; }
	.bonuses__text h2      { font-size: 44px; line-height: 1.12; margin-bottom: 24px; }
	.bonuses--gallery .bonuses__text h2 { font-size: 54px; line-height: 1.1; }
	.developer h2          { font-size: 44px; line-height: 1.12; }
	.claim-band h2         { font-size: 38px; line-height: 1.3; }
	.gallery__head h3      { font-size: 26px; line-height: 1.3; }

	/* ---- Body / supporting text ---- */
	.about__content p,
	.location__info .flow p,
	.developer p           { font-size: 18px; line-height: 1.6; }
	.developer__list       { font-size: 19px; }
	.travel-list .micro,
	.travel-list .t-time   { font-size: 17px; }
	/* Tighten icon/time columns + gaps so the one-line labels always fit the
	   half-width info column at these mid sizes (no wrapping, no overflow). */
	.travel-list           { grid-template-columns: 20px max-content 1fr; column-gap: 0.6rem; }
	.bonuses__name         { font-size: 28px; line-height: 1.3; }
	.hero__sub             { font-size: 20px; }

	/* Bonuses block is 920px tall by default — too tall for laptop screens, so
	   the whole two-column block gets cut off. Cap its height here so it fits. */
	.bonuses__media { min-height: 0; height: clamp(520px, 46vw, 760px); }

	/* ---- Footer text ---- */
	.footer-person .name        { font-size: 21px; }
	.footer-person__contact p   { font-size: 19px; line-height: 1.4; }
	.footer-top .site-logo img  { height: 84px; }

	/* ---- Contacts block: shrink height so the whole footer fits mid screens ---- */
	.site-footer                 { padding-block: 56px 0; }
	.footer-top                  { margin-bottom: 3.5rem; }
	/* Lower the tall message box (Žinutė) and tighten the gaps between fields. */
	.wpforms-field-container textarea            { min-height: 150px !important; }
	div.wpforms-container-full .wpforms-field    { padding-top: 8px !important; padding-bottom: 8px !important; }

	/* ---- Tame the largest fixed paddings / margins ---- */
	.section--tight     { padding-block: 80px 32px; }
	.media-band--2      { padding: 80px 0; }
	.footer-people      { margin-top: 56px; margin-bottom: 32px; }
	.developer__actions { margin-top: 5rem; }
	.gallery__actions   { margin-top: 3.5rem; }
	.about__content p   { padding-left: 0; }
	.travel-list        { padding-left: 0; }
}

/* ==========================================================================
   1025–1400px — the full header (nav + both CTA buttons) is still shown but
   space is tight; shrink type, spacing and the logo so it stays on one line.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1400px) {
	.header-inner    { gap: clamp(0.75rem, 2vw, 1.75rem); }
	.site-logo img   { height: 58px; }
	.main-nav ul     { gap: clamp(0.6rem, 1.6vw, 1.4rem); }
	.main-nav a      { font-size: 14px; letter-spacing: 0.07em; }
	.header-cta      { gap: 0.45rem; }
	.header-btn      { font-size: 13px; padding: 0.55rem 0.85rem; letter-spacing: 0.03em; }
	.header-btn svg  { width: 15px; height: 15px; }
	    .about__arch {
        left: 16%;
        right: -10%;
    }
}

/* ==========================================================================
   ≤1100px — stack every two-column section into one clean column.
   ========================================================================== */
@media (max-width: 1100px) {
	
	.bonuses__name         { font-size: 28px; line-height: 1.3; }
	.hero__words {
		display: none;
	}
	.hero__sub {
		font-size: 22px;
	}
	/* ---- Headings: tame the oversized fixed sizes ---- */
	.location__info h2 { font-size: 46px; line-height: 1.1; }
	.location__addr { font-size: 30px; line-height: 1.25; margin-bottom: 1.5rem; }
	.footer-heading__lead,
	.footer-heading__main { font-size: 40px; line-height: 1.15; }
	.bonuses__text h2 { font-size: 40px; line-height: 1.12; }
	.bonuses--gallery .bonuses__text h2 { font-size: 46px; line-height: 1.1; }
	.developer h2 { font-size: 40px; }
	.claim-band h2 { font-size: 34px; line-height: 1.3; }
	.about__content h2 { font-size: 46px; line-height: 1.1; }

	/* ---- Features: 2 columns (4 items total) ---- */
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.features { padding-top: 72px; }

	/* ---- About: text, then the centred photo with the arch behind it ---- */
	.about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.about__content p { padding-left: 0; }
	.about__content .btn,
	.about__content .link-more { margin-left: 0; }
	/* Centre the photo+arch group so the arch keeps a small gap from both edges
	   (it's positioned against this box, so centring the box moves both). */
	.about__media { margin-left: auto; margin-right: auto; }
	.about__media .arch { width: 100%; margin: 0; }
	.about__media .arch img { width: 100%; }
	.about__media .btn-stack { position: static; margin-top: 1.25rem; }
	/* Once stacked, the tall arch "leg" would spill down onto the next section
	   (Vieta mieste). Shorten it to hug the photo, and clip the section as a
	   safety net so nothing can overflow below. */
	.about { overflow: hidden; }
	.about__arch { height: calc(100% + 12%); }

	/* ---- Location: info, full-width map, then actions ---- */
	/* (brown block stays down to 992px — hidden in the ≤992px rule above) */
	.location__grid {
		grid-template-columns: 1fr;
		grid-template-areas: "info" "map" "actions";
	}
	.location__map { margin-right: 0; }
	.travel-list { padding-left: 0; }

	/* ---- Bonuses: panel, then a sensibly sized photo ---- */
	.bonuses__media { min-height: 0; height: clamp(360px, 75vw, 700px); }

	/* ---- Developer + gallery stack ---- */
	.developer { grid-template-columns: 1fr; }
	.developer__actions { margin-top: 2.5rem; }
	.gallery__grid { grid-template-columns: 1fr; }
	.gallery__actions { margin-top: 2.5rem; }
	.loft-grid { grid-template-columns: repeat(2, 1fr); }

	/* ---- Claim band: single column, no bleed border drama ---- */
	.claim-band {
		padding: 18px 18px;
		border-left-width: 8px;
		margin-left: 0;
	}
	.claim-band-inner { grid-template-columns: 1fr; gap: 1.75rem; }
	.section--tight { padding-block: 56px 24px; }

	/* ---- Media bands: shorter ---- */
	.media-band { min-height: clamp(320px, 60vh, 520px); }
	.media-band--2 {
		padding: 50px 12px 12px 0;
	}
	/* CTA pair right-aligned, tucked right up to the edge. */
	.media-band--1 .media-band__inner,
	.media-band--2 .media-band__inner {
		justify-content: flex-end;
		padding-right: 6px;
		padding: 12px 12px !important;
	}

	/* ---- Footer stacks ---- */
	.site-footer { padding-block: 48px 0; }
	.site-footer__bleed { display: none; }
	.footer-top { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 0rem; }
	.footer-top .site-logo img { height: 72px; }
	.footer-contacts { grid-template-columns: 1fr; }
	.footer-people {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin: 3rem 0 2.5rem;
	}
	.footer-people .social-icons { margin-left: 0; align-self: flex-start; }
	.footer-form .footer-actions { justify-content: flex-start; }
}

/* ==========================================================================
   ≤1024px — hamburger nav + hero side-words drop into the flow
   ========================================================================== */
@media (max-width: 1024px) {
	.header-inner { align-items: center; }
	.nav-toggle { display: block; order: 3; margin-left: 0.5rem; }
	.header-search { display: none; }

	/* Header CTAs stay visible next to the hamburger, pushed to the right. */
	.header-cta { order: 2; margin-left: auto; gap: 0.5rem; }

	.main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		display: none;
		background: var(--c-warm-white);
		box-shadow: 0 14px 32px rgba(10, 10, 7, 0.10);
		padding: 0.5rem var(--gutter) 1.25rem;
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.main-nav a { display: block; padding: 0.7rem 0; font-size: 15px; }
	.main-nav li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }

	/* Hero: stack the right-side words below the sub-title, centred. */
	.hero__inner { padding-top: 48px; }
	.hero__aside {
		position: static;
		align-items: center;
		text-align: center;
		margin-top: 1.5rem;
	}
	.hero__words { text-align: center; }
	.site-header {
		padding-block: 1.5rem;
	}
}

/* ==========================================================================
   ≤768px — phones: 16px gutters, bigger hero words, smaller icons, scale 2
   ========================================================================== */
@media (max-width: 768px) {
	.bonuses__name         { 
		font-size: 20px;
		line-height: 22px;
	}
	.bonuses__inner { grid-template-columns: 1fr; }
	.bonuses .deco-soft { display: none; } /* hide the side arch on phones */
	:root { --gutter: 1rem; } /* locked 16px content side padding */

	/* Phones: shrink the logo; header CTAs become icon-only square buttons. */
	.site-logo img { height: 46px; }
	/* Keep the sticky (solid) header logo the same size as the static one. */
	.site-header.is-solid .site-logo img { height: 46px; width: auto; }
	.header-cta { gap: 0.4rem; }
	.header-btn { padding: 0.55rem; gap: 0; }
	.header-btn__label { display: none; }
	.header-btn svg { width: 19px; height: 19px; }

	.hero__box { height: auto; min-height: clamp(460px, 80vh, 640px); }
	.hero__line { font-size: clamp(1.1rem, 4.2vw, 1.55rem); } /* descriptor lines on phones */
	/* Constrain only the descriptor lines, not the first-line slogan. */
	.hero__line:not(:first-child) {
		max-width: 270px;
		margin-inline: auto;
		font-size: 18px;
		font-weight: 300;
	}
	.hero__line:first-child { font-size: 35px; } /* slogan punch on phones */
	.hero__words { font-size: 1.9rem; text-shadow: 0 1px 14px rgba(10, 10, 7, 0.4); }

	/* Homepage hero on phones: full-bleed photo (kill the container side gaps)
	   with the header floating transparently over the top of the image. */
	.home .hero .container--wide { max-width: 100%; padding-inline: 0; }
	.home .site-header:not(.is-solid) {
		position: absolute;
		inset: 0 0 auto 0;
		background: transparent;
		box-shadow: none;
		border-bottom: 0;
		padding-inline: var(--gutter);
	}
	/* Push the headline clear of the overlaid header. */
	.home .hero__inner { padding-top: 120px; }

	/* Full-width, easy-to-tap buttons. */
	.btn { min-width: 0; }
	.btn-stack { max-width: 220px; width: 220px;}
	.btn-stack .btn { width: 100%; }
	.developer__actions .btn-stack { min-width: 0; }

	/* Smaller feature circles + icons. */
	.feature__icon { margin-bottom: 20px; }
	.feature__icon .feat-svg { width: 38px; height: 38px; }
	.feature__icon img { width: 120px; height: 84px; }

	/* Heading scale step 2. */
	.location__info h2 { font-size: 34px; }
	.location__addr { font-size: 24px; line-height: 1.25; }
	.footer-heading__lead,
	.footer-heading__main { font-size: 32px; line-height: 1.2; }
	.bonuses__text h2 { font-size: 32px; line-height: 1.15; }
	.bonuses--gallery .bonuses__text h2 { font-size: 34px; line-height: 1.15; }
	.developer h2 { font-size: 32px; }
	.claim-band h2 { font-size: 23px; line-height: 1.3; }
	.about__content h2 { font-size: 34px; }
	.eyebrow, .developer__projects h4 { font-size: 18px; }
	.gallery__head h3 { font-size: 24px; line-height: 1.3; }

	/* Footer typography. */
	.footer-person .name { font-size: 20px; }
	.footer-person__contact p { font-size: 18px; line-height: 1.5; }
	.footer-person .role { font-size: 15px; }
	.footer-person {
		display: flex;
		align-items: center;
		gap: 1.1rem;
		justify-content: center;
	}
	/* Black bar: stack + centre the note and copyright on phones. */
	.footer-bottom .container { flex-direction: column; text-align: center; gap: 0.35rem; }
	.footer-bottom .copyright { text-align: center; }
	.footer-note { text-align: center; }
}

/* ==========================================================================
   ≤640px — small phones: single-column features + lofts
   ========================================================================== */
@media (max-width: 640px) {
	.about__arch {
		left: 10%;
		right: -10%;
		height: calc(100% + 10%);
	}
	label.wpforms-field-label-inline a {
		height: 20px !important;
	}
	.features__grid { grid-template-columns: 1fr 1fr; gap: 16px;}
	.features { padding-top: 48px; }
	.feature h3 { font-size: 15px; }
	.feature p { font-size: 14px; }

	/* Media-band visualisation buttons: side-by-side, narrower on phones. */
	.band-cta { flex-direction: row; }
	.band-cta .header-btn { min-width: 80px; }

	.link-more { font-size: 16px; }
	.media-band { min-height: clamp(240px, 59vh, 240px); }
	.loft-grid { grid-template-columns: 1fr; }
	.claim-band-inner {
        grid-template-columns: 1fr;
    }
	.claim-band-inner .btn-stack {
		margin-left: auto;
	}
	/* Stack the claim-band CTA below the text on phones. */
	.claim-band {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.claim-band__cta {
		justify-self: start;
	}

	.travel-list .micro, .travel-list .t-time {
		font-size: 16px;
		line-height: 24px;
	}
	/* Phones are too narrow for the long destinations on one line — let them
	   wrap again here so nothing runs off the screen edge. */
	.travel-list .micro { white-space: normal; }
	.travel-list {
		row-gap: 6px;
		column-gap: 12px;
	}
	.bonuses__inner {
        grid-template-columns: 1fr;
    }
	.developer p {
		font-size: 16px;
		line-height: 24px;
	}
	.developer__list {
		font-size: 16px;
	}
	.location__info .flow p, .about__content p {
		font-size: 16px;
		line-height: 24px;
	}
	label.wpforms-field-label-inline {
		font-size: 16px !important;
		font-weight: 300 !important;
	}
	.wpforms-field-container input, .wpforms-field-container input::placeholder, .wpforms-field-container textarea::placeholder {
		font-size: 16px !important;
		line-height: 20px !important;
	}
	.wpforms-container .wpforms-one-third, .wpforms-container .wpforms-two-sixths, .wpforms-container .wpforms-one-third.wpforms-first, .wpforms-container .wpforms-two-sixths.wpforms-first {
		width: 100% !important;
		margin: 0 !important;
	}
	.footer-person .name {
        font-size: 18px;
    }
	    .footer-person .role {
        font-size: 14px;
    }
	.footer-person__contact p {
        font-size: 16px;
        line-height: 1.5;
    }
	.social-icons a svg {
		width: 32px;
		height: 32px;
	}
	/* Hide the logo in the contact block on phones. */
	.footer-top .site-logo { display: none; }

	/* Building floor badges pile up on the small photo because the thin upper
	   floors' centroids sit at nearly the same spot. Keep them ON the building,
	   but spread them horizontally so they separate: floor 2 left, 1 centre,
	   0 right. Only the horizontal position is nudged — the vertical centroid
	   keeps each badge on its own floor. (DOM order is ascending: 1st = floor 0,
	   2nd = floor 1, 3rd = floor 2.) */
	.building-zone__label:nth-of-type(1) { left: 72% !important; } /* floor 0 → right  */
	.building-zone__label:nth-of-type(2) { left: 50% !important; } /* floor 1 → centre */
	.building-zone__label:nth-of-type(3) { left: 28% !important; } /* floor 2 → left   */
	.hero__inner {
		gap: 0;
		padding-top: 120px;
	}
	/* Keep the hero text the same warm taupe as desktop, over the mobile sky. */
	.hero__lines,
	.hero__line:first-child {
		color: #9B8572;
	}
	/* Smaller address pin, tucked into the bottom-right corner on phones. */
	.hero__seal { width: 70px; }
	/* Rinktis pill on the left, address seal on the right, both on the grass. */
	.hero__foot { bottom: 30px; left: 18px; right: 18px; width: auto; justify-content: space-between; }
	.hero__cta-mob {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: flex-end;
		height: 42px;
		padding: 0 26px;
		border-radius: 99px;
		background: var(--c-oak);
		color: var(--c-warm-white);
		font-family: var(--font-ui);
		font-size: 15px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.btn {
		padding: 3px 24px;
		font-size: 15px;
	}
	.hero__sub {
		font-size: 22px;
	}
}

/* ==========================================================================
   ≤400px — very small screens
   ========================================================================== */
@media (max-width: 400px) {
	.hero__title { font-size: 2rem; }
	.hero__words { font-size: 1.7rem; }
	.location__info h2 { font-size: 30px; }
	.about__content h2 { font-size: 30px; }
	.bonuses--gallery .bonuses__text h2 { font-size: 30px; }
	.footer-heading__lead,
	.footer-heading__main { font-size: 27px; }
	.footer-person { flex-wrap: wrap; gap: 0.5rem 1rem; }
}

/* ==========================================================================
   SINGLE LOFT — plan viewer, specs, actions, bank dropdown, lightbox, print
   ========================================================================== */
.single-loft { background: var(--c-warm-white); }

.single-loft__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-ui);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2rem;
	transition: color var(--dur) var(--ease);
}
.single-loft__back:hover { color: var(--text-strong); }

/* Top bar: back link on the left, compass + "Vieta aukšte" mini-plan on the
   right, above the plan (moved here per client). */
/* Mirror the main grid's columns so the compass + plan column sits exactly
   above the specs panel below: compass at the column's left edge (above the
   title's first letter), plan flush with the table's right edge. */
.single-loft__topbar {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: end;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.single-loft__topbar .single-loft__back { grid-column: 1; grid-row: 1; margin-bottom: 0; align-self: start; justify-self: start; }
.single-loft__topbar .single-loft-locate { padding-block: 0; }
.single-loft__topbar .loft-locate__cluster { justify-content: flex-end; align-items: flex-end; gap: 20px; }
/* Designer compass sits low (aligned to the plan's foot), no big top gap. */
.single-loft__topbar .floor-compass { width: 74px; margin-top: 0; flex: none; }
/* Bigger, clearer "Vieta aukšte" plan, flush to the right edge. */
.single-loft__topbar .loft-locate__map { width: 170px; }
.single-loft__topbar .loft-locate__floor { flex: none; }
.single-loft__topbar .loft-locate__label { margin-bottom: 0.3rem; }

.single-loft__grid {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* Compass lives in the top bar but sits over the plan column's bottom-right
   corner (above the plan's top-right), so the plan never gets pushed down. */
.single-loft__topbar .single-loft__compass {
	grid-column: 1;
	grid-row: 1;
	justify-self: end;
	align-self: end;
	width: 74px;
	margin: 0;
	flex: none;
}
.single-loft__topbar .single-loft-locate { grid-column: 2; grid-row: 1; }

/* ---- plan viewer ---- */
.plan-viewer {
	position: relative;
	background: var(--c-light-gray);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}
/* When the 2D/3D toggle is present it sits in flow above the plan, so trim the
   viewer's own top padding down to 16px. */
.plan-viewer:has(.plan-viewer__toggle) {
	padding-top: 16px;
}
.plan-viewer__toggle {
	display: flex;
	width: max-content;
	margin: 0 auto 8px;
	border: 1px solid var(--c-oak);
	background: var(--c-warm-white);
	border-radius: 999px;
	overflow: hidden;
}
.plan-tab {
	font-family: var(--font-ui);
	font-size: 14px;
	letter-spacing: 0.1em;
	padding: 0.4em 1.1em;
	background: transparent;
	color: var(--text-muted);
	border: 0;
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
	border-radius: 999px;
}
.plan-tab:hover {
	background: var(--c-oak);
	color: var(--c-warm-white);
}
.plan-tab.is-active {
	background: var(--c-oak);
	color: var(--c-warm-white);
}
.plan-viewer__pane { display: none; margin: 0; }
.plan-viewer__pane.is-active { display: block; }
.plan-zoom {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}
/* The plan trigger is a <button>; keep it chromeless on hover/focus so the
   global button-hover fill never paints an oak band beside the narrow plan. */
.plan-zoom:hover,
.plan-zoom:focus,
.plan-zoom:focus-visible {
	background: none;
	border-color: transparent;
}
.plan-zoom img {
	display: block;
	/* Plans are trimmed to the drawing (tall/narrow or wide), so size by natural
	   aspect and cap the height — centered, no forced full-width stretch.
	   The cap keeps the whole plan inside the viewport (no scroll) even on a
	   short laptop: subtract room for the header, the section's top padding, the
	   "Atgal" link and the viewer padding. svh follows the mobile browser bars. */
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(80vh, calc(100vh - 320px));   /* fallback for older browsers */
	max-height: min(80svh, calc(100svh - 320px)); /* svh follows the mobile URL bar */
	object-fit: contain;
	margin: 0 auto;
}
.plan-zoom__hint {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	font-family: var(--font-ui);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-warm-white);
	background: rgba(10, 10, 7, 0.55);
	padding: 0.35em 0.8em;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.plan-zoom:hover .plan-zoom__hint { opacity: 1; }
.plan-viewer__empty {
	padding: 4rem 1rem;
	text-align: center;
	color: var(--text-muted);
	font-family: var(--font-ui);
	letter-spacing: 0.06em;
}

.single-loft__actions-row .btn {
    max-width: 150px;
	font-weight: 300;
	border-radius: 0;
}

.bank-dropdown button.btn.bank-dropdown__toggle {
    max-width: 100%;
}

/* ---- specs panel ---- */
.single-loft__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: space-between; /* title left, status aligned to the right edge */
    margin-bottom: 16px;
}
.single-loft__title {
	font-family: var(--font-head);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05;
	margin: 0;
}
.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-ui);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0;
	border: 0;
	color: var(--status-free);
}
.status-pill::before {
	content: "";
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.status-pill.is-reserved { color: var(--status-reserved); }
.status-pill.is-sold     { color: var(--status-sold); }

.single-loft__ready {
	font-family: var(--font-ui);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin: 0.75rem 0 1.75rem;
}

.loft-specs {
	margin: 0 0 1.75rem;
	border-top: 1px solid var(--c-light-gray);
}
.loft-specs__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--c-light-gray);
}
.loft-specs__row dt {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}
.loft-specs__row dd {
	margin: 0;
	font-size: 18px;
	color: var(--text-strong);
	text-align: right;
	font-weight: 600; /* right-side values read stronger than the muted labels */
}
.loft-specs__row dd strong { font-size: 20px; }

/* Price sits below the table, prominent. Hidden automatically when unset. */
.single-loft__price {
	font-family: var(--font-head);
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 600;
	color: var(--text-strong);
	margin: 0 0 1.75rem;
	line-height: 1.1;
	text-align: right;
}

/* Tiny legal note under the plan/table. */
.single-loft__disclaimer {
	margin: 1rem 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: 60ch;
}

.single-loft__note {
	margin-bottom: 1.75rem;
	color: var(--text);
}

/* ---- actions ---- */
.single-loft__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.single-loft__actions .btn { min-width: 0; width: 100%; }
.single-loft__actions-row {
	display: flex;
	gap: 0.75rem;
}
.single-loft__actions-row > * { flex: 1 1 0; }
.single-loft__plan-pdf {
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--font-ui);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	border-bottom: 1px solid currentColor;
}

/* ---- bank dropdown ---- */
.bank-dropdown { position: relative; }
.bank-dropdown__toggle { width: 100%; }
.bank-dropdown__chev { transition: transform var(--dur) var(--ease); }
.bank-dropdown.is-open .bank-dropdown__chev { transform: rotate(180deg); }
.bank-dropdown__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: auto;
	right: 0;
	min-width: 240px;
	background: var(--c-warm-white);
	border: 1px solid var(--c-light-gray);
	box-shadow: 0 20px 50px rgba(10, 10, 7, 0.12);
	padding: 0.4rem 0;
	z-index: 20;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.bank-dropdown.is-open .bank-dropdown__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.bank-item {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0.6rem 1.2rem;
	border-bottom: 1px solid var(--c-light-gray);
	transition: background var(--dur) var(--ease);
	justify-content: center;
}
.bank-item:last-child { border-bottom: 0; }
.bank-item:hover { background: var(--c-warm-gray); }
.bank-item[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.bank-item__logo { max-height: 40px; max-width: 140px; width: auto; height: auto; }
.bank-item__name {
	font-family: var(--font-ui);
	font-size: 16px;
	letter-spacing: 0.04em;
	color: var(--text-strong);
}

/* ---- gallery (separate block below the loft) ---- */
.single-loft-gallery { background: var(--c-warm-gray); }
.single-loft-gallery__head { margin-bottom: 2rem; }
.single-loft-gallery__head .eyebrow {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}
.single-loft-gallery__head h2 {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	margin: 0;
}
.single-loft-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gutter);
}
.gallery-thumb {
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur) var(--ease);
}
.gallery-thumb:hover img { transform: scale(1.05); }

/* ---- lightbox ---- */
.loft-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999999999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 4rem);
	background: rgba(10, 10, 7, 0.88);
	cursor: zoom-out;
}
.loft-lightbox[hidden] { display: none; }
.loft-lightbox__stage {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}
.loft-lightbox__img {
	max-width: 100%;
	max-height: 85vh;
	object-fit: contain;
	background: var(--c-warm-white);
	cursor: default;
}
.loft-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
	color: var(--c-warm-white);
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 2;
}
.loft-lightbox__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	line-height: 1;
	color: var(--c-warm-white);
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	cursor: pointer;
	transition: background var(--dur) var(--ease);
}
.loft-lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.loft-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.loft-lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.loft-lightbox.has-nav .loft-lightbox__nav { display: flex; }
body.lightbox-open { overflow: hidden; }

/* print-only header hidden on screen */
.loft-print-head { display: none; }

/* ---- single loft responsive ---- */
@media (max-width: 900px) {
	/* Back link on its own top row; compass sits beside the "Vieta aukšte"
	   map on the right — same as the original mobile layout. */
	.single-loft__topbar {
		grid-template-columns: 1fr auto;
		column-gap: 1rem;
		row-gap: 1rem;
		align-items: end;
	}
	.single-loft__topbar .single-loft__back { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
	.single-loft__topbar .single-loft__compass { grid-column: 1; grid-row: 2; justify-self: end; align-self: end; }
	.single-loft__topbar .single-loft-locate { grid-column: 2; grid-row: 2; }
	.single-loft__topbar .loft-locate__cluster { justify-content: flex-end; }
	.single-loft__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		justify-items: center;
	}
	/* Stacked: plan + panel share one centred column so edges align and no
	   empty side strip shows. */
	.single-loft__media,
	.single-loft__panel {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}
	/* Stacked layout has a smaller header + section padding, so the plan can be
	   a touch taller while still fitting the first screen (no need to tap). */
	.plan-zoom img {
		/* Keep the plan to ~half the screen so the specs below peek into view —
		   full detail is one tap away in the lightbox. */
		max-height: min(56vh, calc(100vh - 300px));
		max-height: min(56svh, calc(100svh - 300px));
	}
	.single-loft__actions .btn {
		min-height: 46px;
	}
}
@media (max-width: 560px) {
	.single-loft-gallery__grid { grid-template-columns: 1fr; }
	.single-loft__actions-row { flex-direction: column; }
	.single-loft__actions-row .btn {
		max-width: 100%;
	}
	.bank-dropdown__panel { left: 0; right: 0; }
}

/* ==========================================================================
   LOFT ARCHIVE — filter bar (range sliders, checks), list rows
   ========================================================================== */
.loft-archive { background: var(--c-warm-white); padding-top: 0; }

.loft-filter--bar {
	display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    align-items: flex-start;
    gap: 28px 40px;
    background: var(--c-warm-white);
    border: 1px solid var(--c-oak);
    padding: 32px;
    margin-bottom: 2.5rem;
}
/* Single horizontal row (reference layout): pill/circle groups, then the two
   sliders, then the controls stack pushed to the far right. */
.loft-filter--bar .field { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; min-width: 0; }
.loft-filter--bar .field--pills  { order: 1; flex: none; }
/* Aukštas + Langų kryptis share one column: side by side on wide screens, and
   Kryptis drops UNDER Aukštas from 1350px down (see media query). */
.loft-filter--bar .loft-filter__ak { order: 2; flex: none; display: flex; flex-direction: row; gap: 28px 40px; }
.loft-filter--bar .field--floors,
.loft-filter--bar .field--dirs   { flex: none; }
/* Both sliders live in one wrapper so they always travel together, never split. */
/* nowrap so the two sliders never collapse into a stack on wide screens (they
   only stack via the 1350px column rule below). */
.loft-filter--bar .loft-filter__ranges { order: 3; display: flex; flex-wrap: nowrap; gap: 28px 40px; }
.loft-filter--bar .field--range  { flex: 0 1 210px; min-width: 150px; }

/* Pill / circle radio groups (type + floor selectors). */
.pill-group__label {
	display: block;
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.15rem;
}
.pill-group {
	display: flex;
	flex-flow: row wrap; /* force LTR row order — never reversed */
	direction: ltr;
	align-items: center;
	gap: 0.5rem;
}
/* Belt-and-braces against any inherited reversal in the filter bar. */
.loft-filter--bar .pill-group { flex-direction: row; direction: ltr; min-height: 40px; }
.pill { position: relative; margin: 0; cursor: pointer; }
.pill input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.pill > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--c-oak);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--text-strong);
	line-height: 1;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill--circle > span {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
}
.pill:hover > span { border-color: var(--c-walnut); }
.pill input:checked + span {
	background: var(--c-walnut);
	color: var(--c-warm-white);
	border-color: var(--c-walnut);
}
.pill input:focus-visible + span { outline: 2px solid var(--c-oak); outline-offset: 2px; }

/* Toggle button (mobile only). */
.loft-filter-toggle {
	display: none;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-ui);
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.7em 1.4em;
	margin-bottom: 1.25rem;
	background: var(--c-warm-white);
	color: var(--text-strong);
	border: 1px solid var(--c-oak);
	cursor: pointer;
}
.loft-filter--bar label,
.loft-filter--bar legend {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0;
}
.loft-filter--bar select {
	padding: 0 1em;
	border: 1px solid var(--c-oak);
	background: var(--c-warm-white);
	font-family: var(--font-body);
	color: var(--text);
}

/* range slider */
.range__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.range__label {
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.range__out { font-size: 15px; color: var(--text-strong); white-space: nowrap; font-weight: 400; }
.range { position: relative; height: 34px; }
.range__rail {
	position: absolute;
	top: 50%;
	left: 2px;
	right: 2px;
	height: 4px;
	transform: translateY(-50%);
	background: var(--c-light-gray);
	border-radius: 2px;
}
.range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: var(--c-oak);
	border-radius: 2px;
}
.range input[type="range"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 34px;
	margin: 0;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.range input[type="range"]:focus { outline: none; box-shadow: none; }
.range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-warm-white);
	border: 2px solid var(--c-oak);
	box-shadow: none;
	cursor: pointer;
	margin-top: -7px;
}
.range input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--c-warm-white);
	border: 2px solid var(--c-oak);
	box-shadow: none;
	cursor: pointer;
}
.range input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	height: 4px;
}
.range input[type="range"]::-moz-range-track { background: transparent; border: 0; box-shadow: none; height: 4px; }
/* Firefox fills the track up to the thumb by default — hide that line. */
.range input[type="range"]::-moz-range-progress { background: transparent; }
.range input[type="range"]::-ms-track { background: transparent; border-color: transparent; color: transparent; }
.range input[type="range"]::-ms-fill-lower,
.range input[type="range"]::-ms-fill-upper { background: transparent; }

/* checkboxes + toggle */
.field--checks .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; }
.check { display: inline-flex; align-items: center; gap: 0.45em; font-size: 15px; color: var(--text-strong); cursor: pointer; text-transform: none; letter-spacing: 0; }
.check input { accent-color: var(--c-oak); }

/* Controls stack pushed to the far right of the bar (reference layout):
   Rikiuoti · Rodyti tik laisvus · Išvalyti visus filtrus. */
.loft-filter__foot {
	order: 5;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
}
.loft-filter__foot .field--sort   { order: 1; display: flex; flex-direction: row; align-items: center; gap: 0.6rem; margin: 0; min-width: 0; }
.loft-filter__foot .field--toggle { order: 2; }
.loft-filter__foot .loft-filter__reset { order: 3; }

/* Shared text style for the three controls — identical font, size, spacing,
   colour AND weight (Poppins 500) so nothing looks lighter/heavier than a peer. */
.loft-filter__foot .field--sort label,
.loft-filter__foot .field--sort select,
.loft-filter__foot .field--toggle span,
.loft-filter__reset {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* "Išvalyti visus filtrus" — global reset link. */
.loft-filter__reset {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: color var(--dur) var(--ease);
}
.loft-filter__reset:hover { color: var(--c-walnut); }
.loft-filter__reset svg { width: 15px; height: 15px; flex: none; }

/* "Rodyti tik laisvus" toggle — consistent uppercase label. */
.loft-filter__foot .field--toggle { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; }

/* Rikiuoti control: a small pill sized to its text, with the exact same text
   style as the "RIKIUOTI" label (font-ui, 13px, letter-spaced, uppercase,
   muted) — never a full-width box. */
.loft-filter__foot .field--sort label { margin: 0; }
.loft-filter__foot .field--sort select {
	align-self: center;
	width: auto;
	max-width: max-content;
	flex: none;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--c-oak);
	border-radius: 999px;
	background: var(--c-warm-white);
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* list */
.loft-list { border-top: 2px solid var(--c-oak); }
.loft-list__head,
.loft-row {
	display: grid;
	/* Patalpa · Plotas · Aukštas · Kryptis · Įrengimas · Kaina · Būsena */
	grid-template-columns: 1.8fr 1fr 0.8fr 1.2fr 1.3fr 1fr 1fr;
	gap: 1rem;
	align-items: center;
}
/* Header band: clearly separated from the rows (same rule as the top line) and
   no paler/smaller than the data below it. */
.loft-list__head {
	padding: 0.85rem 1.25rem;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-strong);
	border-bottom: 2px solid var(--c-oak);
}
.loft-row {
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--c-oak);
	color: var(--text-strong);
	transition: background var(--dur) var(--ease);
}
.loft-row:hover,
.loft-row:focus,
.loft-row:focus-visible {
    background: var(--c-oak);
    color: #fff;
    outline: none;
}
/* Don't let the parent theme paint visited/focused rows link-purple. */
.loft-row,
.loft-row:visited,
.loft-row:active {
    color: var(--text-strong);
}
.loft-row:hover,
.loft-row:focus,
.loft-row:focus-visible { color: #fff; }

.loft-row:hover .loft-row__sub,
.loft-row:focus .loft-row__sub,
.loft-row:focus-visible .loft-row__sub {
    color: #fff;
}

.loft-row__id { display: flex; flex-direction: column; gap: 0.15rem; }
.loft-row__title { font-family: var(--font-head); font-size: 21px; line-height: 1.1; }
.loft-row__sub { font-size: 13px; color: var(--text-muted); }
.loft-row__cell { font-size: 16px; }
.loft-row__price { font-weight: 600; }
.loft-row__status { justify-self: start; }
.loft-row .status-pill { font-size: 15px; padding: 0; border: 0; }

@media (max-width: 860px) {
	/* Keep the desktop-style table on mobile too — one compact row per loft (not
	   stacked cards). Drop the Kryptis + Įrengimas columns so the rest fits, keep
	   the header, and show the status as just a coloured dot (no LAISVA /
	   REZERVUOTA text). Rooms stay on the sub-line under the number. */
	.loft-list__head,
	.loft-row {
		/* Proportional tracks only (no `auto`), so the header and the rows compute
		   IDENTICAL column widths and line up. */
		grid-template-columns: 1.5fr 1.15fr 1.05fr 1.3fr 1fr;
		gap: 0.4rem;
		align-items: center;
	}
	.loft-list__head {
		display: grid;
		padding: 0.7rem 0.8rem;
		font-size: 11px;
		letter-spacing: 0;
	}
	.loft-row { padding: 0.85rem 0.8rem; }
	/* Stop cell content from stretching its track — that's what threw the header
	   out of line with the numbers. With min-width:0 the fr tracks stay purely
	   proportional and match between head and rows. */
	.loft-list__head > span,
	.loft-row > * { min-width: 0; }
	.loft-list__head > span { white-space: nowrap; }
	/* Hide the Kryptis (4th) + Įrengimas (5th) cells in both header and rows. */
	.loft-list__head span:nth-child(4),
	.loft-list__head span:nth-child(5),
	.loft-row__cell:nth-child(4),
	.loft-row__cell:nth-child(5) { display: none; }
	.loft-row__title { font-size: 14px; }
	.loft-row__sub { font-size: 12px; }
	.loft-row__cell { font-size: 13px; white-space: nowrap; }
	/* Status → dot only (hide the text, keep the coloured ::before dot),
	   centred under its "Būsena" header. */
	.loft-row__status { justify-self: center; }
	.loft-row .status-pill { font-size: 0; gap: 0; }
	.loft-row .status-pill::before { width: 12px; height: 12px; }
}

/* filter bar responsive */
/* 1350px and down: Langų kryptis drops UNDER Aukštas, and the two sliders
   stack as well, so the single nowrap row keeps fitting without overflow. */
@media (max-width: 1350px) {
	.loft-filter--bar .loft-filter__ak { flex-direction: column; }
	.loft-filter--bar .loft-filter__ranges { flex-direction: column; width: 220px; }
	.loft-filter--bar .field--range { flex: none; width: 100%; }
}
@media (max-width: 1100px) {
	/* Below the target range: two columns (Tipas | Aukštas+Kryptis / sliders | controls). */
	.loft-filter--bar { grid-template-columns: 1fr 1fr; }
	.loft-filter__foot { margin-left: 0; }
}
@media (max-width: 768px) {
	.loft-filter-toggle { display: inline-flex; }
	.loft-filter--bar {
		display: none;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	/* Stacked: every field is a single full-width row (order no longer matters). */
	.loft-filter--bar .loft-filter__ranges { width: 100%; flex-direction: column; gap: 1.5rem; }
	.loft-filter--bar .field--range { width: 100%; }
	.loft-filter-toggle:focus {
		background: var(--c-warm-white);
		color: var(--text-strong);
		border: 1px solid var(--c-oak);
	}
	.loft-filter--bar.is-open { display: grid; }
	/* Controls: each on its own full-width row. */
	.loft-filter__foot { margin-left: 0; gap: 1.1rem; width: 100%; }
}

/* ==========================================================================
   INTERACTIVE BUILDING / FLOOR PLAN (Phase 2)
   ========================================================================== */
/* Centre the building photo; it shrink-wraps to the image so the SVG/label
   overlay stays aligned at any scale (see .building-map below). */
.loft-archive .building-select { margin-bottom: 2rem; text-align: center; }
.building-select__img img { display: block; width: 100%; height: auto; }
/* Fit the whole plan on screen: the image is capped to the viewport height
   (JS refines the exact value per device in initBuildingFit); the box is
   inline-block so it tracks the image's rendered size, keeping zones aligned. */
.loft-archive .building-map {
	display: inline-block;
	width: auto;
	max-width: 100vw;
	margin: 0 auto;
}
.loft-archive .building-map img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 140px);
}
@supports (height: 100dvh) {
	.loft-archive .building-map img { max-height: calc(100dvh - 140px); }
}
.building-select__floors { margin-top: 1.5rem; text-align: center; }
.building-select__floors .eyebrow {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 0.75rem;
}
.building-select__floors .floor-nav { justify-content: center; }

/* clickable floor zones on the building photo */
.building-map { position: relative; display: block; line-height: 0; }
.building-map img { display: block; width: 100%; height: auto; }
.building-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.building-zone {
	fill: var(--c-walnut);
	fill-opacity: 0;
	stroke: var(--c-warm-white);
	stroke-opacity: 0;
	stroke-width: 0.3;
	cursor: pointer;
	transition: fill-opacity var(--dur) var(--ease), stroke-opacity var(--dur) var(--ease);
}
.building-zone-link:hover .building-zone,
.building-zone-link:focus-visible .building-zone {
	fill-opacity: 0.3;
	stroke-opacity: 0.9;
	outline: none;
}
.building-zone__label {
	position: absolute;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0.4em 0.8em;
	line-height: 1;
	background: rgba(10, 10, 7, 0.55);
	color: var(--c-warm-white);
	font-family: var(--font-ui);
	font-size: 14px;
	letter-spacing: 0.06em;
	border-radius: 999px;
	transition: background var(--dur) var(--ease);
}
.building-zone__label:hover { background: var(--c-walnut); }

/* On load the floor markers pulse a few times (expanding ring + gentle scale)
   so it's obvious you can click a floor on the photo. The zone fill blinks in
   sync as a second hint. Stops after a few cycles, then hover takes over. */
@keyframes buildingLabelPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(86, 71, 65, 0.55); }
	50%      { transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 0 0 10px rgba(86, 71, 65, 0); }
}
@keyframes buildingZonePulse {
	0%, 100% { fill-opacity: 0; stroke-opacity: 0; }
	50%      { fill-opacity: 0.16; stroke-opacity: 0.55; }
}
.building-zone__label {
	animation: buildingLabelPulse 1.6s var(--ease) 3;
}
.building-zone {
	animation: buildingZonePulse 1.6s var(--ease) 3;
}
@media (prefers-reduced-motion: reduce) {
	.building-zone__label, .building-zone { animation: none; }
}

/* Plan page: pull the photo up close under the header so the whole plan fits. */
.section.loft-archive { padding-top: clamp(1rem, 2vw, 1.75rem); }

/* floor selector circles */
.floor-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 0; }
.floor-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--c-oak);
	color: var(--text-strong);
	font-family: var(--font-ui);
	font-size: 15px;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.floor-dot:hover { background: var(--c-warm-gray); }
.floor-dot.is-active {
	background: var(--c-walnut);
	color: var(--c-warm-white);
	border-color: var(--c-walnut);
}

/* floor view layout */
.floor-view { background: var(--c-warm-white); }
.floor-view__grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	margin-top: 1.5rem;
}
.floor-view__side .eyebrow {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.floor-view__title {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	margin: 1.5rem 0 0;
}
.floor-view__empty { color: var(--text-muted); padding: 2rem 0; }

/* legend */
.floor-legend { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.floor-legend li { display: flex; align-items: center; gap: 0.6em; font-size: 15px; color: var(--text); }
.status-dot { width: 0.85em; height: 0.85em; border-radius: 50%; background: var(--status-free); flex: none; }
.status-dot.is-reserved { background: var(--status-reserved); }
.status-dot.is-sold { background: var(--status-sold); }

/* the plan + clickable zones. The map shrink-wraps to the image (inline-block)
   so the SVG overlay + compass stay aligned, and the image is capped to the
   viewport height (JS refines it in initViewportFit) so the whole plan fits. */
.floor-view__plan { text-align: center; }
.floor-map { position: relative; display: inline-block; width: auto; max-width: 100%; line-height: 0; }
.floor-map img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 170px);
}
@supports (height: 100dvh) {
	.floor-map img { max-height: calc(100dvh - 170px); }
}
.floor-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Compass rose — sits under the legend words (in the side column). The rose
   rotates by --north so the needle points to true north; the letters
   counter-rotate to stay upright. */
.floor-view__key { display: block; }
.floor-compass {
	position: relative;
	width: clamp(66px, 6vw, 90px);
	aspect-ratio: 1;
	margin-top: 1.75rem;
	line-height: 1;
}
.floor-compass__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(var(--north, 0deg));
	transform-origin: 50% 50%;
}

/* Bigger compass on the floor sidebar (per client "gal didesnis?"). */
.floor-view__side .floor-compass { width: clamp(96px, 9vw, 130px); }

/* "Aukšto loftai" scroll cue at the foot of the sidebar: styled like the back
   link, with a gently nudging double chevron pointing to the list below. */
.floor-scroll {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 2.5rem;
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
	transition: color var(--dur) var(--ease);
	cursor: pointer;
}
.floor-scroll:hover { color: var(--text-strong); }
.floor-scroll__chev {
	color: var(--c-oak);
	animation: floorScrollNudge 1.6s ease-in-out infinite;
}
.floor-scroll:hover .floor-scroll__chev { color: var(--c-walnut); }
@keyframes floorScrollNudge {
	0%, 100% { transform: translateY(0); opacity: 0.55; }
	50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.floor-scroll__chev { animation: none; opacity: 1; }
}

/* Floor apartments table (reuses .loft-list from the archive). */
.floor-lofts { margin-top: clamp(2.5rem, 6vw, 4.5rem); scroll-margin-top: 100px; }
.floor-lofts__title { font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 1.5rem; }
.floor-zone {
	fill: #9a8f82;
	fill-opacity: 0.28;
	stroke: #9a8f82;
	stroke-width: 0.25;
	cursor: pointer;
	transition: fill-opacity var(--dur) var(--ease);
}
.floor-zone.is-free { fill: var(--status-free); stroke: var(--status-free); }
.floor-zone.is-reserved { fill: var(--status-reserved); stroke: var(--status-reserved); }
.floor-zone.is-sold { fill: var(--status-sold); stroke: var(--status-sold); }
.floor-zone-link:hover .floor-zone,
.floor-zone-link:focus-visible .floor-zone { fill-opacity: 0.55; outline: none; }

/* hover tooltip */
.floor-tooltip {
	position: fixed;
	z-index: 50;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 14px));
	background: var(--c-walnut);
	color: var(--c-warm-white);
	padding: 0.55rem 0.9rem;
	min-width: 120px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.02em;
}
.floor-tooltip[hidden] { display: none; }
.floor-tooltip__title { font-size: 14px; }
.floor-tooltip__meta,
.floor-tooltip__status { opacity: 0.85; }

@media (max-width: 900px) {
	.floor-view__grid { grid-template-columns: 1fr; gap: 2rem; }
	.floor-view__side { order: -1; }
	/* Compass moves beside the legend words on mobile. */
	.floor-view__key { display: flex; align-items: center; gap: 1.75rem; margin-top: 32px; }
	.floor-compass { margin-top: 0; flex: none; }
	.floor-legend { margin: 0; }
	/* Loft list sits right below the plan when stacked — the scroll-to button is
	   redundant, so hide it. */
	.floor-scroll { display: none; }
}

@media (max-width: 768px) {
	/* There's no hover on touch, so the floor-plan hover tooltip just flashes and
	   confuses — hide it. Also drop the redundant "N aukštas" heading (the floor
	   selector above already shows which floor is active). */
	.floor-tooltip { display: none !important; }
	.floor-view__title { display: none; }
	.single-loft__back { margin-bottom: 0; }
}

/* ==========================================================================
   Single loft — small window-direction compass + "Vieta aukšte" mini plan,
   tucked to the side (bottom-right), like the reference. Intentionally small.
   ========================================================================== */
.single-loft-locate {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
}

.loft-locate__cluster {
	    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 32px;
    flex-direction: row;
}

/* ---- Compass (small) ---- */
.compass {
	width: 84px;
	height: 84px;
	flex: none;
	display: block;
}

.compass__ring {
	fill: none;
	stroke: rgba(86, 71, 65, 0.30);
	stroke-width: 1;
}

.compass__label {
	font-family: var(--font-ui);
	font-size: 9px;
	font-weight: 600;
	fill: var(--text-strong);
}

.compass__point {
	stroke: var(--status-sold);
	stroke-width: 3.4;
	stroke-linecap: round;
}

.compass__tip { fill: var(--status-sold); }

.compass__tail {
	stroke: #b8b0a6;
	stroke-width: 3.4;
	stroke-linecap: round;
}

.compass__hub { fill: var(--c-walnut); }

/* ---- Position on the floor (small) ---- */
.loft-locate__floor {
	flex: none;
	text-align: right;
}

.loft-locate__label {
	display: block;
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.loft-locate__map {
	width: 150px;
	max-width: 100%;
}

/* Current loft stands out (white highlight + dark outline); the others keep
   their status colour and stay clickable to navigate across the floor. */
.floor-zone.is-current {
	fill: #ad97805c;
	fill-opacity: 0.92;
	stroke: var(--c-walnut);
	stroke-width: 0.7;
}
.floor-zone-link.is-current { cursor: default; }
.floor-zone-link.is-current:hover .floor-zone,
.floor-zone-link.is-current:focus-visible .floor-zone { fill-opacity: 0.92; }

@media (max-width: 600px) {
	.loft-locate__cluster { justify-content: center; }
	.loft-locate__floor { text-align: center; }
}

/* ==========================================================================
   GENERIC GALLERY LIGHTBOX (About + Gallery pages)
   ========================================================================== */
.zoom-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom-btn img { display: block; width: 100%; }

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 4rem);
	background: rgba(10, 10, 7, 0.88);
	cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__stage { margin: 0; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.lightbox__img { max-width: 100%; max-height: 85vh; object-fit: contain; background: var(--c-warm-white); cursor: default; }
.lightbox__close {
	position: absolute; top: 1.25rem; right: 1.5rem; width: 44px; height: 44px;
	font-size: 28px; line-height: 1; color: var(--c-warm-white); background: none; border: 0; cursor: pointer; z-index: 2;
}
.lightbox__nav {
	display: none; position: absolute; top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; align-items: center; justify-content: center;
	font-size: 34px; line-height: 1; color: var(--c-warm-white);
	background: rgba(255, 255, 255, 0.12); border: 0; cursor: pointer;
	transition: background var(--dur) var(--ease);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.lightbox.has-nav .lightbox__nav { display: flex; }

/* ==========================================================================
   PAGE: VIETA MIESTE
   ========================================================================== */
.vieta { position: relative; overflow: hidden; }
.vieta .container { position: relative; z-index: 1; }
.vieta__head { max-width: 760px; margin: 0 auto 2rem; text-align: center; }
/* Small label above the accent title (same look as the homepage block eyebrows). */
.vieta__eyebrow { display: block; margin-bottom: 8px; }
/* The address is the accent → notably larger than the eyebrow. */
.vieta__title { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 0 0 0.75rem; }
.vieta__intro { color: var(--text); font-size: clamp(1rem, 1.4vw, 1.15rem); }
.vieta__intro p { margin: 0 0 1rem; }
/* "Kaip atvykti" button under the address. */
.vieta__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	border-radius: 99px;
}
.vieta__directions svg { flex: 0 0 auto; }
/* Break the map out of the content container to the full viewport width.
   .vieta has overflow:hidden, so 100vw never triggers a horizontal scrollbar. */
.vieta__map {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
}
/* Height follows the viewport height (capped) so the whole map always fits the
   screen on any device instead of a fixed min-height that can overflow. */
.vieta__map-canvas { width: 100%; height: clamp(360px, 68vh, 820px); background: var(--c-warm-gray); }
.vieta__empty { color: var(--text-muted); padding: 3rem 0; text-align: center; }
/* --- Category filter: horizontal chip bar (desktop) / dropdown (phones) --- */
.vieta-filter {
	max-width: var(--content-width, 1200px);
	margin: 0 auto 1.5rem;
	position: relative;
}
.vieta-filter__toggle { display: none; }
.vieta-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}
.vieta-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5rem 1rem;
	border: 1px solid var(--c-light-gray);
	border-radius: 999px;
	background: var(--c-warm-white);
	color: var(--text-strong);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vieta-filter__btn:hover {
	border-color: var(--c-oak);
	color: var(--text-strong);
	background: var(--c-warm-white);
}
.vieta-filter__btn.is-active,
.vieta-filter__btn.is-active:hover {
	background: var(--btn-bg);
	border-color: var(--btn-bg);
	color: var(--c-warm-white);
}
.vieta-filter__ico { display: inline-flex; }
.vieta-filter__ico .cat-svg { width: 18px; height: 18px; }
.vieta-filter__num { font-size: 12px; opacity: 0.65; }
.vieta-filter__btn.is-active .vieta-filter__num { opacity: 0.85; }

@media (max-width: 760px) {
	.vieta-filter { max-width: 340px; }
	.vieta-filter__toggle {
		display: flex;
		align-items: center;
		gap: 0.4em;
		width: 100%;
		justify-content: center;
		padding: 0.7rem 1rem;
		border: 1px solid var(--c-oak);
		border-radius: 999px;
		background: var(--c-warm-white);
		font-family: var(--font-ui);
		font-size: 15px;
		color: var(--text-strong);
		cursor: pointer;
	}
	.vieta-filter__toggle:hover { color: var(--text-strong); background: var(--c-warm-white); }
	.vieta-filter__toggle-lbl { color: var(--text-muted); }
	.vieta-filter__list {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		z-index: 6;
		background: var(--c-warm-white);
		border: 1px solid var(--c-light-gray);
		box-shadow: 0 20px 50px rgba(10, 10, 7, 0.14);
		padding: 0.4rem;
	}
	.vieta-filter.is-open .vieta-filter__list { display: flex; }
	.vieta-filter__btn {
		width: 100%;
		justify-content: flex-start;
		border: 0;
		border-radius: 6px;
		padding: 0.7rem 0.9rem;
	}
	.vieta-filter__num { margin-left: auto; }
	.vieta__map-canvas { height: clamp(340px, 60vh, 620px); }
}

/* ==========================================================================
   PAGE: APIE PROJEKTĄ (chessboard)
   ========================================================================== */
.apie-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	margin-bottom: clamp(3rem, 7vw, 6rem);
}
.apie-block:last-child { margin-bottom: 0; }
.apie-block--reverse .apie-block__text { order: 2; }
.apie-block--reverse .apie-block__media { order: 1; }
.apie-block--solo { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; text-align: center; }
.apie-block__eyebrow { display: block; margin-bottom: 0.9rem; }
.apie-block__title { font-family: var(--font-head); font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.1; margin: 0 0 1.25rem; }
.apie-block__body { color: var(--text); margin-bottom: 1.75rem; }
.apie-block__body p { margin: 0 0 1rem; }
.apie-block__btn { min-width: 0; }

/* Last-block CTA — styled like the header button (pill, uppercase, oak). */
.apie-block__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.15rem;
	background: var(--btn-bg);
	border: 1px solid var(--btn-bg);
	border-radius: 999px;
	color: var(--c-warm-white);
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apie-block__cta:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-bg-hover);
	color: var(--c-warm-white);
}

/* Media: a single straight image — no slider, no arch behind it. */
.apie-block__media { position: relative; }
.apie-block__media img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 768px) {
	.apie-block { grid-template-columns: 1fr; gap: 8px; }
	/* Always: gallery first, then text. */
	.apie-block__media,
	.apie-block--reverse .apie-block__media { order: -1; }
	.apie-block__text,
	.apie-block--reverse .apie-block__text { order: 0; }
	.apie-block--solo { text-align: left; }

	/* Apie projektą + Galerija pages: lift the first block's eyebrow ABOVE the
	   photo/slider. display:contents frees the eyebrow from the text box so it can
	   be ordered before the image; the rest of the text keeps its normal order. */
	.apie .apie-block:first-child .apie-block__text,
	.gallery-page .apie-block:first-child .apie-block__text { display: contents; }
	.apie .apie-block:first-child .apie-block__eyebrow,
	.gallery-page .apie-block:first-child .apie-block__eyebrow { order: -2; margin-bottom: 0; }
	/* First block's text is display:contents, so its title↔body gap comes from
	   the 8px grid gap → title margin 0. Other blocks aren't display:contents,
	   so their title needs a manual 8px to match. */
	.apie .apie-block__title,
	.gallery-page .apie-block__title { margin-bottom: 0; }
	.apie .apie-block:not(:first-child) .apie-block__title,
	.gallery-page .apie-block:not(:first-child) .apie-block__title { margin-bottom: 8px; }

	/* Apie projektą mobile: extra room ONLY between the image and the title
	   (via the media's bottom margin — the 8px grid gap stays everywhere else),
	   more room between blocks, and no trailing margin under the body text. */
	.apie .apie-block { margin-bottom: 40px; }
	.apie .apie-block__media { margin-bottom: 14px; }
	.apie .apie-block__body { margin-bottom: 0; }
}

/* ==========================================================================
   PAGE: GALERIJA — chessboard blocks (reuse .apie-block) + bottom album strip
   ========================================================================== */

/* Dash bullet lists inside chessboard block text (Apie + Galerija pages). */
.apie-block__body ul {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.apie-block__body ul li {
	position: relative;
	padding-left: 1.4em;
	margin: 0;
}
.apie-block__body ul li::before {
	content: "–";
	position: absolute;
	left: 0;
	color: var(--text-muted);
}

/* Gallery blocks: per-block image slider, with a row UNDER the photo holding
   the category label (bottom-left) and the round arrows (bottom-right). */
.gallery-block__slider { position: relative; }
/* Uniform slide frame so every slide is the same height. */
.gallery-block__slider .slider__slide img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: 100%;
}
.gallery-block__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.9rem;
}
.gallery-block__label {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #756d64;
}
.gallery-block__nav { margin-left: auto; }

/* Mobile: lift the arrows ONTO the photo (bottom-right corner). The category
   label keeps its row under the photo, unchanged. */
@media (max-width: 768px) {
	.gallery-block__foot { position: relative; }
	.gallery-block__nav {
		position: absolute;
		right: 12px;
		bottom: calc(100% + 0.9rem + 12px);
		margin-left: 0;
		z-index: 3;
	}
}

/* Bottom album: horizontal snap-scroll strip — 3 photos per view on desktop,
   2 on tablet, 1 on phone. Slide sideways; click a photo → shared lightbox. */
.album {
	--album-gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-top: clamp(3rem, 7vw, 6rem);
}
/* Prev/next arrows (reuse .slider__btn look), top-right, shown only when the
   strip actually overflows (JS toggles .album--has-nav). */
.album__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.album__title { margin-bottom: 0; }
.album__nav { display: none; }
.album--has-nav .album__nav { display: flex; }
.album__track {
	display: flex;
	gap: var(--album-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.25rem;
	-webkit-overflow-scrolling: touch;
	/* Hide the scrollbar (scrolling still works via arrows / swipe / drag). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.album__track::-webkit-scrollbar { display: none; }
.album__item {
	flex: 0 0 calc((100% - 2 * var(--album-gap)) / 3);
	scroll-snap-align: start;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}
.album__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--dur) var(--ease);
}
.album__item:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
	.album__item { flex-basis: calc((100% - var(--album-gap)) / 2); }
}
@media (max-width: 600px) {
	.album__item { flex-basis: 100%; }
}

/* ==========================================================================
   SCROLL REVEAL — top-level blocks fade + rise into view
   ========================================================================== */
/* The hero is above the fold — it must never be hidden (no flash, and so the
   backdrop measurement isn't thrown off by the rise transform). */
.reveal-on .site-content > section:not(.hero),
.reveal-on .site-content > article,
.reveal-on .site-footer,
.reveal-on [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}
.reveal-on .site-content > section.is-visible,
.reveal-on .site-content > article.is-visible,
.reveal-on .site-footer.is-visible,
.reveal-on [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
	.reveal-on .site-content > section,
	.reveal-on .site-content > article,
	.reveal-on .site-footer,
	.reveal-on [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   PRINT — clean one-page loft sheet (the "PDF" button)
   ========================================================================== */
@media print {
	@page { margin: 14mm; }

	body { background: #fff; color: #000; }

	/* Hide everything that is chrome / interactive. */
	.site-header,
	.main-nav,
	.nav-toggle,
	.header-search,
	.site-footer,
	.no-print,
	.single-loft__back,
	.plan-viewer__toggle,
	.plan-zoom__hint { display: none !important; }

	.loft-print-head {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #000;
		padding-bottom: 8mm;
		margin-bottom: 8mm;
	}
	.loft-print-head img { height: 32px; width: auto; }
	.loft-print-head span {
		font-family: var(--font-head);
		font-size: 22px;
	}

	.section { padding: 0 !important; }
	.container { max-width: 100% !important; padding: 0 !important; }

	.single-loft__grid {
		display: grid !important;
		grid-template-columns: 1.2fr 0.8fr !important;
		gap: 10mm !important;
	}
	.plan-viewer { background: none; padding: 0; }
	.plan-viewer__pane { display: block !important; }
	.plan-viewer__pane[data-pane="3d"] { display: none !important; } /* print 2D only */
	.plan-zoom { cursor: default; }

	.status-pill { border-color: #000; color: #000 !important; }
	.loft-specs__row,
	.loft-specs { border-color: #999; }
	.loft-specs__row dt,
	.loft-specs__row dd { color: #000; }
}