/* V129: shared header and hero geometry, based on the Ostrava purchase page.
   Loaded after legacy page styles. #top / #siteHeader intentionally give this
   layer precedence without changing content components or using global resets. */
:root {
  --vo-hero-top: 124px;
  --vo-hero-bottom: 52px;
  --vo-hero-gap: 68px;
  --vo-hero-heading: 48px;
  --vo-hero-lead: 18px;
  --vo-hero-green: #075b42;
  --vo-hero-ink: #173e2e;
  --vo-hero-muted: #46584d;
  --vo-header-action-width: 220px;
}

body#top { --vo-hero-ink: #173e2e; --vo-hero-muted: #46584d; }

/* Every public page uses the same content rail, including contact/estimate. */
body#top .container:not(.container .container) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--vo-site-shell-max);
  margin-inline: auto;
  padding-inline: var(--vo-site-gutter);
}
#siteHeader {
  padding: 12px 16px 0;
}
#siteHeader .header-rail {
  background: #fffffff2;
  border-radius: 14px;
  padding: 4px 8px;
}
#siteHeader .navbar { padding: 6px 0; }
#siteHeader .navbar > .container {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) var(--vo-header-action-width);
  gap: 14px;
  min-height: 56px;
  width: min(100%, calc(100vw - var(--vo-site-gutter) - var(--vo-site-gutter)));
  max-width: var(--vo-site-content-max);
  padding: 0;
}
#siteHeader .navbar > .container > .navbar-brand {
  margin: 0;
  padding: 0;
  justify-self: start;
  white-space: nowrap;
}
#siteHeader #mainNav {
  min-width: 0;
  justify-content: center !important;
}
#siteHeader #mainNav > .navbar-nav {
  margin: 0 !important;
  flex-wrap: nowrap;
  gap: 4px !important;
}
#siteHeader #mainNav .nav-link {
  font-size: 14px !important;
  padding: 10px 8px !important;
  line-height: 1.5;
  white-space: nowrap;
}
#siteHeader .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
#siteHeader .header-cta {
  width: var(--vo-header-action-width);
  min-height: 44px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 9px 10px 9px 16px;
  border: 1px solid #174e35;
  border-radius: 8px;
  background: #174e35;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none;
}
#siteHeader .header-cta__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 50%;
  background: #e5f2ab;
  color: #193b2b;
}
#siteHeader .header-cta:hover { background: #0c3c28; border-color: #0c3c28; color: #fff; }
#siteHeader :is(a,button):focus-visible { outline: 2px solid #075b42; outline-offset: 3px; }
#siteHeader.is-pinned { padding: 0; }
#siteHeader.is-pinned .header-rail { border-radius: 0 0 14px 14px; }

/* Shared introductory spacing; editorial pages keep their natural heights. */
body#top :is(.hm125-hero,.pbr81-hero,.ocn70-hero,.cp111-hero,.hub114-hero,.art71-hero,.art115-hero,.kt109-hero,.info77-hero) {
  padding: var(--vo-hero-top) 0 var(--vo-hero-bottom);
  background: #f4f4ec;
}
body#top :is(.hm125-hero-grid,.pbr81-hero-grid,.ocn70-hero-grid,.cp111-hero-grid,.hub114-hero-grid) {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,1fr);
  gap: var(--vo-hero-gap);
  align-items: center;
  padding-bottom: 0;
}
body#top :is(.hm125-hero-grid,.pbr81-hero-grid,.ocn70-hero-grid,.cp111-hero-grid,.hub114-hero-grid) > * { min-width: 0; }
body#top :is(.hm125-hero,.pbr81-hero,.ocn70-hero,.cp111-hero,.hub114-hero,.kt109-hero) h1 {
  font-size: var(--vo-hero-heading);
  font-weight: 650;
  line-height: 1.13;
  letter-spacing: -.045em;
  margin: 0 0 28px;
  color: var(--vo-hero-ink);
}
body#top :is(.hm125-h1-place,.pbr81-h1-location,.cp111-hero h1 span,.hub114-hero h1 span,.kt109-hero h1 span) { color: var(--vo-hero-green); }
body#top .pbr81-hero h1 .pbr81-h1-line { color: var(--vo-hero-ink); white-space: normal; }
body#top .pbr81-hero h1 .pbr81-h1-location { color: var(--vo-hero-green); white-space: normal; }
body#top .on106-h1-line { white-space: normal; }
body#top .hm125-h1-place { margin-top: 0; }
body#top :is(.hm125-hero .hm125-lead,.pbr81-hero .pbr81-lead,.ocn70-hero-lead,.cp111-lead,.hub114-hero-lead,.kt109-hero .kt109-lead) {
  font-size: var(--vo-hero-lead);
  line-height: 1.75;
  color: var(--vo-hero-muted);
}
body#top .kt109-hero .kt109-kicker { color: var(--vo-hero-green); }
body#top .ocn70-hero h1 .ocn101-h1-line { white-space: normal; color: var(--vo-hero-ink); }
body#top .ocn70-hero h1 .ocn101-location { color: var(--vo-hero-green); }
body#top :is(.hm125-actions,.pbr81-actions) { gap: 16px; align-items: center; flex-wrap: wrap; }
body#top .hm125-actions { margin-top: 27px; }
body#top :is(.hm125-hero .hm125-button,.pbr81-hero .pbr81-button,.ocn70-hero .ocn70-button,.cp111-hero .cp111-button,.hub114-hero .hub114-button,.art71-hero .art71-button,.art115-hero .art115-button) {
  min-height: 56px;
  padding: 13px 21px;
  border: 2px solid var(--vo-hero-green);
  border-radius: 10px;
  background: var(--vo-hero-green);
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
  box-sizing: border-box;
  max-width: 100%;
}
body#top :is(.hm125-hero .hm125-button,.pbr81-hero .pbr81-button,.ocn70-hero .ocn70-button,.cp111-hero .cp111-button,.hub114-hero .hub114-button,.art71-hero .art71-button,.art115-hero .art115-button):hover {
  background: #064932;
  border-color: #064932;
  color: #fff;
}
body#top :is(.hm125-hero .hm125-secondary,.pbr81-actions .pbr86-text-link,.cp111-hero .cp111-text-link,.hub114-hero .hub114-secondary) {
  min-height: 56px;
  padding: 13px 21px;
  border: 2px solid #708876;
  border-radius: 10px;
  background: #fff;
  color: var(--vo-hero-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.6;
  box-sizing: border-box;
  max-width: 100%;
}
body#top :is(.hm125-hero .hm125-secondary,.pbr81-actions .pbr86-text-link,.cp111-hero .cp111-text-link,.hub114-hero .hub114-secondary):hover { background: #edf2eb; border-color: var(--vo-hero-green); }

body#top :is(.hm125-phone,.pbr81-hero-phone) { min-height: 48px; gap: 12px; font-size: 14px; color: var(--vo-hero-muted); }
body#top .hm125-phone > span:first-child { font-size: 14px; }
body#top :is(.hm125-phone,.pbr81-hero-phone) strong { font-size: 26px; line-height: 1.3; color: var(--vo-hero-green); }
body#top :is(.hm125-hero .hm125-note,.pbr81-hero .pbr81-hero-note) { font-size: 14px; line-height: 1.6; margin: 16px 0 12px; color: var(--vo-hero-muted); }
body#top :is(.hm125-hero .hm125-button,.pbr81-hero .pbr81-button) > span { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; border: 1px solid #adceb2; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 400; line-height: 1; }

/* Same photo dimensions, corner, overlap, stripe and typography on home/services. */
body#top :is(.hm125-visual,.pbr81-visual) {
  position: relative;
  min-width: 0;
  padding: 0 0 52px;
}
body#top :is(.hm125-city,.pbr81-photo) {
  position: relative;
  display: block;
  aspect-ratio: 1.12;
  margin: 0;
  overflow: hidden;
  border-radius: 24px 100px 24px 24px;
  box-shadow: 0 18px 42px #183e3010;
  outline: 1px solid #183e3012;
  outline-offset: -1px;
}
body#top :is(.hm125-city,.pbr81-photo) picture { display: block; width: 100%; height: 100%; aspect-ratio: auto; }
body#top :is(.hm125-city,.pbr81-photo) img { display: block; width: 100%; height: 100%; object-fit: cover; }
body#top :is(.hm127-offer,.pbr81-photo-note) {
  position: absolute;
  display: flex;
  align-items: center;
  left: -24px;
  right: auto;
  bottom: 0;
  width: min(448px, calc(100% + 24px));
  min-height: 110px;
  margin: 0;
  padding: 22px 24px;
  gap: 18px;
  box-sizing: border-box;
  border: 1px solid #c3cec3;
  border-radius: 18px;
  background: #fff;
  color: var(--vo-hero-ink);
  box-shadow: 0 15px 35px #173e2e12;
}
body#top :is(.hm127-offer,.pbr81-photo-note)::before {
  content: '';
  position: absolute;
  left: 0;
  right: auto;
  top: 20px;
  bottom: 20px;
  width: 3px;
  height: auto;
  border-radius: 0 3px 3px 0;
  background: var(--vo-hero-green);
}
body#top :is(.hm127-offer-check,.pbr81-photo-check) {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #c3cec3;
  border-radius: 10px;
  background: #edf1e8;
  color: var(--vo-hero-green);
}
body#top :is(.hm127-offer-text,.pbr81-photo-note > div) { min-width: 0; }
body#top :is(.hm127-offer-text > strong,.pbr81-photo-note > div > span) {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--vo-hero-muted);
}
body#top :is(.hm127-offer-text > span,.pbr81-photo-note > div > strong) {
  display: block;
  font-size: 27px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.02em;
  margin: 4px 0 0;
  color: var(--vo-hero-ink);
}
/* Identity/footer details retain their place below the main introduction. */
body#top .pbr86-entity { padding: 24px 0 0; margin: 0; }
body#top .on106-hero-foot { margin-top: 24px; }
body#top .ocn70-trust { margin-top: 32px; }
body#top .on106-photo-note > div > strong { font-size: 23px; }

@media (min-width: 992px) and (max-height: 800px) {
  :root { --vo-hero-top: 102px; --vo-hero-heading: 44px; --vo-hero-lead: 17px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  :root { --vo-hero-gap: 40px; --vo-hero-heading: 40px; }
}
/* Switch below 1280px before six menu items become cramped; Bootstrap utility overrides
   are limited to visibility because its d-lg-* rules use !important. */
@media (max-width: 1279.98px) {
  #siteHeader { position: fixed; }
  #siteHeader .navbar > .container { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  #siteHeader #mainNav { display: none !important; }
  #siteHeader .header-cta { display: none !important; }
  #siteHeader :is(.header-phone,.navbar-toggler) { display: inline-flex !important; }
  #siteHeader .navbar-toggler { flex-direction: column; justify-content: center; align-items: center; }
}
@media (max-width: 991.98px) {
  :root { --vo-hero-top: 112px; --vo-hero-heading: 40px; --vo-hero-gap: 36px; }
  body#top :is(.hm125-hero-grid,.pbr81-hero-grid,.ocn70-hero-grid,.cp111-hero-grid,.hub114-hero-grid) { grid-template-columns: minmax(0,1fr); }
  body#top :is(.hm125-visual,.pbr81-visual) { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 1199.98px) and (min-width: 768px) {
  body#top :is(.hm127-offer,.pbr81-photo-note) { left: -14px; width: min(448px,calc(100% + 14px)); padding: 20px; gap: 14px; }
  body#top :is(.hm127-offer-text > span,.pbr81-photo-note > div > strong) { font-size: 23px; }
}
@media (max-width: 767.98px) {
  :root { --vo-hero-top: 102px; --vo-hero-bottom: 36px; --vo-hero-heading: clamp(29px,8.5vw,48px); --vo-hero-lead: 17px; --vo-hero-gap: 28px; }
  #siteHeader { padding: 8px 8px 0; }
  #siteHeader .navbar { padding-block: 4px; }
  #siteHeader .navbar > .container { min-height: 44px; }
  body#top :is(.hm125-hero,.pbr81-hero,.ocn70-hero,.cp111-hero,.hub114-hero,.kt109-hero) h1 { margin-bottom: 20px; }
  body#top :is(.hm125-hero .hm125-lead,.pbr81-hero .pbr81-lead,.ocn70-hero-lead,.cp111-lead,.hub114-hero-lead,.kt109-hero .kt109-lead) { line-height: 1.65; }
  body#top :is(.hm125-actions,.pbr81-actions) { flex-direction: column; align-items: stretch; gap: 12px; }
  body#top :is(.hm125-actions,.pbr81-actions) > a { width: 100%; }
  body#top :is(.hm125-city,.pbr81-photo) { aspect-ratio: 1.45; border-radius: 14px 64px 14px 14px; }
  body#top :is(.hm127-offer,.pbr81-photo-note) { left: 14px; right: 0; width: auto; min-height: 108px; padding: 20px; gap: 14px; }
  body#top :is(.hm127-offer-text > span,.pbr81-photo-note > div > strong) { font-size: 23px; }
  body#top .on106-photo-note > div > strong { font-size: 21px; }
  body#top :is(.hm125-phone,.pbr81-hero-phone) strong { font-size: 24px; }
  body#top .pbr86-entity { padding-top: 20px; }
}
@media (max-width: 359.98px) {
  #siteHeader .navbar > .container > .navbar-brand { gap: 6px; }
  #siteHeader .navbar > .container > .navbar-brand .brand-mark svg { width: 28px; height: 28px; }
  #siteHeader .navbar > .container > .navbar-brand :is(.brand-name,.brand-city) { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #siteHeader, #siteHeader .header-rail, #siteHeader .header-cta { animation: none; transition: none; }
}
@media print {
  #siteHeader { display: none; }
  body#top .container:not(.container .container) { max-width: none; padding-inline: 0; }
  body#top :is(.hm125-hero,.pbr81-hero,.ocn70-hero,.cp111-hero,.hub114-hero,.art71-hero,.art115-hero,.kt109-hero,.info77-hero) { padding: 0 0 24px; background: #fff; }
}