/* =====================================================================
   radio-ukraine.com.ua — unified site stylesheet
   Single source of truth for all custom design-system CSS. Linked
   sitewide via <link rel="stylesheet"> (Custom Code snippet, elementor_head,
   include/general) so it loads once and caches like any other static asset.

   Scoping discipline: every rule here either targets a class this file
   itself defines (.eh-*, .ehf-*), or a specific .elementor-element-{id}
   on a page/template this project controls. Nothing here targets a bare
   Elementor/theme class unscoped - that's what caused conflicts on other
   posts earlier. The one intentional exception (.elementor-post__meta-data)
   is called out explicitly below.
   ===================================================================== */

/* ================= DESIGN TOKENS ================= */

:root {
  /* ---- Spacing scale (site-wide) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 64px;

  /* ---- Brand colors ---- */
  --color-primary: #f0a92e;
  --color-primary-deep: #c97f13;
  --color-accent-hot: #ff5722;
  --color-ink: #14110d;
  --color-ink-deep: #0a0a0a;
  --color-ink-soft: #1f1a13;
  --color-paper: #f6f5f3;
  --color-text: #1a1712;
  --color-text-muted: #5c5648;
  --color-text-on-dark: #f6f1e7;
  --color-text-on-dark-muted: #b9b0a0;
  --color-decoration: #ececec;
  --color-border: rgba(20, 17, 13, 0.1);
  --color-border-on-dark: rgba(240, 169, 46, 0.25);

  /* ---- Typography ---- */
  --font-text: 'SiteText', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-base: 'SiteSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 0.75rem;
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.1rem);
  --fs-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 4vw, 5.25rem);
  --fs-display: clamp(4rem, 2.5rem + 7vw, 9rem);
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Component spacing aliases (anchored to the scale above) ---- */
  --space-3xs: var(--space-1);
  --space-2xs: var(--space-2);
  --space-xs: var(--space-3);
  --space-sm: var(--space-4);
  --space-md: var(--space-5);
  --space-lg: clamp(var(--space-6), 0.85rem + 1.2vw, 1.75rem);
  --space-xl: clamp(var(--space-7), 1.15rem + 2.2vw, 2.75rem);
  --space-2xl: clamp(2.25rem, 1.4rem + 3.5vw, 4rem);
  --space-3xl: clamp(2.75rem, 1.6rem + 4.5vw, 5rem);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 3vw, 2.25rem);
  --grid-gap: clamp(0.85rem, 1.5vw, 1.35rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --hero-radius: 48px;
  --hero-design-w: 1200px;
  --sequence-design-w: 1200px;
  --hero-inset: 1.5vw;
  --header-offset: 40px;
  --border-w: 1.5px;
}

/* Unbounded - matches the Kraina FM brand typeface (confirmed with partners).
   Self-hosted variable font, split into Cyrillic/Latin subsets so each page
   only downloads the ranges it actually renders. Still aliased as 'SiteSans'
   so every rule in this file stays font-agnostic. */
@font-face {
  font-family: 'SiteSans';
  src: url('/wp-content/uploads/fonts/unbounded-cyrillic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SiteSans';
  src: url('/wp-content/uploads/fonts/unbounded-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Onest - the informational/supporting face, paired with Unbounded (display).
   Unbounded is reserved for headings and large numerals; Onest carries intro
   copy, captions, labels and eyebrows. Same Cyrillic/Latin subsetting. */
@font-face {
  font-family: 'SiteText';
  src: url('/wp-content/uploads/fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'SiteText';
  src: url('/wp-content/uploads/fonts/onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================= SITE-WIDE: BUTTON HOVER ================= */
/* Safety net for any button not covered by its own page-specific hover rule
   (native Elementor Button widgets, forms, etc.) - the .eh-* CTA classes get
   the same scale via their own rules, scoped alongside their other styles. */
button,
input[type="submit"],
input[type="button"],
.elementor-button {
  transition: 0.35s all ease-out;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.elementor-button:hover {
  transform: scale(0.95);
}

/* ================= HOMEPAGE (post 3538) BASE ================= */

.eh-root {
  width: 100%;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The theme's own bare header fallback renders alongside the homepage's embedded
   header (the homepage is intentionally excluded from the shared header template
   in favor of its own custom copy) - suppress the redundant bare one. */
#site-header {
  display: none;
}

.eh-root *,
.eh-root *::before,
.eh-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.eh-root img,
.eh-root svg {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

.eh-root a {
  color: inherit;
  text-decoration: none;
}

.eh-root ul {
  list-style: none;
}

/* Grid system: section backgrounds run full-bleed, content is capped at
   --container-max (1200px) and centred, with --container-pad as the gutter
   that keeps text off the viewport edge on small screens. max-width includes
   the padding so the *content box* is exactly 1200px, not 1200-minus-gutters.
   One rule, no breakpoints needed - it degrades continuously. */
.eh-container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-pad));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.eh-section {
  padding-block: var(--space-2xl);
  position: relative;
}

.eh-accent {
  color: var(--color-primary);
}

.eh-icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ================= HOMEPAGE: HERO =================
   Two layout regimes, split hard at 900px:

   >= 901px  The hero content is authored at its exact Figma pixel values
             inside .eh-hero__scaler, which is a fixed 1200px wide. A small
             script scales that box down proportionally (transform: scale)
             so the composition stays pixel-faithful at every desktop width
             instead of reflowing. .eh-hero__scale-wrap gets an explicit
             height because a transform doesn't affect layout size.

   <= 900px  The script clears its inline styles and this file's media query
             takes over with a normal fluid/stacked layout - scaling a
             desktop composition down to phone width would leave the type
             unreadably small.

   Within the scaler the headline is a 3-row grid; the studio photo spans
   rows 1-2 behind the text (z-index 0), so row 1 sits over its top fade and
   row 2 is pinned to its bottom edge. Fades are baked into the JPG. */

.eh-hero {
  position: relative;
  overflow: hidden;
  width: 97vw;
  margin: 0 auto;
  margin-top: 0;
  background: var(--color-ink-deep);
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  /* was clamp(4.5rem, 6.6vw, 1rem) - min (72px) exceeds max (16px), so
     CSS resolved it as max(72px, min(6.6vw, 16px)) = always exactly
     72px at any width. Behaviour-identical; Hero's verified 1027px
     height was tuned against this constant, not a responsive formula. */
  padding-top: 72px;
  padding-bottom: clamp(4rem, 4.4vw, 4.125rem);
}

.eh-hero__scale-wrap {
  position: relative;
  width: 100%;
}

.eh-hero__scaler {
  width: var(--hero-design-w);
  transform-origin: top left;
}

.eh-hero__title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  font-size: 86px;
  font-weight: var(--fw-extrabold);
  line-height: 1.174;
}

.eh-hero__row {
  grid-column: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.eh-hero__title > .eh-hero__row:nth-child(1) { grid-row: 1; }
.eh-hero__title > .eh-hero__row:nth-child(3) { grid-row: 2; align-self: end; margin-bottom: 14px; }
.eh-hero__title > .eh-hero__row:nth-child(4) { grid-row: 3; margin-top: 14px; }

.eh-hero__media {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  z-index: 0;
  display: block;
  width: 93.7%;
  /* Figma: first title row stays put, image + rows 3-4 sit ~79px lower
     (169,186 / 1124.46x597 vs the design-w scaler) - safe on tablet/mobile,
     both fully redeclare this margin in their own blocks below. */
  margin-top: 114px;
}

/* Patch, not a fix: the source photo has a visible vertical seam baked in
   (~82% across). ::after can't render on the <img> itself (replaced
   element), so this sits on the wrapper instead, positioned as a % of
   its width so it tracks the image - which is also %-sized - at every
   breakpoint. Comes after the <img> in DOM order so it paints on top
   with no z-index needed. */
.eh-hero__media::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 82%;
  width: 2px;
  background: #000;
  pointer-events: none;
}

.eh-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Retina: the source is intentionally larger than its display box, so it is
     always downsampled. .eh-root img's -webkit-optimize-contrast is meant for
     upscaled art and would alias this badly - force the smooth filter back. */
  image-rendering: auto;
}

.eh-hero__break-m {
  display: none;
}

.eh-hero__word {
  background: linear-gradient(90deg, var(--color-text-on-dark) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.eh-hero__rule {
  flex: none;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.eh-hero__rule--lede {
  margin-left: 33px;
}

.eh-hero__lede {
  flex: none;
  width: 343px;
  font-size: 18px;
  font-weight: 300;
  line-height: 24px;
  color: var(--color-text-on-dark);
}

.eh-hero__lede-accent {
  font-weight: var(--fw-regular);
  background: linear-gradient(90deg, var(--color-text-on-dark) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Desktop: display:contents dissolves this wrapper so the rule, lede and arrow
   remain direct flex children of the last row, exactly as before. On tablet it
   becomes a real full-width flex row of its own (see the 900px block). */
.eh-hero__tail {
  display: contents;
}

.eh-hero__scroll {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 69px;
  transition: 0.35s all ease-out;
}

.eh-hero__scroll:hover {
  transform: translateY(4px) scale(1.1);
}

.eh-hero__scroll img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Tablet (Figma: 900px frame) ----
   Same composition as desktop but re-laid-out, not scaled: 54px type, the
   photo bleeds past the container on both sides, and the lede + arrow drop to
   their own full-width row (lede left, arrow hard right) instead of sitting
   inline after КОМПАНІЇ. Ratios are in em so the whole thing tracks the
   headline as it scales down toward the phone breakpoint. */
@media (max-width: 900px) {
  .eh-hero__scaler {
    width: 100% !important;
    transform: none !important;
  }
  .eh-hero__scale-wrap {
    height: auto !important;
  }
  .eh-hero__title {
    font-size: clamp(1.4rem, 6vw, 3.375rem);
    line-height: 1.24;
  }
  .eh-hero__rule {
    height: 1.87em;
  }
  .eh-hero__media {
    width: 128%;
    margin-left: -12%;
    margin-top: 0.48em;
  }
  .eh-hero__title > .eh-hero__row:nth-child(3) {
    margin-bottom: -0.66em;
  }
  .eh-hero__title > .eh-hero__row:nth-child(4) {
    margin-top: 0.33em;
  }
  .eh-hero__row--last {
    flex-wrap: wrap;
    row-gap: 0.2em;
  }
  .eh-hero__tail {
    display: flex;
    flex-basis: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
  }
  .eh-hero__rule--lede {
    display: none;
  }
  .eh-hero__lede {
    flex: none;
    width: min(343px, 62%);
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    line-height: 1.333;
  }
  .eh-hero__scroll {
    width: 50px;
    height: 69px;
  }
}

/* ---- Mobile (Figma: 390px frame) ----
   A genuinely different composition, not a squeezed tablet:

   * the photo moves ABOVE the type instead of sitting behind it
   * all four headline lines merge into one block sharing a SINGLE rule,
     drawn as .eh-hero__title::before spanning the three text rows - hence
     the switch to a 2-column grid (rule | text)
   * .eh-hero__row--last becomes display:contents so КОМПАНІЇ and the
     lede/arrow pair can be placed as independent grid rows
   * the section fills the screen (100dvh, with a 100vh fallback for older
     mobile browsers); dvh matters here because 100vh on iOS Safari measures
     past the URL bar and would crop the arrow. */
@media (max-width: 600px) {
  .eh-hero {
    --hero-radius: 24px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .eh-hero .eh-container {
    padding-inline: 33px;
  }

  .eh-hero__title {
    grid-template-columns: 2px minmax(0, 1fr);
    column-gap: 15px;
    row-gap: 0;
    font-size: clamp(1.5rem, 6.15vw, 2.25rem);
    line-height: 1.24;
  }

  /* the single merged rule, spanning all three headline rows */
  .eh-hero__title::before {
    content: '';
    grid-column: 1;
    grid-row: 2 / 5;
    align-self: stretch;
    background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
  }

  .eh-hero__rule {
    display: none;
  }

  .eh-hero__break-m {
    display: inline;
  }

  .eh-hero__media {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 106%;
    margin-left: -3%;
    margin-top: 0;
    margin-bottom: -15px;
    aspect-ratio: 330 / 263;
  }

  .eh-hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .eh-hero__title > .eh-hero__row:nth-child(1) { grid-column: 2; grid-row: 2; margin: 0; }
  .eh-hero__title > .eh-hero__row:nth-child(3) { grid-column: 2; grid-row: 3; margin: 0; }

  .eh-hero__row--last {
    display: contents;
  }

  .eh-hero__row--last > .eh-hero__word {
    grid-column: 2;
    grid-row: 4;
  }

  .eh-hero__tail {
    display: flex;
    grid-column: 2;
    grid-row: 5;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
  }

  .eh-hero__lede {
    flex: 1 1 auto;
    width: auto;
    font-size: clamp(0.75rem, 3.08vw, 0.875rem);
    line-height: 2;
  }

  .eh-hero__scroll {
    width: 50px;
    height: 69px;
  }

  /* navbar: logo | (nav hidden) | burger */
  .header-main {
    margin-top: 12px;
  }

  .header-main > .e-con-inner {
    padding-inline: calc(33px + var(--hero-inset));
  }

  .logo-set img,
  .logo-set .elementor-widget-image a img[src$=".svg"] {
    width: clamp(6.5rem, 32.3vw, 9rem);
  }

  .header-main .elementor-element-0acfd70 .elementor-icon svg {
    width: 25px;
    height: auto;
  }
}

/* ================= HOMEPAGE: SECTION ABOUT =================
   Figma frame 1200x811 (the safe area, x=200..1400 of the 1600 master).
   Two regimes, per the brief:
     * intro + placement formats: responsive flow
     * .media-sequence__stage: a fixed 1200x512 composition holding the route,
       its six milestones and their nodes. Every coordinate below is measured
       from the Figma layer geometry, so the stage is scaled as a unit by JS
       rather than reflowed - reflowing it would break the route alignment.
   Stage origin is frame y=116, so stage-y = frame-y - 116 throughout.
   Type: Unbounded for the display heading, Onest for all supporting copy. */

.section-about-company {
  position: relative;
  background: var(--color-paper);
  margin-top: var(--space-2xl);
  padding-block: 30px 41px;
  overflow: hidden;
}

.section-about-company__intro {
  position: relative;
  padding-left: 19px;
}

/* same vertical rule treatment as the hero */
.section-about-company__intro::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.section-about-company__title {
  margin: 0;
  font-family: var(--font-base);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--color-text);
  text-transform: uppercase;
}

/* Figma's desktop heading is 3 lines ("Про вашу" / "компанію дізнається" /
   "вся Україна!"), which also restores the height the description/route/
   placement-chips below it were originally positioned against - hidden by
   default (same pattern as .eh-hero__break-m) so tablet/mobile keep their
   existing natural wrap, unaffected by these hard breaks. */
.section-about-company__break-d {
  display: none;
}

/* Figma paints this run with a black -> #FF5722 ramp spanning far past the line
   itself (x 216.9..1124.4), so its visible end lands mid-ramp rather than at
   full orange. background-size reproduces that longer ramp, in em so it tracks
   the responsive heading. */
.section-about-company__title-accent {
  background-image: linear-gradient(90deg, #000 0%, var(--color-accent-hot) 100%);
  background-size: 18.9em 100%;
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-about-company__description {
  margin: var(--space-6) 0 0;
  max-width: 33rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--color-text);
}

/* ---- the route graph ---- */

.media-sequence {
  position: relative;
  margin-top: -170px;
}

.media-sequence__stage {
  position: relative;
  width: var(--sequence-design-w);
  height: 512px;
  transform-origin: top left;
}

/* the route deliberately runs past the safe area on both sides, so the stage
   must not clip it - the section handles clipping instead */
.media-sequence__route-svg--desktop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* <=1240px (tablet+mobile) shares one route SVG using its own curve
   (node 1577:1972 - genuinely different shape from desktop's, not a
   scaled crop), inlined as real <path> elements so both routes are
   stroke-drawable. Desktop/responsive variants are mutually exclusive
   via .eh-root-scoped display toggles (same pattern as
   .trust-section__signal-svg--desktop/--tablet), so only one is ever
   visible, and CSS alone decides which - no JS viewport check. */
.eh-root .media-sequence__route-svg--desktop { display: block; }
.eh-root .media-sequence__route-svg--tablet  { display: none; }

.media-sequence__route-svg--tablet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.media-sequence__milestones {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-sequence__milestone {
  position: absolute;
  inset: 0;
}

.media-sequence__icon,
.media-sequence__label,
.media-sequence__node {
  position: absolute;
  transform: translateX(-50%);
}

.media-sequence__icon {
  display: block;
}

.media-sequence__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.media-sequence__label {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.28;
  color: var(--color-ink);
  text-align: center;
}

/* node: 34px gradient disc with a 3px white ring, on a soft 50px amber halo */
.media-sequence__node {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg, #f5bd4e 0%, #d48a16 100%);
}

.media-sequence__node::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(240, 169, 46, 0.12);
  filter: blur(6px);
  z-index: -1;
}

.media-sequence__node-num {
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink);
}

/* ---- placement formats ---- */

.placement-formats {
  margin-top: 63px;
  padding-left: 27px;
}

.placement-formats__title {
  margin: 0;
  font-family: var(--font-text);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: #8d8578;
  text-transform: uppercase;
}

.placement-formats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 11px 0 0 -2px;
  padding: 0;
  list-style: none;
}

.placement-formats__item {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding-inline: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.media-sequence__milestone--cities .media-sequence__icon {
  left: 85.07px;
  top: 358.3px;
  width: 119.57px;
  height: 56.7px;
}
.media-sequence__milestone--cities .media-sequence__label {
  left: 85.07px;
  top: 427.0px;
  width: 121.39px;
}
.media-sequence__milestone--cities .media-sequence__node {
  left: 85.07px;
  top: 476.5px;
}

.media-sequence__milestone--radio .media-sequence__icon {
  left: 314.43px;
  top: 430.0px;
  width: 72.64px;
  height: 50.0px;
}
.media-sequence__milestone--radio .media-sequence__label {
  left: 314.43px;
  top: 489.0px;
  width: 119.0px;
}
.media-sequence__milestone--radio .media-sequence__node {
  left: 314.43px;
  top: 401.5px;
}

.media-sequence__milestone--youtube .media-sequence__icon {
  left: 562.69px;
  top: 196.42px;
  width: 63.85px;
  height: 64.17px;
}
.media-sequence__milestone--youtube .media-sequence__label {
  left: 562.69px;
  top: 275.0px;
  width: 107.0px;
}
.media-sequence__milestone--youtube .media-sequence__node {
  left: 562.69px;
  top: 325.5px;
}

.media-sequence__milestone--tiktok .media-sequence__icon {
  left: 763.68px;
  top: 348.0px;
  width: 57.71px;
  height: 58.0px;
}
.media-sequence__milestone--tiktok .media-sequence__label {
  left: 763.68px;
  top: 415.0px;
  width: 91.0px;
}
.media-sequence__milestone--tiktok .media-sequence__node {
  left: 763.68px;
  top: 315.5px;
}

.media-sequence__milestone--news .media-sequence__icon {
  left: 963.68px;
  top: 126.62px;
  width: 62.25px;
  height: 57.75px;
}
.media-sequence__milestone--news .media-sequence__label {
  left: 963.68px;
  top: 203.0px;
  width: 95.0px;
}
.media-sequence__milestone--news .media-sequence__node {
  left: 963.68px;
  top: 260.5px;
}

.media-sequence__milestone--digital .media-sequence__icon {
  left: 1156.22px;
  top: 223.62px;
  width: 67.42px;
  height: 67.76px;
}
.media-sequence__milestone--digital .media-sequence__label {
  left: 1156.22px;
  top: 305.0px;
  width: 74.0px;
}
.media-sequence__milestone--digital .media-sequence__node {
  left: 1156.22px;
  top: 182.5px;
}

/* ---- ABOUT: TABLET + MOBILE (<=1240px, Figma node 1577:1972) ----
   Not a scaled crop of the desktop 1200x512 stage - a real CSS layout at
   its own 854-wide reference, fluid via percentages + aspect-ratio so it
   tracks the container continuously across the whole range (no JS, no
   breakpoint sub-steps). Icons/labels keep their exact desktop px size
   (Figma's tablet values are ~96% of desktop's - close enough that
   reusing desktop's sizing keeps them fully readable and avoids a second
   set of near-duplicate dimensions); only left/top move, as percentages
   of the stage's own box, so position tracks the route while visual size
   stays constant. left values are centre-x (the shared .media-sequence__
   icon/__label/__node transform:translateX(-50%) rule already re-centres
   them - same convention the desktop rules already use).

   Covers mobile too, not just 768-1240: scaleSequence() only runs above
   1240px now (the fixed 1200x512 desktop stage would otherwise render
   untransformed and overflow badly below that), so this fluid layout is
   what mobile gets as well - matches "tablet and mobile share exactly
   the same route." Known open risk, not solved here: icon width/height
   stay fixed-px for readability, so at the narrow end of phone widths
   (~360-390px) neighbouring icons may sit close together or touch: a
   dedicated mobile pass, not attempted in this change.

   Reference: stage-local y=0 is the route/glow's own top edge (Figma
   y=173.96 of the 811-tall frame); stage height (418.72) spans down to
   the tallest content (the "Країна FM" label's bottom edge). Figma's own
   description box ends at y=173.96 too - i.e. zero gap to the stage -
   hence margin-top:0 below rather than desktop's tuned -170px. */
@media (max-width: 1240px) {
  .media-sequence {
    margin-top: 0;
  }

  .media-sequence__stage {
    width: 100%;
    height: auto;
    aspect-ratio: 854 / 418.72;
    transform: none;
  }

  .media-sequence__label {
    font-size: 20px;
  }

  .media-sequence__milestone--cities .media-sequence__icon  { left: 8.945%;  top: 44.199%; }
  .media-sequence__milestone--cities .media-sequence__label { left: 9.780%;  top: 61.146%; }
  .media-sequence__milestone--cities .media-sequence__node  { left: 7.936%;  top: 76.882%; }

  .media-sequence__milestone--radio .media-sequence__icon  { left: 26.355%; top: 80.495%; }
  .media-sequence__milestone--radio .media-sequence__label { left: 26.345%; top: 94.034%; }
  .media-sequence__milestone--radio .media-sequence__node  { left: 26.320%; top: 67.329%; }

  .media-sequence__milestone--youtube .media-sequence__icon  { left: 46.200%; top: 19.118%; }
  .media-sequence__milestone--youtube .media-sequence__label { left: 46.180%; top: 37.149%; }
  .media-sequence__milestone--youtube .media-sequence__node  { left: 46.226%; top: 52.283%; }

  .media-sequence__milestone--tiktok .media-sequence__icon  { left: 62.165%; top: 64.497%; }
  .media-sequence__milestone--tiktok .media-sequence__label { left: 62.145%; top: 81.697%; }
  .media-sequence__milestone--tiktok .media-sequence__node  { left: 62.151%; top: 53.000%; }

  .media-sequence__milestone--news .media-sequence__icon  { left: 77.730%; top: 7.167%; }
  .media-sequence__milestone--news .media-sequence__label { left: 77.635%; top: 24.850%; }
  .media-sequence__milestone--news .media-sequence__node  { left: 78.193%; top: 40.342%; }

  .media-sequence__milestone--digital .media-sequence__icon  { left: 93.530%; top: 42.205%; }
  .media-sequence__milestone--digital .media-sequence__label { left: 93.499%; top: 60.952%; }
  .media-sequence__milestone--digital .media-sequence__node  { left: 93.416%; top: 30.550%; }

  .eh-root .media-sequence__route-svg--desktop { display: none; }
  .eh-root .media-sequence__route-svg--tablet  { display: block; }
}

/* ================= HOMEPAGE: SECTION SERVICES =================
   Figma frame 1200x820 = the safe area exactly. Editorial bento:
   one tall Sales card left, Team + Reputation stacked right.

   Content is inset 17px from the safe-area edge (aligning with the heading
   text, which sits after the 2px rule + 15px gap) while the cards still run
   to the full 1200 on the right - so the grid is deliberately asymmetric.

   The organic curves on the Team/Reputation photos are the exact Figma mask
   paths via clip-path: path(), not approximated diagonals.

   Typography: every layer in this frame is Unbounded (verified by measuring
   the hug-width layers - "напрями" 87.9px vs Figma 88.0, "Репутація" 208.6
   vs 208.0; Onest would be 20-50px narrower). */

.section-services {
  position: relative;
  margin-top: var(--space-2xl);
  scroll-margin-top: var(--header-offset, 120px);
}

.section-services__container {
  position: relative;
}

/* Neutral everywhere below 1241px (both wrap and scaler stay 100% wide,
   a no-op) - the fixed 1200px composition + transform:scale() only turns
   on in the desktop-only block below. Tablet/mobile already reflow this
   composition entirely differently (flex-column stacks) and are
   untouched by this wrapper. */
.section-services__scale-wrap {
  position: relative;
  width: 100%;
}

.section-services__scaler {
  width: 100%;
}

/* ---- header ---- */

.section-services__header {
  position: relative;
  padding-left: 17px;
}

.section-services__header::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.section-services__heading {
  margin: 0;
  font-family: var(--font-base);
  font-size: 48px;
  font-weight: var(--fw-extrabold);
  line-height: 60px;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, #000 0%, #ff5722 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-services__counter {
  position: absolute;
  right: 0;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: normal;
  color: #000;
  white-space: nowrap;
}

.section-services__counter-num {
  font-size: 36px;
  font-weight: var(--fw-extrabold);
  line-height: 45px;
  background: linear-gradient(90deg, #454545 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- bento grid ---- */

.services-grid {
  display: grid;
  grid-template-columns: 490.59px 668px;
  grid-template-rows: 300px 300px;
  column-gap: 24.41px;
  row-gap: 24px;
  margin: 75px 0 0 17px;
}

.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service-card--sales      { grid-column: 1; grid-row: 1 / 3; border-radius: 27.8px / 33.68px; }
.service-card--team       { grid-column: 2; grid-row: 1; border-radius: 33.85px / 34px; }
.service-card--reputation { grid-column: 2; grid-row: 2; border-radius: 34px / 33.33px; }

/* hairline borders sit above the media */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}
.service-card--sales::after      { border: 1px solid rgba(255, 255, 255, 0.13); }
.service-card--team::after       { border: 1px solid rgba(255, 255, 255, 0.35); }
.service-card--reputation::after { border: 1px solid rgba(255, 255, 255, 0.12); }

/* ---- shared card furniture ---- */

.service-card__media {
  position: absolute;
  overflow: hidden;
}

.service-card__media img {
  position: absolute;
  display: block;
  max-width: none;
  transition: transform 0.6s ease-out;
}

.service-card__label {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 20px / 17.5px;
  background: var(--color-primary);
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 500;
  line-height: normal;
  color: #14110d;
  text-transform: uppercase;
  white-space: nowrap;
}

.service-card__icon {
  position: absolute;
  z-index: 4;
}

.service-card__icon img { display: block; width: 100%; height: 100%; }

.service-card__title {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-family: var(--font-base);
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: 40px;
}

.service-card__content {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card__content li {
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-light);
  line-height: 20px;
}

.service-card__content em {
  font-style: normal;
  font-weight: var(--fw-regular);
}

.service-card__divider {
  position: absolute;
  z-index: 4;
  height: 1px;
}

.service-card__index {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-family: var(--font-base);
  font-size: 52px;
  font-weight: var(--fw-bold);
  line-height: normal;
  text-align: right;
}

/* ---- 01 · SALES : tall photo card ---- */

.service-card--sales .service-card__media { inset: 0; }

/* Figma scales the portrait to 575.52x863.62 and offsets it, which is wider
   than object-fit:cover would produce - so it is sized explicitly. */
.service-card--sales .service-card__media img {
  left: -21px;
  top: -164.81px;
  width: 575.52px;
  height: 863.62px;
}

/* cinematic falloff; stops remapped from Figma's 681.43px-tall overlay
   onto the 624px card so the midpoint still lands where the design has it */
.service-card--sales .service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 7, 6, 0.058) 0%,
    rgba(8, 7, 6, 0.22) 48.1%,
    rgba(8, 7, 6, 0.897) 100%);
}

.service-card--sales .service-card__glow {
  position: absolute;
  z-index: 3;
  left: 321.73px;
  top: 2.94px;
  width: 143.91px;
  height: 174.32px;
  border-radius: 50%;
  background: rgba(240, 169, 46, 0.1);
  pointer-events: none;
}

.service-card--sales .service-card__label   { left: 29.98px; top: 36px; width: 115.9px; height: 35px; }
.service-card--sales .service-card__icon    { left: 425.65px; top: 32.68px; width: 39.97px; height: 48.41px; }
.service-card--sales .service-card__title   { left: 29.98px; top: 414px; color: #fff; }
.service-card--sales .service-card__content { left: 29.98px; top: 469px; width: 267.78px; }
.service-card--sales .service-card__content li:nth-child(-n+2) { color: #f6f1e7; }
.service-card--sales .service-card__content li:nth-child(3)    { color: var(--color-primary); }
.service-card--sales .service-card__divider { left: 193.84px; top: 583.33px; width: 166.86px; background: rgba(255, 255, 255, 0.08); }
.service-card--sales .service-card__index   { right: 21.98px; top: 550px; width: 91.92px; color: rgba(255, 255, 255, 0.08); }

/* ---- 02 · TEAM : gold card, curved photo boundary ---- */

.service-card--team {
  background: linear-gradient(155.9deg, #f0b84a 0%, var(--color-primary) 62%, var(--color-primary-deep) 100%);
}

.service-card--team .service-card__media {
  left: 377.33px;
  top: 0;
  width: 291.672px;
  height: 300px;
  /* exact Figma teamPhotoClip path */
  clip-path: path("M42.7877 0H257.823C266.801 0 275.41 3.58214 281.758 9.95837C288.106 16.3346 291.672 24.9826 291.672 34V266C291.672 275.017 288.106 283.665 281.758 290.042C275.41 296.418 266.801 300 257.823 300H9.93504L61.7029 226C84.6002 192 84.6002 147 58.7163 113L4.95736 40C-6.98907 24 3.96183 0 23.8725 0H42.7877Z");
}

.service-card--team .service-card__media img {
  left: 0;
  top: -16px;
  width: 343.5px;
  height: 332px;
  transform: scaleX(-1);
}

.service-card--team .service-card__media-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18, 16, 12, 0.28) 0%,
    rgba(18, 16, 12, 0.272) 58%,
    rgba(18, 16, 12, 0.05) 100%);
}

.service-card--team .service-card__label   { left: 35.84px; top: 28px; width: 115.48px; height: 35px; }
.service-card--team .service-card__icon    { left: 282.73px; top: 22px; width: 47.79px; height: 32px; }
.service-card--team .service-card__title   { left: 36px; top: 85px; color: #000; }
.service-card--team .service-card__content { left: 36px; top: 141px; width: 310px; }
.service-card--team .service-card__content li:nth-child(-n+2) { color: #2a2115; }
.service-card--team .service-card__content li:nth-child(3)    { color: #14110d; }
.service-card--team .service-card__divider { left: 35.84px; top: 258px; width: 166.25px; background: rgba(20, 17, 13, 0.26); }
.service-card--team .service-card__index   { left: 218.02px; top: 224px; width: 91.59px; color: rgba(20, 17, 13, 0.11); }

/* ---- 03 · REPUTATION : dark card, curved photo boundary ---- */

.service-card--reputation { background: #12100c; }

.service-card--reputation .service-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(470.4px 210px at 557.76px 150px,
    rgba(240, 169, 46, 0.34) 0%,
    rgba(240, 169, 46, 0.09) 45%,
    rgba(240, 169, 46, 0) 100%);
}

.service-card--reputation .service-card__media {
  left: 331px;
  top: 0;
  width: 341px;
  height: 300px;
  z-index: 2;
  /* exact Figma repPhotoClip path - a different curve from the Team card */
  clip-path: path("M35.5208 0H300.743C311.42 0 321.659 3.5119 329.209 9.76311C336.759 16.0143 341 24.4928 341 33.3333V266.667C341 275.507 336.759 283.986 329.209 290.237C321.659 296.488 311.42 300 300.743 300H0C59.2014 254.902 89.9861 202.941 89.9861 148.039C89.9861 94.1176 68.6736 45.098 35.5208 0Z");
}

.service-card--reputation .service-card__media img {
  left: -97.46px;
  top: -126.47px;
  width: 440.46px;
  height: 547.06px;
}

.service-card--reputation .service-card__media-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(18, 16, 12, 0.22) 0%,
    rgba(18, 16, 12, 0.213) 58%,
    rgba(18, 16, 12, 0.04) 100%);
}

.service-card--reputation .service-card__label   { left: 36px; top: 23.45px; width: 116px; height: 34.31px; }
.service-card--reputation .service-card__title   { left: 36px; top: 85px; color: #fff; }
.service-card--reputation .service-card__content { left: 36px; top: 139px; width: 268px; }
.service-card--reputation .service-card__content li:nth-child(-n+2) { color: #f6f1e7; }
.service-card--reputation .service-card__content li:nth-child(3)    { color: var(--color-primary); }
.service-card--reputation .service-card__divider { left: 36px; top: 257.33px; width: 167px; background: rgba(255, 255, 255, 0.08); }
.service-card--reputation .service-card__index   { left: 219px; top: 224px; width: 92px; color: rgba(255, 255, 255, 0.08); }

/* ---- hover: image only, text stays put ---- */

@media (hover: hover) {
  .service-card:hover .service-card__media img { transform: scale(1.025); }
  .service-card--team:hover .service-card__media img { transform: scaleX(-1) scale(1.025); }
}

/* ---- entrance: once, 01 -> 02 -> 03 ---- */

.section-services[data-reveal] .section-services__header,
.section-services[data-reveal] .service-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-services[data-reveal="in"] .section-services__header,
.section-services[data-reveal="in"] .service-card {
  opacity: 1;
  transform: none;
}

.section-services[data-reveal="in"] .service-card--sales      { transition-delay: 0.12s; }
.section-services[data-reveal="in"] .service-card--team       { transition-delay: 0.24s; }
.section-services[data-reveal="in"] .service-card--reputation { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .section-services[data-reveal] .section-services__header,
  .section-services[data-reveal] .service-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .service-card:hover .service-card__media img,
  .service-card--team:hover .service-card__media img { transform: none; }
  .service-card--team .service-card__media img { transform: scaleX(-1); }
}


/* ---- SERVICES: TABLET (Figma frame 857x1405) ----
   Scoped through .eh-root so it outranks the global `.eh-root img` /
   `.eh-root svg` rules without !important. Desktop declarations untouched.

   Tablet Services layout is JS-toggled (see the .is-services-tablet
   resize listener in the homepage script) rather than a media query,
   so it stays deliberately fixed at the 857px reference design instead
   of scaling fluidly with cqw across the tablet range. */

.eh-root .section-services.is-services-tablet .section-services__container {
  width: min(857px, calc(100vw - 38px));
  max-width: 857px;
  margin-inline: auto;
  padding-inline: 0;
}

/* ---- header ---- */
.eh-root .section-services.is-services-tablet .section-services__header {
  height: 101px;
  min-height: 0;
  padding-left: 17px;
  display: block;
}

.eh-root .section-services.is-services-tablet .section-services__header::before {
  left: 4px;
  top: 0;
  width: 2px;
  height: 101px;
}

/* Figma's tablet heading node is 452x80 => 32px over a 40px line box.
   At 36px the first line measures 513px against that 452px width and is
   forced onto a third line, so the size follows Figma and nowrap lets the
   existing <br> be the only break. */
.eh-root .section-services.is-services-tablet .section-services__heading {
  width: auto;
  max-width: none;
  font-size: 32px;
  line-height: 40px;
  white-space: nowrap;
}

/* not part of the approved tablet design; kept in the DOM for desktop */
.eh-root .section-services.is-services-tablet .section-services__counter { display: none; }

/* ---- vertical stack ---- */
.eh-root .section-services.is-services-tablet .services-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 64px 0 0;
  gap: 30px;
}

.eh-root .section-services.is-services-tablet .service-card {
  --card-radius: 48px;
  grid-column: auto;
  grid-row: auto;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* height:383px was fixed regardless of width, so the card's own
     proportions distorted across the 768-1240 range instead of tracking
     Figma's 857x383 ratio; aspect-ratio keeps the shape correct at every
     width and reproduces the old 383px exactly at an 857px-wide card. */
  aspect-ratio: 857 / 383;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--card-radius);
  /* Belt-and-suspenders: overflow:hidden should already clip every
     decorative layer, but a stray fixed-position sub-element (the sales
     glow, fixed below) can end up in its own compositing layer that some
     engines don't clip against an ancestor's overflow correctly - an
     explicit rounded clip-path is a harder guarantee. */
  clip-path: inset(0 round var(--card-radius));
}

.eh-root .section-services.is-services-tablet .service-card--sales {
  /* This card had its own fixed 853px width + margin-left left over from
     an earlier desktop-derived pass, overriding the width:100% above and
     breaking it out of the flex column's default stretch alignment that
     Team/Reputation correctly use - removed outright, no replacement
     needed since the shared rule already produces the right width. */
  border-radius: var(--card-radius);
}

.eh-root .section-services.is-services-tablet .service-card--sales::after      { border-color: rgba(255, 255, 255, 0.35); }
.eh-root .section-services.is-services-tablet .service-card--team::after       { border-color: rgba(255, 255, 255, 0.35); }
.eh-root .section-services.is-services-tablet .service-card--reputation::after { border-color: rgba(255, 255, 255, 0.12); }

/* ---- shared card typography ---- */
.eh-root .section-services.is-services-tablet .service-card__label {
  font-size: 14px;
  border-radius: 999px;
}

.eh-root .section-services.is-services-tablet .service-card__title {
  font-size: 32px;
  line-height: 40px;
  top: 108px;
  left: 48px;
}

.eh-root .section-services.is-services-tablet .service-card__content {
  top: 178px;
  left: 46px;
  width: 394px;
  gap: 8px;
}

.eh-root .section-services.is-services-tablet .service-card__content li {
  font-size: 20px;
  line-height: 24px;
}

.eh-root .section-services.is-services-tablet .service-card__index {
  font-size: 52px;
  top: 296px;
  width: auto;
  right: auto;
}

.eh-root .section-services.is-services-tablet .service-card__divider { height: 1px; }

/* ---- 01 SALES ---- */
.eh-root .section-services.is-services-tablet .service-card--sales .service-card__media { inset: 0; }

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__media img {
  left: 1px;
  top: -605px;
  width: 1138px;
  height: 1708px;
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__overlay {
  background: linear-gradient(to bottom,
    rgba(8, 7, 6, 0.05) 0%,
    rgba(8, 7, 6, 0.22) 42%,
    rgba(8, 7, 6, 0.98) 100%);
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__glow {
  left: 559.4px;
  /* was -274.88px, an orphaned value from an earlier pass that put ~90%
     of the glow above the card's own top edge - reset to the desktop
     version's proportional top offset (near-flush with the card top),
     the only verified reference position available for this layer. */
  top: 2.94px;
  width: 250.22px;
  height: 303.1px;
  background: rgba(240, 169, 46, 0.1);
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__label {
  left: 45.7px;
  top: 35.75px;
  width: 147.24px;
  height: 44.68px;
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__icon {
  left: 370.65px;
  top: 35.65px;
  width: 48.7px;
  height: 47.55px;
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__divider {
  left: 45.7px;
  top: 329.38px;
  width: 211.98px;
}

.eh-root .section-services.is-services-tablet .service-card--sales .service-card__index {
  left: 302px;
  right: auto;
}

/* ---- 02 TEAM ---- */
.eh-root .section-services.is-services-tablet .service-card--team {
  background: linear-gradient(155.9deg, #f0b84a 0%, #f0a92e 62%, #c97f13 100%);
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__media {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: path("M538.175 0H813.639C825.139 0 836.168 4.573 844.3 12.714C852.431 20.854 856.999 31.895 856.999 43.407V339.593C856.999 351.105 852.431 362.146 844.3 370.286C836.168 378.427 825.139 383 813.639 383H496.09L562.406 288.527C591.738 245.12 591.738 187.67 558.58 144.263L489.714 51.067C474.41 30.64 488.438 0 513.944 0H538.175Z");
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__media img {
  left: 482.48px;
  top: -20.43px;
  width: 440.83px;
  height: 423.03px;
  transform: scaleX(-1);
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__label {
  left: 45.91px;
  top: 35.75px;
  width: 147.93px;
  height: 44.68px;
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__icon {
  left: 360.92px;
  top: 26.82px;
  width: 63.75px;
  height: 43.4px;
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__divider {
  left: 45.91px;
  top: 329.38px;
  width: 212.97px;
}

.eh-root .section-services.is-services-tablet .service-card--team .service-card__index {
  left: 283px;
  right: auto;
}

/* ---- 03 REPUTATION ---- */
.eh-root .section-services.is-services-tablet .service-card--reputation { background: #12100c; }

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__overlay {
  background: radial-gradient(
    599.9px 268.1px
    at 711.31px 191.5px,
    rgba(240, 169, 46, 0.34) 0%,
    rgba(240, 169, 46, 0.09) 45%,
    rgba(240, 169, 46, 0) 100%);
}

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__media {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: path("M467.423 0H805.66C819.277 0 832.335 4.484 841.963 12.46C851.591 20.44 857 31.27 857 42.56V340.44C857 351.73 851.591 362.56 841.963 370.54C832.335 378.52 819.277 383 805.66 383H422.124C497.623 325.42 536.883 259.09 536.883 189C536.883 120.16 509.703 57.58 467.423 0Z");
}

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__media img {
  left: 297.22px;
  top: -161.46px;
  width: 562.32px;
  height: 698.41px;
}

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__label {
  left: 45.91px;
  top: 29.94px;
  width: 147.93px;
  height: 43.81px;
}

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__divider {
  left: 45.91px;
  top: 328.53px;
  width: 212.97px;
}

.eh-root .section-services.is-services-tablet .service-card--reputation .service-card__index {
  left: 283px;
  right: auto;
}

/* ==========================================================================
   SERVICES — mobile (<=767px). Same single-column composition as the
   tablet stack, re-derived at Figma's mobile reference (312.458 x 139.64
   per card) rather than scaled via a shared unit — the mobile design isn't
   a uniform shrink of the tablet card (type sizes were hand-tuned larger
   for legibility), so values are ported directly from that export.

   Section itself matches the 97vw floating-panel convention .eh-hero /
   .trust-section / .section-why-us / .contact-footer already use, with the
   container's own inline padding zeroed (same pattern as .trust-section's
   tablet block) so the cards run edge-to-edge inside that 97vw panel — the
   heading gets its own small inset since it's text, not a full-bleed block.
   ========================================================================== */
@media (max-width: 767px) {
  .eh-root .section-services {
    width: 97vw;
    margin-inline: auto;
  }

  .eh-root .section-services__container {
    padding-inline: 0;
    max-width: none;
  }

  .eh-root .section-services__header {
    height: 37px;
    min-height: 0;
    padding-left: 20px;
    display: block;
  }

  .eh-root .section-services__header::before {
    left: 4px;
    top: 0;
    width: 1px;
    height: 37px;
  }

  .eh-root .section-services__heading {
    width: auto;
    max-width: none;
    font-size: 16px;
    line-height: 19px;
    white-space: normal;
  }

  .eh-root .section-services__counter { display: none; }

  .eh-root .services-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 24px 0 0;
    gap: 11px;
  }

  /* Card geometry scaled x1.3 (height + every position/box derived from it),
     card typography scaled x1.2 — two different factors, per instruction:
     a taller card with moderately bigger text reads roomier, not just
     stretched. */
  .eh-root .service-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    height: 182px;
    border-radius: 22.75px;
  }

  .eh-root .service-card--sales {
    width: 100%;
    margin-left: 0;
    border-radius: 22.75px;
  }

  .eh-root .service-card__label {
    font-size: 5.6px;
    border-radius: 999px;
  }

  .eh-root .service-card__title {
    font-size: 14.4px;
    line-height: 18px;
    top: 50.7px;
    left: 22.1px;
  }

  .eh-root .service-card__content {
    top: 84.83px;
    left: 21.66px;
    width: 185.9px;
    gap: 3.9px;
  }

  .eh-root .service-card__content li {
    font-size: 10.8px;
    line-height: 14.4px;
  }

  .eh-root .service-card__index {
    font-size: 28.8px;
    top: 136.5px;
    width: auto;
    right: auto;
  }

  .eh-root .service-card__divider { height: 1px; }

  /* Cards now span the full width of a 97vw section across the whole mobile
     range (roughly 320-767px), too wide a span for a single fixed-px photo
     crop to keep covering — object-fit:cover replaces the desktop/tablet
     absolute-crop technique here so each image always fills its card
     regardless of exact device width. */
  .eh-root .service-card__media img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  /* ---- 01 SALES ---- */
  .eh-root .service-card--sales .service-card__media {
    inset: 0;
    margin-right: -1rem;
    position: absolute;
  }

  .eh-root .service-card--sales .service-card__glow {
    left: 65.4%;
    top: -71.9%;
    width: 29.2%;
    height: 79.2%;
    background: rgba(240, 169, 46, 0.1);
  }

  .eh-root .service-card--sales .service-card__label {
    left: 21.71px;
    top: 16.97px;
    width: 69.81px;
    height: 21.19px;
  }

  .eh-root .service-card--sales .service-card__icon {
    left: 175.89px;
    top: 16.9px;
    width: 23.14px;
    height: 22.62px;
  }

  .eh-root .service-card--sales .service-card__divider {
    left: 21.71px;
    top: 156.26px;
    width: 100.62px;
  }

  .eh-root .service-card--sales .service-card__index {
    left: auto;
    right: 20.8px;
  }

  /* ---- 02 TEAM ---- */
  .eh-root .service-card--team .service-card__media {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fixed-px path() clipped against a 312.458-wide reference, but the card
       is 100% of a 97vw section — far wider than that on most phones — so
       the curve stopped partway across and exposed the card's background
       color on the right. An objectBoundingBox clipPath (defined once, near
       the top of this section, in homepage markup) scales with the real
       box on both axes instead. */
    clip-path: url(#service-clip-team-m);
  }

  /* width:100% on the shared rule above wasn't losing to max-width on
     paper, but it visibly kept rendering wide — hard px width/height here
     instead of a cap, !important so nothing upstream can re-widen it. */
  .eh-root .service-card--team .service-card__media img {
    transform: scaleX(-1);
    margin-left: 17rem;
    object-position: top center;
    width: 240px !important;
    height: 182px !important;
    max-width: 240px !important;
  }

  .eh-root .service-card--reputation .service-card__media img {
    /* same constrained-width treatment as Team, so the crop stays a
       portrait-like view instead of stretching over the full clip width */
    margin-left: 17rem;
    object-position: top center;
    width: 240px !important;
    height: 182px !important;
    max-width: 240px !important;
  }

  .eh-root .service-card--team .service-card__label {
    left: 21.79px;
    top: 16.97px;
    width: 70.2px;
    height: 21.19px;
  }

  .eh-root .service-card--team .service-card__icon {
    left: 171.21px;
    top: 12.73px;
    width: 30.29px;
    height: 20.54px;
  }

  .eh-root .service-card--team .service-card__divider {
    left: 21.79px;
    top: 156.26px;
    width: 101.01px;
  }

  .eh-root .service-card--team .service-card__index {
    left: auto;
    right: 20.8px;
  }

  /* ---- 03 REPUTATION ---- */
  .eh-root .service-card--reputation .service-card__overlay {
    background: radial-gradient(
      70% 70%
      at 83% 50%,
      rgba(240, 169, 46, 0.34) 0%,
      rgba(240, 169, 46, 0.09) 45%,
      rgba(240, 169, 46, 0) 100%);
  }

  .eh-root .service-card--reputation .service-card__media {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: url(#service-clip-rep-m);
  }

  .eh-root .service-card--reputation .service-card__label {
    left: 21.79px;
    top: 14.21px;
    width: 70.2px;
    height: 20.8px;
  }

  .eh-root .service-card--reputation .service-card__divider {
    left: 21.79px;
    top: 155.87px;
    width: 101.01px;
  }

  .eh-root .service-card--reputation .service-card__index {
    left: auto;
    right: 20.8px;
  }
}

/* ================= HOMEPAGE: SECTION TRUST =================
   Desktop frame 1600x811 with a 1200px safe area; tablet frame 853x782 with
   a 907x461 signal stage.

   Two SVG variants exist (--desktop / --tablet) and exactly one is ever
   displayed: the shared .trust-section__signal-svg class carries no display
   of its own, so the variants are the only thing switching. That is what
   previously produced four horizontal lines instead of two.

   Brand items are positioned from a single centre-based system
   (--brand-x + translateX(-50%)) so the tablet media query can override
   desktop coordinates - inline `left` values cannot be overridden and are
   therefore not used. */

.trust-section {
  position: relative;
  overflow: visible;
  width: 100vw;
  margin-top: var(--space-2xl);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--color-paper);
}

/* ---- side depth: narrow slivers, mostly outside the section ---- */

.trust-section__depth {
  position: absolute;
  top: 42px;
  width: 256px;
  height: 728px;
  border-radius: 128px;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.trust-section__depth--left {
  left: 0;
  transform: translateX(-7.5vw);
  background: linear-gradient(90deg, #090909 10.4%, rgba(21, 21, 21, 0) 97%);
}

.trust-section__depth--right {
  right: 0;
  transform: translateX(7.5vw);
  background: linear-gradient(270deg, #090909 10.4%, rgba(21, 21, 21, 0) 97%);
}

.trust-section__container {
  position: relative;
  z-index: 1;
}

/* ---- header ---- */

.trust-section__header {
  position: relative;
  padding-left: 17px;
  min-height: 101px;
}

.trust-section__header::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.trust-section__title {
  margin: 0;
  width: 680px;
  font-family: var(--font-base);
  font-size: 36px;
  font-weight: var(--fw-extrabold);
  line-height: 45px;
  color: #000;
  text-transform: uppercase;
}

.trust-section__title-accent {
  background: linear-gradient(90deg, #000 0%, #ff5722 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-section__supporting-copy {
  position: absolute;
  right: 0;
  top: 0.31px;
  width: 259px;
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: #000;
  text-align: right;
}

/* ---- signal stage ---- */

.trust-section__stage {
  position: relative;
  container-type: inline-size;
  width: 1200px;
  height: 455px;
  margin-top: 87.309px;
}

/* the shared class deliberately sets no display - only the variants do */
.trust-section__signal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Scoped through .eh-root deliberately. The global rule targeting
   .eh-root svg has specificity 0,1,1 and would otherwise beat a bare
   0,1,0 modifier, leaving BOTH variants visible. 0,2,0 wins, no !important. */
.eh-root .trust-section__signal-svg--desktop { display: block; }
.eh-root .trust-section__signal-svg--tablet  { display: none; }

.trust-section__base-line {
  stroke: #6d665d;
  stroke-opacity: 0.22;
  stroke-width: 1;
  fill: none;
}

/* stroke is a gradient set per-SVG in the markup, not a flat orange */
.trust-section__draw-line {
  stroke-width: 1.6;
  fill: none;
}

.trust-section__connector {
  stroke: rgba(20, 17, 13, 0.28);
  stroke-width: 1;
  fill: none;
}

.trust-section__node {
  fill: var(--color-paper);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}

.trust-section__node--central { fill: var(--color-primary); stroke: none; }
.trust-section__node--central-glow { fill: var(--color-primary); opacity: 0.18; }

.trust-section__broadcast-rings ellipse {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- brands: one centre-based positioning system ---- */

.trust-section__brand-grid {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trust-section__brand-item {
  position: absolute;
  left: var(--brand-x);
  transform: translateX(-50%);
  width: 176px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.trust-section__brand-item--top    { top: 12px; }
.trust-section__brand-item--bottom { top: 335px; justify-content: flex-end; }

.trust-section__brand-item[data-brand="atb"] { --brand-x: 9.5833%; }
.trust-section__brand-item[data-brand="meest"] { --brand-x: 35.0000%; }
.trust-section__brand-item[data-brand="monobank"] { --brand-x: 60.4167%; }
.trust-section__brand-item[data-brand="mhp"] { --brand-x: 85.8333%; }
.trust-section__brand-item[data-brand="brsm"] { --brand-x: 15.0000%; }
.trust-section__brand-item[data-brand="hotline"] { --brand-x: 38.7500%; }
.trust-section__brand-item[data-brand="scania"] { --brand-x: 62.5000%; }
.trust-section__brand-item[data-brand="interkassa"] { --brand-x: 86.2500%; }

.trust-section__brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 60px;
}

.trust-section__brand-logo img {
  display: block;
  /* every logo SVG ships with its own correct safe area, so they all get an
     identical box and object-fit does the rest - no per-brand hardcoding */
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* monochrome and near-black, as in Figma */
  filter: grayscale(1) contrast(1.05);
  opacity: 0.92;
}

.trust-section__brand-index {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: normal;
  letter-spacing: 1.5px;
  color: #958e85;
  text-align: center;
}

.trust-section__brand-item--top    .trust-section__brand-index { top: 74px; }
.trust-section__brand-item--bottom .trust-section__brand-index { top: 45px; }

/* ---- TABLET (Figma 853x782; stage 907x461) ---- */
@media (min-width: 768px) and (max-width: 1240px) {
  .trust-section { padding-top: 47px; padding-bottom: 40px; }
  .trust-section__container { padding-inline: 0; max-width: none; }

  .trust-section__title {
    width: auto;
    font-size: 32px;
    line-height: 40px;
    background: linear-gradient(90deg, #000 0%, #ff5722 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .trust-section__title-accent { background: none; -webkit-text-fill-color: inherit; }

  .trust-section__supporting-copy {
    position: static;
    width: auto;
    max-width: 26rem;
    margin: 34px 0 0 19px;
    font-size: 18px;
    font-weight: var(--fw-light);
    line-height: 24px;
    color: #1f1f1e;
    text-align: left;
  }

  /* stage scales inside the gutters; children use cqw so the HTML layer
     tracks the SVG's viewBox scaling exactly */
  .trust-section__stage {
    --tablet-gutter: 19px;
    width: min(907px, calc(100vw - 2 * var(--tablet-gutter)));
    height: auto;
    aspect-ratio: 907 / 461;
    margin: 43px auto 0;
  }

  .eh-root .trust-section__signal-svg--desktop { display: none; }
  .eh-root .trust-section__signal-svg--tablet  { display: block; }

  .trust-section__brand-item { width: 21.512cqw; height: 26.024cqw; }
  .trust-section__brand-item--top    { top: 7.372cqw; }
  .trust-section__brand-item--bottom { top: 66.813cqw; }

  .trust-section__brand-logo { width: 21.512cqw; height: 7.277cqw; }

  .trust-section__brand-index { font-size: 1.985cqw; letter-spacing: 0.124cqw; }
  .trust-section__brand-item--top    .trust-section__brand-index { top: 15.4cqw; }
  .trust-section__brand-item--bottom .trust-section__brand-index { top: 7.6cqw; }

  .trust-section__brand-item[data-brand="atb"] { --brand-x: 10.7552%; }
  .trust-section__brand-item[data-brand="meest"] { --brand-x: 35.8931%; }
  .trust-section__brand-item[data-brand="monobank"] { --brand-x: 61.1356%; }
  .trust-section__brand-item[data-brand="mhp"] { --brand-x: 86.2734%; }
  .trust-section__brand-item[data-brand="brsm"] { --brand-x: 10.7552%; }
  .trust-section__brand-item[data-brand="hotline"] { --brand-x: 35.8931%; }
  .trust-section__brand-item[data-brand="scania"] { --brand-x: 61.1356%; }
  .trust-section__brand-item[data-brand="interkassa"] { --brand-x: 86.2734%; }

}

/* ---- reduced motion: final state is the CSS default ---- */
@media (prefers-reduced-motion: reduce) {
  .trust-section__draw-line,
  .trust-section__connector {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ================= HOMEPAGE: SECTION WHY US =================
   Figma frame 1600x950; dark card inset to 97vw (matching the hero's outer
   spacing), safe area x=200..1400 => a 1200px content column.

   Layout is CSS Grid throughout - the only absolutely positioned things are
   the decorative radar and the grid dividers. Every value below is measured
   from the Figma layer geometry.

   Typography note: unlike SECTION-ABOUT, every text layer in THIS frame is
   Unbounded (verified by measuring the nowrap layers: the caption computes to
   252.3px against Figma's 252.0px, the badge 199.7px against 200.0px - Onest
   would be ~50px narrower). So the Onest/Unbounded split does not apply here. */

.section-why-us {
  position: relative;
  width: 97vw;
  margin: var(--space-2xl) auto 0;
  border-radius: 52px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(410px 383px at 17.3% 56.3%, rgba(240, 169, 46, 0.18) 0%, rgba(240, 169, 46, 0.045) 48%, rgba(240, 169, 46, 0) 100%),
    radial-gradient(373px 327px at 90.4% 5.4%, rgba(240, 169, 46, 0.12) 0%, rgba(240, 169, 46, 0) 100%),
    linear-gradient(120.7deg, #17140f 0%, #0d0c09 48%, #050504 100%);
  overflow: hidden;
}

.section-why-us__background {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section-why-us__container {
  position: relative;
  display: grid;
  grid-template-columns: 444px 756px;
  padding-block: 68px 64px;
}

/* ---- left column: intro + featured stat ---- */

.section-why-us__intro {
  position: relative;
  grid-column: 1;
  padding-left: 17px;
}

.section-why-us__intro::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.section-why-us__heading {
  margin: 0;
  width: 374px;
  font-family: var(--font-base);
  font-size: 36px;
  font-weight: var(--fw-bold);
  line-height: 45px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f6f1e7 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-why-us__description {
  margin: 20px 0 0;
  width: 373px;
  font-family: var(--font-base);
  font-size: 18px;
  font-weight: var(--fw-light);
  line-height: 24px;
  color: #f6f1e7;
}

/* ---- featured stat ---- */

.featured-stat {
  position: relative;
  margin-top: 182px;
}

.featured-stat__radar {
  position: absolute;
  left: 173.22px;
  top: 125px;
  width: 572.44px;
  height: 568px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.featured-stat__radar svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* All three rings share cx=0/cy=0 in the SVG's own user space (the
   viewBox is symmetric: -286.22..286.22 x -284..284), so that's the only
   pivot that keeps them concentric while rotating. Each group also holds
   an off-centre satellite dot, which skews the group's own bounding box -
   with transform-box:view-box a percentage/keyword origin like "center"
   is supposed to ignore that and resolve against the viewBox instead, but
   that resolution has been unreliable in practice (the "drift after
   resize" the rings were showing). An explicit length origin removes the
   ambiguity: with transform-box:view-box the reference box's top-left is
   the viewBox's own (minX,minY) = (-286.22,-284), so 286.22px/284px is
   the exact, non-percentage offset to true (0,0) - not a rewritten
   coordinate system, the same one stated in absolute terms. */
.featured-stat__orbit--outer,
.featured-stat__orbit--middle,
.featured-stat__orbit--inner {
  transform-box: view-box;
  transform-origin: 286.22px 284px;
  will-change: transform;
}

.featured-stat__value {
  position: relative;
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-extrabold);
  line-height: 132px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #f6f1e7 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.featured-stat__number { font-size: 131.009px; }
.featured-stat__suffix { font-size: 64px; }

.featured-stat__accent-line {
  position: relative;
  display: block;
  width: 52px;
  height: 3px;
  margin: 28px 0 0 7px;
  border-radius: 2px;
  background: var(--color-primary);
}

.featured-stat__content {
  position: relative;
  margin: 25px 0 0 7px;
  font-family: var(--font-base);
  font-size: 20px;
  font-weight: var(--fw-light);
  line-height: 25px;
  color: #d8d2c8;
}

.featured-stat__content-accent {
  font-weight: var(--fw-regular);
  color: var(--color-primary);
}

.featured-stat__caption {
  position: relative;
  margin: 26.5px 0 0 7px;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: var(--fw-light);
  line-height: 15px;
  color: #8f8779;
  text-transform: uppercase;
  white-space: nowrap;
}

.featured-stat__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 73.5px 0 0 0;
  padding: 0 20px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.045);
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: #d8d2c8;
  text-transform: uppercase;
  white-space: nowrap;
}

.featured-stat__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}

/* ---- right column: 2x2 metrics on shared dividers ---- */

.metrics-grid {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns: 391px 365px;
  grid-template-rows: 377px 1fr;
}

/* dividers belong to the grid, not to the individual cells */
.metrics-grid::before,
.metrics-grid::after,
.metrics-grid__rule {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* main column separator */
.metrics-grid::before {
  left: 1px;
  top: 0;
  width: 1px;
  height: 754px;
  background: rgba(255, 255, 255, 0.13);
}

/* internal vertical */
.metrics-grid::after {
  left: 391px;
  top: 31px;
  width: 1px;
  height: 692px;
  background: rgba(255, 255, 255, 0.13);
}

/* internal horizontal - warm in the middle, fading at both ends */
.metrics-grid__rule {
  left: 32px;
  top: 377px;
  width: 725px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(240, 169, 46, 0.35) 48%, rgba(255, 255, 255, 0.08) 100%);
}

.metric-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 325px;
  height: 245px;
}

.metric-card--radio-experience  { grid-column: 1; grid-row: 1; margin: 70px 0 0 32px; }
.metric-card--national-coverage { grid-column: 2; grid-row: 1; margin: 70px 0 0 32px; }
.metric-card--daily-audience    { grid-column: 1; grid-row: 2; margin: 62px 0 0 32px; }
.metric-card--business-projects { grid-column: 2; grid-row: 2; margin: 62px 0 0 32px; }

.metric-card__eyebrow {
  margin: 0;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: var(--fw-light);
  line-height: 12px;
  color: #8f8779;
  text-transform: uppercase;
}

.metric-card__value {
  margin: 0;
  font-family: var(--font-base);
  font-size: 92px;
  font-weight: var(--fw-bold);
  line-height: 114px;
  color: #f6f1e7;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metric-card__suffix {
  font-size: 55px;
  color: var(--color-primary);
}

/* "1 000+" is the widest value, so it steps down a size, as in Figma */
.metric-card--daily-audience .metric-card__value  { font-size: 82px; line-height: 102px; }
.metric-card--daily-audience .metric-card__suffix { font-size: 50px; }

.metric-card__description {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-light);
  line-height: 20px;
  color: #d8d2c8;
}

.metric-card__description-accent {
  font-weight: var(--fw-regular);
  color: var(--color-primary);
}

/* ---- motion ----
   Orbits are pure CSS keyframes on transform only (no rAF loop, no layout
   props). Each ring group runs at its own speed and direction so the rotation
   reads as atmospheric drift rather than one spinning object. The dots live
   inside their ring's group, so they orbit with it. */

@keyframes ws-orbit-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes ws-orbit-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

.featured-stat__orbit--outer  { animation: ws-orbit-cw  48s linear infinite; }
.featured-stat__orbit--middle { animation: ws-orbit-ccw 34s linear infinite; }
.featured-stat__orbit--inner  { animation: ws-orbit-cw  26s linear infinite; }

/* paused while the section is well outside the viewport (toggled by the
   observer) - the loop is linear and seamless, so resuming is invisible */
.section-why-us[data-orbit="paused"] .featured-stat__orbit--outer,
.section-why-us[data-orbit="paused"] .featured-stat__orbit--middle,
.section-why-us[data-orbit="paused"] .featured-stat__orbit--inner {
  animation-play-state: paused;
}

/* ---- entrance: opacity + transform only, once ---- */

.section-why-us[data-reveal] .section-why-us__heading,
.section-why-us[data-reveal] .section-why-us__description,
.section-why-us[data-reveal] .featured-stat,
.section-why-us[data-reveal] .metric-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-why-us[data-reveal] .featured-stat__radar {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}

.section-why-us[data-reveal] .metrics-grid::before,
.section-why-us[data-reveal] .metrics-grid::after,
.section-why-us[data-reveal] .metrics-grid__rule {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.9s ease-out;
}

.section-why-us[data-reveal] .metrics-grid__rule {
  transform: scaleX(0);
  transform-origin: left center;
}

.section-why-us[data-reveal="in"] .section-why-us__heading,
.section-why-us[data-reveal="in"] .section-why-us__description,
.section-why-us[data-reveal="in"] .featured-stat,
.section-why-us[data-reveal="in"] .metric-card {
  opacity: 1;
  transform: none;
}

.section-why-us[data-reveal="in"] .featured-stat__radar {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.section-why-us[data-reveal="in"] .metrics-grid::before,
.section-why-us[data-reveal="in"] .metrics-grid::after,
.section-why-us[data-reveal="in"] .metrics-grid__rule {
  transform: none;
}

.section-why-us[data-reveal="in"] .section-why-us__description { transition-delay: 0.08s; }
.section-why-us[data-reveal="in"] .featured-stat                { transition-delay: 0.16s; }
.section-why-us[data-reveal="in"] .metrics-grid::before,
.section-why-us[data-reveal="in"] .metrics-grid::after,
.section-why-us[data-reveal="in"] .metrics-grid__rule           { transition-delay: 0.20s; }
.section-why-us[data-reveal="in"] .metric-card--radio-experience  { transition-delay: 0.30s; }
.section-why-us[data-reveal="in"] .metric-card--national-coverage { transition-delay: 0.38s; }
.section-why-us[data-reveal="in"] .metric-card--daily-audience    { transition-delay: 0.46s; }
.section-why-us[data-reveal="in"] .metric-card--business-projects { transition-delay: 0.54s; }

/* ---- reduced motion: final composition, no movement ---- */

@media (prefers-reduced-motion: reduce) {
  .featured-stat__orbit--outer,
  .featured-stat__orbit--middle,
  .featured-stat__orbit--inner {
    animation: none;
  }
  .section-why-us[data-reveal] .section-why-us__heading,
  .section-why-us[data-reveal] .section-why-us__description,
  .section-why-us[data-reveal] .featured-stat,
  .section-why-us[data-reveal] .metric-card,
  .section-why-us[data-reveal] .featured-stat__radar,
  .section-why-us[data-reveal] .metrics-grid::before,
  .section-why-us[data-reveal] .metrics-grid::after,
  .section-why-us[data-reveal] .metrics-grid__rule {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .section-why-us[data-reveal] .featured-stat__radar {
    transform: translate(-50%, -50%);
  }
}

@keyframes eh-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ================= GLOBAL FOOTER (post 2064) BASE ================= */

.ehf-root, .ehf-root * { box-sizing: border-box; }
.ehf-root a { color: inherit; text-decoration: none; }
.ehf-root ul { list-style: none; margin: 0; padding: 0; }
.ehf-root img, .ehf-root svg { display: block; max-width: 100%; }

.ehf-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-inline: 20px;
  margin-block: 1em 20px;
  padding: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(120% 70% at 50% 115%, rgba(240, 169, 46, 0.35), transparent 60%),
    radial-gradient(90% 50% at 50% 0%, rgba(240, 169, 46, 0.16), transparent 70%),
    linear-gradient(180deg, var(--color-ink) 0%, #000000 100%);
  font-family: var(--font-base);
  color: var(--color-text-on-dark);
}

.ehf-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

.ehf-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  background: linear-gradient(20deg, var(--color-text-on-dark) 37.4%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 var(--space-lg);
  max-width: 20ch;
}

.ehf-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ehf-meta a {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  transition: 0.35s all ease-out;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ehf-meta a:hover {
  color: var(--color-primary);
}

.ehf-meta a:visited {
  color: var(--color-text-on-dark-muted);
}

.ehf-meta svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  stroke: var(--color-primary);
  fill: none;
  stroke-width: 1.8;
}

.ehf-social {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-shrink: 0;
}

.ehf-social a {
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: 0.35s all ease-out;
}

.ehf-social a:hover {
  opacity: 1;
}

.ehf-social a:visited {
  color: inherit;
}

.ehf-social svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: #fff;
}

.ehf-social svg.icon-stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
}

.ehf-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-block: var(--space-2xl);
}

.ehf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.ehf-logos {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ehf-logos img {
  height: 2.25rem;
  width: auto;
}

.ehf-copyright {
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  line-height: var(--lh-normal);
  max-width: 46rem;
  margin: 0;
}

.ehf-copyright a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .ehf-panel {
    padding: var(--space-xl) var(--space-lg);
  }
  .ehf-title {
    font-size: var(--fs-xl);
  }
}

@media (max-width: 700px) {
  .ehf-panel {
    padding: var(--space-lg) var(--space-md);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
  }
  .ehf-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
  .ehf-title {
    font-size: var(--fs-lg);
    max-width: 100%;
  }
  .ehf-meta {
    gap: var(--space-xs);
  }
  .ehf-meta a {
    font-size: var(--fs-xs);
  }
  .ehf-social {
    gap: var(--space-xs);
    flex-wrap: wrap;
  }
  .ehf-social a {
    width: 1.85rem;
    height: 1.85rem;
  }
  .ehf-social svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .ehf-divider {
    margin-block: var(--space-lg);
  }
  .ehf-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .ehf-logos img {
    height: 1.75rem;
  }
  .ehf-copyright {
    text-align: left;
    max-width: 100%;
    font-size: 0.65rem;
  }
}

/* ================= FOOTER: native Elementor icon-box/text-editor overrides =================
   The footer's own address/email icon-boxes and social block still use native Elementor
   widgets (not raw HTML) - these rules just bring their typography in line. Scoped to
   their specific element IDs on post 2064 only. */

.elementor-element-63e5b51 {
  margin-inline: 20px !important;
  padding: var(--space-2xl) var(--space-xl) !important;
}

.elementor-element-1a21110 p {
  font-family: var(--font-base) !important;
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-tight) !important;
  background: linear-gradient(20deg, var(--color-text-on-dark) 37.4%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-sm) !important;
}

.elementor-element-d20d2c5 {
  margin-top: var(--space-sm) !important;
}

.elementor-element-53df457 .elementor-icon-box-title,
.elementor-element-53df457 .elementor-icon-box-title a,
.elementor-element-d50135c .elementor-icon-box-title,
.elementor-element-d50135c .elementor-icon-box-title a {
  font-family: var(--font-base) !important;
}

.elementor-element-714cfcf p {
  font-family: var(--font-base) !important;
}

.elementor-element-63e5b51 > .elementor-background-overlay {
  background-color: transparent !important;
  background-image:
    radial-gradient(120% 70% at 50% 115%, rgba(240, 169, 46, 0.35), transparent 60%),
    radial-gradient(90% 50% at 50% 0%, rgba(240, 169, 46, 0.16), transparent 70%),
    linear-gradient(180deg, var(--color-ink) 0%, #000000 100%) !important;
  opacity: 1 !important;
}

.elementor-element-a9e21f0 .elementor-heading-title {
  font-family: var(--font-base) !important;
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-tight) !important;
  background: linear-gradient(20deg, var(--color-text-on-dark) 37.4%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 30ch;
}

.elementor-element-055e60e > .elementor-widget-wrap {
  justify-content: flex-start !important;
  gap: var(--space-sm);
}

.elementor-element-714cfcf {
  margin-left: auto !important;
}

.elementor-element-63e5b51,
.elementor-element-63e5b51 > .elementor-background-overlay {
  border-radius: var(--radius-lg) !important;
}

.elementor-element-63e5b51 {
  margin-bottom: var(--space-2xl) !important;
}

/* ================= /ekspert-news/ PAGE (post 3691) =================
   Single hand-built HTML widget, same pattern as the homepage - not a
   native Elementor "Posts" widget, so no query/pagination logic lives
   here to protect; the article grid below is plain static markup. */

body.page-id-3691 {
  background-color: var(--color-paper) !important;
}

/* Outer shell matches .eh-hero (homepage) exactly - same width/margin/
   background/radius/padding-top/overflow/position - so the two pages
   share the same structural component instead of two parallel systems.
   Previously .eh-news-hero only carried top/bottom padding and the real
   panel (background, radius, the bg-circle glow) lived one level down on
   __panel; that's now flattened onto this element to match where
   .eh-hero itself carries those properties. .eh-container below drops
   its own width:auto/max-width:none override for the same reason - it
   now uses the shared token exactly as .eh-hero's own .eh-container does. */
.eh-news-hero {
  position: relative;
  overflow: hidden;
  width: 97vw;
  margin: 0 auto;
  background: var(--color-ink-deep);
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  padding-top: 10rem;
  padding-bottom: clamp(4rem, 4.4vw, 4.125rem);
}

/* Matches .eh-hero's own mobile radius reduction. Not mirroring its
   min-height:100dvh/flex-centering here - that's tied to filling the
   viewport for a stacked title composition, not a generic hero-shell
   property, and would just leave this section's much shorter content
   stranded in a tall empty block. */
@media (max-width: 600px) {
  .eh-news-hero {
    --hero-radius: 24px;
  }
}

.eh-news-hero__panel {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Own title/subtitle rules. These used to borrow .eh-hero__title /
   .eh-hero__subtitle, but the homepage hero rebuild turned those into a
   grid container for its stacked headline, so /news/ needs its own copy of
   the original centred treatment rather than inheriting a layout it can't use. */
.eh-news-hero__title {
  position: relative;
  z-index: 1;
  color: var(--color-text-on-dark);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 18ch;
  background: linear-gradient(20deg, var(--color-text-on-dark) 37.4%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eh-news-hero__subtitle {
  position: relative;
  z-index: 1;
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  max-width: 34rem;
  margin-top: var(--space-md);
}

@media (max-width: 700px) {
  .eh-news-hero__title {
    font-size: var(--fs-2xl);
    max-width: 16ch;
  }
}

.eh-news-hero__posts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: min(100%, 62rem);
  margin-top: var(--space-xl);
}

.eh-news-hero__post {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-ink-soft);
  border: 1px solid rgba(240, 169, 46, 0.25);
  text-align: left;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  transition: 0.35s all ease-out;
}

.eh-news-hero__post:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 169, 46, 0.55);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.eh-news-hero__post-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.eh-news-hero__post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(55%) brightness(0.8);
  transition: 0.35s all ease-out;
}

.eh-news-hero__post:hover .eh-news-hero__post-media img {
  filter: grayscale(20%) brightness(0.9);
}

.eh-news-hero__post-body {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.eh-news-hero__post-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-on-dark);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eh-news-hero__post-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.eh-news-hero__post-more svg {
  width: 1em;
  height: 1em;
  transition: 0.35s all ease-out;
}

.eh-news-hero__post:hover .eh-news-hero__post-more svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .eh-news-hero__posts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .eh-news-hero__posts {
    max-width: 26rem;
  }
}

/* Category tabs - sits right under the hero, one pill per category, icon + label.
   Anchor-links straight to that category's grouped section further down the page. */

/* Wraps .eh-cat-tabs plus its two arrow buttons. margin-top lives here
   now (was on .eh-cat-tabs itself) since this is the outermost element
   at every breakpoint - the buttons are just display:none below desktop,
   same DOM everywhere, no separate tablet/mobile markup. */
.eh-cat-tabs-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
}

/* Single row at every breakpoint: scrolls (drag or the arrow buttons)
   instead of wrapping to a second line. Scrollbar hidden for the "HUD"
   look - the arrows + drag are the visible affordance instead. Same
   treatment on touch too: overflow-x already scrolls natively there,
   this just adds mouse-drag and the two buttons on top of that. */
.eh-cat-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
  gap: var(--space-sm);
  min-width: 0;
  cursor: grab;
  /* Fallback for a fresh page load landing straight on #categories (e.g.
     from the header dropdown on another page) - no in-page click for the
     JS smooth-scroll-with-offset below to intercept, so this is what
     actually runs then. Matches .eh-cat-section's own scroll-margin-top. */
  scroll-margin-top: 6rem;
}

.eh-cat-tabs::-webkit-scrollbar {
  display: none;
}

.eh-cat-tabs.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* Minimal circular icon buttons - thin chevrons, quiet by default,
   disabled (scroll-limit reached) fades rather than disappears so the
   row's width doesn't jump. */
.eh-cat-tabs-nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: 0.2s ease-out;
}

.eh-cat-tabs-nav:hover {
  color: #000 !important;
  fill: #000 !important;
  background: #fff !important;
  border-color: var(--color-primary);
}

.eh-cat-tabs-nav svg {
  width: 1rem;
  height: 1rem;
}

.eh-cat-tabs-nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.eh-cat-tab {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  transition: 0.35s all ease-out;
}

.eh-cat-tab img {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* No transform/shadow: .eh-cat-tabs needs overflow-x:auto to scroll, and
   per spec that forces overflow-y to compute as auto too (there's no
   "scroll X, stay visible on Y" combination) - a lift + 50px blur would
   just get clipped by the row's own edges. Border+background is
   immune to that and reads as the lighter, "HUD" style this component
   wants anyway, rather than fighting the clip with a pile of padding. */
.eh-cat-tab:hover {
  border-color: var(--color-primary);
  background: var(--color-paper);
}

/* Category-grouped sections replacing the old single infinite-scroll grid - each
   one is a real anchor target for the tabs above. */

.eh-cat-section {
  padding-block: var(--space-9) 0;
  scroll-margin-top: 6rem;
}

.eh-cat-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.eh-cat-section__head-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.eh-cat-section__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  flex-shrink: 0;
  font-family: var(--font-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  transition: 0.35s all ease-out;
}

.eh-cat-section__back:hover {
  color: var(--color-primary-deep);
}

.eh-cat-section__back svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.eh-cat-section__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.eh-cat-section__title {
  font-size: 3.25rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-tight);
  margin: 0;
}

.eh-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.eh-cat-section .eh-news__grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: start;
}

.eh-cat-divider {
  border: none;
  border-top: var(--border-w) solid var(--color-border);
  margin: var(--space-9) 0 0;
}

@media (max-width: 700px) {
  .eh-cat-section__title {
    font-size: 2.25rem;
  }
  .eh-cat-section__head {
    gap: var(--space-xs);
  }
}

/* =====================================================================
   PRE-EXISTING SITE CSS (predates this project - preserved as-is, just
   relocated here from the Additional CSS field during consolidation).
   These style content coming from the single-post template's own custom
   widgets/classes, which are off-limits to restructure. Do not rescope
   or rename these classes without checking every post that uses them.
   ===================================================================== */

.lp-image img {
	border:2px solid rgba(255,255,255,0.35) !important;
}

#contact {
	border:1px solid rgba(255,255,255,0.35) !important;
}

.mkk-logos {
  overflow: hidden;
  padding: var(--space-7) 0;
  white-space: nowrap;
  position: relative;
}

.mkk-logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

.mkk-logo-items {
  display: inline-block;
  animation: 35s slides infinite linear;
}

.mkk-logos:hover .mkk-logo-items {
  animation-play-state: paused;
}

.mkk-logo-items img {
    width: 120px;
	margin: 0 var(--space-7);
    max-width: 120px !important;
}

.mkk-logos:before {
  left: 0;
}

.mkk-logos:after {
  right: 0;
}

@keyframes slides {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.ed-also {
  margin: var(--space-7);
}

.ed-also-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-5), 2.4vw, var(--space-8));
}

.ed-also-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ed-also-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
}

.ed-also-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef2f7;
}

.ed-also-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ed-also-text {
  padding: var(--space-7);
}

.ed-also-date {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 17px;
  line-height: 1.1;
  font-weight: 500;
  color: #7a8494;
}

.ed-also-post-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(20px, 1.45vw, 28px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ed-also-post-title a {
	color: black;
}

.ed-also-link {
  display: inline-block;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
}

.ed-also-link:hover {
  text-decoration: underline;
}

.ed-also-card:hover .ed-also-post-title,
.ed-also-card:hover .ed-also-link {
  color: var(--color-primary-deep);
}

.social-inline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.social-inline-list li {
    display: flex;
}

.social-inline-list a {
    display: flex;
    width: 26px;
    height: 26px;
    justify-content: center;
    align-items: center;
    color: black;
}

.social-inline-list svg {
    width: 26px;
    height: 26px;
    fill: black;
    transition: color .25s ease, opacity .25s ease;
    opacity: 0.85;
}

.social-inline-list.list-yl svg {
	fill: var(--e-global-color-primary);
}

.social-inline-list svg.icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.social-inline-list.list-yl svg.icon-stroke {
	stroke: var(--e-global-color-primary);
}

.social-inline-list a:hover {
    color: var(--e-global-color-secondary);
}

.social-inline-list a:hover svg {
    opacity: 1;
}

.header-hero.elementor-sticky--active .social-inline-list a {
    color:  #161514;
}

.header-hero .social-inline-list a svg {
	fill:white;
}

section.hero-section {
    max-width: 96%;
    margin: var(--space-8) auto;
    border-radius: 24px !important;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	background: linear-gradient(132deg, #FFA726,#FFFFFF, #FBEE57,#DBDCDD);
  background-size: 400% 400%;
  animation: BackgroundGradient 15s ease infinite;
}

.ex-rotator{
  position: relative;
  text-align: center;
}

.ex-rotator .ex-heading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
  pointer-events: none;
}

.ex-rotator > *:not(.ex-heading) {
  grid-row: auto;
  width: 100%;
}

.ex-rotator .elementor-widget-text-editor:first-of-type {
  margin-top: var(--space-4);
}

.post-hero {
    position: relative;
    overflow: hidden;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    margin-inline: 20px !important;
    margin-top: 0 !important;
    margin-bottom: calc(var(--space-lg) * 2) !important;
    padding: calc(var(--space-9) + 97px) var(--space-xl) var(--space-lg) !important;
    border-radius: var(--radius-lg);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    background:
      radial-gradient(120% 70% at 50% 115%, rgba(240, 169, 46, 0.4), transparent 60%),
      radial-gradient(90% 50% at 50% 105%, rgba(240, 169, 46, 0.22), transparent 70%),
      radial-gradient(140% 90% at 50% 130%, rgba(240, 169, 46, 0.12), transparent 75%),
      var(--color-ink) !important;
}

/* Elementor's own per-post generated CSS (background motion effects) targets
   .elementor-{postID} .elementor-element-e2cd6da with 3 chained classes, beating
   a plain .post-hero rule on specificity alone - the !important above covers the
   direct case, this covers the inner motion-effects-layer variant of that same
   selector so nothing paints over the new background on any individual post. */
.post-hero > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background: transparent !important;
}

/* Sitewide: unify every native Elementor h2 heading (post-content subheadings,
   CTA blocks, etc.) with the homepage's .eh-news__title style. !important since
   Elementor's own per-widget generated typography rules otherwise win on
   specificity, same issue as the .post-hero background/spacing fixes above. */
h2.elementor-heading-title.elementor-size-default {
    font-size: var(--fs-2xl) !important;
    font-weight: var(--fw-bold) !important;
    line-height: var(--lh-tight) !important;
    color: var(--color-text) !important;
    margin: 0 0 var(--space-sm) !important;
}

.post-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30rem;
    z-index: 0;
    background-image: url('https://radio-ukraine.com.ua/wp-content/uploads/2026/08/bg-circle-hero.png');
    background-position: 50% 80px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
    pointer-events: none;
}

.post-hero .elementor-heading-title.elementor-size-default {
    position: relative;
    z-index: 1;
    color: var(--color-text-on-dark);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    background: linear-gradient(20deg, var(--color-text-on-dark) 37.4%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.post-hero .elementor-widget-text-editor p {
    position: relative;
    z-index: 1;
    color: var(--color-text-on-dark-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    margin-top: var(--space-md);
}

.post-hero .elementor-widget-theme-post-featured-image {
    position: relative;
    z-index: 1;
    text-align: center;
}

.post-hero .elementor-widget-theme-post-featured-image img {
    margin-inline: auto;
}

/* Every post carries a leftover negative top margin on its post-hero column
   (-8em desktop / -5em tablet, from the old image-overlay hero design this
   replaced) - it now just yanks the title/paragraph text out of position and
   crams it against the panel's bottom edge. Neutralized so height stays purely
   content-driven, no hardcoded/legacy sizing fighting the new panel. */
.post-hero .elementor-element-populated {
    margin-top: 0 !important;
}

/* Asymmetric split hero: framed image on the right, category kicker +
   headline + excerpt on the left, vertically centered - replaces the old
   stacked image-on-top layout, collapsing to a single column on mobile below.
   Source thumbnails are ~1440x638 (very wide, ~2.26:1) - a 4:3 crop only needs
   a mild downscale to fill its box, so it stays sharp; a 1:1 square crop was
   tried and forced heavy upscaling of the limited 638px source height, which
   is what caused the blur. */
.post-hero .elementor-widget-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--space-2xl);
    row-gap: 0;
}

.post-hero .elementor-widget-theme-post-featured-image {
    grid-column: 1;
    grid-row: 1 / 3;
}

.post-hero .elementor-widget-theme-post-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.post-hero .elementor-widget-theme-post-title {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
}

.post-hero .elementor-widget-text-editor {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
}

/* Category kicker pill above the headline - text-only (no icon, unlike the
   news-page badges: there's no reliable cross-browser way to size an image
   inserted via a pseudo-element's `content`). The category-{slug} body class
   comes from the add-post-category-body-class.php mu-plugin, since Elementor's
   single-post template bypasses WordPress's normal post_class()/body_class()
   category output entirely. */
.post-hero .elementor-widget-theme-post-title::before {
    display: inline-block;
    font-family: var(--font-base);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--color-primary-deep);
    background: #fff;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-sm);
}

body.category-vyrobnytstvo .post-hero .elementor-widget-theme-post-title::before { content: "Виробництво"; }
body.category-pravo-ta-bezpeka .post-hero .elementor-widget-theme-post-title::before { content: "Право та безпека"; }
body.category-medytsyna-ta-krasa .post-hero .elementor-widget-theme-post-title::before { content: "Медицина та краса"; }
body.category-neruhomist-ta-logistyka .post-hero .elementor-widget-theme-post-title::before { content: "Нерухомість та логістика"; }
body.category-horeca-ta-riteyl .post-hero .elementor-widget-theme-post-title::before { content: "HoReCa та рітейл"; }
body.category-osvita-ta-servisy .post-hero .elementor-widget-theme-post-title::before { content: "Освіта та сервіси"; }
body.category-energetyka .post-hero .elementor-widget-theme-post-title::before { content: "Енергетика"; }

@media (max-width: 900px) {
  .post-hero {
    padding: calc(var(--space-xl) + 79px) var(--space-xl) var(--space-lg) !important;
  }
  .post-hero .elementor-widget-wrap {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg);
  }
  .post-hero .elementor-widget-theme-post-title {
    grid-column: 1;
    grid-row: 1;
  }
  .post-hero .elementor-widget-text-editor {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }
  .post-hero .elementor-widget-theme-post-featured-image {
    grid-column: 1;
    grid-row: 3;
  }
  .post-hero .elementor-widget-theme-post-featured-image img {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .post-hero .elementor-heading-title.elementor-size-default {
    font-size: var(--fs-2xl);
  }
}

/* Sitewide: hides post meta (date/author) on every native Elementor posts-widget card,
   intentionally unscoped - this predates the project and applies everywhere on purpose. */
.elementor-post__meta-data {
	display:none!important;
}

.cta-extra-block {
    max-width:90%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    padding: var(--space-7) !important;
    border-radius:24px;
		margin: var(--space-9) auto;
}

.marked-img.mi1:after {
    content:"😎🤝🎤";
    margin-top: calc(-1 * var(--space-8));
    margin-right: -1rem;
}

.marked-img.mi2:after {
    content:"💃☺️";
    left: -2rem;
    width: max-content;
    margin-top: calc(-1 * var(--space-8));
    margin-left:  -1rem;
}

.marked-img.mi3:after {
    content:"👔😎🎙️";
    top: unset;
    bottom: -2rem;
    left: -2rem;
    width: max-content;
    height: max-content;
    margin-top: calc(-1 * var(--space-8));
    margin-left:  -1rem;
}

.hover-video-section {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.hover-video-column {
    position: relative;
    flex: 1 1 calc(33.333% - var(--space-5));
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #000;
    border-radius: 28px;
	border:2px solid rgba(255,255,255,0.35) !important;
}

.hover-video-column video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    pointer-events: none;
}

.hover-video-column:hover video {
    filter: grayscale(0%);
}

.hover-video-column .elementor-widget-wrap {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    color: #fff;
    background: #000;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
    border-radius: 12px;
}

.hover-video-column .heading {
    margin: 0;
    color: #fff;
    font-size: 2.4rem;
	font-weight:900;
}

.hover-video-column .text {
    margin-top: var(--space-2);
    color: #fff;
	font-size:24px;
}

.hover-video-column .vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
    opacity: 0.5;
}

.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

/* Static transparent navbar overlaying the hero's dark panel. No sticky
   state - it scrolls away with the page, so all content can stay white
   without needing a contrast flip against a scrolled background.
   Padding is zeroed via Elementor's own container custom properties so the
   35px design offset is the only thing separating it from the page top. */
.header-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 35px;
    z-index: 10000;
    background-color: transparent !important;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

/* Same width maths as .eh-container so the logo lines up with the headline. */
.header-main > .e-con-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--container-pad) + 2 * var(--hero-inset));
    padding-inline: calc(var(--container-pad) + var(--hero-inset));
}

/* ---- .logo-set : the Експертна Думка x Країна ФМ lockup (215x62 SVG) ----
   Sized by WIDTH with height:auto, so the lockup keeps its own 3.47:1 ratio
   instead of being squeezed by a fixed height. Fluid between 152px and its
   215px design width - 17.9vw is exactly 215px at the 1200px design viewport,
   so it hits the Figma size on the nose and only shrinks below that.

   The second selector exists purely to outrank Elementor's own
   `.elementor-widget-image a img[src$=".svg"] { width: calc(80% + 1.5vw) }`,
   which is (0,2,2) and would otherwise win over a plain `.logo-set img`. */
.logo-set {
    grid-column: 1;
    display: flex;
    align-items: center;
}

.logo-set img,
.logo-set .elementor-widget-image a img[src$=".svg"] {
    width: clamp(6rem, 23.9vw, 13.4375rem);
    height: auto;
    max-width: none;
}

.header-main .elementor-element-b383b9a {
    grid-column: 2;
    justify-self: center;
}

.header-main .elementor-element-0acfd70 {
    grid-column: 3;
    justify-self: end;
}

.header-main .elementor-nav-menu--main .elementor-nav-menu {
    gap: 25px;
}

.header-main .elementor-nav-menu--main .elementor-item {
    color: #fff !important;
    fill: #fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    padding: 0 !important;
}

/* Active item picks up the same white-to-amber wash as the headline. */
.header-main .elementor-nav-menu--main .elementor-item.elementor-item-active {
    font-weight: var(--fw-regular) !important;
    background: linear-gradient(90deg, var(--color-text-on-dark) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Burger is an uploaded SVG with baked-in black fills, so it's recoloured
   here rather than through Elementor's icon colour control. */
.header-main .elementor-element-0acfd70 .elementor-icon svg path {
    fill: #fff !important;
}

.header-main .elementor-nav-menu--main .elementor-item {
    transition: color 0.2s ease-out;
}

.header-main .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

/* "Статті" dropdown (WP submenu added via Appearance > Menus) - Elementor's
   own JS/CSS already handles the open/close mechanics for
   menu-item-has-children, this only styles the result: chevron indicator,
   panel to match the megamenu popup (post 2153, same background token +
   24px radius), links at the same size/weight as the top-level items. */
.header-main .elementor-nav-menu--main .menu-item-has-children > .elementor-item {
    position: relative;
    padding-right: 18px !important;
}

/* Elementor's own dropdown-arrow feature (.sub-arrow, a Font Awesome
   chevron span) isn't in this menu item's markup right now, but hide it
   defensively so it can never double up with the ::after chevron below
   if that setting ever gets toggled on. */
.header-main .elementor-nav-menu--main .sub-arrow {
    display: none !important;
}

.header-main .elementor-nav-menu--main .menu-item-has-children > .elementor-item::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 11.25px;
    height: 11.25px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.2s ease-out;
}

.header-main .elementor-nav-menu--main .menu-item-has-children:hover > .elementor-item::after {
    transform: translateY(-50%) rotate(0deg);
}

/* display/visibility stay Elementor's own to show/hide on hover - already
   confirmed working, so left alone rather than reimplemented. opacity +
   transform are deliberately NOT !important: GSAP drives those two via
   plain inline styles (see the footer widget's dropdown-appear script),
   and an !important here would block inline styles from ever winning. */
.header-main .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
    background: var(--color-ink-deep) !important;
    border: 1px solid rgba(246, 241, 231, 0.44) !important;
    border-radius: 24px !important;
    padding: 12px !important;
    margin-top: 12px !important;
    opacity: 0;
    transform: translateY(50px);
}

/* ================= SITE-WIDE: BACK TO TOP ================= */
/* Lives in the footer widget (sitewide template) since position:fixed
   doesn't care where in the DOM it sits - simplest way to inject one
   sitewide without a new Custom Code snippet. Hidden by default; the
   footer widget's own script shows/hides + animates it with GSAP once
   the user has scrolled past the hero. */
.eh-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: filter 0.2s ease-out;
}

.eh-back-to-top img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Same technique as .contact-footer__primary-cta:hover - the button is a
   flat exported image, not a live CSS gradient, so a filter is what
   actually reaches it. */
.eh-back-to-top:hover {
  filter: brightness(1.06);
}

.eh-back-to-top.is-visible {
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 600px) {
  .eh-back-to-top {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }
}

.header-main .elementor-nav-menu--main .elementor-sub-item {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 24px !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    transition: color 0.2s ease-out, background 0.2s ease-out;
}

.header-main .elementor-nav-menu--main .elementor-sub-item:hover {
    color: var(--color-primary) !important;
    background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   SIDEBAR MENU (popup 2153) — replaces the native Elementor megamenu markup.
   The popup's own page settings (position, fadeInLeft, prevent_scroll,
   fit-to-screen height) are untouched; only the interior content changed.
   ========================================================================== */

/* Elementor's Dialog Manager applies this wrapper's z-index inline via JS at
   popup-open time, so a plain rule can never win the cascade against it —
   !important is the only way to sit above the header's z-index: 10000. */
.elementor-popup-modal {
    z-index: 2147483647 !important;
}

.elementor-popup-modal .dialog-widget-content {
    width: min(420px, 100vw) !important;
}

@media (max-width: 900px) {
    .elementor-popup-modal .dialog-widget-content { width: min(380px, 100vw) !important; }
}

@media (max-width: 600px) {
    .elementor-popup-modal .dialog-widget-content { width: 100vw !important; }
}

.sm-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    /* height:100% depends on the ancestor dialog wrapper having a definite
       height, but Elementor's popup message box only sets max-height with
       overflow:auto — so it stays auto-sized and margin-top:auto below has
       nothing to push against. 100dvh gives the column a real height. */
    height: 100dvh;
    padding: 49px 20px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--font-base);
    background: var(--color-ink-deep);
    border: 1px solid rgba(246, 241, 231, 0.44);
    border-left: none;
    border-radius: 0 24px 24px 0;
}

/* Elementor's own popup CSS paints the dialog box white; without this the
   panel's rounded corners and any sub-pixel edge show that white through. */
.elementor-popup-modal .dialog-widget-content {
    background-color: var(--color-ink-deep);
}

/* Elementor's own close button is toggled visible by its JS at popup-open
   time (a class added at runtime), which beats a plain display:none rule —
   the .sm-close button built into the panel markup replaces it. */
.elementor-popup-modal .dialog-close-button {
    display: none !important;
}

.sm-glow {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    max-width: none;
}

.sm-glow--b {
    width: 1117px;
    height: 762px;
    left: -420px;
    top: -680px;
    transform: rotate(90deg);
}

.sm-glow--a {
    width: 2468.61px;
    height: 888.253px;
    right: -1174px;
    bottom: -790px;
    transform: rotate(-90deg);
}

.sm-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sm-logo img { display: block; height: 62px; width: auto; max-width: none; }

.sm-close {
    display: grid;
    place-items: center;
    width: 29px;
    height: 23px;
    color: #fff;
    transition: color 0.2s ease-out;
}

.sm-close:hover { color: var(--color-primary); }
.sm-close svg { width: 20.86px; height: 21.35px; display: block; }

.sm-nav {
    position: relative;
    z-index: 1;
    margin-top: 64px;
}

.sm-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 24px;
    line-height: 24px;
    font-weight: var(--fw-light);
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease-out;
}

.sm-nav-link:first-child { padding-top: 0; }
.sm-nav-link:last-child { border-bottom: none; }

.sm-nav-link--active {
    font-weight: var(--fw-regular);
    background: linear-gradient(90deg, var(--color-text-on-dark) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sm-nav-link:not(.sm-nav-link--active):hover { color: var(--color-primary); }

.sm-nav-arrow {
    flex: none;
    width: 9px;
    height: 9px;
    color: var(--color-primary);
    transition: transform 0.2s ease-out;
}

.sm-nav-link:hover .sm-nav-arrow { transform: translate(2px, -2px); }

.sm-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: auto;
    margin-bottom: 3rem;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sm-social-label {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: var(--fw-light);
    line-height: normal;
    color: #8f8779;
    text-transform: uppercase;
}

.sm-social-list {
    display: flex;
    align-items: center;
    gap: 13.47px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-social-list a {
    display: grid;
    place-items: center;
    width: 46.4px;
    height: 45.21px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(138, 97, 26, 0.055) 0%, rgba(240, 169, 46, 0.25) 100%);
    transition: background 0.2s ease-out;
}

.sm-social-list a:hover {
    background: linear-gradient(180deg, rgba(138, 97, 26, 0.11) 0%, rgba(240, 169, 46, 0.42) 100%);
}

.sm-social-list svg { width: 100%; height: 100%; display: block; }

.sm-legal { text-align: left; }

.sm-address {
    margin: 0;
    font-size: 12px;
    font-weight: var(--fw-regular);
    line-height: 1.4;
    color: #f6f1e7;
}

.sm-copyright {
    margin: 6px 0 0;
    font-size: 10px;
    font-weight: var(--fw-light);
    line-height: 1.4;
    color: #8f8779;
}

@media (max-width: 900px) {
    .sm-panel { padding: 40px 24px 28px; }
    .sm-nav { margin-top: 56px; }
    .sm-nav-link { font-size: 22px; line-height: 22px; padding: 18px 0; }
}

@media (max-width: 600px) {
    .sm-panel {
        padding: 28px 18px 24px;
        border-radius: 0;
        border-right: none;
    }
    .sm-top { align-items: flex-start; }
    .sm-logo img { height: 48px; }
    .sm-close { width: 24px; height: 20px; }
    .sm-close svg { width: 18px; height: 18.4px; }
    .sm-nav { margin-top: 36px; }
    .sm-nav-link { font-size: 20px; line-height: 22px; padding: 16px 0; }
    .sm-glow--a, .sm-glow--b { opacity: 0.6; }
    .sm-bottom { gap: 18px; padding-top: 18px; }
    .sm-social-list a { width: 42px; height: 41px; }
}

.ed-video-block {
    padding: var(--space-8) 0;
}

.ed-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
}

.ed-video-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 20px;
    transition: all .35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
}

.ed-video-card:hover {
    transform: translateY(-10px);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    border-color: var(--e-global-color-secondary);
}

.ed-video-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

.ed-video-text {
    padding: var(--space-4) var(--space-4) var(--space-4);
    border-top: 1px solid rgba(0,0,0,0.07);
}

.ed-video-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0,0,0,0.55);
    margin-bottom: var(--space-1);
}

.ed-video-title {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    line-height: 1.35;
    transition: color .25s ease;
}

.ed-video-card:hover .ed-video-title {
    color: var(--e-global-color-secondary);
}

@media (max-width: 1024px) {
    .ed-video-grid {
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .ed-video-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes BackgroundGradient {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}

@media (max-width: 767px) {
    .hover-video-column {
        flex: 1 1 100%;
    }
}

/* ================= CONTACT FOOTER =================
   Figma frame 1600x640; surface inset to 97vw (the hero/why-us treatment),
   1200px safe area inside. Static by design - no entrance or scroll motion,
   only hover/focus transitions.

   Typography is Unbounded throughout (as in SECTION-WHY-US and
   SECTION-SERVICES); Onest is not used in this frame. */

.contact-footer {
  position: relative;
  width: 97vw;
  margin: var(--space-2xl) auto 0;
  padding-bottom: 1rem;
  scroll-margin-top: var(--header-offset, 96px);
}

.contact-footer__surface {
  position: relative;
  overflow: hidden;
  border-radius: 52px / 50.28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(420.9px 301.6px at 12.6% 20.5%, rgba(240, 169, 46, 0.12) 0%, rgba(240, 169, 46, 0.025) 52%, rgba(240, 169, 46, 0) 100%),
    radial-gradient(473px 203.4px at 73.4% 101.2%, rgba(240, 169, 46, 0.13) 0%, rgba(240, 169, 46, 0) 100%),
    linear-gradient(111.9deg, #17140f 0%, #0d0c09 48%, #050504 100%);
}

/* decorative layer - reuses the shared bg-circle-hero asset through a
   footer-local wrapper so /news and the hero keep their own transforms */
.contact-footer__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.contact-footer__decor-circle {
  position: absolute;
  left: -7px;
  top: 50%;
  width: 660px;
  height: 451px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  background-image: url('https://radio-ukraine.com.ua/wp-content/uploads/2026/08/bg-circle-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}

.contact-footer__decor-rings {
  position: absolute;
  left: 12.09px;
  top: -73.49px;
  width: 391.03px;
  height: 375.2px;
}

.contact-footer__decor-rings ellipse {
  fill: none;
  stroke: var(--color-primary);
}

.contact-footer__container {
  position: relative;
  z-index: 1;
  padding-block: 68px 87.8px;
}

/* ---- conversion header ---- */

.contact-footer__header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 17px;
  min-height: 101px;
}

.contact-footer__header::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 2px;
  height: 101px;
  background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
}

.contact-footer__title {
  margin: 0;
  width: 569px;
  font-family: var(--font-base);
  font-size: 36px;
  font-weight: var(--fw-bold);
  line-height: 45px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f6f1e7 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-footer__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 17.5px;
  margin-right: 1px;
}

.contact-footer__primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 306.8px;
  height: 68px;
  padding: 0 10px 0 30.8px;
  border-radius: 31.42px / 34px;
  background: linear-gradient(167.5deg, #f5bd4e 0%, var(--color-primary) 52%, var(--color-primary-deep) 100%);
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: #171009;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 0.2s ease-out;
}

.contact-footer__primary-cta:hover { filter: brightness(1.06); }

.contact-footer__cta-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(23, 16, 9, 0.12);
}

.contact-footer__cta-arrow svg {
  width: 14.74px;
  height: 15.8px;
  transition: transform 0.2s ease-out;
}

.contact-footer__primary-cta:hover .contact-footer__cta-arrow svg {
  transform: translate(2px, -2px);
}

.contact-footer__response-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 33px 0 0;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: var(--fw-light);
  line-height: normal;
  color: #8f8779;
  white-space: nowrap;
}

.contact-footer__response-note::before {
  content: '';
  flex: none;
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ---- contact grid ---- */

.contact-footer__contact-grid {
  display: grid;
  grid-template-columns: 270px 270px 270px 390px;
  margin-top: 53.5px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(240, 169, 46, 0.28) 48%, rgba(255, 255, 255, 0.08) 100%) 1;
  border-left: 0;
  border-right: 0;
}

.contact-footer__contact-item {
  position: relative;
  display: block;
  height: 118px;
  padding: 22.5px 18px 0 30px;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.contact-footer__contact-item:first-child { padding-left: 0; }
.contact-footer__contact-item:last-child  { padding-right: 1px; }

/* internal dividers belong to the grid, not to the items */
.contact-footer__contact-item + .contact-footer__contact-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 1px;
  height: 88px;
  background: rgba(255, 255, 255, 0.12);
}

.contact-footer__contact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: var(--fw-light);
  line-height: normal;
  color: #8f8779;
  white-space: nowrap;
}

.contact-footer__contact-label svg {
  flex: none;
  width: 20px;
  height: 20px;
  opacity: 0.5;
  fill: currentColor;
}

.contact-footer__contact-value {
  margin: 17.5px 0 0;
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: normal;
  color: #f6f1e7;
  white-space: nowrap;
  transition: color 0.2s ease-out;
}

.contact-footer__contact-arrow {
  position: absolute;
  right: 18px;
  top: 30px;
  width: 10.4px;
  height: 10.4px;
  color: var(--color-primary);
  transition: transform 0.2s ease-out;
}

.contact-footer__contact-item:last-child .contact-footer__contact-arrow { right: 1px; }

.contact-footer__contact-item:hover .contact-footer__contact-value { color: var(--color-primary); }
.contact-footer__contact-item:hover .contact-footer__contact-arrow { transform: translate(2px, -2px); }

/* ---- meta row ---- */

.contact-footer__meta {
  display: grid;
  grid-template-columns: 370px 488px 342px;
  align-items: start;
  margin-top: 54px;
}

.contact-footer__brand-lockup { display: flex; align-items: center; margin-top: 6px; }
.contact-footer__brand-lockup img { display: block; height: 62px; width: auto; max-width: none; }

.contact-footer__social-label {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: var(--fw-light);
  line-height: normal;
  color: #8f8779;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-footer__social-nav { margin-top: 3.5px; }

.contact-footer__social-list {
  display: flex;
  align-items: center;
  gap: 13.47px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-footer__social-link {
  display: grid;
  place-items: center;
  width: 46.4px;
  height: 45.21px;
  border-radius: 50%;
  /* the Figma circle is a gold gradient at 25% - premultiplied here */
  background: linear-gradient(180deg, rgba(138, 97, 26, 0.055) 0%, rgba(240, 169, 46, 0.25) 100%);
  transition: background 0.2s ease-out;
}

.contact-footer__social-link:hover {
  background: linear-gradient(180deg, rgba(138, 97, 26, 0.11) 0%, rgba(240, 169, 46, 0.42) 100%);
}

.contact-footer__social-link svg { width: 100%; height: 100%; display: block; }

.contact-footer__legal { text-align: right; }

.contact-footer__address {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: normal;
  color: #f6f1e7;
  white-space: nowrap;
}

.contact-footer__copyright {
  margin: 17px 0 0;
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: #8f8779;
  /* the merged legal string is 442px against a 342px column, so it must be
     allowed to wrap - nowrap pushed it 100px past the address above it */
  white-space: normal;
  text-wrap: balance;
}

.contact-footer__privacy {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.contact-footer__privacy:hover { color: var(--color-primary); }

/* ---- focus + reduced motion ---- */

.contact-footer a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-footer *,
  .contact-footer *::before,
  .contact-footer *::after {
    transition: none !important;
  }
}

/* ---- TABLET (Figma frame 853x1716) ----
   The composition restacks rather than shrinks: the contact grid becomes four
   full-width rows separated by horizontal rules, the CTA goes full-width, and
   the meta block stacks. Breakpoint is 1240px because the desktop grid uses
   fixed 270px columns totalling 1200 - below that it would overflow.
   Figma insets the CTA 18px further left than the contact rows; that is
   deliberate and preserved. */
@media (max-width: 1240px) {
  .contact-footer {
    padding-bottom: 0;
  }

  .contact-footer__surface {
    border-radius: 48px;
  }

  .contact-footer__container {
    max-width: none;
    padding: 80px 44px 80px 62px;
  }

  .contact-footer__decor-circle {
    left: auto;
    right: -34%;
    top: 46%;
    width: 1406px;
    height: 959px;
  }

  .contact-footer__decor-rings {
    left: auto;
    right: -28%;
    top: -281px;
    width: 752px;
    height: 722px;
  }

  /* header: title over a full-width CTA */
  .contact-footer__header {
    display: block;
    padding-left: 17px;
    min-height: 0;
  }

  .contact-footer__title {
    width: min(483px, 100%);
    font-size: 32px;
    line-height: 40px;
  }

  .contact-footer__cta-wrap {
    align-items: stretch;
    gap: 27.5px;
    margin: 51px 0 0 -17px;
  }

  .contact-footer__primary-cta {
    width: 100%;
    height: 95.53px;
    padding: 0 14px 0 43.6px;
    border-radius: 47.77px;
    font-size: 24px;
  }

  .contact-footer__cta-arrow {
    width: 67.98px;
    height: 67.43px;
  }

  .contact-footer__cta-arrow svg {
    width: 18.32px;
    height: 19.67px;
  }

  .contact-footer__response-note {
    margin: 0 0 0 18px;
    font-size: 18px;
    text-transform: uppercase;
  }

  .contact-footer__response-note::before {
    width: 9.83px;
    height: 8.43px;
  }

  /* contact grid -> stacked rows */
  .contact-footer__contact-grid {
    grid-template-columns: 1fr;
    margin: 47.5px 0 0 18px;
    border: 0;
    border-image: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .contact-footer__contact-item {
    height: auto;
    padding: 53.19px 0 63.5px;
  }

  .contact-footer__contact-item:first-child,
  .contact-footer__contact-item:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  /* divider becomes the rule above each subsequent row */
  .contact-footer__contact-item + .contact-footer__contact-item::before {
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .contact-footer__contact-label {
    gap: 11.82px;
    font-size: 18px;
  }

  .contact-footer__contact-label svg {
    width: 39.4px;
    height: 39.4px;
  }

  .contact-footer__contact-item:last-child .contact-footer__contact-label svg {
    width: 41.37px;
    height: 41.37px;
  }

  .contact-footer__contact-value {
    margin-top: 34.48px;
    font-size: 24px;
    white-space: normal;
  }

  .contact-footer__contact-arrow,
  .contact-footer__contact-item:last-child .contact-footer__contact-arrow {
    right: 0;
    top: 59.1px;
    width: 37.22px;
    height: 35.46px;
  }

  /* meta stacks */
  .contact-footer__meta {
    grid-template-columns: 1fr;
    margin: 22.7px 0 0 20px;
  }

  .contact-footer__brand-lockup { margin-top: 0; }
  .contact-footer__brand-lockup img { height: 93.54px; }

  .contact-footer__social-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50.5px;
  }

  .contact-footer__social-label {
    margin: 0;
    font-size: 18px;
  }

  .contact-footer__social-list { gap: 20.46px; }

  .contact-footer__social-link {
    width: 70.47px;
    height: 68.67px;
  }

  .contact-footer__legal {
    margin-top: 50.5px;
    text-align: left;
  }

  .contact-footer__address {
    font-size: 18px;
    white-space: normal;
  }

  .contact-footer__copyright {
    margin-top: 23px;
    font-size: 16px;
    white-space: normal;
  }
}

/* ---- MOBILE ----
   Same stacked composition as tablet, stepped down. Derived rather than
   supplied, so the ratios follow the tablet frame instead of inventing a
   new layout. */
@media (max-width: 600px) {
  .contact-footer__surface { border-radius: 28px; }

  .contact-footer__container { padding: 44px 22px 48px 26px; }

  .contact-footer__title { font-size: 22px; line-height: 28px; }

  .contact-footer__cta-wrap { gap: 18px; margin-top: 24px; }

  .contact-footer__primary-cta {
    height: 64px;
    padding: 0 8px 0 24px;
    border-radius: 32px;
    font-size: 15px;
  }

  .contact-footer__cta-arrow { width: 46px; height: 46px; }
  .contact-footer__cta-arrow svg { width: 13px; height: 14px; }

  .contact-footer__response-note { margin-left: 10px; font-size: 12px; }
  .contact-footer__response-note::before { width: 7px; height: 6px; }

  .contact-footer__contact-grid { margin: 30px 0 0 10px; }

  .contact-footer__contact-item { padding: 28px 0 32px; }

  .contact-footer__contact-label { gap: 8px; font-size: 12px; }
  .contact-footer__contact-label svg,
  .contact-footer__contact-item:last-child .contact-footer__contact-label svg {
    width: 26px;
    height: 26px;
  }

  .contact-footer__contact-value {
    margin-top: 18px;
    font-size: 17px;
    word-break: break-word;
  }

  .contact-footer__contact-arrow,
  .contact-footer__contact-item:last-child .contact-footer__contact-arrow {
    top: 32px;
    width: 22px;
    height: 21px;
  }

  .contact-footer__meta { margin: 44px 0 0 10px; }

  .contact-footer__brand-lockup img { height: 58px; }

  .contact-footer__social-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
  }

  .contact-footer__social-label { font-size: 12px; }
  .contact-footer__social-list { gap: 12px; }
  .contact-footer__social-link { width: 46px; height: 45px; }

  .contact-footer__legal { margin-top: 32px; }
  .contact-footer__address { font-size: 14px; }
  .contact-footer__copyright { margin-top: 14px; font-size: 12px; }
}

/* ---- restored: /news card styles (removed in error during the
   homepage news-section cleanup; the markup lives on /news, not the
   homepage, so these rules are still required) ---- */
.eh-news__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  flex-wrap: wrap;
}

.eh-news__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  max-width: 32rem;
  margin: 0;
}

.eh-news__cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
  color: var(--color-ink);
  transition: 0.35s all ease-out;
}

.eh-news__cta:hover {
  transform: scale(0.95);
}

.eh-news-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: 0.35s all ease-out;
}

.eh-news-card:hover {
  transform: translateY(-6px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.eh-news-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.eh-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eh-news-card__badge {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: #fff;
  color: var(--color-primary-deep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -6px rgba(20, 17, 13, 0.35);
}

.eh-news-card__badge svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  stroke: #000;
}

.eh-news-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.eh-news-card__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0;
}

.eh-news-card__title a {
  color: var(--color-text);
}

.eh-news-card__excerpt {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.eh-news-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-primary-deep);
}

.eh-news-card__more svg {
  width: 1em;
  height: 1em;
  transition: 0.35s all ease-out;
}

.eh-news-card:hover .eh-news-card__more svg {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .eh-news__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================================
   DESKTOP-ONLY FIGMA FIDELITY PASS (>=1241px)
   Every rule below is wrapped in this query specifically because the
   properties it touches have no independent tablet/mobile override
   elsewhere in this file - editing the base (unscoped) rule directly
   would have leaked into the 768-1240px and <=767px ranges. Verified
   against node 1561:5798 at a 1600px reference viewport.
   ===================================================================== */
@media (min-width: 1241px) {
  /* Navbar was rendering ~26px lower than the y35 Figma target - no
     tablet override exists for this property, so the 26px correction is
     scoped here rather than touched on the base rule. */
  .header-main {
    margin-top: 9px;
  }

  /* Hero: was 962px, target 1027px - the grid reflow from the earlier
     media margin-top increase left the section short at the bottom. */
  .eh-hero {
    padding-bottom: 129px;
  }

  /* Row 1 (БУДУЄМО) drifted down ~44.7px as a side effect of that same
     reflow. A transform is used instead of margin/padding specifically
     because it doesn't participate in the grid's auto-track sizing, so
     it can't re-disturb the now-correct media/row2/row3 positions. */
  .eh-hero__title > .eh-hero__row:nth-child(1) {
    transform: translateY(-44.7px);
  }

  /* About must start exactly 48px after Hero (Hero y0 h1027, About
     y1075) - the shared --space-2xl token computes to ~64px at this
     viewport, 16px over target. */
  .section-about-company {
    margin-top: 48px;
  }

  .section-about-company__break-d {
    display: inline;
  }

  /* Figma has ФОРМАТИ РОЗМІЩЕННЯ as one line; the shared markup's <br>
     is only meant for tablet/mobile, so it's suppressed here rather
     than removed from the HTML. */
  .placement-formats__break-d {
    display: none;
  }

  .placement-formats__list {
    margin-top: 14px;
  }

  /* Services must start 72px after About (the shared --space-2xl token
     is ~64px at this viewport) - internal card design is untouched. */
  .section-services {
    margin-top: 72px;
  }

  /* Services grid bug: .services-grid uses fixed absolute-px columns
     (490.59px 668px) sized for exactly a 1200px container, with no
     scaling of its own. .eh-container's content-box IS exactly 1200px
     at wide desktop widths, but below ~1272px viewport it shrinks under
     1200px (padding is capped at 36px, so above ~1200px of pure vw
     headroom it can't shrink further) - the fixed grid then overflows
     its own container, drifting out of alignment with every other
     section that uses .eh-container (including Why Us).
     Fix: scale the whole fixed 1200px composition (header + grid) as one
     unit to whatever width .eh-container actually renders at, the same
     technique already used for the hero and the About route stage.
     scaleServices() in the page script drives the transform + wrapper
     height; at >=1272px the computed scale is 1 (a no-op), so nothing
     changes for the common case - only the 1241-1271px band, where the
     bug was live, is affected. */
  .section-services__scaler {
    width: 1200px;
    transform-origin: top left;
  }

  /* Figma's 391px-wide heading box vs the current 374px is what lets
     "ОБИРАЮТЬ НАС" wrap to a third line, which is also why the dark
     surface was rendering ~90px taller than its 886px target. */
  .section-why-us__heading {
    width: 391px;
  }

  /* Gap from Services (91px was the shared token; Figma wants 104px). */
  .section-why-us {
    margin-top: 104px;
    /* Explicit height rather than relying purely on the flow fix below to
       land there - #why-us is the dark surface itself, and overflow:hidden
       is already set, so this is a hard target rather than a guess. */
    height: 886px;
  }

  /* The number (featured-stat__value) stays put; everything under it had
     ~44px too much reserved space. Accent-line is the first sibling after
     the number, so pulling its own margin-top in by 44px cascades the
     same shift through content/caption/badge automatically via normal
     flow - no separate offset needed on any of the three. */
  .featured-stat__accent-line {
    margin-top: -16px;
  }

  .featured-stat__badge {
    margin-left: -17.5px;
  }

  /* Trust: restore the original 42.691px/125px pair (padding-top puts
     the heading at Figma's y42.62 almost exactly; padding-bottom hits
     the section's 811px total height). Only the gap from Why Us changes
     here (64px shared token -> 67px). */
  .trust-section {
    margin-top: 67px;
    padding-top: 42.691px;
    padding-bottom: 125px;
  }

  /* Footer/Trust frames overlap in Figma (surface begins 9px before
     Trust's frame ends), which the previous +32px pass undershot -
     confirmed empirically that -20px is the right value here, replacing
     32px outright rather than layering a second offset on top of it. */
  .contact-footer {
    margin-top: -20px;
    padding-bottom: 51px;
  }
}

/* =====================================================================
   WHY US — tablet/mobile (<=1240px), one shared scaled composition.
   Figma reference: 853x1531, radius 48px (node 1577:2530). The desktop
   2-col grid (.section-why-us__container, >=1241px) is untouched -
   .responsive-host/.responsive-scaler are display:contents outside this
   query, so they don't participate in the box model there at all and
   desktop renders exactly as it did before this block existed.

   Same DOM as desktop, no duplicated markup: .section-why-us__intro
   becomes display:contents here, so its children (heading, description,
   featured-stat) sit as independent siblings of .metrics-grid inside the
   scaler, in the same order the DOM already has them - matching Figma's
   title -> featured-stat -> metrics-grid stack with nothing moved via JS.

   Metric-card typography/positions use Figma's exact tablet numbers
   where given (16.426/98.441/58.851/18.479 etc); the few values Figma
   didn't isolate as a distinct layer (grid dividers, card margins) are
   the desktop numbers scaled by 810/756 (≈1.0714) - cross-checked
   against Figma's own card width/height (348/262), which the same ratio
   reproduces almost exactly, so it's a reliable stand-in for the rest.
   ===================================================================== */

.section-why-us__responsive-host,
.section-why-us__responsive-scaler {
  display: contents;
}

@media (max-width: 1240px) {
  .section-why-us {
    border-radius: 48px;
  }

  .section-why-us__container {
    display: block;
    padding-block: 0;
  }

  .section-why-us__responsive-host {
    display: block;
    position: relative;
    width: 100%;
  }

  .section-why-us__responsive-scaler {
    display: block;
    position: relative;
    width: 853px;
    /* Every direct child (title/featured-stat/metrics-grid) is
       position:absolute and .intro is display:contents, so this element
       has no in-flow content to size itself against - offsetHeight would
       read 0 without this. */
    height: 1531px;
    transform-origin: top left;
  }

  .section-why-us__intro {
    display: contents;
  }

  /* display:contents suppresses .intro's own box but its ::before is
     still generated (CSS Display L3) - with no box, position:relative
     no longer applies, so this absolutely-positioned pseudo-element
     resolved against the scaler instead, drawing a second, stray accent
     bar at the canvas's top-left corner alongside the real one on
     .section-why-us__heading::before below. */
  .section-why-us__intro::before {
    display: none;
  }

  /* ---- title: Figma x45 y80 w391 h148 ---- */
  .section-why-us__heading {
    position: absolute;
    left: 62px;
    top: 80px;
    width: 374px;
    margin: 0;
    font-size: 32px;
    line-height: 40px;
  }

  .section-why-us__heading::before {
    content: '';
    position: absolute;
    left: -17px;
    top: 0;
    width: 2px;
    height: 101px;
    background: linear-gradient(180deg, rgba(255, 87, 34, 0) 0%, var(--color-accent-hot) 50%, rgba(255, 87, 34, 0) 100%);
  }

  .section-why-us__description {
    position: absolute;
    left: 62px;
    top: 180px;
    width: 373px;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
  }

  /* ---- featured 10+ : Figma x62 y284 w751 h282.624 ---- */
  .featured-stat {
    position: absolute;
    left: 62px;
    top: 284px;
    width: 751px;
    height: 282.624px;
    margin-top: 0;
  }

  /* Figma didn't export the radar as its own isolated layer at this
     frame, so this is a best-effort scale-and-recentre on the number
     rather than a value read directly off the design - sized to sit
     just past the number's own box for the same soft-halo effect the
     desktop version has, clipped by .section-why-us's own overflow.
     left/top are the box's CENTRE, not its top-left corner: the base
     rule's transform:translate(-50%,-50%) stays active here (the
     [data-reveal] states re-assert it at higher specificity than this
     override could clear), so treating left/top as top-left put ~90% of
     the box off-canvas above the number instead of behind it. */
  .featured-stat__radar {
    left: 160px;
    top: 90px;
    width: 380px;
    height: 378px;
  }

  .featured-stat__value {
    position: absolute;
    left: 0;
    top: 0;
    width: 319.55px;
    height: 181.05px;
    margin: 0;
    line-height: 1;
  }

  .featured-stat__number { font-size: 179.68px; }
  .featured-stat__suffix { font-size: 87.78px; }

  .featured-stat__accent-line { display: none; }

  .featured-stat__content {
    position: absolute;
    left: 380px;
    top: 111px;
    width: 345px;
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
  }

  .featured-stat__caption {
    position: absolute;
    left: 373px;
    top: 232px;
    width: 378px;
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
  }

  .featured-stat__badge {
    position: absolute;
    left: 1px;
    top: 227px;
    width: auto;
    height: 55.62px;
    margin: 0;
    font-size: 12px;
  }

  /* ---- metrics grid: Figma x43 y623 w810 h806.79, 2x2 unchanged ---- */
  .metrics-grid {
    position: absolute;
    left: 43px;
    top: 623px;
    grid-column: auto;
    width: 810px;
    height: 806.79px;
    grid-template-columns: 418.93px 391.07px;
    grid-template-rows: 403.93px 1fr;
  }

  .metrics-grid::before {
    left: 1px;
    height: 100%;
  }

  .metrics-grid::after {
    left: 418.93px;
    top: 33.21px;
    height: 741.43px;
  }

  .metrics-grid__rule {
    left: 34.29px;
    top: 403.93px;
    width: 776.79px;
  }

  .metric-card {
    width: 348.21px;
    height: 262.5px;
  }

  .metric-card--radio-experience,
  .metric-card--national-coverage {
    margin: 75px 0 0 34.29px;
  }

  .metric-card--daily-audience,
  .metric-card--business-projects {
    margin: 66.43px 0 0 34.29px;
  }

  .metric-card__eyebrow {
    font-size: 16.43px;
    line-height: 19.7px;
  }

  .metric-card__value {
    font-size: 98.44px;
    line-height: 122px;
  }

  .metric-card__suffix { font-size: 58.85px; }

  .metric-card--daily-audience .metric-card__value  { font-size: 87.74px; line-height: 109px; }
  .metric-card--daily-audience .metric-card__suffix { font-size: 53.5px; }

  .metric-card__description {
    font-size: 18.48px;
    line-height: 23px;
  }
}