/*
Theme Name: Emerald Stream Capital Local
Theme URI: https://emeraldstream.capital/
Author: Emerald Stream Capital
Description: A custom Underscores-inspired WordPress theme converted from the supplied static landing page.
Version: 1.2.13
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: emerald-stream-capital
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Emerald Stream Capital responsive stylesheet. */

:root {
  /* one artboard pixel as a UNITLESS ratio (viewport / 1920, capped at 1).
     Must be unitless so `453px * var(--u)` and `scale(var(--u))` stay valid.
     tan(atan2(len,len)) divides two lengths to yield a number; the first
     line is a fallback for browsers without CSS trig functions. */
  --u: 1;
  --u: tan(atan2(min(100vw, 1920px), 1920px));
}

/* ===== Base reset ===== */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  font-family: "Stack Sans Text", sans-serif;
  background-color: #ffffff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  clip: auto !important;
  clip-path: none;
  height: auto;
  left: 1rem;
  padding: 0.75rem 1rem;
  top: 1rem;
  width: auto;
  z-index: 99999;
  background: #fff;
  color: #131621;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-area {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: 180px 0 100px;
  min-height: 70vh;
}

.content-area .entry-title,
.content-area h1 {
  color: #212b4e;
}

.content-area a {
  color: #526bbd;
}

/* ===== Root landing container ===== */
.landing-page {
  width: 100%;
  min-height: 225.520833vw;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

/* ===== Background Elements ===== */
.bg-img {
  position: absolute;
  left: 0;
}

.bg-img-1 {
  width: 100%;
  height: 45.859375vw;
  top: 109.84375vw;
  object-fit: cover;
}

.bg-img-2 {
  width: 100%;
  height: 46.875vw;
  top: 7.14vw;
  object-fit: cover;
}

.hero-desktop-video {
  position: absolute;
  z-index: 2;
  top: 7.14vw;
  right: 0;
  width: 60%;
  height: 46.6vw;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(22% 6%, 100% 0, 100% 82%, 0 93%);
  pointer-events: none;
}

.bg-img-2 {
  transition: opacity 0.2s ease;
}

.landing-page.hero-video-ready .bg-img-2 {
  opacity: 0;
  visibility: hidden;
}

.bg-img-3 {
  width: 53.541667vw;
  height: 43.90625vw;
  top: 9.895833vw;
}

.bg-img-4 {
  width: 100%;
  height: 41.614583vw;
  top: 76.614583vw;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  body.home .hero-section {
    background: #131621;
  }
}

.who-bg-video {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 109.84375vw;
  width: 100%;
  height: 45.859375vw;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(0 0, 100% 18.161%, 100% 80.76%, 0 100%);
  -webkit-mask: url("assets/images/213a3923-6f3f-485c-94e6-671bedc23105.svg") center / 100% 100% no-repeat;
  mask: url("assets/images/213a3923-6f3f-485c-94e6-671bedc23105.svg") center / 100% 100% no-repeat;
  filter: none;
  pointer-events: none;
}

.footprint-bg-video {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 76.614583vw;
  width: 100%;
  height: 41.614583vw;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(0 0, 100% 13.628%, 100% 100%, 0 82.183%);
  -webkit-mask: url("assets/images/74eca446-d130-4d38-b765-41683161ac5e.svg") center / 100% 100% no-repeat;
  mask: url("assets/images/74eca446-d130-4d38-b765-41683161ac5e.svg") center / 100% 100% no-repeat;
  filter: none;
  pointer-events: none;
}

/* ===== Navigation ===== */
.site-header {
  width: 100%;
  height: 6.927083vw;
  padding: 1.302083vw 5vw;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

.site-logo,
.custom-logo {
  width: 7.291667vw;
  height: 4.322917vw;
  cursor: pointer;
}

body:not(.home) .landing-page {
  min-height: 100vh;
}

body:not(.home) .site-header,
body:not(.home) .site-footer {
  position: relative;
  top: auto;
}

.site-nav {
  gap: 3.90625vw;
}

.menu-toggle {
  display: none;
}

.nav-btn {
  width: auto;
  height: auto;
  color: rgba(37, 37, 37, 1);
  font-size: 1.041667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 300;
  line-height: 1.354167vw;
  letter-spacing: 0px;
  text-align: left;
  flex-shrink: 0;
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
}

.nav-btn--active {
  color: rgba(19, 22, 33, 1);
  font-weight: 500;
}

.nav-btn:hover {
  color: rgba(126, 148, 220, 1);
}

/* ===== Section container ===== */
.section-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

/* ===== Hero Section ===== */
.hero-section {
  width: 72.916667vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 23.802083vw;
  gap: 1.041667vw;
}

.hero-title {
  margin: 0;
  color: rgba(126, 148, 220, 1);
  font-size: 3.229167vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
  line-height: 3.75vw;
  max-width: 24.635417vw;
}

.hero-text {
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 1.041667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 400;
  line-height: 1.5625vw;
  max-width: 24.635417vw;
}

.hero-mobile-media {
  display: none;
}

.section-mobile-video {
  display: none;
}

/* ===== Allocators Section ===== */
.allocators-section {
  width: 72.916667vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60.052083vw;
  gap: 1.041667vw;
}

.allocators-left {
  gap: 1.041667vw;
  flex: 1;
}

.allocators-icon {
  width: 6.302083vw;
  height: 3.645833vw;
}

.allocators-heading {
  margin: 0;
  color: rgba(33, 43, 78, 1);
  font-size: 2.916667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
  line-height: 3.4375vw;
}

.allocators-right {
  flex: 1;
}

.allocators-text {
  margin: 0;
  color: rgba(37, 37, 37, 1);
  font-size: 1.302083vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
  line-height: 1.822917vw;
}

/* ===== Global Footprint Section ===== */
.footprint-section {
  width: 72.916667vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 92.708333vw;
  gap: 1.5625vw;
  z-index: 2;
}

@media (min-width: 992px) {
  .site-header {
    left: 13.541667vw;
    width: 72.916667vw;
    padding-left: 0;
    padding-right: 0;
  }
}

.footprint-heading {
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 2.916667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
  line-height: 3.4375vw;
  text-align: center;
}

.footprint-list {
  gap: 5.208333vw;
}

.footprint-item {
  gap: 0.78125vw;
}

.footprint-icon {
  width: 0.989583vw;
  height: 1.041667vw;
}

.footprint-label {
  color: rgba(255, 255, 255, 1);
  font-size: 1.302083vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 500;
}

/* ===== Who We Are Section ===== */
.who-section {
  width: 72.916667vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 125.286458vw;
  gap: 1.041667vw;
  z-index: 2;
}

.who-heading {
  margin: 0;
  color: rgba(126, 148, 220, 1);
  font-size: 2.916667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
  line-height: 3.4375vw;
}

.who-body {
  gap: 1.041667vw;
}

.who-text {
  margin: 0;
  color: rgba(255, 255, 255, 1);
  font-size: 1.041667vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 400;
  line-height: 1.458333vw;
}

.who-text-highlight {
  color: #7e94dc;
}

.who-img {
  max-width: 100%;
  height: auto;
}

/* ===== How We Work Section ===== */
.work-section {
  width: 72.916667vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 160.911458vw;
}

.work-header {
  gap: 1.041667vw;
  margin-bottom: 2.604167vw;
}

.work-header-icon {
  height: 3.75vw;
}

.work-heading {
  margin: 0;
  color: rgba(19, 22, 33, 1);
  font-size: 3.229167vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 600;
}

.work-cards {
  gap: 1.041667vw;
}

/* --- Card: outer box scales, inner holds native px layout --- */
.work-card {
  --cu: 1;
  position: relative;
  flex-shrink: 0;
  width: 23.59375vw;
  height: 21.979167vw;
}

@media (max-width: 1919px) and (min-width: 1701px) { .work-card { --cu: 0.9; } }
@media (max-width: 1700px) and (min-width: 1501px) { .work-card { --cu: 0.8; } }
@media (max-width: 1500px) and (min-width: 1351px) { .work-card { --cu: 0.72; } }
@media (max-width: 1350px) and (min-width: 1201px) { .work-card { --cu: 0.65; } }
@media (max-width: 1200px) and (min-width: 992px) { .work-card { --cu: 0.55; } }

.work-card--2 {
  width: 23.697917vw;
}

.work-card--3 {
  width: 23.802083vw;
}

.work-card-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 453px;
  height: 422px;
  transform: scale(var(--cu));
  transform-origin: top left;
}

.work-card--2 .work-card-inner {
  width: 455px;
}

.work-card--3 .work-card-inner {
  width: 457px;
}

/* Card internals stay at native pixels — the wrapper scales them */
.work-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-card-line {
  position: absolute;
  left: 0;
  top: 343px;
}

.work-card-mark {
  position: absolute;
  left: 23px;
  top: 358px;
}

.work-card-text {
  position: absolute;
  left: 98px;
  top: 100px;
  color: white;
  font-size: 20px;
  line-height: 30px;
  font-family: "Stack Sans Text", sans-serif;
}

.work-card-text--1 {
  width: 260px;
}

.work-card-text--2 {
  left: 98px;
  width: 262px;
}

.work-card-text--3 {
  left: 99px;
  width: 263px;
}

.work-card-title {
  position: absolute;
  left: 0;
  top: 437px;
  margin: 0;
  color: rgba(33, 43, 78, 1);
  font-size: 24px;
  font-weight: 600;
  font-family: "Stack Sans Text", sans-serif;
}

/* Horizontal How We Work rows */
.work-cards {
  display: block !important;
  width: 100%;
}

.work-card,
.work-card--2,
.work-card--3 {
  display: grid;
  grid-template-columns: 5.52vw 27.7vw minmax(0, 1fr);
  align-items: center;
  column-gap: 2.08vw;
  width: 100%;
  height: 8.33vw;
  position: relative;
  border-bottom: 1px solid rgba(19, 22, 33, 0.25);
}

.work-card:last-child {
  border-bottom: 0;
}

.work-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.58vw;
  height: 4.17vw;
  background: #829ce7;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.work-card-icon img {
  width: 2.35vw;
  height: 2.35vw;
  object-fit: contain;
}

.work-card .work-card-title {
  position: static;
  margin: 0;
  color: #212b4e;
  font-size: 1.67vw;
  line-height: 1.2;
  font-weight: 600;
}

.work-card .work-card-text {
  position: static;
  width: auto;
  margin: 0;
  color: #131621;
  font-size: 0.94vw;
  line-height: 1.35;
}

@media (max-width: 991.98px) {
  .work-section .work-cards { row-gap: 0; }
  .work-section .work-card,
  .work-section .work-card--2,
  .work-section .work-card--3 {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "icon title" "text text";
    column-gap: 20px;
    row-gap: 18px;
    width: 100%;
    height: auto;
    max-width: 720px;
    padding: 28px 0;
  }
  .work-card-icon { grid-area: icon; width: 68px; height: 62px; }
  .work-card-icon img { width: 34px; height: 34px; }
  .work-card .work-card-title { grid-area: title; font-size: clamp(22px, 4vw, 30px); }
  .work-card .work-card-text { grid-area: text; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.5; }
}

@media (max-width: 575.98px) {
  .work-section .work-card,
  .work-section .work-card--2,
  .work-section .work-card--3 {
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    padding: 24px 0;
  }
  .work-card-icon { width: 58px; height: 54px; }
  .work-card-icon img { width: 29px; height: 29px; }
  .work-card .work-card-title { font-size: 21px; }
  .work-card .work-card-text { font-size: 16px; }
}

/* ===== Footer Section ===== */
.site-footer {
  width: 100%;
  height: 24.479167vw;
  position: absolute;
  left: 0;
  top: 201.015625vw;
  overflow: hidden;
}

.footer-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-overlay {
  width: 61.822917vw;
  height: 21.354167vw;
  position: absolute;
  left: 0;
  top: 1.5625vw;
}

.footer-left {
  position: absolute;
  left: 5vw;
  top: 7.8125vw;
  gap: 2.083333vw;
}

.footer-logo {
  width: 9.375vw;
  height: 5.572917vw;
}

.footer-email {
  color: rgba(19, 19, 20, 1);
  font-size: 0.9375vw;
  font-family: "Stack Sans Text", sans-serif;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-email:hover {
  opacity: 0.7;
}

.footer-copyright {
  position: absolute;
  right: 5vw;
  bottom: 1.5625vw;
  color: rgba(255, 255, 255, 1);
  font-size: 0.833333vw;
  font-family: "Stack Sans Text", sans-serif;
  font-weight: 300;
  text-align: right;
}

/* =========================================================
   RESPONSIVE — small screens & mobile (< 992px)
   Switch from the scaled artboard to a stacked flow layout
   with fluid clamp() typography.
   ========================================================= */

@media (max-width: 991.98px) {
  .landing-page {
    min-height: auto;
    overflow-x: hidden;
  }

  /* Desktop-positioned decorations are replaced by in-flow mobile media. */
  .bg-img {
    display: none !important;
  }

  .footprint-bg-video {
    display: none;
  }

  .who-bg-video {
    display: none;
  }

  body.home .footprint-section,
  body.home .who-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .section-mobile-video {
    display: block;
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }

  .hero-desktop-video {
    display: none;
  }

  .section-container {
    position: static;
    max-width: 100%;
    margin: 0;
  }

  /* Every absolutely-placed section becomes normal flow */
  .hero-section,
  .allocators-section,
  .footprint-section,
  .who-section,
  .work-section {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* ---------- Header ---------- */
  .site-header {
    position: relative;
    height: 103px;
    padding: 20px 24px;
    z-index: 20;
    background: #fff;
  }
  .site-logo {
    width: 140px;
    height: auto;
  }
  .site-nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 16px;
    right: 16px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(33, 43, 78, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(19, 22, 33, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }
  .site-nav ul {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .site-nav--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-btn {
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.3;
    width: 100%;
    padding: 13px 14px;
    border-radius: 9px;
  }
  .nav-btn:hover,
  .nav-btn:focus-visible {
    background: rgba(126, 148, 220, 0.1);
    outline: none;
  }
  .menu-toggle {
    display: flex;
    width: 46px;
    height: 46px;
    padding: 11px 9px;
    flex-direction: column;
    justify-content: space-between;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle:hover,
  .menu-toggle:focus-visible {
    background: rgba(126, 148, 220, 0.1);
    outline: 2px solid rgba(126, 148, 220, 0.55);
    outline-offset: 2px;
  }
  .menu-toggle-line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #212b4e;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-line:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  /* ---------- Hero (dark band) ---------- */
  .hero-section {
    padding: 64px 24px 0;
    gap: 18px;
    background: linear-gradient(180deg, #232d56 0%, #19223f 100%);
  }
  .hero-section > * {
    position: relative;
    z-index: 1;
  }
  .hero-mobile-media {
    display: block !important;
    width: 100vw;
    max-width: none;
    height: auto;
    aspect-ratio: 32 / 15;
    margin-top: 34px;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    object-fit: cover;
    background: #131621;
    transform: none !important;
    rotate: 0deg !important;
    clip-path: none !important;
    border-radius: 0;
  }
  .hero-title {
    font-size: clamp(30px, 4.8vw, 48px);
    line-height: 1.16;
    max-width: 640px;
  }
  .hero-text {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
    max-width: 640px;
  }

  /* ---------- Allocators (light) ---------- */
  .allocators-section {
    padding: 56px 24px;
    gap: 28px;
  }
  .allocators-left {
    gap: 20px;
  }
  .allocators-icon {
    width: clamp(84px, 10vw, 121px);
    height: auto;
  }
  .allocators-heading {
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.2;
  }
  .allocators-text {
    font-size: clamp(17px, 2.4vw, 25px);
    line-height: 1.4;
  }

  /* ---------- Global Footprint (dark band) ---------- */
  .footprint-section {
    padding: 60px 24px;
    gap: 30px;
    background: linear-gradient(180deg, #232d56 0%, #19223f 100%);
  }
  .footprint-heading {
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.2;
  }
  .footprint-list {
    gap: clamp(24px, 5vw, 60px);
  }
  .footprint-icon {
    width: 19px;
    height: 20px;
  }
  .footprint-label {
    font-size: clamp(18px, 2.4vw, 25px);
  }

  /* ---------- Who We Are (dark band) ---------- */
  .who-section {
    padding: 60px 24px;
    gap: 22px;
    background: linear-gradient(180deg, #232d56 0%, #19223f 100%);
  }
  .who-heading {
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.2;
  }
  .who-text {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.5;
  }

  /* ---------- How We Work (light) ---------- */
  .work-section {
    padding: 60px 24px 88px;
  }
  .work-header {
    gap: 16px;
    margin-bottom: 40px;
  }
  .work-header-icon {
    height: clamp(44px, 6vw, 72px);
  }
  .work-heading {
    font-size: clamp(26px, 4.6vw, 52px);
  }

  /* Cards: give them a bigger scale unit so each fills the
     column (up to its native 453px). One line rescales the
     whole card — internals and images stay aligned. */
  .work-cards {
    row-gap: 64px;
  }
  .work-card {
    --cu: 1;
    width: 453px;
    height: 422px;
    max-width: 100%;
  }

  .work-card--2,
  .work-card--3 {
    width: 453px;
  }

  /* ---------- Footer ---------- */
  .site-footer {
    position: relative;
    height: auto;
    min-height: 320px;
    top: auto;
    padding: 72px 24px 68px;
  }
  .footer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .footer-overlay {
    display: block;
    width: min(760px, 150vw);
    height: calc(100% - 24px);
    left: -18%;
    top: 12px;
    opacity: 0.72;
    object-fit: fill;
  }
  .footer-left {
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
  }
  .footer-logo {
    width: clamp(140px, 24vw, 180px);
    height: auto;
  }
  .footer-email {
    font-size: clamp(15px, 2.2vw, 18px);
  }
  .footer-copyright {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    text-align: left;
    font-size: clamp(11px, 1.7vw, 13px);
  }
}

/* ===================== Small phones ===================== */
@media (max-width: 575.98px) {
  .site-header {
    padding: 18px 20px;
  }
  .hero-section,
  .footprint-section,
  .who-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-section {
    padding-bottom: 0;
  }
  .hero-mobile-media {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  .allocators-section {
    padding: 44px 20px;
    text-align: center;
  }
  .allocators-icon {
    align-self: center;
    margin-right: auto;
    margin-left: auto;
  }
  .work-section {
    padding: 48px 20px 76px;
  }
  .work-cards {
    row-gap: 52px;
  }
}

@media (max-width: 500px) {
  .work-card { --cu: 0.88; width: 399px; height: 371px; }
}

@media (max-width: 450px) {
  .work-card { --cu: 0.78; width: 353px; height: 329px; }
}

@media (max-width: 400px) {
  .work-card { --cu: 0.68; width: 308px; height: 287px; }
}