/*
 * Visual refresh, loaded after style.css / biz_style.css and overriding them.
 * Colours live in the variables below: change a value here and it changes everywhere.
 * The private site (body.theme-eco) is green, the business site (body.theme-biz) is blue.
 */

:root {
  --accent: #2a7f4f;
  --accent-dark: #1d5c38;
  --deep: #263b30;
  --cta: #d13f1a;
  --cta-dark: #ad3010;
  --cta-soft: #fff1db;
  --ink: #2b3430;
  --ink-soft: #4a524e;
  --shadow: 0 6px 24px rgba(0, 0, 0, .14);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .14);
}

body.theme-biz {
  --accent: #0674b3;
  --accent-dark: #055a8a;
}

/* Transitions: colours only. Nothing moves, grows or changes size on hover. */
* {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, opacity .2s ease, text-shadow .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Promo bar: a slim strip at the top that scrolls away and stays closed for a week ---- */
.alert.alert-dismissible {
  position: relative;
  bottom: auto;
  left: auto;
  width: 100%;
  margin: 0;
  padding: .5rem 2.75rem .5rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--cta);
  color: #fff;
}
.alert-dismissible p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
}
.alert-dismissible .close {
  top: 0;
  right: 0;
  padding: .4rem .9rem;
  font-size: 1.7rem;
  line-height: 1;
  opacity: .85;
}
.alert-dismissible .close:hover { opacity: 1; }
.alert a:hover { color: #fff; text-decoration: underline; }

/* ---- Buttons: one warm call-to-action colour ---- */
button:not(.close):not(.navbar-toggler) {
  padding: .55rem 1.2rem;
  border-radius: .6rem;
  background: var(--cta);
  box-shadow: var(--shadow-sm);
}
button:not(.close):not(.navbar-toggler):hover,
button:not(.close):not(.navbar-toggler):active {
  background: var(--cta-dark);
  transform: none;
}
button:not(.close):not(.navbar-toggler):active { box-shadow: none; }
.btn-success,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--cta);
  border-color: var(--cta);
}
.btn-success:hover { background-color: var(--cta-dark); border-color: var(--cta-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input[type="text"]:focus { border-color: var(--accent); }

/* ---- Palette: one accent instead of lime, blue, yellow and red ---- */
body.theme-eco .section-dark { background: var(--deep); }
body.theme-eco .modal-content { background-color: var(--deep); }
body.theme-eco #sendModal .modal-content { background-color: #f7f7f7; }
.section-light .contact-list h3,
.section-light .contact-list h3:hover { color: var(--accent); }

.section-dark .row { background: var(--accent); }
.row.statistic,
.know-more .row { background: none; }

.block-light { border-color: var(--accent); }
.calc-head { background: var(--accent); color: #fff; }
.calc-footer { background: var(--cta-soft); }
.work-col h4,
.mat-col h4,
.best-col h4 { color: var(--accent-dark); }
.prod-step1,
.prod-step2,
.prod-step3,
.prod-step4 { color: var(--accent); }
.section-dark .row h6 a,
.section-dark .row h6 a:hover,
body.theme-eco footer .copy a,
body.theme-eco footer .copy a:hover { color: #fff; text-decoration: underline; }
#cert-head { color: var(--accent-dark); }
.switch-inactive { color: var(--accent-dark) !important; }

header .nav-menu .nav-item .nav-link:hover,
.navbar-brand img:hover,
.article-col article img:hover { border-color: var(--accent); }
.contact-phone a:hover,
.badge-light[href]:focus,
.badge-light[href]:hover { border-bottom-color: var(--accent); }

/* ---- Soft shadows and slightly smaller radii instead of heavy black ones ---- */
.block-light,
.form-wrap,
.slider-wrap,
.contact-map,
.modal-content {
  box-shadow: var(--shadow);
}
.block-light { border-radius: 1.2rem; }
.form-wrap,
.slider-wrap { border-radius: 1rem; }
.calculator { box-shadow: var(--shadow-sm); }
.section-dark .row.wow { box-shadow: none; }

/* Plain headings (blog, articles) get a real colour; the old CSS drew them with a shadow only. */
h1,
h1:hover,
h2.sh,
h2.sh:hover { color: var(--ink); text-shadow: none; }
.section-dark h1,
.section-dark h1:hover,
.section-light h1,
.section-light h1:hover,
.main-house h1,
.main-house h1:hover,
.section-dark h2.sh,
.section-dark h2.sh:hover,
.section-light h2.sh,
.section-light h2.sh:hover,
.main-house h2.sh,
.main-house h2.sh:hover { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* ---- No hover effects on content: text, images and table cells stay put ---- */
.contact-phone a:hover,
.badge-light[href]:focus,
.badge-light[href]:hover,
.carousel-caption h3:hover,
.carousel-caption h5:hover,
.statistic h2:hover,
.article-col h4:hover,
#ph1:hover, #ph2:hover, #ph3:hover,
.no-house img:hover,
.calc-footer .calc-item:hover,
.calc-row .calc-item:hover,
#prod-block img:hover,
.contact-list h3:hover,
footer .navbar-light .navbar-nav .nav-link:hover,
footer .navbar-light .navbar-nav .nav-link:focus {
  transform: none;
}
.statistic h2:hover,
.know-more h2:hover,
.know-more h4:hover,
.calc-head .calc-item:hover,
.calc-row .calc-item:first-child:hover { text-shadow: none; }
.no-house img:hover { filter: drop-shadow(5px 5px 3px #222); }

img.prod-col:hover { transform: none; height: 15rem; }
@media (max-width: 1200px) {
  img.prod-col:hover { height: 12rem; }
}

/* The three captions under the house picture no longer jump to a bigger size. */
.no-house #showi-1:hover ~ #showh3-1, .no-house #showh3-1:hover,
.no-house #showi-2:hover ~ #showh3-2, .no-house #showh3-2:hover,
.no-house #showi-3:hover ~ #showh3-3, .no-house #showh3-3:hover {
  font-size: 1.6rem;
  margin-top: 0;
  text-shadow: 1px 3px 3px rgba(147, 147, 147, .55);
}

/* Body text keeps one colour whether or not the pointer is over it. */
.section-light p,
.section-light p:hover,
.section-light h2,
.section-light h2:hover,
.section-light h3,
.section-light h3:hover,
.article-col article p,
.article-col article p:hover,
.form-wrap h4,
.form-wrap h4:hover,
.form-wrap h6,
.form-wrap h6:hover,
#prod-block p,
#prod-block p:hover { color: var(--ink-soft); }
.section-light h1,
.section-light h1:hover,
.section-light h2.sh,
.section-light h2.sh:hover { color: #fff; }

/* ---- Typography: 16px body, comfortable line height, left-aligned text ---- */
body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* Raise the sizes the old CSS set below 1rem. */
.article-col p,
.article-col article p { font-size: 1rem; }
.know-more p { font-size: .95rem; }
.review-item p { font-size: 1rem; font-style: normal; line-height: 1.55; }
footer .copy { font-size: .8rem; }
.bz-switch a { font-size: .85rem; }
@media (min-width: 769px) {
  .calculator { font-size: .95rem; }
}

/* Justified text leaves uneven gaps between words. */
.best-col article p,
#prod-block p { text-align: left; }

/* ---- Blog and articles: a reading column with real paragraph spacing ---- */
.prose { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.prose > * { max-width: 46rem; }
.prose h1 { margin-bottom: .75rem; font-size: 2.2rem; font-weight: 700; }
.prose .entry-title { margin: 1.5rem 0 .25rem; font-size: 1.9rem; font-weight: 700; }
.prose .entry-title a { color: var(--ink); }
.prose .entry-title a:hover { color: var(--accent); text-decoration: none; }
.prose > p { margin-bottom: 1rem; color: var(--ink-soft); font-size: .9rem; }
.article-body { font-size: 1.1rem; line-height: 1.7; }
.article-body p,
.article-body ul,
.article-body ol { margin-bottom: 1.1rem; }
.article-body ul,
.article-body ol { padding-left: 1.5rem; }
.article-body li { margin-bottom: .35rem; }
.article-body h2,
.article-body h3 { margin: 2rem 0 .75rem; font-weight: 700; }
.article-body h2 { font-size: 1.55rem; }
.article-body h3 { font-size: 1.25rem; }
.article-body img { max-width: 100%; height: auto; margin: .5rem 0 1rem; border-radius: .6rem; }
.article-body a,
.more-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.more-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
.more-link { display: inline-block; margin: .25rem 0 1rem; font-weight: 600; }
.prose hr { margin: 1.5rem 0; }

/* ======================= Header ======================= */
:root {
  --accent-tint: #e8f3ec;
  --accent-light: #a8e6bf;
}
body.theme-biz {
  --accent-tint: #e6f1f8;
  --accent-light: #9fd3f2;
  --deep: #0b3a5a;
}

html { scroll-padding-top: 5.5rem; }

/* Utility strip: audience switch on the left, address, email and language on the right. */
.topbar {
  background: #f3f5f4;
  border-bottom: 1px solid #e4e8e6;
  font-size: .8rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: .3rem 1rem;
}
.topbar .bz-switch,
.topbar .topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.topbar .topbar-right { gap: 1rem; }
.topbar a { color: var(--ink-soft); text-decoration: none; }
.topbar .topbar-link:hover { color: var(--accent); }
.topbar .fa { margin-right: .2rem; color: var(--accent); }
.topbar .bz-switch a {
  padding: .15rem .65rem;
  border-radius: 2rem;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.topbar .bz-switch a:hover { background: var(--accent-tint); text-decoration: none; }
.topbar .bz-switch a.switch-inactive { background: var(--accent); color: #fff !important; }
.topbar .bz-switch a.switch-inactive .fa { color: #fff; }
.lang-switch { display: inline-flex; align-items: center; }
.lang-switch select {
  padding: .1rem .3rem;
  border: 1px solid #d3d9d6;
  border-radius: .4rem;
  background: #fff;
  color: var(--ink-soft);
  font-size: .8rem;
}

/* Main bar: logo, menu, phone and a call-back button. Stays visible while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  box-shadow: 0 1px 0 #e4e8e6, 0 4px 16px rgba(0, 0, 0, .06);
}
.site-header .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: .45rem 1rem;
}
.site-header .navbar { padding: 0; }
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: 1rem;
  padding: 0;
}
.site-header .navbar-brand img,
.site-header .navbar-brand img:hover {
  max-height: 56px;
  width: auto;
  border: 0;
  border-radius: 0;
  opacity: 1;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
#heading-small { display: none; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.tagline { display: none; font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 1199.98px) {
  #heading-small { display: block; margin: 0; }
}
@media (min-width: 1400px) {
  .tagline { display: block; }
  .topbar .container,
  .site-header .container { max-width: 1320px; }
}

.site-header .nav-menu .nav-item .nav-link {
  margin: 0 .1rem;
  padding: .45rem .8rem;
  border: 0;
  border-radius: .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.site-header .nav-menu .nav-item .nav-link:hover,
.site-header .nav-menu .nav-item .nav-link:focus {
  border: 0;
  border-radius: .5rem;
  background: var(--accent-tint);
  color: var(--accent-dark);
}

.header-contact { text-align: right; line-height: 1.25; }
.phone-main { font-size: 1.1rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.phone-main:hover { color: var(--accent); text-decoration: none; }
.phone-main .fa { color: var(--accent); }
.phone-more { display: block; font-size: .8rem; }
.phone-more a { color: var(--ink-soft); white-space: nowrap; }
.phone-more a + a::before { content: "\00b7"; margin: 0 .35rem; color: #9aa39e; }
.phone-more a:hover { color: var(--accent); text-decoration: none; }

/* Below xl the phone numbers sit in a strip of their own, always visible (not in the menu). */
.phone-strip { background: var(--accent-tint); border-bottom: 1px solid #e4e8e6; }
.phone-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem 1.25rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: .45rem 1rem;
}
.phone-strip a { font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.phone-strip a:hover { color: var(--accent-dark); text-decoration: none; }
.phone-strip .fa { margin-right: .35rem; color: var(--accent); }

/* Phone: logo, tap-to-call and menu in one row. */
.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 .6rem 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.2rem;
}
.call-btn:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
.site-header .navbar-toggler { margin: 0; }
@media (max-width: 1199.98px) {
  .site-header .navbar-collapse { padding: .5rem 0 .25rem; }
  .site-header .nav-menu { margin-bottom: .5rem; }
  .site-header .nav-menu .nav-item .nav-link { padding: .6rem .5rem; }
}
@media (max-width: 575.98px) {
  .topbar .bz-switch a { padding: .15rem .45rem; font-size: .75rem; }
}

/* ======================= Hero ======================= */
.hero {
  padding: 2rem 0 1rem;
  background: linear-gradient(160deg, var(--deep) 0%, var(--accent-dark) 100%);
}
.hero .container {
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.hero-copy { margin-bottom: 1.5rem; text-align: center; }
.hero .hero-title {
  margin: 0 0 .6rem;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-shadow: none;
}
.hero .hero-sub {
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .88);
}

.hero .row.wow { display: flex; align-items: center; background: transparent; }
.hero .slider-wrap {
  margin: 0;
  padding: .35rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .95);
  opacity: 1;
}
.hero .slider-wrap video { display: block; border-radius: .7rem; }
.hero .form-wrap {
  position: relative;
  top: 0;
  right: 0;
  margin: 1rem 0 1rem 1.5rem;
  padding: 1.5rem 1.25rem;
  border-radius: 1rem;
  background: #fff;
}
.hero .form-wrap h4 { margin-bottom: .25rem; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.hero .form-wrap h6 { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.hero .form-wrap form { margin-top: .75rem; }
.hero .form-wrap form input {
  display: block;
  width: 100%;
  margin: .5rem 0;
  padding: .65rem .85rem;
  border: 2px solid #d3d9d6;
  border-radius: .6rem;
  font-size: 1rem;
}
.hero .form-wrap form input:focus { border-color: var(--accent); }
.hero .form-wrap form button {
  width: 100%;
  margin-top: .75rem;
  padding: .8rem 1rem;
  font-size: 1.05rem;
}
@media (max-width: 991.98px) {
  .hero .row.wow { display: block; }
  .hero .form-wrap { margin: 1rem 0; }
}

/* Statistics: big numbers with a quiet caption. */
.hero .row.statistic { margin-top: 1.25rem; color: #fff; }
.hero .statistic article { padding: 1rem .75rem; }
.hero .statistic h2 {
  margin-bottom: .35rem;
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--accent-light);
}
.hero .statistic p { margin: 0; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }
.hero .statistic p a { color: #fff; text-decoration: underline; }
@media (min-width: 992px) {
  .hero .statistic article + article { border-left: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 575.98px) {
  .hero .statistic article { padding: .75rem .5rem; }
  .hero .statistic p { font-size: .82rem; }
}

/* Secondary buttons (Cancel in the modal) stay neutral so the main action stands out. */
.modal-footer button.btn-secondary:not(.close):not(.navbar-toggler) {
  background: #e9ecef;
  color: var(--ink);
  box-shadow: none;
}
.modal-footer button.btn-secondary:not(.close):not(.navbar-toggler):hover {
  background: #d9dee2;
}

/* ---- Arrow between production steps: wide inline SVG with a soft gradient ---- */

/* Images carry width/height attributes so the browser reserves their space; keep them proportional. */
img { height: auto; }


/* The map fills its card to the bottom (no white strip under the inline iframe). */
.contact-map { display: flex; overflow: hidden; }
.contact-map iframe { display: block; flex: 1 1 auto; height: auto; min-height: 450px; }

/* ================= Benefits: a card per benefit ================= */
.bf { padding: 1.4rem 1rem .5rem !important; }
.bf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
.bf-group h3,
.bf-best h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-dark);
}
.bf-group h3 .fa,
.bf-best h3 .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 1rem;
}
.bf-list {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bf-list li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  border-radius: .9rem;
  background: var(--accent-tint);
}
.bf-list img {
  flex: none;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.bf-list img.lazyload:not(.lazyloaded) { opacity: 0; }
.bf-list p,
.section-light .bf-list p { margin: 0; font-size: 1rem; line-height: 1.45; text-align: left; }
.bf-photo { align-self: center; }
.bf-photo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .28)); }
.bf-best { margin-top: 2rem; }
.bf-best h3 { justify-content: center; }
.bf-best .bf-list { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.bf-best .bf-list li { align-items: flex-start; }
/* Three or more long paragraphs read better as one wide column than as narrow, uneven columns. */
.bf-best .bf-list-wide { grid-template-columns: minmax(0, 1fr); max-width: 58rem; margin-right: auto; margin-left: auto; }
.bf-best .bf-list-wide li { padding: 1rem 1.2rem; }
.bf-best .bf-list-wide img { width: 3.4rem; height: 3.4rem; }
body.theme-biz .bf-best { margin-top: .5rem; margin-bottom: 2rem; }
@media (max-width: 991px) {
  .bf-grid { grid-template-columns: minmax(0, 1fr); }
  .bf-photo { display: none; }
}
@media (max-width: 575px) {
  .bf-list li { padding: .65rem .8rem; gap: .7rem; }
  .bf-list img { width: 2.5rem; height: 2.5rem; }
  .bf-best .bf-list { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Calculator: input cards and one big result ================= */
#calc-link { padding: 0 1rem; }
.calc2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.25rem;
  align-items: stretch;
  max-width: 1110px;
  margin: 1.25rem auto 0;
  text-align: left;
}
.calc2-rows { display: grid; gap: .75rem; }
.calc2-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.3fr) 7rem 7rem minmax(9rem, 1fr);
  gap: .6rem 1rem;
  align-items: center;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.calc2-name { font-weight: 700; line-height: 1.25; }
.calc2-name small { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 400; color: var(--ink-soft); }
.calc2-field { display: block; margin: 0; }
.calc2-field span { display: block; margin-bottom: .2rem; font-size: .75rem; color: var(--ink-soft); }
.calc2 .calc2-field input[type="text"] {
  width: 100%;
  margin: 0;
  padding: .5rem .6rem;
  border: 2px solid #cdd7d2;
  border-radius: .6rem;
  background: #fff;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
}
.calc2 .calc2-field input[type="text"]:hover,
.calc2 .calc2-field input[type="text"]:focus { border: 2px solid var(--accent); outline: 0; }
.calc2-out { display: grid; gap: .1rem; font-size: .85rem; color: var(--ink-soft); }
.calc2-out b { color: var(--ink); font-size: 1rem; }
.calc2-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: center;
}
.calc2-total { font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.calc2-big { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.calc2-big b { display: block; font-size: 3rem; font-weight: 800; line-height: 1.1; color: var(--accent); }
.calc2-sub { margin: .2rem 0 1.1rem; color: var(--ink-soft); }
.calc2-sub b { color: var(--ink); font-size: 1.2rem; }
.calc2-cost { margin-bottom: 1.1rem; padding-top: 1rem; border-top: 1px solid #e3e8e5; }
.calc2-cost > span { display: block; font-size: .85rem; color: var(--ink-soft); }
.calc2-cost b { font-size: 1.9rem; font-weight: 800; line-height: 1.2; color: var(--cta); }
.calc2-result button { width: 100%; margin: auto 0 0; }
@media (max-width: 991px) {
  .calc2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
  .calc2-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .85rem; }
  .calc2-name,
  .calc2-out { grid-column: 1 / -1; }
  .calc2-out { grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* ---- Calculator: price per kg for the order size ---- */
.calc2-rate { margin-bottom: .9rem; }
.calc2-rate > span { display: block; font-size: .85rem; color: var(--ink-soft); }
.calc2-rate b { font-size: 1.3rem; font-weight: 700; }

/* ================= Gallery: photo grid and lightbox ================= */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
  padding: 0 1rem;
  list-style: none;
}
.gl-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: .9rem;
  background: #1c2b23;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.gl-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-item:hover img { filter: brightness(1.1); }
.gl-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.6rem .75rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  color: #fff;
  font-size: .85rem;
  line-height: 1.3;
  pointer-events: none;
}
.gl-zoom {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .95rem;
  pointer-events: none;
}
@media (max-width: 991px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0 .5rem; }
  .gl-cap { padding-top: 1.2rem; font-size: .75rem; }
}

.lightbox {
  position: fixed;
  z-index: 1080;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4rem;
  background: rgba(8, 14, 11, .93);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 11rem); border-radius: .6rem; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox figcaption { margin-top: .8rem; color: #fff; line-height: 1.4; }
.lightbox figcaption b { display: block; font-size: 1.1rem; }
.lightbox figcaption span { opacity: .8; font-size: .95rem; }
.lightbox button.lb-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.lightbox button.lb-btn:hover,
.lightbox button.lb-btn:active { background: rgba(255, 255, 255, .28); box-shadow: none; }
.lightbox button.lb-close { top: .8rem; right: .8rem; }
.lightbox button.lb-prev,
.lightbox button.lb-prev:hover { top: 50%; left: .8rem; transform: translateY(-50%); }
.lightbox button.lb-next,
.lightbox button.lb-next:hover { top: 50%; right: .8rem; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }
@media (max-width: 575px) {
  .lightbox { padding: 3.5rem .5rem 1rem; }
  .lightbox button.lb-prev,
  .lightbox button.lb-next,
  .lightbox button.lb-prev:hover,
  .lightbox button.lb-next:hover { top: auto; bottom: .8rem; transform: none; }
  .lightbox button.lb-prev { left: calc(50% - 3.6rem); }
  .lightbox button.lb-next { right: calc(50% - 3.6rem); }
  .lightbox img { max-height: calc(100vh - 14rem); }
}

/* ================= Reviews: one card per customer ================= */
.rv-grid {
  columns: 2 22rem;
  column-gap: 1rem;
  margin: 1rem 0 1.25rem;
  padding: 0 1rem;
  list-style: none;
}
.rv-card {
  position: relative;
  display: flex;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  break-inside: avoid;
}
.rv-card::after {
  content: "\201C";
  position: absolute;
  top: .1rem;
  right: .9rem;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  opacity: .16;
}
.rv-grid .rv-avatar {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}
.rv-grid .rv-card h3 { margin: 0 1.5rem .3rem 0; color: var(--ink); font-size: 1.05rem; font-weight: 700; text-shadow: none; }
.rv-grid .rv-card p { margin: 0; color: var(--ink-soft); font-size: .95rem; font-style: normal; line-height: 1.5; text-shadow: none; }
@media (max-width: 575px) {
  .rv-grid { padding: 0 .5rem; }
  .rv-card { gap: .75rem; padding: .9rem; }
  .rv-grid .rv-avatar { width: 3.2rem; height: 3.2rem; }
}

/* ================= Phones: a shorter top of the page and a sticky call bar ================= */
.call-bar { display: none; }
@media (max-width: 767.98px) {
  /* Promo: the phone numbers are in the strip just below, so the strip of text can be short. */
  .alert.alert-dismissible { padding: .35rem 2.4rem .35rem .75rem; }
  .alert-dismissible p { font-size: .8rem; line-height: 1.3; }
  .alert-dismissible .close { padding: .2rem .7rem; font-size: 1.5rem; }
  .promo-phones,
  .promo-br { display: none; }

  /* Switcher and language in one row. */
  .topbar .container { gap: .5rem; padding: .25rem .75rem; }
  .topbar .bz-switch { flex-wrap: nowrap; gap: .15rem; }
  .topbar .bz-switch a { padding: .15rem .4rem; font-size: .72rem; white-space: nowrap; }
  .topbar .bz-switch .fa,
  .lang-switch .fa { display: none; }
  .lang-switch select { padding: .1rem .2rem; font-size: .72rem; }

  .phone-strip .container { padding: .3rem .75rem; gap: .05rem 1rem; }
  .phone-strip a { font-size: .9rem; }

  /* The call button in the header moves to the bottom bar. */
  .call-btn { display: none; }
  .site-header .navbar-toggler { margin-left: auto; }

  .call-bar {
    position: fixed;
    z-index: 1040;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    gap: .6rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .16);
  }
  .call-bar .cb-btn:not(.close) {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    height: 2.9rem;
    margin: 0;
    padding: 0 .5rem;
    border-radius: .7rem;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .call-bar button.cb-btn:not(.close) { flex-grow: 1.45; }
  .call-bar a.cb-btn { background: var(--accent); color: #fff; text-decoration: none; }
  .call-bar a.cb-btn:hover,
  .call-bar a.cb-btn:active { background: var(--accent-dark); color: #fff; }
  .call-bar .fa { font-size: 1.15rem; }
  body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)); }
  body.typing .call-bar { display: none; }
}

/* ================= Production: a timeline of steps ================= */
.pr-steps { margin: 1.5rem 0 1rem; padding: 0; list-style: none; }
.pr-step {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.1rem;
  padding-bottom: 1.4rem;
}
.pr-step::before {
  content: "";
  position: absolute;
  top: 3.4rem;
  bottom: -.2rem;
  left: 1.6rem;
  width: 3px;
  margin-left: -1.5px;
  background: var(--accent-tint);
}
.pr-step:last-child { padding-bottom: 0; }
.pr-step:last-child::before { display: none; }
.pr-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-tint);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.pr-card {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 1.1rem 1.5rem;
  align-items: center;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  background: var(--accent-tint);
}
.pr-card .pr-img { display: block; width: 100%; height: auto; border-radius: .7rem; background: #fff; }
.pr-text h3 { margin: 0 0 .5rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; text-align: left; }
.pr-text p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: 1rem; text-align: left; }
.pr-text p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .pr-step { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 .7rem; }
  .pr-num { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; box-shadow: 0 0 0 4px var(--accent-tint); }
  .pr-step::before { top: 2.6rem; left: 1.2rem; }
  .pr-card { grid-template-columns: minmax(0, 1fr); padding: .8rem; }
  .pr-card .pr-img { max-width: 20rem; margin: 0 auto; }
}

/* ================= Documents: cards that open the full scan ================= */
#cert-head { margin: 2.2rem 0 1rem; text-align: center; }
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto 1.5rem;
  padding: 0;
  list-style: none;
}
.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #dfe5e2;
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
}
.doc-card:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.doc-thumb { display: block; aspect-ratio: 3 / 4; background: #f3f5f4; }
.doc-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.doc-title { padding: .65rem .6rem .75rem; font-size: .95rem; font-weight: 700; line-height: 1.25; text-align: center; }
.doc-zoom {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .95rem;
}
@media (max-width: 575px) {
  .doc-grid { gap: .5rem; }
  .doc-title { padding: .5rem .3rem .6rem; font-size: .75rem; }
  .doc-zoom { top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem; font-size: .75rem; }
}

/* The old CSS styles every span, img, h3 and p inside #prod-block (big floating numbers, justified text,
   shrinking images). These rules, with the same id, win back the timeline and the document cards. */
#prod-block .pr-num,
#prod-block .doc-card span {
  float: none;
  margin: 0;
  padding: 0;
  text-shadow: none;
}
#prod-block .pr-num { display: flex; font-size: 1.5rem; font-weight: 800; line-height: 1; }
#prod-block .pr-card .pr-img { width: 100%; margin: 0; }
#prod-block .pr-text h3 { margin: 0 0 .5rem; font-size: 1.25rem; text-shadow: none; }
#prod-block .pr-text p { margin: 0 0 .6rem; padding: 0; text-align: left; }
#prod-block .pr-text p:last-child { margin-bottom: 0; }
#prod-block .doc-card span { display: block; font-size: inherit; font-weight: inherit; line-height: inherit; }
#prod-block .doc-card .doc-title { padding: .65rem .6rem .75rem; font-size: .95rem; font-weight: 700; line-height: 1.25; }
#prod-block .doc-thumb img { width: 100%; margin: 0; }
@media (max-width: 767px) {
  #prod-block .pr-num { font-size: 1.15rem; }
  #prod-block .pr-card .pr-img { max-width: 20rem; margin: 0 auto; }
}
@media (max-width: 575px) {
  #prod-block .doc-card .doc-title { padding: .5rem .3rem .6rem; font-size: .75rem; }
}

/* ================= Phones and tablets: the house diagram becomes three cards ================= */
.know-more.container .help-img { display: none; }
@media (max-width: 991px) {
  /* The labelled diagram only works on a wide screen; the cards below carry the same photos and text. */
  body.theme-eco .main-house { display: none; }

  .know-more.container > .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    padding: 0 .75rem;
  }
  .know-more.container > .row > h2.col-sm-12 {
    display: block !important;
    grid-column: 1 / -1;
    max-width: none;
    margin: 1.2rem 0 .2rem;
    padding: 0 .5rem;
    font-size: 1.6rem;
    text-align: center;
  }
  .know-more.container article {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0 0 1rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--shadow-sm);
    text-align: left;
  }
  .know-more.container article .help-img {
    display: block !important;
    order: -1;
    width: 100%;
    max-height: 13rem;
    margin: 0;
    padding: .9rem 1rem;
    background: var(--accent-tint);
    object-fit: contain;
    filter: none;
  }
  .know-more.container article h6 {
    margin: 0;
    padding: .9rem 1.1rem .3rem;
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
    text-shadow: none;
  }
  .know-more.container article p {
    margin: 0;
    padding: 0 1.1rem;
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.5;
    text-align: left;
  }
}

/* The diagram caption was an h1 and became an h2; the old `.main-house h2` rules (a top margin) must not
   push it down, and it sits above the floating photos instead of under them. */
@media (min-width: 993px) {
  .main-house h2.sh { margin-top: 0; z-index: 2; }
}

/* On screens 993-1200px wide the diagram caption is tilted, and the old CSS snapped it straight when the
   pointer touched it, so it jumped. It now stays where it is, like the other content (see the hover note above). */
@media (min-width: 993px) and (max-width: 1200px) {
  .main-house h1:hover,
  .main-house h2.sh:hover { transform: translate(-0.5rem, 4rem) rotateZ(-32deg); }
}

/* ---- City pages: the "local" section (templates/sections/local.php) ---- */
.block-light.local section.container.wool { padding: 2.75rem 1.25rem 1.5rem; }
@media (min-width: 768px) { .block-light.local section.container.wool { padding: 3rem 2.5rem 2rem; } }
.local-intro { max-width: 46rem; margin: 0 auto 2.25rem; text-align: center; font-size: 1.05rem; color: var(--ink-soft); }
.local-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 768px) { .local-layout { grid-template-columns: 1.35fr 1fr; gap: 2.75rem; } }
.local-facts { display: flex; flex-direction: column; gap: 1.75rem; }
.local-facts article { padding: .2rem 0 .2rem 1.25rem; border-left: 4px solid var(--accent); }
.local-facts h3 { margin: 0 0 .35rem; font-size: 1.15rem; color: var(--accent-dark); }
.local-facts p { margin: 0; line-height: 1.55; color: var(--ink); }
.local-panel { padding: 1.75rem; border-radius: 1rem; background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.local-panel h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: #fff; }
.local-panel p { margin: 0 0 1rem; line-height: 1.5; color: #fff; }
.local-panel ol { margin: 0 0 .5rem; padding: 0; list-style: none; counter-reset: step; }
.local-panel li { position: relative; margin-bottom: .75rem; padding-left: 2.4rem; line-height: 1.45; counter-increment: step; }
.local-panel li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; color: var(--accent-dark); font-weight: 700; line-height: 1.75rem; text-align: center; }
.local-panel button { margin: 1.25rem 0 0; width: 100%; }
.local-towns-title { margin: 2.5rem 0 1rem; font-size: 1.1rem; text-align: center; color: var(--accent-dark); }
.local-towns { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.local-towns li { padding: .3rem .9rem; border-radius: 2rem; background: #eef4f0; color: var(--ink); }
.local-towns .local-more { background: none; color: var(--ink-soft); }

/* ---- Contacts: social icons as round buttons with room between them and a finger-sized target ---- */
.social { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .25rem; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 1;
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.social-link:hover, .social-link:focus { background: var(--accent-dark); color: #fff; text-decoration: none; }
.social-link:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }

/* ---- Links inside running text: the colour of the text around them, underlined (no browser blue, and no
   theme colour either). Listed by context on purpose, so phone numbers, e-mail and buttons keep their own look. ---- */
.pr-text a,
.local-intro a,
.local-facts a,
.bf a,
.know-more article p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pr-text a:hover,
.local-intro a:hover,
.local-facts a:hover,
.bf a:hover,
.know-more article p a:hover { color: inherit; text-decoration-thickness: 2px; }

/* ---- Footer: links to the service and city pages ---- */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.footer-links a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-size: .95rem; }
.footer-links a:hover { color: #fff; text-decoration: none; }
/* The business pages have a light footer with dark text (like its menu); the private ones a dark footer with white text. */
body.theme-biz .footer-links a,
body.theme-biz .footer-links a:hover { color: #343434; }