/* ==========================================================================
   Shared case study styles (EOS Dashboard, Car Wars, ...)
   Laid out on the 1920px Figma canvas: horizontal positions are mockup x
   values measured from the page centre (960); vertical gaps are mockup
   edge-to-edge distances. Page-specific pieces live in their own CSS file.
   ========================================================================== */
/* Page accent, set on <body> so the header logo hover can use it too.
   Named blue for the EOS page; each case study can override it (e.g. .cs2--teal). */
.cs2-page {
  --blue: #2f5fdb;
  --tint: #eaf0fd;     /* light accent-tinted section background */
  --logo-hover: var(--blue);
  background: #f9fafc;
}
/* The site-wide smooth scroll-behavior makes GSAP ScrollTrigger mis-measure
   the hero parallax after a mid-page reload or resize. */
html:has(.cs2-page) { scroll-behavior: auto; }

.cs2 {
  --gut: 24px;
  --ink: #111110;
  --body: #4a4a4a;
  --muted: #6b6b66;
  padding-bottom: 157px;
  overflow-x: clip;
}
.cs2 ul, .cs2 ol { margin: 0; padding: 0; list-style: none; }
.cs2 figure, .cs2 blockquote { margin: 0; }

/* Positioning helper: --x (mockup left edge), --w (mockup width), --mt (gap above) */
.cs2 .p {
  --pl: max(var(--gut), calc(50% + (var(--x, 519) - 960) * 1px));
  margin-left: var(--pl);
  margin-top: calc(var(--mt, 0) * 1px);
  max-width: calc(100% - var(--pl) - var(--gut));
}
.cs2 .pw { width: calc(var(--w) * 1px); }

.cs2-blue { color: var(--blue); }
.cs2-page.cs2--teal { --blue: #0b7f99; --tint: #e3f3f5; }
.cs2-page.cs2--purple { --blue: #4e07e3; --tint: #f1ecfd; }

/* Inline text links: accent + bold, underline on hover */
.cs2-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.cs2-link:hover, .cs2-link:focus-visible { text-decoration-color: currentColor; }

/* ---------- Shared type ---------- */
.cs2-h2 {
  font-weight: 800;
  font-size: 41.6px;
  line-height: 47px;
  color: var(--ink);
}
.cs2-prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 16.8px;
  line-height: 27px;
  color: var(--body);
}
.cs2-prose--light { font-weight: 400; }
.cs2-prose--muted { color: var(--muted); }
.cs2-prose strong { font-weight: 700; }

/* ---------- Section marker (icon badge + label) ---------- */
.cs2-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
}
.cs2-badge {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: var(--blue);
  overflow: hidden;
}
.cs2-badge--light { background: #fff; }
.cs2-badge img,
.cs2-badge__rocket {
  position: absolute;
  left: 7px;
  top: 7px;
  width: 20px;
  height: 20px;
}
.cs2-badge__rocket { display: grid; place-items: center; }
.cs2-badge__rocket img {
  position: static;
  width: 12.3333px;
  height: 17.3333px;
  transform: rotate(45deg);
}
.cs2-marker__label {
  font-weight: 600;
  font-size: 12.8px;
  line-height: 14px;
  letter-spacing: 1.28px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Images: shared shadow + corner treatments ---------- */
.cs2-shot { position: relative; overflow: hidden; }
.cs2-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs2-r28 { border-radius: 28px; }
/* Figma "drop shadow mockups" effect: drop shadow + 1px white inner edge */
.cs2-shot--shadow { overflow: visible; box-shadow: 0 30px 70px 0 rgba(20, 24, 29, 0.26); }
.cs2-shot--shadow img { border-radius: inherit; }
.cs2-shot--shadow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* Absolutely positioned groups from the mockup, scaled as one unit.
   Container sets --W/--H (mockup size); children set --cx/--cy/--cw/--ch. */
.cs2-collage {
  position: relative;
  aspect-ratio: var(--W) / var(--H);
}
.cs2-collage > * {
  position: absolute;
  left: calc(var(--cx) / var(--W) * 100%);
  top: calc(var(--cy) / var(--H) * 100%);
  width: calc(var(--cw) / var(--W) * 100%);
  height: calc(var(--ch) / var(--H) * 100%);
  max-width: none;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.cs2-hero {
  position: relative;
  height: 1007px;
  overflow: hidden;
  border-radius: 0 0 100px 100px;
  isolation: isolate;
  container-type: inline-size;
}
.cs2-hero__bg {
  position: absolute;
  left: 0;
  top: -29px;
  width: 100%;
  height: 1036px;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}
.cs2-hero__frost {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(13.7px);
  backdrop-filter: blur(13.7px);
}
.cs2-hero__title-row {
  position: absolute;
  top: 157px;
  left: var(--gut);
  right: var(--gut);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}
.cs2-hero__title {
  font-weight: 500;
  font-size: 55px;
  line-height: 47.52px;
  color: #0f0f0f;
  white-space: nowrap;
}
.cs2-chip {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid #000;
  border-radius: 25px;
  background: #7bea7f;
  font-size: 15px;
  line-height: 1.059;
  color: #000;
  white-space: nowrap;
}
.cs2-hero__meta {
  position: absolute;
  top: 221px;
  left: var(--gut);
  right: var(--gut);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  line-height: 16.2px;
  text-transform: uppercase;
  color: #0f0f0f;
  white-space: nowrap;
}
.cs2-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: #000;
}
.cs2-hero__mockup {
  position: absolute;
  top: 293px;
  left: calc(50% - 644px);
  width: 1288px;
  /* 714px visible; the extra 240px stays hidden below the hero so the
     parallax lift never exposes the frame's bottom edge */
  height: 954px;
  background: #fff;
  border-radius: 36.729px 36.729px 0 0;
  overflow: hidden;
  will-change: transform;
}
.cs2-hero__mockup img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Summary strip under the hero (problem → what I did → result)
   ========================================================================== */
/* full-width gray band; it starts behind the hero so the gray fills the hero's
   rounded bottom corners (--overlap = the hero's corner radius) */
.cs2-tldr-band {
  --overlap: 100px;
  margin-top: calc(-1 * var(--overlap));
  padding: calc(var(--overlap) + 106px) 0 90px;
  background: #eef1f4;
}
.cs2-tldr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px;
}
.cs2-tldr li { position: relative; text-align: center; }
.cs2-tldr__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}
.cs2-tldr__icon svg { width: 22px; height: 22px; }
/* thin connector between the centred icons: starts 12px right of this icon,
   ends 12px before the next one (columns are 72px apart) */
.cs2-tldr li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 21.5px;
  left: calc(50% + 34px);
  right: calc(-72px - 50% + 34px);
  height: 1.5px;
  background: color-mix(in srgb, var(--blue) 45%, transparent);
}
.cs2-tldr__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 12.8px;
  line-height: 14px;
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: var(--blue);
}
.cs2-tldr p {
  max-width: 330px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}
@media (max-width: 1100px) {
  .cs2-tldr { grid-template-columns: 1fr; gap: 40px; }
  .cs2-tldr li:not(:last-child)::after { display: none; }
}
@media (max-width: 700px) {
  .cs2-tldr-band { --overlap: 48px; padding: calc(var(--overlap) + 56px) 0 56px; }
}

/* ==========================================================================
   Intro
   ========================================================================== */
.cs2-intro { display: flex; flex-direction: column; gap: 57px; }
.cs2-block { display: flex; flex-direction: column; }
.cs2-block__h {
  font-weight: 800;
  font-size: 24px;
  line-height: 26px;
  color: var(--ink);
}
.cs2-block__h--bold { font-weight: 700; }
.cs2-block--what { gap: 13px; }
.cs2-block--what p {
  max-width: 700px;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}
.cs2-block--team,
.cs2-block--ach { gap: 18px; }

/* Team Info: paragraph left, label/value list right (list is right-aligned
   to the edge of the stat cards below; paragraph centres against it) */
.cs2-team {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 64px;
}
.cs2-team__text {
  flex: 0 1 700px;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}
.cs2-team__text strong { font-weight: 700; }
.cs2-team__text p + p { margin-top: 16px; }

.cs2-cards {
  display: flex;
  background: #f1f5f9;
  border-radius: 14px;
  overflow: hidden;
}
.cs2-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px;
}
.cs2-card--stat { gap: 10px; }
.cs2-divider {
  flex-shrink: 0;
  width: 1px;
  align-self: stretch;
  background: rgba(17, 17, 16, 0.12);
}
.cs2-card__label {
  font-weight: 600;
  font-size: 11.2px;
  line-height: 12px;
  letter-spacing: 0.896px;
  color: var(--muted);
  white-space: nowrap;
}
.cs2-card__note {
  font-size: 13.6px;
  line-height: 19px;
  color: var(--muted);
}
.cs2-card__stat {
  font-weight: 700;
  font-size: 27.2px;
  line-height: 35px;
  color: var(--ink);
}
.cs2-card__stat.cs2-blue { color: var(--blue); }
.cs2-bar {
  position: relative;
  display: block;
  width: 220px;
  max-width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(17, 17, 16, 0.12);
  overflow: hidden;
}
.cs2-bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  border-radius: 999px;
  background: var(--blue);
}
.cs2-card__trend {
  display: flex;
  align-items: center;
  font-size: 13.6px;
  line-height: 19px;
  color: #2a7e34;
}
.cs2-card__trend span { white-space: pre; margin-right: -2px; }
.cs2-card__trend img { width: 24px; height: 24px; flex-shrink: 0; }

.cs2-ach-head {
  display: flex;
  align-items: flex-start;
  padding-top: 40px;
}
.cs2 .cs2-ach-head ul {
  margin-top: 5px;
  padding-left: 25.2px;
  list-style: disc;
  font-size: 16.8px;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
}

.cs2-block--resp { gap: 13px; }
.cs2-block--resp h3 {
  font-weight: 600;
  font-size: 19.2px;
  line-height: 21px;
  color: var(--ink);
}
.cs2-resp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 700px;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: var(--ink);
}
.cs2-resp-list li::before { content: '•  '; white-space: pre; }

/* ==========================================================================
   The Task at Hand (gradient section)
   ========================================================================== */
.cs2-task {
  position: relative;
  margin-top: 140px;
  padding: 175px 0 292px;
  background: #fff;
  overflow: clip; /* not hidden: hidden would stop the slider handle from sticking */
}
.cs2-task::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1926px;
  height: 4044px;
  margin-left: -963px;
  background: url('../assets/images/eos-dashboard/v2/task-gradient.png') center / cover no-repeat;
}
.cs2-task > * { position: relative; }
/* Before/after slider. --pos is the divider's position (set by eos-dashboard.js);
   the "before" layer is clipped to everything left of it. */
.cs2-compare {
  --pos: 50%;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.cs2-compare img { -webkit-user-drag: none; pointer-events: none; }
.cs2-shot .cs2-compare__before img,
.cs2-compare > img { object-position: top; }
.cs2-compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cs2-compare__range {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.cs2-compare__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 16, 0.08), 0 0 12px rgba(17, 17, 16, 0.25);
  z-index: 1;
}
/* stays at mid-screen while the tall comparison scrolls past */
.cs2-compare__handle {
  position: sticky;
  top: calc(50vh - 22px);
  margin-top: 48px;
  width: 44px;
  transform: translateX(calc(-50% + 1px));
}
.cs2-compare__handle .cs2-compare__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.cs2-compare__label--before { right: calc(100% + 10px); }
.cs2-compare__label--after { left: calc(100% + 10px); }
.cs2-compare__knob {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(17, 17, 16, 0.25);
  transition: transform 0.15s ease;
}
.cs2-compare:active .cs2-compare__knob { transform: scale(1.08); }
.cs2-compare:has(.cs2-compare__range:focus-visible) .cs2-compare__knob {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.cs2-compare__label {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 16, 0.72);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs2-task__caption {
  font-size: 13px;
  line-height: 36px;
  color: var(--muted);
}

/* ==========================================================================
   Research & Discovery
   ========================================================================== */
.cs2-tools { position: relative; z-index: 1; }

.cs2-inputs { display: flex; flex-direction: column; gap: 14px; }
.cs2-inputs li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 400;
  font-size: 16.3px;
  line-height: 18px;
  color: var(--body);
}
.cs2-inputs__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26.486px;
  height: 26.486px;
  background: url('../assets/images/eos-dashboard/v2/icons/number-circle.svg') center / 100% 100% no-repeat;
  font-weight: 500;
  font-size: 16.33px;
  line-height: 1.39;
  color: #000;
}

.cs2-quotes { position: relative; height: 406px; }
.cs2-quote-slot {
  position: absolute;
  left: calc(var(--qx) * 1px);
  top: calc(var(--qy) * 1px);
  width: calc(var(--qw) * 1px);
  height: calc(var(--qh) * 1px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs2-quote {
  flex-shrink: 0;
  width: 410.667px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(17, 17, 16, 0.2);
  transform: rotate(var(--rot));
  transition: box-shadow 0.3s ease;
}
.cs2-quote-slot { will-change: transform; }
.cs2-quote-slot.is-hovered { z-index: 5; }
.cs2-quote-slot.is-hovered .cs2-quote { box-shadow: 0 4px 8px rgba(17, 17, 16, 0.06), 0 30px 60px -14px rgba(17, 17, 16, 0.28); }
.cs2-quote__mark {
  font-weight: 800;
  font-size: 38px;
  line-height: 1.1;
  color: var(--blue);
}
.cs2-quote__text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.cs2-quote__source {
  font-style: italic;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
}

.cs2-boards { display: flex; justify-content: space-between; }
.cs2-boards > figure {
  width: calc(var(--bw) / 1305 * 100%);
  aspect-ratio: var(--bw) / 795;
}
.cs2-boards .cs2-boards__crop {
  position: absolute;
  top: 0;
  left: -17.54%;
  width: 134.06%;
  max-width: none;
}
.cs2-boards > figure:last-child { overflow: hidden; }

/* ==========================================================================
   The Solution (dark)
   ========================================================================== */
.cs2-dark {
  margin-top: 238px;
  padding: 192px 0 227px;
  background: #1c1c1c;
}
.cs2-dark .cs2-marker__label { color: #f5f4f0; }
.cs2-dark .cs2-h2 { color: #fff; }
.cs2-dark .cs2-prose { color: rgba(245, 244, 240, 0.8); }
.cs2-dark .cs2-prose strong { color: #fff; }
.cs2-rule { height: 1px; background: rgba(255, 255, 255, 0.14); }

.cs2-item { display: flex; align-items: flex-start; gap: 32px; }
.cs2-item__num {
  flex-shrink: 0;
  width: 90px;
  font-weight: 800;
  font-size: 48px;
  line-height: 52px;
  color: #5a88ff;
}
.cs2-item__body {
  flex: 0 1 1158px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.cs2-item__title {
  font-weight: 700;
  font-size: 22.4px;
  line-height: 24px;
  color: #fff;
}
.cs2-item__p {
  max-width: 700px;
  font-size: 16px;
  line-height: 25px;
  color: rgba(245, 244, 240, 0.8);
}
.cs2-item__p--white { color: rgba(255, 255, 255, 0.8); }
.cs2-item__bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  line-height: 17px;
  color: rgba(245, 244, 240, 0.8);
}
.cs2-item__bullets li { display: flex; gap: 8px; }
.cs2-item__bullets li::before { content: '•'; }

/* Item 2 copy: blank lines in the mockup are one line-height (25px) */
.cs2-item__text { margin-top: 32px; }
.cs2-gap-line { margin-top: 25px; }
.cs2-gap-line--after { margin-bottom: 25px; }
.cs2 .cs2-item__text ul { padding-left: 24px; list-style: disc; }

.cs2-item__body > .cs2-shot,
.cs2-photo .cs2-shot {
  width: min(calc(var(--pw) * 1px), 100%);
  aspect-ratio: var(--pw) / var(--ph);
}

.cs2-photos {
  display: flex;
  flex-direction: column;
  gap: 51px;
  width: 100%;
  margin-top: 65.37px; /* 79.37px gap to the paragraph above, minus the body's 14px gap */
}
.cs2-photo { display: flex; flex-direction: column; gap: 14px; }
.cs2-photo--tight { gap: 8px; }
.cs2-photo figcaption {
  font-size: 14px;
  line-height: 21px;
  color: #d2d2d2;
}

/* Widget-setup popups. Figma's export comes with the page's light background
   baked in, so each card is cropped out of it (--cx/--cy/--cw/--ch are the
   card's box in the 890.733 x 468.369 mockup frame) to sit on the dark section. */
.cs2-popups {
  position: relative;
  width: min(890.733px, 100%);
  aspect-ratio: 890.733 / 468.369;
  margin-top: 28px;
  container-type: inline-size;
}
.cs2-popups__card {
  --u: calc(100cqw / 890.733);
  position: absolute;
  left: calc(var(--cx) * var(--u));
  top: calc(var(--cy) * var(--u));
  width: calc(var(--cw) * var(--u));
  height: calc(var(--ch) * var(--u));
  border-radius: 4px;
  box-shadow: 0 1.958px 1.958px 0 rgba(0, 0, 0, 0.25);
  background: url('../assets/images/eos-dashboard/v2/widget-popups.png') no-repeat;
  background-size: 100cqw auto;
  background-position: calc(var(--cx) * var(--u) * -1) calc(var(--cy) * var(--u) * -1);
}

/* ==========================================================================
   Outcome sections
   ========================================================================== */
.cs2-learnings {
  padding: 139px 0 192px;
  background: var(--tint);
}

.cs2-callouts { display: flex; flex-direction: column; gap: 24px; }
.cs2-callout {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 28px 28px 28px 50px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(17, 17, 16, 0.2); /* same as the user-feedback quote cards */
}
/* fixed 183px card; content row (120px tall) sits at the top padding */
.cs2-callout--todo {
  height: 183px;
  padding-left: 40px;
  padding-bottom: 33px;
}
.cs2-callout img { flex-shrink: 0; }
.cs2-callout p {
  width: 425px;
  font-size: 16px;
  line-height: 25px;
  color: var(--muted);
}
.cs2-callout strong { font-weight: 700; }

/* "Next Project" with the next project's name under it. The wrapper puts
   the link at its mockup position, but slides it left (never past the
   gutter) when the window is too narrow for the whole link to fit. */
.cs2-next-wrap {
  display: grid;
  grid-template-columns: minmax(0, max(0px, calc(50% + (var(--x) - 960) * 1px))) max-content;
  padding: 0 var(--gut);
  margin-top: calc(var(--mt, 0) * 1px);
}
.cs2-next {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 500;
  white-space: nowrap;
}
.cs2-next__label {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 43.2px;
  line-height: 47.52px;
  color: #000;
}
.cs2-next__name {
  margin-top: 4px;
  font-size: 34px;
  line-height: normal;
  color: #898989;
}
.cs2-next img { width: 71.33px; height: 20px; transition: transform 0.3s ease; }
.cs2-next:hover img { transform: translateX(8px); }

/* ==========================================================================
   Narrower screens (the mockup is 1920px; below these widths things reflow)
   ========================================================================== */
@media (max-width: 1459px) {
  .cs2-quotes {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    padding: 32px 0;
  }
  .cs2-quote-slot { position: static; width: auto; height: auto; }
  .cs2-quote { width: min(410.667px, 100%); }
}

@media (max-width: 1439px) {
  .cs2-next-wrap { grid-template-columns: 1fr max-content; } /* right-aligned */
}

@media (max-width: 1335px) {
  .cs2-hero { height: calc(293px + (100cqw - 48px) * 714 / 1288); }
  .cs2-hero__mockup {
    left: var(--gut);
    width: calc(100% - 2 * var(--gut));
    height: calc((100cqw - 48px) * 954 / 1288);
  }
}

@media (max-width: 900px) {
  .cs2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(17, 17, 16, 0.12);
  }
  .cs2-card { background: #f1f5f9; }
  .cs2-divider { display: none; }
  .cs2-team { flex-direction: column; align-items: stretch; gap: 32px; }
  .cs2-team__text { flex: none; }
  .cs2-item { flex-direction: column; gap: 8px; }
  .cs2-item__num { width: auto; }
  .cs2-callout, .cs2-callout--todo { height: auto; padding: 24px; gap: 24px; }
  .cs2-callout p { width: auto; }
}

@media (max-width: 700px) {
  .cs2-hero {
    height: auto;
    padding: 110px var(--gut) 0;
    border-radius: 0 0 48px 48px;
  }
  .cs2-hero__title-row,
  .cs2-hero__meta { position: relative; top: auto; left: auto; right: auto; }
  .cs2-hero__title-row { flex-wrap: wrap; align-items: center; gap: 10px 16px; }
  .cs2-hero__title { font-size: 34px; line-height: 1.1; white-space: normal; }
  .cs2-chip { margin-top: 0; }
  .cs2-hero__meta { margin-top: 12px; font-size: 14px; flex-wrap: wrap; }
  .cs2-hero__mockup {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1288 / 714;
    margin-top: 40px;
    border-radius: 20px 20px 0 0;
  }
  .cs2-h2 { font-size: 32px; }
  .cs2-ach-head { flex-wrap: wrap; }
  .cs2 .cs2-ach-head ul { white-space: normal; }
  .cs2-next__label { font-size: 30px; line-height: 1.2; }
  .cs2-next__name { margin-top: 2px; font-size: 24px; }
}

@media (max-width: 520px) {
  .cs2-cards { grid-template-columns: 1fr; }
  .cs2-card__label { white-space: normal; }
  .cs2-callout, .cs2-callout--todo { flex-direction: column; align-items: flex-start; }
}