/* ---------- Design tokens ---------- */
:root {
  --color-text: #000000;
  --color-text-secondary: #6e6e73;
  --color-bg: #ffffff;
  --color-card-bg: #f7f7fb;
  --color-accent: #007aff;
  --color-accent-dark: #0a5fc4;
  --color-border: #e5e5ea;
  --hero-base-from: #f7f7fc;
  --hero-base-to: #ffffff;

  --font-body: 'Inter', system-ui, sans-serif;

  /* Sizes match the source design 1:1 at desktop width (verified against the Figma
     node data: hero h1 76px/800, section h2 44px/600, card h3 34px/600, lede
     24px/30px-lh, card body 16px/20px-lh). The clamp() floors only kick in below
     desktop width, where the design itself swaps to its own smaller tablet/mobile
     type scale — clamp keeps that transition smooth instead of jumping at a
     breakpoint. */
  --size-h1: clamp(2.5rem, 6vw, 4.75rem);
  --size-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --size-h3: clamp(1.375rem, 2.2vw, 1.625rem);
  --size-h4: clamp(1.375rem, 2vw, 2.125rem);
  --size-lede: clamp(1.25rem, 1.8vw, 1.5rem);
  --size-body: 1rem;
  --size-small: 0.875rem;

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --gap-section: clamp(64px, 9vw, 100px);
  --gap-lg: 40px;
  --gap-md: 30px;
  --gap-sm: 12px;

  --content-width: 1052px;
  --header-height: 80px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: 1rem;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn:hover { opacity: 0.85; }
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--ghost { background: rgba(0, 0, 0, 0.05); color: var(--color-text); }
.link-arrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 400;
  font-size: 1rem;
  line-height: 20px;
}
.link-arrow:hover { text-decoration: underline; }

picture { display: block; }

/* ---------- Site header ----------
   Exact values from the source Figma node ("Menu"): an 80px-tall invisible band
   that centers a much shorter 44px glass bar — not a full stadium pill, a 22px
   rounded rect, with a hairline border, light blur and a layered glass shadow
   (outer edge lines + drop shadow + inner highlights). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.site-header__bar {
  position: relative;
  width: 100%;
  max-width: 1004px;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 7px 0 20px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.5px);
  -webkit-backdrop-filter: blur(4.5px);
  border-radius: 22px;
  box-shadow:
    -2px 0 0 -1px rgba(0, 0, 0, 0.35),
    2px 0 0 -1px rgba(0, 0, 0, 0.35),
    0 6px 24px rgba(0, 0, 0, 0.09),
    inset 0 1px 0 #fff,
    inset 0 3px 6px rgba(255, 255, 255, 0.5),
    inset 0 -3px 12px rgba(255, 255, 255, 0.5),
    inset 0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 #fff;
}
.logo { display: flex; align-items: center; }
.logo svg { height: 22px; width: auto; display: block; }
.logo__dark { display: none; }

.nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__links { display: flex; align-items: center; }
.nav__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #000;
}
.nav__links a:hover { background: rgba(0, 0, 0, 0.05); }
.nav__links a.is-active { color: var(--color-accent); }
.nav__toggle {
  display: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle { color: var(--color-text); line-height: 0; }
.nav__toggle svg { display: block; }

body { padding-top: calc(var(--header-height)); }

/* ---------- Sub-nav (tech product tabs) ---------- */
.subnav, .subnav.wrap {
  padding-top: 24px;
  padding-bottom: 10px;
}
.subnav__inner {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
/* Each item is 70px wide: 30px-tall icon, 10px gap, 12/15 label at regular weight. */
.subnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 70px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 15px;
  color: var(--color-text-secondary);
}
.subnav a img { width: auto; height: 30px; }
.subnav a.is-active { color: var(--color-accent); }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
}
.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
}
.hero__media video, .hero__media img { width: 100%; height: auto; }
.eyebrow {
  display: block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hero h1 {
  font-size: var(--size-h1);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 900px;
  margin: 0 auto;
}
.hero h1 em { color: var(--color-accent); font-style: normal; }
.hero h1 em.cycle-word { display: inline-block; transition: opacity 0.3s ease, color 0.3s ease; }
.hero__lede {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: var(--size-lede);
  color: var(--color-text-secondary);
}
.hero .btn { margin-top: 28px; }
.hero__media--tight { margin-bottom: 0; }

/* Tech product pages: nav, video, then this gradient card, stacked with 10px gaps. */
.tech-top { display: flex; flex-direction: column; gap: 10px; }
.tech-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 60px 30px;
  text-align: center;
  background: linear-gradient(180deg, #f2f2f7 0%, var(--color-bg) 100%);
  border-radius: var(--radius-lg);
}
.tech-header h1 { font-size: var(--tech-h1, 76px); font-weight: 600; line-height: 1; }
.tech-header__icon { width: auto; height: 100px; }
.tech-header__text { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.tech-header__text h2 { max-width: 480px; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.tech-header__text p { max-width: 480px; font-size: 1.5rem; line-height: 30px; }
@media (max-width: 1023px) {
  .tech-header { padding: 60px 20px; }
  .tech-header h1 { font-size: var(--tech-h1-t, 56px); }
  .tech-header__text h2 { font-size: 1.5rem; }
  .tech-header__text p { font-size: 1rem; line-height: 20px; }
}
@media (max-width: 799px) {
  .tech-header h1 { font-size: var(--tech-h1-m, 56px); }
}
.dark-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 60px 30px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #1c1c1e 0%, #636366 100%);
  border-radius: var(--radius-lg);
}
.dark-card h2 { font-size: 2.75rem; font-weight: 600; line-height: 1; color: #8e8e93; }
.dark-card__icons { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; }
.dark-card__icons img { height: auto; width: auto; }
.dark-card__text { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; }
.dark-card__text h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.dark-card__text p { font-size: 1rem; line-height: 20px; }
@media (max-width: 1023px) {
  .dark-card h2 { font-size: 2.125rem; }
  .dark-card__text h3 { font-size: 1.5rem; }
}
/* "More Impact Stories" cards: title column | details column (row on desktop/tablet, stacked on
   mobile). The bold lead line shows on desktop, the plain repeat after the text on tablet only. */
.partner-groups { display: flex; flex-direction: column; width: 100%; text-align: left; }
.partner-group { display: flex; align-items: flex-start; gap: 30px; }
.partner-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.partner-card__logo { width: var(--logo-w, auto); height: var(--logo-h, 40px); max-width: none; }
.partner-card__text p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
.partner-card__link { display: flex; align-items: center; height: 40px; font-size: 1rem; line-height: 20px; color: var(--color-accent); }
.partner-card__link:hover { text-decoration: underline; }
@media (max-width: 799px) {
  .partner-group { flex-direction: column; }
  .partner-card { flex: none; width: 100%; }
  .partner-card__logo { width: var(--logo-w-m, var(--logo-w, auto)); height: var(--logo-h-m, var(--logo-h, 40px)); }
}
.think-cards { display: flex; align-items: flex-start; gap: 30px; width: 100%; text-align: left; }
.think-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.think-card h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.think-card p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) { .think-card h3 { font-size: 1.5rem; } }
@media (max-width: 799px) { .think-cards { flex-direction: column; } .think-card { flex: none; width: 100%; } }
.more-cards { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.more-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
  text-align: left;
}
.more-card__title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; }
.more-card__icon { display: flex; align-items: center; justify-content: center; width: 120px; height: 60px; }
.more-card__title h3 { align-self: stretch; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.more-card__details { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.more-card__details p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
.more-card__lead { font-size: 1.5rem !important; font-weight: 600; line-height: 24px !important; }
.more-card__tag { display: none; }
.more-card__link { display: flex; align-items: center; height: 40px; font-size: 1rem; line-height: 20px; color: var(--color-accent); }
.more-card__link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .more-card__lead { display: none; }
  .more-card__tag { display: block; }
  .more-card__title h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .more-cards { gap: 10px; }
  .more-card { flex-direction: column; align-items: center; padding: 20px; }
  .more-card__title, .more-card__details { flex: none; width: 100%; }
  .more-card__tag { display: none; }
}
.tri-cards { display: flex; align-items: flex-start; gap: 30px; width: 100%; text-align: left; }
.tri-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.tri-card h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.tri-card p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .tri-cards { gap: 20px; }
  .tri-card:first-child { padding: 20px; }
  .tri-card h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .tri-cards { flex-direction: column; gap: 10px; }
  .tri-card { flex: none; width: 100%; }
}
.trio__media { width: 100%; }
.trio__media video, .trio__media img { width: 100%; height: auto; }
.trio { display: flex; align-items: flex-start; gap: 30px; width: 100%; text-align: left; }
.trio__block { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 0 30px; }
.trio__block h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.trio__block p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .trio { gap: 20px; }
  .trio__block { padding: 0 20px; }
  .trio__block h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .trio { flex-direction: column; gap: 10px; }
  .trio__block { flex: none; width: 100%; }
}
.photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 60px 30px;
  text-align: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%),
    var(--card-img) center / cover no-repeat,
    linear-gradient(180deg, #000 0%, #0062cc 100%);
  background-blend-mode: overlay, normal, normal;
  border-radius: var(--radius-lg);
}
.photo-card--light {
  color: var(--color-text);
  background: linear-gradient(180deg, #e5e5ea 0%, #f7f7fc 50%, #fff 100%);
}
.photo-card--blue { background: linear-gradient(180deg, #000 0%, #0062cc 100%); }
.photo-card--blue .photo-card__icon { width: auto; height: 66px; }
.photo-card__lead { width: 100%; max-width: 480px; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.photo-card h2 { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.photo-card__icon { width: 76px; height: 76px; object-fit: contain; }
.photo-card__text { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; }
.photo-card__text h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.photo-card__text p { font-size: 1rem; line-height: 20px; }
@media (max-width: 1023px) {
  .photo-card h2 { font-size: 2.125rem; }
  .photo-card__text h3, .photo-card__lead { font-size: 1.5rem; }
}
.builders { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 640px; margin: 0 auto; text-align: center; }
.builders__title { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.builders__accent {
  font-size: 4.75rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, #0076ff 0%, #00baff 49.52%, #b9ecff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.builders__text { width: 100%; font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .builders { gap: 30px; }
  .builders__title { font-size: 2.125rem; }
  .builders__accent { font-size: 3.5rem; white-space: normal; max-width: 480px; width: 100%; }
}
.stack { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.stack__title { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.stack__media { width: 100%; overflow: hidden; }
.stack__media img { width: 100%; height: auto; }
.stack__accent {
  font-size: 4.75rem;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(180deg, #636366 0%, #c7c7cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stack__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 30px;
  background: #f7f7fc;
  border-radius: var(--radius-lg);
}
.stack__card h3 { width: 100%; max-width: 480px; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.stack__card p { width: 100%; max-width: 480px; font-size: 1rem; line-height: 20px; color: var(--color-text); }
.stack__text { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; }
.stack__text h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.stack__text p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .stack--text-first .stack__media { order: 1; }
  .stack--text-first .stack__text { order: 2; }
  .stack { gap: 20px; }
  .stack__title { font-size: 2.125rem; }
  .stack__text h3, .stack__card h3 { font-size: 1.5rem; }
  .stack__accent { font-size: 3.5rem; }
}
@media (max-width: 799px) {
  .stack { gap: 10px; }
}
.hero--left { text-align: left; }
.hero--left h1, .hero--left .hero__lede { margin-left: 0; }

/* Photo-backed page headers (Work, About, Impact, Partners, Book a Call): verified
   live against the source — the photo fades to WHITE at the bottom (not a dark
   scrim) and the text sitting in that faded area is BLACK, centered, not a
   bottom-left white overlay as first assumed. The "Header" frame's own second
   fill is a white 0%→100% opacity gradient, top to bottom. */
.hero-photo {
  position: relative;
  min-height: var(--hero-h, 420px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 30px;
  /* Bottom layer is the Header frame's own #F7F7FC→#FFF fill; the photo/dot-pattern
     PNG is partly transparent and sits on top of it (the white fade is ::before). */
  background-image: var(--hero-img, none), linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  background-size: cover, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
}
/* Impact story headers: shorter card (height comes from content), 56px title / 34px subtitle. */
.hero-photo.hero-photo--story { min-height: 0; }
.hero-photo--story .hero-photo__content h1 { font-size: 3.5rem; }
.hero-photo--story .hero-photo__tagline { max-width: none; font-size: 2.125rem; }
@media (max-width: 1023px) {
  .hero-photo.hero-photo--story { min-height: 0; }
  .hero-photo--story .hero-photo__content h1 { font-size: 2.75rem; }
  .hero-photo--story .hero-photo__tagline { font-size: 1.5rem; }
}
.hero-photo__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo__content {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  width: 100%;
  max-width: 944px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-photo__content h1 {
  font-size: 4.75rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 20px;
}
.gradient-text {
  background: linear-gradient(0deg, #b9ecff 0%, #00baff 50%, #0076ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-photo__tagline {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1;
  max-width: 480px;
}
.hero-photo__lede { font-size: 1.5rem; line-height: 1.25; color: var(--color-text); max-width: var(--lede-w, 480px); }
.hero-photo__lede p + p { margin-top: 8px; }
@media (max-width: 1023px) {
  .hero-photo { padding: 60px 20px; min-height: var(--hero-h-t, 300px); }
  .hero-photo__content h1 { font-size: 3.5rem; }
  .hero-photo__tagline { font-size: 1.5rem; }
  .hero-photo__lede { font-size: 1rem; line-height: 20px; }
}
.hero-photo .btn { margin-top: 20px; }

/* ---------- Sections ---------- */
.section {
  padding-top: var(--gap-section);
}
.section:first-child { border-top: none; }
.section__head {
  max-width: var(--content-width);
  margin: 0 0 var(--gap-md);
  justify-items: center;
}
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__eyebrow {
  display: block;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.section__title {
  font-size: var(--size-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.section__lede {
  margin-top: 14px;
  font-size: var(--size-lede);
  color: var(--color-text-secondary);
}
.section__lede p + p { margin-top: 12px; }
.section__icon { width: 40px; height: 40px; margin-bottom: 16px; }
.section__image { border-radius: var(--radius-lg); margin: var(--gap-md) 0; }
.section__video { border-radius: var(--radius-lg); overflow: hidden; margin: var(--gap-md) 0; }
.section__video video { width: 100%; }
.section__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-card-bg);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ---------- Card grid ---------- */
.cards {
  display: grid;
  /* A 200px floor keeps 3-up card rows (Work, Tech, ...) three-across down to
     tablet width (~750px content area) and only drops to a single column once
     the viewport genuinely can't fit two, matching the reference at all three
     breakpoints without needing separate snapshot layouts. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-md);
}
.cards--2col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 799px) {
  .cards, .cards--2col { grid-template-columns: 1fr; }
}
.card {
  /* Figma fill is a top-to-bottom gradient (card-gray to white), not a flat
     color — verified against the "Block" node's own GRADIENT_LINEAR fill. */
  background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-bg) 100%);
  border-radius: var(--radius-md);
  padding: 30px;
}
.card__icon {
  width: auto;
  height: 48px;
  border-radius: 0;
  margin-bottom: 16px;
}
.card__icon--logo {
  width: auto;
  height: 32px;
  border-radius: 0;
  background: none;
  object-fit: contain;
  object-position: left;
}
.card h3 {
  font-size: var(--size-h4);
  font-weight: 700;
  margin-bottom: 4px;
}
.card__meta {
  color: var(--color-text-secondary);
  font-size: var(--size-small);
  margin-bottom: 10px;
}
.card p {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.25;
}
.card p + p { margin-top: 10px; }
.card .link-arrow { display: inline-block; margin-top: 14px; }

/* ---------- Home blocks (Work / Tech) ----------
   Three gradient blocks side by side, each only as tall as its own content (the row
   aligns to the top, so blocks differ in height). Tablet drops the gap to 30px with
   24px headings; mobile stacks them. */
.hcards { display: flex; align-items: flex-start; gap: 30px; text-align: left; }
.hcard {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.hcard__icon { display: block; height: 60px; width: auto; max-width: none; }
.hcard h3 { align-self: stretch; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.hcard__details { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; }
.hcard__details p { align-self: stretch; font-size: 1rem; line-height: 20px; color: var(--color-text); }
.hcard__link { display: flex; align-items: center; height: 40px; font-size: 1rem; line-height: 20px; color: var(--color-accent); }
.hcard__link:hover { text-decoration: underline; }
@media (max-width: 1023px) {
  .hcard h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .hcards { flex-direction: column; align-items: stretch; }
  .hcard { flex: none; }
}

/* ---------- Row blocks (Work: "What we build") ----------
   Title (icon + heading) and details each take half of a full-width gradient row.
   Tablet tightens gaps/padding and drops the heading to 24px; mobile stacks. */
.section--rows .section__head, .section--home .section__head { text-align: center; margin-bottom: 30px; }
.section--rows .section__title, .section--home .section__title { font-size: 2.75rem; font-weight: 600; line-height: 1; letter-spacing: 0; }
.block-rows { display: flex; flex-direction: column; gap: 30px; }
.block-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.block-row__title {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.block-row__title img { height: 60px; width: auto; }
.block-row__title h3 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.block-row__details { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.block-row__details p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
.block-row__details p + p { margin-top: 10px; }
@media (max-width: 1023px) {
  .section--rows .section__head, .section--home .section__head { margin-bottom: 20px; }
  .section--rows .section__title, .section--home .section__title { font-size: 2.125rem; }
  .block-rows { gap: 20px; }
  .block-row { padding: 20px; }
  .block-row__title h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .section--rows .section__head, .section--home .section__head { margin-bottom: 10px; }
  .block-rows { gap: 10px; }
  .block-row { flex-direction: column; }
  .block-row__title, .block-row__details { flex: none; width: 100%; }
}

/* "How we work": dark gradient intro card, then step rows. */
.process-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px;
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #1c1c1e 0%, #636366 100%);
  border-radius: var(--radius-lg);
}
.process-headline--plain { margin-bottom: 0; color: var(--color-text); background: #f7f7fc; }
.process-headline h3 { max-width: 480px; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.process-headline p { max-width: 480px; font-size: 1rem; line-height: 20px; }
.process-steps { display: flex; flex-direction: column; gap: 30px; }
.process-step {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.process-step__title { flex: 1 1 0; min-width: 0; text-align: right; font-size: 2.125rem; font-weight: 600; line-height: 1; color: #636366; }
.process-step__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: linear-gradient(0deg, #b9ecff 0%, #00baff 50%, #0076ff 100%);
  color: #fff;
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1;
}
.process-step__text { flex: 1 1 0; min-width: 0; }
.process-step__text p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .process-headline:not(.process-headline--plain) { margin-bottom: 20px; }
  .process-headline h3, .process-step__title { font-size: 1.5rem; }
  .process-step__num { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .process-headline:not(.process-headline--plain) { margin-bottom: 10px; }
  .process-step { flex-direction: column; gap: 10px; text-align: center; }
  .process-step__num { order: 0; }
  .process-step__title { order: 1; flex: none; width: 100%; text-align: center; }
  .process-step__text { order: 2; flex: none; width: 100%; }
}

/* Tech "What you can build": two-up feature cards. */
.feature-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }
.feature-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.feature-step__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 100px; min-height: 100px; }
.feature-step__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.feature-step__text h3 { font-size: 1rem; font-weight: 600; line-height: 20px; }
.feature-step__text p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .feature-steps { gap: 20px; }
  .feature-step { padding: 20px; }
}
@media (max-width: 799px) {
  .feature-steps { grid-template-columns: 1fr; gap: 10px; }
  .feature-step { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; }
  .feature-step__text { width: 100%; flex: none; }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
}
.step { display: flex; gap: 16px; }
.step__num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.step h4 { font-size: var(--size-h4); font-weight: 600; margin-bottom: 8px; line-height: 1.15; }
.step p { color: var(--color-text-secondary); font-size: 1rem; line-height: 1.25; }

/* ---------- Logo strip ---------- */
.logo-strip { text-align: center; }
.separator { height: 1px; margin: var(--gap-section) 0 0; border: 0; background: #d1d1d6; }
.logo-strip__label { color: var(--color-text); font-size: 1.5rem; line-height: 30px; margin-bottom: 30px; }
/* Two rows of three logos, 100px apart, rows 30px apart; on mobile a single column. Logos keep the
   greys drawn in the design (no filter/opacity). On tablet the first two swap places. */
.logo-strip__grid { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.logo-strip__row { display: flex; align-items: center; justify-content: center; gap: 100px; }
.logo-strip__grid a { display: flex; }
.logo-strip__grid img { display: block; max-width: none; }
.logo-strip__grid a:hover img { opacity: 0.75; }
@media (max-width: 1023px) {
  .logo-strip__label { font-size: 1rem; line-height: 20px; }
}
@media (min-width: 800px) and (max-width: 1023px) {
  .logo-strip__row:first-child a:nth-child(1) { order: 2; }
  .logo-strip__row:first-child a:nth-child(2) { order: 1; }
  .logo-strip__row:first-child a:nth-child(3) { order: 3; }
}
@media (max-width: 799px) {
  .logo-strip__row { flex-direction: column; gap: 30px; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 50px 30px;
  min-height: var(--cta-h, 482px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  margin-top: var(--gap-section);
  background-color: #fff;
  background-image: var(--hero-img, none);
  /* The Figma fill is scaleMode FILL (cover), not a tile — the dot-grid PNG is
     one large (2000x1600) sparse pattern meant to be stretched/cropped to the
     banner's own box, same as any other cover background-image. */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.cta-banner__icon { width: 147px; height: 76px; object-fit: contain; }
.cta-banner h2 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 52px;
  width: 100%;
  margin: 0 auto;
  /* Source gradient runs bottom-to-top (0deg in CSS' "from the bottom" reading). */
  background: linear-gradient(0deg, #b9ecff 0%, #00baff 50%, #0076ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-banner__lede { width: 100%; max-width: 944px; margin: 0 auto; color: var(--color-text); }
.cta-banner__lede p:first-child {
  font-weight: 600;
  font-size: 2.125rem;
  line-height: 1;
  margin-bottom: 10px;
}
.cta-banner__lede p + p { font-size: 1.5rem; line-height: 30px; margin-top: 0; }
@media (max-width: 1023px) {
  .cta-banner { min-height: var(--cta-h-t, 442px); }
  .cta-banner h2 { font-size: 2.125rem; line-height: 42px; }
  .cta-banner__lede p:first-child { font-size: 1.5rem; }
  .cta-banner__lede p + p { font-size: 1rem; line-height: 20px; }
}
@media (max-width: 799px) {
  .cta-banner { min-height: var(--cta-h-m, 0); }
}
.cta-banner__lede--single p:first-child { font-weight: 400; font-size: 1.5rem; line-height: 30px; margin-bottom: 0; }
@media (max-width: 1023px) { .cta-banner__lede--single p:first-child { font-size: 1rem; line-height: 20px; } }
.cta-banner__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cta-banner__link { display: flex; align-items: center; justify-content: center; height: 40px; color: var(--color-accent); font-weight: 400; font-size: 1rem; line-height: 20px; }
.cta-banner__link:hover { text-decoration: underline; }

/* 404: the CTA banner with a big gradient "404" as its headline. */
.notfound__code {
  width: 100%;
  font-size: 4.75rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(0deg, #b9ecff 0%, #00baff 50%, #0076ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 1023px) { .notfound__code { font-size: 3.5rem; } }

/* ---------- Case-study blocks (Impact) ----------
   Full-width two-column rows, stacked — icon+title centered on the left, details
   left-aligned on the right — verified against the source CSS, not a card grid. */
.case-list { display: flex; flex-direction: column; gap: var(--gap-section); }
.case {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: 30px;
  background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-bg) 100%);
  border-radius: var(--radius-lg);
}
.case__title {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.case__icon { width: 120px; height: 60px; object-fit: contain; }
.case__title h3 { font-size: var(--size-h4); font-weight: 600; line-height: 1; }
.case__meta { font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--color-text); }
.case__details {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.case__hook { font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--color-text); }
.case__details p { color: var(--color-text); font-size: 1rem; line-height: 1.25; }
.case__details .link-arrow { margin-top: 4px; }

@media (max-width: 799px) {
  .case { flex-direction: column; align-items: stretch; }
  .case__details { align-items: flex-start; text-align: left; }
}

/* ---------- Form (book a call) ----------
   One gradient card (#F7F7FC→#FFF, 22px radius) holding a centered 420px column:
   34px question titles, 30px checkbox-style radios (#F2F2F7, checked #007AFF),
   a 120px #F2F2F7 text field, the CTA and a centered note. Tablet/mobile use the
   design's own 20px gaps and 24px titles. */
.booking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 60px 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.form-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 420px;
}
.form-label {
  align-self: stretch;
  text-align: center;
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1;
}
.form-options { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.form-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: 1rem;
  line-height: 20px;
  cursor: pointer;
}
.form-options input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 10px;
  background: #f2f2f7 center / 14px 14px no-repeat;
  cursor: pointer;
}
.form-options input:checked {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 7.5l3.5 3.5 7.5-8.5'/%3E%3C/svg%3E");
}
.form-options input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
textarea, input[type="text"] {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  padding: 20px;
  background: #f2f2f7;
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 20px;
}
textarea { height: 120px; resize: none; display: block; }
textarea::placeholder { color: var(--color-text); opacity: 1; }
.form-note { width: 100%; max-width: 420px; text-align: center; font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .booking { padding: 60px 20px; gap: 20px; }
  .form-question { gap: 20px; }
  .form-label { font-size: 1.5rem; }
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 0;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.contact__title { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.contact__title h2 { font-size: 2.75rem; font-weight: 600; line-height: 1; }
.contact__title p { font-size: 1.5rem; line-height: 1.25; }
.contact-cards { display: flex; justify-content: center; padding: 0 30px; width: 100%; }
.contact-card {
  flex: none;
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px;
  text-align: center;
}
.contact-card img { width: 160px; height: 160px; border-radius: 100px; object-fit: cover; }
.contact-card h3 { align-self: stretch; max-width: 180px; margin-inline: auto; font-size: 2.125rem; font-weight: 600; line-height: 1; }
.contact-card__role { align-self: stretch; font-size: 1rem; font-weight: 600; line-height: 20px; }
@media (max-width: 1023px) {
  .contact__title h2 { font-size: 2.125rem; }
  .contact__title p { font-size: 1rem; line-height: 20px; }
  .contact-card h3 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .hero-photo { min-height: var(--hero-h-m, 340px); }
  .hero-photo.hero-photo--story { min-height: 0; }
  .contact-card { width: 295px; }
  .contact-cards { flex-direction: column; align-items: center; }
}

/* ---------- Site footer ---------- */
.site-footer { margin-top: var(--gap-section); }
.footer__banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.footer__banner > * { position: relative; z-index: 1; }
.footer__mark { width: 60px; height: 60px; margin-bottom: 10px; }
.footer__banner h2 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.footer__banner address { font-style: normal; opacity: 0.9; font-size: 1.5rem; line-height: 1.25; }

.footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap-md);
  padding: var(--gap-lg) 0;
}
.footer__col h3 {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-bottom: 14px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: 1rem; color: var(--color-text); }
.footer__col a:hover { color: var(--color-accent); }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: 24px 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 1rem;
  color: var(--color-text-secondary);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: var(--color-accent); }

/* ---------- Legal pages (Privacy Policy, Imprint) ---------- */
.legal { max-width: 760px; padding-top: var(--gap-section); padding-bottom: var(--gap-section); }
.legal h1 { font-size: 3.5rem; font-weight: 600; line-height: 1; margin-bottom: 40px; }
.legal h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 40px 0 12px; }
.legal h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.2; margin: 24px 0 8px; }
.legal p { font-size: 1rem; line-height: 1.5; color: var(--color-text); margin-bottom: 12px; }
.legal p a { color: var(--color-accent); }
.legal p a:hover { text-decoration: underline; }
.legal__meta { color: var(--color-text-secondary); margin-bottom: 24px; }
.legal ul { margin: 0 0 12px 20px; padding: 0; list-style: disc; }
.legal li { font-size: 1rem; line-height: 1.5; color: var(--color-text); margin-bottom: 6px; }
@media (max-width: 1023px) { .legal h1 { font-size: 2.75rem; } }

/* ---------- Cookie consent ---------- */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 2000; width: min(420px, calc(100vw - 40px)); }
.consent__card {
  padding: 24px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}
.consent__title { font-size: 1.25rem; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
.consent__text { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-secondary); margin-bottom: 16px; }
.consent__text a { color: var(--color-accent); }
.consent__settings { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.consent__settings[hidden] { display: none; }
.consent__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.875rem; cursor: pointer; }
.consent__row span { display: flex; flex-direction: column; gap: 2px; }
.consent__row small { color: var(--color-text-secondary); font-size: 0.8125rem; }
.consent__row input { flex: none; width: 20px; height: 20px; accent-color: var(--color-accent); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.consent__actions .btn { flex: 1 1 auto; }
@media (max-width: 799px) { .consent { left: 10px; right: 10px; bottom: 10px; width: auto; } }

/* ---------- Responsive ---------- */
/* Breakpoints follow the Figma frames: Desktop 1024+, Tablet 800-1023, Mobile 1-799.
   The phone-style header (hamburger + full-screen menu) is the Mobile one. */
@media (max-width: 799px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .hero { padding-top: 32px; }
}
@media (min-width: 800px) {
  .mobile-menu { display: none !important; }
}

/* Full-screen mobile nav overlay — matches the source's own live behavior exactly
   (verified via getComputedStyle on the running "/mobile-menu" frame, not just the
   still image): rows start flush at a 10px inset from the viewport edge — there is
   no header shown above them at all, since the source has no close button and no
   header while the overlay is open (picking a link is the only way out, which is
   fine here since every page is its own full navigation anyway). Row spec: 60px
   tall, 20px left text padding, 24px Inter Semi Bold, hairline divider under every
   row except the last ("Let's Talk"). */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: var(--color-bg);
  flex-direction: column;
  padding: 10px 10px 0;
  overflow-y: auto;
}
.mobile-menu.mobile-menu--open { display: flex; }
.mobile-menu a {
  display: flex;
  align-items: center;
  height: 60px;
  padding-left: 20px;
  border-bottom: 1px solid #d1d1d6;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}
.mobile-menu a:last-child { border-bottom: none; }
/* Rows slide up and fade in one after another when the menu opens. */
@keyframes mobile-menu-row { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.mobile-menu--open a { animation: mobile-menu-row 1s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.mobile-menu--open a:nth-child(1) { animation-delay: 0.08s; }
.mobile-menu--open a:nth-child(2) { animation-delay: 0.18s; }
.mobile-menu--open a:nth-child(3) { animation-delay: 0.28s; }
.mobile-menu--open a:nth-child(4) { animation-delay: 0.38s; }
.mobile-menu--open a:nth-child(5) { animation-delay: 0.48s; }
.mobile-menu--open a:nth-child(6) { animation-delay: 0.58s; }
@media (prefers-reduced-motion: reduce) { .mobile-menu--open a { animation: none; } }
.mobile-menu a.is-active { color: var(--color-accent); }
@media (max-width: 799px) { body.mobile-nav-open .site-header { display: none; } }

/* The design's page gutter is 10px at every breakpoint (frames 800 / 375 wide with
   780 / 355 of content); only desktop keeps the wider 24px so it centres in 1004. */
@media (max-width: 1023px) {
  .wrap { padding: 0 10px; }
}
@media (max-width: 799px) {
  .cta-banner { padding: 50px 30px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Impact story detail pages ---------- */
.story { padding-top: var(--gap-section); }
.story__layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Client / Industry / Scope: 4px blue bar + label and value, blocks 30px apart
   (20px tablet, 10px mobile), inset 30px on desktop only. */
.story-meta { display: flex; flex-direction: column; gap: 30px; padding: 0 30px; }
.story-meta__row { display: flex; align-items: stretch; gap: 10px; }
.story-meta__row::before { content: ''; flex: none; width: 4px; background: var(--color-accent); border-radius: 2px; }
.story-meta__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.story-meta__label { font-size: 1.5rem; font-weight: 600; line-height: 24px; }
.story-meta__value { font-size: 1.5rem; line-height: 30px; }
@media (max-width: 1023px) {
  .story-meta { gap: 20px; padding: 0; }
  .story-meta__label, .story-meta__value { font-size: 1rem; line-height: 20px; }
}
@media (max-width: 799px) {
  .story-meta { gap: 10px; }
}
/* Article: stacked gradient cards — no gap on desktop, 20px tablet, 10px mobile. */
.story-article { display: flex; flex-direction: column; }
.story-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
  background: linear-gradient(180deg, var(--hero-base-from) 0%, var(--hero-base-to) 100%);
  border-radius: var(--radius-lg);
}
.story-block h2 { font-size: 2.125rem; font-weight: 600; line-height: 1; }
.story-block__text { display: flex; flex-direction: column; gap: 10px; }
.story-block__text p { font-size: 1rem; line-height: 20px; color: var(--color-text); }
@media (max-width: 1023px) {
  .story-article { gap: 20px; }
  .story-block { padding: 20px; }
  .story-block h2 { font-size: 1.5rem; }
}
@media (max-width: 799px) {
  .story-article { gap: 10px; }
}

/* ---------- Dark mode ----------
   Follows the OS/browser color-scheme automatically (no manual toggle) — matches
   the source design's own "-dark" page variants: pure black background, white
   text, dark-gray cards, same accent blue (verified against home-dark.json).
   Placed last so these overrides win the cascade against same-specificity rules
   defined earlier in the file. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ffffff;
    --color-text-secondary: #a1a1a6;
    --color-bg: #000000;
    --color-card-bg: #131316;
    --color-accent: #0a84ff;
    --color-accent-dark: #409cff;
    --color-border: rgba(255, 255, 255, 0.12);
    --hero-base-from: #19191a;
    --hero-base-to: #000000;
  }
  .site-header__bar {
    background: rgba(0, 0, 0, 0.56);
    border-color: rgba(0, 0, 0, 0.9);
    box-shadow:
      -2px 0 0 -1px #000,
      2px 0 0 -1px #000,
      0 6px 24px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 3px 6px rgba(255, 255, 255, 0.25),
      inset 0 -3px 12px rgba(255, 255, 255, 0.25),
      inset 0 6px 12px rgba(0, 0, 0, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  }
  .nav__links a { color: #fff; }
  .nav__links a:hover { background: rgba(255, 255, 255, 0.1); }
  .logo__light { display: none; }
  .logo__dark { display: block; }
  .btn--ghost { background: rgba(255, 255, 255, 0.1); }
  .cta-banner { background-color: transparent; }
  .separator { background: #3a3a3c; }
  .nav__links { background: transparent; }
  .footer__col a { color: var(--color-text); }
  input[type="text"], textarea, .form-options input:not(:checked) { background-color: #1c1c1e; }
  textarea { background: #1c1c1e; }
  .mobile-menu a { border-bottom-color: rgba(255, 255, 255, 0.16); }
  .process-headline--plain { background: #19191a; }
  .stack__card { background: #19191a; }
  .photo-card--blue { background: linear-gradient(180deg, #000000 0%, #3d9eff 100%); }
  .photo-card--light { background: linear-gradient(180deg, #2c2c2e 0%, #19191a 50%, #000000 100%); }
  .photo-card--light .photo-card__icon { filter: invert(1); }
  .hcard, .block-row, .process-step, .tri-card, .case, .card { background: linear-gradient(180deg, #19191a 0%, #000000 100%); }
  .process-step__title { color: #aeaeb2; }
  .process-step__num { color: #000; }
  /* Tech sub-nav: the Aleksandria/Kionic icons are black artwork; the dark design draws them white. */
  .tech-header { background: linear-gradient(180deg, #1c1c1e 0%, #000000 100%); }
  .subnav a { color: #fff; }
  .subnav a.is-active { color: var(--color-accent); }
  .subnav a:not(.is-active) img { filter: invert(1); }
}