/* ============================================================
   Craft Boys — site header + footer (Figma design).
   Markup: templates/partials/header.php / footer.php.
   Tokens live in craftboys.css (:root --cb-*); shared primitives
   (.cb-container, .cb-btn, .cb-eyebrow) in sections/_base.css.
   ============================================================ */

/* ── Header (sticky on every page) ─────────────────────────── */
.cb-header {
  width: 100%;
  z-index: 120;
  transition: background .25s ease, box-shadow .25s ease;
}
/* Homepage: the bar is fully TRANSPARENT and overlays the hero so it reads as
   one piece. It sits at the very top and simply scrolls away with the page —
   the compact white .cb-ministicky bar (below) takes over on scroll-up. */
.cb-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
/* Inner pages (light backgrounds): solid dark bar in normal flow; also scrolls
   away with the page (no longer pinned) so the compact bar owns the sticky UX. */
.cb-header--solid {
  position: relative;
  background: var(--cb-dark);
}

.cb-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding-block: 18px;
}
.cb-header__logo { flex: 0 0 auto; display: inline-flex; }
.cb-header__logo img { width: 90px; height: auto; display: block; }

/* Audio pill playing state: ▶ ↔ ⏸ icon swap */
.cb-header__audio .cb-header__audio-pause { display: none; }
.cb-header__audio.is-playing .cb-header__audio-play { display: none; }
.cb-header__audio.is-playing .cb-header__audio-pause { display: block; }

/* Both header rows share ONE right-aligned max-content column, so the audio
   pill (row 1) starts exactly where the yellow rule and "Services" (row 2) do. */
.cb-header__main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(auto, max-content);
  justify-content: end;
}

/* Row 1: audio pill · phone · outline CTA. Per the mock the whole row sits in
   the RIGHT HALF of the screen (audio pill starts near the page center) and
   the yellow rule runs from the center of the viewport to its RIGHT EDGE. */
.cb-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 16px;
  width: 100%;
}
@media (max-width: 1024px) {
  .cb-header__top { width: 100%; margin-left: 0; }
}
.cb-header__audio {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
}
.cb-header__audio-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cb-yellow);
  color: var(--cb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .18s ease, transform .18s ease;
}
.cb-header__audio-icon svg { margin-left: 2px; }
.cb-header__audio:hover .cb-header__audio-icon {
  background: var(--cb-yellow-2);
  transform: scale(1.06);
}

.cb-header__top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.6vw, 40px);
}
.cb-header__phone {
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .18s ease;
}
.cb-header__phone:hover { color: var(--cb-yellow); }
.cb-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  background: #23343D; /* primary button surface per design */
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.cb-header__cta:hover {
  border-color: var(--cb-yellow);
  color: var(--cb-yellow);
}
/* Compact copy of the CTA that sits next to the burger on mobile only. */
.cb-header__cta--mob { display: none; }

/* Row 2: nav — right-aligned cluster. The yellow rule is the TOP BORDER of
   exactly this cluster: it starts above "Services" (first item) and ends at
   the container's right edge, under the "Get in touch" button. */
.cb-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 2.4vw, 38px);
  width: max-content;
  max-width: 100%;
  border-top: 1.5px solid var(--cb-yellow);
  padding-top: 15px;
}
.cb-header__navitem { position: relative; }
.cb-header__navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  padding: 4px 0;
  transition: color .18s ease;
}
.cb-header__navlink:hover { color: var(--cb-yellow); }
.cb-header__caret { opacity: .65; transition: transform .18s ease; }
.cb-header__navitem:hover .cb-header__caret,
.cb-header__navitem:focus-within .cb-header__caret { transform: rotate(180deg); }

/* Dropdown (dark panel, CSS hover / focus-within) */
.cb-header__dd {
  position: absolute;
  top: 100%;
  left: -18px;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.cb-header__navitem:hover .cb-header__dd,
.cb-header__navitem:focus-within .cb-header__dd {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cb-header__dd-panel {
  min-width: 264px;
  background: var(--cb-panel, #23343C);
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .65);
  padding: 10px;
}
.cb-header__dd-panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--cb-radius);
  color: rgba(255, 255, 255, .85);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.cb-header__dd-panel a:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--cb-yellow);
}

/* Burger (mobile only) */
.cb-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  background: transparent;
  color: var(--cb-white);
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.cb-header__burger:hover { border-color: var(--cb-yellow); color: var(--cb-yellow); }
.cb-header__burger span {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.cb-header__burger span::before,
.cb-header__burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.cb-header__burger span::before { top: -6px; }
.cb-header__burger span::after  { top: 6px; }

/* Focus visibility on the dark bar */
.cb-header a:focus-visible,
.cb-header button:focus-visible,
.cb-drawer a:focus-visible,
.cb-drawer button:focus-visible,
.cb-footer a:focus-visible {
  outline: 2px solid var(--cb-yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Compact sticky bar (scroll-up reveal) — WHITE, single row ─────────────
   Fixed overlay parked off-screen; JS toggles .is-visible on scroll-up. It is
   animated purely with transform/opacity, so it never reflows the page —
   nothing jumps. Desktop: wordmark · nav · phone + CTA. */
.cb-ministicky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 130; /* above the primary header (120), below the drawer/chat */
  background: var(--cb-white);
  box-shadow: 0 6px 24px -14px rgba(20, 20, 20, .45);
  border-bottom: 1px solid rgba(20, 20, 20, .08);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), opacity .3s ease, visibility .3s;
  will-change: transform;
}
.cb-ministicky.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cb-ministicky__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  min-height: 64px;
  padding-block: 10px;
}
.cb-ministicky__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.cb-ministicky__logo img { width: auto; }
/* display lives on the modifier classes (not on `img`) so the desktop/mobile
   swap isn't out-specified by a `.cb-ministicky__logo img` rule. */
.cb-ministicky__logo--wide  { display: block; height: 30px; } /* desktop wordmark */
.cb-ministicky__logo--stack { display: none;  height: 40px; } /* mobile stacked  */

/* Nav — mirrors the header structure, themed for the white bar */
.cb-ministicky__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  margin-left: auto; /* push nav + right cluster to the right edge */
}
.cb-ministicky__navitem { position: relative; }
.cb-ministicky__navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cb-ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  padding: 6px 0;
  transition: color .18s ease;
}
.cb-ministicky__navlink:hover { color: var(--cb-yellow-2); }
.cb-ministicky__caret { opacity: .6; transition: transform .18s ease; }
.cb-ministicky__navitem:hover .cb-ministicky__caret,
.cb-ministicky__navitem:focus-within .cb-ministicky__caret { transform: rotate(180deg); }

/* Dropdown — light panel */
.cb-ministicky__dd {
  position: absolute;
  top: 100%;
  left: -14px;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 5;
}
.cb-ministicky__navitem:hover .cb-ministicky__dd,
.cb-ministicky__navitem:focus-within .cb-ministicky__dd {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.cb-ministicky__dd-panel {
  min-width: 248px;
  background: var(--cb-white);
  border: 1px solid rgba(20, 20, 20, .1);
  border-radius: var(--cb-radius);
  box-shadow: 0 22px 44px -20px rgba(20, 20, 20, .4);
  padding: 8px;
}
.cb-ministicky__dd-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--cb-radius);
  color: #494847;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.cb-ministicky__dd-panel a:hover { background: rgba(20, 20, 20, .05); color: var(--cb-yellow-2); }

/* Right cluster: phone + CTA */
.cb-ministicky__right {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex: 0 0 auto;
}
.cb-ministicky__phone {
  color: var(--cb-ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease;
}
.cb-ministicky__phone:hover { color: var(--cb-yellow-2); }
.cb-ministicky__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 4px;
  background: #23343D;
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.cb-ministicky__cta:hover { background: var(--cb-yellow); color: var(--cb-ink); }

/* Burger on the white bar → dark icon (inherits .cb-header__burger sizing) */
.cb-ministicky__burger { color: var(--cb-ink); }

/* Focus visibility on the light bar */
.cb-ministicky a:focus-visible,
.cb-ministicky button:focus-visible {
  outline: 2px solid var(--cb-yellow-2);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Respect reduced-motion: no slide, just show/hide */
@media (prefers-reduced-motion: reduce) {
  .cb-ministicky { transition: opacity .2s ease, visibility .2s; transform: none; }
  .cb-ministicky.is-visible { transform: none; }
}

/* ── Mobile drawer — WHITE panel per the mobile design:
      logo + ✕, dark 18px links, dark audio pill, yellow CTA,
      "Or give us a call" + phone. ─────────────────────────────── */
.cb-drawer {
  position: fixed;
  inset: 0;
  z-index: 10500; /* above the chat launcher (9999) so the menu owns the screen */
  background: rgba(13, 17, 20, .65);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.cb-drawer[aria-hidden="false"] { opacity: 1; visibility: visible; }
.cb-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  /* Per the design the panel never reaches the left edge — a slice of the
     dimmed page stays visible. */
  width: min(380px, calc(100vw - 44px));
  background: var(--cb-white);
  padding: 18px 24px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s ease;
}
.cb-drawer[aria-hidden="false"] .cb-drawer__panel { transform: none; }
.cb-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cb-drawer__logo { display: inline-flex; }
.cb-drawer__logo img { width: 150px; height: auto; display: block; }
.cb-drawer__close {
  width: 44px;
  height: 44px;
  margin: -4px -12px 0 0;
  border: 0;
  background: none;
  color: var(--cb-ink);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease;
}
.cb-drawer__close:hover { color: var(--cb-yellow-2); }
.cb-drawer__nav {
  display: flex;
  flex-direction: column;
}
/* Row wrapper for items with a submenu: link + caret toggle button. */
.cb-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cb-drawer__row .cb-drawer__link { flex: 1 1 auto; }
.cb-drawer__caret {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--cb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cb-drawer__caret svg { transition: transform .18s ease; }
.cb-drawer__caret.is-open svg { transform: rotate(180deg); }
.cb-drawer__link {
  color: var(--cb-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  padding: 11px 0;
  transition: color .18s ease;
}
.cb-drawer__link:hover { color: var(--cb-yellow-2); }
.cb-drawer__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -4px 0 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(20, 20, 20, .12);
}
/* display:flex above would defeat the UA [hidden] rule — restore it. */
.cb-drawer__sub[hidden] { display: none; }
.cb-drawer__sub a {
  color: #5A6A72;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 0;
  transition: color .18s ease;
}
.cb-drawer__sub a:hover { color: var(--cb-yellow-2); }
/* Dark audio pill (same action as the header pill — see header.php JS). */
.cb-drawer__audio {
  margin-top: 22px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--cb-radius);
  background: var(--cb-panel);
  color: var(--cb-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease;
}
.cb-drawer__audio:hover { background: var(--cb-dark); }
.cb-drawer__audio-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cb-yellow);
  color: var(--cb-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cb-drawer__audio-icon svg { margin-left: 2px; }
.cb-drawer__cta { width: 100%; margin-top: 12px; }
.cb-drawer__call {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cb-drawer__call-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5A6A72;
}
.cb-drawer__phone {
  align-self: flex-start;
  color: var(--cb-ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  transition: color .18s ease;
}
.cb-drawer__phone:hover { color: var(--cb-yellow-2); }

/* ── Footer (mega-footer) ───────────────────────────────────── */
.cb-footer {
  background: #1C272E; /* same darker band as the guide section (design) */
  font-family: var(--font-body);
}
.cb-footer__top {
  border-top: 1px solid var(--cb-line);
  padding-block: clamp(48px, 5vw, 76px) clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.4fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

/* Brand block */
.cb-footer__brand { max-width: 340px; }
.cb-footer__logo { display: inline-flex; }
.cb-footer__logo img { width: 130px; height: auto; display: block; }
.cb-footer__about {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
  line-height: 1.6;
}
.cb-footer__contact { margin-top: 22px; }
.cb-footer__phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .015em;
  color: var(--cb-white);
  transition: color .18s ease;
}
.cb-footer__phone:hover { color: var(--cb-yellow); }
.cb-footer__email {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: color .18s ease;
}
.cb-footer__email:hover { color: var(--cb-yellow); }
.cb-footer__social { display: flex; gap: 12px; margin-top: 22px; }
.cb-footer__social a {
  width: 42px;
  height: 42px;
  border: 1px solid var(--cb-line);
  border-radius: var(--cb-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-white);
  transition: border-color .18s ease, color .18s ease;
}
.cb-footer__social a:hover { border-color: var(--cb-yellow); color: var(--cb-yellow); }

/* Link columns */
.cb-footer__col { min-width: 0; }
.cb-footer__col-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cb-white);
  margin: 4px 0 16px;
}
.cb-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.cb-footer__links a {
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .18s ease;
}
.cb-footer__links a:hover { color: var(--cb-yellow); }
.cb-footer__links--areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 20px;
}
.cb-footer__all {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-yellow);
  text-decoration: none;
}
.cb-footer__all:hover { color: var(--cb-yellow-2); }

/* Bottom bar */
.cb-footer__bottom {
  border-top: 1px solid var(--cb-line);
  padding-block: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.cb-footer__legalinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  line-height: 1.5;
}
/* Address rendered as a Google Maps link — keep the muted look, hint on hover */
a.cb-footer__address { color: inherit; text-decoration: none; transition: color .18s ease; }
a.cb-footer__address:hover { color: var(--cb-yellow); text-decoration: underline; }
.cb-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
  line-height: 1.5;
}
.cb-footer__legal-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.cb-footer__legal a { color: inherit; transition: color .18s ease; }
.cb-footer__legal a:hover { color: var(--cb-yellow); }
.cb-footer__sep { opacity: .35; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Two-row solid bar per the mobile design:
       [logo · compact CTA · burger]
       ───────── yellow rule (full width) ─────────
       [audio pill · phone]
     The bar is NOT transparent on mobile — the hero starts below it. It stays
     in normal flow and scrolls away; the compact white bar handles scroll-up. */
  .cb-header--overlay { position: relative; background: var(--cb-dark); }
  .cb-header__inner { flex-wrap: wrap; gap: 0 12px; padding-block: 12px 0; }
  .cb-header__logo img { width: 64px; }
  .cb-header__cta--mob {
    display: inline-flex;
    margin-left: auto;
    padding: 11px 16px;
    font-size: 15px;
  }
  .cb-header__burger { display: inline-flex; border: 0; width: 40px; height: 40px; }
  .cb-header__main {
    display: block;
    order: 3;
    flex: 1 1 100%;
    min-width: 100%;
    margin-top: 12px;
    border-top: 1.5px solid var(--cb-yellow);
  }
  .cb-header__nav { display: none; }
  .cb-header__top { padding: 12px 0 14px; gap: 16px; }
  .cb-header__top .cb-header__cta { display: none; }
  .cb-header__top-right { gap: 0; }
  .cb-header__audio { font-size: 15px; gap: 10px; }
  .cb-header__audio-icon { width: 36px; height: 36px; }
  .cb-header__audio-icon svg { width: 13px; height: 13px; }
  .cb-header__phone { font-size: 16px; }

  /* Compact sticky bar on mobile: [stacked logo · Get in touch · burger], one white row.
     The CTA cluster is pushed to the right (before the burger); the phone is hidden
     so only the button shows, mirroring the top bar's logo · CTA · burger layout. */
  .cb-ministicky__inner { min-height: 56px; gap: 10px; }
  .cb-ministicky__nav { display: none; }
  .cb-ministicky__logo--wide  { display: none; }
  .cb-ministicky__logo--stack { display: block; }
  .cb-ministicky__right { display: flex; margin-left: auto; }
  .cb-ministicky__phone { display: none; }
  .cb-ministicky__cta { padding: 10px 15px; font-size: 14px; } /* compact to fit beside logo + burger */
  .cb-ministicky__burger { display: inline-flex; border: 0; width: 40px; height: 40px; }

  /* Footer: brand full-width on top, then the link columns in 2 rows. */
  .cb-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 32px;
  }
  .cb-footer__brand { grid-column: 1 / -1; max-width: none; }
  .cb-footer__col--areas { grid-column: 1 / -1; }
  .cb-footer__links--areas { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Footer: single column stack; link columns full width, areas stays 2-col. */
  .cb-footer__top {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 44px 32px;
  }
  .cb-footer__brand { max-width: none; }
  .cb-footer__logo img { width: 116px; }
  .cb-footer__col--areas { grid-column: auto; }
  .cb-footer__links--areas { grid-template-columns: 1fr 1fr; }
  .cb-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-block: 22px 34px;
  }
}