/* =========================================
   1. GLOBAL
========================================= */

/*
   DESIGN TOKENS
*/

:root {
  color-scheme: light;

  --bg-color: #fbfdfe;
  --text-color: #0e2225;

  --primary-color: #25595f;
  --secondary-color: #d4f1ec;
  --accent-color: #52c8b0;

  --surface-color: #ffffff;
  --surface-soft-color: #edf7f8;

  --font-main: "Inter", Arial, sans-serif;
  --font-arabic: "Noto Sans Arabic", Arial, sans-serif;

  --container-max: 1630px;
}

/*
   RESET
*/

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  min-height: 100vh;

  background-color: var(--bg-color);
  color: var(--text-color);

  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
}

html[lang="ar"] body {
  font-family: var(--font-arabic);
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
   CONTAINER
*/

.container {
  width: min(84.895833%, var(--container-max));
  margin-inline: auto;
}

@media (max-width: 1200px) {
  .container {
    width: 90%;
  }
}

/*
   KEYBOARD FOCUS
*/

:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 5px;
}

/*
   SCREEN READER TEXT
*/

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;
  clip-path: inset(50%);

  white-space: nowrap;
  border: 0;
}

/* =========================================
   2. HEADER
========================================= */

/*
   HEADER
*/

.header {
  position: relative;
  z-index: 20;

  width: min(84.375%, 1619px);
  margin: 52px auto 0;

  color: #ffffff;
  background-color: var(--primary-color);

  border-radius: 32px;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  min-height: 120px;
  padding: 20px 50px;
}

/*
   LOGO
*/

.logo {
  display: block;
  flex: 0 0 210px;
}

.logo img {
  display: block;

  width: 100%;
  height: auto;
}

/*
   NAVIGATION
*/

.navbar {
  margin-inline-start: auto;
}

.nav-menu {
  display: flex;
  align-items: center;

  gap: 32px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.nav-link {
  position: relative;

  display: inline-flex;
  align-items: center;

  min-height: 44px;

  color: #ffffff;

  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;

  white-space: nowrap;

  transition: color 0.2s ease;
}

.nav-link::after {
  content: "";

  position: absolute;
  inset-inline: 0;
  bottom: 3px;

  height: 2px;

  background-color: var(--accent-color);
  border-radius: 2px;

  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-link:hover {
  color: var(--secondary-color);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/*
   MOBILE MENU BUTTON
*/

.burger-btn {
  display: none;
  flex-shrink: 0;

  width: 48px;
  height: 48px;

  padding: 0;

  color: #ffffff;
  background-color: transparent;

  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 12px;

  cursor: pointer;

  transition: background-color 0.2s ease;
}

.burger-btn:hover {
  background-color: rgb(255 255 255 / 10%);
}

.burger-btn span {
  display: block;
  flex-shrink: 0;

  width: 22px;
  height: 2px;

  background-color: currentColor;
  border-radius: 2px;

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

.burger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/*
   LAPTOP
*/

@media (max-width: 1200px) {
  .header {
    width: 90%;
    margin-top: 32px;

    border-radius: 26px;
  }

  .header-container {
    gap: 28px;

    min-height: 100px;
    padding: 18px 32px;
  }

  .logo {
    flex-basis: 180px;
  }

  .nav-menu {
    gap: 24px;
  }

  .nav-link {
    font-size: 16px;
  }
}

/*
   TABLET / MOBILE NAVIGATION
*/

@media (max-width: 1000px) {
  .header-container {
    gap: 20px;

    min-height: 90px;
    padding: 18px 26px;
  }

  .logo {
    flex-basis: 170px;
  }

  .burger-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-inline-start: auto;
  }

  .navbar {
    position: absolute;

    top: calc(100% + 12px);
    inset-inline: 0;

    max-height: calc(100dvh - 160px);

    margin: 0;
    padding: 14px;

    overflow-y: auto;
    overscroll-behavior: contain;

    background-color: var(--primary-color);

    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 22px;

    box-shadow: 0 16px 36px rgb(14 34 37 / 16%);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s ease;
  }

  .navbar.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
  }

  .nav-menu {
    flex-direction: column;
    align-items: stretch;

    gap: 4px;
  }

  .nav-link {
    display: flex;

    min-height: 48px;
    padding: 12px 16px;

    font-size: 16px;
    white-space: normal;

    border-radius: 12px;

    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .nav-link:hover {
    background-color: rgb(255 255 255 / 8%);
  }

  .nav-link::after {
    display: none;
  }
}

/*
   SMALL MOBILE
*/

@media (max-width: 600px) {
  .header {
    margin-top: 20px;
    border-radius: 20px;
  }

  .header-container {
    min-height: 80px;
    padding: 16px 20px;
  }

  .logo {
    flex-basis: 145px;
  }

  .burger-btn {
    width: 44px;
    height: 44px;
  }

  .navbar {
    top: calc(100% + 10px);
    max-height: calc(100dvh - 130px);

    border-radius: 18px;
  }
}

/*
   ENTRANCE ANIMATION
*/

@media (prefers-reduced-motion: no-preference) {
  .header {
    animation: header-enter 0.65s ease-out both;
  }
}

@keyframes header-enter {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
   REDUCED MOTION
*/

@media (prefers-reduced-motion: reduce) {
  .header,
  .header *,
  .header *::after {
    animation: none;
    transition: none;
  }
}
/* =========================================
   COMPACT HEADER
========================================= */

.header {
  margin-top: 24px;
  border-radius: 20px;
}

.header-container {
  min-height: 80px;
  padding: 14px 28px;
  gap: 24px;
}

.logo {
  flex-basis: 150px;
}

.nav-menu {
  gap: 26px;
}

.nav-link {
  font-size: 16px;
}

/*
   TABLET
*/

@media (max-width: 1000px) {
  .header-container {
    min-height: 74px;
    padding: 12px 22px;
  }

  .logo {
    flex-basis: 140px;
  }

  .nav-menu {
    gap: 4px;
  }

  .burger-btn {
    width: 44px;
    height: 44px;
  }
}

/*
   MOBILE
*/

@media (max-width: 600px) {
  .header {
    margin-top: 16px;
    border-radius: 16px;
  }

  .header-container {
    min-height: 68px;
    padding: 12px 18px;
    gap: 16px;
  }

  .logo {
    flex-basis: 125px;
  }

  .burger-btn {
    border-radius: 10px;
  }
}

/* =========================================
   3. HERO
========================================= */

/*
   SECTION
*/

.hero {
  position: relative;

  padding-block: 32px 56px;

  overflow-x: clip;
}

.hero-clip-definitions {
  position: absolute;
  pointer-events: none;
}

/*
   MAIN LAYOUT
*/

.hero-container {
  display: grid;
  grid-template-columns:
    minmax(0, 465fr)
    minmax(0, 510fr);

  align-items: stretch;
  gap: 2.5%;

  width: min(84.375%, 1619px);

  container-type: inline-size;
}

/*
   CONTENT CARD
*/

.hero-content {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  min-width: 0;
  min-height: 45.5cqw;

  padding-block: 8.6cqw 5.3cqw;
  padding-inline: 7.45cqw 4.5cqw;

  color: #ffffff;
  background-color: var(--primary-color);

  border-radius: 3.9cqw;
}

/*
   DECORATIVE ACCENT
*/

.hero-accent {
  position: absolute;

  top: 4.8cqw;
  inset-inline-start: 4.8cqw;

  width: 3.7cqw;
  height: 3.7cqw;

  fill: none;

  stroke: var(--accent-color);
  stroke-width: 5;
  stroke-linecap: square;

  pointer-events: none;
}

/*
   TEXT
*/

.hero-eyebrow {
  margin: 0 0 1.6cqw;

  font-size: clamp(18px, 2.15cqw, 35px);
  font-weight: 600;
  line-height: 1.25;
}

.hero-title {
  width: 100%;
  max-width: none;

  margin: 0;

  font-size: clamp(22px, 2.45cqw, 40px);
  font-weight: 700;
  line-height: 1.18;

  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

/*
   BUTTON
*/

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 17cqw;
  min-width: 140px;
  min-height: 48px;

  margin-top: 4.8cqw;
  padding: 1.45cqw 1.8cqw;

  color: #ffffff;
  background-color: var(--accent-color);

  font-size: clamp(15px, 1.55cqw, 25px);
  font-weight: 700;
  line-height: 1.4;

  text-align: center;
  border-radius: 1cqw;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.hero-button:hover {
  background-color: #339982;
  transform: translateY(-2px);
}

/*
   VISUAL AREA
*/

.hero-visual {
  position: relative;

  min-width: 0;
  min-height: 0;

  isolation: isolate;
}

/*
   LARGE IMAGE
*/

.hero-main-image {
  position: absolute;
  z-index: 0;

  top: 0;
  left: 0;

  width: 100%;
  height: 60.6%;

  overflow: hidden;

  clip-path: url(#hero-main-image-clip);
}

.hero-main-image img {
  display: block;

  width: 100%;
  max-width: none;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/*
   INFO CARDS
*/

.hero-info {
  position: absolute;

  top: 63.4%;

  width: 33.2%;
  height: 36.6%;
  min-height: 0;

  padding: 2.55cqw 2.4cqw;

  background-color: var(--secondary-color);

  border-radius: 2cqw;
}

.hero-info-solutions {
  left: 0;
}

.hero-info-experience {
  left: 34.5%;
}

.hero-info h2 {
  margin: 0;

  color: var(--primary-color);

  font-size: clamp(18px, 1.7cqw, 28px);
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.hero-info p {
  margin: 1.4cqw 0 0;

  color: var(--text-color);

  font-size: clamp(13px, 0.95cqw, 16px);
  font-weight: 400;
  line-height: 1.35;

  overflow-wrap: break-word;
}

.hero-info-solutions p {
  margin-top: 2.7cqw;
}

.hero-info .hero-experience-number {
  font-size: clamp(30px, 2.45cqw, 40px);
  line-height: 1;
}

/*
   VERTICAL IMAGE
*/

.hero-side-image {
  position: absolute;
  z-index: 1;

  top: 48.6%;
  right: 1%;

  width: 29.8%;
  height: 51.4%;

  margin: 0;

  overflow: hidden;

  border-radius: 3.4cqw;
}

.hero-side-image img {
  display: block;

  width: 100%;
  max-width: none;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/*
   ANIMATION SETTINGS

   تبدأ العناصر متباعدة عن منتصف التكوين،
   ثم تتحرك إلى مواقعها النهائية.
*/

.hero {
  --hero-duration: 1600ms;
  --hero-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-content {
  --hero-from-x: -120px;
  --hero-from-y: 15px;
  --hero-delay: 0ms;
}

.hero-main-image {
  --hero-from-x: 120px;
  --hero-from-y: -80px;
  --hero-delay: 100ms;
}

.hero-info-solutions {
  --hero-from-x: -30px;
  --hero-from-y: 110px;
  --hero-delay: 80ms;
}

.hero-info-experience {
  --hero-from-x: 35px;
  --hero-from-y: 110px;
  --hero-delay: 140ms;
}

.hero-side-image {
  --hero-from-x: 130px;
  --hero-from-y: 70px;
  --hero-delay: 180ms;
}

/*
   JAVASCRIPT ADDS .is-entering
*/

@media (prefers-reduced-motion: no-preference) {
  .hero.is-entering .hero-content,
  .hero.is-entering .hero-main-image,
  .hero.is-entering .hero-info,
  .hero.is-entering .hero-side-image {
    animation-name: hero-converge;
    animation-duration: var(--hero-duration);
    animation-timing-function: var(--hero-easing);
    animation-delay: var(--hero-delay, 0ms);
    animation-fill-mode: both;
  }
}

@keyframes hero-converge {
  from {
    transform: translate3d(var(--hero-from-x, 0px), var(--hero-from-y, 0px), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/*
   ARABIC
*/

html[lang="ar"] .hero-title {
  line-height: 1.5;
  letter-spacing: normal;
}

html[lang="ar"] .hero-eyebrow,
html[lang="ar"] .hero-info h2 {
  line-height: 1.4;
}

html[lang="ar"] .hero-info p {
  line-height: 1.6;
}

html[lang="ar"] .hero-content {
  --hero-from-x: 120px;
}

/*
   LAPTOP
*/

@media (max-width: 1200px) {
  .hero-container {
    width: 90%;
  }
}

/*
   TABLET
*/

@media (max-width: 1000px) {
  .hero {
    padding-block: 24px 44px;
  }

  .hero-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .hero-content {
    min-height: 0;

    padding: 64px 36px 36px;

    border-radius: 28px;

    --hero-from-x: -45px;
    --hero-from-y: 0px;
  }

  .hero-accent {
    top: 18px;
    inset-inline-start: 26px;

    width: 34px;
    height: 34px;
  }

  .hero-eyebrow {
    margin-bottom: 18px;
    font-size: 20px;
  }

  .hero-title {
    max-width: 680px;

    font-size: clamp(26px, 3.8vw, 36px);
    line-height: 1.25;
  }

  .hero-button {
    width: auto;
    min-width: 160px;

    margin-top: 28px;
    padding: 14px 24px;

    font-size: 16px;
    border-radius: 12px;
  }

  .hero-visual {
    aspect-ratio: 1034 / 926;
  }

  .hero-info {
    padding: 5% 4.8%;
    border-radius: 24px;
  }

  .hero-info h2 {
    font-size: clamp(20px, 3vw, 28px);
  }

  .hero-info p {
    margin-top: 20px;

    font-size: clamp(14px, 1.8vw, 17px);
    line-height: 1.5;
  }

  .hero-info-solutions p {
    margin-top: 24px;
  }

  .hero-info .hero-experience-number {
    font-size: clamp(32px, 4.5vw, 44px);
  }

  .hero-side-image {
    border-radius: 6cqw;

    --hero-from-x: 55px;
    --hero-from-y: 35px;
  }

  .hero-main-image {
    --hero-from-x: 50px;
    --hero-from-y: -35px;
  }

  .hero-info-solutions,
  .hero-info-experience {
    --hero-from-y: 55px;
  }

  html[lang="ar"] .hero-content {
    --hero-from-x: 45px;
  }
}

/*
   MOBILE
*/

@media (max-width: 600px) {
  .hero {
    padding-block: 20px 36px;
  }

  .hero-container {
    gap: 18px;
  }

  .hero-content {
    padding: 56px 24px 30px;
    border-radius: 24px;
  }

  .hero-accent {
    top: 14px;
    inset-inline-start: 20px;

    width: 30px;
    height: 30px;
  }

  .hero-eyebrow {
    font-size: 18px;
  }

  .hero-title {
    font-size: clamp(24px, 5.8vw, 30px);
    line-height: 1.3;
  }

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

    gap: 12px;
    aspect-ratio: auto;
  }

  .hero-main-image {
    position: relative;

    top: auto;
    left: auto;

    grid-column: 1 / -1;

    width: 100%;
    height: auto;
    aspect-ratio: 1.84 / 1;

    clip-path: none;
    border-radius: 22px;
  }

  .hero-main-image img {
    position: absolute;
    inset: 0;
  }

  .hero-info {
    position: static;

    width: auto;
    min-height: 0;

    padding: 22px 16px;

    border-radius: 18px;
  }

  .hero-info h2 {
    font-size: 20px;
  }

  .hero-info p,
  .hero-info-solutions p {
    margin-top: 18px;

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

  .hero-info .hero-experience-number {
    font-size: 32px;
  }

  .hero-side-image {
    position: relative;

    top: auto;
    right: auto;

    grid-column: 1 / -1;
    justify-self: center;

    width: min(68%, 240px);
    height: auto;
    aspect-ratio: 981 / 1513;

    border-radius: 28px;
  }

  .hero-side-image img {
    position: absolute;
    inset: 0;
  }

  .hero-content,
  .hero-main-image,
  .hero-info,
  .hero-side-image {
    --hero-from-x: 0px;
    --hero-from-y: 35px;
  }

  html[lang="ar"] .hero-content {
    --hero-from-x: 0px;
  }
}

/*
   REDUCED MOTION
*/

@media (prefers-reduced-motion: reduce) {
  .hero-content,
  .hero-main-image,
  .hero-info,
  .hero-side-image {
    animation: none !important;
    transform: none !important;
  }

  .hero-button {
    transition: none;
  }
}
/* Align the header and hero */

.header,
.hero .hero-container {
  width: min(84.375%, 1619px);
  margin-inline: auto;
}

@media (max-width: 1200px) {
  .header,
  .hero .hero-container {
    width: 90%;
  }
}

/* Align the vertical image with the right edge */

.hero-side-image {
  right: 0;
}

@media (max-width: 600px) {
  .hero-side-image {
    right: auto;
  }
}
/* =========================================
   PARTNERS
========================================= */

/*
   SECTION
*/

.partners-section {
  padding-block: 0 48px;
}

/*
   FIXED CONTAINER
*/

.partners-container {
  display: grid;

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

  align-items: center;
  gap: clamp(28px, 4vw, 76px);

  width: min(84.375%, 1619px);
  min-height: 126px;

  margin-inline: auto;
  padding: 26px 36px;

  background-color: var(--surface-soft-color);
  border-radius: 24px;
}

/*
   FIXED TITLE
*/

.partners-title {
  max-width: 190px;
  margin: 0;

  color: var(--text-color);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
}

/*
   LOGOS VIEWPORT

   Keeps moving logos inside their own area.
*/

.partners-viewport {
  min-width: 0;
  overflow: hidden;
}

/*
   LOGOS GROUP
*/

.partners-list {
  display: grid;

  grid-template-columns:
    minmax(0, 135fr)
    minmax(0, 115fr)
    minmax(0, 146fr)
    minmax(0, 163fr)
    minmax(0, 234fr)
    minmax(0, 87fr);

  align-items: center;
  gap: clamp(16px, 2.4vw, 46px);

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

/*
   LOGO ITEMS
*/

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 64px;
}

.partner-item img {
  display: block;

  width: 100%;
  height: auto;
  max-height: 72px;

  object-fit: contain;
}

/*
   INDIVIDUAL LOGO SIZES
*/

.partner-romez img {
  max-width: 135px;
}

.partner-romaizan img {
  max-width: 115px;
}

.partner-third img {
  max-width: 146px;
}

.partner-josoor img {
  max-width: 163px;
}

.partner-kingdom img {
  max-width: 234px;
}

.partner-sixth img {
  max-width: 78px;
}

/*
   LOGOS ANIMATION

   Only the logos group moves.
   The background and title remain fixed.
*/

.partners-section {
  --partners-start-x: -100px;
  --partners-duration: 1600ms;
}

@media (prefers-reduced-motion: no-preference) {
  .partners-section.is-revealing .partners-list {
    animation: partners-logos-enter var(--partners-duration)
      cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes partners-logos-enter {
  from {
    transform: translate3d(var(--partners-start-x), 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/*
   LAPTOP
*/

@media (max-width: 1200px) {
  .partners-container {
    grid-template-columns:
      minmax(0, 155px)
      minmax(0, 1fr);

    width: 90%;

    gap: 28px;
    padding: 24px 28px;
  }

  .partners-title {
    font-size: 14px;
  }

  .partners-list {
    gap: 20px;
  }
}

/*
   TABLET
*/

@media (max-width: 1000px) {
  .partners-container {
    grid-template-columns: minmax(0, 1fr);

    gap: 24px;
    padding: 28px;
  }

  .partners-title {
    max-width: none;

    font-size: 16px;
    text-align: center;
  }

  .partners-list {
    gap: 22px;
  }
}

/*
   MOBILE
*/

@media (max-width: 600px) {
  .partners-section {
    --partners-start-x: -45px;

    padding-bottom: 36px;
  }

  .partners-container {
    gap: 24px;

    padding: 26px 20px;
    border-radius: 20px;
  }

  .partners-title {
    max-width: 260px;
    margin-inline: auto;

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

  .partners-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px 18px;
  }

  .partner-item {
    min-height: 60px;
  }

  .partner-item img {
    max-height: 56px;
  }

  .partner-sixth img {
    max-width: 58px;
  }
}

/*
   REDUCED MOTION
*/

@media (prefers-reduced-motion: reduce) {
  .partners-list {
    animation: none !important;
    transform: none !important;
  }
}
/* =========================================
   ABOUT US
========================================= */

/*
   SECTION
*/

.about-section {
  padding-block: 32px 72px;

  color: var(--text-color);
  background-color: var(--bg-color);

  overflow-x: clip;
  scroll-margin-top: 24px;
}

/*
   LAYOUT
*/

.about-container {
  display: grid;

  grid-template-columns:
    minmax(0, 55fr)
    minmax(0, 42fr);

  align-items: start;
  gap: 3%;

  width: min(84.375%, 1619px);
  margin-inline: auto;

  container-type: inline-size;
}

/*
   TEXT CONTENT
*/

.about-content {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 49cqw;

  padding-top: 4cqw;
}

.about-title {
  margin: 0;

  font-size: clamp(32px, 3.6cqw, 58px);
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.025em;
}

/*
   INFORMATION ROWS
*/

.about-list {
  display: grid;
  grid-template-rows: repeat(4, minmax(min-content, 1fr));

  flex: 1;

  gap: 28px;

  margin: 4.3cqw 0 0;
  padding: 0;
}

.about-row {
  display: grid;

  grid-template-columns:
    minmax(0, 25fr)
    minmax(0, 75fr);

  align-items: start;
  align-content: start;

  gap: 2cqw;
}

.about-row dt {
  margin: 0;

  color: var(--text-color);

  font-size: clamp(18px, 1.75cqw, 28px);
  font-weight: 700;
  line-height: 1.25;

  overflow-wrap: break-word;
}

.about-row dd {
  min-width: 0;
  margin: 0;

  color: rgb(14 34 37 / 70%);

  font-size: clamp(16px, 1.2cqw, 20px);
  font-weight: 400;
  line-height: 1.5;

  overflow-wrap: break-word;
}

/*
   IMAGE AND CAPTION GROUP
*/

.about-visual {
  position: relative;

  min-width: 0;
  margin: 0;
}

/*
   IMAGE
*/

.about-image-wrap {
  position: relative;

  width: 100%;

  overflow: hidden;
  isolation: isolate;
}

.about-image {
  display: block;

  width: 100%;
  height: auto;
}

/*
   WHITE FADE

   Applied over the original image.
*/

.about-image-wrap::after {
  content: "";

  position: absolute;
  z-index: 1;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--bg-color) 0%,
      rgb(251 253 254 / 88%) 5%,
      rgb(251 253 254 / 35%) 17%,
      rgb(251 253 254 / 0%) 30%
    ),
    linear-gradient(
      180deg,
      var(--bg-color) 0%,
      rgb(251 253 254 / 65%) 3%,
      rgb(251 253 254 / 0%) 12%
    );

  pointer-events: none;
}

/*
   OVERLAPPING GREEN CAPTION
*/

.about-caption {
  position: relative;
  z-index: 2;

  margin-top: -3.1cqw;
  margin-inline-start: -12%;
  margin-inline-end: 10%;

  padding: 1.8cqw 2.4cqw;

  color: #ffffff;
  background-color: var(--primary-color);

  font-size: clamp(16px, 1.25cqw, 21px);
  font-weight: 500;
  line-height: 1.5;
}

/*
   ANIMATION SETTINGS
*/

.about-section {
  --about-enter-distance: 120px;
  --about-enter-duration: 1500ms;
}

/*
   TEXT ENTERS FROM THE LEFT.
   IMAGE AND CAPTION ENTER TOGETHER FROM THE RIGHT.
*/

@media (prefers-reduced-motion: no-preference) {
  .about-section.is-revealing .about-visual {
    animation: about-visual-enter var(--about-enter-duration)
      cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes about-text-enter {
  from {
    transform: translateX(calc(-1 * var(--about-enter-distance)));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes about-visual-enter {
  from {
    transform: translateX(var(--about-enter-distance));
  }

  to {
    transform: translateX(0);
  }
}

/*
   LAPTOP
*/

@media (max-width: 1200px) {
  .about-container {
    width: 90%;
  }

  .about-list {
    gap: 32px;
  }

  .about-row {
    gap: 20px;
  }
}

/*
   TABLET
*/

@media (max-width: 1000px) {
  .about-section {
    --about-enter-distance: 60px;

    padding-block: 28px 56px;
  }

  .about-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .about-content {
    min-height: 0;
    padding-top: 0;
  }

  .about-title {
    font-size: clamp(32px, 4.5vw, 44px);
  }

  .about-list {
    grid-template-rows: none;

    gap: 32px;
    margin-top: 36px;
  }

  .about-row {
    grid-template-columns:
      minmax(0, 180px)
      minmax(0, 1fr);

    gap: 28px;
  }

  .about-row dt {
    font-size: 21px;
    line-height: 1.35;
  }

  .about-row dd {
    font-size: 17px;
    line-height: 1.65;
  }

  .about-visual {
    width: 100%;
    max-width: 540px;

    margin-inline: auto;
  }

  .about-caption {
    margin-top: -40px;
    margin-inline-start: -4%;
    margin-inline-end: 6%;

    padding: 24px;

    font-size: 17px;
  }
}

/*
   MOBILE
*/

@media (max-width: 600px) {
  .about-section {
    --about-enter-distance: 30px;

    padding-block: 24px 44px;
  }

  .about-container {
    gap: 32px;
  }

  .about-title {
    font-size: 32px;
  }

  .about-list {
    gap: 28px;
    margin-top: 28px;
  }

  .about-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .about-row dt {
    font-size: 19px;
  }

  .about-row dd {
    font-size: 16px;
    line-height: 1.7;
  }

  .about-visual {
    max-width: 420px;
  }

  .about-caption {
    margin-top: -30px;
    margin-inline-start: 0;
    margin-inline-end: 5%;

    padding: 20px;

    font-size: 16px;
    line-height: 1.6;
  }
}

/*
   REDUCED MOTION
*/

@media (prefers-reduced-motion: reduce) {
  .about-content,
  .about-visual {
    animation: none !important;
    transform: none !important;
  }
}
/*
   STAGGERED TEXT ENTRANCE
*/

.about-title {
  --about-text-delay: 0ms;
}

.about-row:nth-child(1) {
  --about-text-delay: 180ms;
}

.about-row:nth-child(2) {
  --about-text-delay: 360ms;
}

.about-row:nth-child(3) {
  --about-text-delay: 540ms;
}

.about-row:nth-child(4) {
  --about-text-delay: 720ms;
}

@media (prefers-reduced-motion: no-preference) {
  .about-section.is-revealing .about-title,
  .about-section.is-revealing .about-row {
    animation: about-row-enter 900ms cubic-bezier(0.22, 1, 0.36, 1)
      var(--about-text-delay, 0ms) both;
  }
}

@keyframes about-row-enter {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-title,
  .about-row {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* =========================================
   SERVICES
========================================= */

.ln-services {
  --service-dark: #25595f;
  --service-light: #d4f1ec;
  --service-heading: #0e2225;
  --service-light-text: #dce9ea;
  --service-muted: #5d787b;

  padding-block: clamp(48px, 5vw, 80px);

  overflow-x: clip;

  scroll-margin-top: 24px;
}

.ln-services-title {
  margin: 0 0 clamp(28px, 3.5vw, 52px);

  color: var(--service-heading);

  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;

  text-align: center;
}

/* Card list */

.ln-services-list {
  display: grid;
  gap: clamp(24px, 2.5vw, 36px);
}

/* Stable wrappers for viewport observation */

.ln-service-slot {
  min-width: 0;
}

/* Card layout */

.ln-service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr);
  grid-template-areas: "content image";
  align-items: start;

  column-gap: 6.5%;

  padding: clamp(24px, 2.65vw, 38px) clamp(24px, 3.1vw, 44px);

  color: #ffffff;
  background-color: var(--service-dark);

  border-radius: clamp(28px, 4vw, 56px);
}

/* Text */

.ln-service-content {
  grid-area: content;
  min-width: 0;

  padding-top: clamp(20px, 4.3vw, 62px);
}

.ln-service-content h3 {
  margin: 0;

  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;

  overflow-wrap: break-word;
}

.ln-service-content p {
  margin: 24px 0 0;

  color: var(--service-light-text);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

/* Image */

.ln-service-image {
  grid-area: image;
  min-width: 0;

  margin: 0;

  aspect-ratio: 562 / 436;

  overflow: hidden;
  border-radius: clamp(20px, 2vw, 30px);
}

.ln-service-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Reversed light card */

.ln-service-card--light {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.23fr);
  grid-template-areas: "image content";

  color: var(--service-heading);
  background-color: var(--service-light);
}

.ln-service-card--light .ln-service-content p {
  color: var(--service-muted);
}

/* Animation is enabled only after JavaScript initializes. */

.ln-services.motion-ready .ln-service-card {
  opacity: 0;
}

.ln-services.motion-ready .ln-service-card.is-visible {
  opacity: 1;
}

/* Tablet */

@media (max-width: 1000px) {
  .ln-service-card,
  .ln-service-card--light {
    column-gap: 32px;

    padding: 28px;
    border-radius: 32px;
  }

  .ln-service-content {
    padding-top: 8px;
  }

  .ln-service-content h3 {
    font-size: 26px;
  }

  .ln-service-content p {
    margin-top: 18px;

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

/* Stacked layout */

@media (max-width: 760px) {
  .ln-service-card,
  .ln-service-card--light {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "content"
      "image";

    gap: 28px;
  }

  .ln-service-content {
    padding-top: 0;
  }

  .ln-service-content h3 {
    font-size: clamp(24px, 4.5vw, 32px);
  }

  .ln-service-image {
    width: 100%;
    aspect-ratio: 562 / 436;
  }
}

/* Small mobile */

@media (max-width: 480px) {
  .ln-services {
    padding-block: 40px;
  }

  .ln-services-title {
    margin-bottom: 28px;
    font-size: 34px;
  }

  .ln-services-list {
    gap: 20px;
  }

  .ln-service-card,
  .ln-service-card--light {
    gap: 24px;

    padding: 24px 20px;
    border-radius: 28px;
  }

  .ln-service-content h3 {
    font-size: 24px;
    line-height: 1.25;
  }

  .ln-service-content p {
    margin-top: 16px;

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

  .ln-service-image {
    border-radius: 20px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ln-services.motion-ready .ln-service-card {
    opacity: 1;
    transform: none;
  }
}

/* =========================================
   PROJECTS
========================================= */

.ln-projects {
  --projects-text: #0e2225;
  --projects-muted: #657579;
  --projects-accent: #49c7b0;

  --projects-gap: clamp(16px, 1.3vw, 24px);
  --projects-radius: clamp(28px, 3.3vw, 64px);
  --projects-padding: clamp(22px, 2.6vw, 50px);
  --projects-motion-distance: clamp(50px, 6vw, 110px);

  padding-block: clamp(56px, 5vw, 96px);

  color: var(--projects-text);

  scroll-margin-top: 24px;
}

/* Header */

.ln-projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
  margin-bottom: clamp(48px, 5vw, 96px);
}

.ln-projects-header h2 {
  margin: 0;

  font-size: clamp(34px, 3.35vw, 64px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.ln-projects-all {
  display: inline-flex;
  align-items: center;

  min-height: 44px;

  color: var(--projects-accent);

  font-size: clamp(18px, 1.7vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.ln-projects-all[href]:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.ln-projects-all[aria-disabled="true"] {
  cursor: default;
}

/* Four columns */

.ln-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;

  gap: var(--projects-gap);
}

/* Two equal cards in each column */

.ln-projects-column {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: var(--projects-gap);
  min-width: 0;
}

/* Shared card dimensions */

.ln-project-card {
  min-width: 0;

  margin: 0;

  aspect-ratio: 380 / 550;

  overflow: hidden;
  border-radius: var(--projects-radius);
}

/* Text cards */

.ln-project-card--text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  gap: 36px;
  padding: var(--projects-padding);

  background-color: #ffffff;

  box-shadow:
    0 4px 10px rgb(14 34 37 / 9%),
    0 1px 4px rgb(14 34 37 / 4%);
}

.ln-project-card--text h3 {
  margin: 0;

  font-size: clamp(20px, 1.65vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;

  overflow-wrap: break-word;
}

.ln-project-card--text p {
  margin: 0;

  color: var(--projects-muted);

  font-size: clamp(15px, 1.08vw, 21px);
  font-weight: 400;
  line-height: 1.5;

  overflow-wrap: break-word;
}

/* Full artwork cards */

.ln-project-card--art {
  position: relative;
}

.ln-project-card--art img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Movement directions */

.ln-projects-column[data-motion="up"] {
  --column-start-y: var(--projects-motion-distance);
}

.ln-projects-column[data-motion="down"] {
  --column-start-y: calc(-1 * var(--projects-motion-distance));
}

/*
 * JavaScript adds motion-ready only when animation
 * is supported and reduced motion is not requested.
 */

.ln-projects.motion-ready .ln-projects-column {
  transform: translateY(var(--column-start-y));
}

.ln-projects.motion-ready.is-revealing .ln-projects-column {
  animation: ln-project-column-align 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ln-project-column-align {
  from {
    transform: translateY(var(--column-start-y));
  }

  to {
    transform: translateY(0);
  }
}

/* Tablet */

@media (max-width: 1100px) {
  .ln-projects {
    --projects-radius: 36px;
    --projects-padding: 30px;
    --projects-gap: 24px;
    --projects-motion-distance: 60px;
  }

  .ln-projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  .ln-project-card--text h3 {
    font-size: clamp(23px, 2.8vw, 30px);
  }

  .ln-project-card--text p {
    font-size: clamp(16px, 1.8vw, 19px);
  }
}

/* Mobile */

@media (max-width: 600px) {
  .ln-projects {
    --projects-padding: 22px;
    --projects-radius: 28px;
    --projects-gap: 16px;
    --projects-motion-distance: 36px;

    padding-block: 48px;
  }

  .ln-projects-header {
    margin-bottom: 48px;
  }

  .ln-projects-header h2 {
    font-size: 34px;
  }

  .ln-projects-all {
    font-size: 18px;
  }

  .ln-project-card--text {
    gap: 28px;
  }

  .ln-project-card--text h3 {
    font-size: 21px;
  }

  .ln-project-card--text p {
    font-size: 15px;
  }
}

/* Small mobile */

@media (max-width: 480px) {
  .ln-projects {
    --projects-padding: 30px;
    --projects-radius: 36px;
  }

  .ln-projects-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .ln-project-card--text h3 {
    font-size: 28px;
  }

  .ln-project-card--text p {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ln-projects.motion-ready .ln-projects-column {
    transform: none;
    animation: none;
  }
}
/* =========================================
   TEAM EXPERTISE
========================================= */

.ln-expertise {
  --expertise-card-bg: #25595f;
  --expertise-heading: #0e2225;
  --expertise-number: #d4f1ec;
  --expertise-gap: clamp(20px, 1.7vw, 34px);
  --expertise-radius: clamp(32px, 3.5vw, 70px);
  --expertise-distance: clamp(80px, 14vw, 260px);

  padding-block: clamp(48px, 5vw, 100px);

  overflow-x: clip;

  scroll-margin-top: 24px;
}

/* Section heading */

.ln-expertise-title {
  margin: 0 0 clamp(36px, 3vw, 60px);

  color: var(--expertise-heading);

  font-size: clamp(32px, 3.35vw, 68px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

/* Rows */

.ln-expertise-rows {
  display: grid;
  gap: clamp(28px, 2.5vw, 50px);
}

.ln-expertise-row-wrap {
  min-width: 0;
}

.ln-expertise-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--expertise-gap);
  min-width: 0;
}

/* Cards */

.ln-expertise-card {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;

  column-gap: clamp(20px, 2vw, 40px);
  row-gap: clamp(28px, 2vw, 40px);

  min-width: 0;
  min-height: clamp(320px, 18.3vw, 375px);

  padding: clamp(30px, 2.65vw, 54px);

  overflow: hidden;

  color: #ffffff;
  background-color: var(--expertise-card-bg);

  border-radius: var(--expertise-radius);

  box-shadow: 0 7px 18px rgb(14 34 37 / 12%);
}

/* Card heading */

.ln-expertise-card h3 {
  position: relative;
  z-index: 1;

  grid-column: 1 / -1;

  margin: 0;

  font-size: clamp(21px, 1.6vw, 33px);
  font-weight: 700;
  line-height: 1.2;
}

/* Description: right side in the first row */

.ln-expertise-card p {
  position: relative;
  z-index: 1;

  grid-column: 2;
  grid-row: 2;
  align-self: center;

  margin: 0;

  font-size: clamp(16px, 1.08vw, 22px);
  font-weight: 400;
  line-height: 1.48;

  overflow-wrap: break-word;
}

/* Large decorative number */

.ln-expertise-number {
  position: absolute;
  z-index: 0;

  left: 4%;
  bottom: -0.17em;

  color: var(--expertise-number);

  font-size: clamp(160px, 16vw, 330px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.07em;

  background: linear-gradient(
    to bottom,
    #d4f1ec 25%,
    rgb(212 241 236 / 65%) 65%,
    rgb(212 241 236 / 12%) 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  pointer-events: none;
  user-select: none;
}

/* Second row: mirrored content layout */

.ln-expertise-row--reverse .ln-expertise-card h3 {
  text-align: right;
}

.ln-expertise-row--reverse .ln-expertise-card p {
  grid-column: 1;
}

.ln-expertise-row--reverse .ln-expertise-number {
  left: auto;
  right: 5%;
}

/* Entrance directions */

.ln-expertise-row[data-entry="right"] {
  --row-start-x: var(--expertise-distance);
}

.ln-expertise-row[data-entry="left"] {
  --row-start-x: calc(-1 * var(--expertise-distance));
}

/* Content stays visible if JavaScript is unavailable. */

.ln-expertise.motion-ready .ln-expertise-row {
  opacity: 0;
}

.ln-expertise.motion-ready .ln-expertise-row.is-revealing {
  animation: ln-expertise-row-enter 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ln-expertise-row-enter {
  from {
    opacity: 0;
    transform: translateX(var(--row-start-x));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tablet: one card per line inside each row group */

@media (max-width: 1100px) {
  .ln-expertise {
    --expertise-radius: 40px;
    --expertise-distance: 90px;
  }

  .ln-expertise-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ln-expertise-rows {
    gap: 24px;
  }

  .ln-expertise-card {
    min-height: 320px;
    padding: 36px;

    column-gap: 36px;
    row-gap: 32px;
  }

  .ln-expertise-card h3 {
    font-size: 28px;
  }

  .ln-expertise-card p {
    font-size: 19px;
    line-height: 1.6;
  }

  .ln-expertise-number {
    font-size: clamp(210px, 31vw, 300px);
  }
}

/* Mobile */

@media (max-width: 600px) {
  .ln-expertise {
    --expertise-radius: 30px;
    --expertise-distance: 48px;

    padding-block: 48px;
  }

  .ln-expertise-title {
    margin-bottom: 32px;
    font-size: clamp(30px, 7vw, 40px);
  }

  .ln-expertise-card {
    min-height: 300px;
    padding: 28px 24px;

    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);

    column-gap: 16px;
    row-gap: 28px;
  }

  .ln-expertise-card h3 {
    font-size: 23px;
  }

  .ln-expertise-card p {
    font-size: 16px;
    line-height: 1.6;
  }

  .ln-expertise-number {
    left: 3%;
    font-size: clamp(120px, 30vw, 180px);
  }

  .ln-expertise-row--reverse .ln-expertise-card {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }

  .ln-expertise-row--reverse .ln-expertise-number {
    right: 4%;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ln-expertise.motion-ready .ln-expertise-row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =========================================
   TECHNOLOGIES
========================================= */

.ln-technologies {
  --tech-columns: 6;
  --tech-column-gap: clamp(24px, 3.8vw, 78px);
  --tech-row-gap: clamp(24px, 1.85vw, 38px);
  --tech-drop-distance: 30px;

  padding-block: clamp(48px, 4vw, 80px);

  color: #0e2225;

  scroll-margin-top: 24px;
}

/* Heading */

.ln-technologies-title {
  margin: 0 0 clamp(48px, 3.4vw, 70px);

  font-size: clamp(34px, 3.35vw, 68px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;

  text-align: center;
}

/* Stationary animation trigger */

.ln-technologies-stage {
  width: 90%;
  margin-inline: auto;
}

/* Card layout */

.ln-technologies-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;

  column-gap: var(--tech-column-gap);
  row-gap: var(--tech-row-gap);

  margin: 0;
  padding: 0;

  list-style: none;
}

/* Equal square cards */

.ln-tech-card {
  position: relative;

  flex: 0 0
    calc(
      (100% - (var(--tech-columns) - 1) * var(--tech-column-gap)) /
        var(--tech-columns)
    );

  min-width: 0;
  aspect-ratio: 1;

  background-color: #ffffff;

  border-radius: clamp(14px, 0.9vw, 19px);

  box-shadow:
    0 6px 14px rgb(14 34 37 / 10%),
    0 1px 5px rgb(14 34 37 / 4%);
}

/* Logos */

.ln-tech-card img {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;
  padding: 16%;

  object-fit: contain;
}

/* Give horizontal wordmarks more space. */

.ln-tech-card:nth-child(1) img,
.ln-tech-card:nth-child(11) img,
.ln-tech-card:nth-child(17) img {
  padding: 9%;
}

/* Entrance: all cards move together */

.ln-technologies.motion-ready .ln-technologies-grid {
  transform: translateY(calc(-1 * var(--tech-drop-distance)));
}

.ln-technologies.motion-ready.is-revealing .ln-technologies-grid {
  animation: ln-technologies-drop 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ln-technologies-drop {
  from {
    transform: translateY(calc(-1 * var(--tech-drop-distance)));
  }

  to {
    transform: translateY(0);
  }
}

/* Tablet: four columns */

@media (max-width: 1100px) {
  .ln-technologies {
    --tech-columns: 4;
    --tech-column-gap: 28px;
    --tech-row-gap: 28px;
  }

  .ln-technologies-stage {
    width: 100%;
  }
}

/* Mobile: three columns */

@media (max-width: 700px) {
  .ln-technologies {
    --tech-columns: 3;
    --tech-column-gap: 20px;
    --tech-row-gap: 20px;
    --tech-drop-distance: 22px;

    padding-block: 48px;
  }

  .ln-technologies-title {
    margin-bottom: 44px;
    font-size: clamp(32px, 7vw, 42px);
  }
}

/* Small mobile: two columns */

@media (max-width: 400px) {
  .ln-technologies {
    --tech-columns: 2;
    --tech-column-gap: 18px;
    --tech-row-gap: 18px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ln-technologies.motion-ready .ln-technologies-grid {
    transform: none;
    animation: none;
  }
}
/* =========================================
   FOOTER
========================================= */

.ln-footer {
  --footer-light: #d4f1ec;
  --footer-dark: #25595f;
  --footer-radius: clamp(30px, 3.4vw, 64px);
  --footer-padding: clamp(28px, 2.5vw, 48px);

  padding-block: 40px clamp(32px, 4vw, 72px);

  scroll-margin-top: 24px;
}

/* Main panel */

.ln-footer-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.415fr) minmax(0, 0.585fr);

  min-height: clamp(360px, 27vw, 520px);

  background-color: var(--footer-light);
  border-radius: var(--footer-radius);
}

/* Left side */

.ln-footer-brand {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: var(--footer-padding);

  color: var(--footer-dark);
}

/* Logo */

.ln-footer-logo {
  display: block;

  width: clamp(150px, 13vw, 245px);
  max-width: 100%;
}

.ln-footer-logo img {
  display: block;

  width: 100%;
  height: auto;
}

/* Navigation */

.ln-footer-navigation {
  margin-top: clamp(24px, 2vw, 38px);
}

.ln-footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;

  column-gap: 16px;
  row-gap: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

/* Third column begins with All Projects. */

.ln-footer-links li:last-child {
  grid-column: 3;
  grid-row: 1;
}

.ln-footer-links a {
  display: inline-flex;
  align-items: center;

  min-height: 36px;

  color: inherit;

  font-size: clamp(13px, 0.95vw, 17px);
  line-height: 1.5;
  text-decoration: none;
}

.ln-footer-links a[href]:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ln-footer-links a[aria-disabled="true"] {
  cursor: default;
}

/* Copyright */

.ln-footer-copyright {
  margin: auto 0 0;
  padding-top: 48px;

  font-size: clamp(11px, 0.75vw, 14px);
  line-height: 1.6;
}

/* Right side */

.ln-footer-contact {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: var(--footer-padding);

  color: #ffffff;
  background-color: var(--footer-dark);

  border-radius: var(--footer-radius);
}

/* Company description */

.ln-footer-about h2 {
  margin: 0;

  font-size: clamp(16px, 1.2vw, 23px);
  font-weight: 700;
  line-height: 1.4;
}

.ln-footer-about p {
  max-width: 600px;
  margin: 20px 0 0;

  color: #e0eeee;

  font-size: clamp(13px, 0.95vw, 17px);
  line-height: 1.7;
}

/* Contact details */

.ln-footer-address {
  display: grid;
  gap: 20px;

  width: 56%;
  max-width: 430px;

  margin-top: 28px;

  font-style: normal;
}

.ln-footer-contact-item {
  min-width: 0;
}

.ln-footer-contact-label {
  display: block;

  padding-bottom: 8px;

  color: #e0eeee;
  border-bottom: 1px solid rgb(212 241 236 / 55%);

  font-size: clamp(13px, 0.95vw, 17px);
  line-height: 1.5;
}

.ln-footer-contact-item a {
  display: inline-flex;
  align-items: center;

  min-height: 36px;
  margin-top: 4px;

  color: #ffffff;

  font-size: clamp(13px, 0.95vw, 17px);
  line-height: 1.5;
  text-decoration: none;

  overflow-wrap: anywhere;
}

.ln-footer-contact-item a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Social links */

.ln-footer-social {
  align-self: flex-end;

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

.ln-footer-social h3 {
  margin: 0;

  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 700;
  line-height: 1.4;
}

.ln-footer-social-list {
  display: flex;
  align-items: center;

  gap: 4px;

  margin: 4px 0 0;
  padding: 0;

  list-style: none;
}

.ln-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  color: #ffffff;
  border-radius: 6px;
}

.ln-footer-social-link svg {
  display: block;

  width: 20px;
  height: 20px;

  fill: currentColor;
}

.ln-footer-social-link[href]:hover {
  background-color: rgb(255 255 255 / 12%);
}

.ln-footer-social-link[aria-disabled="true"] {
  cursor: default;
}

/* Keyboard focus */

.ln-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Tablet */

@media (max-width: 1000px) {
  .ln-footer {
    --footer-padding: 28px;
    --footer-radius: 32px;
  }

  .ln-footer-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ln-footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  .ln-footer-links li:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .ln-footer-address {
    width: 100%;
  }
}

/* Mobile */

@media (max-width: 700px) {
  .ln-footer {
    padding-block: 24px 32px;
  }

  .ln-footer-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .ln-footer-brand,
  .ln-footer-contact {
    padding: 32px 28px;
  }

  .ln-footer-logo {
    width: 180px;
  }

  .ln-footer-links {
    column-gap: 24px;
  }

  .ln-footer-links a {
    min-height: 44px;
    font-size: 15px;
  }

  .ln-footer-copyright {
    padding-top: 32px;
    font-size: 12px;
  }

  .ln-footer-contact {
    min-height: 380px;
  }

  .ln-footer-about h2 {
    font-size: 19px;
  }

  .ln-footer-about p {
    margin-top: 14px;
    font-size: 14px;
  }

  .ln-footer-contact-label,
  .ln-footer-contact-item a {
    font-size: 14px;
  }

  .ln-footer-contact-item a {
    min-height: 44px;
  }

  .ln-footer-social h3 {
    font-size: 17px;
  }

  .ln-footer-social-link {
    width: 44px;
    height: 44px;
  }
}
/* Social icons hover effect */

.ln-footer-social-link {
  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Override the previous disabled cursor rule. */

.ln-footer-social-link[aria-disabled="true"] {
  cursor: pointer;
}

@media (hover: hover) {
  .ln-footer-social-link:hover {
    color: #d4f1ec;
    background-color: rgb(255 255 255 / 12%);

    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-footer-social-link {
    transition: none;
  }

  .ln-footer-social-link:hover {
    transform: none;
  }
}

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