/* Components — ROST Premium */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-accent);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: var(--hairline);
  background: currentColor;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* Premium primary CTA — restrained gradient + soft tinted shadow, not a
   glossy/neon effect. Same treatment everywhere the button appears, UA
   and EN, since the label text itself is untouched. */
.btn--primary {
  position: relative;
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-hover) 100%);
  color: var(--accent-contrast);
  border-color: var(--brand-accent-hover);
  box-shadow: var(--shadow-sm), 0 10px 20px -12px rgba(38, 89, 75, 0.45);
}

.btn--primary::after {
  content: "\2192";
  display: inline-block;
  margin-left: var(--space-2xs);
  transition: transform var(--duration-fast) var(--ease-standard);
}

/* Hover-only lift/glow — gated to real pointer devices so a tap on
   touchscreens can't leave the button "stuck" in its hover look (iOS/
   Android apply :hover on tap and only clear it on the next unrelated
   tap, with no hover-capable pointer to naturally un-hover it). */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: linear-gradient(135deg, var(--brand-accent-hover) 0%, var(--brand-accent) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), 0 14px 28px -12px rgba(38, 89, 75, 0.55);
  }

  .btn--primary:hover::after {
    transform: translateX(3px);
  }
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Keyboard focus already gets the sitewide 3px outline (base.css
   :focus-visible) — kept in sync here rather than duplicated, so a
   focused button doesn't end up with two competing rings. */

@media (prefers-reduced-motion: reduce) {
  .btn--primary,
  .btn--primary::after {
    transition: none;
  }
  .btn--primary:hover {
    transform: none;
  }
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-hairline);
  color: inherit;
}

.section--dark .btn--ghost,
.cta-band .btn--ghost {
  border-color: var(--border-hairline-inverted);
  color: var(--warm-white-50);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
  }

  /* On dark backgrounds --brand-accent text only reaches ~3:1 against
     graphite-950 — enough for large headings, not for normal button
     text. Ghost-button hover on dark (product/solution hero CTAs, the
     final CTA band) needs the lighter accent instead. */
  .section--dark .btn--ghost:hover,
  .cta-band .btn--ghost:hover {
    border-color: var(--brand-accent-light);
    color: var(--brand-accent-light);
  }
}

.btn--block {
  width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Hero */
.hero {
  position: relative;
  padding-block: calc(var(--space-section) * 0.85) var(--space-section);
  overflow: hidden;
}

.hero__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(120deg, var(--graphite-950) 0%, #1f2b28 45%, var(--graphite-950) 100%);
  background-size: 220% 220%;
  animation: hero-drift 18s var(--ease-standard) infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .hero__texture {
    animation: none;
  }
}

@keyframes hero-drift {
  0% {
    background-position: 0% 30%;
  }
  100% {
    background-position: 100% 70%;
  }
}

/* Film-layer visual: translucent poly-film sheets + engineering lines,
   shared by the hero background and the "Про компанію" panel. Pure SVG,
   themed via CSS custom properties (see film_layers_svg() in sections.py). */
.film-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero .film-visual {
  opacity: 0.85;
}

/* Hero video slot — video-ready, graceful no-op until the MP4 exists.
   Both the <video> and the SVG fallback occupy the same absolutely
   positioned box, so swapping between them causes zero layout shift. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Darkening scrim for hero__content legibility over the video/poster —
   2026-07-30 polish pass. Scoped to the full-bleed homepage-style hero
   only (:not(.hero-media--portrait)) — the "Про компанію" split-hero
   video panel is a different, unrelated visual and was not part of
   this request. Sits on .hero-media itself (not a new DOM layer) so it
   always paints on top of whichever child is visible (playing <video>,
   its poster frame under prefers-reduced-motion, or the pre-JS/error
   SVG fallback) — identical strength in every state, so there is no
   brightness jump when the video swaps in. Slightly stronger toward
   the bottom, where the lede/CTA row sits over the brightest part of
   the footage (the light film roll, lower-center). */
.hero-media:not(.hero-media--portrait)::after {
  content: "";
  position: absolute;
  inset: 0;
  /* POLISH-1 (2026-08-01): added a 4th stop at 96% that ramps up close
     to fully opaque -- rgba(20,23,26,...) is exactly --graphite-950,
     the very color .section--dark (the stats section right below) is
     painted with, so by the bottom edge of the hero the video is
     almost entirely obscured by the same color the next section
     already is. Softens the hard video-to-solid-color seam at the
     section boundary with no new element, no stripe, no height change. */
  background: linear-gradient(
    180deg,
    rgba(20, 23, 26, 0.35) 0%,
    rgba(20, 23, 26, 0.41) 45%,
    rgba(20, 23, 26, 0.5) 88%,
    rgba(20, 23, 26, 0.94) 100%
  );
  pointer-events: none;
}

/* Mobile: the lede paragraph sits directly over moving equipment
   footage and was blending into brighter frames. A slightly stronger
   scrim (same gradient shape, not a flat darken) plus a soft text
   shadow keeps the video legible as video while making the copy
   readable in every frame — desktop keeps the original, lighter
   scrim from above unchanged. */
@media (max-width: 699px) {
  .hero-media:not(.hero-media--portrait)::after {
    background: linear-gradient(
      180deg,
      rgba(15, 18, 21, 0.48) 0%,
      rgba(15, 18, 21, 0.56) 45%,
      rgba(15, 18, 21, 0.66) 88%,
      rgba(15, 18, 21, 0.95) 100%
    );
  }

  .hero.section--dark p.lede {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
}

/* Visible by default everywhere (mobile included) — no display:none
   gate waiting on a JS "ready" class. The poster attribute already
   covers the pre-decode instant natively; the <video> box renders
   (empty, poster only) until hero-media.js sets .src from
   data-video-src, which is fine since .hero-media__fallback sits in
   the same stacking position and only .hero-media--video-ready (added
   once the video actually starts) hides the fallback. (COMPANY-HERO-1,
   2026-08-01: the "Про компанію" portrait panel that used to be the
   other consumer of this pattern is gone -- it's a plain photo now --
   this comment now describes the homepage hero only.) */
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero-media__fallback {
  position: absolute;
  inset: 0;
}

/* Homepage hero: real <source> means the video is the default visible
   layer; the fallback graphic only takes over if hero-media.js detects
   a genuine "error" event on the <video> (bad file, unsupported codec —
   not "autoplay didn't start yet", which no longer hides anything). */
.hero-media:not(.hero-media--portrait) .hero-media__fallback {
  display: none;
}

.hero-media--video-error .hero-media__video {
  display: none;
}

.hero-media--video-error .hero-media__fallback {
  display: block;
}

.film-sheet {
  transform-box: fill-box;
  transform-origin: center;
}

.film-sheet path {
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.film-sheet--a {
  animation: film-drift-a 16s var(--ease-standard) infinite alternate;
}

.film-sheet--b {
  animation: film-drift-b 20s var(--ease-standard) infinite alternate;
}

.film-sheet--c {
  animation: film-drift-c 24s var(--ease-standard) infinite alternate;
}

.film-lines {
  stroke: var(--warm-white-50);
  stroke-width: 1;
  opacity: 0.16;
}

@keyframes film-drift-a {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-14px, 10px) rotate(-2deg);
  }
}

@keyframes film-drift-b {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(12px, -14px) rotate(1.5deg);
  }
}

@keyframes film-drift-c {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-8px, -10px) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-sheet--a,
  .film-sheet--b,
  .film-sheet--c {
    animation: none;
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

/* Product category titles (e.g. "Плівка поліетиленова") were breaking
   mid-word — the global body{overflow-wrap:break-word} reset was
   letting the browser split inside a long compound word instead of
   wrapping at the space. Word boundaries only; still wraps normally
   on narrow viewports since no white-space:nowrap is used. */
.hero-title--word-safe {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Homepage full-width hero H1 fix (2026-08-02). `.hero.section--dark` is
   the ONLY full-width dark hero on the site (uk / en index.html — the
   split heroes on other pages are `.hero--split`), so this is scoped to
   the homepage H1 alone; no other page or heading is affected.

   Cause it fixes: the homepage <h1> carried no opt-out class, so the
   global `body { overflow-wrap: break-word }` reset let the browser split
   the longest single word ("Поліетиленове" / "Polyethylene") mid-word at
   intermediate widths, where that word (≈675px at the 92.8px desktop
   size) is wider than the old 46rem text column's ~640px inner width.

   Fix, in the task's own priority order:
   1) widen ONLY this hero's content box (the `.lede` keeps its own
      independent `max-width: 42ch`, so it is visually unchanged), giving
      the long word room to sit on one line at the full desktop size;
   2) normalise wrapping so words only ever break at spaces;
   3) lower JUST the mobile floor of the existing fluid size (min 2.5rem
      -> 2.25rem) so the longest word still fits down to 320px with no
      overflow / horizontal scroll. Desktop size (6vw + 1rem, up to 6rem)
      is unchanged, so the hero stays large and premium. */
.hero.section--dark .hero__content {
  max-width: 52rem;
}

.hero.section--dark h1 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: normal;
  font-size: clamp(2.25rem, 6vw + 1rem, 6rem);
}

.hero p.lede {
  font-size: var(--text-md);
  color: var(--graphite-700);
  max-width: 42ch;
}

/* Only the dark hero variant needs the light-grey tone — the light
   variant (dark=False in sections.hero(), used on most pages) was
   previously rendering this same light grey on a near-white background,
   a serious pre-existing contrast bug. */
.hero.section--dark p.lede {
  color: var(--metal-300);
}

/* Small secondary microcopy under the CTA row (POLISH-1, 2026-08-01) --
   product-page trust note + AI-assistant explanation. Deliberately
   quieter than .lede (smaller size, muted color, no weight) so neither
   reads as a second heading or as another button; max-width keeps the
   trust note to ~2 lines on desktop per spec. */
.hero__note {
  max-width: 42ch;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--graphite-700);
}

.hero__note + .hero__note {
  margin-top: var(--space-2xs);
}

/* Hero split variant (e.g. "Про компанію" first screen) */
.hero--split {
  padding-block: calc(var(--space-section) * 0.7) calc(var(--space-section) * 0.85);
}

/* CAT-HERO-3-correction (2026-08-01): the catalog hub's own top padding
   reduced (0.7 -> 0.35 of --space-section, roughly half) -- this is the
   second, additive contributor to the "too much empty space above hero"
   complaint, on top of the align-items fix in layout.css. Targeted via
   :has() at the section itself so no HTML/Python template change was
   needed -- it fires only when the section actually contains the
   catalog's own grid modifier class, leaving the "Про компанію" page's
   .hero--split padding completely untouched.

   CAT-HERO-4 (2026-08-01): bottom padding now also cut (0.85 -> a flat
   var(--space-lg), 32px) -- root cause of the large empty field at the
   bottom of the hero was this same padding-bottom coefficient, same as
   the top one. The new scroll indicator below fills part of that
   vertical rhythm with actual content instead of blank padding: ~32px
   gap up to the indicator (handled by the indicator's own margin-top),
   then this flat 32px after it before the next section -- both inside
   the 24-56px targets given for this round. Applies at every viewport
   width, same as the top-padding rule above (deliberately -- see the
   tablet/mobile note in the indicator's own CSS further down: less
   bottom padding also shortens the hero on tablet, which this round
   explicitly asked for). */
.hero--split:has(.hero-split--catalog) {
  padding-top: calc(var(--space-section) * 0.35);
  /* CATALOG-POLISH (2026-08-02): --space-lg (32px) -> 16px, a 12-20px
     cut (this sprint's target) so the hero reads as more collected
     with the search/filter toolbar right below it. Applies at every
     width -- not flagged as desktop-only in this round's brief. */
  padding-bottom: 1rem;
}

/* CATALOG-POLISH (2026-08-02): desktop-only (>=1100px, this round's
   named breakpoint) further top-padding cut -- 0.35 -> 0.3, a ~14.3%
   reduction (within the requested 12-16%). Tablet/mobile keep the
   unchanged 0.35 base above. Composition, images, column ratio and
   H1 size are all untouched. */
@media (min-width: 1100px) {
  .hero--split:has(.hero-split--catalog) {
    padding-top: calc(var(--space-section) * 0.3);
  }
}

/* COMPANY-PAGE-FINAL (2026-08-01): same technique as the catalog rule
   above -- .hero-split--company already fixed the "empty space above
   hero" issue via align-items:start (see layout.css), but the
   section's own default bottom padding (0.85 x --space-section) would
   still leave a large gap before the new stats block right after it.
   Top padding is left at its default here -- this sprint didn't flag
   excess space above this hero specifically.

   COMPANY-PAGE-POLISH (2026-08-02): cut further, --space-lg (32px) ->
   0.375rem (6px), a 26px reduction landing inside this round's
   requested 20-30px target -- the stats block now reads as a direct
   continuation of the hero instead of a separate section. Only this
   one declaration changed; the hero's own composition, text and
   photo are untouched. */
.hero--split:has(.hero-split--company) {
  padding-bottom: 0.375rem;
}

/* PRODUCTION-MERGE (2026-08-02): same technique, same reduced gap into
   the (reused) compact stats strip right below this hero.

   FINAL-VISUAL-POLISH (2026-08-02): padding-top raised from the shared
   .hero rule's 0.85 to 0.94 (~10.6%, within the requested 10-12%) so
   the hero reads calmer/more spacious -- padding-bottom stays at the
   existing tight 0.375rem so the stats strip doesn't drift further
   below the first screen. Text size, image, crop, column ratio and
   align-items are all untouched. This 0.94 value remains the base (and
   the only value in effect below 1100px -- see the desktop-only
   override just below). */
.hero--split:has(.hero-split--manufacturing) {
  padding-top: calc(var(--space-section) * 0.94);
  padding-bottom: 0.375rem;
}

/* HERO-TOP-AIR-FIX (2026-08-02): the 0.94 top padding above, combined
   with the breadcrumbs' own spacing, was reading as an oversized empty
   gap between the breadcrumbs and the hero content specifically at
   desktop widths -- eyebrow/H1/lede/CTAs/photo all sat pushed further
   down than intended. Desktop-only (>=1100px, matching .hero-split's
   own two-column breakpoint): 0.94 -> 0.775, a 17.5% cut (within the
   requested 15-20%). Tablet/mobile keep the unchanged 0.94 base from
   above (no complaint was raised there). padding-bottom is untouched
   at every width. */
@media (min-width: 1100px) {
  .hero--split:has(.hero-split--manufacturing) {
    padding-top: calc(var(--space-section) * 0.775);
  }
}

.hero-split__title {
  font-size: clamp(2.25rem, 1.6vw + 2rem, 3.75rem);
  line-height: 1.08;
  max-width: 16ch;
}

.hero-split .lede {
  color: var(--graphite-700);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

.hero-split .cta-row {
  align-items: center;
}

.hero-split__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  font-weight: 600;
  color: var(--graphite-950);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--border-hairline);
}

.hero-split__link::after {
  content: "\2192";
  transition: transform var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .hero-split__link:hover {
    color: var(--brand-accent);
    border-color: var(--brand-accent);
  }

  .hero-split__link:hover::after {
    transform: translateX(3px);
  }
}

/* CAT-HERO-6 (2026-08-01): catalog-only AI CTA restyle -- scoped to
   .hero-split--catalog specifically so the "Про компанію" page's own
   .hero-split__link (same shared class, different destination) is
   completely unaffected. Reads as a quiet premium text link rather
   than "a link with a symbol": no underline, a small chevron instead
   of the long arrow, sitting close to the text at reduced opacity. */
.hero-split--catalog .hero-split__link {
  /* CAT-HERO-7 (2026-08-01): 0.5rem(8px) -> 0.4375rem(7px), landing
     mid-range in this round's 6-8px target (was already at the very
     edge of it). */
  gap: 0.4375rem;
  border-bottom: none;
  /* Smoother/slower than the base link's 200ms color transition. */
  transition: color 320ms var(--ease-standard);
}

.hero-split--catalog .hero-split__link::after {
  content: "\203A";
  /* CAT-HERO-7: explicit size added -- the chevron previously inherited
     the surrounding ~16px body font-size (no font-size was ever set on
     .hero-split__link itself), well above the requested 10-12px. */
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.65;
}

/* COMPANY-PAGE-FINAL (2026-08-01): same "premium text link, small
   chevron" treatment as .hero-split--catalog above, scoped separately
   so it's easy to tune independently later if needed. Secondary CTA
   reads as a quiet link, not a second filled button, per this
   sprint's brief. */
.hero-split--company .hero-split__link {
  gap: 0.4375rem;
  border-bottom: none;
  transition: color 320ms var(--ease-standard);
}

.hero-split--company .hero-split__link::after {
  content: "\203A";
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.65;
}

/* Catalog hero scroll indicator (CAT-HERO-4, 2026-08-01) -- a quiet,
   secondary link below the hero grid pointing at the catalog search/
   grid below (#catalog-products). Centered under the whole section, on
   purpose deliberately far from .cta-row so it never reads as competing
   with the primary CTA. No JS: plain anchor + the sitewide
   `[id] { scroll-margin-top }` rule in base.css already keeps the
   sticky header clear of the target on landing. */
.hero-split__indicator {
  display: flex;
  justify-content: center;
  /* CAT-HERO-5: --space-lg(32px) -> 28px -- raised slightly, still
     inside this round's 28-44px target for the gap after the
     showcase. */
  margin-top: 1.75rem;
}

.scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding-inline: var(--space-xs);
  /* CAT-HERO-5: --graphite-700 -> --graphite-950 -- noticeably more
     contrast, still not styled as a button (no background/border). */
  color: var(--graphite-950);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-standard);
}

.scroll-indicator__arrow {
  flex-shrink: 0;
  /* CAT-HERO-FINAL (2026-08-01): very slow, gentle bob -- 2.6s (within
     the requested 2-3s), ease-in-out (no bounce), translateY 0->5px
     and opacity 1->0.6 together, never jarring. Disabled outright
     under prefers-reduced-motion below. */
  animation: scroll-indicator-bob 2.6s ease-in-out infinite;
}

@keyframes scroll-indicator-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(5px);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__arrow {
    animation: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .scroll-indicator:hover {
    color: var(--brand-accent);
  }
}

/* Mobile: showcase is already hidden and the path CTA -> search is
   already short (PPA-FIX-2) -- an indicator here would only add height
   for no benefit, so it's hidden outright, matching this round's own
   stated preference. Tablet (768-1099px) keeps it visible. */
@media (max-width: 767.98px) {
  .hero-split__indicator {
    display: none;
  }
}

/* Company hero photo (COMPANY-HERO-1, 2026-08-01) — replaces the old
   .visual-panel abstract CSS/SVG composition entirely. Plain <img>, no
   wrapper layers, no fallback contract -- the file is real, there is
   nothing to defer or degrade gracefully from.

   COMPANY-PAGE-FINAL (2026-08-01): source swapped to
   company-production-hero.webp (three extrusion lines, 1536x1024,
   real 3:2 ratio -- was a square 1:1 photo before). aspect-ratio
   updated to match exactly, so object-fit: contain never has to
   letterbox or crop -- with the container ratio equal to the image's
   own ratio, contain and cover produce an identical, distortion-free
   result. Shadow lightened (--shadow-lg -> --shadow-sm) and the
   underlying photo's own background is light, so it now sits close to
   the page background rather than reading as a heavy separate card,
   per this round's explicit "very soft shadow only" brief. */
.company-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* PRODUCTION-MERGE (2026-08-02) -- /vyrobnytstvo/'s own hero photo.
   Same source file as .company-hero-photo above, deliberately
   different treatment: tighter 4:3 crop via object-fit:cover (vs. the
   company page's uncropped 3:2/contain), a larger radius and a
   stronger shadow, so the two pages' heroes don't read as duplicates
   of each other. No overlay/filter/distortion, same as the company
   page's rules. */
.manufacturing-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Production-capability stats (COMPANY-PAGE-FINAL, 2026-08-01) -- four
   light, static values directly under the company hero. Thin internal
   dividers instead of separate card boxes, per this sprint's brief
   ("без тяжёлых отдельных карточек"). Not the same component as
   stat_grid()/.stat-grid (that one is the separate, pre-existing dark
   "Підтверджені результати" panel further down this page, with
   count-up JS animation) -- this one is plain and static.

   COMPANY-PAGE-POLISH (2026-08-02): compacted into a slim capability
   strip -- padding cut to the low end of the requested 22-28/24-32px
   range, icon shrunk and pulled closer to the value.

   COMPANY-PAGE-POLISH-2 (2026-08-02): value/unit/caption are three
   stacked block-level tiers again (not one inline value+unit row) --
   "big number / name below / small caption further below" per this
   round's explicit brief, applied identically to all four stats. Unit
   sits close under the value (small margin); the caption gets a
   visibly larger gap so it reads as its own, quieter tier. */
.company-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.company-stat {
  padding: 1.375rem 1.75rem; /* ~22px vertical / 28px horizontal */
  border-left: var(--hairline) solid var(--border-hairline);
}

.company-stat:first-child {
  border-left: none;
  padding-left: 0;
}

.company-stat__icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--brand-accent);
  margin-bottom: var(--space-2xs);
}

.company-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.company-stat__unit {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-3xs);
}

.company-stat__caption {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--graphite-700);
  margin-top: var(--space-2xs);
  max-width: 24ch;
}

/* FINAL-VISUAL-POLISH (2026-08-02) -- /vyrobnytstvo/ only (see the
   `extra_class` param on company_stats_block() in sections.py): values
   +8% and a touch heavier, captions darkened one step for readability.
   Data, layout, dividers and column count are untouched; the company
   page's own identical-markup stats block is unaffected since it never
   emits this class. */
.section--mfg-stats .company-stat__value {
  font-size: 2.11rem;
  font-weight: 800;
}

.section--mfg-stats .company-stat__caption {
  color: var(--graphite-900);
}

/* Tablet + mobile: 2x2 grid all the way down (POLISH: mobile no longer
   drops to a single column at 600px -- "предпочтительно 2x2" on
   mobile per this round's brief; a single-column fallback still
   exists further below for genuinely narrow devices outside the
   tested 390-1024px range). */
@media (max-width: 1099.98px) {
  .company-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-lg);
  }

  .company-stat:nth-child(2n+1) {
    border-left: none;
    padding-left: 0;
  }

  .company-stat:nth-child(2n) {
    padding-left: var(--space-lg);
  }

  .company-stat:nth-child(n+3) {
    border-top: var(--hairline) solid var(--border-hairline);
    padding-top: var(--space-lg);
  }
}

@media (max-width: 599.98px) {
  .company-stat {
    padding: 1.25rem 1rem; /* ~20px vertical / 16px horizontal */
  }

  .company-stat__icon {
    width: 20px;
    height: 20px;
  }

  .company-stat__value {
    font-size: 1.75rem; /* ~28px, within the 27-32px mobile target */
  }

  /* FINAL-VISUAL-POLISH (2026-08-02): +8% over the mobile baseline
     above (28px -> ~30px), not the desktop-scoped 2.11rem -- keeps
     mobile numbers from becoming oversized while still applying this
     round's "+8%" brief. */
  .section--mfg-stats .company-stat__value {
    font-size: 1.89rem;
  }
}

@media (max-width: 359.98px) {
  .company-stats {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .company-stat {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: var(--hairline) solid var(--border-hairline);
  }

  .company-stat:first-child {
    border-top: none;
  }
}

/* Advantages panel (COMPANY-PAGE-FINAL, 2026-08-01) -- one unified
   light container, not four separate floating cards.

   COMPANY-PAGE-POLISH-2 (2026-08-02): "a bit livelier" pass -- padding
   opened back up (taller cards than the previous compaction round),
   icons +15% (26px -> 30px) with more air below them, titles set to
   semibold (600, was 700) rather than heavier.

   COMPANY-PAGE-CLOSE (2026-08-02): hover tightened to this closing
   sprint's explicit ceiling -- translateY(-3px)+box-shadow, 250ms ->
   translateY(-2px)+a minimal background tint, 200ms (no box-shadow,
   not on the allowed list this round). Still gated to real pointer
   devices and disabled under prefers-reduced-motion. */
.company-advantages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--warm-white-100);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.company-advantage {
  padding: 2rem var(--space-lg);
  border-left: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: transform 200ms var(--ease-standard), background-color 200ms var(--ease-standard);
}

.company-advantage:first-child {
  border-left: none;
}

@media (hover: hover) and (pointer: fine) {
  .company-advantage:hover {
    transform: translateY(-2px);
    background-color: var(--warm-white-50);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-advantage {
    transition: none;
  }
}

.company-advantage__icon {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--brand-accent);
  margin-bottom: var(--space-md);
}

.company-advantage__title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
}

.company-advantage__desc {
  font-size: var(--text-sm);
  color: var(--graphite-700);
}

@media (max-width: 1099.98px) {
  .company-advantages {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-advantage:nth-child(2n+1) {
    border-left: none;
  }

  .company-advantage:nth-child(n+3) {
    border-top: var(--hairline) solid var(--border-hairline);
  }
}

@media (max-width: 599.98px) {
  .company-advantages {
    grid-template-columns: 1fr;
  }

  .company-advantage {
    border-left: none;
  }

  .company-advantage:not(:first-child) {
    border-top: var(--hairline) solid var(--border-hairline);
  }
}

/* Cards */
.card {
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  height: 100%;
}

/* .card keeps a white surface even inside .section--dark (e.g. the
   "Без вигаданих даних" trust card in the homepage "why" split) — the
   section's inherited light heading/body color otherwise renders
   near-white text on that white card. Force the normal light-surface
   text colors back for anything with a .card inside a dark section. */
.section--dark .card {
  color: var(--graphite-700);
}

.section--dark .card h3 {
  color: var(--graphite-950);
}

/* Principles + documents shared tile grid (COMPANY-PAGE-CLOSE,
   2026-08-02) -- replaces the old .company-legal strip entirely (that
   card read as a leftover "службовий блок" duplicating the footer's
   own legal line, per this sprint's explicit brief; it has no other
   caller in this codebase, so it was removed rather than left as dead
   CSS). Same unified-container-with-dividers language as
   .company-advantages above, one shared class pair
   (.company-info-grid/.company-info-item) since "Принципи роботи" and
   "Документи та підтвердження" were introduced together with
   identical layout needs. */
.company-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--warm-white-100);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  margin-top: var(--space-lg);
}

.company-info-item {
  padding: var(--space-lg);
  border-left: var(--hairline) solid var(--border-hairline);
}

/* FINAL MICRO-POLISH (2026-08-02): principles tiles only, ~12% less
   vertical padding (32px -> 28px); horizontal padding, row height,
   heading size, column count and copy are all untouched. Scoped via
   the `--principles` grid modifier (already present, previously a
   no-op) so the documents tiles -- same shared .company-info-item
   class -- keep their original padding and readability. */
.company-info-grid--principles .company-info-item {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

.company-info-item:first-child {
  border-left: none;
}

/* FINAL-VISUAL-POLISH (2026-08-02): decorative-only interactive state
   for the "Формат співпраці" tiles specifically -- these are plain
   <div> tiles, not links, so no cursor:pointer and no "clickable"
   affordance, just a quiet acknowledgement on hover. Scoped to
   --cooperation only; the principles/documents tiles (same shared
   .company-info-item class) are unaffected. */
.company-info-grid--cooperation {
  overflow: hidden;
}

.company-info-grid--cooperation .company-info-item {
  position: relative;
  transition: background-color 200ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard),
    transform 200ms var(--ease-standard);
}

.company-info-grid--cooperation .company-info-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-accent);
  opacity: 0;
  transition: opacity 200ms var(--ease-standard);
}

.company-info-grid--cooperation .company-info-item__icon {
  transition: color 200ms var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .company-info-grid--cooperation .company-info-item:hover {
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1.5px);
  }

  .company-info-grid--cooperation .company-info-item:hover::before {
    opacity: 1;
  }

  .company-info-grid--cooperation .company-info-item:hover .company-info-item__icon {
    color: var(--brand-accent-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .company-info-grid--cooperation .company-info-item {
    transition: none;
  }

  .company-info-grid--cooperation .company-info-item:hover {
    transform: none;
  }
}

.company-info-item__icon {
  display: block;
  color: var(--brand-accent);
  margin-bottom: var(--space-sm);
}

.company-info-item__title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
}

.company-info-item__desc {
  font-size: var(--text-sm);
  color: var(--graphite-700);
}

@media (max-width: 1099.98px) {
  .company-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-info-item:nth-child(2n+1) {
    border-left: none;
  }

  .company-info-item:nth-child(n+3) {
    border-top: var(--hairline) solid var(--border-hairline);
  }
}

@media (max-width: 599.98px) {
  .company-info-grid {
    grid-template-columns: 1fr;
  }

  .company-info-item {
    border-left: none;
  }

  .company-info-item:not(:first-child) {
    border-top: var(--hairline) solid var(--border-hairline);
  }
}

/* Documents section's own intro paragraph + CTA/note area below the
   tile grid. */
.company-documents__intro {
  max-width: 64ch;
  color: var(--graphite-700);
}

.company-documents__action {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* FINAL MICRO-POLISH (2026-08-02): the CTA previously read as plain
   text -- .btn--ghost's default border-color (var(--border-hairline),
   12% opacity) is nearly invisible on this section's light background,
   and .btn--ghost has no icon at all (only .btn--primary::after gets
   the long arrow). This modifier only strengthens THIS instance: a
   clearly visible border and a small chevron-right, reusing the same
   "\203A" glyph + gap the site already uses for its other quiet CTAs
   (.hero-split__link). .btn--ghost itself, and every other button
   using it (the final CTA's secondary button, the homepage), is
   unaffected. Still a full 48px-min-height clickable box, no
   background fill -- deliberately not a second primary button. */
.company-documents__cta {
  border-color: rgba(20, 23, 26, 0.28);
}

.company-documents__cta::after {
  content: "\203A";
  font-size: 0.8125rem;
  opacity: 0.75;
}

.company-documents__note {
  font-size: var(--text-sm);
  color: var(--graphite-700);
  margin: 0;
  max-width: 56ch;
}

/* Approach panel — dark, expressive: stats + process steps + principle.

   COMPANY-PAGE-POLISH-2 (2026-08-02): "make the numbers more
   expressive, more air between them" -- scoped via the combined
   `.stat-grid.stat-grid--panel` selector (0,2,0 specificity) so these
   overrides win regardless of source order without touching the base
   .stat-grid/.stat__value rules the homepage's own stat grid shares. */
.stat-grid.stat-grid--panel {
  margin-top: var(--space-lg);
  gap: calc(var(--space-lg) * 1.2);
}

.stat-grid.stat-grid--panel .stat__value {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.approach-panel__grid {
  display: grid;
  gap: var(--space-xl);
  margin-block: var(--space-xl);
}

@media (min-width: 900px) {
  .approach-panel__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.approach-panel__grid h3 {
  color: var(--warm-white-50);
  margin-bottom: var(--space-sm);
}

/* Step list (COMPANY-PAGE-POLISH-2, 2026-08-02): small green checkmark
   icons (sections.approach_steps_list()) replace the old numbered-
   circle counter -- reads lighter, less like a spec sheet. */
.approach-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  margin: 0;
}

.approach-steps li {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--metal-300);
  font-size: var(--text-sm);
}

.approach-step__icon {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.15em;
  color: var(--brand-accent-light);
}

.approach-panel__principle {
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--border-hairline-inverted);
  color: var(--warm-white-50);
  font-size: var(--text-md);
  max-width: 60ch;
}

.card h3 {
  margin-bottom: var(--space-xs);
}

/* CATALOG-POLISH (2026-08-02): the shared .grid class (also used by
   the homepage's/product-detail page's/solution-detail page's own
   product teasers) is `auto-fit, minmax(260px, 1fr)` -- content-driven
   column count, not a fixed tier system. Scoped via the
   `[data-catalog-grid]` attribute product_grid() already emits only
   when called with filterable=True (i.e. only the catalog hub itself)
   to a strict 1/2/4-column tier system matching this sprint's explicit
   breakpoints, without touching that shared auto-fit behavior anywhere
   else it's used. */
.grid[data-catalog-grid] {
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .grid[data-catalog-grid] {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1280px) {
  .grid[data-catalog-grid] {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Product cards — the whole card is the link target; no separate
   underlined heading-as-link. */
.card--product {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  /* POLISH-1 (2026-08-01): explicit 220ms (was var(--duration-base)'s
     300ms) to land inside this section's 180-240ms spec; scoped to
     .card--product only. */
  transition: transform 220ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    border-color 220ms var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* POLISH-1 (2026-08-01): lift reduced from 6px to 3px (spec ceiling) --
   card contents, photos, and grid untouched. */
.card--product:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-accent);
}

@media (hover: hover) and (pointer: fine) {
  .card--product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-accent);
  }
}

/* Industry cards get a deliberately quieter lift than product cards
   (4px, not 6px) — ten of these sit in a dense grid, and the larger
   lift reads as too busy at that repetition. Shadow still goes all the
   way to --shadow-lg (same depth as product cards) — the distinction
   from product-card hover reads through the smaller lift distance, not
   a weaker shadow. Untouched by POLISH-1 (2026-08-01) -- industry cards
   are explicitly out of scope for that sprint's catalog-card polish. */
.card--industry:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-accent);
}

@media (hover: hover) and (pointer: fine) {
  .card--industry:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--brand-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--industry:hover,
  .card--industry:focus-visible {
    transform: none;
  }

  /* CATALOG-POLISH (2026-08-02): .card--product's own lift/scale
     transforms had no reduced-motion override before this pass --
     border-color/box-shadow/background changes (all non-motion) still
     apply, only the translateY/scale transforms are removed. */
  .card--product:hover,
  .card--product:focus-visible,
  .card--product:hover .card__media,
  .card--product:focus-visible .card__media,
  .card--product:hover .card__arrow,
  .card--product:focus-visible .card__arrow {
    transform: none;
  }
}

.card--product .card__media {
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  /* POLISH-1 (2026-08-01): explicit 220ms (was var(--duration-slow)'s
     400ms) to land inside this section's 180-240ms spec. */
  transition: transform 220ms var(--ease-standard);
}

/* SVG today; a future <img> (real product photography) drops into this
   exact slot with no template/CSS changes — object-fit:cover already
   matches how the SVG is centered/scaled within the same box. */
.card--product .card__media svg {
  width: 100%;
  height: 100%;
  max-width: 216px;
  padding: var(--space-md);
  box-sizing: border-box;
  overflow: visible;
}

.card--product .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* POLISH-1 (2026-08-01): scale reduced from 1.035 to 1.02 (spec
   ceiling 1.015-1.02). */
.card--product:focus-visible .card__media {
  transform: scale(1.02);
}

.card--product:focus-visible .card__media svg .film-sheet {
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .card--product:hover .card__media {
    transform: scale(1.02);
  }

  .card--product:hover .card__media svg .film-sheet {
    transform: translateY(-2px);
  }
}

.card__media--1 {
  background: linear-gradient(150deg, var(--warm-white-100), var(--metal-200) 120%);
}

.card__media--2 {
  background: linear-gradient(200deg, var(--metal-200), var(--warm-white-100) 130%);
}

.card__media--3 {
  background: linear-gradient(110deg, var(--warm-white-100), var(--metal-200) 90%);
}

.card__media--4 {
  background: linear-gradient(260deg, var(--metal-200), var(--warm-white-100) 110%);
}

.card__media--5 {
  background: linear-gradient(150deg, var(--warm-white-100) 20%, var(--film-teal-a), var(--metal-200) 140%);
}

.card__media--6 {
  background: linear-gradient(220deg, var(--metal-200), var(--film-teal-b), var(--warm-white-100) 140%);
}

.card--product .card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: var(--hairline) solid var(--border-hairline);
}

.card--product .card__title,
.card--industry .card__title {
  margin: 0;
  font-size: var(--text-md);
  padding-right: var(--space-xl);
}

.card--product .card__desc,
.card--industry .card__desc {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--graphite-700);
  flex: 1;
}

/* CATALOG-POLISH (2026-08-02): product cards only (industry cards on
   the solutions hub are untouched -- separate rules, not the shared
   selector above). Clamping title to 2 lines and description to 4
   lines bounds every card's natural content height to the same
   maximum regardless of actual text length, which is what makes row 2
   match row 1's geometry -- the full, unclamped text is always still
   available on the product's own detail page. Description also
   darkened one step for legibility. */
.card--product .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card--product .card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--graphite-900);
}

.card--product .card__arrow,
.card--industry .card__arrow {
  position: absolute;
  right: var(--space-lg);
  top: var(--space-md);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--warm-white-100);
  border: var(--hairline) solid var(--border-hairline);
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* POLISH-1 (2026-08-01): product-card arrow only, ~6% smaller (34px ->
   32px, within the requested 5-8%) -- industry cards keep 34px
   unchanged, out of scope for this pass. The whole card is still the
   link target (see .card--product comment above), so the real
   clickable area stays the full card, far larger than 44x44px
   regardless of this circle's visual size. */
.card--product .card__arrow {
  width: 32px;
  height: 32px;
}

.card--product .card__arrow::after,
.card--industry .card__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--graphite-700);
  border-top: 2px solid var(--graphite-700);
  transform: translate(-60%, -50%) rotate(45deg);
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.card--product:focus-visible .card__arrow,
.card--industry:focus-visible .card__arrow {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  transform: translateX(2px);
}

.card--product:focus-visible .card__arrow::after,
.card--industry:focus-visible .card__arrow::after {
  border-color: var(--accent-contrast);
}

@media (hover: hover) and (pointer: fine) {
  .card--product:hover .card__arrow,
  .card--industry:hover .card__arrow {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    transform: translateX(2px);
  }

  .card--product:hover .card__arrow::after,
  .card--industry:hover .card__arrow::after {
    border-color: var(--accent-contrast);
  }
}

/* Industry-specific arrow tuning: a slightly longer shift (4px vs
   product cards' 2px) and a slower transition (260ms vs 200ms) to
   match this section's hover spec. transition-duration alone is
   enough here — it merges with the transition-property/timing-function
   already set on .card--industry .card__arrow above. */
.card--industry .card__arrow {
  transition-duration: 260ms;
}

.card--industry:focus-visible .card__arrow {
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .card--industry:hover .card__arrow {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--industry:hover .card__arrow,
  .card--industry:focus-visible .card__arrow {
    transform: none;
  }
}

/* Industry cards — thumbnail, number, value prop, confirmed related
   product chips. Structured like .card--product: an edge-to-edge media
   box (own top-corner radius, padding:0 on the card itself) followed by
   a padded body, rather than padding applied to the whole card. */
.card--industry {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  position: relative;
  /* Explicit 260ms (not var(--duration-base)'s 300ms) — this section's
     hover spec calls for ~250-300ms specifically; scoped to industry
     cards only so product cards elsewhere keep their existing timing. */
  transition: transform 260ms var(--ease-standard),
    box-shadow 260ms var(--ease-standard),
    border-color 260ms var(--ease-standard);
}

.card--industry__media {
  height: 178px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
}

.card--industry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 260ms var(--ease-standard);
}

.card--industry:focus-visible .card--industry__media img {
  transform: scale(1.03);
}

@media (hover: hover) and (pointer: fine) {
  .card--industry:hover .card--industry__media img {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card--industry:hover .card--industry__media img,
  .card--industry:focus-visible .card--industry__media img {
    transform: none;
  }
}

@media (min-width: 560px) {
  .card--industry__media {
    height: 200px;
  }
}

/* Vertical rhythm is deliberately uneven, not a single uniform gap:
   the title needs the most air above it (separates it from the
   number/badge row) and below it (separates heading from body copy);
   the products block gets a smaller, secondary step since it's
   supporting detail, not primary reading content. gap:0 here because
   each step below is sized individually via margin-bottom instead. */
/* Top/bottom padding trimmed from --space-md/--space-lg (24px/32px) to
   --space-sm/--space-md (16px/24px) — a 16px total height cut across
   the card. Only the card's own outer padding moves; the rhythm
   margins below (title/desc/products spacing) are untouched since
   they're deliberate reading rhythm, not "excess" padding. Side
   padding (--space-lg) is also untouched — that governs the text
   column's width, not the card's height. */
.card--industry__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.card--industry .card__title {
  padding-right: 0;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.card--industry .card__desc {
  margin-bottom: var(--space-sm);
}

.card--industry__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-xs);
  margin-bottom: var(--space-sm);
}

.card--industry__number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--graphite-700);
}

/* Text-only, low-contrast on purpose ("малозаметный и фирменный") — no
   background fill, no icon, so ten repeated badges across the grid stay
   quiet instead of reading as ten little buttons. */
.card--industry__badge {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-accent);
  opacity: 0.85;
  text-align: right;
  white-space: nowrap;
}

/* Deliberately quieter than the section 1 pass left it: smaller than
   --text-xs (the smallest named scale step) and a touch more
   transparent, so this reads as a caption for the tags below it
   rather than competing with the card title. margin-bottom is the
   "air after" gap before the tag list itself. */
.card--industry__products-label {
  margin: 0 0 var(--space-sm);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graphite-700);
  opacity: 0.55;
}

/* position: relative (not static) is required here: .card__arrow::after
   (the chevron glyph, further up) is `position: absolute; top: 50%;
   left: 50%` expecting to center itself INSIDE the 34px circle. Product
   cards get that for free because .card__arrow is absolutely positioned
   there; industry cards intentionally make the circle a normal flex
   child instead (margin-top: auto pushes it to the card's bottom edge)
   — but that flex child still needs its own `position` set to anything
   other than static, or the chevron's absolute positioning skips it and
   resolves against the whole card instead, landing in the middle of the
   card body instead of inside the circle. */
.card--industry .card__arrow {
  position: relative;
  align-self: flex-end;
  margin-top: auto;
}

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

.card--industry__products li {
  font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: 999px;
  background: var(--warm-white-100);
  color: var(--graphite-700);
}

/* .card's height:100% is what makes cards in the same row match the
   tallest card in that row (deliberate — flex-wrap can genuinely put an
   industry card next to a taller one starting at 753px, see
   .grid--industries in layout.css). Below 753px cards stack one per
   row, so nothing should be stretching a lone card — but percentage
   heights inside a flex/grid chain can still pick up stray intrinsic
   sizing in Safari. Pinning height:auto/min-height:0 here removes any
   leftover bottom gap under the tags on mobile without touching the
   >=753px behavior that intentionally keeps a row's cards level. */
@media (max-width: 752px) {
  .card--industry {
    height: auto;
    min-height: 0;
  }
}

/* Stats */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

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

.stat {
  /* POLISH-1 (2026-08-01): a touch quieter than the shared
     --border-hairline-inverted token (0.16 opacity) used elsewhere --
     scoped locally rather than changing that shared variable, so no
     other dark-section hairline anywhere else on the site is affected. */
  border-left: var(--hairline) solid rgba(250, 248, 245, 0.12);
  padding-left: var(--space-md);
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: var(--space-2xs);
}

/* .stat__value-anim is the only visible content. PPA-FIX-2
   (2026-08-01): it already shows the real authored value (e.g.
   "500 000 000+") in the HTML, never "0+" — static/js/main.js only
   ever briefly resets it to ~92% and counts back up once the stat grid
   scrolls into view, so a visitor who never scrolls it into view, or
   whose JS never runs, still sees the correct final number immediately.
   The same value stays present as .visually-hidden text so assistive
   tech always gets it too. .no-js swapping which span is visible is
   now belt-and-suspenders (both already carry identical text) rather
   than load-bearing, kept for the no-JS case regardless (see
   html.no-js in templates/layout.py — main.js is the only thing that
   ever removes that class). */
.stat__value-anim {
  font-variant-numeric: tabular-nums;
}

.no-js .stat__value-anim {
  display: none;
}

.no-js .stat__value .visually-hidden {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Full unit word (second line) — premium-polish pass, 2026-07-30.
   Deliberately its own tier between the big number and the small
   caption: legible as a word, not just an abbreviation. Kept lighter
   than .stat__label below (2026-07-31 hierarchy pass) and guarded
   against a mid-word break on a single long word like "відсотків". */
.stat__unit {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--warm-white-50);
  /* POLISH-1 (2026-08-01): one step up the spacing scale (was
     --space-3xs) for a bit more air between the unit line and the
     caption below -- the number/unit pairing stays tight, the caption
     reads as its own tier. */
  margin-bottom: var(--space-2xs);
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Small caption (third line). 2026-07-31: darkened ~6% off --metal-300
   (#c3c8cd -> #b7bcc1) to strengthen the tier-2/tier-3 hierarchy —
   still 9.4:1 against the dark section background (was 10.7:1), well
   past WCAG AA either way. */
.stat__label {
  display: block;
  font-size: var(--text-sm);
  color: #b7bcc1;
}

.stat__icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  vertical-align: -5px;
  margin-right: 9px;
  color: var(--brand-accent-light);
}

/* Contacts page */
.contact-block h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-lg);
}

.contact-block h2:first-child {
  margin-top: 0;
}

.contact-block__note {
  font-size: var(--text-sm);
  color: var(--graphite-700);
}

.contact-block__big {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--graphite-950);
  text-decoration: none;
  margin-bottom: var(--space-2xs);
}

@media (hover: hover) and (pointer: fine) {
  .contact-block__big:hover {
    color: var(--brand-accent);
  }
}

.contact-block__signature {
  color: var(--graphite-700);
  margin-bottom: var(--space-lg);
}

.map-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface-card);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.map-card__text {
  min-width: 0;
  flex: 1;
}

@media (hover: hover) and (pointer: fine) {
  .map-card:hover {
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-md);
  }
}

.map-card__pin {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

.map-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.map-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
}

.map-card__address {
  color: var(--graphite-700);
}

.map-card__cta {
  color: var(--brand-accent);
  font-weight: 600;
  margin-top: var(--space-2xs);
}

/* Stock program visual — agreed units on a recurring schedule, never
   "always in stock". Crates settle in once, staggered, when revealed. */
.stock-visual {
  width: 100%;
  height: auto;
  max-width: 480px;
}

.stock-crate {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}

[data-reveal].is-visible .stock-crate {
  opacity: 1;
  transform: translateY(0);
}

.stock-crate:nth-of-type(1) {
  transition-delay: 0ms;
}

.stock-crate:nth-of-type(2) {
  transition-delay: 90ms;
}

.stock-crate:nth-of-type(3) {
  transition-delay: 180ms;
}

.stock-crate:nth-of-type(4) {
  transition-delay: 270ms;
}

.stock-crate:nth-of-type(5) {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .stock-crate {
    transition-delay: 0ms !important;
  }
}

/* Catalog toolbar — client-side search + category quick filters */
.catalog-toolbar {
  margin-bottom: var(--space-lg);
}

.catalog-search {
  position: relative;
  display: block;
  margin-bottom: var(--space-sm);
}

/* CATALOG-POLISH (2026-08-02): explicit 44px min-height to match the
   filter pills exactly ("восприниматься как один общий инструментальный
   блок"); width narrowed to the requested 320-420px range (was
   max-width:28rem/448px, slightly over); border strengthened from the
   sitewide 12%-opacity hairline to a clearly visible tone; left padding
   makes room for the new inline search icon. */
.catalog-search input {
  width: 100%;
  max-width: 26rem;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-base);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) 2.75rem;
  border: var(--hairline) solid rgba(20, 23, 26, 0.28);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  transition: border-color 200ms var(--ease-standard);
}

.catalog-search input:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 1px;
  border-color: var(--brand-accent);
}

.catalog-search__icon {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--graphite-700);
  pointer-events: none;
}

.catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.catalog-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-md);
  /* CATALOG-POLISH: inactive pills get the same strengthened border as
     the search field above, for consistent contrast against the page
     background across the whole toolbar. */
  border: var(--hairline) solid rgba(20, 23, 26, 0.24);
  border-radius: 999px;
  background: var(--surface-card);
  cursor: pointer;
  transition: background-color 180ms var(--ease-standard),
    border-color 180ms var(--ease-standard),
    color 180ms var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .catalog-pill:hover {
    border-color: var(--brand-accent);
    color: var(--brand-accent);
  }
}

.catalog-pill:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

.catalog-pill[aria-pressed="true"] {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--accent-contrast);
}

.catalog-empty {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  color: var(--graphite-700);
}

/* EMPTY-STATE-FIX (2026-08-02): root cause of the "everything shows at
   once" bug -- `display: flex` above and the browser's built-in
   `[hidden] { display: none }` rule are equal specificity, and an
   author stylesheet always wins a tie against the user-agent
   stylesheet, so `hidden` was silently doing nothing here. Same
   pattern as the existing `[data-catalog-item][hidden]` rule below,
   which is why individual product cards never had this bug. */
.catalog-empty[hidden] {
  display: none;
}

.catalog-empty p {
  margin: 0;
}

[data-catalog-item][hidden] {
  display: none;
}

/* Catalog hero photo showcase (CAT-HERO-1, 2026-08-01) — replaces the
   old .catalog-hero-visual SVG glyph composition entirely. One large
   anchor photo + three smaller preview tiles, each a plain rounded/
   shadowed photographic tile -- deliberately NOT bordered or titled
   like .card--product, so this reads as a single showcase, not a
   repeat of the catalog grid below. Sized by aspect-ratio, not a tall
   min-height, so it can't inflate the hero beyond what the text column
   already needs.

   CAT-HERO-2 (2026-08-01) polish pass: main photo enlarged ~10%
   (60%->66% of the container) and given a visibly deeper shadow than
   the three tiles -- that shadow-depth gap is what reads as "one main
   object, three supporting previews" rather than four equal cards.

   CAT-HERO-4 (2026-08-01): owner confirmed sleeve/bags were still too
   hidden behind main. Rebuilt the whole geometry as real coordinate
   math (container width = 100 units, height per the 6:5 aspect-ratio
   = 83.3 units), not eyeballed -- achieved zero forced overlap between
   main and any tile.

   CAT-HERO-5 (2026-08-01): owner wanted main, sleeve and sack each
   visibly bigger AND more air between main and the tile group -- doing
   both at once (main 66->63.5%, sleeve 33->34.5%, i.e. bigger in
   ABSOLUTE terms while smaller as a % of a wider box) requires the box
   itself to be wider than its 57% grid column, which is exactly what
   this sprint's own instruction permits ("расширь внутреннюю область
   showcase... а не возвращай сильное перекрытие"). Implemented via
   `width: calc(100% + 74px)` + `margin-left: -74px`, which add the
   extra 74px entirely on the LEFT side while leaving the RIGHT edge
   at the exact same absolute position as before (width grows and
   margin-left shrinks by the same amount) -- so this cannot push
   anything past the container's already-verified-safe right boundary.
   74px is more than the 64px grid gap (--space-2xl) between the two
   hero columns, so the showcase now extends ~10px past the gap into
   where the text column's own nominal box starts -- a calculated,
   modest encroachment, not a page-edge overflow risk. The text column
   has no hard right-edge padding and its H1/lede are both ch-width-
   capped well short of the column's full width, so this is very
   unlikely to touch actual text, but it was not visually confirmed.

   New coordinates (same 100-unit-wide/83.3-unit-tall system as before,
   now measured against the WIDENED box):

     main:   left 0,         width 63.5 -> x 0-63.5,   y 1.7-52.5
     sleeve: right 0, top 0, width 34.5 -> x 65.5-100,  y 0-27.6
     bags:   right 5, top 35.9%H(=29.9u), width 29 -> x 66-95, y 29.9-53.1
     sack:   right 11, top 67%H(=55.8u), width 33 -> x 56-89, y 55.8-82.2

   main's right edge (63.5) is left of every tile's left edge (65.5,
   66, 56) -- still zero forced overlap, with the main-to-tile-group
   gap now ~2 units (~16-20px at typical widths) instead of ~1 unit
   before, matching the requested air increase. Tiles are also spaced
   from each other (sleeve ends 27.6, bags starts 29.9; bags ends 53.1,
   sack starts 55.8) within 16-28px targets. Shadow hierarchy stays
   three-tier: main (deepest, softened further this round) > sleeve
   (--shadow-md) > bags/sack (--shadow-sm, lightest, untouched).

   CAT-HERO-FINAL (2026-08-01) briefly reintroduced a small deliberate
   ~15-20px overlap (main shifted right to left:8%, width 59.5%) per
   that round's explicit request.

   CAT-HERO-7 (2026-08-01): owner reversed that decision -- zero
   overlap is now the hard requirement again, connection to come only
   from gap/scale/alignment/shadow/glow. Main shrunk exactly ~2%
   (59.5% -> 58.3%) and pulled back left (left 8% -> 5%). Preview
   sizes/positions are completely untouched from CAT-HERO-5. Final
   verified coordinates (same 100-unit-wide/83.3-unit-tall system,
   measured against the widened box):

     main:   left 5,          width 58.3 -> x 5-63.3,    y 1.7-51.4
     sleeve: right 0,  top 0,  width 34.5 -> x 65.5-100,   y 0-27.6
     bags:   right 5,  top 35.9%H(=29.9u), width 29 -> x 66-95,  y 29.9-53.1
     sack:   right 11, top 67%H(=55.8u),   width 33 -> x 56-89,  y 55.8-82.2

   main's right edge (63.3) is strictly left of every tile's left edge
   (65.5, 66, 56) -- zero bounding-box overlap with ANY tile, verified
   by direct comparison, not just z-index. Nearest tile (sleeve): gap
   65.5-63.3 = 2.2 units (~18px at a representative ~815px showcase
   width) -- inside the requested 12-20px range, close to the 16px
   target. Bags: gap 66-63.3 = 2.7 units (~22px) -- slightly more than
   sleeve's, still no overlap, still a controlled small gap. Sack never
   shares main's vertical band at all (main ends y 51.4, sack starts y
   55.8), so it was never at overlap risk regardless of x. */
.catalog-showcase {
  position: relative;
  width: calc(100% + 74px);
  margin-left: -74px;
  /* CAT-HERO-FINAL (2026-08-01): whole composition raised 8px (within
     the requested 6-10px) -- shifts main+glow+all three tiles together
     uniformly, so their relative positions to each other are
     untouched. */
  margin-top: -8px;
  aspect-ratio: 6 / 5;
}

.catalog-showcase__glow {
  position: absolute;
  inset: 13%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    /* CAT-HERO-5: center raised slightly (52%->46% vertical) to sit
       behind the new, slightly higher tile cluster; inset tightened
       10%->13% (a bit smaller). */
    ellipse at 52% 46%,
    var(--warm-white-100) 0%,
    var(--metal-200) 60%,
    transparent 100%
  );
  /* CAT-HERO-5: 0.47 -> 0.43 (~8.5% further, within the requested
     5-10%) -- the bigger images this round read as busier, so the
     glow needed to recede a little more again to stay a quiet
     unifier. */
  opacity: 0.43;
}

/* CAT-HERO-3: entrance animation -- main photo fades/settles in first,
   the three tiles follow staggered ~120ms apart. Opacity + translateY
   only (no scale, no rotation, no parallax); disabled outright under
   prefers-reduced-motion below, matching every other decorative
   animation on this site. */
@keyframes catalog-showcase-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.catalog-showcase__main {
  position: absolute;
  z-index: 2;
  /* CAT-HERO-7 (2026-08-01): owner reversed course from CAT-HERO-FINAL --
     the small deliberate overlap is no longer wanted at all; zero
     overlap is now the hard requirement, connection to come from gap/
     scale/shadow/glow only. left: 8% -> 5%. Combined with the width cut
     below, main's right edge now lands at 5+58.3=63.3% -- strictly less
     than every tile's left edge (sleeve 65.5%, bags 66%, sack's own
     vertical band never overlaps main's at all regardless of x -- see
     below) -- a genuine ~2.2-unit gap to the nearest tile (sleeve),
     which is ~18px at a representative ~815px showcase width, inside
     the requested 12-20px range (target ~16px). Preview positions/
     sizes are untouched -- this is resolved entirely on main's side. */
  left: 5%;
  top: 2%;
  /* CAT-HERO-7: 59.5% -> 58.3% -- exactly ~2% smaller (59.5*0.98=58.31),
     not "roughly" further. Combined with left:5% above, this both
     shrinks main by the requested amount AND clears the overlap from
     CAT-HERO-FINAL. Shadow intentionally untouched, as required. */
  width: 58.3%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  /* CAT-HERO-5: softened -- opacity 0.34->0.26, blur 64->78px, spread
     -22->-30px (a bigger negative spread spreads the shadow's own edge
     out further, reading as softer/less sharply cut-off underneath).
     Still the visibly deepest shadow of the four images -- just no
     longer reading as a separate "card" cut out from the composition. */
  box-shadow: var(--shadow-lg), 0 40px 78px -30px rgba(20, 23, 26, 0.26);
  transition: box-shadow 220ms var(--ease-standard);
  animation: catalog-showcase-in 580ms var(--ease-standard) both;
}

@media (hover: hover) and (pointer: fine) {
  /* CAT-HERO-3: ~5% deeper on hover -- shadow only, no transform, no
     scale, so the photo itself never moves or zooms. */
  .catalog-showcase__main:hover {
    box-shadow: var(--shadow-lg), 0 42px 80px -29px rgba(20, 23, 26, 0.273);
  }
}

.catalog-showcase__tile {
  position: absolute;
  z-index: 1;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  /* CAT-HERO-3-correction: brightness/contrast raised slightly further
     (was 1.03/1.04) to lift the previews further out of the gray-haze
     read the owner flagged. Saturation added at the lowest permitted
     step (1.01) only -- still no color push. */
  filter: brightness(1.06) contrast(1.03) saturate(1.01);
  animation: catalog-showcase-in 580ms var(--ease-standard) both;
}

/* Top preview (rukav/sleeve) -- top-right corner, zero overlap with
   main (see geometry comment above .catalog-showcase). 34.5% of the
   widened box is bigger in absolute px than the old 33%-of-narrower-
   box by ~18%, within the requested 15-20% increase. --shadow-md: the
   middle tier of this round's three-step shadow hierarchy. */
.catalog-showcase__tile--sleeve {
  width: 34.5%;
  right: 0;
  top: 0;
  box-shadow: var(--shadow-md);
  animation-delay: 580ms;
}

/* Middle preview (pakety/bags) -- right of main with a real gap, fully
   open, comfortable vertical air from --sleeve above and --sack below.
   29% of the widened box is ~4% bigger in absolute px than before,
   within the requested "up to 5%" ceiling -- deliberately the smallest
   increase of the three, per this round's "don't shrink it, keep it
   the connective middle tile" instruction. */
.catalog-showcase__tile--bags {
  width: 29%;
  right: 5%;
  top: 35.9%;
  box-shadow: var(--shadow-sm);
  animation-delay: 700ms;
}

/* Bottom preview (mishok/sack) -- shifted left relative to sleeve/bags
   (right:11% vs their 0-5%) for the asymmetric-not-a-column look the
   brief asked for. Its vertical band (y 55.8-82.2) starts below main's
   own bottom edge (y 52.5) with a real gap, so there is zero overlap
   with main regardless of horizontal position. 33% of the widened box
   is ~12% bigger in absolute px than before, within the requested
   10-15% increase, and raised from the previous round's position to
   reduce the empty space at the very bottom of the hero. */
.catalog-showcase__tile--sack {
  width: 33%;
  right: 11%;
  top: 67%;
  box-shadow: var(--shadow-sm);
  animation-delay: 820ms;
}

@media (prefers-reduced-motion: reduce) {
  .catalog-showcase__main,
  .catalog-showcase__tile {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* PPA-FIX-2 (2026-08-01, owner-confirmed on real iPhone) — carried
   forward unchanged by CAT-HERO-1: below the point where .hero-split
   actually goes two-column (see static/css/layout.css, min-width:
   1100px), a large visual here was pushing the catalog search and
   category pills far down the page with a large empty area beneath
   it. Hidden outright (not shrunk) at every width narrower than that
   breakpoint, mobile and tablet alike: at ≥1100px it sits beside the
   text column. Scoped to --catalog specifically (see hero_split()'s
   visual_class param) so the "Про компанію" panel's own
   hero-split__visual composition is completely unaffected. */
@media (max-width: 1099.98px) {
  .hero-split__visual--catalog {
    display: none;
  }
}

/* Badges: status markers (never invented content, always honest) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid currentColor;
}

.badge--needs-owner {
  color: #8a5a10;
  background: #fbf1de;
}

.note-box {
  border: var(--hairline) solid var(--border-hairline);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background: var(--warm-white-100);
  font-size: var(--text-sm);
}

.section--dark .note-box {
  background: rgba(250, 248, 245, 0.06);
  border-color: var(--border-hairline-inverted);
}

/* FAQ accordion (native <details>, no JS required) */
.faq-item {
  border-bottom: var(--hairline) solid var(--border-hairline);
  padding-block: var(--space-sm);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-md);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: var(--text-lg);
  color: var(--brand-accent);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  margin-top: var(--space-sm);
  color: var(--graphite-700);
}

/* FINAL-VISUAL-POLISH (2026-08-02) -- /vyrobnytstvo/'s own FAQ
   instance only. Scoped via .mfg-faq so the shared .faq-list/.faq-item
   rules above (also used by the standalone /faq/ page, driven by
   content/shared/faq.json) stay untouched. */
.mfg-faq .faq-item {
  padding-block: 1.3125rem; /* --space-sm (16px) + 5px */
}

.mfg-faq .faq-item summary {
  gap: var(--space-lg); /* --space-md (24px) -> 32px, more room before the icon */
  transition: color 200ms var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .mfg-faq .faq-item summary:hover {
    color: var(--brand-accent);
  }
}

.mfg-faq .faq-item summary:focus-visible {
  color: var(--brand-accent);
}

.prose {
  max-width: 74ch;
}

/* CTA band */
.cta-band {
  background: var(--graphite-950);
  color: var(--warm-white-50);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 900px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xl);
  }
}

/* COMPANY-PAGE-POLISH (2026-08-02): optional small eyebrow above the
   cta-band heading -- only rendered when sections.cta_band() is called
   with a non-empty `eyebrow` (currently just the company page's final
   CTA), so the existing homepage cta-band instances are unaffected. */
.cta-band__eyebrow {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent-light);
}

.cta-band__text h2 {
  margin-bottom: var(--space-2xs);
  color: var(--warm-white-50);
}

.cta-band__text p {
  margin: 0;
  color: var(--metal-300);
}

/* FINAL-VISUAL-POLISH (2026-08-02) -- /vyrobnytstvo/'s own final CTA
   only (see the .mfg-final-cta wrapper in pages/manufacturing.py).
   Scoped so pages/home.py's two cta_band() instances, and every other
   .btn--primary on the site, keep their existing height/arrow-gap.

   CATALOG-POLISH (2026-08-02): .catalog-final-cta (the catalog page's
   own wrapper, pages/products_hub.py) added to the same rule on
   purpose -- this sprint explicitly asks the catalog's closing CTA to
   match "the same dark style, sizes and behaviour already accepted on
   the Виробництво page," so both pages share one declaration instead
   of two copies that could drift apart. */
.mfg-final-cta .btn--primary,
.catalog-final-cta .btn--primary {
  min-height: 53px;
}

.mfg-final-cta .btn--primary::after,
.catalog-final-cta .btn--primary::after {
  margin-left: 0.625rem; /* 8px -> 10px, top of the requested 8-10px range */
}

/* Forms (demo mode) */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 40rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* "optional" hint next to a label — visually secondary, never reads as required
   (no asterisk, no colour emphasis). Used by the optional Company field. */
.field-optional {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--graphite-700);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--text-base);
  padding: var(--space-sm);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--graphite-950);
  min-height: 48px;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 400;
  margin-bottom: var(--space-2xs);
}

fieldset.field {
  border: none;
  padding: 0;
  margin: 0;
}

fieldset.field legend {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0;
  margin-bottom: var(--space-2xs);
}

.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xs);
}

.field--checkbox input {
  min-height: auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--graphite-700);
}

/* Inline per-field validation error (name / phone-or-email). The visible text
   message + border + aria-invalid together signal the error — never colour
   alone. Used by both the funnel forms and the AI advisor lead form (.field). */
.field-error {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--danger);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(168, 64, 47, 0.18);
}

.form-status {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  display: none;
}

.form-status[data-state="success"] {
  display: block;
  background: #e7f2ee;
  color: #1f5142;
  border: var(--hairline) solid #bcdccf;
}

.form-status[data-state="error"] {
  display: block;
  background: #fbeae7;
  color: #7a2a1c;
  border: var(--hairline) solid #f0c7bd;
}

.demo-tag {
  font-size: var(--text-xs);
  color: var(--graphite-700);
  border: var(--hairline) dashed var(--metal-400);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  display: inline-block;
}

/* FINAL-FORM-COMPACTING (2026-08-02) -- /vyrobnytstvo/'s "Обговорити
   параметри" form only. Scoped entirely via this wrapper class so the
   shared .form/.field rules above (used by every other form on the
   site) stay untouched. Field order is fixed by
   content/shared/funnel_forms.json's custom_packaging definition --
   industry, dimensions, volume, comment (textarea), name, contact,
   consent -- targeted here by :nth-of-type() among the .field <div>
   siblings, which stays correct regardless of how many hidden <input>
   siblings precede them (hidden inputs are a different tag, so they
   don't count towards :nth-of-type). */
.mfg-spec-form .form {
  max-width: 780px;
  gap: var(--space-sm);
}

/* FINAL-VISUAL-POLISH (2026-08-02): "Опис задачі" gets 1-2 extra lines
   of room (120px -> 160px); placeholder contrast normalized (no
   ::placeholder rule existed anywhere on the site before, so browsers
   were falling back to their own default, often quite light, tone) --
   both scoped to this one form. */
.mfg-spec-form .field textarea {
  min-height: 160px;
}

.mfg-spec-form .field input::placeholder,
.mfg-spec-form .field textarea::placeholder {
  color: var(--graphite-700);
  opacity: 1;
}

/* Pulls the submit button ~8px closer to the consent checkbox above it
   (row-gap between every other field pair is untouched) and adds 5px
   to the button's own height -- both scoped to this form only, not
   the shared .btn/.btn--primary rules every button on the site uses. */
.mfg-spec-form button[type="submit"] {
  margin-top: -0.5rem;
  min-height: 53px;
}

@media (min-width: 640px) {
  .mfg-spec-form .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }

  .mfg-spec-form .field:nth-of-type(1) {
    grid-column: 1;
  }

  .mfg-spec-form .field:nth-of-type(2) {
    grid-column: 2;
  }

  .mfg-spec-form .field:nth-of-type(3),
  .mfg-spec-form .field:nth-of-type(4) {
    grid-column: 1 / -1;
  }

  .mfg-spec-form .field:nth-of-type(5) {
    grid-column: 1;
  }

  .mfg-spec-form .field:nth-of-type(6) {
    grid-column: 2;
  }

  .mfg-spec-form .field--checkbox,
  .mfg-spec-form button[type="submit"],
  .mfg-spec-form .form-status {
    grid-column: 1 / -1;
  }
}

/* AI Packaging Assistant — step configurator (not a chat/messenger UI):
   progress indicator, one question per screen, large choice cards,
   Back/Next, live summary sidebar on desktop. */
.ai-config {
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
}

.ai-config__intro {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}

.ai-config__header strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.ai-config__header p {
  color: var(--graphite-700);
  margin-bottom: var(--space-lg);
}

.ai-config__body {
  display: grid;
  gap: 0;
}

.ai-config__body[hidden] {
  display: none;
}

@media (min-width: 900px) {
  .ai-config__body {
    grid-template-columns: 1fr 320px;
  }
}

.ai-config__main {
  padding: var(--space-xl) var(--space-lg);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.ai-config__progress {
  margin-bottom: var(--space-xl);
}

.ai-config__dots {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}

.ai-config__dot {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--border-hairline);
}

.ai-config__dot[data-state="done"] {
  background: var(--brand-accent);
}

.ai-config__dot[data-state="current"] {
  background: var(--brand-accent-light);
}

.ai-config__step-label {
  font-size: var(--text-xs);
  color: var(--graphite-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-config__step {
  flex: 1;
}

.ai-config__question {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.ai-config__hint {
  color: var(--graphite-700);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.ai-config__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.ai-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 64px;
  padding: var(--space-sm) var(--space-md);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .ai-choice-card:hover {
    border-color: var(--brand-accent);
  }
}

.ai-choice-card__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--hairline) solid var(--border-hairline);
}

.ai-choice-card[aria-pressed="true"] {
  border-color: var(--brand-accent);
  background: var(--warm-white-100);
}

.ai-choice-card[aria-pressed="true"] .ai-choice-card__check {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

.ai-config__error {
  color: var(--danger);
  background: #fbeae7;
  border: var(--hairline) solid #f0c7bd;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  margin-top: var(--space-lg);
}

.ai-config__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--border-hairline);
}

.ai-config__nav [data-back] {
  margin-right: auto;
}

.ai-config__summary {
  background: var(--warm-white-100);
  padding: var(--space-xl) var(--space-lg);
  border-top: var(--hairline) solid var(--border-hairline);
}

@media (min-width: 900px) {
  .ai-config__summary {
    border-top: none;
    border-left: var(--hairline) solid var(--border-hairline);
  }
}

.ai-config__summary h2 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-md);
}

.ai-config__summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

.ai-config__summary-row dt {
  font-size: var(--text-xs);
  color: var(--graphite-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-config__summary-row dd {
  margin: 0;
  font-weight: 600;
}

.ai-config__summary-row[data-answered="false"] dd {
  color: var(--graphite-700);
  font-weight: 400;
}

.ai-config__fallback {
  margin-top: var(--space-lg);
}

.ai-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.ai-summary-table th,
.ai-summary-table td {
  text-align: left;
  padding: var(--space-2xs) var(--space-sm);
  border-bottom: var(--hairline) solid var(--border-hairline);
}

/* ============================================================
   PRODUCTION-MERGE (2026-08-02) -- /vyrobnytstvo/ page-specific
   components. Everything below is scoped with an "mfg-" or
   "manufacturing-" prefix and used only by pages/manufacturing.py.
   ============================================================ */

/* Compact product-range teaser -- deliberately smaller/plainer than
   .card--product (the full catalog grid card): a simple photo + name,
   no description, no arrow icon, no hover lift beyond a quiet border
   tint. Goal is to show the assortment exists, not replace the
   catalog. */
.manufacturing-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem; /* FINAL-VISUAL-POLISH: --space-md (24px) + ~4px */
}

.manufacturing-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs);
  transition: border-color 200ms var(--ease-standard),
    transform 200ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard);
}

/* FINAL-VISUAL-POLISH (2026-08-02): a quiet premium lift -- scale
   capped at 1.018 (within the 1.015-1.02 ceiling), translateY capped
   at -2.5px (within 2-3px), a touch more shadow than the sitewide
   --shadow-sm. Gated to real pointer devices so touch never gets a
   stuck hover state; transform removed under prefers-reduced-motion. */
@media (hover: hover) and (pointer: fine) {
  .manufacturing-product-card:hover {
    border-color: var(--brand-accent);
    transform: scale(1.018) translateY(-2.5px);
    box-shadow: var(--shadow-md);
  }
}

.manufacturing-product-card:focus-visible {
  border-color: var(--brand-accent);
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .manufacturing-product-card {
    transition: border-color 200ms var(--ease-standard);
  }

  .manufacturing-product-card:hover {
    transform: none;
  }
}

.manufacturing-product-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--warm-white-100);
}

.manufacturing-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manufacturing-product-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 var(--space-3xs) var(--space-3xs);
}

@media (max-width: 1099.98px) {
  .manufacturing-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599.98px) {
  .manufacturing-product-grid {
    grid-template-columns: 1fr;
  }

  .manufacturing-product-card {
    flex-direction: row;
    align-items: center;
  }

  .manufacturing-product-card__media {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    aspect-ratio: auto;
  }

  .manufacturing-product-card__name {
    padding: 0;
  }
}

/* Custom-parameters grid ("Що можна погодити під ваше замовлення") --
   seven items, so a divided-panel container (like .company-info-grid,
   built for exactly four) would need awkward border math for an
   uneven last row. Plain gap-separated tiles instead, no container
   border. 4 columns down to 1280px, 3 from 1280 to laptop width, 2 on
   tablet, 1 on mobile -- covers this section's own "3x2 or 4x2
   depending on width" brief. */
.mfg-params__intro {
  max-width: 64ch;
  color: var(--graphite-700);
  /* FINAL-VISUAL-POLISH (2026-08-02): --space-lg (32px) -> 22px, a
     ~10px tightening between the intro line and the grid below. */
  margin-bottom: 1.375rem;
}

.mfg-params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* FINAL-VISUAL-POLISH: row-gap 32px -> 42px (~10px more air between
     row 1 and row 2); column-gap unchanged. */
  gap: 2.625rem var(--space-md);
}

@media (min-width: 1280px) {
  .mfg-params-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1099.98px) {
  .mfg-params-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599.98px) {
  .mfg-params-grid {
    grid-template-columns: 1fr;
  }
}

.mfg-param__icon {
  display: block;
  color: var(--brand-accent);
  margin-bottom: var(--space-sm);
}

.mfg-param__title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
  /* FINAL-VISUAL-POLISH (2026-08-02): reserves room for two lines
     regardless of actual title length, so descriptions across a row
     start at the same y-position instead of jumping around based on
     whether a given title happens to wrap. */
  min-height: 2.55rem;
}

.mfg-param__desc {
  font-size: var(--text-sm);
  /* FINAL-VISUAL-POLISH: --graphite-700 -> --graphite-900, a touch
     darker/more legible without reading as heavy body text. */
  color: var(--graphite-900);
}

/* Order timeline ("Як запускається замовлення") -- horizontal 6-up row
   on desktop, 3 columns / 2 rows on tablet, a vertical list on mobile.
   Thin top border instead of a full divider grid (simpler to keep
   correct across an intermediate 3-column step). No photos, per this
   section's explicit brief. */
.mfg-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
}

.mfg-timeline__step {
  border-top: 2px solid var(--brand-accent);
  padding-top: var(--space-md);
}

/* FINAL-VISUAL-POLISH (2026-08-02): the plain "01" text became a
   compact filled circle (30px, within the 28-34px target) straddling
   the top border -- the classic "line running through the badge"
   timeline read, without turning this into a heavier infographic (the
   line itself is still a plain 2px solid rule, unchanged). */
.mfg-timeline__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -17px;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background: var(--brand-accent);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mfg-timeline__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-3xs);
  /* Reserves two lines regardless of actual title length, so
     descriptions across the row start at the same y-position instead
     of jumping around. */
  min-height: 2rem;
}

.mfg-timeline__desc {
  font-size: var(--text-sm);
  color: var(--graphite-700);
}

@media (max-width: 1099.98px) {
  .mfg-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-lg);
  }
}

/* Mobile: vertical timeline -- badge + connecting line on the left,
   text on the right, in DOM order (number, then title+desc; see
   order_timeline()'s docstring in sections.py -- no CSS reordering). */
@media (max-width: 599.98px) {
  .mfg-timeline {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }

  .mfg-timeline__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    border-top: none;
    padding-top: 0;
  }

  .mfg-timeline__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: -1.5rem;
    width: 2px;
    background: var(--brand-accent-light);
  }

  .mfg-timeline__number {
    margin-top: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .mfg-timeline__body {
    flex: 1;
    min-width: 0;
  }

  .mfg-timeline__title {
    min-height: 0;
  }
}

/* Compact 3-argument trust strip -- quiet, not a repeat of the company
   page's documents block. */
.mfg-trust {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 700px) {
  .mfg-trust {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xl);
  }
}

.mfg-trust__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mfg-trust__icon {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.15em;
  color: var(--brand-accent);
}

.mfg-trust__link {
  margin: 0;
}