@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Thin-Italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Light-Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Medium-Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Bold-Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-ExtraBold-Italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Black-Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective Super";
  src: url("assets/fonts/objective/Objective-Super.otf") format("opentype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective Super";
  src: url("assets/fonts/objective/Objective-Super-Italic.otf") format("opentype");
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Super.otf") format("opentype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Objective";
  src: url("assets/fonts/objective/Objective-Super-Italic.otf") format("opentype");
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

:root {
  --pink: #e7004c;
  --font-objective: "Objective", Arial, sans-serif;
  --font-objective-super: "Objective Super", "Objective", Arial, sans-serif;
  --font-space-grotesk: "Space Grotesk", Arial, sans-serif;
  --light-hero: #e9eaea;
  --light-page: #f5f6f6;
  --dark-hero: #171923;
  --dark-page: #1c1f2a;
  --footer: #323e48;
  --text: #1c1f2a;
  --text-soft: #5f6972;
  --muted: #cfd2d4;
  --line: rgba(96, 105, 113, 0.18);
  --case-card: #fafafa;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--light-page);
  color: var(--text);
  font-family: var(--font-objective);
  font-synthesis: none;
  letter-spacing: 0;
}

body.theme-dark {
  background: var(--dark-page);
  color: #d5d7d8;
  --text: #d5d7d8;
  --text-soft: #aeb3b7;
  --muted: #414652;
  --line: rgba(184, 190, 196, 0.1);
  --case-card: #1c1f2a;
}

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

button,
input,
textarea {
  font: inherit;
}

.site-shell {
  width: 100%;
  margin: 0 auto;
  overflow-x: visible;
  overflow-y: visible;
  background: var(--light-page);
}

body.theme-dark .site-shell {
  background: var(--dark-page);
}

.content {
  width: min(75vw, 1440px);
  margin: 0 auto;
}

.site-header {
  position: relative;
  z-index: 3;
  min-height: clamp(88px, 7.374vw, 146px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: clamp(28px, 3.333vw, 64px);
  padding: 0 clamp(28px, 6.65vw, 132px);
  background: var(--light-hero);
  border-bottom: 1px solid var(--line);
}

body.theme-dark .site-header {
  background: var(--dark-hero);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
}

.brand-logo {
  display: block;
  width: clamp(170px, 13.1vw, 252px);
  height: auto;
  object-fit: contain;
}

.brand-logo-dark {
  display: none;
}

body.theme-dark .brand-logo-light {
  display: none;
}

body.theme-dark .brand-logo-dark {
  display: block;
  /* The supplied logo includes a black canvas; screen blending lets that
     canvas disappear into the charcoal header while preserving the mark. */
  mix-blend-mode: screen;
  transform: translateY(-20%);
}

.main-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.3vw, 64px);
  color: #171b25;
  font-size: clamp(13px, 1.042vw, 20px);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}

.mobile-nav-toggle {
  display: none;
}

body.theme-dark .main-nav {
  color: #f2f2f2;
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(42px, 2.708vw, 52px);
  height: clamp(42px, 2.708vw, 52px);
  padding: 0;
  border: 1px solid #171b25;
  border-radius: 50%;
  color: #fff;
  background: #171b25;
  box-shadow: 0 8px 24px rgb(23 27 37 / 14%);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

body.theme-dark .theme-toggle {
  color: #0a0b0b;
  background: #f4f4f4;
  border-color: #f4f4f4;
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

.theme-toggle:hover {
  color: #fff;
  background: #252a37;
  border-color: #252a37;
  box-shadow: 0 10px 28px rgb(23 27 37 / 20%);
  transform: translateY(-2px) scale(1.03);
}

body.theme-dark .theme-toggle:hover {
  color: #0a0b0b;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 28px rgb(0 0 0 / 32%);
}

.theme-toggle:active {
  transform: translateY(0) scale(0.94);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

.theme-icon {
  position: relative;
  display: block;
  width: clamp(20px, 1.25vw, 24px);
  height: clamp(20px, 1.25vw, 24px);
}

.theme-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 180ms ease, transform 240ms ease;
}

.theme-icon-sun {
  opacity: 0;
  transform: rotate(-45deg) scale(0.65);
}

.theme-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.theme-dark .theme-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

body.theme-dark .theme-icon-moon {
  opacity: 0;
  transform: rotate(45deg) scale(0.65);
}

.hero-section {
  position: relative;
  height: clamp(500px, 48.958vw, 940px);
  background: var(--light-hero);
  border-bottom: 1px solid var(--line);
}

body.theme-dark .hero-section {
  background: var(--dark-hero);
}

.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: var(--light-hero);
}

body.theme-dark .hero-visual {
  background: var(--dark-hero);
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 12.5% repeat(4, 18.75%) 12.5%;
  grid-template-rows: 7.5% 83% 9.5%;
  pointer-events: none;
}

.hero-grid-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

.hero-grid-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow:
    inset -1px 0 var(--line),
    inset 0 -1px var(--line);
  pointer-events: none;
}

.hero-grid-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 246, 246, 0.94);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;

  /* Leaving a cell holds its clear state briefly, then dissolves gently. */
  transition:
    background-color 2100ms cubic-bezier(0.22, 1, 0.36, 1) 650ms,
    opacity 2100ms cubic-bezier(0.22, 1, 0.36, 1) 650ms;
}

.hero-grid-cell:hover::after,
.hero-grid-cell.hero-cell-active::after {
  background-color: var(--hero-hover-tint, rgba(239, 0, 91, 0.18));
  opacity: 1;
  transition: background-color 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-grid-cell:nth-child(6n + 1) { --hero-hover-tint: rgba(239, 0, 91, 0.15); }
.hero-grid-cell:nth-child(6n + 2) { --hero-hover-tint: rgba(218, 15, 98, 0.2); }
.hero-grid-cell:nth-child(6n + 3) { --hero-hover-tint: rgba(255, 63, 128, 0.16); }
.hero-grid-cell:nth-child(6n + 4) { --hero-hover-tint: rgba(195, 10, 76, 0.18); }
.hero-grid-cell:nth-child(6n + 5) { --hero-hover-tint: rgba(241, 48, 119, 0.21); }
.hero-grid-cell:nth-child(6n) { --hero-hover-tint: rgba(230, 0, 84, 0.17); }

body.theme-dark .hero-grid-cell::after {
  background-color: rgba(23, 25, 35, 0.96);
}

body.theme-dark .hero-grid-cell:hover::after,
body.theme-dark .hero-grid-cell.hero-cell-active::after {
  background-color: var(--hero-hover-tint, rgba(239, 0, 91, 0.2));
}

/* The dark hero uses softened plum and rose shades rather than red over black. */
body.theme-dark .hero-grid-cell:nth-child(6n + 1) { --hero-hover-tint: rgba(72, 39, 57, 0.96); }
body.theme-dark .hero-grid-cell:nth-child(6n + 2) { --hero-hover-tint: rgba(86, 43, 64, 0.96); }
body.theme-dark .hero-grid-cell:nth-child(6n + 3) { --hero-hover-tint: rgba(68, 39, 66, 0.96); }
body.theme-dark .hero-grid-cell:nth-child(6n + 4) { --hero-hover-tint: rgba(91, 46, 65, 0.96); }
body.theme-dark .hero-grid-cell:nth-child(6n + 5) { --hero-hover-tint: rgba(77, 42, 60, 0.96); }
body.theme-dark .hero-grid-cell:nth-child(6n) { --hero-hover-tint: rgba(63, 38, 61, 0.96); }

@media (hover: none) {
  .hero-grid-cell::after {
    background-color: rgba(245, 246, 246, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid-cell::after {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }
}

.hero-content {
  position: relative;
  z-index: 5;
  padding-top: clamp(92px, 10.677vw, 205px);
  pointer-events: none;
}

/* On desktop the header and hero are one screen.  Use the actual visible
   viewport, rather than preserving a minimum design canvas that can push the
   bottom of the hero below shorter laptop windows. */
@media (min-width: 1280px) {
  .hero-section {
    --hero-header-height: clamp(88px, 7.374vw, 146px);
    --hero-base-padding-top: clamp(92px, 10.677vw, 205px);
    height: calc(100svh - var(--hero-header-height));
    min-height: 0;
  }

  .hero-grid {
    grid-template-rows: 7.5% 83% 9.5%;
  }

  .hero-content {
    padding-top: var(--hero-base-padding-top);
  }
}

.hero-content .primary-button {
  pointer-events: auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.625vw, 12px);
  margin: 0 0 clamp(36px, 3.854vw, 74px);
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

.eyebrow span {
  width: clamp(40px, 4.167vw, 80px);
  height: 2px;
  background: currentColor;
}

.eyebrow em {
  font-style: inherit;
}

.hero-content h1 {
  max-width: 100%;
  margin: 0;
  color: #1c1f2a;
  font-family: var(--font-objective);
  font-size: clamp(54px, 6.95vw, 134px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}

body.theme-dark .hero-content h1 {
  color: #d5d7d8;
}

.hero-title__line {
  display: block;
}

.hero-title__line--one {
  display: flex;
  align-items: baseline;
  /* Matches the original natural spacing around the highlighted word. */
  gap: 0.29em;
  white-space: nowrap;
}

.hero-title__word-slot {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  /* Clip animated letters without changing this inline element's baseline. */
  overflow: visible;
  clip-path: inset(0);
  vertical-align: baseline;
  will-change: width;
}

/* Provides the same text baseline as the neighbouring words. */
.hero-title__word-slot::before {
  content: "M";
  display: inline-block;
  width: 0;
  overflow: visible;
  visibility: hidden;
}

.hero-title__word {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pink);
  font-weight: 700;
  line-height: inherit;
  white-space: nowrap;
  will-change: transform, opacity;
}

.hero-title__word--measure {
  visibility: hidden;
  pointer-events: none;
}

.hero-title__word--current {
  opacity: 1;
}

.primary-button {
  display: inline-grid;
  place-items: center;
  min-width: clamp(160px, 11.979vw, 230px);
  height: clamp(56px, 4.219vw, 81px);
  margin-top: clamp(58px, 5.417vw, 104px);
  padding: 0 clamp(28px, 2.083vw, 40px);
  background: var(--pink);
  color: #fff;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  text-transform: uppercase;
}

.intro-section {
  /* Give the intro its own calm pause after the hero before the rule appears. */
  padding: clamp(250px, 6.25vw, 130px) 0 clamp(60px, 3.958vw, 76px);
  background: var(--light-page);
}

#about,
#contact {
  scroll-margin-top: -150px;
}

body.theme-dark .intro-section,
body.theme-dark .services-section,
body.theme-dark .clients-section,
body.theme-dark .vision-section,
body.theme-dark .stats-section {
  background: var(--dark-page);
}

.section-rule {
  display: flex;
  align-items: center;
  gap: clamp(22px, 1.458vw, 28px);
  margin-bottom: clamp(40px, 3.229vw, 62px);
}

.section-rule::before {
  content: "";
  width: clamp(30px, 2.083vw, 40px);
  height: clamp(30px, 2.083vw, 40px);
  background: var(--pink);
  transform: rotate(45deg);
}

.section-rule span {
  width: min(100%, 1360px);
  height: 2px;
  background: var(--pink);
}

.intro-copy {
  max-width: min(100%, 52ch);
  margin: 0;
  color: inherit;
  font-family: var(--font-objective);
  font-size: clamp(32px, 3.15vw, 64px);
  line-height: 1.24;
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
}

body.theme-dark .intro-copy {
  color: inherit;
}

.intro-copy__accent {
  color: var(--pink);
}

.scroll-selection-wrap {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
}

.scroll-selection {
  --selection-progress: 0;
  --selection-accent: var(--pink, currentColor);
  --selection-final-width: 103%;
  position: relative;
  display: inline-block;
  max-width: 100%;
  color: inherit;
  white-space: nowrap;
}

.scroll-selection__text {
  position: relative;
  z-index: 2;
  color: inherit;
}

.scroll-selection__range {
  position: absolute;
  top: 10%;
  left: -1%;
  z-index: 1;
  width: calc(var(--selection-progress) * var(--selection-final-width));
  height: 100%;
  color: var(--selection-accent);
  opacity: 0;
  pointer-events: none;
  will-change: width;
}

.scroll-selection.is-selecting .scroll-selection__range {
  opacity: 1;
}

.scroll-selection__fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.14;
}

@supports (background: color-mix(in srgb, currentColor 14%, transparent)) {
  .scroll-selection__fill {
    background: color-mix(in srgb, currentColor 14%, transparent);
    opacity: 1;
  }
}

body.theme-dark .scroll-selection__fill {
  mix-blend-mode: plus-lighter;
}

.scroll-selection__boundary {
  position: absolute;
  top: -0.125em;
  width: 0.155em;
  height: calc(100% + 0.1275em);
}

.scroll-selection__boundary::after {
  content: "";
  position: absolute;
  top: 0.0775em;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: currentColor;
  transform: translateX(-50%);
}

.scroll-selection__boundary--left {
  left: -0.075em;
}

.scroll-selection__boundary--right {
  top: auto;
  right: -0.075em;
  bottom: -0.125em;
}

.scroll-selection__boundary--right::after {
  top: 0;
  bottom: 0.0775em;
}

.scroll-selection__handle {
  position: absolute;
  left: 50%;
  width: 0.155em;
  height: 0.155em;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.scroll-selection__boundary--left .scroll-selection__handle {
  top: 0;
}

.scroll-selection__boundary--right .scroll-selection__handle {
  bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-selection {
    --selection-progress: 1 !important;
  }

  .scroll-selection__range {
    width: var(--selection-final-width);
    opacity: 1;
    will-change: auto;
  }
}

.services-section {
  position: relative;
  --service-grid-height: clamp(360px, 22.07vw, 424px);
  padding: 0 0 clamp(120px, 11.458vw, 220px);
  background: var(--light-page);
}

.service-side-cell,
.service-what-panel {
  position: absolute;
  overflow: hidden;
  background: transparent;
}

.service-side-cell {
  top: 0;
  width: calc((100% - min(75vw, 1440px)) / 2);
  height: var(--service-grid-height);
  z-index: 0;
}

.service-side-cell--left {
  left: 0;
  border-left: 1px solid var(--line);
}

.service-side-cell--right {
  right: 0;
  border-right: 1px solid var(--line);
}

.service-side-cell::after,
.service-what-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #e9eaea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2100ms cubic-bezier(0.22, 1, 0.36, 1) 650ms;
}

.service-side-cell:hover::after,
.service-what-panel:hover::after {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-dark .service-side-cell::after,
body.theme-dark .service-what-panel::after {
  background: #3a4048;
}

.service-layout {
  position: relative;
  display: grid;
  grid-template-columns: 33.333% 1fr;
  min-height: var(--service-grid-height);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.service-layout::before,
.service-layout::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 100vw;
  height: 1px;
  background: var(--line);
  transform: translateX(-50%);
  pointer-events: none;
}

.service-layout::before {
  top: 0;
}

.service-layout::after {
  bottom: 0;
}

.ghost-title {
  margin: 0;
  color: rgba(96, 105, 113, 0.16);
  font-family: var(--font-objective);
  font-size: clamp(92px, 7.5vw, 144px);
  line-height: 1.18;
  font-weight: 800;
  text-transform: uppercase;
  transition: color 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.services-section .ghost-title {
  font-family: var(--font-space-grotesk);
  font-size: clamp(82px, 6.25vw, 120px);
  font-weight: 700;
  white-space: nowrap;
}

.ghost-title:hover {
  color: var(--pink);
}

body.theme-dark .ghost-title {
  color: rgba(174, 179, 183, 0.14);
}

body.theme-dark .ghost-title:hover {
  color: var(--pink);
}

.service-layout > .ghost-title {
  align-self: center;
  position: relative;
  z-index: 1;
  padding-left: clamp(0px, 2.604vw, 50px);
  pointer-events: none;
  /* Match the other section headings: text returns immediately while the
     panel background keeps its slower delayed fade. */
  transition: color 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-layout.service-what-active > .ghost-title,
.service-layout:has(.service-what-panel:hover) > .ghost-title {
  color: var(--pink);
  transition: color 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-what-panel {
  inset: 0 auto 0 0;
  width: 33.333%;
  z-index: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-left: 1px solid var(--line);
}

.services-grid article {
  position: relative;
  min-height: clamp(180px, 11.04vw, 212px);
  --service-card-padding: clamp(24px, 1.5vw, 30px);
  padding: var(--service-card-padding);
  background-color: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  outline: 0;
  overflow: hidden;
  transition: background-color 1100ms cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}

.services-grid article:nth-child(2n) {
  border-right: 0;
}

.services-grid article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.service-number {
  position: absolute;
  top: var(--service-card-padding);
  left: var(--service-card-padding);
  display: block;
  margin: 0;
  color: #64707a;
  font-family: var(--font-space-grotesk);
  font-size: clamp(13px, 0.833vw, 16px);
  font-weight: 700;
  writing-mode: vertical-rl;
  letter-spacing: 4px;
  transform: translateX(0);
  opacity: 1;
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 560ms ease;
}

.service-number::after {
  content: "";
  position: absolute;
  left: clamp(-1px, -0.052vw, 0px);
  top: calc(100% + clamp(10px, 0.729vw, 14px));
  width: clamp(20px, 1.146vw, 22px);
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.services-grid h3 {
  position: absolute;
  left: var(--service-card-padding);
  bottom: var(--service-card-padding);
  margin: 0;
  color: #5a626b;
  font-family: var(--font-space-grotesk);
  font-size: clamp(20px, 1.042vw, 22px);
  line-height: 1.45;
  font-weight: 700;
  opacity: 1;
  transform: translateX(0);
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 580ms ease;
}

body.theme-dark .services-grid h3,
body.theme-dark .service-number {
  color: #aeb3b7;
}

.service-hover-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(30px, 1.875vw, 36px);
  background: transparent;
  opacity: 1;
  transform: none;
  pointer-events: none;
}

body.theme-dark .service-hover-copy {
  background: transparent;
}

.service-hover-title {
  position: static;
  margin: 0;
  color: var(--pink);
  font-family: var(--font-space-grotesk);
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.2;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-64px);
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 560ms ease;
}

.service-hover-copy p:not(.service-hover-title) {
  position: static;
  max-width: 100%;
  margin: clamp(44px, 2.5vw, 48px) 0 0;
  color: #323e48;
  font-family: var(--font-space-grotesk);
  font-size: clamp(22px, 1.406vw, 27px);
  line-height: 1.25;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-76px);
  transition:
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 620ms ease;
}

body.theme-dark .service-hover-copy p:not(.service-hover-title) {
  color: #d5d7d8;
}

.services-grid article:hover .service-hover-copy,
.services-grid article:focus-visible .service-hover-copy,
.services-grid article.service-active .service-hover-copy {
  opacity: 1;
}

.services-grid article:hover .service-hover-title,
.services-grid article:focus-visible .service-hover-title,
.services-grid article.service-active .service-hover-title,
.services-grid article:hover .service-hover-copy p:not(.service-hover-title),
.services-grid article:focus-visible .service-hover-copy p:not(.service-hover-title),
.services-grid article.service-active .service-hover-copy p:not(.service-hover-title) {
  opacity: 1;
  transform: translateX(0);
}

.services-grid article:hover,
.services-grid article:focus-visible,
.services-grid article.service-active {
  background-color: #e9eaea;
}

body.theme-dark .services-grid article:hover,
body.theme-dark .services-grid article:focus-visible,
body.theme-dark .services-grid article.service-active {
  background-color: #252a33;
}

.services-grid article:hover h3,
.services-grid article:focus-visible h3,
.services-grid article.service-active h3 {
  opacity: 0;
  transform: translateX(120%);
  transition-duration: 820ms, 660ms;
}

.services-grid article:hover .service-number,
.services-grid article:focus-visible .service-number,
.services-grid article.service-active .service-number {
  opacity: 0;
  transform: translateX(1400%);
  transition-delay: 200ms, 280ms;
  transition-duration: 980ms, 680ms;
}

.services-grid article:hover .service-number::after,
.services-grid article:focus-visible .service-number::after,
.services-grid article.service-active .service-number::after {
  transform: translateX(300%) scaleX(4);
  transition-delay: 100ms;
  transition-duration: 980ms;
}

.services-grid article:hover .service-hover-title,
.services-grid article:focus-visible .service-hover-title,
.services-grid article.service-active .service-hover-title {
  transition-delay: 420ms;
  transition-duration: 850ms, 700ms;
}

.services-grid article:hover .service-hover-copy p:not(.service-hover-title),
.services-grid article:focus-visible .service-hover-copy p:not(.service-hover-title),
.services-grid article.service-active .service-hover-copy p:not(.service-hover-title) {
  transition-delay: 540ms;
  transition-duration: 920ms, 780ms;
}

@media (prefers-reduced-motion: reduce) {
  .services-grid article,
  .service-number,
  .service-number::after,
  .services-grid h3,
  .service-hover-title,
  .service-hover-copy p:not(.service-hover-title) {
    transition-duration: 140ms !important;
    transition-delay: 0ms !important;
  }
}

.clients-section {
  padding: 0;
  background: var(--light-page);
}

.clients-section .ghost-title {
  margin-bottom: clamp(40px, 4.167vw, 80px);
  font-family: var(--font-space-grotesk);
  font-weight: 700;
}

.client-marquee {
  --client-cell-width: clamp(250px, 18.75vw, 360px);
  --client-row-height: clamp(150px, 9.219vw, 177px);
  --client-edge-width: 12.5%;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.client-row {
  display: grid;
  grid-template-columns: var(--client-edge-width) minmax(0, 1fr) var(--client-edge-width);
  width: 100%;
}

.client-row-spacer {
  position: relative;
  height: var(--client-row-height);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.client-row-spacer:last-child {
  border-left: 1px solid var(--line);
}

.client-row-spacer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e9eaea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.client-row-spacer:hover::before {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.client-row-viewport {
  overflow: hidden;
}

.client-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.client-logo-cell {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 var(--client-cell-width);
  width: var(--client-cell-width);
  height: var(--client-row-height);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  outline: 0;
  overflow: hidden;
}

.client-logo-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e9eaea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.client-logo-cell:hover::before,
.client-logo-cell:focus-visible::before,
.client-logo-cell.client-active::before {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .client-track {
    transform: none !important;
  }

  .client-logo-cell::before {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }

  .client-row-spacer::before {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }

  .client-logo {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }
}

.client-logo {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: block;
  width: var(--logo-width, auto);
  max-width: var(--logo-max-width, 62%);
  height: auto;
  max-height: var(--logo-max-height, 66%);
  object-fit: contain;
  filter: grayscale(1) brightness(var(--logo-light-brightness, 0.9)) contrast(var(--logo-light-contrast, 0.94));
  opacity: var(--logo-light-opacity, 0.68);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.theme-dark .client-logo {
  filter: grayscale(1) brightness(var(--logo-dark-brightness, 1.12)) contrast(var(--logo-dark-contrast, 0.92));
  opacity: var(--logo-dark-opacity, 0.58);
}

.client-logo.client-logo--color,
body.theme-dark .client-logo.client-logo--color {
  filter: none;
  opacity: 0;
}

.client-logo-cell:hover .client-logo:not(.client-logo--color),
.client-logo-cell:focus-visible .client-logo:not(.client-logo--color),
.client-logo-cell.client-active .client-logo:not(.client-logo--color) {
  opacity: 0;
}

.client-logo-cell:hover .client-logo--color,
.client-logo-cell:focus-visible .client-logo--color,
.client-logo-cell.client-active .client-logo--color,
body.theme-dark .client-logo-cell:hover .client-logo--color,
body.theme-dark .client-logo-cell:focus-visible .client-logo--color,
body.theme-dark .client-logo-cell.client-active .client-logo--color {
  opacity: 1;
}

.client-logo-one {
  --logo-max-width: 53%;
}

.client-logo-livelife,
.client-logo-bbk,
.client-logo-raed {
  --logo-max-width: 58%;
  --logo-max-height: 68%;
}

.client-logo-refresh {
  --logo-max-width: 58%;
}

.client-logo-injaz,
.client-logo-diabetes {
  --logo-max-width: 44%;
  --logo-max-height: 74%;
}

.client-logo-injaz {
  --logo-max-width: 34%;
  --logo-max-height: 58%;
  transform: translateY(-2px);
}

.client-logo-calendar,
.client-logo-mnsaj,
.client-logo-tarteeb {
  --logo-max-width: 66%;
  --logo-max-height: 62%;
}

.client-logo-tarteeb-standard.client-logo--color {
  display: none;
}

.client-logo-tarteeb-dark-hover,
body.theme-dark .client-logo-tarteeb-dark-hover {
  filter: none;
  opacity: 0;
}

/* Reveal the supplied black-and-yellow Tarteeb logo only on interaction. */
.client-logo-cell:hover .client-logo-tarteeb-standard,
.client-logo-cell:focus-visible .client-logo-tarteeb-standard,
.client-logo-cell.client-active .client-logo-tarteeb-standard {
  opacity: 0 !important;
}

.client-logo-cell:hover .client-logo-tarteeb-dark-hover,
.client-logo-cell:focus-visible .client-logo-tarteeb-dark-hover,
.client-logo-cell.client-active .client-logo-tarteeb-dark-hover {
  opacity: 1 !important;
}

.client-logo-manama {
  --logo-max-width: 42%;
  --logo-max-height: 70%;
}

.client-logo-baity {
  --logo-max-width: 48%;
}

.client-logo-fazaa {
  --logo-max-width: 50%;
  --logo-max-height: 72%;
}

/* Newly supplied client marks: individual bounds preserve a shared visual
   weight despite the mix of square crests and wide horizontal logos. */
.client-logo-swd,
.client-logo-668 {
  --logo-max-width: 34%;
  --logo-max-height: 68%;
}

.client-logo-athlite {
  --logo-max-width: 68%;
  --logo-max-height: 42%;
}

.client-logo-marid,
.client-logo-sulb-new {
  --logo-max-width: 62%;
  --logo-max-height: 58%;
}

/* Jamaheer's supplied burgundy mark becomes too close to the dark page when
   desaturated. Raise only its resting brightness and opacity; hover still
   uses the untouched full-colour artwork. */
.client-logo-jamaheer {
  --logo-max-width: 62%;
  --logo-max-height: 58%;
  --logo-dark-brightness: 2.4;
  --logo-dark-contrast: 0.82;
  --logo-dark-opacity: 0.82;
}

.client-logo-southern-governorate {
  --logo-max-width: 48%;
  --logo-max-height: 72%;
}

.client-logo-basketball {
  --logo-max-width: 42%;
  --logo-max-height: 62%;
}

.client-logo-sept {
  --logo-max-width: 50%;
  --logo-max-height: 62%;
}

.client-logo-victorious {
  --logo-max-width: 42%;
  --logo-max-height: 72%;
}

.client-logo-skills {
  --logo-max-width: 58%;
  --logo-max-height: 70%;
}

.client-logo-siin {
  --logo-max-width: 58%;
  --logo-max-height: 66%;
}

.client-logo-bisb {
  --logo-max-width: 70%;
}

.client-logo-eskan {
  --logo-max-width: 56%;
  --logo-max-height: 62%;
}

.client-logo-ewa {
  --logo-max-width: 64%;
  --logo-max-height: 62%;
}

/* Normalize resting visibility without flattening artwork or transparency. */
.client-logo-one,
.client-logo-basketball,
.client-logo-sept,
.client-logo-victorious {
  --logo-dark-brightness: 0.96;
  --logo-dark-opacity: 0.48;
}

.client-logo-skills,
.client-logo-siin {
  --logo-dark-brightness: 0.9;
  --logo-dark-contrast: 0.88;
  --logo-dark-opacity: 0.43;
}

.client-logo-eskan,
.client-logo-ewa {
  --logo-dark-brightness: 1;
  --logo-dark-opacity: 0.5;
}

.client-logo-manama,
.client-logo-baity,
.client-logo-bisb {
  --logo-dark-brightness: 1.4;
  --logo-dark-contrast: 0.86;
  --logo-dark-opacity: 0.72;
}

.client-logo-livelife,
.client-logo-bbk,
.client-logo-raed,
.client-logo-refresh,
.client-logo-fazaa {
  --logo-dark-brightness: 1.15;
  --logo-dark-opacity: 0.58;
}

.vision-section {
  padding: clamp(100px, 7vw, 140px) 0 clamp(120px, 11.979vw, 230px);
  background: var(--light-page);
}

.vision-section .ghost-title {
  font-family: var(--font-space-grotesk);
  font-weight: 700;
}

.vision-heading {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  align-items: end;
  /* Keep the same visual breathing room below the statement as above it
     before the three process cards begin. */
  margin-bottom: clamp(160px, 12.5vw, 240px);
}

.corner-heading {
  justify-self: end;
  align-self: end;
  margin: 0;
  transform: none;
  color: #1c1f2a;
  font-family: var(--font-objective);
  font-size: clamp(22px, 2.083vw, 40px);
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
}

body.theme-dark .corner-heading {
  color: #d5d7d8;
}

.corner-heading::before,
.corner-heading::after {
  content: "";
  display: inline-block;
  width: clamp(48px, 3.125vw, 60px);
  height: clamp(48px, 3.125vw, 60px);
  border-color: var(--pink);
}

.corner-heading::before {
  margin-right: clamp(24px, 1.563vw, 30px);
  border-top: 5px solid var(--pink);
  border-left: 5px solid var(--pink);
}

.corner-heading::after {
  margin-left: clamp(24px, 1.563vw, 30px);
  border-right: 5px solid var(--pink);
  border-bottom: 5px solid var(--pink);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 96px);
}

.process-grid article {
  position: relative;
  outline: 0;
  overflow: visible;
}

.process-grid article::after {
  content: attr(data-step);
  position: absolute;
  right: clamp(14px, 1.042vw, 20px);
  top: clamp(30px, 2.25vw, 43px);
  color: rgba(96, 105, 113, 0.07);
  font-family: var(--font-space-grotesk);
  font-size: clamp(88px, 7.813vw, 150px);
  line-height: 0.8;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-48px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

body.theme-dark .process-grid article::after {
  color: rgba(174, 179, 183, 0.08);
}

.line-node {
  display: block;
  position: relative;
  height: clamp(24px, 1.979vw, 38px);
  margin-bottom: clamp(34px, 2.865vw, 55px);
  overflow: visible;
}

.line-node::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 3px;
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
  background: var(--pink);
  transform: rotate(45deg);
  transition: left 260ms ease, width 260ms ease, height 260ms ease, transform 260ms ease, top 260ms ease;
}

.line-node::after {
  content: "";
  position: absolute;
  left: clamp(34px, 2.604vw, 50px);
  right: 0;
  top: clamp(10px, 0.781vw, 15px);
  height: 2px;
  background: var(--pink);
  transition: left 260ms ease;
}

.process-grid h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 30px;
  color: #5a626b;
  font-family: var(--font-space-grotesk);
  font-size: clamp(28px, 2.083vw, 40px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  transition: color 220ms ease, transform 260ms ease;
}

.process-grid p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #a7adb2;
  font-family: var(--font-objective);
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.45;
  font-weight: 500;
  transition: color 220ms ease, transform 260ms ease;
}

.process-grid article:hover::after,
.process-grid article:focus-visible::after,
.process-grid article.process-active::after {
  opacity: 1;
  transform: translateY(0);
}

.process-grid article:hover .line-node::before,
.process-grid article:focus-visible .line-node::before,
.process-grid article.process-active .line-node::before {
  left: 0;
  top: 3px;
  width: clamp(18px, 1.25vw, 24px);
  height: clamp(18px, 1.25vw, 24px);
  transform: rotate(0deg);
}

.process-grid article:hover .line-node::after,
.process-grid article:focus-visible .line-node::after,
.process-grid article.process-active .line-node::after {
  left: clamp(34px, 2.604vw, 50px);
}

.process-grid article:hover h3,
.process-grid article:focus-visible h3,
.process-grid article.process-active h3 {
  color: var(--pink);
  transform: translateY(-2px);
}

.process-grid article:hover p,
.process-grid article:focus-visible p,
.process-grid article.process-active p {
  color: #5f6972;
  transform: translateY(2px);
}

body.theme-dark .process-grid article:hover p,
body.theme-dark .process-grid article:focus-visible p,
body.theme-dark .process-grid article.process-active p {
  color: #d5d7d8;
}

.stats-section {
  padding: 0 0 clamp(88px, 7.292vw, 140px);
  background: var(--light-page);
}

.stats-section .ghost-title {
  font-family: var(--font-space-grotesk);
  font-weight: 700;
}

.ghost-title.center {
  text-align: center;
  margin-bottom: clamp(34px, 3.021vw, 58px);
}

.stats-stage {
  --stats-content-width: min(75vw, 1440px);
  --stats-row-height: clamp(270px, 22.396vw, 430px);
  --stats-trust-height: clamp(126px, 8.854vw, 170px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--stats-content-width)) minmax(0, 1fr);
  grid-template-rows: var(--stats-row-height) var(--stats-trust-height);
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-stage-cell,
.stats-lower-grid,
.stats-grid article {
  position: relative;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
}

.stats-stage-cell::before,
.stats-lower-grid::before,
.stats-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e9eaea;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.stats-stage-cell:hover::before,
.stats-lower-grid:hover::before,
.stats-grid article:hover::before,
.stats-grid article:focus-visible::before,
.stats-grid article.stat-active::before {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stats-stage-cell--top-left {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-stage-cell--top-right {
  grid-column: 3;
  grid-row: 1;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats-stage-cell--bottom-left {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
}

.stats-stage-cell--bottom-right {
  grid-column: 3;
  grid-row: 2;
  border-left: 1px solid var(--line);
}

.stats-grid {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.stats-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(42px, 3.542vw, 68px);
  padding: 28px 16px;
  border-right: 1px solid var(--line);
  text-align: center;
  outline: 0;
  transition: transform 260ms ease;
}

.stats-grid article:last-child {
  border-right: 0;
}

.stats-grid strong {
  position: relative;
  z-index: 1;
  color: #5a626b;
  font-family: var(--font-space-grotesk);
  font-size: clamp(72px, 5.208vw, 100px);
  line-height: 0.9;
  font-weight: 700;
  transition: color 220ms ease, transform 260ms ease;
}

.stats-grid strong::before,
.stats-grid strong::after {
  content: "";
  position: absolute;
  width: clamp(20px, 1.563vw, 30px);
  height: clamp(20px, 1.563vw, 30px);
  border-color: var(--pink);
  transition: inset 260ms ease, transform 260ms ease;
}

.stats-grid strong::before {
  left: clamp(-35px, -1.823vw, -22px);
  top: clamp(-22px, -1.146vw, -14px);
  border-top: clamp(3px, 0.208vw, 4px) solid var(--pink);
  border-left: clamp(3px, 0.208vw, 4px) solid var(--pink);
}

.stats-grid strong::after {
  right: clamp(-36px, -1.875vw, -22px);
  bottom: clamp(-20px, -1.042vw, -12px);
  border-right: clamp(3px, 0.208vw, 4px) solid var(--pink);
  border-bottom: clamp(3px, 0.208vw, 4px) solid var(--pink);
}

.stats-grid span {
  position: relative;
  z-index: 1;
  color: rgba(96, 105, 113, 0.22);
  font-family: var(--font-space-grotesk);
  font-size: clamp(14px, 1.146vw, 22px);
  line-height: 1.45;
  font-weight: 700;
  text-transform: uppercase;
  transition: color 220ms ease, opacity 220ms ease, transform 260ms ease;
}

.stats-grid article:hover,
.stats-grid article:focus-visible,
.stats-grid article.stat-active {
  transform: scale(1);
}

body.theme-dark .stats-stage-cell::before,
body.theme-dark .stats-lower-grid::before,
body.theme-dark .stats-grid article::before {
  background: #252a33;
}

.stats-grid article:hover strong,
.stats-grid article:focus-visible strong,
.stats-grid article.stat-active strong {
  color: #1c1f2a;
  transform: scale(0.92) translateY(clamp(-8px, -0.417vw, -4px));
}

body.theme-dark .stats-grid article:hover strong,
body.theme-dark .stats-grid article:focus-visible strong,
body.theme-dark .stats-grid article.stat-active strong {
  color: #d5d7d8;
}

.stats-grid article:hover strong::before,
.stats-grid article:focus-visible strong::before,
.stats-grid article.stat-active strong::before {
  transform: translate(clamp(8px, 0.625vw, 12px), clamp(6px, 0.469vw, 9px));
}

.stats-grid article:hover strong::after,
.stats-grid article:focus-visible strong::after,
.stats-grid article.stat-active strong::after {
  transform: translate(clamp(-8px, -0.625vw, -12px), clamp(-6px, -0.469vw, -9px));
}

.stats-grid article:hover span,
.stats-grid article:focus-visible span,
.stats-grid article.stat-active span {
  color: #5a626b;
  opacity: 1;
  transform: translateY(clamp(-6px, -0.313vw, -3px));
}

body.theme-dark .stats-grid article:hover span,
body.theme-dark .stats-grid article:focus-visible span,
body.theme-dark .stats-grid article.stat-active span {
  color: #d5d7d8;
}

@media (prefers-reduced-motion: reduce) {
  .stats-stage-cell::before,
  .stats-lower-grid::before,
  .stats-grid article::before {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }

  .trust-marquee-track {
    animation: none;
    width: 100%;
    min-width: 0;
  }

  .trust-ticker-group {
    width: 100%;
    justify-content: center;
    padding-left: 0;
  }

  .trust-ticker-group:not(:first-child) {
    display: none;
  }
}

.stats-lower-grid {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
}

.trust-copy {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(24px, 2.031vw, 39px);
  color: #323e48;
  font-family: var(--font-space-grotesk);
  font-size: clamp(13px, 1.042vw, 20px);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.trust-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.trust-marquee-track {
  display: flex;
  width: max-content;
  min-width: 200%;
  height: 100%;
  animation: trust-ticker-loop 48s linear infinite;
  will-change: transform;
}

.trust-ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 100%;
  padding-left: 50vw;
}

.trust-ticker-group .trust-copy {
  flex: 0 0 auto;
  /* Keep a full clear viewport between statements: one message passes through
     before the following message enters the visible ticker area. */
  padding-inline: clamp(360px, 33vw, 640px);
  white-space: nowrap;
}

@keyframes trust-ticker-loop {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

body.theme-dark .trust-copy {
  color: #d5d7d8;
}

.work-section {
  --siin-edge-gap: clamp(40px, 4.479vw, 86px);
  /* The pinned card is intentionally exactly as tall as the viewport minus
     the shared edge gap above and below it. This keeps both visible spaces
     identical while any project card is stuck. */
  --siin-card-height: calc(100svh - (var(--siin-edge-gap) * 2));
  --siin-card-height: calc(100dvh - (var(--siin-edge-gap) * 2));
  --siin-sticky-top: var(--siin-edge-gap);
  --case-card-width: min(43.125vw, 828px);
  background: var(--light-page);
}

body.theme-dark .work-section {
  background: var(--dark-page);
}

.case-study {
  position: relative;
  min-height: clamp(900px, 83.594vw, 1605px);
  overflow: hidden;
}

.siin-case,
.bayti-case,
.livelife-case,
.limitless-case,
.diabetes-case {
  /* Keep the SIIN card tall enough for its longer description and four rows
     of metadata at short desktop viewport sizes. Both the card and its sticky
     offset use the same viewport-aware values, so the purple space above and
     below the pinned white card remains equal at every desktop height. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(1500px, 210vh, 2400px);
  padding-block: clamp(90px, 10vh, 180px);
  overflow: visible;
  /* Hide the phone entrance until the SIIN section itself reaches the viewport,
     without turning this sticky section into a scrolling container. */
  clip-path: inset(0);
  isolation: isolate;
  /* Preserve the supplied SIIN gradient's exact teal, blue, violet and dark
     transitions while allowing it to fill the full responsive section. */
  background: #1d1d20 url("assets/design/siin-background-gradient.jpg") center / cover no-repeat;
}

.mnsaj-case {
  --project-accent-start: #5e293c;
  --project-accent-end: #82425a;
  background: linear-gradient(135deg, #5e293c 0%, #82425a 100%);
}

.mnsaj-case .siin-phone--rear {
  top: 9.657%;
  right: clamp(250px, 30.99vw, 595px);
  width: min(23.073vw, 443px);
}

.mnsaj-case .siin-phone--front {
  top: 30.654%;
  right: clamp(28px, 6.771vw, 130px);
  width: min(23.073vw, 443px);
}

/* This wins over the shared SIIN values because MNSAJ reuses that component. */
.mnsaj-case.siin-case {
  --project-accent-start: #5e293c;
  --project-accent-end: #82425a;
}

.tarteeb-case {
  --project-accent-start: #eebe26;
  --project-accent-end: #ffdd6f;
  background: linear-gradient(135deg, #eebe26 0%, #ffdd6f 100%);
}

.tarteeb-case.siin-case {
  --project-accent-start: #eebe26;
  --project-accent-end: #ffdd6f;
}

.tarteeb-title-logo {
  display: block;
  width: clamp(260px, 23vw, 440px);
  height: auto;
}

.tarteeb-title-logo--light {
  display: none;
}

body.theme-light .tarteeb-title-logo--dark {
  display: none;
}

body.theme-light .tarteeb-title-logo--light {
  display: block;
}

.tarteeb-device-frame {
  position: sticky;
  z-index: 4;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.tarteeb-device {
  position: absolute;
  z-index: 1;
  /* Match the MNSAJ rear-device composition using the Tarteeb screen. */
  /* Centre the taller supplied iPad fully within the visible project area. */
  top: 3%;
  right: clamp(18px, 4vw, 76px);
  display: block;
  width: min(46vw, 880px);
  height: auto;
  pointer-events: none;
  /* Keep tablet artwork stable while the project section is pinned. */
}

.mnsaj-case .mnsaj-title {
  position: relative;
  width: clamp(280px, 22vw, 420px);
  height: clamp(130px, 8vw, 155px);
  overflow: hidden;
}

.mnsaj-title-art {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translateY(-22%);
  filter: brightness(1.3) saturate(1.15);
}

body.theme-dark .mnsaj-title-art {
  filter: brightness(0) invert(1);
}

.mnsaj-case .case-card p {
  max-width: 580px;
  font-size: clamp(17px, 1.25vw, 24px);
}

.bayti-case {
  background: linear-gradient(135deg, #101f39 0%, #009095 100%);
}

.livelife-case {
  background: linear-gradient(135deg, #1696d3 0%, #73dced 100%);
}

.limitless-case {
  background: linear-gradient(135deg, #dd241a 0%, #9c1325 52%, #5b1a4c 100%);
}

/* The Calendar screen sits on the right and the original discovery screen
   moves left, matching their swapped entrance animation. */
.limitless-case .siin-phone--rear {
  top: 30.654%;
  right: clamp(28px, 6.771vw, 130px);
}

.limitless-case .siin-phone--front {
  top: 9.657%;
  right: clamp(250px, 30.99vw, 595px);
}

.diabetes-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(1500px, 210vh, 2400px);
  padding-block: clamp(90px, 10vh, 180px);
  overflow: visible;
  clip-path: inset(0);
  isolation: isolate;
  background: linear-gradient(135deg, #f6def2 0%, #d8c6ef 48%, #6f3b9b 100%);
}

/* Each case supplies its own accent pair so project copy and the hover label
   feel native to the work rather than sharing the site-wide pink. */
.siin-case {
  --project-accent-start: #00c6bc;
  --project-accent-end: #5965df;
}

.janat-case.siin-case {
  --project-accent-start: #a9dae3;
  --project-accent-end: #5dc2d5;
  background: linear-gradient(135deg, #a9dae3 0%, #5dc2d5 100%);
}

.janat-title-logo {
  display: block;
  width: clamp(260px, 22vw, 420px);
  height: auto;
  filter: brightness(0);
}

.janat-background-logo {
  width: clamp(390px, 34vw, 650px);
  height: clamp(210px, 18vw, 345px);
  opacity: 0.17;
}

.janat-case .siin-phone--rear {
  top: 28%;
  right: clamp(28px, 6.77vw, 130px);
}

.janat-case .siin-phone--front {
  top: 7%;
  right: clamp(265px, 31vw, 595px);
}

/* The primary Siin screens are intentionally reversed: Siin Drops sits left
   and the Retro_BH screen sits right. */
.siin-primary-case .siin-phone--rear {
  top: 30.654%;
  right: clamp(28px, 6.771vw, 130px);
}

.siin-primary-case .siin-phone--front {
  top: 9.657%;
  right: clamp(250px, 30.99vw, 595px);
}

body.theme-dark .janat-title-logo {
  filter: none;
}

.bayti-case {
  --project-accent-start: #12305b;
  --project-accent-end: #00a6a0;
}

.photo-case {
  --project-accent-start: #5f7d8e;
  --project-accent-end: #243a4a;
}

.livelife-case {
  --project-accent-start: #1696d3;
  --project-accent-end: #73dced;
}

.limitless-case {
  --project-accent-start: #df291e;
  --project-accent-end: #7d2661;
}

.diabetes-case {
  --project-accent-start: #d05a31;
  --project-accent-end: #6f3b9b;
}

.siin-logo-frame,
.siin-visual-frame {
  position: sticky;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.siin-logo-frame {
  z-index: 2;
  overflow: hidden;
}

.siin-logo {
  position: absolute;
  right: clamp(40px, 6.25vw, 120px);
  top: clamp(85px, 7.3vw, 140px);
  display: block;
  width: clamp(280px, 25vw, 480px);
  height: clamp(210px, 18.75vw, 360px);
  object-fit: contain;
  opacity: 0.18;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, var(--siin-image-shift, 0px), 0);
}

.siin-visual-frame {
  z-index: 4;
  /* Keep both phone mockups whole while their sticky composition is held. */
  overflow: visible;
}

.siin-phone {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, calc(var(--siin-image-shift, 0px) + var(--siin-phone-y, 0px)), 0);
}

.siin-phone--rear {
  z-index: 1;
  top: 9.657%;
  right: clamp(250px, 30.99vw, 595px);
  width: min(23.073vw, 443px);
}

.siin-phone--front {
  z-index: 2;
  top: 30.654%;
  right: clamp(28px, 6.771vw, 130px);
  width: min(23.073vw, 443px);
}

@media (prefers-reduced-motion: reduce) {
  .siin-phone,
  .siin-logo {
    transform: none !important;
    will-change: auto;
  }
}

.photo-case {
  min-height: clamp(1500px, 210vh, 2400px);
  padding-block: clamp(90px, 10vh, 180px);
  overflow: visible;
  isolation: isolate;
  background: #dcecf0;
}

.photo-case:last-child {
  min-height: clamp(1450px, 200vh, 2200px);
}

.case-photo-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.case-photo {
  position: absolute;
  inset: auto 0;
  top: -8vh;
  width: 100%;
  height: calc(100% + 16vh);
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, var(--photo-shift, 0px), 0);
  will-change: transform;
}

.case-card {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 6.771vw, 130px);
  top: clamp(36px, 3.75vw, 72px);
  width: var(--case-card-width);
  min-height: clamp(620px, 49.479vw, 950px);
  padding: clamp(92px, 7.292vw, 140px) clamp(42px, 3.333vw, 64px) clamp(52px, 4.167vw, 80px);
  background: var(--case-card);
  color: #242426;
  transition: background-color 240ms ease, color 240ms ease;
}

body.theme-dark .case-card {
  color: #d5d7d8;
}

.photo-case .case-card,
.siin-case .case-card,
.bayti-case .case-card,
.livelife-case .case-card,
.limitless-case .case-card,
.injaz-case .case-card {
  position: sticky;
  left: auto;
  top: var(--siin-sticky-top, max(clamp(40px, 4.479vw, 86px), calc((100vh - clamp(620px, 49.479vw, 950px)) / 2)));
  margin-left: clamp(24px, 6.771vw, 130px);
}

.photo-case .case-card,
.siin-case .case-card,
.bayti-case .case-card,
.livelife-case .case-card,
.limitless-case .case-card,
.injaz-case .case-card {
  grid-area: 1 / 1;
  align-self: start;
  /* SIIN has a longer project summary. Keep that copy inside the same fixed
     card height used to calculate the centred sticky position, so the purple
     space above and below the card remains equal while it is pinned. */
  height: var(--siin-card-height);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.photo-case .case-card dl,
.siin-case .case-card dl,
.bayti-case .case-card dl,
.livelife-case .case-card dl,
.limitless-case .case-card dl,
.injaz-case .case-card dl {
  /* The summary can wrap to more lines on smaller desktops. Pin the details
     to the card's padded bottom so they never spill below the white panel. */
  margin-top: auto;
}

.siin-case .case-card p,
.bayti-case .case-card p,
.livelife-case .case-card p,
.limitless-case .case-card p {
  /* Reserve clear space for the phone composition that overlaps the card's
     right edge, without changing the project card or phone positions. */
  padding-right: clamp(32px, 3.125vw, 60px);
}

.bayti-title-logo {
  display: block;
  width: clamp(180px, 14vw, 270px);
  height: auto;
  filter: brightness(0);
}

.livelife-title-logo {
  display: block;
  width: clamp(190px, 14vw, 270px);
  height: auto;
  filter: brightness(0);
}

.limitless-title-logo {
  display: block;
  width: clamp(230px, 20vw, 385px);
  height: auto;
  filter: brightness(0);
}

.diabetes-title-logo {
  display: block;
  width: clamp(250px, 21vw, 400px);
  height: auto;
  /* The supplied artwork includes generous transparent space above its mark. */
  transform: translateY(clamp(-48px, -2.5vw, -32px));
}

.diabetes-case .diabetes-title {
  /* Move the copy into the same visual rhythm as the standard project cards,
     without leaving the source image's transparent canvas in the layout. */
  margin-bottom: clamp(-56px, -3vw, -36px);
}

/* Adjust only the description's visual position; the surrounding layout stays fixed. */
.diabetes-case .case-card > p {
  transform: translateY(-48px);
}

.limitless-background-logo {
  width: clamp(400px, 36vw, 690px);
  height: clamp(230px, 21vw, 400px);
  opacity: 0.16;
}

body.theme-dark .bayti-title-logo,
body.theme-dark .livelife-title-logo,
body.theme-dark .limitless-title-logo,
body.theme-dark .diabetes-title-logo {
  filter: none;
}

.livelife-case .case-card p {
  font-size: clamp(17px, 1.25vw, 24px);
}

.limitless-case .case-card p {
  font-size: clamp(17px, 1.25vw, 24px);
}

.diabetes-device-frame {
  position: sticky;
  z-index: 4;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.diabetes-device {
  position: absolute;
  top: 3%;
  right: clamp(18px, 4vw, 76px);
  display: block;
  width: min(46vw, 880px);
  height: auto;
  pointer-events: none;
  /* Keep tablet artwork stable while the project section is pinned. */
}

.sulb-case {
  --project-accent-start: #115d97;
  --project-accent-end: #03348f;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(1500px, 210vh, 2400px);
  padding-block: clamp(90px, 10vh, 180px);
  overflow: visible;
  /* Match the other sticky device sections: keep the entrance and exit
     contained within Sulb instead of spilling into the next project. */
  clip-path: inset(0);
  isolation: isolate;
  background: linear-gradient(135deg, #115d97 0%, #03348f 100%);
}

.sulb-title-logo {
  display: block;
  width: clamp(250px, 20vw, 380px);
  height: auto;
}

.sulb-title-logo--light {
  display: none;
}

@media (min-width: 761px) {
  /* Visual-only offsets keep the metadata block pinned in its existing place. */
  .sulb-case .sulb-title {
    transform: translateY(clamp(-48px, -2.5vw, -28px));
  }

  .sulb-case .case-card > p {
    transform: translateY(clamp(-44px, -2.3vw, -28px));
  }
}

body.theme-light .sulb-title-logo--dark {
  display: none;
}

body.theme-light .sulb-title-logo--light {
  display: block;
}

.sulb-device-frame {
  position: sticky;
  z-index: 4;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.sulb-device {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  /* Keep tablet artwork stable while the project section is pinned. */
}

.sulb-device {
  z-index: 1;
  top: 3%;
  right: clamp(18px, 4vw, 76px);
  width: min(46vw, 880px);
}

/* Tablet projects share the same pinned card geometry. Centre each iPad in
   that card's viewport box, rather than positioning it against the full
   browser viewport, so its top and bottom space always match. */
.tarteeb-device-frame,
.diabetes-device-frame,
.sulb-device-frame {
  height: var(--siin-card-height);
  display: grid;
  align-items: center;
  justify-items: end;
  padding-right: clamp(18px, 4vw, 76px);
}

.tarteeb-device,
.diabetes-device,
.sulb-device {
  position: relative;
  top: auto;
  right: auto;
  transform: translate3d(var(--tablet-device-x, 0px), 0, 0) rotate(var(--tablet-device-tilt, 0deg));
  transform-origin: center;
  will-change: transform;
}

.injaz-case {
  --project-accent-start: #008b91;
  --project-accent-end: #101f39;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(1500px, 210vh, 2400px);
  padding-block: clamp(90px, 10vh, 180px);
  overflow: visible;
  /* Prevent the device entrance from appearing over the previous project. */
  clip-path: inset(0);
  isolation: isolate;
  background: linear-gradient(135deg, #009095 0%, #101f39 100%);
}

.injaz-case .case-card {
  background: var(--case-card);
}

.injaz-case .case-card p,
.injaz-case .case-card dd {
  color: #6d6f73;
}

.injaz-title-logo {
  display: block;
  width: clamp(250px, 21vw, 400px);
  height: auto;
  filter: brightness(0);
}

body.theme-dark .injaz-case {
  --project-accent-start: #009095;
  --project-accent-end: #101f39;
  background: linear-gradient(135deg, #009095 0%, #101f39 100%);
}

body.theme-dark .injaz-case .case-card {
  background: #1d1f2a;
}

body.theme-dark .injaz-case .case-card p,
body.theme-dark .injaz-case .case-card dd {
  color: #d5e7e9;
}

body.theme-dark .injaz-title-logo {
  filter: none;
}

.injaz-device-frame {
  position: sticky;
  z-index: 4;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.injaz-logo-frame {
  position: sticky;
  z-index: 2;
  top: var(--siin-sticky-top);
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.injaz-background-logo,
.mnsaj-background-logo {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: 0.17;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.injaz-background-logo {
  top: clamp(90px, 9vw, 165px);
  right: clamp(115px, 11vw, 260px);
  width: clamp(290px, 24vw, 460px);
  height: clamp(165px, 13.5vw, 260px);
  opacity: 0.13;
}

.injaz-case .injaz-background-logo {
  filter: none;
  opacity: 0.11;
}

body.theme-dark .injaz-case .injaz-background-logo {
  filter: brightness(0) invert(1);
  opacity: 0.13;
}

.mnsaj-background-logo {
  top: clamp(92px, 8vw, 154px);
  right: clamp(42px, 6vw, 120px);
  width: clamp(390px, 32vw, 615px);
  height: clamp(210px, 18vw, 345px);
}

.injaz-phone {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, calc(var(--siin-image-shift, 0px) + var(--siin-phone-y, 0px)), 0);
}

.injaz-phone--rear {
  z-index: 1;
  top: 10%;
  right: clamp(250px, 30.99vw, 595px);
  width: min(23.073vw, 443px);
}

.injaz-phone--front {
  z-index: 2;
  top: 30%;
  right: clamp(28px, 6.771vw, 130px);
  width: min(23.073vw, 443px);
}

.case-card h2 {
  margin: 0 0 clamp(34px, 3.021vw, 58px);
  color: #242426;
  font-family: var(--font-space-grotesk);
  font-size: clamp(58px, 5.833vw, 112px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

body.theme-dark .case-card h2 {
  color: #d5d7d8;
}

.siin-title-logo {
  display: block;
  width: clamp(150px, 12vw, 230px);
  height: auto;
  filter: brightness(0);
}

body.theme-dark .siin-title-logo {
  filter: none;
}

.case-card p {
  max-width: 580px;
  margin: 0;
  color: #6d6f73;
  font-family: var(--font-objective);
  font-size: clamp(18px, 1.458vw, 28px);
  line-height: 1.4;
  font-weight: 400;
}

body.theme-dark .case-card p {
  color: #9fa4a9;
}

.case-card dl {
  display: grid;
  grid-template-columns: clamp(110px, 7.813vw, 150px) 1fr;
  gap: clamp(12px, 0.938vw, 18px) clamp(24px, 2.292vw, 44px);
  margin: clamp(96px, 9.635vw, 185px) 0 0;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.2;
}

.case-card dt {
  color: var(--pink);
  font-family: var(--font-objective);
  font-weight: 500;
}

.case-study .case-card h2:not(:has(img)),
.case-study .case-card dt {
  color: transparent;
  background: linear-gradient(105deg, var(--project-accent-start), var(--project-accent-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* A single type scale for every work-case description at every breakpoint. */
.work-section .case-study .case-card p {
  font-size: clamp(17px, 1.25vw, 24px);
}

.case-study.mnsaj-case .case-card .mnsaj-title {
  background: none;
}

.case-card dd {
  margin: 0;
  color: #323e48;
  font-family: var(--font-objective);
  font-weight: 400;
}

body.theme-dark .case-card dd {
  color: #d5d7d8;
}

.contact-section {
  background: #fff;
  padding: clamp(180px, 16.688vw, 320px) 0 clamp(122px, 11.979vw, 230px);
}

body.theme-dark .contact-section {
  background: var(--dark-page);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  grid-template-rows: auto auto;
  column-gap: clamp(56px, 4.792vw, 92px);
}

.contact-layout > .ghost-title {
  align-self: start;
  font-family: var(--font-space-grotesk);
  font-weight: 700;
  transform: translateY(clamp(-36px, -1.875vw, -22px));
}

.contact-form {
  display: grid;
  gap: clamp(22px, 1.979vw, 38px);
  grid-column: 2;
  grid-row: 1 / span 2;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #eeeef0;
  color: #323e48;
  min-height: clamp(56px, 4.427vw, 85px);
  padding: 0 clamp(22px, 2.083vw, 40px);
  font-size: clamp(18px, 1.458vw, 28px);
  font-weight: 400;
  outline: 0;
  transition: background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

body.theme-dark .contact-form input,
body.theme-dark .contact-form textarea {
  background: #222833;
  color: #d5d7d8;
}

.contact-form textarea {
  min-height: clamp(150px, 13.125vw, 252px);
  padding-top: clamp(18px, 1.667vw, 32px);
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: #e8e8ea;
  box-shadow: inset 3px 0 0 var(--pink);
}

.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] {
  box-shadow: inset 3px 0 0 var(--pink);
}

body.theme-dark .contact-form input:focus,
body.theme-dark .contact-form textarea:focus {
  background: #282e39;
  color: #d5d7d8;
}

.contact-form button {
  height: clamp(56px, 4.167vw, 80px);
  margin-top: clamp(16px, 1.354vw, 26px);
  border: 0;
  background: var(--pink);
  color: #fff;
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease, opacity 220ms ease;
}

.contact-form.form-submitted button {
  background: #d7004c;
}

.contact-note {
  align-self: end;
  display: grid;
  gap: clamp(32px, 2.5vw, 48px);
  grid-column: 1;
  grid-row: 2;
  margin-bottom: clamp(10px, 0.833vw, 16px);
}

.contact-note span {
  position: relative;
  width: min(100%, clamp(250px, 25.313vw, 486px));
  height: 2px;
  margin-left: clamp(36px, 3.125vw, 60px);
  background: var(--pink);
}

.contact-note span::before {
  content: "";
  position: absolute;
  left: clamp(-56px, -2.917vw, -36px);
  top: clamp(-19px, -0.99vw, -13px);
  width: clamp(28px, 2.083vw, 40px);
  height: clamp(28px, 2.083vw, 40px);
  background: var(--pink);
  transform: rotate(45deg);
}

.contact-note p {
  margin: 0;
  color: #1c1f2a;
  font-size: clamp(16px, 1.354vw, 26px);
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
}

@media (min-width: 1025px) {
  .contact-note span {
    transform: translateY(clamp(14px, 1.1vw, 22px));
  }

  .contact-note p {
    transform: translateY(clamp(22px, 1.6vw, 32px));
  }
}

body.theme-dark .contact-note p {
  color: #d5d7d8;
}

.site-footer {
  --footer-content-width: min(75vw, 1440px);
  --footer-hover: #3b4650;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--footer);
  color: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.site-footer::before {
  top: calc(clamp(62px, 4.167vw, 80px) - 1px);
}

.site-footer::after {
  top: calc(clamp(62px, 4.167vw, 80px) + clamp(300px, 22.917vw, 440px) - 1px);
}

.footer-hover-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, calc(var(--footer-content-width) / 2))
    minmax(0, calc(var(--footer-content-width) / 2))
    minmax(0, 1fr);
  grid-template-rows:
    clamp(62px, 4.167vw, 80px)
    clamp(300px, 22.917vw, 440px)
    clamp(62px, 4.167vw, 80px);
}

.footer-hover-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
}

.footer-hover-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--footer-hover);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1) 400ms;
}

.footer-hover-cell:hover::before,
.footer-hover-cell:active::before,
.footer-hover-cell.footer-cell-active::before {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-hover-cell--top-left,
.footer-hover-cell--main-left,
.footer-hover-cell--nav-left {
  grid-column: 1;
}

.footer-hover-cell--top-center,
.footer-hover-cell--main-center {
  grid-column: 2 / 4;
}

.footer-hover-cell--top-right,
.footer-hover-cell--main-right,
.footer-hover-cell--nav-right {
  grid-column: 4;
}

.footer-hover-cell--top-left,
.footer-hover-cell--top-center,
.footer-hover-cell--top-right {
  grid-row: 1;
}

.footer-hover-cell--main-left,
.footer-hover-cell--main-center,
.footer-hover-cell--main-right {
  grid-row: 2;
}

.footer-hover-cell--nav-left,
.footer-hover-cell--nav-legal,
.footer-hover-cell--nav-social,
.footer-hover-cell--nav-right {
  grid-row: 3;
}

.footer-hover-cell--nav-legal {
  grid-column: 2;
}

.footer-hover-cell--nav-social {
  grid-column: 3;
}

.footer-top {
  min-height: clamp(62px, 4.167vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(24px, 1.771vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-objective);
  font-size: clamp(13px, 1.042vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
}

.footer-top,
.footer-main,
.footer-nav {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.footer-top a,
.footer-main a,
.footer-nav a {
  pointer-events: auto;
}

.site-footer:has(.footer-top a:hover) .footer-hover-cell--top-center::before,
.site-footer:has(.footer-top a:focus-visible) .footer-hover-cell--top-center::before,
.site-footer:has(.footer-main a:hover) .footer-hover-cell--main-center::before,
.site-footer:has(.footer-main a:focus-visible) .footer-hover-cell--main-center::before,
.site-footer:has(.footer-nav-group--legal a:hover) .footer-hover-cell--nav-legal::before,
.site-footer:has(.footer-nav-group--legal a:focus-visible) .footer-hover-cell--nav-legal::before,
.site-footer:has(.footer-nav-group--social a:hover) .footer-hover-cell--nav-social::before,
.site-footer:has(.footer-nav-group--social a:focus-visible) .footer-hover-cell--nav-social::before {
  opacity: 1;
  transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-top p {
  margin: 0;
}

.footer-top a,
.footer-nav a {
  position: relative;
  display: inline-flex;
  width: max-content;
  padding: clamp(10px, 0.729vw, 14px) clamp(14px, 1.042vw, 20px);
  margin: clamp(-14px, -0.729vw, -10px) clamp(-20px, -1.042vw, -14px);
  color: inherit;
  outline: 0;
  transition: color 180ms ease;
}

.footer-top .back-to-top {
  width: clamp(150px, 10vw, 192px);
  justify-content: center;
  overflow: hidden;
}

.back-to-top__label {
  display: block;
  white-space: nowrap;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.back-to-top__icon {
  position: absolute;
  right: clamp(14px, 1.042vw, 20px);
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(16px, 1.042vw, 20px);
  height: clamp(16px, 1.042vw, 20px);
  opacity: 0;
  transform: translate(8px, -50%);
  transition:
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.back-to-top__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-top .back-to-top::before,
.footer-top .back-to-top::after {
  content: none;
}

.footer-top .back-to-top:hover .back-to-top__label,
.footer-top .back-to-top:focus-visible .back-to-top__label {
  transform: translateX(clamp(-18px, -1.25vw, -12px));
}

.footer-top .back-to-top:hover .back-to-top__icon,
.footer-top .back-to-top:focus-visible .back-to-top__icon {
  opacity: 1;
  transform: translate(0, -50%);
}

.footer-top .back-to-top:hover .back-to-top__icon svg,
.footer-top .back-to-top:focus-visible .back-to-top__icon svg {
  animation: back-to-top-arrow-rise 380ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

@keyframes back-to-top-arrow-rise {
  0% {
    transform: translateY(5px);
  }

  72% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top__label,
  .back-to-top__icon {
    transition: none;
  }

  .footer-top .back-to-top:hover .back-to-top__icon svg,
  .footer-top .back-to-top:focus-visible .back-to-top__icon svg {
    animation: none;
  }
}

.footer-top a::before,
.footer-top a::after,
.footer-nav a::before,
.footer-nav a::after {
  content: "";
  position: absolute;
  width: clamp(10px, 0.729vw, 14px);
  height: clamp(10px, 0.729vw, 14px);
  border-color: var(--pink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-top a::before,
.footer-nav a::before {
  top: 0;
  left: 0;
  border-top: 2px solid var(--pink);
  border-left: 2px solid var(--pink);
  transform: translate(5px, 5px);
}

.footer-top a::after,
.footer-nav a::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: translate(-5px, -5px);
}

.footer-top a:hover,
.footer-top a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: rgba(255, 255, 255, 0.86);
}

.footer-top a:hover::before,
.footer-top a:hover::after,
.footer-top a:focus-visible::before,
.footer-top a:focus-visible::after,
.footer-nav a:hover::before,
.footer-nav a:hover::after,
.footer-nav a:focus-visible::before,
.footer-nav a:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.footer-main {
  position: relative;
  min-height: clamp(300px, 22.917vw, 440px);
  display: grid;
  align-content: start;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(80px, 5.729vw, 110px);
  padding-left: clamp(82px, 8.854vw, 170px);
}

.footer-main p {
  margin: 0 0 clamp(32px, 2.969vw, 57px);
  color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-objective);
  font-size: clamp(40px, 3.333vw, 64px);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.footer-main strong {
  color: var(--pink);
}

.footer-email {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-space-grotesk);
  font-size: clamp(64px, 7.292vw, 140px);
  line-height: 1;
  font-weight: 700;
  overflow-wrap: anywhere;
  outline: 0;
  transition: color 180ms ease;
}

.footer-email-wrap {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
}

.footer-copy-button {
  position: absolute;
  right: 0;
  top: clamp(-76px, -3.958vw, -44px);
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 0.833vw, 16px);
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
  font-family: var(--font-objective);
  font-size: clamp(12px, 1.042vw, 20px);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: color 180ms ease, opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-email-wrap:hover .footer-copy-button,
.footer-email-wrap:focus-within .footer-copy-button,
.footer-copy-button.copied {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.footer-copy-button__label {
  display: grid;
  line-height: 1.2;
}

.footer-copy-button__copy,
.footer-copy-button__copied {
  grid-area: 1 / 1;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer-copy-button__copied {
  opacity: 0;
  transform: none;
}

.footer-copy-button__icon {
  width: clamp(12px, 0.938vw, 18px);
  height: clamp(12px, 0.938vw, 18px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-email:hover,
.footer-email:focus-visible,
.footer-copy-button:hover,
.footer-copy-button:focus-visible {
  color: rgba(255, 255, 255, 0.86);
}

.footer-copy-button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 6px;
}

.footer-email.copied,
.footer-copy-button.copied {
  color: rgba(255, 255, 255, 0.86);
}

.footer-copy-button.copied .footer-copy-button__copy {
  opacity: 0;
  transform: none;
}

.footer-copy-button.copied .footer-copy-button__copied {
  opacity: 1;
  transform: none;
}

.footer-nav {
  min-height: clamp(62px, 4.167vw, 80px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-inline: clamp(24px, 1.771vw, 34px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-objective);
  font-size: clamp(13px, 1.042vw, 20px);
  font-weight: 500;
  text-transform: uppercase;
}

.footer-nav-group {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  gap: clamp(36px, 2.708vw, 52px);
}

.footer-nav-group--social {
  justify-content: flex-end;
}

.footer-nav-group--locations {
  gap: clamp(34px, 2.5vw, 48px);
}

.footer-nav .footer-location {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.729vw, 14px);
  width: auto;
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.58);
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-nav .footer-location::before,
.footer-nav .footer-location::after {
  display: none;
}

.footer-location__pin {
  display: block;
  flex: 0 0 auto;
  width: clamp(18px, 1.146vw, 22px);
  height: clamp(18px, 1.146vw, 22px);
  background: currentColor;
  -webkit-mask: url("assets/design/location-pin.png") center / contain no-repeat;
  mask: url("assets/design/location-pin.png") center / contain no-repeat;
}

.footer-location__copy {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.footer-location__copy strong {
  font: inherit;
  font-weight: 700;
}

.footer-location__copy small {
  color: currentColor;
  font-size: 0.72em;
  font-weight: 400;
  text-transform: none;
  opacity: 0.7;
}

.footer-location:hover,
.footer-location:focus-visible {
  color: var(--pink);
}

@media (prefers-reduced-motion: reduce) {
  .footer-hover-cell::before {
    transition-duration: 150ms;
    transition-delay: 0ms;
  }
}

/*
  The original composition is based on a 1920px canvas.  Do not keep that
  canvas as a hard ceiling: on 2K/4K desktops the content, project art and
  grid all need to continue growing together instead of sitting in a narrow
  1440px column surrounded by unused page space.
*/
@media (min-width: 1921px) {
  .content {
    width: min(80vw, 3000px);
  }

  .site-header {
    min-height: clamp(146px, 7.374vw, 280px);
    column-gap: clamp(64px, 3.333vw, 128px);
    padding-inline: clamp(132px, 6.65vw, 255px);
  }

  .brand-logo {
    width: clamp(252px, 13.1vw, 504px);
  }

  .main-nav {
    gap: clamp(64px, 3.3vw, 128px);
    font-size: clamp(20px, 1.042vw, 40px);
  }

  .theme-toggle {
    width: clamp(52px, 2.708vw, 104px);
    height: clamp(52px, 2.708vw, 104px);
  }

  .theme-icon {
    width: clamp(24px, 1.25vw, 48px);
    height: clamp(24px, 1.25vw, 48px);
  }

  .hero-section {
    --hero-header-height: clamp(146px, 7.374vw, 280px);
    --hero-half-header-height: clamp(73px, 3.687vw, 140px);
    --hero-base-height: clamp(940px, 48.958vw, 1600px);
    --hero-half-base-height: clamp(470px, 24.479vw, 800px);
    --hero-base-padding-top: clamp(205px, 10.677vw, 410px);
    --hero-grid-top: clamp(70.5px, 3.672vw, 120px);
    --hero-grid-middle: clamp(780.2px, 40.635vw, 1328px);
    --hero-grid-bottom: clamp(89.3px, 4.651vw, 152px);
  }

  .eyebrow {
    gap: clamp(12px, 0.625vw, 24px);
    margin-bottom: clamp(74px, 3.854vw, 148px);
    font-size: clamp(24px, 1.25vw, 48px);
  }

  .eyebrow span {
    width: clamp(80px, 4.167vw, 160px);
  }

  .hero-content h1 {
    font-size: clamp(134px, 6.95vw, 260px);
  }

  .primary-button {
    min-width: clamp(230px, 11.979vw, 460px);
    height: clamp(81px, 4.219vw, 162px);
    margin-top: clamp(104px, 5.417vw, 208px);
    padding-inline: clamp(40px, 2.083vw, 80px);
    font-size: clamp(24px, 1.25vw, 48px);
  }

  .intro-section {
    padding-block: clamp(300px, 7.2vw, 220px) clamp(76px, 3.958vw, 152px);
  }

  .section-rule {
    gap: clamp(28px, 1.458vw, 56px);
    margin-bottom: clamp(62px, 3.229vw, 124px);
  }

  .section-rule::before {
    width: clamp(40px, 2.083vw, 80px);
    height: clamp(40px, 2.083vw, 80px);
  }

  .section-rule span {
    width: min(100%, 2800px);
  }

  .intro-copy {
    max-width: 3000px;
    font-size: clamp(28px, 1.458vw, 56px);
  }

  .services-section {
    --service-grid-height: clamp(424px, 22.07vw, 848px);
    padding-bottom: clamp(220px, 11.458vw, 440px);
  }

  .service-side-cell {
    width: calc((100% - min(80vw, 3000px)) / 2);
  }

  .services-section .ghost-title {
    font-size: clamp(120px, 6.25vw, 240px);
  }

  .service-layout > .ghost-title {
    padding-left: clamp(50px, 2.604vw, 100px);
  }

  .services-grid article {
    min-height: clamp(212px, 11.04vw, 424px);
    --service-card-padding: clamp(30px, 1.5vw, 60px);
  }

  .service-number {
    font-size: clamp(16px, 0.833vw, 32px);
  }

  .services-grid h3 {
    font-size: clamp(22px, 1.042vw, 44px);
  }

  .service-hover-copy {
    padding: clamp(36px, 1.875vw, 72px);
  }

  .service-hover-title {
    font-size: clamp(20px, 1.042vw, 40px);
  }

  .service-hover-copy p:not(.service-hover-title) {
    margin-top: clamp(48px, 2.5vw, 96px);
    font-size: clamp(27px, 1.406vw, 54px);
  }

  .clients-section {
    padding-bottom: 0;
  }

  .client-marquee {
    width: 100%;
    max-width: 3840px;
  }

  .stats-section {
    padding-bottom: clamp(140px, 7.292vw, 280px);
  }

  .stats-stage {
    --stats-content-width: min(80vw, 3000px);
    --stats-row-height: clamp(430px, 22.396vw, 860px);
    --stats-trust-height: clamp(170px, 8.854vw, 340px);
  }

  .stats-grid strong {
    font-size: clamp(100px, 5.208vw, 200px);
  }

  .stats-grid span {
    font-size: clamp(22px, 1.146vw, 44px);
  }

  .trust-copy {
    font-size: clamp(20px, 1.042vw, 40px);
  }

  .case-study {
    min-height: clamp(1605px, 83.594vw, 3000px);
  }

  .siin-case,
  .bayti-case,
  .livelife-case,
  .photo-case {
    min-height: clamp(2400px, 210vh, 3400px);
    padding-block: clamp(180px, 10vh, 300px);
  }

  .photo-case:last-child {
    min-height: clamp(2200px, 200vh, 3200px);
  }

  .work-section {
    --siin-edge-gap: clamp(86px, 4.479vw, 172px);
    --siin-card-height: calc(100svh - (var(--siin-edge-gap) * 2));
    --siin-card-height: calc(100dvh - (var(--siin-edge-gap) * 2));
    --siin-sticky-top: var(--siin-edge-gap);
    --case-card-width: min(43.125vw, 1500px);
  }

  .siin-logo {
    right: clamp(120px, 6.25vw, 240px);
    top: clamp(140px, 7.3vw, 280px);
    width: clamp(480px, 25vw, 960px);
    height: clamp(360px, 18.75vw, 720px);
  }

  .siin-phone--rear {
    right: clamp(595px, 30.99vw, 1190px);
    width: min(23.073vw, 886px);
  }

  .siin-phone--front {
    right: clamp(130px, 6.771vw, 260px);
    width: min(23.073vw, 886px);
  }

  .case-card {
    left: clamp(130px, 6.771vw, 260px);
    top: clamp(72px, 3.75vw, 144px);
    width: min(43.125vw, 1500px);
    min-height: clamp(950px, 49.479vw, 1800px);
    padding: clamp(140px, 7.292vw, 280px) clamp(64px, 3.333vw, 128px) clamp(80px, 4.167vw, 160px);
  }

  .photo-case .case-card,
  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    top: var(--siin-sticky-top, max(clamp(86px, 4.479vw, 172px), calc((100vh - clamp(950px, 49.479vw, 1600px)) / 2)));
    margin-left: clamp(130px, 6.771vw, 260px);
  }

  .photo-case .case-card,
  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    height: var(--siin-card-height);
  }

  .photo-case .case-card dl,
  .siin-case .case-card dl,
  .bayti-case .case-card dl,
  .livelife-case .case-card dl {
    margin-top: auto;
  }

  .case-card h2 {
    margin-bottom: clamp(58px, 3.021vw, 116px);
    font-size: clamp(112px, 5.833vw, 224px);
  }

  .bayti-title-logo {
    width: clamp(270px, 14vw, 540px);
  }

  .livelife-title-logo {
    width: clamp(270px, 14vw, 540px);
  }

  .livelife-case .case-card p {
    max-width: 1100px;
    font-size: clamp(24px, 1.25vw, 48px);
  }

  .bayti-feature-list {
    max-width: 1100px;
    font-size: clamp(20px, 1.042vw, 40px);
  }

  .case-card p {
    max-width: 1100px;
    font-size: clamp(28px, 1.458vw, 56px);
  }

  .case-card dl {
    grid-template-columns: clamp(150px, 7.813vw, 300px) 1fr;
    gap: clamp(18px, 0.938vw, 36px) clamp(44px, 2.292vw, 88px);
    margin-top: clamp(185px, 9.635vw, 370px);
    font-size: clamp(24px, 1.25vw, 48px);
  }

  .contact-section {
    padding-block: clamp(320px, 16.688vw, 640px) clamp(230px, 11.979vw, 460px);
  }

  .contact-layout {
    column-gap: clamp(92px, 4.792vw, 184px);
  }

  .contact-form {
    gap: clamp(38px, 1.979vw, 76px);
  }

  .contact-form input,
  .contact-form textarea {
    min-height: clamp(85px, 4.427vw, 170px);
    padding-inline: clamp(40px, 2.083vw, 80px);
    font-size: clamp(28px, 1.458vw, 56px);
  }

  .contact-form textarea {
    min-height: clamp(252px, 13.125vw, 504px);
    padding-top: clamp(32px, 1.667vw, 64px);
  }

  .contact-form button {
    height: clamp(80px, 4.167vw, 160px);
    margin-top: clamp(26px, 1.354vw, 52px);
    font-size: clamp(24px, 1.25vw, 48px);
  }

  .site-footer {
    --footer-content-width: min(80vw, 3000px);
  }
}

/* On shorter desktop windows, preserve the card's inner breathing room before
   the longer SIIN summary can meet the metadata at the bottom edge. */
@media (min-width: 1280px) and (max-height: 1150px) {
  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    padding-top: clamp(112px, 6.25vw, 120px);
    padding-bottom: clamp(52px, 3.333vw, 64px);
  }

  .siin-case .case-card h2,
  .bayti-case .case-card h2,
  .livelife-case .case-card h2 {
    margin-bottom: clamp(38px, 2.5vw, 48px);
    font-size: clamp(88px, 5vw, 104px);
  }

  .siin-case .case-card p {
    font-size: clamp(21px, 1.25vw, 24px);
    line-height: 1.35;
  }

  .siin-case .case-card dl {
    gap: 14px clamp(24px, 2.292vw, 44px);
    font-size: clamp(18px, 1.042vw, 20px);
  }

  .bayti-case .case-card dl {
    gap: 14px clamp(24px, 2.292vw, 44px);
    font-size: clamp(18px, 1.042vw, 20px);
  }

  .livelife-case .case-card p {
    font-size: clamp(18px, 1.146vw, 22px);
    line-height: 1.35;
  }

  .livelife-case .case-card dl {
    gap: 14px clamp(24px, 2.292vw, 44px);
    font-size: clamp(18px, 1.042vw, 20px);
  }
}

@media (max-width: 1279px) {
  .site-header {
    min-height: 118px;
    column-gap: 34px;
  }

  .brand-logo {
    width: 195px;
  }

  .main-nav {
    gap: 24px;
    font-size: 16px;
  }

  .theme-toggle {
    width: 44px;
    height: 44px;
  }

  .theme-icon {
    width: 21px;
    height: 21px;
  }

  .hero-section {
    height: 760px;
  }

  .hero-content {
    padding-top: 145px;
  }

  .hero-content h1 {
    max-width: 900px;
    font-size: clamp(64px, 8vw, 92px);
  }

  .primary-button {
    margin-top: 72px;
  }

  .service-layout,
  .vision-heading,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .service-layout > .ghost-title {
    padding: 70px 0;
  }

  .services-grid {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .vision-heading {
    gap: 44px;
  }

  .corner-heading {
    justify-self: start;
    margin-top: 0;
    transform: none;
  }

  .process-grid {
    gap: 48px;
  }

  .case-card {
    width: min(680px, 55vw);
    padding: 100px 48px 64px;
  }

  .case-card h2 {
    font-size: 72px;
  }

  .case-card p {
    font-size: 22px;
  }

  .case-card dl {
    grid-template-columns: 120px 1fr;
    font-size: 20px;
    margin-top: 120px;
  }

  .contact-form {
    grid-column: auto;
    grid-row: auto;
    margin-top: 50px;
  }

  .contact-note {
    grid-column: auto;
    grid-row: auto;
    margin-top: 64px;
  }

  .footer-main {
    padding-left: 56px;
  }
}

@media (max-width: 760px) {
  .hero-grid {
    display: none;
  }

  .hero-gif {
    opacity: 0.3;
  }

  .content {
    width: calc(100% - 40px);
  }

  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 64px;
    padding: 12px 20px;
    overflow: hidden;
  }

  .brand {
    flex: 0 0 auto;
  }

  .brand-logo {
    width: 96px;
  }

  .main-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
    gap: 0;
    font-size: clamp(7px, 2.15vw, 9px);
    white-space: nowrap;
  }

  .theme-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .theme-icon {
    width: 18px;
    height: 18px;
  }

  .hero-section {
    height: 500px;
  }

  .hero-content {
    padding-top: 92px;
  }

  .eyebrow {
    gap: 10px;
    margin-bottom: 36px;
    font-size: 15px;
  }

  .eyebrow span {
    width: 40px;
  }

  .hero-content h1 {
    font-size: clamp(44px, 14vw, 70px);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .hero-title__line--one {
    gap: 0.23em;
  }

  .primary-button {
    min-width: 160px;
    height: 56px;
    margin-top: 58px;
    font-size: 17px;
  }

  .intro-section {
    padding: 78px 0 60px;
  }

  .section-rule {
    gap: 22px;
    margin-bottom: 40px;
  }

  .section-rule::before {
    width: 30px;
    height: 30px;
  }

  .intro-copy {
    font-size: 21px;
    line-height: 1.55;
  }

  .ghost-title {
    font-size: clamp(52px, 16vw, 82px);
  }

  .contact-layout > .ghost-title {
    transform: translateY(-12px);
  }

  .services-section,
  .clients-section,
  .vision-section,
  .stats-section {
    padding-bottom: 120px;
  }

  .services-grid,
  .process-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stats-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .stats-stage-cell {
    display: none;
  }

  .stats-grid {
    grid-column: 1;
    grid-row: 1;
  }

  .stats-grid article {
    min-height: 220px;
    gap: 42px;
  }

  .stats-lower-grid {
    grid-column: 1;
    grid-row: 2;
    min-height: 132px;
  }

  .trust-copy {
    padding: 0 20px;
  }

  .services-grid article,
  .services-grid article:nth-child(2n),
  .services-grid article:nth-last-child(-n + 2),
  .stats-grid article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .services-grid article:last-child,
  .stats-grid article:last-child {
    border-bottom: 0;
  }

  .services-grid article {
    min-height: 220px;
    padding: 30px;
  }

  .services-grid h3 {
    font-size: 22px;
  }

  .service-hover-copy {
    padding: 30px;
  }

  .service-hover-copy p:not(.service-hover-title) {
    max-width: 100%;
    margin-top: 28px;
    font-size: 21px;
  }

  .clients-section .ghost-title {
    margin-bottom: 40px;
  }

  .vision-heading {
    margin-bottom: 80px;
  }

  .corner-heading {
    font-size: 22px;
  }

  .process-grid {
    gap: 54px;
  }

  .process-grid h3 {
    font-size: 28px;
  }

  .process-grid p {
    font-size: 18px;
  }

  .stats-grid strong {
    font-size: 56px;
  }

  .stats-grid span {
    font-size: 14px;
  }

  .trust-copy {
    font-size: 14px;
    line-height: 1.5;
  }

  .case-study,
  .photo-case,
  .photo-case:last-child {
    min-height: auto;
    padding: 36px 20px 420px;
  }

  .siin-case,
  .bayti-case,
  .livelife-case {
    display: block;
    min-height: 920px;
  }

  .siin-visual-frame {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }

  .siin-logo-frame {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
  }

  .siin-logo {
    right: -30px;
    top: 310px;
    width: 260px;
  }

  .siin-phone--rear {
    top: 365px;
    right: 33vw;
    width: 42vw;
  }

  .siin-phone--front {
    top: 490px;
    right: -10vw;
    width: 42vw;
  }

  .case-photo {
    position: absolute;
    top: 0;
    height: 100%;
    transform: none;
  }

  .case-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: auto;
    padding: 48px 28px;
  }

  .photo-case .case-card {
    position: relative;
    top: auto;
    margin-left: 0;
  }

  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    position: relative;
    top: auto;
    margin-left: 0;
    height: auto;
  }

  .photo-case .case-card,
  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    height: 740px;
    min-height: 740px;
  }

  .case-card h2 {
    margin-bottom: 28px;
    font-size: 48px;
  }

  .siin-title-logo {
    width: 150px;
  }

  .bayti-title-logo {
    width: 180px;
  }

  .livelife-title-logo {
    width: 180px;
  }

  .livelife-case .case-card p {
    padding-right: 0;
    font-size: 15px;
  }

  .case-card p {
    font-size: 16px;
  }

  .case-card dl {
    grid-template-columns: 98px 1fr;
    gap: 12px 22px;
    margin-top: 54px;
    font-size: 15px;
  }

  .contact-section {
    padding: 84px 0 92px;
  }

  .contact-form input,
  .contact-form textarea {
    min-height: 46px;
    padding: 0 18px;
    font-size: 14px;
  }

  .contact-form textarea {
    min-height: 120px;
    padding-top: 16px;
  }

  .contact-form button {
    height: 50px;
    font-size: 13px;
  }

  .contact-note p {
    font-size: 15px;
  }

  .site-footer .content {
    width: calc(100% - 40px);
  }

  .footer-top {
    min-height: 64px;
    font-size: 10px;
  }

  .footer-main {
    min-height: 260px;
    padding-left: 0;
  }

  .footer-main p {
    font-size: 26px;
  }

  .footer-email {
    font-size: clamp(40px, 12vw, 70px);
  }

  .footer-copy-button {
    right: 0;
    top: -34px;
    font-size: 10px;
  }

  .footer-copy-button__icon {
    width: 10px;
    height: 10px;
  }

  .footer-nav {
    justify-content: flex-start;
    padding: 22px 0;
    font-size: 10px;
  }

  .footer-nav-group {
    gap: 18px 28px;
    flex-wrap: wrap;
  }

  .footer-nav-group--social {
    justify-content: flex-start;
  }

  .footer-hover-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 64px 260px minmax(0, 1fr);
  }

  .footer-hover-cell {
    display: none;
  }

  .footer-hover-cell--top-center,
  .footer-hover-cell--main-center,
  .footer-hover-cell--nav-legal {
    display: block;
    grid-column: 1;
  }

  .footer-hover-cell--top-center {
    grid-row: 1;
  }

  .footer-hover-cell--main-center {
    grid-row: 2;
  }

  .footer-hover-cell--nav-legal {
    grid-row: 3;
  }

  .site-footer:has(.footer-nav-group--social a:hover) .footer-hover-cell--nav-legal::before,
  .site-footer:has(.footer-nav-group--social a:focus-visible) .footer-hover-cell--nav-legal::before {
    opacity: 1;
    transition: opacity 850ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (max-width: 390px) {
  .site-header {
    padding-inline: 16px;
  }

  .brand-logo {
    width: 92px;
  }
}

/* Phone layout: these overrides intentionally live below the desktop and
   tablet rules so no desktop measurements or interactions are changed. */
@media (max-width: 760px) {
  html,
  body,
  .site-shell {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Footer sections already draw their own borders on mobile. Hide the
     desktop overlay rules so each footer division has a single line. */
  .site-footer::before,
  .site-footer::after {
    display: none;
  }

  .content {
    width: calc(100% - 40px);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 68px;
    padding: 12px 20px;
    gap: 12px;
    overflow: visible;
    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);
  }

  .brand-logo {
    width: clamp(104px, 31vw, 124px);
  }

  .mobile-nav-toggle {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    cursor: pointer;
  }

  .mobile-nav-toggle span {
    position: absolute;
    width: 17px;
    height: 2px;
    background: currentColor;
    transition: transform 180ms ease;
  }

  .mobile-nav-toggle span:first-child {
    transform: translateY(-4px);
  }

  .mobile-nav-toggle span:last-child {
    transform: translateY(4px);
  }

  .mobile-nav-toggle[aria-expanded="true"] span:first-child {
    transform: rotate(45deg);
  }

  .mobile-nav-toggle[aria-expanded="true"] span:last-child {
    transform: rotate(-45deg);
  }

  .main-nav {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    width: auto;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    box-shadow: 0 22px 50px rgb(0 0 0 / 22%);
    font-size: 13px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }

  .main-nav a {
    display: grid;
    place-items: center;
    min-height: 56px;
    background: var(--light-hero);
  }

  body.theme-dark .main-nav a {
    background: #141616;
  }

  body.mobile-nav-open .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .theme-toggle {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .hero-section {
    height: auto;
    min-height: 620px;
  }

  .hero-content {
    padding-top: clamp(74px, 20vw, 94px);
    padding-bottom: 64px;
  }

  .eyebrow {
    margin-bottom: 34px;
    font-size: clamp(13px, 4vw, 15px);
  }

  .hero-content h1 {
    max-width: 100%;
    font-size: clamp(40px, 12.4vw, 56px);
    line-height: 1.08;
  }

  .hero-title__line--one {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.22em;
    white-space: normal;
  }

  .hero-title__suffix {
    flex: 0 0 100%;
  }

  .hero-title__line--two {
    margin-top: 0;
  }

  .primary-button {
    min-width: 154px;
    height: 54px;
    margin-top: 42px;
    font-size: 15px;
  }

  .intro-section {
    padding: 76px 0 72px;
  }

  #about,
  #contact {
    scroll-margin-top: 0;
  }

  .intro-copy {
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1.48;
  }

  .services-section,
  .clients-section,
  .vision-section,
  .stats-section {
    padding-bottom: 96px;
  }

  .clients-section {
    padding-bottom: 0;
  }

  .service-side-cell,
  .service-what-panel {
    display: none;
  }

  .service-layout {
    width: 100%;
  }

  .service-layout::before,
  .service-layout::after {
    display: none;
  }

  .service-layout > .ghost-title {
    padding: 64px 20px 56px;
  }

  .services-grid article {
    min-height: 184px;
    padding: 26px 24px;
    /* These cards are scroll-controlled on phones. Disabling direct pointer
       interaction prevents mobile browsers from retaining a sticky :hover
       state after a tap and opening more than one card at once. */
    pointer-events: none;
    transition: background-color 260ms ease;
  }

  /* Phone scroll state reveals the card's details within the original card
     size. Unlike the desktop hover, it never stretches the service grid. */
  .services-grid article.service-scroll-active {
    background-color: #e9eaea;
  }

  body.theme-dark .services-grid article.service-scroll-active {
    background-color: #252a33;
  }

  .services-grid article.service-scroll-active h3,
  .services-grid article.service-scroll-active .service-number {
    opacity: 0;
    transform: translateX(120%);
  }

  .services-grid article.service-scroll-active .service-number::after {
    transform: translateX(300%) scaleX(4);
  }

  .services-grid article.service-scroll-active .service-hover-copy,
  .services-grid article.service-scroll-active .service-hover-title,
  .services-grid article.service-scroll-active .service-hover-copy p:not(.service-hover-title) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0ms;
  }

  /* A tap can leave focus on a tabindex card in mobile browsers. That must
     not invoke the desktop keyboard-hover treatment or allow more than the
     one scroll-selected card to appear open. */
  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) {
    background-color: transparent;
  }

  body.theme-dark .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) {
    background-color: transparent;
  }

  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) h3,
  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) .service-number {
    opacity: 1;
    transform: none;
  }

  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) .service-number::after {
    transform: none;
  }

  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) .service-hover-copy,
  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) .service-hover-title,
  .services-grid article:is(:hover, :focus-visible):not(.service-scroll-active) .service-hover-copy p:not(.service-hover-title) {
    opacity: 0;
    transform: translateX(-64px);
  }

  .service-hover-copy {
    padding: 26px 24px;
  }

  .service-hover-title {
    font-size: 16px;
  }

  .service-hover-copy p:not(.service-hover-title) {
    margin-top: 19px;
    font-size: 21px;
    line-height: 1.24;
  }

  .client-marquee {
    --client-cell-width: 50vw;
    --client-row-height: 122px;
    --client-edge-width: 0px;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .client-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-row-viewport {
    position: relative;
    grid-column: 1 / -1;
    min-width: 0;
  }

  .client-logo-cell {
    /* Keep the cell borders on the moving track, just as on desktop. The
       previous static overlay left the boxes behind while only logos moved. */
    border-right: 1px solid var(--line);
  }

  .client-row-spacer {
    display: none;
  }

  .client-logo {
    max-width: min(var(--logo-max-width, 62%), 108px);
    max-height: 64px;
  }

  .vision-heading {
    gap: 36px;
    margin-bottom: 64px;
  }

  .vision-section {
    padding-top: 72px;
  }

  .corner-heading {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    padding: 16px 20px 16px 40px;
    font-size: clamp(18px, 5.4vw, 22px);
  }

  .corner-heading::before,
  .corner-heading::after {
    position: absolute;
    width: 30px;
    height: 30px;
    border-width: 3px;
  }

  .corner-heading::before {
    top: 0;
    left: 0;
    margin: 0;
  }

  .corner-heading::after {
    right: 0;
    bottom: 0;
    margin: 0;
  }

  .ghost-title.mobile-in-view,
  body.theme-dark .ghost-title.mobile-in-view,
  .service-layout:has(.ghost-title.mobile-in-view) > .ghost-title {
    color: var(--pink);
  }

  .process-grid {
    gap: 48px;
  }

  .process-grid article {
    min-height: 160px;
  }

  .process-grid article::after {
    opacity: 0.55;
    transform: none;
  }

  .stats-grid article {
    min-height: 190px;
    gap: 30px;
  }

  .stats-lower-grid {
    min-height: 104px;
  }

  .work-section {
    overflow: hidden;
  }

  .siin-case,
  .bayti-case,
  .livelife-case {
    display: grid;
    grid-template-rows: auto 400px;
    gap: 18px;
    min-height: auto;
    padding: 24px 20px 0;
    clip-path: none;
    overflow: hidden;
  }

  .siin-case .case-card,
  .bayti-case .case-card,
  .livelife-case .case-card {
    position: relative;
    grid-area: auto;
    align-self: auto;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .siin-case .case-card p,
  .bayti-case .case-card p,
  .livelife-case .case-card p {
    padding-right: 0;
  }

  .siin-case .case-card dl,
  .bayti-case .case-card dl,
  .livelife-case .case-card dl {
    margin-top: 42px;
  }

  .siin-logo-frame {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    height: 430px;
  }

  .siin-logo {
    right: -18px;
    top: 28px;
    width: 230px;
    height: 190px;
  }

  .siin-visual-frame {
    position: relative;
    inset: auto;
    grid-row: 2;
    width: 100%;
    height: 400px;
  }

  .siin-phone--rear {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
  }

  .siin-phone--front {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
  }

  .case-card h2 {
    margin-bottom: 26px;
    font-size: clamp(42px, 13vw, 52px);
  }

  .case-card p,
  .livelife-case .case-card p {
    font-size: 15px;
    line-height: 1.5;
  }

  .case-card dl {
    grid-template-columns: minmax(76px, 28%) 1fr;
    gap: 11px 16px;
    margin-top: 42px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* Mobile project composition: keep each project's existing palette and
     assets, but present the information panel first and the device artwork as
     a paired mockup below it. These rules deliberately reset only the phone
     layout; desktop and tablet retain their pinned case-study composition. */
  .work-section {
    --mobile-project-gutter: 16px;
  }

  .work-section .case-study,
  .work-section .photo-case,
  .work-section .photo-case:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 390px;
    gap: 16px;
    min-height: 0;
    padding: 24px var(--mobile-project-gutter) 0;
    clip-path: none;
    isolation: isolate;
    overflow: hidden;
  }

  .work-section .case-study .case-card,
  .work-section .photo-case .case-card {
    position: relative;
    z-index: 3;
    grid-area: 1 / 1;
    align-self: start;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 24px 16px 20px;
    box-shadow: 0 18px 40px rgb(0 0 0 / 18%);
  }

  .work-section .case-study .case-card h2 {
    min-height: 0;
    margin: 0 0 14px;
    font-size: 32px;
    line-height: 1;
  }

  .work-section .case-study .case-card h2 img {
    display: block;
    width: auto;
    max-width: 156px;
    max-height: 48px;
    object-fit: contain;
  }

  .work-section .case-study .case-card p,
  .work-section .case-study.livelife-case .case-card p {
    max-width: none;
    padding: 0;
    font-size: clamp(11px, 3.1vw, 13px);
    line-height: 1.45;
  }

  .work-section .case-study .case-card dl {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 5px 12px;
    margin-top: 18px;
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.25;
  }

  .work-section .siin-logo-frame,
  .work-section .injaz-logo-frame {
    display: none;
  }

  .work-section .siin-visual-frame,
  .work-section .injaz-device-frame,
  .work-section .sulb-device-frame,
  .work-section .diabetes-device-frame,
  .work-section .tarteeb-device-frame {
    position: relative;
    z-index: 2;
    inset: auto;
    grid-area: 2 / 1;
    align-self: stretch;
    width: 100%;
    height: 390px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .work-section .siin-phone,
  .work-section .injaz-phone {
    position: absolute;
    height: auto;
    width: min(39vw, 154px);
    will-change: auto;
    transform: none !important;
  }

  .work-section .siin-phone--rear,
  .work-section .injaz-phone--rear {
    z-index: 1;
    top: 0;
    right: auto;
    left: 9%;
  }

  .work-section .siin-phone--front,
  .work-section .injaz-phone--front {
    z-index: 2;
    top: 62px;
    right: 6%;
    left: auto;
  }

  .work-section .sulb-device,
  .work-section .diabetes-device,
  .work-section .tarteeb-device {
    position: absolute;
    top: 36px;
    right: auto;
    left: 50%;
    width: min(90%, 340px);
    height: auto;
    transform: translateX(-50%) !important;
    will-change: auto;
  }

  .work-section .mnsaj-case .mnsaj-title {
    width: 116px;
    height: 48px;
  }

  .work-section .diabetes-case .diabetes-title {
    margin-bottom: 14px;
  }

  .work-section .diabetes-title-logo {
    transform: none;
  }

  .photo-case,
  .photo-case:last-child {
    min-height: 760px;
    padding: 24px 20px 300px;
    overflow: hidden;
  }

  .photo-case .case-card {
    width: 100%;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .photo-case .case-card {
    height: 780px;
    min-height: 780px;
  }

  .photo-case .case-card dl {
    margin-top: auto;
  }

  .case-photo {
    top: 0;
    height: 100%;
    object-position: center;
  }

  .contact-section {
    padding: 82px 0 88px;
  }

  .contact-form {
    gap: 14px;
    margin-top: 38px;
  }

  .contact-form input,
  .contact-form textarea {
    min-height: 52px;
    font-size: 16px;
  }

  .contact-form textarea {
    min-height: 140px;
  }

  .contact-form button {
    height: 54px;
    margin-top: 8px;
    font-size: 14px;
  }

  .contact-note {
    margin-top: 54px;
  }

  .footer-main {
    min-height: 230px;
    padding: 58px 24px 38px;
    justify-items: start;
    text-align: left;
  }

  .footer-main p,
  .footer-email-wrap {
    justify-self: start;
  }

  .footer-main p {
    margin-bottom: 30px;
    font-size: 24px;
  }

  .footer-email {
    font-size: clamp(32px, 10.5vw, 46px);
  }

  .footer-hover-grid {
    grid-template-rows: 64px 230px minmax(0, 1fr);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 82px;
    padding: 16px 49px 16px 24px;
  }

  .footer-nav-group--locations {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .footer-nav-group--social {
    gap: 6px;
    justify-self: end;
    flex-wrap: nowrap;
  }

  .footer-nav .footer-nav-group--social a {
    padding: 8px 0;
    margin: 0;
    font-size: 7px;
  }

  .footer-nav .footer-location {
    gap: 5px;
    font-size: 8px;
  }

  .footer-location__pin {
    width: 12px;
    height: 12px;
  }

  .footer-location__copy {
    gap: 1px;
  }

  .footer-location__copy small {
    font-size: 0.8em;
  }
}

@media (max-width: 320px) {
  .footer-email {
    font-size: 25px;
  }
}

@media (max-width: 760px) {
  .limitless-case {
    display: grid;
    grid-template-rows: auto 400px;
    gap: 18px;
    min-height: auto;
    padding: 24px 20px 0;
    overflow: hidden;
  }

  .limitless-case .case-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .limitless-case .case-card p {
    padding-right: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .limitless-case .case-card dl {
    margin-top: 42px;
  }

  .limitless-case .siin-visual-frame {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 400px;
  }

  .limitless-case .siin-logo-frame {
    position: absolute;
    inset: auto 0 0;
    width: auto;
    height: 430px;
  }

  .limitless-case .siin-logo {
    right: -18px;
    top: 28px;
    width: 300px;
    height: 190px;
  }

  .limitless-case .siin-phone--rear {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
  }

  .limitless-case .siin-phone--front {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
  }

  .limitless-title-logo {
    width: min(300px, 78vw);
  }

  .diabetes-case {
    display: grid;
    grid-template-rows: auto 300px;
    gap: 18px;
    min-height: auto;
    padding: 24px 20px 0;
    overflow: hidden;
  }

  .diabetes-case .case-card {
    position: relative;
    grid-area: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .diabetes-case .case-card p {
    padding-right: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .diabetes-case .case-card dl {
    margin-top: 52px;
  }

  .diabetes-title-logo {
    width: min(280px, 78vw);
    transform: translateY(-18px);
  }

  .diabetes-case .diabetes-title {
    margin-bottom: 22px;
  }

  .diabetes-case .case-card > p {
    transform: none;
  }

  .diabetes-case .diabetes-title {
    margin-bottom: 52px;
  }

  .diabetes-device-frame {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 300px;
  }

  .diabetes-device {
    top: 34px;
    right: -16%;
    width: 126%;
    transform: none;
  }

  .sulb-case {
    display: grid;
    grid-template-rows: auto 400px;
    gap: 18px;
    min-height: auto;
    padding: 24px 20px 0;
    overflow: hidden;
  }

  .sulb-case .case-card {
    position: relative;
    grid-area: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .sulb-case .case-card p {
    padding-right: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .sulb-case .case-card dl {
    margin-top: 42px;
  }

  .sulb-title-logo {
    width: min(280px, 78vw);
  }

  .sulb-device-frame {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 400px;
  }

  .sulb-device {
    top: 34px;
    right: -16%;
    width: 126%;
    transform: none;
  }

  .injaz-case {
    display: grid;
    grid-template-rows: auto 400px;
    gap: 18px;
    min-height: auto;
    padding: 24px 20px 0;
    overflow: hidden;
  }

  .injaz-case .case-card {
    position: relative;
    grid-area: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 42px 26px 38px;
    box-shadow: 0 22px 55px rgb(0 0 0 / 16%);
  }

  .injaz-case .case-card p {
    padding-right: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .injaz-case .case-card dl {
    margin-top: 42px;
  }

  .injaz-title-logo {
    width: min(280px, 78vw);
  }

  .injaz-device-frame {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 400px;
  }

  .injaz-phone--rear {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
    transform: none;
  }

  .injaz-phone--front {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
    transform: none;
  }

  .mnsaj-case .siin-phone--rear {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
  }

  .mnsaj-case .siin-phone--front {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
  }

  .janat-case .siin-phone--rear {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
  }

  .janat-case .siin-phone--front {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
  }

  .siin-primary-case .siin-phone--rear {
    top: 88px;
    right: -6%;
    width: clamp(164px, 47vw, 202px);
  }

  .siin-primary-case .siin-phone--front {
    top: 2px;
    right: 34%;
    width: clamp(164px, 47vw, 202px);
  }

  .tarteeb-device-frame {
    position: relative;
    grid-row: 2;
    width: 100%;
    height: 400px;
  }

  .tarteeb-device {
    top: 34px;
    right: -16%;
    width: 126%;
    transform: none;
  }

}

/* Bayti is the reference for the project-information column. Keep every
   project mark in the same visual box so the summary begins on one baseline. */
.work-section .case-study .case-card {
  --case-content-safe-width: clamp(360px, 28vw, 540px);
}

/* Keep the information itself in a protected column inside the card. The
   artwork can retain its intended overlap at the card edge, but it can never
   cover a logo, description, or project detail on smaller laptop screens. */
@media (min-width: 761px) {
  .work-section .case-study .case-card > h2,
  .work-section .case-study .case-card > p,
  .work-section .case-study .case-card > dl {
    max-width: var(--case-content-safe-width);
  }

  .work-section .case-study .case-card dd {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .work-section .case-study .case-card {
    --case-content-safe-width: 280px;
  }
}

/* A 150% browser zoom on a small laptop presents the page as this compact
   desktop viewport. Keep all project cards in one consistent, self-contained
   type and logo scale without touching the mobile layout or screen artwork. */
@media (min-width: 761px) and (max-width: 1280px) and (max-height: 820px) {
  /* At 150% browser zoom, a small laptop becomes this effective viewport.
     Treat it as a compact desktop rather than allowing the large desktop
     canvas to spill into the following sections. */
  .site-header {
    min-height: 84px;
    padding-inline: 48px;
  }

  .brand-logo {
    width: 180px;
  }

  .hero-section {
    height: calc(100svh - 84px);
    min-height: 620px;
  }

  .hero-grid {
    grid-template-rows: 10% 80% 10%;
  }

  .hero-content {
    padding-top: clamp(94px, 13vh, 118px);
  }

  .eyebrow {
    margin-bottom: 32px;
    font-size: 16px;
  }

  .hero-content h1 {
    font-size: clamp(64px, 7.2vw, 82px);
    line-height: 1.12;
  }

  .primary-button {
    min-width: 176px;
    height: 60px;
    margin-top: 52px;
    font-size: 16px;
  }

  .services-section {
    --service-grid-height: 360px;
    padding-bottom: 120px;
  }

  .services-section .ghost-title {
    font-size: 64px;
    line-height: 1.05;
  }

  /* Browser zoom can leave the effective width at 1279px. That previously
     matched the tablet one-column rule above; explicitly restore the desktop
     two-column frame here so the title panel and service grid share one row. */
  .service-layout {
    grid-template-columns: 33.333% minmax(0, 1fr);
    grid-template-rows: var(--service-grid-height);
  }

  .service-layout > .ghost-title {
    grid-column: 1;
    grid-row: 1;
    padding-left: 24px;
  }

  /* Preserve the desktop rollover at 150%, but make its hit area exactly the
     same left column as the compact title.  The service cards remain in the
     right two-column grid and are never part of this hover state. */
  .service-what-panel {
    display: block;
    width: 33.333%;
  }

  .service-side-cell {
    display: block;
  }

  .services-grid article {
    min-height: 180px;
    --service-card-padding: 24px;
  }

  .services-grid {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .services-grid h3 {
    font-size: 22px;
    line-height: 1.15;
  }

  /* The moving client window is four cells wide at this zoom.  The global
     250px minimum made its last visible cell only partially fit; use four
     equal shares of the available 75vw client row instead. */
  .client-marquee {
    --client-cell-width: 18.75vw;
  }

  .vision-section {
    padding: 92px 0 128px;
  }

  .vision-heading {
    /* Reserve the centre column at 150% so the framed Vision statement sits
       in the right-hand panel, matching the desktop composition. */
    grid-template-columns: 472px minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    margin-bottom: 96px;
  }

  .vision-section .ghost-title {
    font-size: 72px;
    line-height: 1.05;
  }

  .corner-heading {
    justify-self: start;
    max-width: 560px;
    font-size: 20px;
    line-height: 1.3;
  }

  .corner-heading::before,
  .corner-heading::after {
    width: 38px;
    height: 38px;
  }

  .corner-heading::before {
    margin-right: 18px;
  }

  .corner-heading::after {
    margin-left: 18px;
  }

  .work-section .case-study .case-card {
    --case-content-safe-width: 300px;
    --reference-logo-width: 156px;
    --reference-logo-height: 54px;
    --reference-title-gap: 24px;
    padding: 64px 40px 44px;
  }

  .work-section .case-study .case-card > p {
    font-size: 16px;
    line-height: 1.38;
  }

  .work-section .case-study .case-card > dl {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 9px 16px;
    font-size: 15px;
    line-height: 1.25;
  }

  .work-section .case-study .case-card > dl dt,
  .work-section .case-study .case-card > dl dd {
    font-size: inherit;
    line-height: inherit;
  }
}

/* 1080px-tall laptop/desktop windows: keep the protected content column
   readable without turning the description and detail rows into oversized,
   awkward wraps. This intentionally changes type only, not card or artwork
   geometry. */
@media (min-width: 1600px) and (max-width: 1999px) and (max-height: 1150px) {
  .work-section .case-study .case-card > p {
    font-size: 20px;
    line-height: 1.35;
  }

  .work-section .case-study .case-card > dl {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px 24px;
    font-size: 16px;
    line-height: 1.25;
  }

  .work-section .case-study .case-card > dl dt,
  .work-section .case-study .case-card > dl dd {
    font-size: inherit;
    line-height: inherit;
  }

  .work-section .case-study .case-card > dl dd {
    overflow-wrap: normal;
  }
}

.work-section .case-study .case-card {
  --reference-logo-width: clamp(200px, 15.5vw, 300px);
  --reference-logo-height: clamp(82px, 6.35vw, 122px);
  --reference-title-gap: clamp(34px, 3.021vw, 58px);
}

.work-section .case-study .case-card > h2:has(img) {
  display: flex;
  align-items: flex-start;
  height: var(--reference-logo-height);
  margin: 0 0 var(--reference-title-gap);
}

.work-section .case-study .case-card > h2:has(img) > img {
  width: min(100%, var(--reference-logo-width));
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

/* Keep alternate light-mode artwork hidden unless light mode is active. */
.work-section .tarteeb-title-logo--light,
.work-section .sulb-title-logo--light {
  display: none;
}

body.theme-light .work-section .tarteeb-title-logo--dark,
body.theme-light .work-section .sulb-title-logo--dark {
  display: none;
}

body.theme-light .work-section .tarteeb-title-logo--light,
body.theme-light .work-section .sulb-title-logo--light {
  display: block;
}

/* These two cases previously moved their title/copy independently. Their
   artwork stays intact, but its content now follows the Bayti baseline. */
.work-section .diabetes-case .diabetes-title,
.work-section .sulb-case .sulb-title {
  margin-bottom: var(--reference-title-gap);
  transform: none;
}

.work-section .diabetes-case .case-card > p,
.work-section .sulb-case .case-card > p {
  transform: none;
}

@media (min-width: 2000px) {
  .work-section .case-study .case-card {
    --reference-logo-width: clamp(300px, 15.5vw, 600px);
    --reference-logo-height: clamp(122px, 6.35vw, 244px);
    --reference-title-gap: clamp(58px, 3.021vw, 116px);
  }
}

@media (max-width: 760px) {
  .work-section .case-study .case-card {
    --reference-logo-width: 200px;
    --reference-logo-height: 82px;
    --reference-title-gap: 26px;
  }
}

/* Keep the compact phone composition last: project-specific desktop offsets
   are declared throughout this stylesheet and must not win on a phone. */
@media (max-width: 760px) {
  .work-section .case-study,
  .work-section .photo-case,
  .work-section .photo-case:last-child {
    grid-template-rows: 300px 390px;
  }

  .work-section .case-study .case-card {
    --reference-logo-width: 156px;
    --reference-logo-height: 48px;
    --reference-title-gap: 14px;
    top: 0;
    left: 0;
    height: 300px;
    overflow: hidden;
  }

  .work-section .case-study .siin-visual-frame,
  .work-section .case-study .injaz-device-frame,
  .work-section .case-study .sulb-device-frame,
  .work-section .case-study .diabetes-device-frame,
  .work-section .case-study .tarteeb-device-frame {
    grid-row: 2;
    height: 390px;
  }

  .work-section .case-study .case-card > h2:has(img) {
    height: 48px;
    margin: 0 0 14px;
  }

  .work-section .case-study .siin-phone--rear,
  .work-section .case-study .injaz-phone--rear {
    top: 0;
    right: auto;
    left: 9%;
    width: min(39vw, 154px);
    height: 320px;
    object-fit: contain;
    object-position: center bottom;
  }

  .work-section .case-study .siin-phone--front,
  .work-section .case-study .injaz-phone--front {
    top: 62px;
    right: 6%;
    left: auto;
    width: min(39vw, 154px);
    height: 320px;
    object-fit: contain;
    object-position: center bottom;
  }

  .work-section .case-study .sulb-device,
  .work-section .case-study .diabetes-device,
  .work-section .case-study .tarteeb-device {
    top: 36px;
    right: auto;
    left: 50%;
    width: min(90%, 340px);
    transform: translateX(-50%) !important;
  }

  /* The card title rule above makes heading images display:block; restore the
     inactive artwork state so the black/white logo variants never overlap. */
  body:not(.theme-light) .work-section .tarteeb-title-logo--light,
  body:not(.theme-light) .work-section .sulb-title-logo--light,
  body.theme-light .work-section .tarteeb-title-logo--dark,
  body.theme-light .work-section .sulb-title-logo--dark {
    display: none !important;
  }

  body.theme-light .work-section .tarteeb-title-logo--light,
  body.theme-light .work-section .sulb-title-logo--light {
    display: block !important;
  }
}