/* ============================================================
   MBSB Theme — Main Stylesheet
   Extracted from index_final.html + WordPress/VC additions
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-2: #f0f2f5;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --ink: #15181d;
  --muted: #5c636e;
  --muted-2: #8b919b;
  --line: #e0e4ea;
  --line-strong: #cdd2db;
  --accent: #3094e5;
  --accent-2: #4d9de0;
  --accent-soft: rgba(23, 97, 196, .08);
  --accent-line: rgba(23, 97, 196, .25);
  --dark: #1f2021;
  --dark-2: #1b1f26;
  --dark-line: #2b313a;
  --on-dark: #e9e7e1;
  --on-dark-muted: #9aa1ab;
  --maxw: 1600px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --radius: 4px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* Content wrapper — 1600px wide with 56px breathing room */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw));
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

h1, h2, h3, .display,
.mbsb-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: .005em;
}
.ic {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.kicker {
  font-family: 'IBM Plex Sans';
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}
.kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--accent); }

/* ---------- HEADER ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow .4s, border-color .4s;
  border-bottom: 1px solid var(--line);
}
header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  transition: height .4s var(--ease);
}
header.scrolled .nav { height: 60px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .mark {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.brand .mark svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.brand .txt { font-family: 'Oswald'; text-transform: uppercase; line-height: 1.05; }
.brand .txt b { display: block; font-weight: 600; font-size: 13px; letter-spacing: .05em; }
.brand .txt span { display: block; font-size: 10px; letter-spacing: .28em; color: var(--muted); }
.navlinks { display: flex; align-items: center; gap: 32px; }
.navlinks > ul { list-style: none; display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; }
.navlinks > ul > li { list-style: none; margin: 0; padding: 0; }
.navlinks a {
  font-family: 'IBM Plex Sans';
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s;
  position: relative;
  padding: 4px 0;
  font-weight: 500;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transition: width .3s var(--ease);
}
.navlinks a:hover, .navlinks a.active { color: var(--ink); }
.navlinks a:hover::after, .navlinks a.active::after { width: 100%; }
.langs { position: relative; display: inline-flex; align-items: center; }
.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-family: 'IBM Plex Sans';
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  transition: .25s;
  font-weight: 500;
}
.lang svg { width: 9px; height: 9px; flex: none; transition: transform .25s; }
.lang:hover { color: var(--ink); }
/* Dropdown of the remaining languages */
.lang-menu {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 60;
}
.langs:hover .lang-menu,
.langs:focus-within .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.langs:hover .lang-toggle svg,
.langs:focus-within .lang-toggle svg { transform: rotate(180deg); }
.lang-menu li { margin: 0; }
.lang-menu a.lang { display: block; }
.burger {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  width: 44px;
  height: 38px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.burger span { width: 18px; height: 2px; background: var(--ink); transition: .3s; }
/* Burger → X while the menu is open (burger follows the nav in the DOM) */
.navlinks.open ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navlinks.open ~ .burger span:nth-child(2) { opacity: 0; }
.navlinks.open ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  overflow: hidden;
  background: var(--dark);
  color: var(--on-dark);
}
/* SVG scene art (placeholder) — section keeps a tall fallback height */
.hero svg.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero:has(> svg.art) { min-height: 80vh; }
/* Background image in flow — its natural height sets the section height;
   wider-than-viewport images crop equally left/right without scaling */
.hero picture.art {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.hero picture.art img {
  width: auto;
  max-width: none;
  height: auto;
  display: block;
}
.hero .veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 16, .5) 0%, rgba(10, 12, 16, .28) 35%, rgba(10, 12, 16, .75) 70%, rgba(10, 12, 16, .96) 100%);
}
.hero .scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
  animation: scan 8s linear infinite;
  z-index: 2;
}
@keyframes scan { 0% { top: 10%; } 50% { top: 80%; } 100% { top: 10%; } }
.hero-inner {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 60px 0 140px;
}
.hero h1, .hero .hero-title {
  font-size: clamp(2.3rem, 6.3vw, 6.2rem);
  font-weight: 700;
  max-width: 20ch;
  color: #fff;
  line-height: 1.1;
}
.hero h1 em, .hero h1 span,
.hero .hero-title em, .hero .hero-title span { color: var(--accent-2); font-style: normal; }
.hero .lead {
  margin-top: 22px;
  max-width: 52ch;
  color: rgba(255, 255, 255, .65);
  font-size: 1.05rem;
  line-height: 1.65;
}
.hero-data {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, .12);
}
.hero-data .cell {
  padding: 22px 28px;
  display: flex;
  gap: 14px;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.hero-data .cell:last-child { border-right: 0; }
.hero-data .cell .ico { color: var(--accent-2); flex: none; }
.hero-data .cell .ico svg {
  width: 44px;
  height: 44px;
  stroke: var(--accent-2);
  fill: none;
  stroke-width: 1.5;
}
.hero-data .cell .lbl {
  font-family: 'IBM Plex Mono';
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 3px;
}
.hero-data .cell .val {
  font-family: 'Oswald';
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.hero-data .cell .val small { font-size: .9rem; font-weight: 400; color: rgba(255, 255, 255, .55); }

/* ---------- SECTIONS ---------- */
section { position: relative; z-index: 1; }
.vc_section { position: relative; z-index: 1; }
.extra-section-padding-80,.extra-section-padding,.vc_section.vc_section-has-fill + .vc_row-full-width + .vc_section.extra-section-padding { padding:80px 0; }
section#section-07.extra-section-padding {padding-top: 0;}
.extra-section-padding-top-80 { padding-top:80px; }
.extra-section-padding-bottom-80 { padding-bottom:80px; }
.vc_row.mbsb-section-row.extra-section-padding-bottom { padding-bottom:80px; }
.sec-head { margin-bottom: 54px; }
.sec-head h2, .sec-head .mbsb-title { font-size: clamp(2.4rem, 4.4vw, 4rem); margin-top: 14px; }
.section-6-ch-limit .sec-head h2, .section-6-ch-limit .sec-head .mbsb-title { max-width: 26ch; }
.sec-head .sub { color: var(--muted); margin-top: 18px; font-size: 1.02rem; max-width: 70ch; }
.dark { background: var(--dark); color: var(--on-dark); }
.dark h2, .dark h3, .dark h4, .dark .mbsb-title { color: #fff; }

/* ---------- INFO (Section 1) ---------- */
.info-section { background: #fff; padding: 80px 0 0; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.info-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  margin-top: 0;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 60px;
}

/* Gallery */
.gallery-wrap { position: relative; }
.gallery { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: start; }
.gallery-main {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-2);
}
.gallery-main img, .gallery-main svg.art {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumbs { position: relative; overflow: hidden; touch-action: none; user-select: none; }
.gallery-track { display: flex; flex-direction: column; gap: 10px; transition: transform .4s var(--ease); }
.gallery-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-2);
  cursor: pointer;
  border: 2px solid transparent;
  transition: .25s;
  flex: none;
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--accent); }
.gallery-thumb svg.art, .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav { display: none; gap: 8px; margin-top: 12px; }
.gallery-nav button, .gallery-nav .g-prev, .gallery-nav .g-next {
  background: var(--accent);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.gallery-nav button:hover, .gallery-nav .g-prev:hover, .gallery-nav .g-next:hover { background: #0f4fa0; }
.gallery-nav button:disabled, .gallery-nav .g-prev:disabled, .gallery-nav .g-next:disabled {
  background: var(--line-strong);
  cursor: default;
}

.info-body { padding-top: 4px; }
.info-body .desc { color: var(--muted); font-size: 1.02rem; line-height: 1.7; margin-top: 20px; }
.info-body .coop-label { font-family: 'IBM Plex Sans'; font-size: 14px; color: var(--ink); font-weight: 600; margin: 26px 0 14px; }
.info-body .coop-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px 28px; }
.info-body .coop-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; color: var(--ink); }
.info-body .coop-list li .dot { position:relative; top: 8px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; }

.price-val { font-family: 'Oswald'; font-size: 2.8rem; font-weight: 700; line-height: 1; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-label { font-family: 'IBM Plex Sans'; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.price-note { font-size: 1rem; font-family: 'IBM Plex Sans'; font-weight: 400; color: var(--muted); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  font-family: 'IBM Plex Sans';
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 24px;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  transition: .25s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  background: transparent;
  font-weight: 600;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #0f4fa0; border-color: #0f4fa0; }
.btn.outline { background: #fff; border-color: var(--line-strong); }

/* ---------- FEATURES (Section 2) ---------- */
.features-section { background: #fff; padding: 80px 0 100px; }
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
}
.feat {
  background: #fff;
  padding: 32px 28px 36px;
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: .3s var(--ease);
}
.feat:nth-child(4n) { border-right: 0; }
.feat:nth-child(n+5) { border-bottom: 0; }
.feat:hover { background: var(--surface-2); }
.feat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  transition: width .4s var(--ease);
}
.feat:hover::before { width: 100%; }
.feat .ico { margin-bottom: 18px; }
.feat .ico svg { width: 44px; height: 44px; stroke: var(--accent); fill: none; stroke-width: 1.3; }
.feat h3, .feat .feat-title {
  font-family: 'IBM Plex Sans';
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
}
.feat p { color: var(--muted); font-size: .92rem; line-height: 1.6; }

/* ---------- SPECS (Section 3) ---------- */
.specs-section { background: var(--bg-2); padding: 100px 0; }
.specs-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; }
.block { margin-bottom: 0; }
.block + .block { margin-top: 36px; }
.block-title {
  font-family: 'Oswald';
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  letter-spacing: .03em;
}
.block-title svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.6; }
.spec-card { background: #fff; border: 1px solid var(--line); padding: 22px 24px; margin-bottom: 30px; }
.spec-card:last-child { margin-bottom: 0; }
.spec-card h4, .spec-card .spec-title {
  font-family: 'Oswald';
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
  color: var(--ink);
}
.spec-rows { display: grid; gap: 0; }
.spec-rows div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: .88rem;
  padding: 7px 0;
  border-bottom: 1px dotted var(--line);
}
.spec-rows div:last-child { border-bottom: 0; }
.spec-rows .lab { color: var(--muted); }
.spec-rows .num { font-family: 'IBM Plex Mono'; font-size: .84rem; text-align: right; color: var(--ink); }
.spec-card p.note { color: var(--muted); font-size: .84rem; margin-top: 12px; line-height: 1.55; }
.list-clean { list-style: none; display: grid; gap: 10px; }
.list-clean li { display: flex; gap: 10px; font-size: .92rem; color: var(--muted); align-items: flex-start; }
.list-clean li .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); flex: none; margin-top: 8px;background:#fff; }
.list-clean li b { color: var(--ink); font-weight: 600; }
/* .docnote {
  background: var(--bg-2);
  border: 1px dashed var(--line-strong);
  padding: 12px 14px;
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
} */
.docnote { padding-bottom: 12px; }
.docnote svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 1.7; flex: none; margin-top: 1px; }
.right-panel { padding-top: 0; }
.right-panel .block-title { margin-top: 0; }

/* ---------- POTENTIAL (Section 4) ---------- */
.potential { background: var(--dark); color: var(--on-dark); }
.pot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.pot-intro .kicker { color: var(--accent-2); }
.pot-intro h2, .pot-intro .mbsb-title { font-size: clamp(2rem, 3.5vw, 3.2rem); margin: 14px 0 22px; color: #fff; }
.pot-intro p { color: var(--on-dark-muted); font-size: 1rem; max-width: 46ch; line-height: 1.7; }
.pot-intro .tally {
  margin-top: 36px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: 22px;
  width: 15ch;
}
.pot-intro .tally b { font-family: 'Oswald'; font-weight: 700; font-size: 3.2rem; color: var(--accent-2); line-height: 1; }
.pot-intro .tally span { font-family: 'IBM Plex Sans'; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.pot-list { display: grid; }
.pot-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  padding: 26px 0 26px 16px;
  border-top: 1px solid var(--dark-line);
  position: relative;
  transition: padding .3s var(--ease), background .3s var(--ease);
}
.pot-list .pot-row:last-child { border-bottom: 1px solid var(--dark-line); }
.pot-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  background: var(--accent-2);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s var(--ease);
}
/* PS gradient overlay: linear 0°, reversed, opacity 100→0,
   #1f2021 @ 47%, #363636 @ 84% */
.pot-row:hover {
  padding-left: 24px;
  background: linear-gradient(to right,
    rgba(54, 54, 54, 0)    0%,
    rgba(54, 54, 54, .16)  16%,
    rgba(31, 32, 33, .53)  53%,
    rgba(31, 32, 33, 1)    100%);
}
.pot-row:hover::before { transform: scaleY(1); }
.pot-row .pn { font-family: 'Oswald'; font-size: 2.5rem; font-weight: 700; color: var(--accent-2); line-height: .9; opacity: .7; }
.pot-row .pc h3, .pot-row .pc .pot-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: none;
  font-family: 'Oswald';
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: .01em;
}
.pot-row .pc p { color: var(--on-dark-muted); font-size: .92rem; max-width: 54ch; }

/* ---------- LOCATION (Section 5) ---------- */
.location-section { background: #fff; }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.map-ph { position: relative; overflow: hidden; }
.map-ph img, .map-ph svg.art { width: 100%; display: block; }
.map-ph iframe { width: 100%; }
.loc-body .kicker { margin-bottom: 14px; }
.loc-body h3, .loc-body .loc-title { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 28px; }
.loc-body p { color: var(--muted); margin-bottom: 16px; font-size: .97rem; line-height: 1.7; }
.loc-body p b { color: var(--ink); font-weight: 600; }
.loc-body p:last-child { margin-bottom: 0; }

/* ---------- WHY BULGARIA (Section 6) ---------- */
.why { background: var(--bg-2); }
.why .sec-head { max-width: none; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  margin-top: 48px;
}
.why-grid .c {
  background: #fff;
  padding: 30px 24px;
  transition: .3s var(--ease);
  border-right: 1px solid var(--line);
}
.why-grid .c:last-child { border-right: 0; }
.why-grid .c:hover { background: var(--surface-2); }
.why-grid .c .ico { margin-bottom: 16px; }
.why-grid .c .ico svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.why-grid .c h4, .why-grid .c .why-title { font-family: 'IBM Plex Sans'; font-size: .95rem; font-weight: 700; text-transform: none; margin-bottom: 8px; color: var(--ink); }
.why-grid .c p { color: var(--muted); font-size: .84rem; line-height: 1.55; }

/* ---------- DISTANCES ---------- */
.dist { padding: 0; }
.dist-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top:60px; }
.dist-grid .d { padding: 50px 32px; text-align: center; transition: .3s; background: var(--dark); }
.dist-grid .d.featured, .dist-grid .d:first-child:not([class*="no-feat"]) { background: var(--accent); }
.dist-grid .d:hover { background: var(--accent); }
.dist-grid .d .v { font-family: 'Oswald'; font-size: 3.4rem; font-weight: 700; line-height: 1; color: #fff; }
.dist-grid .d .v small { font-size: 1.3rem; font-weight: 400; }
.dist-grid .d .lab { font-family: 'IBM Plex Sans'; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-top: 10px; }

/* ---------- CONTACT ---------- */
.contact-section { background: #fff; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; }
.cinfo {max-width:440px;}
.cinfo .line { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cinfo .line:first-of-type { border-top: 1px solid var(--line); }
.cinfo .line .ico { color: var(--accent); flex: none; margin-top: 2px; }
.cinfo .line .ico svg { width: 36px; height: 36px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.cinfo .line .k { font-family: 'IBM Plex Sans'; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.cinfo .line .val { font-size: 1rem; color: var(--ink); }
.cinfo .blurb { color: var(--muted); margin-top: 24px; font-size: .9rem; line-height: 1.6; }

/* CF7 and custom form overrides */
.wpcf7-form, form.cf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1/3; }
.field label,
.wpcf7-form label {
  font-family: 'IBM Plex Sans';
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}
.field input, .field textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  padding: 13px 15px;
  font-family: 'IBM Plex Sans';
  font-size: .95rem;
  transition: .25s;
  border-radius: 0;
  width: 100%;
}
.field textarea, .wpcf7-form textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus,
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.consent { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .85rem; }
.consent input { width: 16px; height: 16px; accent-color: var(--accent); }
/* CF7 acceptance markup (nested spans/label) — keep it on one line */
.consent .wpcf7-form-control-wrap { display: inline-flex; }
.consent .wpcf7-list-item { margin: 0; }
.consent .wpcf7-list-item label { display: flex; gap: 10px; align-items: center; font-size: .85rem; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.formfoot { grid-column: 1/3; display: flex; justify-content: flex-end; }
/* Bottom row: consent left, submit right */
.form-bottom {
  grid-column: 1/3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Safety net: if CF7 autop ever wraps the row content in a <p>, keep the layout */
.form-bottom > p {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
}
/* Submit wrapper carries the arrow icon; the CF7 input inside goes transparent */
.submit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 10px;
  background: var(--accent-2);
  cursor: pointer;
  transition: background .25s var(--ease);
}
.submit-wrap:hover { background: var(--accent); }
.submit-wrap svg { width: 18px; height: 18px; color: #fff; flex: none; }
.submit-wrap .wpcf7-submit,
.submit-wrap .wpcf7-submit:hover {
  background: transparent;
  border: none;
  padding: 15px 28x 15px 30px;
}
.submit-wrap .wpcf7-spinner {
  display: none;
}
.formmsg { grid-column: 1/3; font-family: 'IBM Plex Sans'; font-size: 12px; color: var(--accent); min-height: 16px; }
.wpcf7-submit {
  font-family: 'IBM Plex Sans';
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 15px 24px;
  background: var(--accent);
  color: #fff;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  font-weight: 600;
  transition: .25s var(--ease);
}
.wpcf7-submit:hover { background: #0f4fa0; border-color: #0f4fa0; }
.wpcf7-response-output { font-size: .85rem; color: var(--accent); margin-top: 8px; border: none !important; padding: 0 !important; }

/* ---------- FOOTER ---------- */
footer { background: var(--dark); color: var(--on-dark); padding: 56px 0 28px; position: relative; z-index: 1; }
footer .brand .mark { border-color: var(--accent); }
footer .brand .txt span { color: var(--on-dark-muted); }
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--dark-line);
}
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links > ul { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; margin: 0; padding: 0; }
.foot-links > ul > li { list-style: none; margin: 0; padding: 0; }
.foot-links a {
  font-family: 'IBM Plex Sans';
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  transition: .25s;
  font-weight: 500;
}
.foot-links a:hover { color: var(--accent-2); }
.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
  font-family: 'IBM Plex Sans';
  font-size: 11px;
  color: var(--on-dark-muted);
}
.foot-bot a { color: var(--on-dark-muted); }
.foot-bot a:hover { color: var(--accent-2); }
.foot-legal { display: flex; gap: 20px; }

/* ---------- REVEAL ANIMATION ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- SEC HEAD utility ---------- */
.ss-sec-head { margin-bottom: 54px; }
.ss-sec-head h2, .ss-sec-head .mbsb-title { font-size: clamp(2.4rem, 4.4vw, 3rem); margin-top: 14px; }
/* Gallery+Info title (was an inline style on the h2) */
.info-body .info-title { font-size: clamp(2.2rem, 3.5vw, 3.4rem); margin-top: 14px; }
.ss-sec-head .sub { color: var(--muted); margin-top: 18px; font-size: 1.02rem; max-width: 70ch; }

/* ---------- SPEC BLOCK icon ---------- */
.spec-block-icon { margin-bottom: 16px; }
.spec-block-icon svg { width: 42px; height: 42px; stroke: var(--accent); fill: none; stroke-width: 1.3; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1630px) {
  .wrap { padding: 0 15px; }
  section > .wrap { padding: 0; }
}
@media (max-width: 1200px) {
  /* Mobile nav from 1200px down */
  .navlinks { display: none; }
  .burger { display: flex; }
  .wrap.nav > .langs {
    display: none;
  }
  .langs { margin-left: auto; margin-right: 12px; }
  .navlinks.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    width: 100%;
    max-width: 320px;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    z-index: 60;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  }
  .navlinks.open > ul { list-style: none; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; gap: 0; }
  .navlinks.open a { display: inline-block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .navlinks.open .langs-mobile {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: -15px;
  }
  /* Inside the mobile menu the dropdown is shown expanded inline */
  .navlinks.open .langs-mobile .lang-menu {
    position: static;
    display: inline-flex;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    padding: 0;
    background: none;
    min-width: 0;
  }
  .navlinks.open .langs-mobile .lang-toggle svg { display: none; }
  .navlinks.open .langs-mobile a.lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-family: 'IBM Plex Sans';
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--muted);
    transition: .25s;
    font-weight: 500;
    border-bottom: none;
  }
  /* No animated underline in the dropdown — it overlapped the items below */
  .navlinks.open a::after { display: none; }
  /* Active section: blue link + blue border */
  .navlinks.open a.active { color: var(--accent); border-bottom-color: var(--accent); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .feat:nth-child(4n) { border-right: 1px solid var(--line); }
  .feat:nth-child(2n) { border-right: 0; }
  .feat:nth-child(n+7) { border-bottom: 0; }
  .feat:nth-child(n+5):nth-child(-n+6) { border-bottom: 1px solid var(--line); }
  .dist-grid { grid-template-columns: repeat(2, 1fr); }
  .pot-grid { grid-template-columns: 1fr; gap: 44px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid .c:nth-child(3) { border-right: 0; }
  .specs-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Gallery thumbs switch to a horizontal row under the main image */
  .gallery { grid-template-columns: 1fr; }
  .gallery-thumbs { height: auto !important; }
  .gallery-track { flex-direction: row; }
  .gallery-thumb { width: 120px; flex: none; }
  .why-grid {
    border-right: 0;
    border-bottom: 0;
  }
  .why-grid .c:nth-child(n+1) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 900px) {
  section#home-section {
    padding: 0 !important;
  }
  .vc_column-inner > .wpb_wrapper > section.hero .wrap.hero-inner{
    padding: 0 15px;
  }
  .vc_section[data-vc-full-width] {
    margin: 0 -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .vc_row[data-vc-full-width] {left: unset !important; width: 100% !important; max-width: unset !important;}
  .info-grid, .loc-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .hero-data { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid .c { border-right: 1px solid var(--line); }
  .why-grid .c:nth-child(2n) { border-right: 0; }
  .dist-grid { grid-template-columns: repeat(2, 1fr); }
  .cinfo { max-width:100%; }
  section#section-06.vc_section[data-vc-full-width] {padding-left: 0 !important; padding-right: 0 !important;}
  section#section-06 .vc_row.wpb_row.vc_row-fluid.extra-section-padding-bottom-80 { padding-left: 15px !important; padding-right: 15px !important; }
  section#section-07 .vc_row.wpb_row.vc_row-fluid.mbsb-section-row {flex-direction: column;}
  section#section-07 .vc_row.wpb_row.vc_row-fluid.mbsb-section-row .wpb_column {width:100%;}
  .gallery-wrap { order:1; }
}
/* Lang switcher clone inside the mobile menu — visible only ≤480px */
.langs-mobile { display: none; }
@media (max-width: 480px) {
  header .nav > .langs { display: none; }
  .navlinks.open .langs-mobile {
    display: inline-flex;
    align-self: flex-end;
    width: auto;
    margin: 16px 0 0;
    padding: 0;
    border: none;
  }
}

@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .hero-data { grid-template-columns: 1fr 1fr; }
  .dist-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .field.full, .consent, .formfoot, .formmsg, .form-bottom { grid-column: 1; }
  .wpcf7-form { grid-template-columns: 1fr; }
}

/* ---------- SPEC CARD ACCORDION (≤991px) ---------- */
.spec-acc-arrow { display: none; }
@media (max-width: 991px) {
  .spec-card .spec-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 0;
    /* no tap flash / text selection when toggling */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  .spec-acc-arrow { display: inline-flex; flex: none; color: var(--accent); }
  .spec-acc-arrow svg { width: 12px; height: 12px; transition: transform .35s var(--ease); }
  .spec-card.open .spec-acc-arrow svg { transform: rotate(180deg); }
  /* Smooth height animation via grid row collapse */
  .spec-card-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--ease);
  }
  .spec-card-body-inner { overflow: hidden; min-height: 0; }
  .spec-card.open .spec-card-body { grid-template-rows: 1fr; }
  /* Gap between title and content appears only when open (clipped when closed) */
  .spec-card-body-inner > :first-child { margin-top: 14px; }
}

/* ---------- FILE-BASED INLINE SVG ICONS (assets/svgs) ----------
   These are fill-based artwork (unlike the stroke-based sprite),
   colored via currentColor from the wrapper's color. */
svg.mbsb-svg, svg.mbsb-svg * { fill: currentColor !important; stroke: none !important; }
.feat .ico, .why-grid .c .ico, .spec-block-icon { color: var(--accent); }
.hero-data .cell .ico { color: var(--accent-2); }

/* ---------- WP BAKERY VISUAL COMPOSER OVERRIDES ---------- */
/* Remove VC default column inner padding so our sections control their own spacing */
.vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
.vc_row { clear: both; }
/* Kill WPBakery's default negative row margins (we zeroed the column padding
   that compensated for them) */
.vc_row.wpb_row { margin-left: 0 !important; margin-right: 0 !important; }
/* Stretch rows: keep VC's full-width stretching (inline left/width), but kill
   its compensation paddings — they're uneven (e.g. 8px/7px) and our sections'
   own .wrap provides the real gutter (15px under 1630px). */
.vc_row[data-vc-full-width] {
  position: relative !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Sections that provide their own section wrapper get their own padding; specs/contact need it from vc_section */
.vc_section.mbsb-sec { padding: 100px 0; }

/* When using vc_row with class "mbsb-section-row" for spec/contact inner rows */
.vc_row.mbsb-section-row {
  max-width: calc(var(--maxw));
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 56px;
}
.vc_row.mbsb-section-row.extra-gap-115::before, 
.vc_row.mbsb-section-row.extra-gap-115::after {
    display: none;
}
.vc_row.mbsb-section-row.extra-gap-115 {
    display: flex;
    gap: 115px;
}
.vc_row.mbsb-section-row .mbsb-section-row {
    padding: 0;
    display: flex;
    gap: 30px;
}
.vc_row.mbsb-section-row .mbsb-section-row::before,
.vc_row.mbsb-section-row .mbsb-section-row::after {
  display: none;
}


/* Ensure VC doesn't add margin to our hero/full-bleed elements */
.vc_column-inner > .wpb_wrapper > section.hero,
.vc_column-inner > .wpb_wrapper > .info-section,
.vc_column-inner > .wpb_wrapper > .features-section,
.vc_column-inner > .wpb_wrapper > .specs-section,
.vc_column-inner > .wpb_wrapper > .location-section,
.vc_column-inner > .wpb_wrapper > .contact-section {
  margin-left: 0;
  margin-right: 0;
}
section#section-03 {
  padding-top:65px;
}
@media (max-width: 1200px) {
  .vc_column-inner > .wpb_wrapper > section.hero,
  .vc_column-inner > .wpb_wrapper > .info-section,
  .vc_column-inner > .wpb_wrapper > .features-section,
  .vc_column-inner > .wpb_wrapper > .specs-section,
  .vc_column-inner > .wpb_wrapper > .location-section,
  .vc_column-inner > .wpb_wrapper > .contact-section { margin-left: 0; margin-right: 0; }
  .pot-intro p { max-width:100%;  }
  .loc-grid {grid-template-columns: 1fr;padding: 0 15px;}
  .section-6-ch-limit .sec-head h2, .section-6-ch-limit .sec-head .mbsb-title,.sec-head .sub {
    max-width: 100%;
  }
  section#section-07 .vc_row.wpb_row.vc_row-fluid.mbsb-section-row::before,
  section#section-07 .vc_row.wpb_row.vc_row-fluid.mbsb-section-row::after{
    display: none;
  }
  section#section-07 .vc_row.wpb_row.vc_row-fluid.mbsb-section-row {
    display: flex;
    gap:30px;
  }
}
@media(max-width:991px) {
  .vc_row.mbsb-section-row .mbsb-section-row,
  .vc_row.mbsb-section-row.extra-gap-115 {
    flex-direction: column;
    gap:30px;
  }
  .vc_row.mbsb-section-row.extra-gap-115 .wpb_column {
    width:100%;
  }
}
@media(max-width:1600px) and (min-width:901px) {
  section#top.hero .wrap.hero-inner {
    padding: 0 15px;
  }
  .info-section {
    padding: 80px 15px 0;
  }
  .features-section {
    background: #fff;
    padding: 80px 15px 100px;
  }
  section#section-03 {
    padding: 35px 15px 0 !important;
  }
  section.why.section-6-ch-limit,
  section.location-section,
  .potential {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media(min-width:481px) {
  .price-val.mobile,
  .hero-data.mobile {
    display: none;
  }
}
@media(max-width:500px) {
  .form-bottom {
    justify-content: flex-end;
  }
  .form-bottom .consent {
    width: 100%;
  }
}
@media(max-width:480px) {
  .wrap.nav {
    gap: 10px;
  }
  .hero-data.mobile {
    margin-top: 20px;
  }
  .hero-data.desktop {
    display: none;
  }
  .hero picture.art img {
    width: 100%;
    height: auto;
  }
  .vc_column-inner > .wpb_wrapper > section.hero .wrap.hero-inner {
      margin-bottom:40px;
  }
  .hero-data .cell {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .hero-data .cell:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .price-val.mobile {
    background: var(--accent);
    color: #fff;
    font-size: 26px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-top: 26px;
  }
  .price-val.mobile .price-note {
    color:#fff;
    font-size: 11px;
  }
  .info-section {
    padding-top:30px;
  }
  .info-body .coop-list li {
    align-items: flex-start;
  }
  .info-body .coop-list li .dot {
    margin-top: 8px;
  }
  .features-section {  
    padding-top: 0; 
    padding-bottom: 30px;
  }
  .block {
    background: #fff;
    padding: 10px;
    border: 1px solid var(--line);
  }
  .vc_row.mbsb-section-row.extra-section-padding-bottom {
    padding-bottom: 30px;
  }
  .extra-section-padding-80, .extra-section-padding, .vc_section.vc_section-has-fill + .vc_row-full-width + .vc_section.extra-section-padding {
    padding:30px 0;
  }
  .extra-section-padding-top-80 {
    padding-top: 30px;
  }

  .feat:nth-child(n+0):nth-child(-n+7) {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }
  .feat:nth-child(n+8) {
    border-bottom: 0;
  }
  .feat-grid {
    display: block;
  }
  .why-grid {
    display: block;
  }
  section#section-02,
  section#section-07,
  section#section-06,
  section#section-05,
  section.info-section,
  section#section-04 {
    padding-top: 65px;
  }
}