/* Vipson Objektid — komponendi stiil, sama disainikeel mis avalehe kavandil */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
.vpo-portfolio,
.vpo-single,
.vpo-static {
	--vpo-charcoal: #201812;
	--vpo-bark: #3B2E22;
	--vpo-pine: #B9884E;
	--vpo-pine-light: #D8B583;
	--vpo-ochre: #C1732C;
	--vpo-linen: #F4EEE1;
	--vpo-paper: #FBF8F2;
	--vpo-ink: #241C15;
	--vpo-ink-soft: #574936;

	font-family: 'Work Sans', -apple-system, sans-serif;
	color: var(--vpo-ink);
	max-width: 1520px;
	margin: 0 auto;
	padding: 64px clamp(20px, 4vw, 64px) 100px;
}
.vpo-portfolio h1, .vpo-portfolio h2, .vpo-portfolio h3,
.vpo-single h1, .vpo-single h2, .vpo-single h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	color: var(--vpo-charcoal);
	letter-spacing: -0.01em;
}
.vpo-eyebrow {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vpo-ochre);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.vpo-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--vpo-ochre); }

.vpo-portfolio-head { max-width: 640px; margin-bottom: 46px; }
.vpo-portfolio-head h1, .vpo-portfolio-head h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; }
.vpo-empty { color: var(--vpo-ink-soft); }

.vpo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.vpo-card {
	position: relative;
	display: block;
	border-radius: var(--vp-radius, 3px);
	overflow: hidden;
	aspect-ratio: 3/4;
	color: #fff;
	text-decoration: none;
	background: var(--vpo-bark);
}
.vpo-card img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.vpo-card:hover img { transform: scale(1.05); }
.vpo-card::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,15,10,0) 0%, rgba(20,15,10,.15) 35%, rgba(18,13,9,.65) 60%, rgba(15,11,8,.96) 100%);
}
.vpo-card-body {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 1;
	background: rgba(16,12,8,.88);
}
.vpo-card-body .vpo-eyebrow { color: var(--vpo-pine-light); margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.vpo-card-body .vpo-eyebrow::before { background: var(--vpo-pine-light); }
.vpo-card-body h3 { color: #fff; font-size: 22px; margin-bottom: 6px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.vpo-card-body p { font-size: 13.5px; color: rgba(255,255,255,.9); line-height: 1.5; margin-bottom: 10px; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.vpo-link { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--vpo-ochre); padding-bottom: 2px; }

/* Single */
.vpo-single { padding-top: 0; }
.vpo-single-hero {
	height: 56vh; min-height: 360px; background-size: cover; background-position: center;
	display: flex; align-items: flex-end; margin: 0 0 48px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	position: relative;
}
.vpo-single-hero::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,13,9,.35) 0%, rgba(18,13,9,.4) 30%, rgba(15,11,7,.9) 100%);
}
.vpo-single-hero-overlay { position: relative; padding: 40px; color: #fff; max-width: 1180px; margin: 0 auto; width: 100%; }
.vpo-single-hero-overlay h1 { color: #fff !important; font-size: clamp(28px, 4vw, 48px); text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.vpo-single-hero-overlay .vpo-eyebrow { color: var(--vpo-pine-light) !important; }
.vpo-single-hero-overlay .vpo-eyebrow::before { background: var(--vpo-pine-light); }

.vpo-single-body { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 50px; }
.vpo-lead { font-size: 18px; color: var(--vpo-ink-soft); line-height: 1.6; margin-bottom: 24px; }
.vpo-content { font-size: 16px; line-height: 1.75; color: var(--vpo-ink); }
.vpo-content p { margin-bottom: 16px; }

.vpo-ring-divider { display: flex; align-items: center; gap: 16px; margin: 40px 0 24px; }
.vpo-ring { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--vpo-ochre); position: relative; flex-shrink: 0; }
.vpo-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--vpo-pine); }
.vpo-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--vpo-ochre); }
.vpo-line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--vpo-pine) 0 6px, transparent 6px 11px); opacity: .5; }

.vpo-video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--vp-radius, 3px); overflow: hidden; margin: 0 0 48px; background: var(--vpo-charcoal); }
.vpo-video-wrap iframe, .vpo-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

.vpo-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vpo-gallery img { width: 100%; border-radius: var(--vp-radius, 2px); object-fit: cover; aspect-ratio: 4/3; }

.vpo-single-specs { background: var(--vpo-linen); border-radius: var(--vp-radius, 3px); padding: 26px; align-self: start; }
.vpo-single-specs h3 { font-size: 18px; margin-bottom: 14px; }
.vpo-spec-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(36,28,21,.12); font-size: 14px; }
.vpo-spec-row span:first-child { color: var(--vpo-ink-soft); }
.vpo-spec-row span:last-child { font-family: 'JetBrains Mono', monospace; color: var(--vpo-bark); }
.vpo-btn {
	display: inline-block; margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
	letter-spacing: .06em; text-transform: uppercase; color: var(--vpo-ochre); text-decoration: none;
	border-bottom: 1px solid var(--vpo-ochre); padding-bottom: 2px;
}

@media (max-width: 900px) {
	.vpo-grid { grid-template-columns: 1fr; }
	.vpo-single-body { grid-template-columns: 1fr; }
	.vpo-gallery { grid-template-columns: 1fr; }
	.vpo-static-grid, .vpo-contact-grid { grid-template-columns: 1fr; }
	.vpo-owner-card { flex-direction: column; text-align: center; }
}

/* Long-form article layout (Kvaliteet page) */
.vpo-article-layout { display: grid; grid-template-columns: 1fr 260px; gap: 64px; }
.vpo-article-main { max-width: 720px; }
.vpo-article-main h2 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--vpo-charcoal); margin: 48px 0 16px; scroll-margin-top: 100px; }
.vpo-article-main p { font-size: 17px; line-height: 1.8; color: var(--vpo-ink); margin-bottom: 18px; }
.vpo-dropcap::first-letter {
	font-family: 'Fraunces', serif; font-weight: 600; font-size: 58px; line-height: .85; float: left;
	margin: 4px 8px 0 0; color: var(--vpo-ochre);
}

.vpo-article-toc { }
.vpo-article-toc-inner { background: var(--vpo-linen); border-radius: var(--vp-radius, 4px); padding: 24px; box-sizing: border-box; z-index: 10; transition: top .1s ease; }
.vpo-article-toc-inner nav { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.vpo-article-toc-inner nav a {
	font-size: 13.5px; color: var(--vpo-ink-soft); text-decoration: none; padding: 7px 0;
	border-bottom: 1px solid rgba(36,28,21,.08); transition: color .15s ease;
}
.vpo-article-toc-inner nav a:last-child { border-bottom: none; }
.vpo-article-toc-inner nav a:hover { color: var(--vpo-ochre); }
.vpo-article-toc-inner nav a.is-active { color: var(--vpo-ochre); font-weight: 600; }
.vpo-article-toc-badge {
	margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(36,28,21,.12);
	font-size: 12.5px; color: var(--vpo-ink-soft); line-height: 1.4;
}
.vpo-article-toc-badge span {
	display: block; font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--vpo-ochre); margin-bottom: 2px;
}

@media (max-width: 980px) {
	.vpo-article-layout { grid-template-columns: 1fr; }
	.vpo-article-toc { position: static; order: -1; margin-bottom: 32px; }
	.vpo-article-toc-inner nav { flex-direction: row; flex-wrap: wrap; gap: 8px; }
	.vpo-article-toc-inner nav a { border: none; padding: 6px 12px; background: #fff; border-radius: 20px; }
}

.vpo-pull-quote {
	position: relative; margin: 40px 0; padding: 40px clamp(24px, 5vw, 56px) 36px 36px;
	background:
		radial-gradient(ellipse 140% 100% at 100% 0%, rgba(193,115,44,.16), transparent 55%),
		linear-gradient(155deg, #2a2018 0%, var(--vpo-charcoal) 60%);
	border-left: 4px solid var(--vpo-ochre); border-radius: var(--vp-radius, 2px) 10px 10px 2px;
	font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.5; color: #fff; overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(24,18,12,.5);
}
.vpo-pull-quote-alt { padding-left: clamp(24px, 5vw, 56px); padding-right: 36px; }
.vpo-pull-quote-alt::before { left: auto; right: clamp(8px, 3vw, 40px); }
.vpo-pull-quote::before {
	content: "\201C"; position: absolute; top: -0.2em; left: clamp(4px, 2vw, 24px);
	font-family: 'Fraunces', serif; font-style: normal; font-weight: 700; font-size: 150px;
	line-height: 1; color: var(--vpo-pine); opacity: .2; pointer-events: none;
}
.vpo-pull-quote > *:first-child { position: relative; }
.vpo-pull-quote cite {
	display: block; position: relative; margin-top: 18px; font-family: 'JetBrains Mono', monospace; font-style: normal;
	font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--vpo-pine-light);
}
.vpo-award-badge {
	display: flex; align-items: center; gap: 22px; background: var(--vpo-charcoal); color: #fff;
	border-radius: var(--vp-radius, 3px); padding: 26px 30px; margin: 32px 0;
}
.vpo-award-badge-year { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 600; color: var(--vpo-pine-light); flex-shrink: 0; }
.vpo-award-badge-text { font-size: 15px; line-height: 1.5; color: rgba(244,238,225,.9); }
.vpo-award-badge-text strong { color: #fff; }

/* Static content pages (Firmast, Kontakt) */
.vpo-static-head { max-width: 700px; margin-bottom: 40px; }
.vpo-static-head h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
.vpo-static-body { max-width: 760px; }
.vpo-static-body h2 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600; color: var(--vpo-charcoal); margin: 44px 0 16px; }
.vpo-static-body p { font-size: 16px; line-height: 1.75; color: var(--vpo-ink); margin-bottom: 18px; }
.vpo-static-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.vpo-static-grid > div { background: var(--vpo-linen); border-radius: var(--vp-radius, 3px); padding: 26px; }
.vpo-mult-photo { margin: 28px 0; border-radius: var(--vp-radius, 4px); overflow: hidden; }
.vpo-mult-photo img { width: 100%; height: 340px; object-fit: cover; display: block; }
.vpo-static-grid .vpo-ring { width: 30px; height: 30px; margin-bottom: 16px; }
.vpo-static-grid h3 { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; margin-bottom: 8px; color: var(--vpo-charcoal); }
.vpo-static-grid p { font-size: 14.5px; color: var(--vpo-ink-soft); line-height: 1.6; margin: 0; }

/* Reusable photo hero banner for static content pages */
.vpo-page-hero {
	/* vp-hero-fallback: dark colour shows when the hero picture is hidden */
	background-color: #2a1f16;
	height: 28vh; min-height: 200px; max-height: 300px; background-size: cover; background-position: center;
	display: flex; align-items: flex-end; margin: 0 0 36px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	position: relative;
}
.vpo-page-hero::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,13,9,.05) 0%, rgba(18,13,9,.18) 45%, rgba(15,11,7,.78) 100%);
}
.vpo-page-hero-overlay { position: relative; padding: 24px 36px; color: #fff; max-width: 1520px; margin: 0 auto; width: 100%; }
.vpo-page-hero-overlay h1 { color: #fff !important; font-size: clamp(28px, 3.6vw, 44px); margin-top: 10px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.vpo-page-hero-overlay .vpo-eyebrow { color: var(--vpo-pine-light) !important; margin-bottom: 0; }
.vpo-page-hero-overlay .vpo-eyebrow::before { background: var(--vpo-pine-light); }

.vpo-owner-card {
	display: flex; align-items: center; gap: 26px; background: var(--vpo-paper);
	border: 1px solid rgba(36,28,21,.1); border-radius: var(--vp-radius, 3px); padding: 22px; margin-bottom: 40px;
}
.vpo-owner-card img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vpo-owner-info h3 { font-family: 'Fraunces', serif; font-size: 19px; margin: 2px 0 8px; color: var(--vpo-charcoal); }
.vpo-owner-info .vpo-eyebrow { margin-bottom: 4px; }
.vpo-owner-info p { font-size: 14px; color: var(--vpo-ink-soft); line-height: 1.5; margin: 0; max-width: 46ch; }

.vpo-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: start; }
.vpo-contact-card { background: var(--vpo-linen); border-radius: var(--vp-radius, 3px); padding: 30px; }
.vpo-contact-card h3 { font-size: 19px; margin-bottom: 16px; }
.vpo-contact-card a { color: var(--vpo-bark); text-decoration: none; }
.vpo-contact-card a:hover { color: var(--vpo-ochre); }
.vpo-contact-note p { font-size: 15.5px; color: var(--vpo-ink-soft); line-height: 1.7; margin-bottom: 16px; }

.vpo-field { display: block; margin-bottom: 14px; }
.vpo-field span { display: block; font-size: 13px; color: var(--vpo-ink-soft); margin-bottom: 5px; }
.vpo-field input, .vpo-field textarea {
	width: 100%; padding: 11px 12px; border: 1px solid rgba(36,28,21,.18); border-radius: var(--vp-radius, 3px);
	font-family: 'Work Sans', sans-serif; font-size: 14.5px; background: #fff; color: var(--vpo-ink);
}
.vpo-field input:focus, .vpo-field textarea:focus { outline: none; border-color: var(--vpo-ochre); }

@media print {
	.vp-site-header, .vp-footer, .vp-nav-toggle { display: none !important; }
	.vp-page { padding-top: 0 !important; }
	body { background: #fff !important; }
}

/* Quote request form */
.vpo-quote-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.vpo-quote-main { min-width: 0; }
.vpo-quote-form { max-width: 100%; }
.vpo-quote-divider { display: none; }
.vpo-field-group {
	margin-bottom: 24px; background: var(--vpo-paper); border: 1px solid rgba(36,28,21,.1);
	border-radius: var(--vp-radius, 6px); padding: 26px 28px;
}
.vpo-field-group-label {
	display: flex; align-items: baseline; gap: 12px; font-family: 'Fraunces', serif; font-weight: 600;
	font-size: 19px; color: var(--vpo-charcoal); margin-bottom: 16px;
}
.vpo-field-group-label em {
	font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 12px; font-weight: 500;
	letter-spacing: .06em; color: var(--vpo-ochre); flex-shrink: 0;
}
.vpo-field-group-label small {
	font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--vpo-ink-soft);
}
.vpo-quote-text {
	width: 100%; padding: 12px 14px; border: 1px solid rgba(36,28,21,.18); border-radius: var(--vp-radius, 3px);
	font-family: 'Work Sans', sans-serif; font-size: 14.5px; background: #fff; color: var(--vpo-ink);
}
.vpo-quote-text:focus { outline: none; border-color: var(--vpo-ochre); }
.vpo-choice-group { display: flex; flex-wrap: wrap; gap: 10px; }

.vpo-quote-summary { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.vpo-quote-summary-inner { background: var(--vpo-linen); border-radius: var(--vp-radius, 3px); padding: 26px; }
.vpo-quote-contact-card { display: flex; flex-direction: column; }
.vpo-quote-contact-lead { font-size: 14px; color: var(--vpo-ink-soft); margin: 6px 0 14px; line-height: 1.5; }
.vpo-quote-contact-card a {
	font-family: 'JetBrains Mono', monospace; font-size: 14.5px; color: var(--vpo-bark); text-decoration: none;
	margin-bottom: 6px; display: inline-block;
}
.vpo-quote-contact-card a:hover { color: var(--vpo-ochre); }
.vpo-quote-contact-address { display: block; font-size: 13.5px; color: var(--vpo-ink-soft); margin-top: 4px; line-height: 1.5; }
.vpo-quote-summary-list { margin-top: 4px; }
.vpo-quote-summary-empty { font-size: 14px; color: var(--vpo-ink-soft); line-height: 1.6; margin: 0; }
.vpo-quote-summary-row { padding: 12px 0; border-bottom: 1px solid rgba(36,28,21,.1); }
.vpo-quote-summary-row:last-child { border-bottom: none; }
.vpo-quote-summary-row span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--vpo-ink-soft); margin-bottom: 4px; }
.vpo-quote-summary-row strong { font-size: 14.5px; font-weight: 500; color: var(--vpo-charcoal); line-height: 1.4; }

@media (max-width: 980px) {
	.vpo-quote-layout { grid-template-columns: 1fr; }
	.vpo-quote-summary { position: static; order: -1; margin-bottom: 32px; }
}
.vpo-choice { position: relative; cursor: pointer; }
.vpo-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vpo-choice span {
	display: inline-block; padding: 10px 18px; border: 1.5px solid rgba(36,28,21,.22); border-radius: 20px;
	font-size: 14px; color: var(--vpo-ink); background: #fff; transition: all .15s ease;
}
.vpo-choice input:hover + span { border-color: var(--vpo-ochre); box-shadow: 0 2px 8px rgba(193,115,44,.18); transform: translateY(-1px); }
.vpo-choice input:checked + span { background: var(--vpo-ochre); border-color: var(--vpo-ochre); color: #fff; font-weight: 500; box-shadow: 0 3px 10px rgba(193,115,44,.3); }
.vpo-choice input:focus-visible + span { outline: 2px solid var(--vpo-ochre); outline-offset: 2px; }

.vpo-quote-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.vpo-quote-submit { border: none; cursor: pointer; font-size: 13px; padding: 17px 32px; }
.vpo-hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) {
	.vpo-quote-contact { grid-template-columns: 1fr; }
}

/* Ehitusprotsess (building process) timeline */
.vpo-process { max-width: 820px; margin: 0 auto; padding: 64px clamp(20px, 4vw, 0px) 100px; }
.vpo-process-intro { max-width: 62ch; margin: 0 auto 56px; text-align: center; font-size: 18px; }
.vpo-process-steps { position: relative; }
.vpo-process-steps::before {
	content: ""; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px;
	background: linear-gradient(180deg, var(--vpo-ochre) 0%, rgba(193,115,44,.15) 100%);
}
.vpo-process-step { position: relative; display: flex; gap: 28px; margin-bottom: 56px; }
.vpo-process-step:last-child { margin-bottom: 0; }
.vpo-process-marker {
	position: relative; z-index: 1; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
	background: var(--vpo-charcoal); display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 6px var(--vpo-paper);
}
.vpo-process-marker span { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; color: var(--vpo-pine-light); }
.vpo-process-content { flex: 1; padding-top: 6px; }
.vpo-process-content h2 { font-family: 'Fraunces', serif; font-size: 23px; font-weight: 600; color: var(--vpo-charcoal); margin-bottom: 12px; }
.vpo-process-content p { font-size: 15.5px; line-height: 1.75; color: var(--vpo-ink); margin-bottom: 14px; }
.vpo-process-photos { margin-top: 18px; border-radius: var(--vp-radius, 4px); overflow: hidden; box-shadow: 0 20px 44px -22px rgba(24,18,12,.4); }
.vpo-process-photos img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.vpo-process-photos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; box-shadow: none; }
.vpo-process-photos-2 img { border-radius: var(--vp-radius, 4px); box-shadow: 0 20px 44px -22px rgba(24,18,12,.4); }

.vpo-process-cta {
	margin-top: 72px; padding: 48px; text-align: center; background: var(--vpo-linen); border-radius: var(--vp-radius, 6px);
}
.vpo-process-cta h2 { font-family: 'Fraunces', serif; font-size: 26px; color: var(--vpo-charcoal); margin-bottom: 10px; }
.vpo-process-cta p { color: var(--vpo-ink-soft); margin-bottom: 22px; }
.vpo-process-cta .vpo-btn { display: inline-block; }

@media (max-width: 640px) {
	.vpo-process-photos-2 { grid-template-columns: 1fr; }
	.vpo-process-step { gap: 18px; }
	.vpo-process-marker { width: 44px; height: 44px; }
	.vpo-process-steps::before { left: 21px; }
}

/* Top banner: starts right under the header (no light gap) and collapses to a slim title band when its picture is hidden. */
.vpo-static > .vpo-page-hero:first-child { margin-top: -64px; }
.vpo-page-hero:not([style*="background-image"]) { height: auto; min-height: 0; max-height: none; padding-top: 70px; }
@media (max-width: 700px) { .vpo-static > .vpo-page-hero:first-child { margin-top: -64px; } }