/* Layout primitives — ROST Premium (mobile-first, 12-column grid on desktop) */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: calc(var(--space-section) * 0.55);
}

/* COMPANY-PAGE-POLISH-2 (2026-08-02): +~15% vertical padding for the
   "Підтверджені результати" dark panel specifically, per that round's
   brief -- 0.55 -> ~0.6325. Combined selector (0,2,0 specificity) so it
   reliably overrides the shared .section--tight rule above regardless
   of source order, without changing that shared rule -- every other
   .section--tight section on the site (including the homepage) is
   untouched. `.section--company-results` is emitted only by
   pages/company.py.

   COMPANY-PAGE-CLOSE (2026-08-02): bottom padding trimmed back down
   (0.6325 -> 0.5, a touch under the shared 0.55 default) now that the
   new "Принципи роботи" section sits directly below -- keeps the dark
   panel visually rich (top padding untouched) while removing the
   excess gap before the next section, per this round's "уменьшить
   лишний нижний padding" note. */
.section--tight.section--company-results {
  padding-top: calc(var(--space-section) * 0.6325);
  padding-bottom: calc(var(--space-section) * 0.5);
}

/* FINAL MICRO-POLISH (2026-08-02): the hero's own bottom padding was
   already cut to near-zero (0.375rem, see .hero-split--company below)
   in an earlier round, so the remaining "too much air before the
   stats strip" was actually coming from this section's own top
   padding (the shared .section--tight default, 0.55). Trimmed to 0.32
   here -- roughly a 20-30px cut at typical desktop widths -- top only;
   bottom stays at the shared 0.55 default so the stats-to-advantages
   gap is unaffected. Combined selector, same technique as
   `.section--company-results` above; every other .section--tight
   section on the site is untouched. */
.section--tight.section--company-stats {
  padding-top: calc(var(--space-section) * 0.32);
  padding-bottom: calc(var(--space-section) * 0.55);
}

/* FINAL MICRO-POLISH (2026-08-02): the documents section's bottom
   padding (previously the shared 0.55 default) left too much empty
   space after the CTA + disclaimer line before the dark final CTA
   band. Cut ~35% (within the requested 30-40% range) -- bottom only;
   top stays at 0.55 so the header/intro spacing above the tile grid is
   unaffected. Card padding (.company-info-item) is untouched, so
   readability inside the tiles doesn't change. */
.section--tight.section--company-documents {
  padding-top: calc(var(--space-section) * 0.55);
  padding-bottom: calc(var(--space-section) * 0.36);
}

/* CATALOG-POLISH (2026-08-02): the catalog grid section (full .section
   padding, not .section--tight) left too much empty space before the
   new closing CTA below it. Bottom-only cut; top padding (the gap
   below the hero/toolbar) is untouched. Scoped to
   pages/products_hub.py's own section only via the combined selector,
   so no other plain .section anywhere else on the site is affected. */
.section.section--catalog-grid {
  padding-bottom: calc(var(--space-section) * 0.35);
}

.section--dark {
  background: var(--surface-inverted);
  color: var(--warm-white-50);
}

/* Header overlap on anchor jumps (e.g. #postiyni-kliyenty) is handled
   by scroll-margin-top on [id] elements further down — tied to the
   real measured --mobile-header-height. An earlier pass also inflated
   every .section/.section--tight's own top padding site-wide to guard
   against a sticky header momentarily covering a heading during
   ordinary scrolling; that's expected sticky-header behavior, not a
   bug, and the blanket padding bump was the single biggest source of
   the "big empty gap before the next section" complaints (most
   visibly right after the hero, before the stat counters) — removed. */

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--warm-white-50);
}

.section--dark .eyebrow,
.section--dark small {
  color: var(--metal-300);
}

/* Card-collection grid: one column by default, then as many ~280px+
   columns as fit. This is not the literal 12-column layout grid (see
   .split for the asymmetric 7/5 layout that uses it) — card counts vary
   per section (5 industries, 7 products, 2 buttons...) so a fixed track
   count would either starve or orphan cards; auto-fit adapts cleanly. */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 560px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Industry-solutions grid: flexbox instead of a fixed-column CSS grid.
   Neither the full 10-card hub page (10 doesn't divide evenly into 3 or
   4 columns) nor the homepage's curated 6-card set (6 doesn't divide
   evenly into 4) always fills its last row — a fixed-column grid leaves
   that row's cards stuck at the left edge with dead space on the right.
   flex-wrap + justify-content:center centers whatever cards are left
   over on the last line automatically, for any card count, with no
   nth-child/margin overrides tied to a specific card number. flex-basis
   subtracts its share of `gap` so N cards per row still fit exactly
   N-across without wrapping early.
   Breakpoints sit ~15px under their nominal target (768, 1024, 1280)
   on purpose: a real OS browser window resized to exactly, say,
   1280px still only exposes ~1265px to media queries once the vertical
   scrollbar is reserved (window.innerWidth includes the scrollbar, but
   the viewport width media queries evaluate against —
   document.documentElement.clientWidth — does not). Without the
   margin, testing a "1280px" window would silently fall one tier short
   of the column count actually intended for that width. 4 columns is
   the final tier — see the comment below on why this deliberately
   doesn't step up to 5 at wider viewports. */
.grid--industries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid--industries > * {
  flex: 0 1 100%;
}

@media (min-width: 753px) {
  .grid--industries > * {
    flex-basis: calc(50% - var(--grid-gap) / 2);
  }
}

@media (min-width: 1009px) {
  .grid--industries > * {
    flex-basis: calc(33.333% - var(--grid-gap) * 2 / 3);
  }
}

/* Caps at 4 columns — deliberately does NOT step up to 5 at 1665px+.
   Compared side by side at 1920px (container maxes out at
   --content-max regardless, so this is really "4 vs 5 across the same
   ~1344px of usable width"): 5 columns squeezes each card to ~250px,
   which is close enough to the card's native photo ratio to crop
   almost nothing, but leaves only ~185px of text column after the
   card's own padding — industry names like "Металопрокат та
   профільні системи" wrap 3 lines and the grid reads as a dense
   product catalog. 4 columns gives ~318px cards (~254px of text
   column) — titles wrap at most 2 lines, tag chips stay on one row,
   and the extra card width plus wider gutters reads closer to how
   enterprise/B2B sites present a handful of solution categories than
   how a retail catalog packs SKUs. The ~4% larger photo crop this
   costs (wider image box relative to the source's native ratio) isn't
   visible at normal viewing distance. 4 columns wins on readability,
   perceived premium-ness, and free space; 5 only wins on maximizing
   card count per row, which isn't the goal here. */
@media (min-width: 1265px) {
  .grid--industries > * {
    flex-basis: calc(25% - var(--grid-gap) * 3 / 4);
  }
}

/* Asymmetric split: image/content offset from center per design system */
.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 1100px) {
  .split {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-xl);
  }
  .split--reverse {
    grid-template-columns: 5fr 7fr;
  }
  .split--reverse > :first-child {
    order: 2;
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Hero split: text column + visual slot, ~55/45 on desktop.
   Mobile stays single-column, and DOM order (text, then visual) already
   puts copy/CTA before the visual — no reordering needed. */
.hero-split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1100px) {
  .hero-split {
    grid-template-columns: 11fr 9fr;
    gap: var(--space-2xl);
  }

  /* CAT-HERO-1 (2026-08-01): the catalog hub's new photo showcase needs
     more room than the default 55/45 split (left 45%, right 55%,
     within this sprint's 42-48%/52-58% spec) -- scoped to
     hero_split()'s grid_class param so it doesn't affect any other
     hero_split() caller. (The "Про компанію" page got its own separate
     ratio below in COMPANY-HERO-1 -- it no longer uses the bare
     .hero-split default either.) */
  .hero-split--catalog {
    /* CAT-HERO-4 (2026-08-01): 9fr/11fr (45/55) -> 43fr/57fr, the widest
       right-column share this round's spec allows (43-46% left /
       54-57% right) -- widening the column itself, before touching
       preview sizes, is the first lever in this round's own priority
       order for freeing up room for the showcase geometry below. */
    grid-template-columns: 43fr 57fr;
    /* CAT-HERO-3-correction (2026-08-01): root cause of the "too much
       empty space above the hero" complaint -- the showcase column's
       own aspect-ratio box (11:9) is taller than the text column's
       natural content height, and the shared .hero-split rule above
       centers the shorter column (align-items: center) within that
       excess height. That centering was pushing the eyebrow/H1/lede/
       CTA down by roughly half the height difference between the two
       columns. Overriding to `start` for the catalog variant only (the
       "Про компанію" page keeps the default `center` from .hero-split
       above, unaffected) makes both columns begin at the same top
       line instead. */
    align-items: start;
  }

  /* COMPANY-PAGE-FINAL (2026-08-01): 45fr/55fr -> 38fr/62fr -- this
     sprint's brief calls for a wider photo (35-40% left / 60-65%
     right), a bigger jump than COMPANY-HERO-1's original 45/55.
     Scoped to hero_split()'s grid_class param, so this doesn't touch
     the catalog hub's own separate ratio above. */
  .hero-split--company {
    grid-template-columns: 38fr 62fr;
    /* Same fix as .hero-split--catalog above and for the same reason:
       the photo's own height is likely taller than the text column's
       natural content height (still true with the wider 3:2 photo and
       narrower text column), and the shared .hero-split rule's
       align-items: center would otherwise center the shorter text
       column within that excess height, pushing eyebrow/H1/lede/CTA
       down and leaving empty space above them. `start` makes both
       columns begin at the same top line. */
    align-items: start;
  }

  /* PRODUCTION-MERGE (2026-08-02): a third, distinct ratio for
     /vyrobnytstvo/ -- 44/56, deliberately different from both
     .hero-split--catalog (43/57) and .hero-split--company (38/62) so
     this page's hero doesn't read as a copy of either. Photo crop/
     aspect-ratio is also different (see .manufacturing-hero-photo
     below), so the two production-themed heroes (this one and the
     company page's) look visually distinct even though they reuse the
     same source photo. */
  .hero-split--manufacturing {
    grid-template-columns: 44fr 56fr;
    align-items: start;
  }
}

/* Header / primary nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(250, 248, 245, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hairline) solid transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.site-header--scrolled {
  background: rgba(250, 248, 245, 0.96);
  border-bottom-color: var(--border-hairline);
  box-shadow: var(--shadow-header);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--space-md);
}

/* Logo: icon + live text, never both an icon-baked wordmark and a
   separate duplicate text label. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.logo__icon {
  display: block;
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

.logo__text {
  line-height: 1;
}

/* Hamburger — 44x44 minimum hit target, animated two-line icon */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle__box {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}

.nav-toggle__box::before,
.nav-toggle__box::after,
.nav-toggle__box span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--graphite-950);
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.nav-toggle__box::before {
  top: 0;
}

.nav-toggle__box span {
  top: 5px;
}

.nav-toggle__box::after {
  top: 10px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box span {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box::after {
  transform: translateY(-5px) rotate(-45deg);
}

@media (min-width: 1100px) {
  .nav-toggle {
    display: none;
  }
}

.nav-scrim {
  display: none;
}

@media (max-width: 1099px) {
  .nav-scrim[data-open="true"] {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(12, 17, 24, 0.4);
    z-index: 90;
  }
}

/* Mobile panel sizes itself to its own content (capped at the viewport
   minus the header) instead of always stretching to the bottom of the
   screen — a short link list no longer leaves a large empty area below
   it. 100dvh (not 100vh) so iOS Safari's collapsing address/toolbar
   never leaves a gap or clips content. The panel scrolls internally via
   its own overflow-y if content ever exceeds the available height. */
.primary-nav {
  position: fixed;
  top: var(--mobile-header-height);
  left: 0;
  right: 0;
  bottom: auto;
  max-height: calc(100dvh - var(--mobile-header-height));
  z-index: 95;
  background: var(--surface-page);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-md) var(--content-padding)
    calc(var(--space-md) + env(safe-area-inset-bottom)) var(--content-padding);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.primary-nav[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 1100px) {
  .primary-nav {
    position: static;
    inset: auto;
    max-height: none;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: none;
    overflow: visible;
  }
}

.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 1100px) {
  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }
}

.primary-nav > .primary-nav__list > li > a,
.primary-nav__list > li > .nav-drop > details > summary > a {
  text-decoration: none;
  font-size: var(--text-md);
  display: inline-block;
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (min-width: 1100px) {
  .primary-nav > .primary-nav__list > li > a,
  .primary-nav__list > li > .nav-drop > details > summary > a {
    font-size: var(--text-sm);
    min-height: auto;
  }
}

.primary-nav a[aria-current="page"] {
  color: var(--brand-accent);
}

/* Dropdown groups — native <details>/<summary>, no JS required for the
   core open/close behavior (keyboard + click work by default). */
.nav-drop > details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  min-height: 44px;
}

.nav-drop > details > summary::-webkit-details-marker {
  display: none;
}

.nav-drop__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--graphite-700);
  border-bottom: 2px solid var(--graphite-700);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}

.nav-drop > details[open] .nav-drop__chevron {
  transform: rotate(-135deg) translateY(1px);
}

.nav-drop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-drop__list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--graphite-700);
}

@media (hover: hover) and (pointer: fine) {
  .nav-drop__list a:hover {
    color: var(--brand-accent);
  }
}

.nav-drop__panel {
  padding-left: var(--space-md);
  border-left: var(--hairline) solid var(--border-hairline);
  margin: var(--space-2xs) 0 var(--space-sm);
}

@media (min-width: 1100px) {
  .nav-drop {
    position: relative;
  }

  .nav-drop > details > summary {
    min-height: auto;
  }

  .nav-drop__panel {
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    min-width: 240px;
    background: var(--surface-card);
    border: var(--hairline) solid var(--border-hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-sm);
    border-left: none;
    margin: 0;
  }

  .nav-drop__list a {
    min-height: 40px;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-sm);
  }

  .nav-drop__list a:hover {
    background: var(--warm-white-100);
  }
}

.header-actions {
  align-items: center;
  gap: var(--space-sm);
}

.header-actions--mobile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--border-hairline);
}

.header-actions--desktop {
  display: none;
}

@media (min-width: 1100px) {
  .header-actions--mobile {
    display: none;
  }
  .header-actions--desktop {
    display: flex;
  }
}

.lang-switch {
  display: flex;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
}

@media (min-width: 1100px) {
  .lang-switch a {
    min-width: auto;
    min-height: auto;
  }
}

.lang-switch a[aria-current="true"] {
  background: var(--graphite-950);
  color: var(--warm-white-50);
}

/* Footer

   COMPANY-PAGE-POLISH-2 (2026-08-02): three small footer polish tweaks
   explicitly requested alongside the company-page work -- unlike
   everything else in this round, the footer is shared markup rendered
   by templates/layout.py for every page, so these three declarations
   are the one deliberate site-wide change in this pass (line-height,
   a lighter address, and a branded link hover). Nothing structural,
   no layout/column changes. */
.site-footer {
  background: var(--surface-inverted);
  color: var(--metal-300);
  line-height: var(--leading-relaxed);
}

.site-footer a {
  color: var(--warm-white-50);
}

@media (hover: hover) and (pointer: fine) {
  .footer-list a,
  .site-footer__legal a {
    transition: color 250ms var(--ease-standard);
  }

  .footer-list a:hover,
  .site-footer__legal a:hover {
    color: var(--brand-accent-light);
  }
}

.footer-contact-full {
  font-size: var(--text-sm);
  opacity: 0.85;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .site-footer__grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  }
}

.site-footer__brand {
  color: var(--warm-white-50);
  margin-bottom: var(--space-sm);
}

.site-footer__description {
  max-width: 34ch;
  font-size: var(--text-base);
  color: var(--metal-300);
  margin-bottom: var(--space-sm);
}

.site-footer__muted {
  opacity: 0.8;
}

/* Contact column: the default paragraph margin-bottom (24px) reads as
   loose gaps between address/phone/email/hours lines — a small explicit
   margin replaces it so rows sit tight without touching. Stays a plain
   block stack at every width by default; the 2-column grid (address
   full-width, phones/email/hours paired) is added back in the <699px
   footer block further down so >=700px is untouched. */
.footer-contact-grid p {
  margin: 0 0 var(--space-sm);
}

.footer-contact-grid p:last-child {
  margin-bottom: 0;
}

.footer-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--text-base);
}

.footer-heading {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
  color: var(--warm-white-50);
}

.footer-heading a {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .footer-heading a:hover {
    text-decoration: underline;
  }
}

/* Mobile: two stacked .site-footer__legal blocks previously each added
   the full space-xl + space-md (72px) above them — nearly a screen's
   worth of empty-looking dark space by the time both had stacked.
   Tightened to the requested 32-40px (contacts -> legal) / 20-28px
   (legal -> legal) ranges; desktop restores the original spacing below
   so the wider layout is unchanged. */
.site-footer__legal {
  border-top: var(--hairline) solid var(--border-hairline-inverted);
  margin-top: 28px;
  padding-top: 10px;
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.site-footer__legal p {
  margin: 0;
}

.site-footer__legal + .site-footer__legal {
  margin-top: 20px;
}

@media (min-width: 700px) {
  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
  }

  .site-footer__legal + .site-footer__legal {
    margin-top: var(--space-xl);
  }
}

/* Compact mobile footer — hits the requested gap ranges and turns the
   product list, "База знань" list, and contact block into 2-column
   grids, without touching the >=700px multi-column layout at all.
   Placed after every base .site-footer__*/.footer-list/.footer-contact-*
   rule above so these overrides win the cascade (equal specificity,
   later source order) instead of being silently overridden by them. */
@media (max-width: 699px) {
  .site-footer .section--tight {
    padding-block: 52px 44px;
  }

  .site-footer__brand {
    margin-bottom: 22px;
  }

  /* Gap to the next column comes from .site-footer__grid's own gap
     below (36px — inside both the "logo -> nav" 32-36px range and the
     general "between groups" 36-44px range), so no extra margin-bottom
     is needed here — it would just stack on top of that. */
  .site-footer__description {
    margin-bottom: 0;
  }

  .site-footer__grid {
    gap: 36px;
  }

  .footer-list {
    gap: 14px;
  }

  /* Product list ("Плівка поліетиленова" ... "Пеньюари поліетиленові")
     and the "База знань" list (Кейси / Часті питання) — text links
     only, the big photo product cards elsewhere on the site are
     untouched. Auto-placed in document order, so no per-item markup
     changes are needed beyond the modifier class in templates/layout.py. */
  .footer-list--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 14px;
  }

  .footer-list--2col a {
    line-height: 1.35;
  }

  .footer-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 4vw, 18px);
    row-gap: 18px;
  }

  .footer-contact-grid p {
    margin: 0;
  }

  .footer-contact-full {
    grid-column: 1 / -1;
  }

  .footer-contact-phone a {
    white-space: nowrap;
    font-size: clamp(15px, 4vw, 16px);
  }
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--text-xs);
  color: var(--graphite-700);
  padding-block: var(--space-md);
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-3xs);
  color: var(--graphite-700);
}

.breadcrumbs a {
  text-decoration: none;
}