/*
 * Image Group theme, part 2: home page, contact, model page specs, mobile menu, sticky filter.
 * Loaded after style.css (overrides it where needed).
 */

.btn {
	display: inline-block; padding: 14px 32px; border: 1px solid currentColor; background: none; color: inherit;
	font: inherit; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: background .2s, color .2s;
}
.btn-small { padding: 10px 20px; font-size: 12px; }
.btn-dark { background: var(--text); border-color: var(--text); color: #fff; }
.btn-dark:hover { background: var(--red); border-color: var(--red); }
.btn-light { background: #fff; border-color: #fff; color: var(--text); }
.btn-light:hover { background: transparent; color: #fff; }

/* ---------- desktop dropdown (JS adds .open for touch and focus) ---------- */
@media (min-width: 860px) {
	.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu, .main-nav li.open > .sub-menu { display: flex; }
}

/* ---------- hero slider ----------
   The whole picture is shown, in its own proportions (never cropped). The slider is as tall as the
   picture that is showing (at most 78% of the screen height); if the picture is narrower than the
   screen it sits in the middle over a blurred copy of itself. */
.hero-slider { position: relative; overflow: hidden; background: #111; }
.hero-slide {
	position: absolute; inset: 0; display: block; overflow: hidden; text-decoration: none; color: #fff;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s ease, visibility 0s linear .8s;
}
.hero-slide.active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; transition-delay: 0s; }
.hero-slide::before {
	content: ""; position: absolute; inset: -30px; background: var(--bg) center / cover no-repeat;
	filter: blur(28px) brightness(.65); transform: scale(1.1);
}
.hero-slide img { position: relative; display: block; width: auto; max-width: 100%; height: auto; max-height: 78vh; margin: 0 auto; }
.hero-caption {
	position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 48px var(--pad) 44px;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.hero-sub { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.hero-title { display: block; margin-top: 6px; font-size: clamp(26px, 5vw, 56px); font-weight: 300; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.hero-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.hero-dots button[aria-current="true"]::after { background: #fff; }

/* ---------- home sections ---------- */
.section { padding: 40px 0 8px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 8px; }
.section-title { margin: 0 0 16px; font-size: clamp(20px, 3vw, 28px); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }
.section-title.small { font-size: 18px; }
.section-head .section-title { margin-bottom: 8px; }
.more-link { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.more-link:hover { color: var(--text); }

.home-intro .page-title span { font-weight: 300; color: var(--muted); }
.home-intro .entry-content { padding-bottom: 8px; font-size: 18px; }

/* one-line carousel (New faces): scrolls by itself, full screen width */
.faces { padding: 32px 0 8px; overflow: hidden; }
.marquee { overflow: hidden; width: 100%; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 60s) linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; gap: 8px; margin: 0; padding: 0 8px 0 0; list-style: none; }
.marquee-item { flex: none; width: clamp(150px, 18vw, 240px); }
.marquee-item a { display: block; text-decoration: none; }
.marquee-item .thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }
.marquee-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.marquee-item .name { display: block; padding: 8px 2px 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.marquee { overflow-x: auto; }
	.marquee-track { animation: none; }
	.marquee-set[aria-hidden="true"] { display: none; }
}

.home-models { margin-bottom: 24px; }
@media (min-width: 900px) and (max-width: 1199px) { .home-models .model-card:nth-child(n+5) { display: none; } }
@media (min-width: 1200px) and (max-width: 1699px) { .home-models .model-card:nth-child(n+6) { display: none; } }

.features { display: grid; gap: 28px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 760px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.features h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.features p { margin: 0; color: #444; }

.cta { margin: 24px 0 0; padding: 64px var(--pad); background: #111; color: #fff; text-align: center; border-top: 3px solid var(--red); }
.cta h2 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 40px); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; }
.cta p { margin: 0 0 24px; opacity: .85; }

.news-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 700px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.news-grid h3 { margin: 4px 0 0; font-size: 18px; font-weight: 400; }
.news-grid h3 a { text-decoration: none; }
.news-thumb { display: block; margin-bottom: 8px; line-height: 0; }
.news-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- contact ---------- */
/* two columns on wide screens: details and social links | form; on phones: details first, then the form */
.contact-layout { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; padding: 8px 0 56px; }
@media (min-width: 900px) {
	.contact-layout { grid-template-columns: 1fr 1.2fr; gap: 80px; }
}

/* form: compact, fields side by side where there is room */
.contact-form label { display: block; margin: 0 0 14px; }
.contact-form label > span { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-form .field-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 480px) { .contact-form .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	display: block; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 0; background: #fff; font: inherit; font-size: 16px; line-height: 1.4;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
.contact-form .btn { margin-top: 4px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.notice { margin: 0 0 16px; padding: 12px 16px; border-left: 4px solid; font-size: 15px; }
.notice-ok { background: #eef7ee; border-color: #3c8d40; }
.notice-error { background: #fdeeee; border-color: #c0392b; }

/* details ("rekvizitai"): clean list with thin lines, red tick on the heading */
.contact-card .section-title { position: relative; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contact-card .section-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--red); }
.contact-card .details { margin: 0 0 28px; }
.contact-card .details > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-card .details > div:last-child { border-bottom: 0; }
.contact-card dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-card dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.contact-card dd a { text-decoration: none; }
.contact-card dd a:hover { color: var(--red); }
.contact-form-box .section-title { position: relative; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contact-form-box .section-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px; background: var(--red); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.icon-link { display: inline-flex; padding: 10px; border: 1px solid var(--line); background: #fff; color: var(--text); line-height: 0; }
.icon-link:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (min-width: 400px) and (max-width: 899px) {
	.contact-card .details > div { grid-template-columns: 9em 1fr; gap: 12px; align-items: baseline; }
}
.contact-widgets { display: grid; gap: 24px; padding: 32px 0; }
@media (min-width: 760px) { .contact-widgets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- footer ---------- */
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer-contact a { text-decoration: none; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social a { display: inline-flex; padding: 6px; color: var(--text); }
.footer-social a:hover { opacity: .6; }
.footer-social .copyright { margin-right: 8px; }

/* ---------- model page ---------- */
.model-head { display: block; padding: 20px 0 8px; }
.model-head .back-link { display: inline-block; margin-bottom: 8px; padding: 6px 0; }
.model-head .page-title { margin-bottom: 16px; }
.model-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 16px; }
.model-specs li { display: flex; flex-direction: column; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.model-specs li span { margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model-specs li b { font-weight: 400; }
.model-specs .spec-insta { grid-column: 1 / -1; border: 0; padding: 0; }
.model-specs .spec-insta a {
	display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid var(--text);
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.model-specs .spec-insta a:hover { background: var(--text); color: #fff; }
@media (min-width: 600px) {
	.model-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
	.model-specs .spec-insta { grid-column: auto; align-self: end; }
}
@media (min-width: 1000px) { .model-specs { grid-template-columns: repeat(8, minmax(0, auto)); gap: 14px 36px; max-width: none; justify-content: start; } }

/* top row of the model page: back link on the left, previous / next model on the right */
.model-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.model-nav .back-link { margin: 0; }
.model-step { display: flex; gap: 8px; }
.step {
	display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 40px; padding: 4px 14px;
	border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none;
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.step:hover, .step:focus-visible { background: var(--text); border-color: var(--text); color: #fff; }
.step .arr { font-size: 22px; line-height: 1; }
.step .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* slim bar under the header once the title is out of view: back, previous, name, next */
.model-bar {
	display: flex; align-items: center; gap: 4px; position: fixed; top: var(--hh, 72px); left: 0; right: 0; z-index: 45;
	height: 44px; padding: 0 var(--pad); background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line);
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
	transform: translateY(-120%); transition: transform .25s; pointer-events: none;
}
.model-bar.visible { transform: none; pointer-events: auto; }
.model-bar a { padding: 10px 12px; font-size: 22px; line-height: 1; text-decoration: none; }
.model-bar .bar-back { margin-right: auto; padding-left: 0; }
.model-bar .bar-name { flex: 0 1 auto; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.model-bar .bar-step:last-child { margin-left: 0; padding-right: 0; }

/* bottom of the model page: continue to the neighbours without scrolling back up */
.model-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.model-pager a {
	display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border: 1px solid var(--line);
	text-decoration: none; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.model-pager a:hover, .model-pager a:focus-visible { background: var(--text); border-color: var(--text); color: #fff; }
.model-pager .pager-next { justify-content: flex-end; text-align: right; }
.model-pager .arr { font-size: 26px; line-height: 1; }
.model-pager .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   v1.3: model lists (columns from settings, data panel on hover)
         and model page (info on the side, large featured photo)
   ===================================================================== */

/* lists: photos per row come from Appearance > Site texts (inline variables on the list) */
.model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px)  { .model-grid { grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr)); } }
@media (min-width: 900px)  { .model-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
@media (min-width: 1600px) { .model-grid { grid-template-columns: repeat(var(--cols-xl, 5), minmax(0, 1fr)); } }

/* every card photo has the same shape (3:4), whatever the original proportions; the span must be a block,
   otherwise the ratio is ignored and the cards become uneven */
.model-card .thumb { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #eee; }
.model-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.model-card .info { display: none; }
.model-card .name { transition: opacity .25s ease; }

/* mouse over a model: mirrored. The name comes down from the top, the key data rises from the bottom,
   each on its own soft gradient that fades into the photo (the photo grows paler). The plain name below fades out. */
@media (hover: hover) and (min-width: 900px) {
	.has-info .model-card .info { display: block; position: absolute; inset: 0; pointer-events: none; }
	.has-info .info-top, .has-info .info-bottom {
		position: absolute; left: 0; right: 0; box-sizing: border-box;
		opacity: 0; transition: opacity .3s ease, transform .3s ease;
		text-transform: uppercase; letter-spacing: .1em; line-height: 1.45;
	}
	.has-info .info-top { top: 0; padding: 16px 16px 44px; font-size: 14px; font-weight: 600; transform: translateY(-10px); }
	.has-info .info-bottom { bottom: 0; display: flex; flex-direction: column; gap: 3px; padding: 44px 16px 16px; font-size: 12px; transform: translateY(10px); }

	.has-info.hover-light .info-top { color: #111; background: linear-gradient(to bottom, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); }
	.has-info.hover-light .info-bottom { color: #111; background: linear-gradient(to top, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); }
	.has-info.hover-dark .info-top { color: #fff; background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 100%); }
	.has-info.hover-dark .info-bottom { color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 100%); }

	.has-info .model-card a:hover .info-top, .has-info .model-card a:focus-visible .info-top,
	.has-info .model-card a:hover .info-bottom, .has-info .model-card a:focus-visible .info-bottom { opacity: 1; transform: none; }
	.has-info .model-card a:hover .name, .has-info .model-card a:focus-visible .name { opacity: 0; }
}

/* previous / next model: small arrows in the top bar (model pages only), next to the menu / language */
/* header: logo | menu in the middle | right group [previous  next]  LT | EN, flush to the right edge */
.header-right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.header-steps { display: flex; align-items: center; gap: 4px; }
.hstep {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; max-width: 170px;
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--text);
}
.hstep .arr { font-size: 24px; line-height: 1; }
.hstep .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hstep:hover, .hstep:focus-visible { background: #f0f0f0; }

@media (min-width: 860px) {
	/* equal flexible sides keep the menu centred, the right group stays flush right */
	.site-logo { flex: 1 1 0; }
	.main-nav { flex: 0 1 auto; }
	.header-right { flex: 1 1 0; min-width: 0; }
}
/* narrow desktops and tablets: arrows only, names stay in the tooltip */
@media (max-width: 1279px) {
	.hstep .lbl { display: none; }
	.hstep { padding: 0; width: 36px; justify-content: center; }
}
@media (max-width: 859px) {
	.header-right { margin-left: auto; gap: 4px; }
	.hstep { width: 40px; height: 40px; }
}

/* the end-of-page pager stays, but quiet: plain text, no boxes */
.model-pager { gap: 8px; border-top: 0; margin: 24px 0 40px; padding-top: 0; }
.model-pager a { min-height: 0; padding: 8px 0; border: 0; font-size: 13px; letter-spacing: .1em; color: var(--muted); }
.model-pager a:hover, .model-pager a:focus-visible { background: none; color: var(--text); border: 0; }
.model-pager .arr { font-size: 22px; }

/* model page: info column on the side (sticky), one or two large featured photos beside it */
.model-top { display: block; padding-top: 12px; }
.model-side { margin-bottom: 20px; }
.model-side .model-nav { margin-bottom: 12px; }
.model-side .page-title { margin: 0 0 14px; }
.model-bio { margin: 14px 0 0; padding: 0; max-width: none; font-size: 15px; }
.model-anchors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.model-anchors a { text-decoration: none; }
.model-anchors a:not(.btn):hover { text-decoration: underline; }
.model-hero { display: flex; flex-direction: column; gap: 8px; }
.model-hero .igg-item { width: 100%; }
.model-portfolio { margin-top: 8px; scroll-margin-top: calc(var(--hh, 72px) + 16px); }

@media (min-width: 900px) {
	.model-top { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 24px; }
	.model-side { position: sticky; top: calc(var(--hh, 72px) + 20px); margin: 0; }
	.model-side .page-title { font-size: clamp(28px, 3vw, 44px); }
	.model-side .model-specs { grid-template-columns: 1fr; max-width: none; gap: 0; margin: 0; }
	.model-side .model-specs li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; }
	.model-side .model-specs li span { margin: 0; }

	/* featured photos: side by side, same height; never taller than 88% of the screen */
	.model-hero { flex-direction: row; }
	.model-hero .igg-item { flex: calc(var(--ar) * 100) 1 0%; width: auto; min-width: 0; }
	.model-hero.is-single .igg-item { flex: none; width: 100%; max-width: calc(88vh * var(--ar)); }
	.model-hero.is-double { max-width: calc(88vh * var(--sum)); }

	/* the info column is sticky here, so the slim bar is not needed */
	.model-bar { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 859px) {
	.site-header .wrap { min-height: 60px; }
	.site-logo img { max-height: 44px; }

	/* full-screen menu */
	.main-nav {
		display: none; position: fixed; top: var(--hh, 72px); left: 0; right: 0; bottom: 0; z-index: 49;
		padding: 8px var(--pad) 32px; overflow-y: auto; background: var(--bg); border: 0;
	}
	.main-nav.open { display: block; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav > ul > li { border-bottom: 1px solid var(--line); }
	.main-nav a, .main-nav a:hover, .main-nav .current-menu-item > a { display: block; padding: 18px 0; border: 0; font-size: 20px; letter-spacing: .1em; font-weight: 400; }
	.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a { font-weight: 700; }
	.main-nav .sub-menu { display: flex; position: static; min-width: 0; padding: 0 0 12px 16px; border: 0; box-shadow: none; }
	.main-nav .sub-menu a { padding: 12px 0; font-size: 16px; color: var(--muted); }
	body.nav-open { overflow: hidden; }

	.nav-toggle { order: 3; margin-right: -10px; }
	.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { transition: transform .25s, top .25s, background .25s; }
	.nav-toggle[aria-expanded="true"] span { background: transparent; }
	.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

	/* A-Z filter: one scrolling row that stays under the header */
	.filter-bar {
		position: sticky; top: var(--hh, 72px); z-index: 40; align-items: center; gap: 0;
		margin: 0 calc(var(--pad) * -1) 12px; background: var(--bg); border-bottom: 1px solid var(--line);
	}
	.letter-filter {
		min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 10px var(--pad);
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.letter-filter::-webkit-scrollbar { display: none; }
	.letter-filter li { flex: none; }
	.letter-filter button { min-width: 44px; height: 44px; font-size: 15px; }
	/* on phones the filter is just the funnel icon, fixed at the end of the bar next to the scrolling letters */
	.filter-toggle {
		position: relative; justify-content: center; width: 56px; height: 64px; margin: 0; padding: 0;
		border-width: 0 0 0 1px; border-color: var(--line); background: var(--bg);
	}
	.filter-toggle:hover { background: var(--bg); color: var(--text); }
	.filter-toggle[aria-expanded="true"], .filter-toggle.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
	.filter-toggle.is-active:not([aria-expanded="true"]) { background: var(--bg); color: var(--red); border-color: var(--line); }
	.filter-ico { display: block; }
	.filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.filter-count { position: absolute; top: 10px; right: 8px; }

	/* the filter opens as a sheet from the bottom, thumb-friendly */
	.filter-panel {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; overflow-y: auto;
		border: 0; border-top: 3px solid var(--red); box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); z-index: 90;
	}
	body.filter-open { overflow: hidden; }
	body.filter-open::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .45); }
	.filter-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
	.filter-close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; }
	.filter-cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 12px 20px 20px; }
	.filter-height { grid-column: 1 / -1; }
	.filter-opts label { min-height: 44px; font-size: 16px; }
	.filter-opts input { width: 22px; height: 22px; }
	.filter-foot { position: sticky; bottom: 0; background: var(--bg); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
	.filter-apply { flex: 1; padding: 15px 22px; font-size: 14px; }
	.range { height: 44px; }
	.range-track, .range-fill { top: 20px; }
	.range input { height: 44px; }
	.range input::-webkit-slider-runnable-track { height: 44px; }
	.range input::-moz-range-track { height: 44px; }
	.range input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 8px; }
	.range input::-moz-range-thumb { width: 28px; height: 28px; }

	.page-head { padding-top: 20px; }

	/* on phones the previous/next buttons in the top row show only the arrow */
	.model-step .step .lbl { display: none; }
	.model-step .step { min-width: 44px; justify-content: center; }

	.cta { padding: 48px var(--pad); }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- home page variant "only the logo": full screen, never scrolls ---------- */
html:has(body.home-splash), body.home-splash { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.home-splash .site-footer { display: none; }
body.home-splash .site-logo { visibility: hidden; } /* the big logo is the page; the header keeps the menu and the languages */
body.home-splash .site-header { position: fixed; left: 0; right: 0; top: 0; border-bottom: 0; background: transparent; }
body.home-splash .main-nav { margin-left: auto; }
@media (min-width: 860px) { body.home-splash .main-nav { display: none; } } /* on a wide screen the links under the logo are the menu */
.splash {
	position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(20px, 5vh, 56px); padding: 80px var(--pad) 32px; background: var(--bg);
}
.splash-logo { display: flex; justify-content: center; line-height: 0; max-width: 100%; }
.splash-logo img { display: block; width: min(72vw, 1100px); height: auto; max-height: 58vh; max-height: 58dvh; object-fit: contain; }
.splash-logo.is-small img { width: auto; max-width: min(72vw, 548px); } /* the small default logo file is not enlarged beyond 2x */
.splash-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(20px, 4vw, 48px); }
.splash-links a {
	padding: 8px 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
	border-bottom: 2px solid transparent;
}
.splash-links a:hover, .splash-links a:focus-visible { border-bottom-color: var(--red); }
@media (min-width: 860px) { .splash-links .only-mobile { display: none; } }
@media (max-width: 859px) { .splash-links .only-desktop { display: none; } }
@media (max-width: 859px) {
	.splash { padding-top: 72px; }
	.splash-links { flex-direction: column; align-items: center; gap: 4px; }
	.splash-links a { padding: 10px 0; font-size: 15px; }
}

/* date fields of the application form: day / month / year selects (theme.js) */
.hnc-date { display: flex; gap: 8px; width: 100%; }
.hnc-date-sel {
	flex: 1; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #ccc; border-radius: 0; background-color: #fff;
	font: inherit; font-size: 16px; line-height: 1.4; color: var(--text);
}
.hnc-date-sel:first-child { flex: .8; }
.hnc-date-sel:last-child { flex: 1.1; }
.hnc-date-sel:focus { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }