:root {
  --cream: #f2eadb;
  --sand: #cdbca6;
  --sky: #b0c8d6;
  --blue: #6a93a8;
  --ink: #20323e;
  --white: #fffdf8;
  --font-ui: "DM Sans", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-display: "Playfair Display", serif;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-size: 18px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
  font: inherit;
}
img {
  display: block;
  width: 100%;
}

body.menu-open {
  overflow: hidden;
}

.site-shell {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  background:
    radial-gradient(
      circle at 14% 16%,
      rgba(255, 255, 255, 0.9),
      transparent 31rem
    ),
    var(--cream);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 90px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding: 0 60px;
  transition:
    height 0.45s ease,
    background 0.45s ease,
    box-shadow 0.45s ease,
    backdrop-filter 0.45s ease;
}

.site-header.is-scrolled {
  height: 75px;
  background: rgba(242, 234, 219, 0.72);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 1px 0 rgba(32, 50, 62, 0.08);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.brand-copy strong {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-transform: uppercase;
}
.brand-copy small {
  color: rgba(98, 151, 186, 1);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 36px);
}
.desktop-nav a {
  position: relative;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
}
.socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-link {
  width: 40px;
  height: 40px;
  background-color: var(--blue);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.social-link svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: transform 0.3s ease;
}

.social-link .fill-dot {
  fill: #fff;
  stroke: none;
}

.social-link .telegram-fill {
  fill: #fff;
  stroke: none;
}

.social-link .inner-stroke {
  fill: none;
  stroke: #20323e;
  stroke-width: 1.3;
}

.social-link .fill-shape {
  fill: #fff;
  stroke: none;
}

.social-link:hover {
  transform: translateY(-2px);
  opacity: 0.72;
}

.social-link:hover svg {
  transform: scale(1.06);
}
.social-link .inner-stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 1.1;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 9px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 1px;
  margin-left: auto;
  background: #fff;
  transition:
    transform 0.4s ease,
    width 0.4s ease;
}
.menu-toggle span:nth-child(1) {
  width: 31px;
}
.menu-toggle span:nth-child(2) {
  width: 23px;
  margin-top: 7px;
}
.menu-toggle span:nth-child(3) {
  width: 15px;
  margin-top: 7px;
}
.menu-toggle:hover span:nth-child(1) {
  width: 18px;
}
.menu-toggle:hover span:nth-child(2) {
  width: 31px;
}
.menu-toggle:hover span:nth-child(3) {
  width: 24px;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 50, 62, 0.28);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(520px, 92vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(24px, 5vw, 46px) 30px;
  background: var(--ink);
  color: var(--cream);
  transform: translateX(102%);
  transition: transform 0.68s cubic-bezier(0.72, 0, 0.16, 1);
}
.mobile-menu.is-open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-menu.is-open .mobile-menu__backdrop {
  opacity: 1;
}
.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}
.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__eyebrow {
  color: var(--sky);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu-close {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-close span {
  position: absolute;
  left: 7px;
  top: 20px;
  width: 30px;
  height: 1px;
  background: var(--cream);
}
.menu-close span:first-child {
  transform: rotate(45deg);
}
.menu-close span:last-child {
  transform: rotate(-45deg);
}
.mobile-menu__nav {
  display: grid;
  margin-top: clamp(56px, 12vh, 120px);
}
.mobile-menu__nav a {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(242, 234, 219, 0.16);
  font-family: var(--font-display);
  font-size: clamp(28px, 5.4vw, 46px);
  line-height: 1.08;
  transform: translateX(32px);
  opacity: 0;
  transition:
    opacity 0.35s ease,
    transform 0.55s ease,
    color 0.3s ease;
}
.mobile-menu.is-open .mobile-menu__nav a {
  transform: translateX(0);
  opacity: 1;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(1) {
  transition-delay: 0.15s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) {
  transition-delay: 0.2s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) {
  transition-delay: 0.25s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) {
  transition-delay: 0.3s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) {
  transition-delay: 0.35s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(6) {
  transition-delay: 0.4s;
}
.mobile-menu.is-open .mobile-menu__nav a:nth-child(7) {
  transition-delay: 0.45s;
}
.mobile-menu__nav a span {
  color: var(--blue);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.1em;
}
.mobile-menu__nav a:hover {
  color: var(--sky);
}
.mobile-menu__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
}
.mobile-menu__footer .social-link {
  border-color: rgba(242, 234, 219, 0.25);
}
.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--sky);
  font-family: var(--font-ui);
  font-size: 13px;
}
.mobile-menu__cta span {
  font-size: 22px;
}

.hero {
  position: relative;
  min-height: 100svh;
  padding: 130px 60px 90px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0 0 0 42%;
  z-index: -2;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  transform: scale(1.035);
  animation: heroImageIn 1.4s cubic-bezier(0.2, 0.7, 0.15, 1) both;
}
.hero-media__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      var(--cream) 0%,
      rgba(242, 234, 219, 0.94) 11%,
      rgba(242, 234, 219, 0.45) 25%,
      rgba(242, 234, 219, 0) 32%
    ),
    linear-gradient(0deg, rgba(32, 50, 62, 0.08), transparent 40%);
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(720px, 120%);
  padding-top: 18px;
}
.hero-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(30px, 4vh, 54px);
  color: rgba(32, 50, 62, 0.7);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.hero-kicker i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blue);
}
.hero-title {
  margin: 0;
  font-weight: 500;
  line-height: 0.79;
  letter-spacing: -0.045em;
}
.hero-title__first {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(76px, 8.2vw, 152px);
}
.hero-title__last {
  display: block;
  width: fit-content;
  margin: 0.11em 0 0 0.35em;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: clamp(78px, 8.8vw, 164px);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.06em;
  transform: rotate(-2.5deg);
  transform-origin: left center;
}

.hero-lead {
  max-width: 570px;
  margin: 0;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 50px;
}
.hero-lead em {
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 1.76em;
  font-style: italic;
  display: block;
  font-weight: 100;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}
.btn {
  min-height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 200px;
  padding: 0 18px 0 24px;
  border: 1px solid rgba(32, 50, 62, 0.28);
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn--ghost {
  background: transparent;
}
.btn:hover {
  transform: translateY(-3px);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--white);
}
.btn-arrow {
  position: relative;
  width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
}
.btn-arrow i,
.btn-arrow i::before,
.btn-arrow i::after {
  display: block;
  content: "";
  position: absolute;
}
.btn-arrow i {
  width: 31px;
  height: 1px;
  background: currentColor;
  right: 2px;
  top: 50%;
  transition: transform 0.35s ease;
}
.btn-arrow i::before {
  width: 11px;
  height: 1px;
  background: currentColor;
  right: 0;
  top: 0;
  transform: rotate(38deg);
  transform-origin: right;
}
.btn-arrow i::after {
  width: 11px;
  height: 1px;
  background: currentColor;
  right: 0;
  top: 0;
  transform: rotate(-38deg);
  transform-origin: right;
}
.btn:hover .btn-arrow i {
  transform: translateX(5px);
}

.hero-aside {
  position: absolute;
  z-index: 4;
  right: clamp(22px, 3.5vw, 68px);
  bottom: clamp(92px, 11vh, 132px);
  color: var(--white);
}
.hero-aside__index {
  display: block;
  margin-bottom: 12px;
  color: var(--sky);
  font-family: var(--font-display);
  font-size: 100px;
  font-style: italic;
}
.hero-aside p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero-scroll {
  position: absolute;
  left: clamp(30px, 5vw, 84px);
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
  color: rgba(32, 50, 62, 0.55);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero-scroll i {
  width: 1px;
  height: 42px;
  background: var(--sand);
  position: relative;
  overflow: hidden;
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -60%;
  width: 1px;
  height: 40%;
  background: var(--ink);
  animation: scrollLine 2s ease-in-out infinite;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.2, 0.65, 0.2, 1);
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    transform: scale(1.11);
  }
  to {
    opacity: 1;
    transform: scale(1.035);
  }
}
@keyframes scrollLine {
  0% {
    top: -60%;
  }
  60%,
  100% {
    top: 110%;
  }
}
@media (max-width: 1300px) {
  .site-header {
    padding: 0 30px;
  }
}
@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }
  .desktop-nav {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .header-actions {
    gap: 12px;
  }
  .header-actions .btn {
    display: none;
  }
  .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(370px, 1.05fr);
    padding-left: 54px;
    padding-right: 54px;
  }
  .hero-title__first {
    font-size: clamp(70px, 9vw, 108px);
  }
  .hero-title__last {
    font-size: clamp(74px, 9.7vw, 116px);
  }
  .hero-media {
    inset-left: 39%;
  }
  .hero-aside {
    display: none;
  }
}

@media (max-width: 820px) {
  .site-header {
    height: 78px;
    padding: 0 22px;
    grid-template-columns: 1fr auto;
  }
  .site-header.is-scrolled {
    height: 68px;
  }
  .brand {
    gap: 10px;
  }
  .brand-copy {
    gap: 0;
  }
  .brand-copy strong {
    font-size: 18px;
    color: #fff;
  }
  .brand-copy small {
    color: #fff;
  }
  .socials--desktop,
  .header-cta {
    display: none;
  }

  .hero {
    min-height: 100svh;
    display: block;
    padding: 0;
    background: var(--cream);
  }

  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(68svh, 700px);
    min-height: 520px;
    z-index: 0;
  }
  .hero-media img {
    object-position: 58% 22%;
    transform: scale(1.02);
  }
  .hero-media__veil {
    background:
      linear-gradient(
        180deg,
        rgba(242, 234, 219, 0.04) 0%,
        rgba(242, 234, 219, 0.02) 50%,
        rgba(242, 234, 219, 0.48) 72%,
        var(--cream) 96%
      ),
      linear-gradient(90deg, rgba(32, 50, 62, 0.06), transparent 55%);
  }
  .hero-copy {
    position: relative;
    z-index: 5;
    width: auto;
    margin-top: clamp(-230px, -27svh, -170px);
    padding: 0 24px 42px;
  }
  .hero-kicker {
    margin-bottom: 18px;
    color: rgba(32, 50, 62, 0.94);
    font-size: 10px;
    gap: 6px;
    text-shadow: 0 1px 18px rgba(242, 234, 219, 0.9);
  }
  .hero-title {
    line-height: 0.86;
  }
  .hero-title__first {
    font-size: clamp(56px, 15vw, 94px);
    text-shadow: 0 2px 24px rgba(242, 234, 219, 0.7);
  }
  .hero-title__last {
    margin-left: 0.2em;
    font-size: clamp(62px, 17vw, 104px);
  }

  .hero-lead {
    max-width: 560px;
    font-size: clamp(18px, 4.8vw, 24px);
    line-height: 1.2;
    margin-top: 30px;
  }
  .hero-actions {
    display: grid;
    gap: 10px;
    margin-top: 28px;
  }
  .btn {
    width: 100%;
    min-width: 0;
    min-height: 60px;
  }
  .hero-scroll {
    display: none;
  }
  .hero-aside {
    display: none;
  }

  .mobile-menu__footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 0 15px;
  }

  .hero-media {
    height: 64svh;
    min-height: 470px;
  }
  .hero-copy {
    margin-top: -60px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-title__first {
    font-size: clamp(48px, 15vw, 70px);
  }
  .hero-title__last {
    font-size: clamp(58px, 18vw, 82px);
  }
  .hero-lead {
    font-size: 18px;
  }
  .btn {
    font-size: 14px;
    padding-left: 18px;
  }
  .mobile-menu__panel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero-title__last.reveal {
    transform: rotate(-2.5deg);
  }
}

.marquee {
  position: relative;

  width: 100%;
  overflow: hidden;

  padding: 13px 0;

  border-top: 1px solid rgba(106, 147, 168, 0.14);
  border-bottom: 1px solid rgba(106, 147, 168, 0.14);

  background: rgba(176, 200, 214, 0.06);
}

.marquee::before,
.marquee::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;

  z-index: 2;

  width: clamp(35px, 6vw, 110px);

  pointer-events: none;
}

.marquee::before {
  left: 0;

  background: linear-gradient(90deg, var(--cream), transparent);
}

.marquee::after {
  right: 0;

  background: linear-gradient(270deg, var(--cream), transparent);
}

.marquee__track {
  display: flex;

  width: max-content;

  animation: marqueeMove 35s linear infinite;

  will-change: transform;
}

.marquee__group {
  display: flex;
  align-items: center;

  flex-shrink: 0;

  gap: 17px;

  padding-right: 17px;
}

.marquee span {
  flex-shrink: 0;

  color: rgba(32, 50, 62, 0.58);

  font-family: var(--font-ui);

  font-size: 9px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  white-space: nowrap;
}

.marquee i {
  flex: 0 0 auto;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--sky);
}

@keyframes marqueeMove {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (hover: hover) {
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}

@media (max-width: 767px) {
  .marquee {
    padding: 11px 0;
  }

  .marquee__track {
    animation-duration: 28s;
  }

  .marquee__group {
    gap: 14px;

    padding-right: 14px;
  }

  .marquee span {
    font-size: 8px;

    letter-spacing: 0.14em;
  }

  .marquee i {
    width: 2px;
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation-play-state: paused;
  }
}
/* =========================================================
   EXPERTISE
========================================================= */

.expertise {
  position: relative;
  overflow: hidden;

  padding: 120px 0;

  background: #f4f1ec;
}

.expertise__container {
  position: relative;
  z-index: 2;

  width: min(calc(100% - 50px), 1480px);
  margin-inline: auto;
}

/* =========================================================
   FACTS
========================================================= */

.expertise__facts {
  display: grid;

  grid-template-columns:
    1.18fr
    1fr
    0.86fr
    1.08fr
    1.15fr;

  align-items: stretch;
  margin-top: 50px;
}

.expertise-fact {
  position: relative;

  min-width: 0;
  min-height: 260px;

  padding: 8px clamp(20px, 2.4vw, 42px);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}

.expertise-fact.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);

  filter: blur(0);

  transition:
    opacity 0.9s ease,
    filter 1s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* DIVIDERS */

.expertise-fact:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 8%;
  right: 0;

  width: 1px;
  height: 84%;

  background: rgba(32, 50, 62, 0.12);

  transform: scaleY(0);

  transform-origin: center;
}

.expertise-fact.is-visible:not(:last-child)::after {
  transform: scaleY(1);

  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

/* =========================================================
   VISUAL AREA
========================================================= */

.expertise-fact__visual {
  width: 132px;
  height: 122px;

  margin-bottom: 16px;

  display: grid;
  place-items: center;
}

/* =========================================================
   NUMBERS
========================================================= */

.expertise-number {
  display: inline-flex;
  align-items: flex-start;

  color: var(--blue);

  font-family: var(--font-display);

  font-size: clamp(78px, 6.2vw, 105px);

  font-weight: 400;
  font-style: italic;

  line-height: 0.9;

  letter-spacing: -0.055em;

  white-space: nowrap;
}

.expertise-number sup {
  position: relative;

  top: 0.12em;

  margin-left: 2px;

  font-size: 0.43em;

  font-weight: 400;

  line-height: 1;
}

.expertise-number--four {
  font-size: clamp(90px, 7vw, 118px);
}

/* =========================================================
   ICONS
========================================================= */

.expertise-icon {
  display: block;

  width: 112px;
  height: 112px;

  overflow: visible;

  fill: none;

  stroke: var(--blue);

  /*
     Не робимо їх волосинками.
     У макеті вони мають чітку,
     але елегантну вагу.
  */
  stroke-width: 1.55;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;
}

.expertise-icon--lotus {
  width: 126px;
  height: 110px;
}

.expertise-icon--book {
  width: 120px;
  height: 108px;
}

/* =========================================================
   ICON DRAW
========================================================= */

.js .expertise-icon .draw {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

.expertise-fact.is-visible .expertise-icon .draw {
  animation: expertiseDraw 1.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(2) {
  animation-delay: 0.08s;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(3) {
  animation-delay: 0.15s;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(4) {
  animation-delay: 0.22s;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(5) {
  animation-delay: 0.29s;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(6) {
  animation-delay: 0.36s;
}

.expertise-fact.is-visible .expertise-icon .draw:nth-child(7) {
  animation-delay: 0.43s;
}

/* =========================================================
   FACT TEXT
========================================================= */

.expertise-fact__text {
  margin: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  color: var(--ink);

  font-family: var(--font-ui);

  font-size: clamp(14px, 1.15vw, 18px);

  font-weight: 400;

  line-height: 1.45;

  letter-spacing: -0.015em;
}

.expertise-fact__text.expertise-fact__text--services,
.expertise-fact__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 3px;
}

.expertise-fact__text--services b {
  color: var(--blue);

  font-weight: 400;
}

/* =========================================================
   HOVER — DESKTOP ONLY
========================================================= */

@media (hover: hover) {
  .expertise-fact__visual {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .expertise-fact:hover .expertise-fact__visual {
    transform: translateY(-7px);
  }

  .expertise-number,
  .expertise-icon {
    transition:
      color 0.45s ease,
      stroke 0.45s ease;
  }

  .expertise-fact:hover .expertise-number {
    color: var(--sky);
  }

  .expertise-fact:hover .expertise-icon {
    stroke: var(--sky);
  }
}

/* =========================================================
   WAVES
========================================================= */

.expertise-waves {
  position: absolute;

  z-index: 1;

  width: 100%;
  height: clamp(115px, 11vw, 175px);

  margin: clamp(25px, 3vw, 45px) 0 clamp(45px, 5vw, 75px);

  overflow: hidden;

  pointer-events: none;
}

.expertise-waves svg {
  position: absolute;

  top: 0;
  left: -4%;

  width: 108%;
  height: 100%;

  overflow: visible;

  animation: expertiseWaveFloat 15s ease-in-out infinite alternate;
}

.expertise-waves path {
  fill: none;

  stroke: var(--sky);

  stroke-width: 0.7;

  opacity: 0.24;

  vector-effect: non-scaling-stroke;
}

.expertise-waves path:nth-child(2) {
  opacity: 0.19;
}

.expertise-waves path:nth-child(3) {
  opacity: 0.15;
}

.expertise-waves path:nth-child(4) {
  opacity: 0.11;
}

/* =========================================================
   BOTTOM
========================================================= */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
}

.kicker {
  color: rgba(32, 50, 62, 0.7);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kicker i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}

.title {
  margin: 0;

  display: flex;
  flex-direction: column;

  color: var(--ink);

  font-family: var(--font-display);

  font-weight: 400;

  line-height: 0.88;
  text-align: center;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.04em;
}

.title span {
  font-size: clamp(64px, 6.3vw, 106px);
}

.title em {
  width: fit-content;

  margin-top: 0.05em;

  color: var(--blue);

  font-size: clamp(70px, 6.7vw, 114px);

  font-weight: 400;
  font-style: italic;
}

/* title animation */

.js [data-title-line] {
  opacity: 0;

  transform: translate3d(0, 35px, 0);

  clip-path: inset(0 100% 0 0);
}

[data-title-line].is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);

  clip-path: inset(0 0 0 0);

  transition:
    opacity 0.75s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   DESCRIPTION
========================================================= */
.description {
  max-width: 700px;
  margin: auto;
}
.description p {
  margin: 0;

  color: var(--ink);

  font-family: var(--font-ui);

  font-size: clamp(16px, 1.35vw, 21px);

  line-height: 1.62;

  letter-spacing: -0.02em;
}

/* =========================================================
   BUTTONS
========================================================= */

.hero-actions-center {
  justify-content: center;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .expertise__facts {
    grid-template-columns: repeat(5, 1fr);
  }

  .expertise-fact {
    min-height: 235px;

    padding: 10px 15px;
  }

  .expertise-fact__visual {
    height: 105px;
    width: max-content;
  }

  .expertise-icon {
    width: 94px;
    height: 94px;
  }

  .expertise-icon--lotus {
    width: 105px;
  }

  .expertise-fact__text {
    font-size: 13px;
  }

  .expertise__bottom {
    grid-template-columns:
      1fr
      0.8fr;

    column-gap: 55px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .section {
    padding: 60px 0;
  }

  /* -----------------------------------------
     STACKED FACTS
  ----------------------------------------- */

  .expertise__facts {
    display: block;
  }

  .expertise-fact {
    min-height: auto;

    padding: 22px 10px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;
  }

  .expertise-fact:not(:last-child)::after {
    top: auto;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
      90deg,
      transparent,
      rgba(32, 50, 62, 0.13) 10%,
      rgba(32, 50, 62, 0.13) 90%,
      transparent
    );

    transform: scaleX(0);

    transform-origin: center;
  }

  .expertise-fact.is-visible:not(:last-child)::after {
    transform: scaleX(1);
  }

  .expertise-number {
    font-size: clamp(62px, 18vw, 78px);
  }

  .expertise-number--four {
    font-size: clamp(72px, 20vw, 90px);
  }

  .expertise-icon {
    width: 72px;
    height: 72px;

    stroke-width: 1.7;
  }

  .expertise-icon--lotus {
    width: 82px;
    height: 73px;
  }

  .expertise-icon--book {
    width: 78px;
    height: 70px;
  }

  .expertise-fact__text {
    font-size: 15px;

    line-height: 1.42;
  }

  /* waves */

  .expertise-waves {
    height: 85px;

    margin: 20px 0 40px;
  }

  .expertise-waves svg {
    width: 150%;

    left: -25%;
  }

  .title span {
    font-size: clamp(48px, 14vw, 64px);
  }

  .title em {
    font-size: clamp(45px, 13vw, 65px);
  }

  .description {
  }

  .description p {
    max-width: 420px;

    font-size: 16px;

    line-height: 1.65;
  }
  .hero-actions-center {
    justify-content: space-between;
    flex-direction: column;
    display: flex;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .expertise-fact {
    padding: 20px 6px 22px;
  }
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes expertiseDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes expertiseWaveFloat {
  0% {
    transform: translate3d(-1.5%, 3px, 0) scaleY(0.97);
  }

  50% {
    transform: translate3d(0.6%, -3px, 0) scaleY(1.02);
  }

  100% {
    transform: translate3d(1.5%, 2px, 0) scaleY(0.98);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .expertise-fact,
  [data-title-line] {
    opacity: 1 !important;

    filter: none !important;

    transform: none !important;

    clip-path: none !important;
  }

  .expertise-icon .draw {
    stroke-dashoffset: 0 !important;

    animation: none !important;
  }

  .expertise-waves svg {
    animation: none !important;
  }
}

/* =========================================================
   ABOUT
========================================================= */

.about {
  position: relative;

  min-height: 100svh;

  display: grid;

  grid-template-columns:
    minmax(440px, 0.98fr)
    minmax(0, 1.02fr);

  align-items: center;

  overflow: hidden;

  background: var(--cream);

  isolation: isolate;
  padding-right: 60px;
}

/* =========================================================
   IMAGE
========================================================= */

.about-media {
  position: absolute;

  inset: 0 52% 0 0;

  z-index: -1;

  overflow: hidden;
}

.about-media__image {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: 52% 38%;

  transform: scale(1.04);

  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* soft transition image -> cream */

.about-media__veil {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      270deg,
      var(--cream) 0%,
      rgba(242, 234, 219, 0.96) 5%,
      rgba(242, 234, 219, 0.67) 15%,
      rgba(242, 234, 219, 0.14) 30%,
      transparent 46%
    ),
    linear-gradient(0deg, rgba(32, 50, 62, 0.09), transparent 42%);
}

/* =========================================================
   CONTENT
========================================================= */

.about-copy {
  position: relative;

  z-index: 3;

  grid-column: 2;

  width: min(760px, calc(100% - 80px));

  margin-left: clamp(40px, 5vw, 90px);

  padding: clamp(100px, 9vw, 150px) 0 clamp(105px, 9vw, 150px);
}

/* =========================================================
   KICKER
========================================================= */

.about-kicker {
  margin-bottom: clamp(30px, 3vw, 46px);
}

/* =========================================================
   TITLE
========================================================= */

.about-title {
  margin: 0;

  font-weight: 500;

  line-height: 0.79;

  letter-spacing: -0.045em;
}

.about-title__first {
  display: block;

  color: var(--ink);

  font-family: var(--font-display);

  font-size: clamp(66px, 6.8vw, 118px);
}

.about-title__last {
  display: block;

  width: fit-content;

  margin: 0.11em 0 0 0.24em;

  color: var(--blue);

  font-family: var(--font-display);

  font-size: clamp(72px, 7.2vw, 126px);

  font-weight: 500;

  font-style: italic;

  letter-spacing: -0.06em;

  transform: rotate(-2deg);

  transform-origin: left center;
}

/* preserve rotation after reveal */

.about-title__last.reveal {
  transform: translateY(24px) rotate(-2deg);
}

.about-title__last.reveal.is-visible {
  transform: translateY(0) rotate(-2deg);
}

/* =========================================================
   ROLE
========================================================= */

.about-role {
  margin: clamp(35px, 4vw, 55px) 0 0;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 9px;

  color: rgba(32, 50, 62, 0.62);

  font-family: var(--font-ui);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}

.about-role i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--blue);
}

/* =========================================================
   TEXT
========================================================= */

.about-text {
  width: min(650px, 100%);

  margin-top: clamp(30px, 3.3vw, 48px);
}

.about-text p {
  margin: 0;

  color: var(--ink);

  font-family: var(--font-ui);

  font-size: clamp(15px, 1.15vw, 18px);

  line-height: 1.72;

  letter-spacing: -0.012em;
}

.about-text strong {
  color: var(--blue);

  font-weight: 500;
}

/* very thin separators */

.about-divider {
  width: 100%;
  height: 1px;

  margin: clamp(22px, 2vw, 30px) 0;

  background: linear-gradient(
    90deg,
    rgba(32, 50, 62, 0.14),
    rgba(32, 50, 62, 0.04) 75%,
    transparent
  );

  transform-origin: left;
}

.about-divider.reveal {
  opacity: 0;

  transform: scaleX(0);
}

.about-divider.reveal.is-visible {
  opacity: 1;

  transform: scaleX(1);

  transition:
    opacity 0.5s ease,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   QUOTE
========================================================= */

.about-quote {
  position: relative;

  width: min(660px, 100%);

  margin: clamp(40px, 4vw, 58px) 0 0;

  padding: 23px 34px 24px 74px;

  border: 1px solid rgba(106, 147, 168, 0.22);

  background: rgba(255, 253, 248, 0.18);
}

.about-quote__mark {
  position: absolute;

  top: 15px;
  left: 25px;

  color: var(--sky);

  font-family: var(--font-display);

  font-size: 58px;

  font-style: italic;

  line-height: 1;
}

.about-quote p {
  margin: 0;

  color: rgba(32, 50, 62, 0.72);

  font-family: var(--font-display);

  font-size: clamp(20px, 1.7vw, 28px);

  line-height: 1.3;
}

.about-quote em {
  display: block;

  margin-top: 2px;

  color: var(--blue);

  font-style: italic;
}

/* =========================================================
   WAVES
========================================================= */

.about-lines {
  position: absolute;

  z-index: 0;

  left: 0;
  right: 0;

  bottom: -15px;

  height: 170px;

  overflow: hidden;

  pointer-events: none;

  opacity: 0.2;
}

.about-lines svg {
  width: 108%;
  height: 100%;

  margin-left: -4%;

  animation: aboutWave 18s ease-in-out infinite alternate;
}

.about-lines path {
  fill: none;

  stroke: var(--sky);

  stroke-width: 0.75;

  vector-effect: non-scaling-stroke;
}

.about-lines path:nth-child(2) {
  opacity: 0.65;
}

.about-lines path:nth-child(3) {
  opacity: 0.38;
}

/* =========================================================
   DESKTOP HOVER / SUBTLE DEPTH
========================================================= */

@media (hover: hover) {
  .about:hover .about-media__image {
    transform: scale(1.065);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {
  .about {
    grid-template-columns:
      minmax(340px, 0.92fr)
      minmax(0, 1.08fr);
  }

  .about-media {
    inset: 0 55% 0 0;
  }

  .about-copy {
    width: calc(100% - 50px);

    margin-left: 35px;

    padding: 100px 0;
  }

  .about-title__first {
    font-size: clamp(60px, 7vw, 88px);
  }

  .about-title__last {
    font-size: clamp(66px, 7.5vw, 96px);
  }

  .about-text p {
    font-size: 15px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {
  .about {
    display: block;

    min-height: auto;

    padding-bottom: 60px;
  }

  /* PHOTO LIKE MOBILE HERO */

  .about-media {
    position: relative;

    inset: auto;

    width: 100%;

    height: min(64svh, 650px);

    min-height: 480px;

    z-index: 0;
  }

  .about-media__image {
    object-position: 50% 23%;

    transform: scale(1.02);
  }

  .about-media__veil {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(242, 234, 219, 0.02) 46%,
      rgba(242, 234, 219, 0.28) 65%,
      rgba(242, 234, 219, 0.76) 80%,
      var(--cream) 97%
    );
  }

  .about-media__index,
  .about-media__caption {
    display: none;
  }

  /* TEXT OVER BOTTOM OF IMAGE */

  .about-copy {
    width: auto;

    margin: clamp(-155px, -18svh, -105px) 0 0;

    padding: 0 22px 20px;
  }

  .about-kicker {
    margin-bottom: 18px;

    font-size: 9px;
  }

  .about-title {
    line-height: 0.86;
  }

  .about-title__first {
    font-size: clamp(53px, 15vw, 82px);

    text-shadow: 0 2px 20px rgba(242, 234, 219, 0.78);
  }

  .about-title__last {
    margin-left: 0.12em;

    font-size: clamp(61px, 17vw, 92px);

    text-shadow: 0 2px 20px rgba(242, 234, 219, 0.6);
  }

  .about-role {
    margin-top: 25px;

    font-size: 9px;

    gap: 7px;
  }

  .about-text {
    margin-top: 30px;
  }

  .about-text p {
    font-size: 15px;

    line-height: 1.7;
  }

  .about-divider {
    margin: 22px 0;
  }

  .about-quote {
    margin-top: 34px;

    padding: 21px 20px 22px 54px;
  }

  .about-quote__mark {
    left: 15px;

    font-size: 44px;
  }

  .about-quote p {
    font-size: clamp(19px, 5vw, 24px);
  }

  .about-lines {
    height: 100px;

    opacity: 0.14;
  }
}

/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {
  .about-media {
    height: 58svh;

    min-height: 430px;
  }

  .about-copy {
    margin-top: -75px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .about-title__first {
    font-size: clamp(48px, 14.5vw, 67px);
  }

  .about-title__last {
    font-size: clamp(56px, 17vw, 78px);
  }

  .about-role {
    line-height: 1.7;
  }

  .about-quote {
    padding-right: 15px;
  }
}

/* =========================================================
   WAVE ANIMATION
========================================================= */

@keyframes aboutWave {
  from {
    transform: translate3d(-1.4%, 2px, 0) scaleY(0.98);
  }

  to {
    transform: translate3d(1.3%, -3px, 0) scaleY(1.025);
  }
}

@media (max-width: 1180px) {
  .about {
    padding-right: 0;
  }
}

.about .socials {
  margin-top: 30px;
}

/* =========================================================
   IMPACT SECTION
========================================================= */

.impact-section {
  position: relative;

  min-height: 100svh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: clamp(120px, 10vw, 180px) 0;

  color: var(--white);

  isolation: isolate;
}

/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.impact-media {
  position: absolute;

  inset: 0;

  z-index: -2;

  overflow: hidden;
}

.impact-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 42%;

  transform: scale(1.045);

  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.impact-media__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(20, 34, 43, 0.84) 0%,
      rgba(20, 34, 43, 0.74) 38%,
      rgba(20, 34, 43, 0.56) 65%,
      rgba(20, 34, 43, 0.68) 100%
    ),
    linear-gradient(180deg, rgba(14, 26, 33, 0.2), rgba(14, 26, 33, 0.55));
}

/* =========================================================
   CONTAINER
========================================================= */

.impact-container {
  width: min(calc(100% - 120px), 1480px);

  margin-inline: auto;
}

/* =========================================================
   KICKER
========================================================= */

.impact-kicker {
  margin-bottom: clamp(55px, 6vw, 90px);

  color: rgba(255, 255, 255, 0.68);

  text-shadow: none;
}

.impact-kicker i {
  background: var(--sky);
}

/* =========================================================
   LAYOUT
========================================================= */

.impact-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(420px, 1.05fr);

  gap: clamp(80px, 10vw, 170px);

  align-items: start;
}

/* =========================================================
   TITLE
========================================================= */

.impact-title {
  margin: 0;

  display: flex;
  flex-direction: column;

  font-family: var(--font-display);

  font-weight: 500;

  line-height: 0.88;

  letter-spacing: -0.045em;
}

.impact-title__line {
  display: block;

  font-size: clamp(62px, 6.4vw, 110px);
}

.impact-title em {
  width: fit-content;

  margin: 0.03em 0 0.05em 0.18em;

  color: var(--sky);

  font-size: clamp(70px, 7vw, 120px);

  font-weight: 500;

  font-style: italic;
}

/* =========================================================
   CONTENT
========================================================= */

.impact-content {
  width: min(680px, 100%);
}

.impact-text {
  margin: 0;

  color: rgba(255, 255, 255, 0.88);

  font-family: var(--font-ui);

  font-size: clamp(15px, 1.15vw, 18px);

  line-height: 1.78;

  letter-spacing: -0.01em;
}

.impact-text strong {
  color: var(--sky);

  font-weight: 500;
}

/* =========================================================
   DIVIDERS
========================================================= */

.impact-rule {
  width: 100%;
  height: 1px;

  margin: clamp(24px, 2.4vw, 34px) 0;

  background: linear-gradient(
    90deg,
    rgba(176, 200, 214, 0.5),
    rgba(176, 200, 214, 0.08) 75%,
    transparent
  );
}

.impact-rule.reveal {
  opacity: 0;

  transform: scaleX(0);

  transform-origin: left;
}

.impact-rule.reveal.is-visible {
  opacity: 1;

  transform: scaleX(1);

  transition:
    opacity 0.5s ease,
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   BOOK ACCENT
========================================================= */

.impact-book {
  margin-top: clamp(42px, 4.5vw, 68px);

  padding-top: clamp(28px, 3vw, 42px);

  border-top: 1px solid rgba(176, 200, 214, 0.38);
}

.impact-book__label {
  display: block;

  margin-bottom: 14px;

  color: rgba(255, 255, 255, 0.55);

  font-family: var(--font-ui);

  font-size: 9px;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.impact-book p {
  margin: 0;

  max-width: 560px;

  font-family: var(--font-display);

  font-size: clamp(30px, 3.2vw, 54px);

  line-height: 1.08;
}

.impact-book em {
  display: block;

  color: var(--sky);

  font-style: italic;
}

/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {
  .impact-section:hover .impact-media img {
    transform: scale(1.065);
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .impact-container {
    width: min(calc(100% - 64px), 980px);
  }

  .impact-layout {
    grid-template-columns:
      0.9fr
      1.1fr;

    gap: 60px;
  }

  .impact-title__line {
    font-size: clamp(54px, 6.6vw, 80px);
  }

  .impact-title em {
    font-size: clamp(60px, 7vw, 90px);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {
  .impact-section {
    min-height: auto;

    padding: 80px 0 80px;
  }

  .impact-container {
    width: calc(100% - 36px);
  }

  .impact-media__overlay {
    background: linear-gradient(
      180deg,
      rgba(20, 34, 43, 0.72) 0%,
      rgba(20, 34, 43, 0.82) 55%,
      rgba(20, 34, 43, 0.9) 100%
    );
  }

  .impact-kicker {
    margin-bottom: 38px;

    font-size: 9px;
  }

  .impact-layout {
    display: block;
  }

  .impact-title {
    margin-bottom: 48px;
  }

  .impact-title__line {
    font-size: clamp(46px, 13vw, 64px);
  }

  .impact-title em {
    margin-left: 0.06em;

    font-size: clamp(55px, 15.5vw, 76px);
  }

  .impact-content {
    width: 100%;
  }

  .impact-text {
    font-size: 15px;

    line-height: 1.72;
  }

  .impact-rule {
    margin: 23px 0;
  }

  .impact-book {
    margin-top: 40px;
  }

  .impact-book p {
    font-size: clamp(29px, 8vw, 40px);
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .impact-container {
    width: calc(100% - 28px);
  }

  .impact-section {
    padding: 80px 0 72px;
  }

  .impact-title {
    margin-bottom: 40px;
  }
}

/* =========================================================
   CONSULTATIONS
========================================================= */

.consultations {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 11vw, 190px) 0 clamp(90px, 10vw, 170px);
  background: var(--cream);
}

.consultations__container {
  width: min(1540px, calc(100% - 120px));
  margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.consultations__header {
  max-width: 900px;
  margin: 0 auto clamp(70px, 8vw, 125px);
  text-align: center;
}

.consultations__header .kicker {
  justify-content: center;
}

.consultations__header .title {
  margin-left: auto;
  margin-right: auto;
}

.consultations__header .description {
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   GRID
========================================================= */

.consultations__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}

/* =========================================================
   CARD
========================================================= */

.consultation-card {
  position: relative;
  min-height: 720px;

  display: flex;
  flex-direction: column;

  padding: clamp(32px, 3.4vw, 58px);

  background: linear-gradient(
    145deg,
    rgba(255, 253, 248, 0.88),
    rgba(255, 253, 248, 0.36)
  );

  border: 1px solid rgba(32, 50, 62, 0.13);

  overflow: hidden;

  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    box-shadow 0.7s ease;
}

/* very subtle background glow */

.consultation-card::before {
  content: "";

  position: absolute;
  width: 420px;
  height: 420px;

  right: -240px;
  top: -230px;

  border-radius: 50%;

  background: var(--sky);

  opacity: 0.12;
  filter: blur(1px);

  transform: scale(0.7);

  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;

  pointer-events: none;
}

/* animated top line */

.consultation-card::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;

  background: var(--blue);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .consultation-card:hover {
    transform: translateY(-9px);

    border-color: rgba(106, 147, 168, 0.42);

    box-shadow: 0 30px 80px rgba(32, 50, 62, 0.08);
  }

  .consultation-card:hover::before {
    transform: scale(1);
    opacity: 0.18;
  }

  .consultation-card:hover::after {
    transform: scaleX(1);
  }
}

/* =========================================================
   CARD TOP
========================================================= */

.consultation-card__top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: clamp(55px, 6vw, 95px);
}

.consultation-card__number {
  color: var(--blue);

  font-family: var(--font-display);
  font-size: clamp(55px, 5vw, 84px);
  font-style: italic;
  font-weight: 500;

  line-height: 0.8;

  letter-spacing: -0.05em;
}

.consultation-card__type {
  padding-top: 5px;

  color: rgba(32, 50, 62, 0.55);

  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

/* =========================================================
   TITLE
========================================================= */

.consultation-card__content {
  position: relative;
  z-index: 2;
}

.consultation-card__title {
  max-width: 620px;

  margin: 0;

  color: var(--ink);

  font-family: var(--font-display);
  font-size: clamp(44px, 4.3vw, 72px);
  font-weight: 500;

  line-height: 0.94;

  letter-spacing: -0.045em;
}

.consultation-card__title em {
  display: block;

  color: var(--blue);

  font-weight: 500;
  font-style: italic;

  line-height: 0.95;
}

/* =========================================================
   META
========================================================= */

.consultation-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 30px;

  color: rgba(32, 50, 62, 0.58);

  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

.consultation-card__meta i {
  width: 3px;
  height: 3px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--blue);
}

/* =========================================================
   PRICES
========================================================= */

.consultation-card__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin-top: clamp(38px, 4vw, 55px);

  border-top: 1px solid rgba(32, 50, 62, 0.14);
  border-bottom: 1px solid rgba(32, 50, 62, 0.14);
}

.consultation-price {
  min-height: 145px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding: 22px 25px 22px 0;
}

.consultation-price + .consultation-price {
  padding-left: 28px;

  border-left: 1px solid rgba(32, 50, 62, 0.14);
}

.consultation-price__label {
  max-width: 230px;

  color: rgba(32, 50, 62, 0.6);

  font-family: var(--font-ui);
  font-size: 11px;

  line-height: 1.45;
}

.consultation-price strong {
  display: block;

  margin-top: 20px;

  color: var(--blue);

  font-family: var(--font-display);
  font-size: clamp(40px, 3.5vw, 58px);
  font-style: italic;
  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.04em;
}

.consultation-price strong small {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;

  letter-spacing: 0;
}

.consultation-price--single {
  grid-column: 1 / -1;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.consultation-card__text {
  max-width: 620px;

  margin: 34px 0 0;

  color: rgba(32, 50, 62, 0.78);

  font-size: 15px;
  line-height: 1.75;
}

/* =========================================================
   BUTTON
========================================================= */

.consultation-card__footer {
  position: relative;
  z-index: 2;

  margin-top: auto;
  padding-top: 42px;
}

.consultation-card__button {
  width: 100%;
  min-height: 64px;
}

/* =========================================================
   SECOND CARD
========================================================= */

.consultation-card--accent {
  background: linear-gradient(
    145deg,
    rgba(176, 200, 214, 0.18),
    rgba(255, 253, 248, 0.48) 50%,
    rgba(255, 253, 248, 0.55)
  );
}

/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.consultations__note {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
  align-items: center;

  gap: clamp(25px, 4vw, 65px);

  margin-top: clamp(65px, 8vw, 120px);
}

.consultations__note-line {
  display: block;

  width: 100%;
  height: 1px;

  background: rgba(32, 50, 62, 0.15);
}

.consultations__note p {
  max-width: 750px;

  margin: 0;

  text-align: center;

  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 32px);

  line-height: 1.25;
}

.consultations__note em {
  color: var(--blue);
  font-style: italic;
}

/* =========================================================
   REVEAL — CARDS
========================================================= */

.consultation-card.reveal {
  opacity: 0;

  transform: translateY(60px) scale(0.985);
}

.consultation-card.reveal.is-visible {
  opacity: 1;

  transform: translateY(0) scale(1);

  transition:
    opacity 1s ease,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    box-shadow 0.7s ease;
}

/* second card slightly delayed */

.consultation-card:nth-child(2).reveal.is-visible {
  transition-delay: 0.14s;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .consultations {
    padding-top: 120px;
  }

  .consultations__container {
    width: min(100% - 60px, 1100px);
  }

  .consultations__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .consultation-card {
    min-height: auto;
  }

  .consultation-card__top {
    margin-bottom: 60px;
  }

  .consultation-card__title {
    max-width: 700px;
  }

  .consultation-card__text {
    max-width: 760px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .consultations {
    padding: 90px 0 80px;
  }

  .consultations__container {
    width: calc(100% - 30px);
  }

  .consultations__header {
    margin-bottom: 55px;
    text-align: left;
  }

  .consultations__header .kicker {
    justify-content: flex-start;
  }

  .consultations__header .description {
    margin-left: 0;
  }
  .description {
    text-align: center;
  }
  .consultations__grid {
    gap: 14px;
  }

  .consultation-card {
    padding: 28px 22px 24px;

    min-height: auto;
  }

  .consultation-card::before {
    width: 270px;
    height: 270px;

    right: -160px;
    top: -160px;
  }

  .consultation-card__top {
    margin-bottom: 48px;
  }

  .consultation-card__number {
    font-size: 56px;
  }

  .consultation-card__type {
    font-size: 9px;
  }

  .consultation-card__title {
    font-size: clamp(39px, 12vw, 58px);

    line-height: 0.96;
  }

  .consultation-card__meta {
    margin-top: 24px;

    font-size: 9px;
  }

  .consultation-card__prices {
    grid-template-columns: 1fr;

    margin-top: 34px;
  }

  .consultation-price {
    min-height: auto;

    padding: 20px 0 22px;
  }

  .consultation-price + .consultation-price {
    padding: 22px 0;

    border-left: 0;

    border-top: 1px solid rgba(32, 50, 62, 0.14);
  }

  .consultation-price__label {
    max-width: 260px;

    font-size: 10px;
  }

  .consultation-price strong {
    margin-top: 16px;

    font-size: 46px;
  }

  .consultation-card__text {
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.7;
  }

  .consultation-card__footer {
    padding-top: 32px;
  }

  .consultation-card__button {
    min-height: 60px;
  }

  .consultations__note {
    grid-template-columns: 1fr;

    gap: 25px;

    margin-top: 60px;
  }

  .consultations__note p {
    padding: 0 8px;

    font-size: 23px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .consultations__container {
    width: calc(100% - 24px);
  }

  .consultation-card {
    padding: 25px 18px 18px;
  }

  .consultation-card__title {
    font-size: 40px;
  }

  .consultation-card__number {
    font-size: 49px;
  }

  .consultation-card__text {
    font-size: 13px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

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

/* =========================================================
   WORK WITH
========================================================= */

.work-with {
  position: relative;

  min-height: 100svh;

  padding: clamp(120px, 9vw, 155px) 60px clamp(95px, 8vw, 135px);

  display: grid;

  grid-template-columns:
    minmax(0, 0.98fr)
    minmax(420px, 1.02fr);

  align-items: center;

  overflow: hidden;

  background: var(--cream);

  isolation: isolate;
}

/* =========================================================
   IMAGE
========================================================= */

.work-with__media {
  position: absolute;

  inset: 0 0 0 44%;

  z-index: -2;

  overflow: hidden;
}

.work-with__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: 55% 42%;

  transform: scale(1.04);

  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* same soft transition as hero */

.work-with__veil {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--cream) 0%,
      rgba(242, 234, 219, 0.96) 9%,
      rgba(242, 234, 219, 0.7) 18%,
      rgba(242, 234, 219, 0.25) 28%,
      transparent 39%
    ),
    linear-gradient(0deg, rgba(32, 50, 62, 0.17), transparent 48%);
}

/* =========================================================
   COPY
========================================================= */

.work-with__copy {
  position: relative;

  z-index: 4;

  width: min(760px, 112%);

  padding-top: 12px;
}

.work-with__kicker {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

/* =========================================================
   TITLE
========================================================= */

.work-with__title {
  margin: 0;

  font-weight: 500;

  line-height: 0.78;

  letter-spacing: -0.055em;
}

.work-with__title-first {
  display: block;

  color: var(--ink);

  font-family: var(--font-display);

  font-size: clamp(72px, 7.5vw, 136px);
}

.work-with__title-last {
  display: block;

  width: fit-content;

  margin: 0.12em 0 0 0.34em;

  color: var(--blue);

  font-family: var(--font-display);

  font-size: clamp(76px, 8.1vw, 148px);

  font-weight: 500;

  font-style: italic;

  letter-spacing: -0.065em;

  transform-origin: left center;
}

/* =========================================================
   TOPICS
========================================================= */

.work-with__topics {
  width: min(650px, 100%);

  margin-top: clamp(46px, 5vw, 72px);

  border-top: 1px solid rgba(32, 50, 62, 0.15);
}

.work-topic {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 49px;

  border-bottom: 1px solid rgba(32, 50, 62, 0.13);

  overflow: hidden;
}

.work-topic.is-visible {
  opacity: 1;

  transform: translate3d(0, 0, 0);

  filter: blur(0);

  transition:
    opacity 0.75s ease,
    filter 0.8s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-topic::before {
  content: "";

  width: 0;

  height: 1px;

  margin-right: 0;

  flex: 0 0 auto;

  background: var(--blue);

  transition:
    width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    margin-right 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-topic span {
  color: var(--ink);

  font-family: var(--font-body);

  font-size: clamp(15px, 1.3vw, 20px);

  font-weight: 400;

  line-height: 1.25;

  letter-spacing: -0.02em;

  transition:
    color 0.4s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* selected terms use the hero italic language */

.work-topic--accent span {
  color: var(--blue);

  font-family: var(--font-display);

  font-size: clamp(19px, 1.7vw, 27px);

  font-style: italic;
}

/* =========================================================
   TOPIC HOVER
========================================================= */

@media (hover: hover) {
  .work-topic:hover::before {
    width: 32px;

    margin-right: 14px;
  }

  .work-topic:hover span {
    color: var(--blue);

    transform: translateX(4px);
  }

  .work-with:hover .work-with__media img {
    transform: scale(1.065);
  }
}

/* =========================================================
   BOTTOM
========================================================= */

.work-with__bottom {
  width: min(650px, 100%);

  margin-top: clamp(38px, 4vw, 55px);

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 35px;
}

.work-with__bottom p {
  max-width: 350px;

  margin: 0;

  color: rgba(32, 50, 62, 0.72);

  font-family: var(--font-body);

  font-size: 13px;

  line-height: 1.65;
}

.work-with__bottom p em {
  color: var(--blue);

  font-family: var(--font-display);

  font-size: 1.35em;

  font-style: italic;
}

.work-with__bottom .btn {
  flex: 0 0 auto;

  min-width: 260px;
}

/* =========================================================
   IMAGE ASIDE
========================================================= */

.work-with__aside {
  position: absolute;

  z-index: 4;

  right: clamp(28px, 4vw, 70px);

  bottom: clamp(70px, 9vh, 120px);

  color: var(--white);
}

.work-with__aside-number {
  display: block;

  margin-bottom: 12px;

  color: var(--sky);

  font-family: var(--font-display);

  font-size: clamp(68px, 6vw, 105px);

  line-height: 0.8;

  font-style: italic;
}

.work-with__aside p {
  margin: 0;

  font-family: var(--font-ui);

  font-size: clamp(11px, 0.95vw, 15px);

  line-height: 1.65;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1180px) {
  .work-with {
    padding-left: 44px;
    padding-right: 44px;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 0.9fr);
  }

  .work-with__media {
    inset-left: 47%;
  }

  .work-with__title-first {
    font-size: clamp(64px, 8vw, 102px);
  }

  .work-with__title-last {
    font-size: clamp(68px, 8.6vw, 112px);
  }

  .work-with__aside {
    display: none;
  }

  .work-with__bottom {
    display: block;
  }

  .work-with__bottom .btn {
    margin-top: 28px;
  }
}

/* =========================================================
   MOBILE — SAME LOGIC AS HERO
========================================================= */

@media (max-width: 820px) {
  .work-with {
    min-height: auto;

    display: block;

    padding: 0;

    background: var(--cream);
  }

  /* image at top */

  .work-with__media {
    position: relative;

    inset: auto;

    width: 100%;

    height: min(66svh, 650px);

    min-height: 500px;

    z-index: 0;
  }

  .work-with__media img {
    object-position: 55% 25%;

    transform: scale(1.02);
  }

  /* image fades into cream */

  .work-with__veil {
    background:
      linear-gradient(
        180deg,
        rgba(242, 234, 219, 0.01) 0%,
        rgba(242, 234, 219, 0.02) 48%,
        rgba(242, 234, 219, 0.38) 68%,
        rgba(242, 234, 219, 0.82) 82%,
        var(--cream) 97%
      ),
      linear-gradient(90deg, rgba(32, 50, 62, 0.05), transparent 60%);
  }

  /* copy overlaps photo bottom */

  .work-with__copy {
    position: relative;

    z-index: 4;

    width: auto;

    margin-top: clamp(-190px, -22svh, -125px);

    padding: 0 24px 68px;
  }

  .work-with__kicker {
    margin-bottom: 17px;

    color: rgba(32, 50, 62, 0.94);

    font-size: 9px;

    text-shadow: 0 1px 18px rgba(242, 234, 219, 0.9);
  }

  .work-with__title {
    line-height: 0.84;
  }

  .work-with__title-first {
    font-size: clamp(53px, 15vw, 80px);

    text-shadow: 0 2px 24px rgba(242, 234, 219, 0.68);
  }

  .work-with__title-last {
    margin-left: 0.17em;

    font-size: clamp(59px, 17vw, 91px);
  }

  .work-with__topics {
    margin-top: 42px;
  }

  .work-topic {
    min-height: 52px;
  }

  .work-topic span {
    font-size: 15px;
  }

  .work-topic--accent span {
    font-size: 21px;
  }

  .work-with__bottom {
    display: block;

    margin-top: 36px;
  }

  .work-with__bottom p {
    max-width: 100%;

    font-size: 13px;
  }

  .work-with__bottom .btn {
    width: 100%;

    margin-top: 27px;

    min-width: 0;
  }

  .work-with__aside {
    display: none;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .work-with__media {
    height: 59svh;

    min-height: 440px;
  }

  .work-with__copy {
    margin-top: -80px;

    padding-left: 18px;
    padding-right: 18px;
  }

  .work-with__title-first {
    font-size: clamp(48px, 14.5vw, 66px);
  }

  .work-with__title-last {
    font-size: clamp(55px, 16.5vw, 76px);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .work-topic {
    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
  }

  .work-with__media img {
    transition: none !important;
  }
}

/* =========================================================
   CONTACTS
========================================================= */

.contacts-section {
  position: relative;

  min-height: 92svh;

  display: flex;
  align-items: center;

  overflow: hidden;

  padding: clamp(110px, 10vw, 170px) 0 clamp(60px, 6vw, 90px);

  color: var(--white);

  isolation: isolate;
}

/* =========================================================
   BACKGROUND
========================================================= */

.contacts-media {
  inset: 0;
}

/*
  Darker than impact section because
  contacts must remain extremely readable.
*/

.contacts-media__overlay {
  background:
    linear-gradient(
      90deg,
      rgba(18, 31, 39, 0.94) 0%,
      rgba(18, 31, 39, 0.87) 40%,
      rgba(18, 31, 39, 0.64) 72%,
      rgba(18, 31, 39, 0.74) 100%
    ),
    linear-gradient(180deg, rgba(18, 31, 39, 0.32), rgba(18, 31, 39, 0.72));
}

/* =========================================================
   CONTAINER
========================================================= */

.contacts-container {
  position: relative;

  z-index: 3;

  width: min(calc(100% - 120px), 1480px);

  margin-inline: auto;
}

/* =========================================================
   KICKER
========================================================= */

.contacts-kicker {
  margin-bottom: clamp(55px, 6vw, 90px);

  color: rgba(255, 255, 255, 0.64);
}

.contacts-kicker i {
  background: var(--sky);
}

/* =========================================================
   LAYOUT
========================================================= */

.contacts-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(300px, 0.55fr);

  align-items: end;

  gap: clamp(80px, 10vw, 180px);
}

/* =========================================================
   TITLE
========================================================= */

.contacts-title {
  margin: 0;

  display: flex;
  flex-direction: column;

  font-family: var(--font-display);

  font-weight: 500;

  line-height: 0.78;

  letter-spacing: -0.055em;
}

.contacts-title__first {
  display: block;

  color: var(--white);

  font-size: clamp(80px, 9vw, 155px);
}

.contacts-title__accent {
  display: block;

  width: fit-content;

  margin: 0.12em 0 0 0.28em;

  color: var(--sky);

  font-size: clamp(88px, 9.6vw, 168px);

  font-weight: 500;

  font-style: italic;

  letter-spacing: -0.065em;

  transform: rotate(-2.5deg);

  transform-origin: left center;
}

/* =========================================================
   LEAD
========================================================= */

.contacts-lead {
  max-width: 570px;

  margin: clamp(45px, 5vw, 65px) 0 0;

  color: rgba(255, 255, 255, 0.82);

  font-family: var(--font-body);

  font-size: clamp(17px, 1.45vw, 23px);

  line-height: 1.45;

  letter-spacing: -0.02em;
}

.contacts-lead em {
  display: block;

  margin-top: 2px;

  color: var(--sky);

  font-family: var(--font-display);

  font-size: 1.8em;

  font-style: italic;

  line-height: 1.15;
}

/* =========================================================
   ACTIONS
========================================================= */

.contacts-actions {
  width: min(720px, 100%);

  margin-top: clamp(40px, 4vw, 58px);

  display: grid;

  grid-template-columns:
    1.2fr
    0.8fr;

  gap: 12px;
}

/* =========================================================
   CONTACT BUTTON
========================================================= */

.contacts-btn {
  position: relative;

  min-height: 78px;

  padding: 0 22px 0 27px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  overflow: hidden;

  font-family: var(--font-ui);

  font-size: 13px;

  transition:
    color 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-btn > span:first-child {
  display: flex;

  flex-direction: column;

  gap: 5px;
}

.contacts-btn small {
  color: currentColor;

  font-family: var(--font-ui);

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.17em;

  text-transform: uppercase;

  opacity: 0.55;
}

/* PRIMARY */

.contacts-btn--main {
  color: var(--ink);

  background: var(--sky);

  border: 1px solid var(--sky);
}

/* SECONDARY */

.contacts-btn--ghost {
  color: var(--white);

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(255, 255, 255, 0.28);

  backdrop-filter: blur(4px);
}

/* =========================================================
   LARGE ARROW
========================================================= */

.contacts-arrow {
  position: relative;

  flex: 0 0 auto;

  width: 46px;
  height: 24px;
}

.contacts-arrow i {
  position: absolute;

  top: 50%;
  right: 0;

  width: 40px;
  height: 1px;

  background: currentColor;

  transform: translateY(-50%);

  transition:
    width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.contacts-arrow i::before,
.contacts-arrow i::after {
  content: "";

  position: absolute;

  right: 0;

  width: 13px;
  height: 1px;

  background: currentColor;

  transform-origin: right center;
}

.contacts-arrow i::before {
  transform: rotate(38deg);
}

.contacts-arrow i::after {
  transform: rotate(-38deg);
}

/* =========================================================
   BUTTON HOVER
========================================================= */

@media (hover: hover) {
  .contacts-btn:hover {
    transform: translateY(-4px);
  }

  .contacts-btn:hover .contacts-arrow i {
    width: 46px;

    transform: translate(5px, -50%);
  }

  .contacts-btn--main:hover {
    color: var(--white);

    background: var(--blue);

    border-color: var(--blue);
  }

  .contacts-btn--ghost:hover {
    color: var(--ink);

    background: var(--white);

    border-color: var(--white);
  }
}

/* =========================================================
   ASIDE
========================================================= */

.contacts-aside {
  display: grid;

  grid-template-columns:
    1px
    1fr;

  gap: 30px;

  align-items: center;

  padding-bottom: 8px;
}

.contacts-aside__line {
  width: 1px;
  height: 0;

  background: rgba(176, 200, 214, 0.5);
}

.contacts-aside.is-visible .contacts-aside__line {
  height: 180px;

  transition: height 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.contacts-aside__label {
  display: block;

  margin-bottom: 18px;

  color: var(--sky);

  font-family: var(--font-ui);

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.contacts-aside p {
  max-width: 310px;

  margin: 0;

  color: rgba(255, 255, 255, 0.84);

  font-family: var(--font-body);

  font-size: clamp(15px, 1.15vw, 18px);

  line-height: 1.7;
}

/* =========================================================
   META
========================================================= */

.contacts-meta {
  margin-top: 25px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  color: rgba(255, 255, 255, 0.54);

  font-family: var(--font-ui);

  font-size: 8px;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.contacts-meta i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--sky);
}

/* =========================================================
   BOTTOM QUOTE
========================================================= */

.contacts-bottom {
  margin-top: clamp(80px, 9vw, 135px);

  display: grid;

  grid-template-columns:
    minmax(40px, 1fr)
    auto
    minmax(40px, 1fr);

  align-items: center;

  gap: clamp(25px, 4vw, 65px);
}

.contacts-bottom__line {
  display: block;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(176, 200, 214, 0.32));
}

.contacts-bottom__line:last-child {
  background: linear-gradient(90deg, rgba(176, 200, 214, 0.32), transparent);
}

.contacts-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.58);

  font-family: var(--font-display);

  font-size: clamp(19px, 1.8vw, 28px);

  text-align: center;

  white-space: nowrap;
}

.contacts-bottom p em {
  color: var(--sky);

  font-style: italic;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .contacts-container {
    width: min(calc(100% - 64px), 1000px);
  }

  .contacts-layout {
    grid-template-columns:
      minmax(0, 1fr)
      280px;

    gap: 60px;
  }

  .contacts-title__first {
    font-size: clamp(75px, 9vw, 110px);
  }

  .contacts-title__accent {
    font-size: clamp(82px, 10vw, 122px);
  }

  .contacts-actions {
    grid-template-columns: 1fr;
  }

  .contacts-btn {
    max-width: 520px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 820px) {
  .contacts-section {
    min-height: auto;

    padding: 90px 0 55px;
  }

  .contacts-container {
    width: calc(100% - 36px);
  }

  .contacts-media__overlay {
    background: linear-gradient(
      180deg,
      rgba(18, 31, 39, 0.74) 0%,
      rgba(18, 31, 39, 0.84) 48%,
      rgba(18, 31, 39, 0.94) 100%
    );
  }

  .contacts-kicker {
    margin-bottom: 42px;

    font-size: 9px;

    color: rgba(255, 255, 255, 0.68);
  }

  .contacts-layout {
    display: block;
  }

  .contacts-title {
    line-height: 0.83;
  }

  .contacts-title__first {
    font-size: clamp(58px, 17vw, 88px);
  }

  .contacts-title__accent {
    margin-left: 0.12em;

    font-size: clamp(68px, 19vw, 100px);
  }

  .contacts-lead {
    margin-top: 38px;

    font-size: 15px;
  }

  .contacts-actions {
    margin-top: 35px;

    grid-template-columns: 1fr;

    gap: 9px;
  }

  .contacts-btn {
    width: 100%;
    max-width: none;

    min-height: 70px;

    padding: 0 18px 0 21px;

    font-size: 12px;
  }

  .contacts-aside {
    margin-top: 55px;

    display: block;

    padding-top: 27px;

    border-top: 1px solid rgba(176, 200, 214, 0.25);
  }

  .contacts-aside__line {
    display: none;
  }

  .contacts-aside p {
    max-width: 400px;

    font-size: 14px;
  }

  .contacts-bottom {
    margin-top: 65px;

    display: block;
  }

  .contacts-bottom__line {
    width: 36px;

    margin-bottom: 20px;

    background: var(--sky);

    opacity: 0.45;
  }

  .contacts-bottom__line:last-child {
    display: none;
  }

  .contacts-bottom p {
    max-width: 320px;

    text-align: left;

    white-space: normal;

    font-size: 21px;
  }
}

/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {
  .contacts-container {
    width: calc(100% - 28px);
  }

  .contacts-section {
    padding-top: 75px;
  }

  .contacts-title__first {
    font-size: clamp(52px, 16vw, 70px);
  }

  .contacts-title__accent {
    font-size: clamp(61px, 19vw, 82px);
  }
}

/* =========================================================
   CERTIFICATES
========================================================= */

.certificates {
  position: relative;

  overflow: hidden;

  padding: 120px 0;

  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    rgba(255, 253, 248, 0.72) 50%,
    var(--cream) 100%
  );
}

.certificates__container {
  width: min(calc(100% - 80px), 1480px);

  margin-inline: auto;
}

/* =========================================================
   HEADER
========================================================= */

.certificates__header {
  width: min(1180px, 100%);

  margin: 0 auto clamp(60px, 7vw, 105px);
}

.certificates__kicker {
  margin-bottom: clamp(28px, 3vw, 42px);
}

.certificates__heading-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.44fr);

  align-items: end;

  gap: clamp(50px, 8vw, 130px);
}

/* =========================================================
   TITLE
========================================================= */

.certificates__title {
  margin: 0;

  display: flex;
  flex-direction: column;

  font-family: var(--font-display);

  font-weight: 500;

  line-height: 0.84;

  letter-spacing: -0.045em;
}

.certificates__title > span {
  font-size: clamp(64px, 6.8vw, 112px);
}

.certificates__title em {
  width: fit-content;

  margin: 0.08em 0 0 0.32em;

  color: var(--blue);

  font-size: clamp(67px, 7.2vw, 120px);

  font-style: italic;

  font-weight: 500;

  transform: rotate(-2deg);
}

/* reveal + rotation */

.certificates__title em.reveal {
  transform: translateY(24px) rotate(-2deg);
}

.certificates__title em.reveal.is-visible {
  transform: translateY(0) rotate(-2deg);
}

/* =========================================================
   INTRO
========================================================= */

.certificates__intro {
  max-width: 380px;

  margin: 0 0 8px;

  color: rgba(32, 50, 62, 0.66);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   SLIDER
========================================================= */

.certificates-slider {
  position: relative;

  width: 100%;
}

.certificates-slider__viewport {
  position: relative;

  width: 100%;

  height: clamp(440px, 42vw, 680px);

  overflow: hidden;

  touch-action: pan-y;
}

/*
  Track occupies full viewport.
  Slides will be positioned from center with JS.
*/

.certificates-slider__track {
  position: relative;

  width: 100%;
  height: 100%;
}

/* =========================================================
   SLIDE
========================================================= */

.certificate-slide {
  position: absolute;

  top: 50%;
  left: 50%;

  width: clamp(300px, 28vw, 470px);

  display: grid;

  place-items: center;

  opacity: 0;

  pointer-events: none;

  transform: translate(-50%, -50%) scale(0.72);

  filter: blur(5px);

  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.65s ease,
    filter 0.75s ease;

  will-change: transform, opacity, filter;
}

/* center */

.certificate-slide.is-active {
  z-index: 5;

  opacity: 1;

  pointer-events: auto;

  transform: translate(-50%, -50%) scale(1);

  filter: blur(0);
}

/* left */

.certificate-slide.is-prev {
  z-index: 3;

  opacity: 0.48;

  pointer-events: auto;

  transform: translate(calc(-50% - clamp(310px, 29vw, 470px)), -50%) scale(0.78);

  filter: blur(2.2px);
}

/* right */

.certificate-slide.is-next {
  z-index: 3;

  opacity: 0.48;

  pointer-events: auto;

  transform: translate(calc(-50% + clamp(310px, 29vw, 470px)), -50%) scale(0.78);

  filter: blur(2.2px);
}

/* hidden */

.certificate-slide.is-hidden-left {
  transform: translate(calc(-50% - 70vw), -50%) scale(0.65);

  opacity: 0;
}

.certificate-slide.is-hidden-right {
  transform: translate(calc(-50% + 70vw), -50%) scale(0.65);

  opacity: 0;
}

/* =========================================================
   PAPER
========================================================= */

.certificate-slide__paper {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 10px;

  background: rgba(255, 253, 248, 0.52);

  border: 1px solid rgba(32, 50, 62, 0.12);

  transition:
    box-shadow 0.7s ease,
    border-color 0.5s ease;
}

/* elegant offset border */

.certificate-slide__paper::after {
  content: "";

  position: absolute;

  inset: 9px;

  border: 1px solid rgba(106, 147, 168, 0.12);

  pointer-events: none;
}

/* =========================================================
   CERTIFICATE IMAGE
========================================================= */

.certificate-slide img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  object-position: center;

  background: #fff;

  user-select: none;

  -webkit-user-drag: none;
}

/* active certificate feels more premium */

.certificate-slide.is-active .certificate-slide__paper {
  border-color: rgba(106, 147, 168, 0.25);

  box-shadow: 0 32px 90px rgba(32, 50, 62, 0.13);
}

/* =========================================================
   CONTROLS
========================================================= */

.certificates-slider__controls {
  width: min(440px, 100%);

  margin: clamp(25px, 3vw, 42px) auto 0;

  display: grid;

  grid-template-columns:
    62px
    1fr
    62px;

  align-items: center;

  gap: 25px;
}

/* =========================================================
   ARROWS
========================================================= */

.certificate-arrow {
  position: relative;

  width: 62px;
  height: 48px;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--ink);

  cursor: pointer;
}

/* line */

.certificate-arrow span {
  position: absolute;

  top: 50%;

  width: 42px;
  height: 1px;

  background: currentColor;

  transform: translateY(-50%);

  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* arrow head */

.certificate-arrow span::before,
.certificate-arrow span::after {
  content: "";

  position: absolute;

  top: 0;

  width: 12px;
  height: 1px;

  background: currentColor;
}

.certificate-arrow--prev span {
  left: 7px;
}

.certificate-arrow--prev span::before,
.certificate-arrow--prev span::after {
  left: 0;

  transform-origin: left center;
}

.certificate-arrow--prev span::before {
  transform: rotate(38deg);
}

.certificate-arrow--prev span::after {
  transform: rotate(-38deg);
}

.certificate-arrow--next span {
  right: 7px;
}

.certificate-arrow--next span::before,
.certificate-arrow--next span::after {
  right: 0;

  transform-origin: right center;
}

.certificate-arrow--next span::before {
  transform: rotate(38deg);
}

.certificate-arrow--next span::after {
  transform: rotate(-38deg);
}

@media (hover: hover) {
  .certificate-arrow:hover {
    color: var(--blue);
  }

  .certificate-arrow:hover span {
    width: 50px;
  }
}

/* =========================================================
   COUNTER
========================================================= */

.certificates-counter {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  color: rgba(32, 50, 62, 0.42);

  font-family: var(--font-ui);

  font-size: 9px;

  letter-spacing: 0.14em;
}

.certificates-counter [data-certificate-current] {
  color: var(--blue);

  font-family: var(--font-display);

  font-size: 28px;

  font-style: italic;

  letter-spacing: 0;
}

.certificates-counter i {
  width: 60px;
  height: 1px;

  background: rgba(32, 50, 62, 0.18);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .certificates__container {
    width: calc(100% - 60px);
  }

  .certificates-slider__viewport {
    height: clamp(430px, 55vw, 610px);
  }

  .certificate-slide {
    width: clamp(270px, 36vw, 390px);
  }

  .certificate-slide.is-prev {
    transform: translate(calc(-50% - 31vw), -50%) scale(0.76);
  }

  .certificate-slide.is-next {
    transform: translate(calc(-50% + 31vw), -50%) scale(0.76);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .certificates {
    padding: 60px 0;
  }
  .certificates .section-header {
    padding-left: 18px;
    padding-right: 18px;
  }
  .certificates__container {
    width: 100%;
  }

  .certificates__header {
    width: calc(100% - 36px);

    margin-bottom: 45px;
  }

  .certificates__heading-row {
    display: block;
  }

  .certificates__title {
    line-height: 0.88;
  }

  .certificates__title > span {
    font-size: clamp(47px, 13vw, 65px);
  }

  .certificates__title em {
    margin-left: 0.14em;

    font-size: clamp(53px, 15vw, 76px);
  }

  .certificates__intro {
    max-width: 330px;

    margin-top: 30px;

    font-size: 13px;
  }

  /*
    IMPORTANT:
    no horizontal container padding here,
    because side certificates must be visible.
  */

  .certificates-slider__viewport {
    height: clamp(405px, 125vw, 590px);

    overflow: hidden;
  }

  .certificate-slide {
    /*
      Center certificate ~70% viewport.
    */
    width: 70vw;

    max-width: 330px;
  }

  .certificate-slide.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  /*
    Only ~20% of neighbour certificates
    remain visible.
  */

  .certificate-slide.is-prev {
    opacity: 0.42;

    transform: translate(calc(-50% - 61vw), -50%) scale(0.78);

    filter: blur(2.5px);
  }

  .certificate-slide.is-next {
    opacity: 0.42;

    transform: translate(calc(-50% + 61vw), -50%) scale(0.78);

    filter: blur(2.5px);
  }

  .certificate-slide__paper {
    padding: 6px;

    box-shadow: 0 22px 55px rgba(32, 50, 62, 0.11);
  }

  .certificate-slide__paper::after {
    inset: 6px;
  }

  .certificates-slider__controls {
    width: calc(100% - 38px);

    grid-template-columns:
      55px
      1fr
      55px;

    margin-top: 20px;
  }

  .certificate-arrow {
    width: 55px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .certificates__header {
    width: calc(100% - 28px);
  }

  .certificate-slide {
    width: 72vw;

    height: 104vw;
  }

  .certificate-slide.is-prev {
    transform: translate(calc(-50% - 63vw), -50%) scale(0.77);
  }

  .certificate-slide.is-next {
    transform: translate(calc(-50% + 63vw), -50%) scale(0.77);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .certificate-slide {
    transition: none !important;
  }
}

/* =========================================================
   REVIEWS
========================================================= */

.reviews-section {
  position: relative;
  overflow: hidden;

  padding: clamp(105px, 9vw, 160px) 0 clamp(95px, 9vw, 150px);

  background: linear-gradient(
    180deg,
    var(--cream),
    rgba(255, 253, 248, 0.75) 50%,
    var(--cream)
  );
}

.reviews-container {
  width: min(calc(100% - 80px), 1480px);

  margin-inline: auto;
}

.reviews-header {
  max-width: 900px;

  margin: 0 auto clamp(60px, 7vw, 100px);

  text-align: center;
}

.reviews-header .kicker {
  justify-content: center;
}

.reviews-header .description {
  max-width: 620px;

  margin-inline: auto;
}

/* =========================================================
   CAROUSEL
========================================================= */

.reviews-slider {
  position: relative;
}

.reviews-slider__viewport {
  position: relative;

  height: clamp(590px, 52vw, 800px);

  overflow: hidden;

  touch-action: pan-y;
}

.reviews-slider__track {
  position: relative;

  width: 100%;
  height: 100%;
}

/* =========================================================
   SLIDE
========================================================= */

.review-slide {
  position: absolute;

  top: 50%;
  left: 50%;

  width: clamp(250px, 22vw, 360px);

  height: clamp(510px, 45vw, 720px);

  opacity: 0;

  pointer-events: none;

  transform: translate(-50%, -50%) scale(0.68);

  filter: blur(6px);

  transition:
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.75s ease,
    opacity 0.65s ease;

  will-change: transform, opacity, filter;
}

.review-slide.is-active {
  z-index: 5;

  opacity: 1;

  pointer-events: auto;

  transform: translate(-50%, -50%) scale(1);

  filter: blur(0);
}

.review-slide.is-prev {
  z-index: 3;

  opacity: 0.42;

  pointer-events: auto;

  transform: translate(calc(-50% - clamp(260px, 25vw, 420px)), -50%) scale(0.78);

  filter: blur(2.5px);
}

.review-slide.is-next {
  z-index: 3;

  opacity: 0.42;

  pointer-events: auto;

  transform: translate(calc(-50% + clamp(260px, 25vw, 420px)), -50%) scale(0.78);

  filter: blur(2.5px);
}

.review-slide.is-hidden-left {
  opacity: 0;

  transform: translate(calc(-50% - 70vw), -50%) scale(0.6);
}

.review-slide.is-hidden-right {
  opacity: 0;

  transform: translate(calc(-50% + 70vw), -50%) scale(0.6);
}

/* =========================================================
   IPHONE
========================================================= */

.iphone {
  width: 100%;
  height: 100%;

  display: grid;

  place-items: center;
}

.iphone__frame {
  position: relative;

  width: 100%;
  height: 100%;

  padding: 9px;

  border: 2px solid rgba(32, 50, 62, 0.82);

  border-radius: clamp(42px, 4vw, 62px);

  background: linear-gradient(145deg, #384854, #15242e 40%, #536773 100%);

  transition:
    box-shadow 0.7s ease,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* inner black bezel */

.iphone__frame::before {
  content: "";

  position: absolute;

  inset: 6px;

  border: 3px solid rgba(0, 0, 0, 0.84);

  border-radius: inherit;

  pointer-events: none;

  z-index: 4;
}

/* glass */

.iphone__frame::after {
  content: "";

  position: absolute;

  inset: 10px;

  z-index: 3;

  border-radius: calc(clamp(42px, 4vw, 62px) - 10px);

  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.11),
    transparent 20%,
    transparent 78%,
    rgba(255, 255, 255, 0.04)
  );

  pointer-events: none;
}

/* =========================================================
   SCREEN
========================================================= */

.iphone__screen {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: calc(clamp(42px, 4vw, 62px) - 11px);

  background: #fff;
}

.iphone__screen img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position: top center;

  user-select: none;

  -webkit-user-drag: none;
}

/* =========================================================
   DYNAMIC ISLAND
========================================================= */

.iphone__island {
  position: absolute;

  z-index: 10;

  top: 19px;
  left: 50%;

  width: 31%;
  height: 26px;

  border-radius: 999px;

  background: #050708;

  transform: translateX(-50%);
}

/* =========================================================
   IPHONE SIDE BUTTONS
========================================================= */

.iphone__button {
  position: absolute;

  display: block;

  width: 3px;

  background: #243640;
}

.iphone__button--left-1 {
  left: -4px;

  top: 19%;

  height: 5%;
}

.iphone__button--left-2 {
  left: -4px;

  top: 28%;

  height: 9%;
}

.iphone__button--left-3 {
  left: -4px;

  top: 40%;

  height: 9%;
}

.iphone__button--right {
  right: -4px;

  top: 30%;

  height: 14%;
}

/* =========================================================
   CLICKABLE SIDE PHONES
========================================================= */

@media (hover: hover) {
  .review-slide.is-prev,
  .review-slide.is-next {
    cursor: pointer;
  }

  .review-slide.is-prev:hover,
  .review-slide.is-next:hover {
    opacity: 0.62;

    filter: blur(1px);
  }
}

/* =========================================================
   CONTROLS
========================================================= */

.reviews-controls {
  width: min(420px, 100%);

  margin: 25px auto 0;

  display: grid;

  grid-template-columns:
    62px
    1fr
    62px;

  align-items: center;

  gap: 25px;
}

/* =========================================================
   ARROWS
========================================================= */

.reviews-arrow {
  position: relative;

  width: 62px;
  height: 50px;

  padding: 0;

  border: 0;

  background: transparent;

  color: var(--ink);

  cursor: pointer;
}

.reviews-arrow span {
  position: absolute;

  top: 50%;

  width: 42px;
  height: 1px;

  background: currentColor;

  transform: translateY(-50%);

  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.reviews-arrow span::before,
.reviews-arrow span::after {
  content: "";

  position: absolute;

  width: 12px;
  height: 1px;

  background: currentColor;
}

/* left */

.reviews-arrow--prev span {
  left: 7px;
}

.reviews-arrow--prev span::before,
.reviews-arrow--prev span::after {
  left: 0;

  transform-origin: left center;
}

.reviews-arrow--prev span::before {
  transform: rotate(38deg);
}

.reviews-arrow--prev span::after {
  transform: rotate(-38deg);
}

/* right */

.reviews-arrow--next span {
  right: 7px;
}

.reviews-arrow--next span::before,
.reviews-arrow--next span::after {
  right: 0;

  transform-origin: right center;
}

.reviews-arrow--next span::before {
  transform: rotate(38deg);
}

.reviews-arrow--next span::after {
  transform: rotate(-38deg);
}

@media (hover: hover) {
  .reviews-arrow:hover {
    color: var(--blue);
  }

  .reviews-arrow:hover span {
    width: 51px;
  }
}

/* =========================================================
   COUNTER
========================================================= */

.reviews-counter {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  color: rgba(32, 50, 62, 0.4);

  font-family: var(--font-ui);

  font-size: 9px;

  letter-spacing: 0.14em;
}

.reviews-counter [data-review-current] {
  color: var(--blue);

  font-family: var(--font-display);

  font-size: 29px;

  font-style: italic;

  letter-spacing: 0;
}

.reviews-counter i {
  width: 60px;
  height: 1px;

  background: rgba(32, 50, 62, 0.18);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .reviews-container {
    width: calc(100% - 60px);
  }

  .review-slide {
    width: clamp(230px, 29vw, 320px);

    height: clamp(470px, 58vw, 650px);
  }

  .review-slide.is-prev {
    transform: translate(calc(-50% - 29vw), -50%) scale(0.76);
  }

  .review-slide.is-next {
    transform: translate(calc(-50% + 29vw), -50%) scale(0.76);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .reviews-section {
    padding: 60px 0;
  }

  .reviews-container {
    width: 100%;
  }

  .reviews-header {
    width: calc(100% - 36px);

    margin-bottom: 42px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: left;
  }

  .reviews-header .kicker {
    justify-content: flex-start;
  }

  .reviews-header .description {
    margin-left: 0;
  }

  .reviews-slider__viewport {
    height: min(148vw, 660px);
  }

  /*
    Main iPhone around 70% viewport width
  */

  .review-slide {
    width: 69vw;

    max-width: 330px;

    height: min(140vw, 620px);

    max-height: 620px;
  }

  .review-slide.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  /*
    About 20% of side phones visible
  */

  .review-slide.is-prev {
    opacity: 0.38;

    transform: translate(calc(-50% - 60vw), -50%) scale(0.78);

    filter: blur(3px);
  }

  .review-slide.is-next {
    opacity: 0.38;

    transform: translate(calc(-50% + 60vw), -50%) scale(0.78);

    filter: blur(3px);
  }

  .iphone__frame {
    padding: 7px;

    border-radius: 42px;
  }

  .iphone__screen {
    border-radius: 33px;
  }

  .iphone__frame::before {
    inset: 5px;

    border-radius: 37px;
  }

  .iphone__frame::after {
    inset: 8px;

    border-radius: 33px;
  }

  .iphone__island {
    top: 15px;

    height: 23px;

    width: 32%;
  }

  .reviews-controls {
    width: calc(100% - 40px);

    margin-top: 17px;

    grid-template-columns:
      55px
      1fr
      55px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {
  .reviews-header {
    width: calc(100% - 28px);
  }

  .review-slide {
    width: 72vw;

    height: 145vw;

    max-height: 590px;
  }

  .review-slide.is-prev {
    transform: translate(calc(-50% - 63vw), -50%) scale(0.77);
  }

  .review-slide.is-next {
    transform: translate(calc(-50% + 63vw), -50%) scale(0.77);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .review-slide,
  .iphone__frame {
    transition: none !important;
  }
}