/* ============================================================================
   COMPONENTS — hirehire

   Component → Figma node mapping lives in figma-mapping.md.
   Component class naming: .c-{component-name}
   Modifier naming:        .c-{component}--{variant}
   Element naming:         .c-{component}___{element}
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* Offset for the fixed header so anchor jumps don't land under it. */
  scroll-padding-top: 56px;
}

::selection {
  background-color: var(--color-alpha-black-900-10);
}
::-moz-selection {
  background-color: var(--color-alpha-black-900-10);
}

body {
  font-family: var(--font-family);
  color: var(--color-neutral-black-900);
  background-color: var(--color-neutral-white-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  display: block;
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */

.l-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (max-width: 1024px) {
  .l-container {
    padding-inline: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTON
   
   Variants (Figma props):
     type:  primary | secondary | tertiary | outlined | icon | ghost
     size:  L | M
     state: default
   ════════════════════════════════════════════════════════════════════════════ */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-family);
  transition: opacity 0.2s ease;
}

.c-button:hover {
  opacity: 0.85;
}

.c-button.c-button--disabled,
.c-button--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: auto;
  transition: opacity 0s;
}

.c-button.c-button--disabled:hover,
.c-button--disabled:hover {
  opacity: 0.3;
}

/* ── Size L ─── */
.c-button--l {
  min-height: 48px;
  max-height: 48px;
  min-width: 48px;
  padding: 16px 32px;
  font-size: var(--label-16b-size);
  font-weight: var(--label-16b-weight);
  line-height: var(--label-16b-line-height);
}

/* ── Size M ─── */
.c-button--m {
  min-height: 30px;
  max-height: 30px;
  min-width: 30px;
  padding: 8px 12px;
  font-size: var(--label-14-size);
  font-weight: 600;
  line-height: var(--label-14-line-height);
}

/* ── Type: primary ─── Figma: type=primary */
.c-button--primary {
  background-color: var(--color-neutral-black-900);
  color: var(--color-neutral-white-50);
}

/* ── Type: secondary ─── Figma: type=secondary */
.c-button--secondary {
  background-color: var(--color-violet-violet-100);
  color: var(--color-neutral-black-900);
}

/* ── Type: tertiary ─── Figma: type=tertiary */
.c-button--tertiary {
  background-color: var(--color-alpha-black-900-10);
  color: var(--color-neutral-black-900);
}

/* ── Type: outlined ─── Figma: type=outlined */
.c-button--outlined {
  background-color: transparent;
  color: var(--color-neutral-black-900);
  border: 1px solid var(--color-alpha-black-900-10);
}

/* ── Type: icon ─── Figma: type=icon (48×48 L / 30×30 M) */
.c-button--icon {
  background-color: transparent;
  color: var(--color-neutral-black-900);
  border: 1px solid var(--color-alpha-black-900-10);
  padding: 0;
  width: 48px;
}

.c-button--icon.c-button--m {
  width: 30px;
}

/* ── Type: ghost ─── Figma: type=ghost (48×48 L / 30×30 M) */
.c-button--ghost {
  background-color: transparent;
  color: var(--color-neutral-black-900);
  padding: 0;
  width: 48px;
}

.c-button--ghost.c-button--m {
  width: 30px;
}

/* ── Icon inside button ─── */
.c-button__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.c-button--m .c-button__icon {
  width: 20px;
  height: 20px;
}

/* ── Carousel nav arrows (Figma: 7.4×12 chevron) ─── */
.c-button--carousel-nav {
  width: 48px;
  height: 96px;
  max-height: 96px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}


/* ── Hover animation: "talk" vertical slide ─── */
.c-button__talk-slider {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  position: relative;
  vertical-align: text-bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.c-button__talk-word {
  display: block;
  height: 1em;
  line-height: 1;
}

.c-button__talk-word:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Screen-reader-only counterpart for the talk slider — gives a11y / SEO
   crawlers a single clean "talk" / "Hire" label without exposing the
   duplicated visual spans (which carry only the slide animation). */
.c-button__talk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER
   
   Variants:
     resolution: 1440 | 768 | 375
   ════════════════════════════════════════════════════════════════════════════ */

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 10px;
  width: 100%;
  z-index: 100;
}

/* Header progressive blur — true strength gradient, not just a mask fade.

   Structure (3 paint layers):
     1. ::before — light blur (8px), spans full strip, fades to 0 at bottom
     2. ::after  — strong blur (20px), masked to the upper 60%, fades earlier
     3. .c-header__blur-veil — white gradient (z-index 1, paints ON TOP)

   Effective blur by height:
     top    → layer1(8) + layer2(20) ≈ very strong
     middle → layer1(8) + layer2 fading → medium
     lower  → layer1 fading only → light → 0
     bottom → none

   Why these structural choices:
   - The veil sits on top of the blurs (separate child element with
     z-index 1). If the veil were on the parent, its opaque top would
     occupy the pseudos' backdrop and the blur of "opaque white" would
     just look white — i.e. no blur visible.
   - Opacity is animated via the --blur-opacity custom property, NOT
     on the parent. Parent opacity creates a compositing group that
     prevents backdrop-filter on the pseudos from sampling the page.
     The custom property lets the pseudos and the veil fade in
     together while the parent stays at full opacity.
   - @property lets the transition interpolate the variable smoothly. */
@property --blur-opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

.c-header__blur {
  position: absolute;
  inset: 0;
  bottom: -40px;
  z-index: -1;
  pointer-events: none;
  --blur-opacity: 0;
  transition: --blur-opacity 0.3s ease;
}

.c-header__blur::before,
.c-header__blur::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--blur-opacity);
}

/* Layer 1 — light blur, full strip with smooth fade to 0 at bottom */
.c-header__blur::before {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* Layer 2 — strong blur, masked to the upper 60% so its edge is well
   inside the still-active layer 1 zone (no visible cutoff) */
.c-header__blur::after {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  mask-image: linear-gradient(to bottom, black 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 60%);
}

/* White veil — child element painted ABOVE the blur layers (z-index 1).
   Three-stop gradient: opaque top → semi at middle → transparent bottom. */
.c-header__blur-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--blur-opacity);
  /* Power-1.5 ease-out (alpha ≈ 0.95·(1−t)^1.5) — between the gentle
     quadratic and the front-loaded cubic. Top half keeps a bit more
     density behind the nav text/logo, then the curve eases smoothly to
     0 at the bottom edge so there's no harsh cut-off. */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.93) 10%,
    rgba(255, 255, 255, 0.89) 20%,
    rgba(255, 255, 255, 0.82) 30%,
    rgba(255, 255, 255, 0.71) 40%,
    rgba(255, 255, 255, 0.57) 50%,
    rgba(255, 255, 255, 0.41) 60%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0.07) 85%,
    rgba(255, 255, 255, 0)    100%
  );
}

.c-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--content-max-width);
}

.c-header__logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 32px;
}

.c-header__logo {
  max-width: none;
}

.c-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.c-header__nav-link {
  font-size: var(--label-14-size);
  font-weight: 600;
  line-height: var(--label-14-line-height);
  color: var(--color-neutral-black-900);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.c-header__nav-link:hover {
  opacity: 0.7;
}

/* Styled via c-button component; only visibility is block-specific. */
.c-header__menu-btn {
  display: none;
}

/* When JS detects nav + logo don't fit in the header (logo padding-right
   32px included), collapse nav into a hamburger menu — overrides the
   default visible state above the 480 breakpoint. */
body.is-header-force-collapsed .c-header__nav-link {
  display: none;
}
body.is-header-force-collapsed .c-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Tighter gap between Let's talk and menu button when collapsed */
body.is-header-force-collapsed .c-header__nav {
  gap: 8px;
}
/* Header sits above the mobile-menu overlay so logo + morphing menu-btn
   stay visible on top (matches the ≤480 behavior). */
body.is-header-force-collapsed .c-header {
  z-index: 300;
}
body.is-header-force-collapsed .c-header__nav > .c-button--tertiary:not(.c-header__menu-btn) {
  transition: opacity 0.15s ease;
}
body.is-header-force-collapsed.is-menu-open .c-header__nav > .c-button--tertiary:not(.c-header__menu-btn) {
  opacity: 0;
  pointer-events: none;
}

/* ── Tablet (≤768)*/
@media (max-width: 1024px) {
  .c-header {
    padding-inline: 24px;
  }
  .c-header__content {
    max-width: 100%;
  }
  /* Logo unchanged from 1440 — natural 172×24 (Figma component box 173×36
     just adds invisible vertical padding that we don't render). */
  .c-header__logo-wrapper {
    padding-right: 32px;
  }
}

/* ── Mobile (≤480)*/
@media (max-width: 480px) {
  .c-header {
    padding-inline: 16px;
  }
  .c-header__logo {
    /* Visible SVG ~134×19 (Figma box 135×28 with 16.14% top/bottom padding) */
    width: 134px;
    height: auto;
  }
  .c-header__logo-wrapper {
    padding-right: 16px;
  }
  .c-header__nav {
    gap: 8px;
  }
  /* hide all nav links — only "Let's talk" + menu button remain */
  .c-header__nav-link {
    display: none;
  }
  .c-header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Single header serves both page and open-menu states — sits above the
     mobile-menu overlay so logo + morphing menu-btn stay visible on top. */
  .c-header {
    z-index: 300;
  }
  /* Header "Let's talk" — fast dissolve when menu opens. */
  .c-header__nav > .c-button--tertiary:not(.c-header__menu-btn) {
    transition: opacity 0.15s ease;
  }
  body.is-menu-open .c-header__nav > .c-button--tertiary:not(.c-header__menu-btn) {
    opacity: 0;
    pointer-events: none;
  }
}

/* Animated menu icon: 2 horizontal bars that rotate ±45° to form an X
   when the menu is open. */
.c-menu-icon__bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.is-menu-open .c-menu-icon__bar--top {
  transform: translateY(2.08px) rotate(45deg);
}
body.is-menu-open .c-menu-icon__bar--bottom {
  transform: translateY(-2.08px) rotate(-45deg);
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE MENU — full-screen overlay (≤480 only)
   ════════════════════════════════════════════════════════════════════════════ */
.c-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-neutral-white-50);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  /* Main header (z-index 300, ~48px tall) sits on top + 30px gap before
     first link, per Figma __top section gap-[30px]. */
  padding-top: 78px;
}
/* Display toggled by JS (GSAP) to allow fade/slide-in animation without flash. */

/* Lock page scroll (html+body) so the page beneath the menu stays still;
   hide the header's progressive-blur layer so it doesn't flash in from behind. */
body.is-menu-open,
html:has(body.is-menu-open) {
  overflow: hidden;
}

/* The mobile menu (z-index 200) paints solid white across the entire
   viewport, so once it's fully opaque it already covers the header's
   blur layer — there's nothing to fight or hide. Touching the blur's
   own opacity here creates a perceivable header jerk at the moment the
   class is applied (regardless of transition tricks), so we leave it
   alone and let the menu's own fade-in handle the cover-up. */

.c-mobile-menu__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 0 24px;
  width: 100%;
  flex: 1 0 0;
  min-height: 0;
}

.c-mobile-menu__link {
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.48px;
  color: var(--color-neutral-black-900);
  white-space: nowrap;
}

.c-mobile-menu__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 24px 16px;
  width: 100%;
}

.c-mobile-menu__cta {
  width: 100%;
}

/* Tighter 16px gutter on 375 */
@media (max-width: 480px) {
  .c-mobile-menu__links { padding: 0 16px; }
  .c-mobile-menu__bottom { padding: 40px 16px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TITLE SECTION
   
   Variants:
     resolution: 1440 | 768 | 375
   ════════════════════════════════════════════════════════════════════════════ */

.c-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-title-section__heading {
  font-family: var(--font-family);
  font-size: var(--heading-40-size);
  font-weight: var(--heading-40-weight);
  line-height: var(--heading-40-line-height);
  letter-spacing: var(--heading-40-letter-spacing);
  color: var(--color-neutral-black-900);
}

.c-title-section__description {
  font-size: var(--text-20-size);
  font-weight: var(--text-20-weight);
  line-height: var(--text-20-line-height);
  color: var(--color-alpha-black-900-90);
  max-width: 896px;
}

/* Forced break used only on the tablet breakpoint (~768) — at 1024+
   the description fits naturally; at 480/375 the narrower container
   wraps the text without help. The 481–900 range was picked so 768
   gets the break and 1024 does not. */
.c-title-section__br-tablet {
  display: none;
}
@media (min-width: 481px) and (max-width: 900px) {
  .c-title-section__br-tablet {
    display: inline;
  }
}

/* Forced breaks for the 375 layout (per Figma 396:4225). Hidden at
   tablet/desktop so they only kick in when the container is too
   narrow to wrap naturally to the design's specific line breaks. */
.c-title-section__br-mobile {
  display: none;
}
@media (max-width: 480px) {
  .c-title-section__br-mobile {
    display: inline;
  }
}

@media (max-width: 480px) {
  .c-title-section__heading {
    font-size: var(--heading-40-size);
    font-weight: var(--heading-40-weight);
    line-height: var(--heading-40-line-height);
    letter-spacing: var(--heading-40-letter-spacing);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — TEAM MEMBER
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-team {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 326px;
  height: 347px;
  padding: 24px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-violet-violet-100);
  flex-shrink: 0;
}

.c-card-team__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

/* Avatar crop matches Figma exactly: each photo has its own zoom level
   and offset (the source photo is positioned absolutely inside a 72px
   round window). Per-card CSS variables (--ax/--ay/--aw) come from
   Figma's `left`/`top`/`width` percentages. Width-only is enough — the
   browser computes height to preserve aspect ratio. */
.c-card-team__avatar {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.c-card-team__avatar img {
  position: absolute;
  left: var(--ax, 0);
  top: var(--ay, 0);
  width: var(--aw, 100%);
  height: auto;
  max-width: none;
  display: block;
}

.c-card-team__info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.c-card-team__name-role {
  display: flex;
  flex-direction: column;
}

.c-card-team__name {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: -0.48px;
  color: var(--color-neutral-black-900);
}

.c-card-team__role {
  font-size: var(--text-14-size);
  font-weight: var(--text-14-weight);
  line-height: var(--text-14-line-height);
  color: var(--color-alpha-black-900-60);
}

.c-card-team__bio {
  font-size: var(--text-14-size);
  font-weight: var(--text-14-weight);
  line-height: var(--text-14-line-height);
  color: var(--color-alpha-black-900-60);
  margin: 0;
}

.c-card-team__logos {
  display: flex;
  gap: 12px 24px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.c-card-team__logos img {
  max-width: none;
  display: block;
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */

.c-pagination {
  display: flex;
  gap: 0;
  align-items: center;
}

/* Visible dot is 4×4 (Figma); 6px transparent border around it gives
   a 16×16 hit area without changing the visual layout. Adjacent dots
   keep their 8px visual gap because each dot is 4 + 6×2 = 16 wide. */
.c-pagination__dot {
  width: 4px;
  height: 4px;
  border: 6px solid transparent;
  background-clip: padding-box;
  background-color: var(--color-alpha-black-900-10);
  border-radius: 50%;
  box-sizing: content-box;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.c-pagination__dot:hover {
  background-color: var(--color-alpha-black-900-60);
}

.c-pagination__dot--active {
  background-color: var(--color-neutral-black-900);
}

/* Carousel-only paginations are hidden in non-carousel layouts */
.s-testimonials__pagination,
.s-offering__pagination {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROADMAP STEP
   ════════════════════════════════════════════════════════════════════════════ */

.c-roadmap {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
}

.c-roadmap__step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.c-roadmap__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-neutral-black-900);
  flex-shrink: 0;
}

.c-roadmap__line {
  flex: 1;
  height: 2px;
  background-color: var(--color-neutral-gray-200);
}

.c-roadmap__step--active .c-roadmap__line {
  background-color: var(--color-neutral-black-900);
}

.c-roadmap__label {
  font-size: var(--label-14-size);
  font-weight: 600;
  line-height: var(--label-14-line-height);
  color: var(--color-neutral-black-900);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — TEXT
   
   Variants:
     type: step | icon
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 296px;
}

.c-card-text__step-number {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  color: var(--color-neutral-black-900);
}

.c-card-text__icon {
  width: 48px;
  height: 48px;
}

.c-card-text__title {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
}

.c-card-text__description {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-60);
}

@media (max-width: 480px) {
  .c-card-text {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCORDION
   
   Variants:
     resolution: 1440 | 375
     open:       on | off
   ════════════════════════════════════════════════════════════════════════════ */

.c-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max-width);
}

.c-accordion__item {
  border-top: 1px solid var(--color-alpha-black-900-10);
  padding: 24px 0;
  cursor: pointer;
}

.c-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  color: var(--color-neutral-black-900);
  text-align: left;
}

.c-accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.c-accordion__toggle {
  flex-shrink: 0;
}

/* Icon rotation is driven entirely by CSS via the `--open` class on the
   item — the transition runs on the GPU compositor and is independent of
   JS frame timing. (Previously the icon rotation was animated by GSAP at
   the same time as adjacent items' bodies were animating, and the layout
   reflow that ran in parallel made the rotating icon visibly jitter,
   especially when toggling non-adjacent items in Safari.) */
.c-accordion__toggle .c-button__icon {
  transition: transform 0.35s ease;
  transform-origin: 50% 50%;
}
.c-accordion__item--open .c-accordion__toggle .c-button__icon {
  transform: rotate(45deg);
}

.c-accordion__body {
  height: 0;
  overflow: hidden;
  cursor: auto;
}

.c-accordion__content {
  max-width: 716px;
  padding-top: 16px;
  padding-right: 48px;
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
}

@media (max-width: 480px) {
  .c-accordion__trigger {
    font-size: var(--text-20-size);
    font-weight: var(--text-20-weight);
    line-height: var(--text-20-line-height);
    letter-spacing: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — CASE STUDY
   
   Variants:
     resolution: 1440 | 768 | 375
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-case {
  display: flex;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--color-neutral-white-50);
  padding: 24px;
}

.c-card-case__image {
  width: 50%;
  min-height: 380px;
  object-fit: cover;
}

.c-card-case__body {
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.c-card-case__logo {
  height: 24px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.c-card-case__title {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
}

.c-card-case__description {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-60);
}

.c-card-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1024px) {
  .c-card-case {
    flex-direction: column;
  }

  .c-card-case__image,
  .c-card-case__body {
    width: 100%;
  }

  .c-card-case__image {
    min-height: 240px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — TESTIMONIAL
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-testimonial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  border-left: 1px solid var(--color-alpha-black-900-10);
  padding: 0 20px;
  min-width: 200px;
}

.c-card-testimonial__quote {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
}

.c-card-testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.c-card-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.c-card-testimonial__info {
  display: flex;
  flex-direction: column;
}

.c-card-testimonial__name {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-neutral-black-900);
}

.c-card-testimonial__position {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-60);
}

/* On 1440 / 768 the position fits on one line; on 375 the cards are
   narrower and the "@ Company" tail wraps awkwardly mid-word, so we
   force a break before "@" via this <br>. Hidden by default, revealed
   only at the 375 breakpoint (see @media block below). */
.c-card-testimonial__br-mobile {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   TAG
   ════════════════════════════════════════════════════════════════════════════ */

.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 12px;
  background-color: var(--color-violet-violet-200);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-neutral-black-900);
  white-space: nowrap;
}

/* Outlined pill tag with a coloured leading dot — used as a section
   eyebrow above titles (e.g. "For talent" above the beyond-resume block).
   Defaults to size M; pair with `.c-tag--s` for the smaller variant. */
.c-tag--outlined {
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--color-alpha-black-900-10);
  border-radius: 999px;
  background-color: transparent;
  font-weight: 600;
}

.c-tag--outlined.c-tag--s {
  padding: 4px 12px;
}

.c-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-violet-violet-500);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — OFFERING
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-offering {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--radius-xl);
  background-color: var(--color-violet-violet-100);
  width: 580px;
  min-width: 200px;
  height: 260px;
}

.c-card-offering__title {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
}

.c-card-offering__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

/* (responsive overrides below in adaptive section — width 453px / 326px) */

/* ════════════════════════════════════════════════════════════════════════════
   CARD — ROLE
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   GALLERY
   ════════════════════════════════════════════════════════════════════════════ */

.c-gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.c-gallery::-webkit-scrollbar {
  display: none;
}

.c-gallery__item {
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
}

.c-gallery__item img {
  width: 100%;
  height: 336px;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD — WORK TOGETHER
   ════════════════════════════════════════════════════════════════════════════ */

.c-card-work {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--radius-xl);
  background-color: var(--color-neutral-white-50);
  width: 580px;
  height: 260px;
}

.c-card-work__title-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.c-card-work__title {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
}

.c-card-work__description {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-neutral-black-900);
}

.c-card-work__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1024px) {
  .c-card-work {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PAGE SECTIONS — Main page layout
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section base ─── */
.s-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

.s-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ── Hero */
.s-hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* small viewport — stable, does NOT resize when mobile chrome shows/hides */
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 56px 0 24px 0;
  overflow-x: clip;
}

.s-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.s-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--color-neutral-white-50) 97.676%);
  backdrop-filter: blur(12px);
}

.s-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.s-hero__title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
  flex: 1;
}

.s-hero__title-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  width: 100%;
}

.s-hero__title {
  font-family: var(--font-family);
  font-size: var(--heading-64-size);
  font-weight: var(--heading-64-weight);
  line-height: var(--heading-64-line-height);
  letter-spacing: var(--heading-64-letter-spacing);
  color: var(--color-neutral-black-900);
}

/* Mobile-only forced break inside the H1 — adds the extra line wrap
   between "of product" and "& design talent" on 375 without
   duplicating the heading text in the DOM. */
.s-hero__br-mobile {
  display: none;
}
@media (max-width: 480px) {
  .s-hero__br-mobile { display: inline; }
}

.s-hero__subtitle {
  font-family: var(--font-family);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-alpha-black-900-90);
  max-width: 670px;
}

.s-hero__buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.s-hero__logos {
  width: 100%;
  overflow: hidden;
}

.s-hero__logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-logos 50s linear infinite;
  will-change: transform;
}
/* Paused when JS detects the marquee is offscreen — saves CPU/GPU */
.s-hero__logos-track.is-paused,
.s-beyond__gallery-track.is-paused,
.s-cases__bg.is-paused,
.s-beyond__bg.is-paused,
.s-work__bg.is-paused {
  animation-play-state: paused;
}

/* Bg orbit animations — 8-point ellipse approximations on the GPU.
   Each keyframe re-applies the full transform stack to preserve the
   element's centering + rotation/scale on top of the orbit offset. */
.s-cases__bg  { animation: orbit-cases  10s linear infinite; }
.s-beyond__bg { animation: orbit-beyond 12s linear infinite reverse; }
.s-work__bg   { animation: orbit-work   11s linear infinite; }

@keyframes orbit-cases {
  0%    { transform: translate(calc(-50% + 450px), -50%); }
  12.5% { transform: translate(calc(-50% + 318px), calc(-50% + 184px)); }
  25%   { transform: translate(-50%,                calc(-50% + 260px)); }
  37.5% { transform: translate(calc(-50% - 318px), calc(-50% + 184px)); }
  50%   { transform: translate(calc(-50% - 450px), -50%); }
  62.5% { transform: translate(calc(-50% - 318px), calc(-50% - 184px)); }
  75%   { transform: translate(-50%,                calc(-50% - 260px)); }
  87.5% { transform: translate(calc(-50% + 318px), calc(-50% - 184px)); }
  100%  { transform: translate(calc(-50% + 450px), -50%); }
}
@keyframes orbit-beyond {
  0%    { transform: translate(calc(-50% + 520px), -50%)                rotate(180deg); }
  12.5% { transform: translate(calc(-50% + 368px), calc(-50% + 255px))  rotate(180deg); }
  25%   { transform: translate(-50%,                calc(-50% + 360px)) rotate(180deg); }
  37.5% { transform: translate(calc(-50% - 368px), calc(-50% + 255px))  rotate(180deg); }
  50%   { transform: translate(calc(-50% - 520px), -50%)                rotate(180deg); }
  62.5% { transform: translate(calc(-50% - 368px), calc(-50% - 255px))  rotate(180deg); }
  75%   { transform: translate(-50%,                calc(-50% - 360px)) rotate(180deg); }
  87.5% { transform: translate(calc(-50% + 368px), calc(-50% - 255px))  rotate(180deg); }
  100%  { transform: translate(calc(-50% + 520px), -50%)                rotate(180deg); }
}
@keyframes orbit-work {
  0%    { transform: translate(calc(-50% + 380px), -50%)                rotate(180deg) scaleY(-1); }
  12.5% { transform: translate(calc(-50% + 269px), calc(-50% + 163px))  rotate(180deg) scaleY(-1); }
  25%   { transform: translate(-50%,                calc(-50% + 230px)) rotate(180deg) scaleY(-1); }
  37.5% { transform: translate(calc(-50% - 269px), calc(-50% + 163px))  rotate(180deg) scaleY(-1); }
  50%   { transform: translate(calc(-50% - 380px), -50%)                rotate(180deg) scaleY(-1); }
  62.5% { transform: translate(calc(-50% - 269px), calc(-50% - 163px))  rotate(180deg) scaleY(-1); }
  75%   { transform: translate(-50%,                calc(-50% - 230px)) rotate(180deg) scaleY(-1); }
  87.5% { transform: translate(calc(-50% + 269px), calc(-50% - 163px))  rotate(180deg) scaleY(-1); }
  100%  { transform: translate(calc(-50% + 380px), -50%)                rotate(180deg) scaleY(-1); }
}

.s-hero__logos-track img {
  flex-shrink: 0;
  max-width: none;
  margin-right: 144px;
  opacity: 0.6;
}

@keyframes marquee-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Hero — Tablet (≤768)*/
@media (max-width: 1024px) {
  .s-hero {
    padding: 56px 0 24px 0;
    min-height: 0;
    height: 100vh;
    height: 100svh;
  }
  .s-hero__title {
    font-size: 56px;
    line-height: 1.2;
    letter-spacing: -1.12px;
  }
  .s-hero__subtitle {
    font-size: 20px;
    max-width: 720px;
  }
  .s-hero__title-block {
    gap: 48px;
    padding-inline: 24px;
  }
  .s-hero__title-text {
    gap: 16px;
  }
}

/* ── Hero — Mobile (≤480)*/
@media (max-width: 480px) {
  .s-hero {
    padding: 48px 0 24px 0;
    height: 100vh;
    height: 100svh;
  }
  .s-hero__title {
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: -0.8px;
  }
  .s-hero__subtitle {
    font-size: 16px;
  }
  .s-hero__title-block {
    gap: 40px;
    padding-inline: 16px;
  }
  .s-hero__title-text {
    max-width: 344px;
  }
  /* Buttons side-by-side, equal widths up to 168px (per Figma 396:2057) */
  .s-hero__buttons {
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }
  .s-hero__buttons > .c-button {
    flex: 1 0 0;
    max-width: 168px;
    min-width: 48px;
  }
  .s-hero__logos-track img {
    margin-right: 72px;
  }
  /* Mobile spacing is half of desktop's (72px vs 144px), which shortens
     the marquee track ~23%. Shorten the animation duration by the same
     ratio so the perceived px/sec scroll speed matches the desktop loop. */
  .s-hero__logos-track {
    animation-duration: 38s;
  }
}

/* ── Team */
.s-team {
  padding-top: 160px;
  padding-bottom: 80px;
  overflow-x: clip;
}

/* Layout matches the previous prod build (hirehire-one.vercel.app).
   - `.s-team__cards-row { overflow: hidden }` clips at the row edges.
   - `.s-team__cards { overflow: visible }` lets cards spill past the
     viewport on either side as they slide.
   - Permanent edge gradients on `.s-team__cards-row::before/::after`
     (`linear-gradient(#fff, transparent)`, 80px wide), `z-index: 2`.
     Always opacity 1, no `--fading` toggle, no JS coordination.
   - Arrows sit on top at `z-index: 3`.
   - Cards passing through the gradient zone visibly fade out into
     white as they exit; the static 14px spillover of the 7th card
     past the cards-container right edge sits under the gradient + the
     right arrow and is hidden well enough that the user sees 3 cards.
   See instruction.md → Team carousel constraints. */
.s-team__cards-row {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Gradients live in the 32px gap between each arrow and the cards
   container (NOT under the arrows). They fade from solid white at the
   arrow side to transparent at the cards side, so a card sliding past
   the cards-container edge into the gap progressively dissolves. */
.s-team__cards-row::before,
.s-team__cards-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 2;
  pointer-events: none;
}

/* Stops `#fff 0%, #fff 50%, transparent 100%` — the inner 50% of each
   gradient (the half nearest the arrow) is solid white, so any card
   tail that ends up in this zone at the end of a slide is fully
   hidden BEFORE clip-path snaps back. No visible flicker on close.
   The outer 50% (nearest the cards) softly fades for the during-slide
   smoothness. */
.s-team__cards-row::before {
  left: 48px;  /* immediately right of the left arrow */
  background: linear-gradient(to right, #fff 0%, #fff 40%, transparent 100%);
}

.s-team__cards-row::after {
  right: 48px;  /* immediately left of the right arrow */
  background: linear-gradient(to left, #fff 0%, #fff 40%, transparent 100%);
}

/* Arrow buttons need an opaque background so cards passing behind them
   (during a slide) are fully hidden. The base `.c-button--icon` has
   transparent background; we override it for the team carousel only. */
.s-team__cards-row .c-button--icon {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  background-color: var(--color-neutral-white-50);
}

/* In static, clip-path inset(0) hard-clips at the container edge so
   exactly 3 cards are visible. During a slide the .s-team__cards-row
   --fading class flips clip-path INSTANTLY (no transition) to
   inset(0 -120px), letting cards extend past the container into the
   gap area where the gradient fades them. At slide end the class is
   removed and clip snaps back instantly — no fade-out animation, just
   a clean clip. */
.s-team__cards {
  overflow: visible;
  flex: 1;
  min-width: 0;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
}

.s-team__cards-row--fading .s-team__cards {
  /* Extend clip exactly into the 32px gap zone on each side (where the
     gradient sits) — never past the arrow zone, so cards can't escape
     into the page area beyond the arrows. */
  clip-path: inset(0 -32px);
  -webkit-clip-path: inset(0 -32px);
}

.s-team__cards-track {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* Static 3-card layout per Figma 374:2003 — cards flex-grow to fill the
   row width on desktop. (Mobile media below switches the track to native
   horizontal scroll and pins each card back to its 326px width.) */
.s-team__cards-track > .c-card-team {
  flex: 1 0 0;
  width: auto;
}

/* Pagination is only meaningful when the track scrolls horizontally —
   hidden by default (desktop static row), revealed on tablet/mobile via
   the @media block below. */
.s-team__pagination {
  display: none;
}

.s-team__card-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* ── Case Studies */
.s-cases {
  padding-top: 120px;
  padding-bottom: 80px;
  z-index: 0;
  position: relative;
  isolation: isolate;
}

.s-cases__bg {
  position: absolute;
  width: 2680px;
  height: 1797px;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.s-cases .s-section__content {
  position: relative;
  z-index: 1;
}

.s-cases__carousel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.s-cases__carousel-row {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.s-cases__carousel-row > .c-button--icon {
  transition: opacity 0s;
}

.s-cases__cards-stack {
  flex: 1;
  position: relative;
  min-width: 0;
  height: 412px;
}

.s-cases__cards-stack > .s-cases__card {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  filter: blur(0);
  will-change: transform, opacity, filter;
}

.s-cases__card-bg {
  position: absolute;
  height: 380px;
  border-radius: var(--radius-xl);
  left: 50%;
  transform: translateX(-50%);
  will-change: transform;
  /* Always visible — stack of 3 cards is shown statically from the start. */
}

.s-cases__card-bg--1 {
  width: calc(100% - 64px);
  top: 16px;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.s-cases__card-bg--2 {
  width: calc(100% - 128px);
  top: 32px;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* ── Case Study Card (page variant) ─── */
.c-card-case--page {
  display: flex;
  position: relative;
  background: var(--color-neutral-white-50);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 8px;
  gap: 0;
  height: 380px;
  justify-content: space-between;
}

.c-card-case--page .c-card-case__left {
  flex: 0 0 542px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 16px;
}

.c-card-case--page .c-card-case__left img {
  max-width: none;
}

.c-card-case__title {
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
  margin-bottom: 8px;
}

.c-card-case__description {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-60);
  margin-bottom: 20px;
}

.c-card-case--page .c-card-case__right {
  flex: 0 0 305px;
  background-color: var(--color-violet-violet-100);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.c-card-case__author {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

/* Avatar crop matches Figma exactly via per-card --ax/--ay/--aw vars
   (same pattern as .c-card-team__avatar) — image is absolute-positioned
   inside a 62px round window using percentages from Figma left/top/width. */
.c-card-case__avatar {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.c-card-case__avatar img {
  position: absolute;
  left: var(--ax, 0);
  top: var(--ay, 0);
  width: var(--aw, 100%);
  height: auto;
  max-width: none;
  display: block;
}

.c-card-case__author-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.c-card-case__quote {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
}

.c-card-case__author-name {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-neutral-black-900);
}

.c-card-case__author-role {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
  opacity: 0.6;
}

/* ── Testimonials / Wall of love */
.s-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  width: 100%;
}

/* ── Recruiting */
.s-recruiting__cards {
  display: flex;
  width: 100%;
}

.s-recruiting__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.s-recruiting__card-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 12px;
  text-align: center;
  width: 100%;
}

.s-recruiting__icon {
  width: 64px;
  height: 64px;
  border-radius: 70px;
  border: 1px solid var(--color-alpha-black-900-10);
  flex-shrink: 0;
}

/* ── Recruiting variant 02 */
.s-recruiting-section {
  padding: 160px 0;
  overflow-x: clip;
}

.s-recruiting-v2 {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  width: 100%;
}

.s-recruiting-v2__cta {
  align-self: center;
}

.s-recruiting-v2__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1180px;
}

.s-recruiting-v2__line--top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.s-recruiting-v2__line--bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.s-recruiting-v2__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Wrapper for [icon + first text] used on 375 to keep them as a single
   flex item; on desktop/tablet it dissolves so the original row layout
   isn't affected. */
.s-recruiting-v2__icon-pair {
  display: contents;
}

.s-recruiting-v2__headline-text {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.28px;
  color: var(--color-neutral-black-900);
  white-space: nowrap;
}

.s-recruiting-v2__icon {
  width: 77px;
  height: 77px;
  flex-shrink: 0;
}

/* Block 3 split helper: on desktop/tablet "evaluate the way" reads as a
   single span (inline-tablet stays inline). On 375 the inline part is
   hidden and break-mobile shows up as its own flex item, letting "the way"
   wrap to its own line under "We [icon] evaluate". */
.s-recruiting-v2__break-mobile {
  display: none;
}

.s-recruiting-v2__desc {
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-60);
  max-width: 554px;
}

/* Per-block creative paddings — match Figma exactly */
.s-recruiting-v2__block--1 .s-recruiting-v2__line--top    { padding-left: 100px; }
.s-recruiting-v2__block--1 .s-recruiting-v2__line--bottom { padding-left: 200px; }

.s-recruiting-v2__block--2 .s-recruiting-v2__line--top    { padding-left: 200px; align-items: center; }
.s-recruiting-v2__block--2 .s-recruiting-v2__line--bottom { padding-left: 300px; }

.s-recruiting-v2__block--3 .s-recruiting-v2__line--top    { width: 100%; }
.s-recruiting-v2__block--3 .s-recruiting-v2__line--bottom { padding-left: 200px; }

.s-recruiting-v2__block--4 { align-items: center; }
.s-recruiting-v2__block--4 .s-recruiting-v2__line--top    { padding-left: 400px; align-self: stretch; }
.s-recruiting-v2__block--4 .s-recruiting-v2__line--bottom { padding-left: 500px; }
.s-recruiting-v2__block--4 .s-recruiting-v2__row          { align-items: center; }

/* ── Recruiting v2 — Tablet (≤1024)*/
@media (max-width: 1024px) {
  .s-recruiting-section { padding: 80px 0; }
  /* Cap the whole block to the 768 design width and center it on wider
     tablet viewports — keeps the "creative" indents (pl-123 / pl-247) but
     anchors the column to page center instead of left edge. */
  .s-recruiting-v2 {
    gap: 48px;
    max-width: 720px;
    margin-inline: auto;
  }
  .s-recruiting-v2__block { width: 100%; }
  .s-recruiting-v2__headline-text { font-size: 56px; letter-spacing: -1.12px; font-weight: 800; white-space: normal; }
  .s-recruiting-v2__icon { width: 67px; height: 67px; }

  /* Per-block paddings per Figma 522:8013 */
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--2 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--3 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--3 .s-recruiting-v2__line--bottom { padding-left: 0; }
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--2 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--top { padding-left: 123px; }
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--bottom { padding-left: 247px; }

  /* Block 1: "We start with" must sit on the same visual line as
     "[icon] consulting" (Figma 522:8013). Flatten line-top + row via
     display:contents so block becomes the wrap container; icon-pair keeps
     icon stuck to the first word. "not sourcing" forced to its own line
     (flex-basis 100%) at pl-123 from block edge. */
  .s-recruiting-v2__block--1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    /* row-gap 0 (heading lines flow tight), column-gap 12 (between items) */
    gap: 0 12px;
  }
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--1 .s-recruiting-v2__row {
    display: contents;
  }
  .s-recruiting-v2__block--1 .s-recruiting-v2__icon-pair {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .s-recruiting-v2__block--1 .s-recruiting-v2__row > .s-recruiting-v2__headline-text:last-child {
    flex-basis: 100%;
    padding-left: 123px;
  }
  .s-recruiting-v2__block--1 .s-recruiting-v2__desc {
    flex-basis: 100%;
    margin-top: 8px;
    padding-left: 123px;
  }
}

/* ── Recruiting v2 — narrow tablet (481-767) — reduce creative paddings so
   56px ExtraBold headings still fit when the block is <720px wide. */
@media (max-width: 767px) and (min-width: 481px) {
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--2 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--top { padding-left: 60px; }
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--bottom { padding-left: 120px; }
  .s-recruiting-v2__block--1 .s-recruiting-v2__row > .s-recruiting-v2__headline-text:last-child,
  .s-recruiting-v2__block--1 .s-recruiting-v2__desc { padding-left: 60px; }
}

/* ── Recruiting v2 — Mobile (≤480)
   Per Figma 375 each block is ONE flex-wrap container with all title
   text/icons flowing together; description sits below as its own row. We
   flatten our line--top + line--bottom via display:contents so their
   children become direct block children, then treat the block itself as
   the wrap container. Desc takes flex-basis:100% to break to a new row. */
@media (max-width: 480px) {
  .s-recruiting-section { padding: 80px 0; }
  .s-recruiting-v2 { gap: 48px; }
  .s-recruiting-v2__block,
  .s-recruiting-v2__block--4 {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    /* row-gap 0 (wrapped title lines flow tight), column-gap 8 (between
       items on the same line). Extra 8px between title and description is
       added via desc's margin-top. */
    gap: 0 8px;
    width: 100%;
  }
  .s-recruiting-v2__headline-text { font-size: 32px; letter-spacing: -0.64px; font-weight: 700; white-space: nowrap; }
  .s-recruiting-v2__icon { width: 38px; height: 38px; }

  /* Reset all per-block paddings */
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--1 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--2 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--2 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--3 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--3 .s-recruiting-v2__line--bottom,
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--top,
  .s-recruiting-v2__block--4 .s-recruiting-v2__line--bottom { padding-left: 0; }

  /* Flatten line wrappers so all title pieces become direct block children */
  .s-recruiting-v2__line--top,
  .s-recruiting-v2__line--bottom {
    display: contents;
  }

  /* Flatten row → its children become direct block flex items so all title
     parts wrap together as siblings (matches Figma 522:8310). The icon-pair
     wrapper now holds icon + first text together as a single flex item. */
  .s-recruiting-v2__row {
    display: contents;
  }
  .s-recruiting-v2__icon-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* Block 3: flip the split — drop the inline " the way" so the icon-pair
     reads "[icon] evaluate" alone (fits next to "We"), and surface the
     standalone "the way" as its own flex item that wraps to a new line. */
  .s-recruiting-v2__inline-tablet { display: none; }
  .s-recruiting-v2__break-mobile { display: inline; }

  /* Reset 1024-tablet's padding-left and flex-basis on "not sourcing" so
     it sizes to its content and centers via the block's justify-content. */
  .s-recruiting-v2__block--1 .s-recruiting-v2__row > .s-recruiting-v2__headline-text:last-child {
    padding-left: 0;
    flex-basis: auto;
  }

  .s-recruiting-v2__desc {
    flex-basis: 100%;
    margin-top: 8px;
    text-align: center;
    max-width: 100%;
  }
  /* Reset 1024-tablet's block--1 desc padding-left (it has higher
     specificity than the generic desc rule above, so it would otherwise
     leak to mobile and squash the text width). */
  .s-recruiting-v2__block--1 .s-recruiting-v2__desc {
    padding-left: 0;
  }
}

/* ── Offering */
.s-offering {
  overflow-x: visible;
}

.s-offering__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.c-card-offering--page {
  width: calc(50% - 10px);
}

.c-tag--violet {
  background-color: var(--color-violet-violet-200);
}

/* ── Featured Roles
   Each row is a horizontal table-like layout: [title @ company] |
   [pin + location · format] | [arrow chevron]. Border-top draws the
   separator above each row (including the first), no border at the
   bottom of the last. */
.s-roles__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c-card-role--page {
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--color-alpha-black-900-10);
  padding: 20px 0;
  min-height: 140px;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Top card has no separator above it — the section already has space
   between this block and the title/section above. */
.s-roles__list .c-card-role--page:first-child {
  border-top: none;
}

/* Hover fades the text content (title + location) but keeps the arrow
   button at full opacity. Applied to specific children rather than the
   parent so opacity inheritance doesn't dim the arrow too.
   `will-change: opacity` hints Safari to keep this on its own compositor
   layer so opacity transitions don't reflow text antialiasing (without it
   the first card's title jittered on hover — first card has no border-top
   so its baseline aligns exactly to the list edge and the flicker showed).
   Note: NOT using `transform: translateZ(0)` here — the title-section
   contains the absolutely-positioned arrow, and a transform on the parent
   would re-anchor the arrow's containing block. */
.c-card-role__title-section,
.c-card-role__location {
  transition: opacity 0.2s ease;
  will-change: opacity;
}

/* Apply GPU promotion to the text spans themselves (not their wrapping
   flex container) — this is the layer that actually does the antialiased
   text rendering, so this is where the Safari opacity-jitter manifested. */
.c-card-role__title,
.c-card-role__company,
.c-card-role__location-text,
.c-card-role__format {
  transform: translateZ(0);
}

.c-card-role--page:hover .c-card-role__title-section,
.c-card-role--page:hover .c-card-role__location {
  opacity: 0.6;
}

.c-card-role__title-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  min-width: 400px;
  padding-right: 64px;
  font-family: var(--font-family);
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  white-space: nowrap;
}

/* Title-wrapper exists for the 375 layout to group title + company so the
   arrow can sit beside them. On desktop/tablet it's invisible (display:
   contents) — its children become direct title-section flex items. */
.c-card-role__title-wrapper {
  display: contents;
}

.c-card-role__title {
  color: var(--color-neutral-black-900);
}

.c-card-role__company {
  color: var(--color-alpha-black-900-60);
}

.c-card-role__location {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  min-width: 0;
  padding-right: 64px;
  overflow: hidden;
}

/* 24×24 frame matching the Figma "location" icon component, with the
   16×20 pin SVG centered inside (8.33% inset top/bottom). */
.c-card-role__location-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

.c-card-role__location-icon img {
  display: block;
  width: 16px;
  height: 20px;
}

.c-card-role__location-text,
.c-card-role__format {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: 1;
  white-space: nowrap;
}

.c-card-role__location-text {
  color: var(--color-neutral-black-900);
}

.c-card-role__format {
  color: var(--color-alpha-black-900-90);
}

.c-card-role__bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-alpha-black-900-60);
  flex-shrink: 0;
}

/* Positional override only — visual styling comes from the .c-button
   component classes (c-button c-button--m c-button--secondary).
   Override width/padding to make it a square icon-only button. */
.c-card-role__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  padding: 0;
}

/* ── Beyond Resume */
.s-beyond {
  position: relative;
  isolation: isolate;
  z-index: 0;
  padding: 160px 0;
}

.s-beyond__bg {
  position: absolute;
  width: 2840px;
  height: 1883px;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  pointer-events: none;
  z-index: 0;
}

.s-beyond .s-section__content {
  position: relative;
  z-index: 1;
}

/* Marquee gallery — 9 photos × 2 (duplicated for seamless loop),
   each rotated slightly via inline transform. The track scrolls
   horizontally at constant speed. We don't put overflow:hidden here —
   the parent section (.s-beyond) already has overflow-x:clip which
   prevents horizontal scroll without trimming the rotated corners
   of photos at the viewport edge. */
.s-beyond__gallery {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.s-beyond__gallery-track {
  display: flex;
  align-items: center;
  /* IMPORTANT: don't use `gap` here — with N items it creates N-1
     gaps. After translateX(-50%) the duplicate set's first image lands
     half-a-gap off from the original start position → visible jitter
     once per loop. Putting equal margin-right on every <img> gives N
     gaps total, so 50% translation aligns exactly. */
  width: max-content;
  animation: marquee-gallery 28s linear infinite;
}

.s-beyond__gallery img {
  flex-shrink: 0;
  display: block;
  max-width: none;
  margin-right: 48px;
}

@keyframes marquee-gallery {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── FAQ */
.s-faq {
  padding: 120px 0;
}

.s-faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Top FAQ item has no separator above it. */
.s-faq__list .c-accordion__item:first-child {
  border-top: none;
}

.c-accordion__trigger--page > span:first-child {
  flex: 1;
  max-width: 770px;
  padding-right: 48px;
}

/* ── Work Together */
.s-work {
  padding-top: 80px;
  padding-bottom: 160px;
  z-index: 0;
  position: relative;
  isolation: isolate;
}

.s-work__bg {
  position: absolute;
  width: 2590px;
  height: 1245px;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(180deg) scaleY(-1);
  pointer-events: none;
  z-index: 0;
}

.s-work .s-section__content {
  position: relative;
  z-index: 1;
}

.s-work__cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.c-card-work--page {
  flex: 1;
}

/* ── Footer */
.s-footer {
  border-top: 1px solid var(--color-alpha-black-900-10);
  padding: 80px 0 48px;
  position: relative;
  z-index: 1;
}

.s-footer__content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

@media (max-width: 1024px) {
  .s-footer__content {
    padding-inline: 24px;
  }
}

@media (max-width: 480px) {
  .s-footer__content {
    padding-inline: 16px;
  }
}

.s-footer__top-links {
  display: flex;
  gap: 12px;
}

.s-footer__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s-footer__link {
  font-family: var(--font-family);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-neutral-black-900);
  text-decoration: none;
}

.s-footer__link:hover {
  opacity: 0.7;
}

.s-footer__logo-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.s-footer__big-logo {
  width: 100%;
}

.s-footer__big-logo img,
.s-footer__big-logo svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1181 / 256;
  object-fit: contain;
}

.s-footer__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.s-footer__agency-label img {
  max-width: none;
}

.s-footer__bottom-links {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.s-footer__bottom-link {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-neutral-black-900);
  text-decoration: none;
}

.s-footer__bottom-link:hover {
  opacity: 0.7;
}

/* ── Title Section (page variant) ─── */
.c-title-section--center {
  text-align: center;
  align-items: center;
}

.c-title-section--center .c-title-section__description {
  /* inherits base styles */
}

/* ════════════════════════════════════════════════════════════════════════════
   ADAPTIVE — TABLET (≤768) & MOBILE (≤480)
   Page-wide rules for breakpoints, mirrored from Figma frames
   [768] main (387:1271), [375] main (396:2056).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Tablet ─── */
@media (max-width: 1024px) {
  /* Section content fits 768 with 24px gutters */
  .s-section__content {
    max-width: 100%;
    padding-inline: 24px;
  }

  /* Default section paddings stay (per Figma, 768 mostly mirrors 1440) */

  /* Title section */
  .c-title-section__heading.heading-40 {
    font-size: 40px;
    line-height: 1.3;
    letter-spacing: -0.8px;
  }
  .c-title-section__description {
    font-size: 20px;
  }

  /* Team carousel — full-bleed via explicit width + negative margin to cancel
     parent .s-section__content padding-inline (24 at 768, 16 at 480).
     Avoids 100vw scrollbar bug. */
  .s-team__cards-row {
    width: calc(100% + 48px);
    margin-inline: -24px;
    gap: 0;
    overflow: visible;
  }
  .s-team__cards,
  .s-team__cards-row--fading .s-team__cards {
    width: 100%;
    overflow: visible;
    clip-path: none;
    -webkit-clip-path: none;
  }
  .s-team__cards-track {
    /* Full-bleed (cancels parent .s-section__content padding-inline:24px)
       so the horizontal scroll runs edge-to-edge on tablet/mobile. */
    width: calc(100% + 48px);
    margin-inline: -24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    gap: 20px;
    transform: none !important;
    scrollbar-width: none;
  }
  .s-team__cards-track::-webkit-scrollbar { display: none; }
  /* Revert the desktop flex-grow rule — on tablet/mobile the cards
     keep their fixed 326px width and scroll-snap by their CENTRE.
     `scroll-snap-align: start` would put the last card's snap point past
     the track's max-scroll on viewports that fit only ~2 cards (e.g. 768),
     and `mandatory` would pull the carousel back to the only reachable
     snap point — making the last pagination dot effectively unreachable.
     Centre-aligned snap gives every card a snap position that's clamped
     into the [0, maxScroll] range. */
  .s-team__cards-track > .c-card-team {
    flex: 0 0 326px;
    width: 326px;
    scroll-snap-align: center;
  }
  /* Show the pagination dots beneath the scrollable team track. */
  .s-team__pagination { display: flex; }
  .s-team__cards-row::before,
  .s-team__cards-row::after { display: none; }
  .s-team__cards-row .c-button--carousel-nav { display: none; }

  /* Testimonials — single column at 768 (per Figma 387:1276) */
  .s-testimonials__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Case studies — stack carousel per Figma 390:2419. Same swipe principle as
     375 but card keeps its 2-column layout. BG cards inset 32/64 (vs 16/40
     on 375). Arrows hidden, only pagination + swipe. */
  .s-cases__carousel-row > .c-button--icon { display: none; }
  .s-cases__carousel-row { gap: 0; }
  .s-cases__cards-stack {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    width: 100%;
    height: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
    gap: 0;
  }
  .s-cases__cards-stack > .s-cases__card {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    transform: none !important;
    align-self: stretch;
    z-index: 3;
  }
  .s-cases__card-bg--1,
  .s-cases__card-bg--2 {
    display: block;
    position: absolute;
    top: 0;
    transform: none;
    height: auto;
    border-radius: var(--radius-xl);
    pointer-events: none;
  }
  .s-cases__card-bg--1 {
    left: 32px;
    right: 32px;
    width: auto;
    bottom: -16px;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
  .s-cases__card-bg--2 {
    left: 64px;
    right: 64px;
    width: auto;
    bottom: -32px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
  }
  .s-cases .s-section__content { gap: 32px; }
  .s-cases__carousel { gap: 48px; }

  /* Card layout per Figma 768 (390:2426): 2-col flex, both columns flex:1,
     gap 8, padding 8. Left has gap-40 between logo and content. Button is
     pinned to the bottom via margin-top:auto so it stays in the same place
     across cards regardless of title/desc length. To push button (which lives
     inside __text) to bottom of __left, flatten __text via display:contents. */
  .c-card-case--page {
    width: 100%;
    height: auto;
    gap: 8px;
    padding: 8px;
    align-items: stretch;
  }
  .c-card-case--page .c-card-case__left {
    flex: 1 1 0;
    height: auto;
    gap: 0;
    justify-content: flex-start;
  }
  .c-card-case--page .c-card-case__text {
    display: contents;
  }
  /* Sections separated by fixed margins (preserves card height same as
     before): logo→title 40, title→desc 8, desc→button 40. Button also has
     margin-top:auto so when the card stretches taller than the natural
     content (e.g. tall __right), button stays pinned to the bottom. */
  .c-card-case--page .c-card-case__left > div:first-child {
    margin-bottom: 40px;
  }
  .c-card-case--page .c-card-case__title {
    margin-bottom: 8px;
  }
  .c-card-case--page .c-card-case__description {
    margin-bottom: 40px;
  }
  .c-card-case--page .c-card-case__text > .c-button {
    margin-top: auto; /* pin to bottom when there is free space */
    align-self: flex-start; /* size to content, not stretched */
  }
  .c-card-case--page .c-card-case__right {
    flex: 1 1 0;
    height: auto;
  }

  /* Offering pagination — visible in carousel mode (per Figma 387:1278) */
  .s-offering__pagination { display: flex; }

  /* Offering — full-bleed horizontal scroll (per Figma 387:1278) */
  .s-offering__grid {
    flex-wrap: nowrap;
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 20px;
    scrollbar-width: none;
  }
  .s-offering__grid::-webkit-scrollbar { display: none; }
  .c-card-offering,
  .c-card-offering--page {
    width: 453px;
    height: 417px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Featured roles — keep list typography from heading/24 token.
     On 481-1024 (tablet) stack title-section over location per Figma
     387:1279. Below 481 the rounded-card layout takes over. */
  .c-card-role--page {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-right: 64px;
  }
  .c-card-role__title-section,
  .c-card-role__location {
    flex: none;
    min-width: 0;
    width: 100%;
    padding-right: 0;
  }

  /* Beyond gallery — already marquee */

  /* FAQ per Figma 390:3323 — section py-80, no pr on description */
  .s-faq { padding: 80px 0; }
  .c-accordion__content { padding-right: 0; }

  /* Work — stacked column per Figma 390:3418 */
  .s-work__cards { flex-direction: column; gap: 20px; }
  /* Reset .c-card-work--page { flex: 1 } so height:260 isn't collapsed in
     the column flex stack. */
  .c-card-work,
  .c-card-work--page {
    flex: 0 0 260px;
    height: 260px;
    overflow: hidden;
    width: 100%;
  }

  /* Footer per Figma 390:3490 */
  .s-footer__top-links { gap: 24px; }
  .s-footer__logo-section { gap: 16px; }
  .s-footer__agency-label img { width: 201px; height: 62px; }
  .s-footer__bottom-links { align-items: center; }

  /* Shrink the orbiting bg svgs on tablet so they fit the smaller
     sections and don't bleed into adjacent white-card blocks. */
  .s-cases__bg  { height: 1100px; }
  .s-beyond__bg { height: 1200px; }
  .s-work__bg   { height:  800px; }

  /* On tablet/mobile the orbits stay in the LOWER half of the section
     instead of swinging through the full range — every Y waypoint is
     shifted down by the orbit's amplitude, so the bg's centre never
     rises above its baseline (top:50%). This keeps the bottom of the
     section permanently covered, so the white cards below don't end
     up sitting on a white background when the bg drifts upward.
     Horizontal motion is preserved, so the path still reads as a circle
     — just an asymmetric one biased downward. */
  @keyframes orbit-cases {
    0%    { transform: translate(calc(-50% + 450px), calc(-50% + 260px)); }
    12.5% { transform: translate(calc(-50% + 318px), calc(-50% + 444px)); }
    25%   { transform: translate(-50%,                calc(-50% + 520px)); }
    37.5% { transform: translate(calc(-50% - 318px), calc(-50% + 444px)); }
    50%   { transform: translate(calc(-50% - 450px), calc(-50% + 260px)); }
    62.5% { transform: translate(calc(-50% - 318px), calc(-50% +  76px)); }
    75%   { transform: translate(-50%,               -50%); }
    87.5% { transform: translate(calc(-50% + 318px), calc(-50% +  76px)); }
    100%  { transform: translate(calc(-50% + 450px), calc(-50% + 260px)); }
  }
  @keyframes orbit-beyond {
    0%    { transform: translate(calc(-50% + 520px), calc(-50% + 360px)) rotate(180deg); }
    12.5% { transform: translate(calc(-50% + 368px), calc(-50% + 615px)) rotate(180deg); }
    25%   { transform: translate(-50%,                calc(-50% + 720px)) rotate(180deg); }
    37.5% { transform: translate(calc(-50% - 368px), calc(-50% + 615px)) rotate(180deg); }
    50%   { transform: translate(calc(-50% - 520px), calc(-50% + 360px)) rotate(180deg); }
    62.5% { transform: translate(calc(-50% - 368px), calc(-50% + 105px)) rotate(180deg); }
    75%   { transform: translate(-50%,               -50%)                rotate(180deg); }
    87.5% { transform: translate(calc(-50% + 368px), calc(-50% + 105px)) rotate(180deg); }
    100%  { transform: translate(calc(-50% + 520px), calc(-50% + 360px)) rotate(180deg); }
  }
  @keyframes orbit-work {
    0%    { transform: translate(calc(-50% + 380px), calc(-50% + 230px)) rotate(180deg) scaleY(-1); }
    12.5% { transform: translate(calc(-50% + 269px), calc(-50% + 393px)) rotate(180deg) scaleY(-1); }
    25%   { transform: translate(-50%,                calc(-50% + 460px)) rotate(180deg) scaleY(-1); }
    37.5% { transform: translate(calc(-50% - 269px), calc(-50% + 393px)) rotate(180deg) scaleY(-1); }
    50%   { transform: translate(calc(-50% - 380px), calc(-50% + 230px)) rotate(180deg) scaleY(-1); }
    62.5% { transform: translate(calc(-50% - 269px), calc(-50% +  67px)) rotate(180deg) scaleY(-1); }
    75%   { transform: translate(-50%,               -50%)                rotate(180deg) scaleY(-1); }
    87.5% { transform: translate(calc(-50% + 269px), calc(-50% +  67px)) rotate(180deg) scaleY(-1); }
    100%  { transform: translate(calc(-50% + 380px), calc(-50% + 230px)) rotate(180deg) scaleY(-1); }
  }
}

/* ── Mobile (≤480, mirrors 375 design) ─── */
@media (max-width: 480px) {
  /* Section content fits 375 with 16px gutters */
  .s-section__content {
    padding-inline: 16px;
    gap: 32px;
  }

  /* On 375 the bg fills the full height of the active card area and
     drifts only a few pixels — so there's never a gap at the section
     edges, and the motion reads as a gentle breathing rather than a
     full orbit. Heights are bumped above the section size, then the
     keyframes (below) shrink the orbit amplitude to ~10% of desktop. */
  .s-cases__bg  { height: 1600px; }
  .s-beyond__bg { height: 1800px; }
  .s-work__bg   { height: 1250px; }
  /* Nudge the orbit centre a touch below section centre on 375 — the
     bg shifts down slightly while keeping the gentle breathing motion. */
  .s-cases__bg,
  .s-beyond__bg,
  .s-work__bg {
    top: 58%;
  }

  @keyframes orbit-cases {
    0%    { transform: translate(calc(-50% + 45px), -50%); }
    12.5% { transform: translate(calc(-50% + 32px), calc(-50% + 18px)); }
    25%   { transform: translate(-50%,               calc(-50% + 26px)); }
    37.5% { transform: translate(calc(-50% - 32px), calc(-50% + 18px)); }
    50%   { transform: translate(calc(-50% - 45px), -50%); }
    62.5% { transform: translate(calc(-50% - 32px), calc(-50% - 18px)); }
    75%   { transform: translate(-50%,               calc(-50% - 26px)); }
    87.5% { transform: translate(calc(-50% + 32px), calc(-50% - 18px)); }
    100%  { transform: translate(calc(-50% + 45px), -50%); }
  }
  @keyframes orbit-beyond {
    0%    { transform: translate(calc(-50% + 52px), -50%)               rotate(180deg); }
    12.5% { transform: translate(calc(-50% + 37px), calc(-50% + 25px))  rotate(180deg); }
    25%   { transform: translate(-50%,               calc(-50% + 36px)) rotate(180deg); }
    37.5% { transform: translate(calc(-50% - 37px), calc(-50% + 25px))  rotate(180deg); }
    50%   { transform: translate(calc(-50% - 52px), -50%)               rotate(180deg); }
    62.5% { transform: translate(calc(-50% - 37px), calc(-50% - 25px))  rotate(180deg); }
    75%   { transform: translate(-50%,               calc(-50% - 36px)) rotate(180deg); }
    87.5% { transform: translate(calc(-50% + 37px), calc(-50% - 25px))  rotate(180deg); }
    100%  { transform: translate(calc(-50% + 52px), -50%)               rotate(180deg); }
  }
  @keyframes orbit-work {
    0%    { transform: translate(calc(-50% + 38px), -50%)               rotate(180deg) scaleY(-1); }
    12.5% { transform: translate(calc(-50% + 27px), calc(-50% + 16px))  rotate(180deg) scaleY(-1); }
    25%   { transform: translate(-50%,               calc(-50% + 23px)) rotate(180deg) scaleY(-1); }
    37.5% { transform: translate(calc(-50% - 27px), calc(-50% + 16px))  rotate(180deg) scaleY(-1); }
    50%   { transform: translate(calc(-50% - 38px), -50%)               rotate(180deg) scaleY(-1); }
    62.5% { transform: translate(calc(-50% - 27px), calc(-50% - 16px))  rotate(180deg) scaleY(-1); }
    75%   { transform: translate(-50%,               calc(-50% - 23px)) rotate(180deg) scaleY(-1); }
    87.5% { transform: translate(calc(-50% + 27px), calc(-50% - 16px))  rotate(180deg) scaleY(-1); }
    100%  { transform: translate(calc(-50% + 38px), -50%)               rotate(180deg) scaleY(-1); }
  }

  /* All sections: 80/80 vertical padding on 375 (Figma 396:2056). */
  .s-section,
  .s-recruiting-section,
  .s-beyond,
  .s-faq,
  .s-work {
    padding: 80px 0;
  }

  /* Typography */
  .c-title-section__heading.heading-40 {
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.64px;
  }
  .c-title-section__description {
    font-size: 16px;
  }

  /* Beyond Resume tag drops to size S on 375 (per Figma 385:1040). */
  .s-beyond .c-tag--outlined {
    padding: 4px 12px;
  }

  /* Team — narrower padding/gap for full-bleed mobile (per Figma 396:2058) */
  .s-team__cards-track {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    gap: 8px;
  }
  .s-team__cards-track > .c-card-team { flex: 0 0 326px; width: 326px; }

  /* Testimonials carousel pagination — only at 480 carousel mode */
  .s-testimonials__pagination { display: flex; }

  /* Testimonials per Figma 399:4757 — full-bleed horizontal scroll-snap.
     Cards w-310, separated by their own pr-48 (gap-0). Border on TOP. */
  .s-testimonials__grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    gap: 0;
    scrollbar-width: none;
  }
  .s-testimonials__grid::-webkit-scrollbar { display: none; }
  .c-card-testimonial {
    width: 310px;
    height: 416px;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 20px 48px 0 0;
    border-left: none;
    border-top: 1px solid var(--color-alpha-black-900-10);
    justify-content: space-between;
    gap: 0;
  }
  .c-card-testimonial__quote { font-size: 16px; }
  .c-card-testimonial__br-mobile { display: inline; }
  /* Author stacks vertically: avatar above name+position */
  .c-card-testimonial__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Case studies — stack carousel (single visible card, swipe to switch).
     Grid stacking: all cards in same cell, container auto-sizes to tallest.
     BG cards extend BELOW stack via negative offset (no visible page-bg gap). */
  .s-cases__cards-stack {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    width: 100%;
    height: auto;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: pan-y;
    gap: 0;
  }
  .s-cases__cards-stack > .s-cases__card {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    transform: none !important;
    /* Match tallest card: grid default align-self: stretch expands all cards
       to the grid cell height (= tallest). No jumpy height on card switch. */
    align-self: stretch;
    z-index: 3;
  }
  /* BG cards per Figma 399:4981/4983: full-size cards "tucked under" the main
     card (z-index: 1/2 vs main 3), top-aligned with main, bottom extending
     16/32px past main so only that strip peeks. Insets: 16px (bg-1) / 40px
     (bg-2). Colors: alpha/white 50 [60%/30%]. Reset desktop's fixed sizing. */
  .s-cases__card-bg--1,
  .s-cases__card-bg--2 {
    display: block;
    position: absolute;
    top: 0;
    transform: none;
    height: auto;
    border-radius: var(--radius-xl);
    pointer-events: none;
  }
  .s-cases__card-bg--1 {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: -16px;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 2;
  }
  .s-cases__card-bg--2 {
    left: 40px;
    right: 40px;
    width: auto;
    bottom: -32px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 1;
  }
  /* Push pagination further down to accommodate the 32px bg-card peek. */
  .s-cases .s-section__content { gap: 32px; }
  .s-cases__carousel { gap: 48px; }
  /* Card vertical per Figma 396:2060.
     Flatten __left + __text via display:contents so all 5 elements (logo,
     title, description, right, button) become direct flex children of card,
     then use `order` to put right before button. Spacing via margin-bottom
     on logo (to achieve 32 between logo and title, vs 8 card gap). */
  .c-card-case--page {
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    padding: 8px;
    gap: 8px;
  }
  .c-card-case--page .c-card-case__left,
  .c-card-case--page .c-card-case__text {
    display: contents;
  }
  /* Padding previously provided by __left wrapper */
  .c-card-case--page .c-card-case__left > div:first-child,
  .c-card-case__title,
  .c-card-case__description {
    padding-inline: 16px;
  }
  .c-card-case--page .c-card-case__left > div:first-child {
    padding-top: 16px;
    margin-bottom: 24px; /* + card gap 8 = 32 between logo and title */
  }
  .c-card-case--page .c-card-case__title { margin-top: 0; margin-bottom: 0; }
  .c-card-case--page .c-card-case__description {
    margin-bottom: 0;
    padding-bottom: 8px; /* + card gap 8 + right pt 16 = 32 to quote */
  }
  /* Re-order via CSS: right(1) → button(2) after title/desc */
  .c-card-case--page .c-card-case__right {
    order: 1;
    flex: none;
    width: 100%;
    padding: 16px;
    /* gap is the MINIMUM between quote and author; space-between distributes
       the rest as `auto` once JS equalizes min-height to the tallest. */
    gap: 20px;
    justify-content: space-between;
    border-radius: 24px;
    /* Push right + button pair to the bottom of the card; logo/title/desc
       stay at top and auto-space fills the gap. */
    margin-top: auto;
  }
  .c-card-case--page .c-card-case__text > .c-button {
    order: 2;
    width: 100%;
    /* Reset 768's margin-top:auto — on 375 layout, __right already pulls the
       quote-card + button pair to bottom via its own margin-top:auto. Two
       siblings with auto margin would split the free space instead of pinning. */
    margin-top: 0;
  }
  /* Text sizes on 375 */
  .c-card-case__quote { font-size: 14px; }
  .c-card-case__author-name,
  .c-card-case__author-role { font-size: 14px; }
  .c-card-case__avatar {
    width: 56px;
    height: 56px;
  }
  .s-cases__carousel-row > .c-button--icon { display: none; }
  .s-cases__carousel-row { gap: 16px; }

  /* Offering — smaller cards + narrower padding on 375 (per Figma 396:2063) */
  .s-offering__grid {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    gap: 8px;
  }
  .c-card-offering,
  .c-card-offering--page {
    width: 326px;
    height: 468px;
  }

  /* Featured roles — rounded cards per Figma 396:4337/398:4438. Card is
     flex-col gap-48; title-section is a flex-row holding [title-wrapper +
     arrow] with 32px gap; location is a separate row below. */
  .s-roles__list { gap: 24px; }
  .c-card-role--page,
  .s-roles__list .c-card-role--page:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    background: transparent;
    border: 1px solid var(--color-alpha-black-900-10);
    border-top: 1px solid var(--color-alpha-black-900-10);
    border-radius: 32px;
    padding: 24px;
    min-height: 0;
    position: relative;
  }
  /* Title-section: flex-row with title-wrapper (left) + arrow (right) */
  .c-card-role__title-section {
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    flex: none;
    min-width: 0;
    width: 100%;
    padding-right: 0;
    white-space: normal;
    font-size: 24px;
    line-height: 1.2;
  }
  /* Title-wrapper holds title + company stacked with 8px gap, fills width */
  .c-card-role__title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .c-card-role__title {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .c-card-role__format {
    color: var(--color-alpha-black-900-90);
  }
  .c-card-role__location {
    flex-wrap: wrap;
    flex: none;
    padding-right: 0;
    width: 100%;
  }
  /* Arrow lives inline inside title-section now — reset desktop's absolute
     positioning and force the 30×30 box. */
  .c-card-role__arrow {
    position: static;
    flex: none;
    width: 30px;
    height: 30px;
    transform: none;
    top: auto;
    right: auto;
  }

  /* FAQ per Figma 396:2066 — heading/24 token (24/1.4 SemiBold) */
  .c-accordion__trigger {
    font-size: var(--heading-24-size);
    line-height: 1.4;
    align-items: flex-start;
  }
  .c-accordion__trigger > span:first-child,
  .c-accordion__trigger--page > span:first-child {
    font-size: var(--heading-24-size);
    line-height: 1.4;
    padding-right: 20px;
  }
  .c-accordion__content {
    font-size: 16px;
    padding-top: 16px;
    padding-right: 0;
  }
  /* Toggle button 30×30 with 20px icon (per Figma) */
  .c-accordion__toggle {
    min-height: 30px;
    max-height: 30px;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
  }
  .c-accordion__toggle .c-button__icon {
    width: 20px;
    height: 20px;
  }

  /* Work — stack vertically per Figma 396:3136 */
  .s-work__cards { flex-direction: column; gap: 8px; }
  .s-work__cards > * { width: 100%; }
  /* Hide desktop-only line breaks (For candidates desc + team title desc) */
  .c-card-work__br-desktop,
  .c-title-section__br-desktop { display: none; }
  /* Enforce Figma's fixed 260 height; clip any content that happens to
     overflow on narrow widths so the card box stays exactly 260. Also reset
     `.c-card-work--page { flex: 1 }` (set for 1440 row layout) — in a column
     flex stack it forces flex-basis:0, overriding height:260. */
  .c-card-work,
  .c-card-work--page {
    flex: 0 0 260px;
    height: 260px;
    overflow: hidden;
  }
  /* Card 1: single button fills full width. Card 2: 2 buttons share width
     equally via flex:1 on each inside the wrapper. */
  .c-card-work > .c-button { width: 100%; }
  .c-card-work__buttons { width: 100%; }
  .c-card-work__buttons > * { flex: 1 1 0; min-width: 0; }

  /* Footer per Figma 396:3086 */
  .s-footer { padding-top: 40px; }
  .s-footer__content { gap: 40px; }
  .s-footer__top-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .s-footer__column {
    width: 100%;
    gap: 20px;
  }
  .s-footer__link {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.48px;
  }
  .s-footer__logo-section { gap: 8px; }
  .s-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .s-footer__agency-label img {
    width: 96px;
    height: 30px;
  }
  .s-footer__bottom-links {
    flex-wrap: wrap;
    gap: 12px 20px;
    width: 100%;
    align-items: flex-end;
  }
  .s-footer__bottom-link { font-size: 14px; }
}

/* ── Sub-375 viewports ──
   On phones narrower than the 375 design (e.g. 344, 320), the fixed
   326px team / offering cards consume nearly the whole row, so the
   peek of the next card disappears. Scale them down to keep a ~26px
   peek without touching the 375+ layout. */
@media (max-width: 374px) {
  .s-team__cards-track > .c-card-team {
    flex: 0 0 calc(100vw - 50px);
    width: calc(100vw - 50px);
  }

  /* Match the team treatment: scale offering cards + let height grow
     naturally since narrower cards make the tag list wrap into more
     rows than the fixed 468 can hold. */
  .s-offering__grid > .c-card-offering,
  .s-offering__grid > .c-card-offering--page {
    width: calc(100vw - 50px);
    height: auto;
    min-height: 468px;
  }

  /* Beyond Resume description's mobile breaks were placed for 375 line
     widths; on 344/320 they leave hanging single words ("what" alone,
     etc.). Drop them and let the text wrap naturally. */
  .s-beyond .c-title-section__description .c-title-section__br-mobile {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NOT FOUND (404) — Figma 2269:4191
   The 404 <main> itself is at least 100vh / 100dvh tall on every
   breakpoint; the centred content lands in its vertical middle. The
   footer follows in normal flow, so it lives below the first screen
   and only appears when the user scrolls. The fixed header overlays
   main's top — the 96px top padding keeps the centred block clear of it.
   ════════════════════════════════════════════════════════════════════════════ */
.s-not-found {
  min-height: 100vh;
  min-height: 100svh; /* stable on mobile — does NOT resize when chrome URL bar shows/hides */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 96px 24px;
  /* Positioning context for the orbit-animated background; isolation
     keeps the bg layer behind content. Only the horizontal axis is
     clipped (matches the rest of the site) so the SVG can bleed past
     the section vertically without forcing a horizontal scrollbar. */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.s-not-found__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: var(--content-max-width);
  text-align: center;
  color: var(--color-neutral-black-900);
  position: relative;
  z-index: 1;
}

.s-not-found__title-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.s-not-found__code {
  font-family: var(--font-family);
  font-size: var(--heading-64-size);
  font-weight: var(--heading-64-weight);
  line-height: var(--heading-64-line-height);
  letter-spacing: var(--heading-64-letter-spacing);
}

.s-not-found__subtitle {
  font-family: var(--font-family);
  font-size: var(--heading-40-size);
  font-weight: var(--heading-40-weight);
  line-height: var(--heading-40-line-height);
  letter-spacing: var(--heading-40-letter-spacing);
}

.s-not-found__description {
  font-family: var(--font-family);
  font-size: var(--text-20-size);
  font-weight: var(--text-20-weight);
  line-height: var(--text-20-line-height);
  color: var(--color-alpha-black-900-90);
}

.s-not-found__cta {
  padding-top: 40px;
}

/* Forced break only at ≤480 — at 1024+ the description fits on two
   lines naturally (one <br> in the middle); at 375 the narrower column
   needs the extra break per Figma. */
.s-not-found__br-mobile {
  display: none;
}

/* Tablet (≤768): only horizontal padding tightens — typography stays
   the same as desktop per Figma. */
@media (max-width: 1024px) {
  .s-not-found {
    padding: 96px 24px;
  }
}

/* Mobile (≤480) — typography drops a step: 64→40, 40→24, 20→16. */
@media (max-width: 480px) {
  .s-not-found {
    padding: 96px 16px 80px;
  }
  .s-not-found__code {
    font-size: var(--heading-40-size);
    font-weight: var(--heading-40-weight);
    line-height: var(--heading-40-line-height);
    letter-spacing: var(--heading-40-letter-spacing);
  }
  .s-not-found__subtitle {
    font-size: var(--heading-24-size);
    font-weight: var(--heading-24-weight);
    line-height: var(--heading-24-line-height);
    letter-spacing: var(--heading-24-letter-spacing);
  }
  .s-not-found__description {
    font-size: var(--text-16-size);
    line-height: var(--text-16-line-height);
  }
  .s-not-found__cta {
    padding-top: 24px;
  }
  .s-not-found__br-mobile {
    display: inline;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRIVACY POLICY (and any long-form prose page) — Figma 2195:5541
   Uses heading/40 + heading/32 + heading/24 + text/16 + text/20 from DS.
   ════════════════════════════════════════════════════════════════════════════ */
.s-policy {
  padding: 56px 0 0; /* top: header offset; bottom space lives on the last chunk */
}

.s-policy__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Reset .s-section__content's gap-48 — vertical rhythm comes from each
     chunk's padding-bottom instead. */
  gap: 0;
}

.s-policy__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 80px 0;
  width: 100%;
}

.s-policy__title {
  font-family: var(--font-family);
  font-size: var(--heading-40-size);
  font-weight: var(--heading-40-weight);
  line-height: var(--heading-40-line-height);
  letter-spacing: var(--heading-40-letter-spacing);
  color: var(--color-neutral-black-900);
  margin: 0;
}

.s-policy__updated {
  font-family: var(--font-family);
  font-size: var(--text-20-size);
  font-weight: var(--text-20-weight);
  line-height: var(--text-20-line-height);
  color: var(--color-alpha-black-900-60);
  margin: 0;
}

.s-policy__article {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 896px;
}

.s-policy__chunk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 40px;
}
/* Sub-section continuations (h2/h3 followed by another h3-only sibling)
   sit closer per Figma 2195:5541 — 20px gap instead of 40. */
.s-policy__chunk--tight { padding-bottom: 20px; }
/* Last chunk gets the bottom breathing room before the footer (Figma 160). */
.s-policy__chunk:last-child { padding-bottom: 160px; }

.s-policy__chunk h2 {
  font-family: var(--font-family);
  font-size: var(--heading-32-size);
  font-weight: var(--heading-32-weight);
  line-height: var(--heading-32-line-height);
  letter-spacing: var(--heading-32-letter-spacing);
  color: var(--color-neutral-black-900);
  margin: 0;
}

.s-policy__chunk h3 {
  font-family: var(--font-family);
  font-size: var(--heading-24-size);
  font-weight: var(--heading-24-weight);
  line-height: var(--heading-24-line-height);
  letter-spacing: var(--heading-24-letter-spacing);
  color: var(--color-neutral-black-900);
  margin: 0;
}

.s-policy__chunk p {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
  margin: 0;
}

.s-policy__chunk ul,
.s-policy__chunk ol {
  font-family: var(--font-family);
  font-size: var(--text-16-size);
  font-weight: var(--text-16-weight);
  line-height: var(--text-16-line-height);
  color: var(--color-alpha-black-900-90);
  margin: 0;
  padding-left: 24px;
}
.s-policy__chunk ul { list-style: disc; }
.s-policy__chunk ol { list-style: lower-alpha; }
.s-policy__chunk li { margin-bottom: 8px; }
.s-policy__chunk li:last-child { margin-bottom: 0; }
/* Nested ordered list inside a li */
.s-policy__chunk li > ol { margin-top: 8px; }

.s-policy__chunk a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.s-policy__chunk a:hover { opacity: 0.7; }

/* Mobile (≤480) — H1 keeps heading/40, H2 drops to heading/32; chunk
   paddings stay 40 / 20 / 160 per Figma. */
@media (max-width: 480px) {
  .s-policy { padding: 48px 0 0; }
  .s-policy__intro { padding: 40px 0; }
  .s-policy__chunk:last-child { padding-bottom: 80px; }
  .s-policy__updated {
    font-size: var(--text-16-size);
    line-height: var(--text-16-line-height);
  }
  .s-policy__chunk h2 {
    font-size: var(--heading-32-size);
    line-height: var(--heading-32-line-height);
    letter-spacing: var(--heading-32-letter-spacing);
  }
}