/* ==========================================================================
   MRIYA Marketing — styles.css
   Page sections
   1. Header / navigation
   2. Hero
   3. The Problem
   4. Services
   5. Case studies
   6. Missing piece CTA
   7. Team
   8. How we start
   9. FAQ
   10. Contact
   11. Instagram
   12. Footer
   13. Responsive
   ========================================================================== */

/* ==========================================================================
   1. Header / navigation
   ========================================================================== */
.header {
  position: absolute;
  inset-block-start: 1.25rem; /* 20px */
  inset-inline: 0;
  z-index: var(--z-nav);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 5.3125rem; /* 85px */
  /* background-color: rgba(1, 2, 4, 0.8); */
  /* -webkit-backdrop-filter: blur(13.125px); */
  /* backdrop-filter: blur(13.125px); */
}

.header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 16.4375rem; /* 263px */
  max-width: 45%;
}

.header__logo img {
  width: 100%;
  height: auto;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
}

/* --- Desktop nav --- */
.header__nav {
  display: flex;
  align-items: center;
  gap: 2.25rem; /* 36px */
}

.header__link {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  text-align: center;
  transition: color var(--duration) var(--ease);
}

.header__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.375rem;
  height: 1px;
  background-color: var(--color-lime);
  transform: scaleX(0);
  transition: transform var(--duration) var(--ease);
}

.header__link:hover {
  color: var(--color-lime);
}

.header__link:hover::after {
  transform: scaleX(1);
}

/* --- Burger (mobile only) --- */
.header__burger {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.header__burger span,
.header__burger::before,
.header__burger::after {
  content: "";
  position: absolute;
  inset-inline: 0.25rem;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.header__burger::before {
  top: 0.625rem;
}

.header__burger span {
  top: calc(50% - 1px);
}

.header__burger::after {
  bottom: 0.625rem;
}

.header__burger[aria-expanded="true"]::before {
  transform: translateY(0.4375rem) rotate(45deg);
}

.header__burger[aria-expanded="true"] span {
  opacity: 0;
}

.header__burger[aria-expanded="true"]::after {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

/* Hero + The Problem in one clipping context. The hero paints its whole
   subtree before The Problem does, so the bloom that overflows the hero shows
   through The Problem (which is transparent) but stays under its content. */
.hero-band {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg);
}

.hero {
  position: relative;
  isolation: isolate;

  padding-block-end: 2.9375rem; /* 47px */
}

/* --- Decorative background stack --- */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Grid, vignette and stars are bounded by the hero; the bloom is not */
.hero__pattern,
.hero__vignette,
.hero__stars {
  overflow: hidden;
}

.hero__backdrop span {
  position: absolute;
  display: block;
}

/* Faint technical grid (design layer "pattern 1") */
.hero__pattern {
  inset: 0;
  opacity: 0.35;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
}

/* Large violet glow (design layer "Ellipse 1": 948×933, blur 371) */
.hero__glow {
  inset-block-start: 53.5%;
  inset-inline-start: 45.7%;
  width: 65.8%;
  aspect-ratio: 948 / 933;
  background: radial-gradient(
    closest-side,
    rgba(106, 41, 180, 0.85) 0%,
    rgba(106, 41, 180, 0.45) 45%,
    rgba(106, 41, 180, 0) 75%
  );
}

/* Star field (design layer "stars 1") */
.hero__stars {
  inset: 0;
  opacity: 0.6;
  background-image: radial-gradient(
      1px 1px at 12% 18%,
      rgba(255, 255, 255, 0.7) 50%,
      transparent 50%
    ),
    radial-gradient(
      1px 1px at 78% 9%,
      rgba(255, 255, 255, 0.55) 50%,
      transparent 50%
    ),
    radial-gradient(
      1.5px 1.5px at 34% 62%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 50%
    ),
    radial-gradient(
      1px 1px at 62% 41%,
      rgba(255, 255, 255, 0.6) 50%,
      transparent 50%
    ),
    radial-gradient(
      1px 1px at 91% 74%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 50%
    ),
    radial-gradient(
      1.5px 1.5px at 6% 88%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 50%
    ),
    radial-gradient(
      1px 1px at 48% 12%,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 50%
    ),
    radial-gradient(
      1px 1px at 24% 34%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 50%
    );
  background-size: 21.875rem 21.875rem;
}

/* --- Hero upper block --- */
.hero__top {
  position: relative;
  padding-block-start: 18.5rem; /* 296px */
  min-height: 55.1875rem; /* 883px */
}

.hero__title {
  position: relative;
  z-index: 2;
  max-width: 46.25rem; /* 740px */
  font-family: var(--font-primary);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  white-space: pre-wrap; /* preserves the layout spacing authored in the mockup */
  text-wrap: initial;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The frame steps the middle line in. Set in em so the step scales with the
   display size instead of eating the mobile line width. */
.hero__title-indent {
  padding-inline-start: 0.7em;
}

/* Desktop breaks before the em dash; the 393 frame lets the line run on and
   wrap by itself, which is what puts the title on four lines there. */
@media (max-width: 47.9375em) {
  .hero__title-br {
    display: none;
  }
}

.hero__cta {
  position: relative;
  z-index: 2;
  margin-block-start: 3.9375rem; /* 63px */
  margin-inline-start: 5.625rem; /* 90px */
}

/* Dashboard mockup, right side */
.hero__visual {
  position: absolute;
  inset-block-start: 12.975rem; /* 207.6px */
  inset-inline-start: 44.1875rem; /* 753px − 46px gutter */
  z-index: 1;
  width: 40.375rem; /* 646px */
  max-width: 100%;
  padding-block-start: 1.64%; /* 10px  — mockup offset inside the frame */
  padding-inline-start: 2.32%; /* 15px */
  transform: rotate(-1.7deg);
}

.hero__visual img {
  width: 100%;
  height: auto;
}

/* Soft fade on the mockup's left edge (design layer "Rectangle 6371") */
.hero__visual::before {
  content: "";
  position: absolute;
  inset-block: 5.6% 4.2%;
  inset-inline-start: 3.87%;
  width: 19.2%;
  background: linear-gradient(270deg, rgba(6, 3, 11, 0) 0%, #08040f 100%);
  opacity: 0.5;
  pointer-events: none;
}

/* --- Trust bar / stats --- */
.hero__stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.hero__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 12.5rem; /* 200px — space-between spreads value/label inside it */
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease);
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-stat);
  white-space: nowrap;
}

.stat-card__label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
}

.stat-card--light {
  background-color: var(--color-surface-light);
}

.stat-card--light .stat-card__value {
  color: var(--color-text-dark);
}

.stat-card--light .stat-card__label {
  color: var(--color-text-muted);
}

.stat-card--accent {
  background: var(--gradient-card);
}

.stat-card--accent .stat-card__value {
  color: var(--color-surface-light);
}

.stat-card--accent .stat-card__label {
  font-family: var(--font-primary);
  color: var(--color-text-bright);
}

/* ==========================================================================
   3. The Problem
   ========================================================================== */
.problem {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: transparent; /* the band underneath carries the colour */
  padding-block: var(--space-6xl); /* 120px */
}

.problem__head {
  margin-block-end: var(--space-4xl); /* 52px */
}

/* --- Row 1: three symptom cards (438 / 438 / 452 of 1344) --- */
.problem__grid {
  display: grid;
  grid-template-columns: 438fr 438fr 452fr;
  gap: 0.5rem; /* 8px */
}

.problem-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 12px */
  min-height: 23.1875rem; /* 371px */
  padding: 1.875rem; /* 30px */
  border: 1px solid rgba(102, 102, 104, 0.3);
  border-radius: var(--radius-lg);
  background-color: rgba(233, 235, 245, 0.17);
}

.problem-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--color-text-bright);
}

.problem-card__text {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* Screenshot is pinned to the bottom of the card: the negative end margin
   cancels the card padding so it sits flush, as in the mockup (top ≈ 138px
   at the 1440 layout). Keeping it in flow means it can never cover the copy
   on narrower cards. */
.problem-card__media {
  width: 98.41%; /* 372 of the 378px content box */
  margin-block-start: auto;
  margin-block-end: -1.875rem; /* −30px: the card's bottom padding */
  margin-inline-start: 0.79%; /* 33 − 30 = 3px */
}

.problem-card__media img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(136, 20, 147, 0.2);
  border-radius: 1rem;
  background-color: rgba(200, 205, 226, 0.14);
}

.problem-card--centered .problem-card__title {
  text-align: center;
}

.problem-card--light {
  padding-inline: var(--space-xl); /* 24px */
  background-color: var(--color-text-bright);
}

.problem-card--light .problem-card__title {
  text-align: center;
  color: var(--color-text-dark);
}

.problem-card--light .problem-card__text {
  color: var(--color-text-muted);
}

.problem-card--light .problem-card__media {
  width: 92.08%; /* 372 of the 404px content box */
  margin-inline-start: 3.96%; /* 40 − 24 = 16px */
}

.problem-card--light .problem-card__media img {
  border: 0;
}

/* --- Row 2: two stats + one note (295 / 295 / 738 of 1344) --- */
.problem__facts {
  display: grid;
  grid-template-columns: 295fr 295fr 738fr;
  gap: 0.5rem; /* 8px */
  margin-block-start: var(--space-2xl); /* 32px */
}

.fact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px */
  min-height: 8.6875rem; /* 139px */
  padding: 1.875rem; /* 30px */
  border-radius: var(--radius-lg);
  background-color: rgba(243, 246, 248, 0.17);
  text-align: center;
}

.fact-card__value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-base);
  color: var(--color-text-bright);
}

.fact-card__label {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.fact-card--start .fact-card__label {
  text-align: start;
}

.fact-card--wide {
  align-items: flex-start;
  text-align: start;
}

.fact-card__note {
  max-width: 32rem; /* 512px */
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text-bright);
}

/* --- Closing CTA --- */
.problem__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-4xl); /* 52px */
}

/* --- Decorative puzzle piece, bottom right --- */
.problem__decor {
  position: absolute;
  inset-inline-start: 75.64%; /* 1089 / 1440 */
  inset-block-end: 5.4375rem; /* 87px */
  width: 20.22%; /* 291 / 1440 */
  height: auto;
  opacity: 0.5;
  transform: rotate(0.9deg);
  pointer-events: none;
}

/* ==========================================================================
   4. Services
   ========================================================================== */
.services {
  overflow: hidden;
  background: var(--gradient-section);
  padding-block: var(--space-6xl); /* 120px */
}

.services__head {
  margin-block-end: var(--space-4xl); /* 52px */
}

/* Three staggered columns with the orbit graphic in the middle cell.
   Grid areas keep the DOM in reading order while matching the mockup. */
.services__grid {
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "seo     ads       maps"
    "social  ring      crm"
    "email   website   analytics";
  align-items: start;
  column-gap: 4.125rem; /* 66px */
}

/* Per-cell offsets, straight from the mockup coordinates */
.services__cell--ads {
  grid-area: ads;
}

.services__cell--maps {
  grid-area: maps;
  margin-block-start: 2.5rem; /* 40px */
}

.services__cell--seo {
  grid-area: seo;
  margin-block-start: 3.8125rem; /* 61px */
}

.services__cell--ring {
  grid-area: ring;
  z-index: 0;
}

.services__cell--social {
  grid-area: social;
  margin-block-start: 3.6875rem; /* 59px */
}

.services__cell--crm {
  grid-area: crm;
  margin-block-start: 3.6875rem; /* 59px */
}

.services__cell--email {
  grid-area: email;
  margin-block-start: 0.4375rem; /* 7px */
}

.services__cell--website {
  grid-area: website;
  margin-block-start: 3.375rem; /* 54px */
}

.services__cell--analytics {
  grid-area: analytics;
  margin-block-start: 0.9375rem; /* 15px */
}

/* --- Service card --- */
.service-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md); /* 16px */
  min-height: 11.8125rem; /* 189px */
  padding: 1.875rem; /* 30px */
  border-radius: var(--radius-lg);
  background-color: rgba(47, 25, 157, 0.1);
  transition: transform var(--duration) var(--ease);
}

.service-card:hover {
  transform: translateY(-4px);
}

.service-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm); /* 12px */
}

.service-card__icon {
  flex: 0 0 auto;
  width: 4.25rem; /* 68px */
  height: 4.25rem;
  border: 1px solid rgba(226, 226, 226, 0.2);
  border-radius: var(--radius-sm);
}

.service-card__icon--sm-radius {
  border-radius: 0.3125rem; /* 5px */
}

.service-card__title {
  font-family: var(--font-display);
  /* 30px at 1440; eases down below that so the two-line titles stay two lines
     and the ring keeps its gap to the row above */
  font-size: clamp(1.625rem, 2.08vw, 1.875rem);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text-bright);
}

.service-card__text {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

/* --- Orbit graphic (313px ring, 8 nodes, centred payoff line) --- */
.services__ring {
  --ring-size: 19.5625rem; /* 313px */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: var(--ring-size);
  max-width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  padding-block-start: 23%; /* 72px */
}

.services__ring-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 2px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 2px)
  );
}

.services__ring-layer--glow {
  background: var(--gradient-card);
  filter: blur(26px);
}

.services__ring-layer--halo {
  background-color: #ffffff;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1px),
    #000 calc(100% - 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 1px),
    #000 calc(100% - 1px)
  );
  filter: blur(26px);
}

.services__ring-layer--line {
  background: linear-gradient(
    89.74deg,
    #efefef 0%,
    #8130ce 35.6%,
    #811aa8 100%
  );
}

.services__dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 0.75rem; /* 12px */
  height: 0.75rem;
  margin: -0.375rem;
  border-radius: 50%;
  background: var(--gradient-card);
  box-shadow: 0 0 0.25rem 0.0625rem rgba(226, 226, 226, 0.9);
  transform: rotate(var(--a)) translateY(calc(var(--ring-size) / -2));
}

.services__ring-icon {
  width: 4.8125rem; /* 77px */
  height: auto;
  border-radius: var(--radius-sm);
}

.services__ring-text {
  max-width: 16.9375rem; /* 271px */
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  text-align: center;
  color: var(--color-text-bright);
}

/* Arrows bridging the ring and each of the eight surrounding cards.
   Measured against the 1440 grid: column 405.3, ring 313, so the straight gap
   is 112.2px and the diagonal one starts 45.8px inside the ring's bounding box
   (156.5 × (1 − cos45°)). --gap keeps that exact at every width the ring is
   shown at, since the columns are fluid but the ring is not. */
.services__ring {
  --col: calc((min(90rem, 100vw) - 14rem) / 3);
  --gap: calc((var(--col) - var(--ring-size)) / 2 + 4.125rem);
  --inset: 0.375rem; /* 6px of breathing room at both ends */
  --diagonal: calc(var(--gap) + 2.8625rem - var(--inset) * 2);
}

.services__arrow {
  position: absolute;
  pointer-events: none;
}

/* --- Straight --- */
.services__arrow--n,
.services__arrow--s {
  inset-inline-start: 50%;
  width: 0.875rem; /* 14px */
  translate: -50% 0;
}

.services__arrow--n {
  inset-block-end: calc(100% + var(--inset));
  height: 3.0625rem; /* 61px gap − insets */
}

.services__arrow--s {
  inset-block-start: calc(100% + var(--inset));
  height: 2.625rem; /* ring bottom 580.4 → card top 634.4 */
}

.services__arrow--e,
.services__arrow--w {
  /* 52%, not 50%: the drawn line sits above centre inside both PNGs */
  inset-block-start: 52%;
  width: calc(var(--gap) - var(--inset) * 2);
  height: auto;
  translate: 0 -50%;
}

.services__arrow--e {
  inset-inline-start: calc(100% + var(--inset));
}

.services__arrow--w {
  inset-inline-end: calc(100% + var(--inset));
}

/* --- Diagonal ---
   Aspect ratio is preserved (no squashing): the arrow keeps its own shape and
   is instead rotated so its tail→head axis lines up with the direction of its
   corner card, then scaled so its length matches that distance. --span is the
   horizontal reach; the width factor scales the arrow along its own axis.
   Rotations and factors below are hand-tuned. */
.services__arrow--ne,
.services__arrow--se,
.services__arrow--sw,
.services__arrow--nw {
  --span: calc(var(--gap) + 2.8625rem - var(--inset) * 2);

  height: auto;
}

.services__arrow--ne {
  inset-inline-start: calc(85.4% + var(--inset));
  inset-block-end: calc(83.4% + var(--inset));
  width: calc(var(--span) * 0.931);
  transform-origin: 0 100%;
  rotate: 4.3deg;
}

.services__arrow--se {
  inset-inline-start: calc(85.4% + var(--inset));
  inset-block-start: calc(84.4% + var(--inset));
  width: calc(var(--span) * 0.723);
  transform-origin: 0 0;
  rotate: -17.4deg;
}

.services__arrow--sw {
  inset-inline-end: calc(85.4% + var(--inset));
  inset-block-start: calc(85.4% + var(--inset));
  width: calc(var(--span) * 0.792);
  transform-origin: 100% 0;
  rotate: 13.6deg;
}

.services__arrow--nw {
  inset-inline-end: calc(85.4% + var(--inset));
  inset-block-end: calc(83.4% + var(--inset));
  width: calc(var(--span) * 0.894);
  transform-origin: 100% 100%;
  rotate: -7.5deg;
}

/* In the ring layout every card shares a height, so the gaps the arrows have
   to bridge stay constant across the whole 1261–1440 band */
@media (min-width: 78.8125em) {
  .services__grid .service-card {
    min-height: 14.375rem; /* 230px — tallest natural card in the band */
  }
}

/* --- "View all": mobile-only in the mockup --- */
.services__cta {
  display: none;
}

/* ==========================================================================
   5. Case studies
   ========================================================================== */
.cases {
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: var(--space-6xl); /* 120px */
}

.cases__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* 42px */
  max-width: 54.125rem; /* 866px */
  margin-inline: auto;
  margin-block-end: var(--space-4xl); /* 52px */
}

.cases__title {
  font-family: var(--font-display);
  font-size: 3.4375rem; /* 55px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  text-align: center;
  color: var(--color-text-bright);
}

/* --- Tabs --- */
.cases__tabs {
  display: flex;
  border-block-end: 1px solid rgba(168, 167, 184, 0.5);
}

.cases__tab {
  flex: 1 1 0;
  min-height: 2.6875rem; /* 43px */
  padding: 0.5rem 1rem 0.75rem;
  border-block-end: 2px solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  text-align: center;
  color: var(--color-text-slate);
  transition: color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.cases__tab:hover {
  color: var(--color-text-bright);
}

.cases__tab.is-active {
  border-block-end-color: var(--color-surface-light);
  color: var(--color-text-bright);
}

/* --- Card --- */
.cases__body {
  position: relative;
}

.case {
  display: grid;
  /* Track percentages resolve against the content box, so they are taken from
     1272 (1344 − 2×36 padding), not the full card. The data column is 1fr so it
     always runs to the inner edge instead of leaving the remainder empty. */
  grid-template-columns: 29.09% 1fr; /* 370px, then the rest of 1272 */
  column-gap: 12.74%; /* 162px */
  min-height: 43rem; /* 688px */
  padding: 2.25rem; /* 36px */
  border-radius: 1.875rem; /* 30px */
  overflow: hidden;

	 background-color: #F3F6F8;

  /* bg.png is the card's wash exported from the mockup (1344×656). Stretched
     to the card: a soft blurred gradient, so it holds at any size. */
  background-image: url("../images/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.case[hidden] {
  display: none;
}

.case__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.case__head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px */
}

.case__name {
  font-family: var(--font-display);
  font-size: 2.875rem; /* 46px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.5px;
  color: var(--color-text-dark);
}

.case__place {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text-slate);
}

.case__block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 16px */
}

/* Pushed down so "Solution" lands on the card floor, as in the mockup */
.case__block--problem {
  margin-block-start: auto;
  margin-block-end: 2.5rem; /* 40px */
}

.case__label {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text-dark);
}

.case__text {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text-dark);
}

.case__col--data {
  gap: 2.8125rem; /* 45px */
}

/* The radius lives on the image rather than on a clipping figure: the rail
   controls sit inside this figure and on desktop they reach past its edges. */
.case__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 740 / 459;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.case__metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.metric--case {
  padding: 1.25rem 0.125rem; /* 20px / 2px */
  /* The mockup leaves the fill switched off, so the lone backdrop blur only
     shows up as a seam where the card bloom changes tone */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Prev / next --- */
.case__nav {
  position: absolute;
  inset-block-start: 47.67%; /* 328px of 688 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* 36px */
  height: 2rem; /* 32px */
  border-radius: 0.25rem;
  background-color: var(--color-bg);
  transition: background-color var(--duration) var(--ease);
}

.case__nav:hover {
  background-color: var(--color-bg-ink);
}

.case__nav svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-surface-light);
}

/* Mirrored insets: the pair sits the same distance from either inner edge */
.case__nav--prev {
  inset-inline-start: 1.49%;
}

.case__nav--next {
  inset-inline-end: 1.49%; /* 1344 − 1288 − 36 */
}

/* This section's CTA is a bare underlined link, not one of the pills */
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.375rem;
  transition: color var(--duration) var(--ease), gap var(--duration) var(--ease);
}

.case-link:hover {
  gap: 0.9375rem;
  color: var(--color-text-bright);
}

.case-link svg {
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One link per case lives under the slider, and the tab script shows only the
   open one. .case-link is inline-flex, which would beat the browser's own
   [hidden] rule, so the hidden state is spelled out — same as .case[hidden]. */
.case-link[hidden] {
  display: none;
}

.cases__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-xl); /* 24px */
}

/* ==========================================================================
   6. Missing piece CTA
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* The artwork sets the block height at the 1440 layout (1440x1624) */
.cta__bg {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: -3;
  width: 100%;
  height: auto;
}

/* Violet bloom behind the button (mockup: 809x279, blur 131) */
.cta__glow {
  position: absolute;
  inset-block-start: 55.05%;
  inset-inline-start: 20.14%;
  z-index: -2;
  width: 56.18%;
  aspect-ratio: 809 / 279;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(67, 5, 82, 0.9) 0%,
    rgba(67, 5, 82, 0) 78%
  );
}

/* Two stacked fades that sink the artwork into the page background */
.cta__fade {
  position: absolute;
  inset-inline: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(9, 1, 15, 0) 0%, #09010f 100%);
  pointer-events: none;
}

.cta__fade--upper {
  inset-block-start: 65.95%;
  height: 34.98%;
}

.cta__fade--lower {
  inset-block-start: 76.05%;
  height: 24.88%;
}

.cta__puzzle {
  position: absolute;
  height: auto;
  opacity: 0.5;
  pointer-events: none;
}

.cta__puzzle--1 {
  inset-block-start: 87.5%;
  inset-inline-start: 13.75%;
  width: 17.85%;
}

.cta__puzzle--2 {
  inset-block-start: 90.46%;
  inset-inline-start: 58.47%;
  width: 16.32%;
  transform: rotate(27.1deg);
}

.cta__inner {
  position: relative;
  padding-block: var(--space-6xl) 0; /* 120px */
}

.cta__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl); /* 52px */
  max-width: 34.75rem; /* 556px */
}

.cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  color: var(--color-text-bright);
}

.cta__text {
  max-width: 26.875rem; /* 430px */
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* The artwork carries the middle of the block, hence the deliberate void */
.cta__button {
  display: flex;
  width: fit-content;
  margin-block-start: 31.0625rem; /* 497px */
  margin-inline: auto;
}

.cta__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl); /* 24px */
  max-width: 37.625rem; /* 602px */
  margin-block-start: 3rem; /* 48px */
  margin-inline: auto;
  padding-block-end: 28.1875rem; /* 451px - artwork tail below the metrics */
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem; /* 4px */
  padding: 0.125rem;
  border-radius: var(--radius-md);
  /* -webkit-backdrop-filter: blur(12.775px); */
  /* backdrop-filter: blur(12.775px); */
  text-align: center;
}

.metric__value {
  font-family: var(--font-display);
  font-size: 2.875rem; /* 46px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.5px;
  color: var(--color-lime);
}

.metric__label {
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
	text-transform: uppercase;
}

/* ==========================================================================
   7. Team
   ========================================================================== */
.team {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg);
}

/* Scattered collage, proportional to the 1440x935 mockup block */
.team__inner {
  position: relative;
  aspect-ratio: 1440 / 935;
}

.team__text,
.member,
.team__puzzle {
  position: absolute;
}

/* Full-bleed layer so both halves of the heading can be placed against the
   collage itself while staying inside one <h2> */
.team__title {
  position: absolute;
  inset: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  color: var(--color-text-bright);
  pointer-events: none;
}

.team__title-part {
  position: absolute;
  width: max-content;
}

.team__title-part--a {
  inset-block-start: 5.35%; /* 50px */
  inset-inline-start: 50.69%; /* 730px */
}

.team__title-part--b {
  inset-block-start: 71.66%; /* 670px */
  inset-inline-start: 3.4%; /* 49px */
  font-weight: 200;
}

.team__text {
  inset-block-start: 15.3%;
  inset-inline-start: 50.69%;
  width: 39.51%; /* 569px */
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  text-align: center;
  color: var(--color-text);
}

.team__list {
  display: contents;
}

.member {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: rgba(182, 196, 241, 0.2);
}

.member__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.member__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem; /* 4px */
  min-height: 4.8125rem; /* 77px */
  padding: var(--space-md);
  border-start-start-radius: 1rem;
  border-start-end-radius: 1rem;
  background-color: #f1f3f5;
}

.member__name {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--color-text-dark);
}

.member__role {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-slate);
}

.member--vlad {
  inset-block-start: 12.3%; /* 115px */
  inset-inline-start: 3.33%; /* 48px */
  width: 18.4%; /* 265px */
  aspect-ratio: 265 / 357;
}

.member--karyna {
  inset-block-start: 5.67%; /* 53px */
  inset-inline-start: 22.29%; /* 321px */
  width: 24.86%; /* 358px */
  aspect-ratio: 358 / 482;
}

.member--max {
  inset-block-start: 31.12%; /* 291px */
  inset-inline-start: 50.69%; /* 730px */
  width: 25.63%; /* 369px */
  aspect-ratio: 369 / 491;
}

.member--jane {
  inset-block-start: 31.12%; /* 291px */
  inset-inline-start: 77.08%; /* 1110px */
  width: 19.51%; /* 281px */
  aspect-ratio: 281 / 357;
}

.team__puzzle {
  inset-block-start: 70.37%; /* 658px */
  inset-inline-start: 84.55%; /* 1217px */
  width: 12.73%; /* 183px */
  height: auto;
  opacity: 0.5;
  transform: rotate(-53.1deg);
  pointer-events: none;
}

/* ==========================================================================
   8. How we start
   ========================================================================== */
.process {
  overflow: hidden;
  background-color: var(--color-bg);
  padding-block: var(--space-6xl); /* 120px */
}

.process__head {
  margin-block-end: var(--space-3xl); /* 42px */
}

.process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.3125rem; /* 21px */
}

/* Rail controls exist for the 393 frame only — every other width either shows
   the five steps at once or scrolls the rail by touch. */
.process__nav {
  display: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 32.0625rem; /* 513px */
}

/* Hairlines on both column edges, 270px tall from y=43 */
.step::before,
.step::after {
  content: "";
  position: absolute;
  inset-block-start: 2.6875rem; /* 43px */
  width: 1px;
  height: 16.875rem; /* 270px */
  background-color: #f6f9ee;
  opacity: 0.2;
}

.step::before {
  inset-inline-start: 0;
}

.step::after {
  inset-inline-end: 0;
}

.step__num {
  font-size: 0.875rem; /* 14px */
  line-height: var(--lh-tight);
  text-align: center;
  color: #f6f9ee;
  opacity: 0.3;
}

.step__group {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* Gradient bar, dropping 40px per column */
.step__pill {
  --stagger: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.875rem; /* 14px */
  padding: 0.5rem;
  margin-block-start: calc(2.875rem + var(--stagger) * 2.5rem);
  border-radius: 0.5625rem; /* 9px */
  background: var(--gradient-card);
}

.step:nth-child(2) .step__pill {
  --stagger: 1;
}

.step:nth-child(3) .step__pill {
  --stagger: 2;
}

.step:nth-child(4) .step__pill {
  --stagger: 3;
}

.step:nth-child(5) .step__pill {
  --stagger: 4;
}

.step__pill-label {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--color-lime);
}

.step__pill-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem; /* 32px */
  height: 2rem;
  border-radius: 0.25rem;
  background-color: var(--color-surface-light);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* feOffset dy 2 + stdDeviation 3 */
}

.step__icon {
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  fill: #4e526a;
}

.step__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm); /* 12px */
  min-height: 11.375rem; /* 182px */
  margin-block-start: auto;
  padding: 1rem 0.75rem; /* 16px / 12px */
  border-radius: 0.75rem; /* 11.9px */
  background-color: var(--color-surface-light);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-text-dark);
}

.step__text {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.2;
  color: rgba(6, 17, 31, 0.81);
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq {
  overflow: hidden;
  background: var(--gradient-section);
  padding-block: var(--space-6xl); /* 120px */
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4xl); /* 52px */
  max-width: 60rem; /* 960px */
  margin-inline: auto;
}

.faq__title {
  max-width: 38rem; /* 608px */
  font-family: var(--font-display);
  font-size: 3.4375rem; /* 55px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  text-align: center;
  color: var(--color-text);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px */
  width: 100%;
}

.faq__item {
  border: 1px solid rgba(220, 220, 219, 0.5);
  border-radius: 0.25rem; /* 4px */
  background-color: rgba(255, 255, 255, 0.04);
}

.faq__question {
  font-weight: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg); /* 20px */
  width: 100%;
  min-height: 4.625rem; /* 74px */
  padding: var(--space-lg);
  text-align: start;
}

.faq__label {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-lg);
  color: var(--color-text);
}

.faq__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem; /* 36px */
  height: 2rem; /* 32px */
  border-radius: 0.25rem;
  background-color: var(--color-surface-light);
  transition: transform var(--duration) var(--ease);
}

.faq__icon svg {
  width: 1rem;
  height: 1rem;
}

.faq__trigger[aria-expanded="true"] .faq__icon {
  transform: rotate(90deg);
}

/* Collapsed with grid rows so the reveal can animate without measuring */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration) var(--ease),
    visibility var(--duration) var(--ease);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
}

.faq__answer-inner {
  overflow: hidden;
}

.faq__text {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: rgba(226, 226, 226, 0.75);
}

/* ==========================================================================
   10. Closing block — contact + instagram + footer
   ========================================================================== */

/* One blurred wash spans all three, exactly as the mockup draws it: a single
   1440×2190 layer going light → violet → black. Stretched to the wrapper
   rather than tiled or cropped — it is a soft gradient with no detail to
   distort, so it stays seamless at every width and content height. */
.closing {
  position: relative;
  isolation: isolate;
  background-color: #0a0611;
  background-image: url("../images/contact.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.contact {
  overflow: hidden;
  padding-block: 6.9375rem 0; /* heading sits at y=111 */
}

.contact__grid {
  display: grid;
  grid-template-columns: 46.58% 49.4%; /* 626px / 664px of the 1344 content box */
  justify-content: space-between;
  align-items: start;
}

.contact__title {
  max-width: 39.125rem; /* 626px */
  font-family: var(--font-display);
  font-size: 3.4375rem; /* 55px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  color: #06111f;
}

.contact__socials {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; /* 9px */
  width: fit-content;
  margin-block-start: 17.5rem; /* 559px − 111px − title */
}

.social {
  display: grid;
  place-items: center;
  width: 3.0625rem; /* 49px */
  height: 3.0625rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  transition: background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.social:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

.social svg {
  width: 1.125rem; /* 18px — matches the glyph-to-circle ratio in the export */
  height: 1.125rem;
  fill: var(--color-bg-ink);
}

.contact__address {
  max-width: 17.1875rem; /* 275px */
  margin-block-start: var(--space-md); /* 740px − social stack */
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-style: normal;
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-base);
  color: var(--color-text-dark);
  opacity: 0.8;
}

/* --- Form --- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 24px */
  border-radius: 0.5rem;
  background-color: rgba(12, 4, 15, 0.15);
  -webkit-backdrop-filter: blur(5.25px);
  backdrop-filter: blur(5.25px);
  padding-block-start: var(--space-2xl); /* 32px */
  margin-block-start: 6.6875rem; /* 218px − 111px */
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; /* 91.6 − 75.6 */
  padding-inline: var(--space-2xl);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  font-size: 0.875rem; /* 14px */
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: rgba(12, 13, 14, 0.8);
}

/* Light wells on the grey card. The mockup stores #020617 as the input fill,
   but its placeholder (#0c0d0e8f) and label (#0c0d0ecc) are both dark — so the
   fill is the mistaken value, not the text. */
.field__input {
  width: 100%;
  min-height: 3rem; /* 48px */
  padding: 0.75rem 1.0625rem; /* 12px / 17px */
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: var(--color-text-bright);
  color: #0c0d0e;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-lg);
  transition: border-color var(--duration) var(--ease);
}

.field__input::placeholder {
  color: rgba(12, 13, 14, 0.56); /* #0c0d0e8f */
}

.field__input:focus {
  border-color: #801aa8;
  outline: none;
}

.field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #0c0d0e 50%),
    linear-gradient(135deg, #0c0d0e 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 1rem) 55%;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}

.field__textarea {
  min-height: 7.5rem; /* 120px */
  resize: vertical;
}

.form__footer {
  display: flex;
  flex-direction: column;
  gap: 1.125rem; /* 18px */
  padding: 0 var(--space-2xl) var(--space-2xl);
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem; /* 10px */
  font-size: 0.75rem; /* 12px */
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: rgba(12, 13, 14, 0.8);
}

.form__check {
  flex: 0 0 auto;
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  margin-block-start: 0.0625rem;
  accent-color: var(--color-bg-ink);
}

.form__consent a {
  text-decoration: underline;
}

.form__submit {
  width: 100%;
  min-height: 3.25rem; /* 52px */
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  background-color: #0c040f;
  color: var(--color-text-bright);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-lg);
  transition: background-color var(--duration) var(--ease);
}

.form__submit:hover {
  background-color: #1b0a24;
}

/* ==========================================================================
   11. Instagram
   ========================================================================== */
.instagram {
  overflow: hidden;
  padding-block: 6.25rem; /* 100px */
}

/* The mockup sets this word in near-black against the violet wash */
.instagram__title-em {
  color: #131313;
}

.instagram__title {
  margin-block-end: var(--space-4xl); /* 52px */
  font-family: var(--font-display);
  font-size: var(--fs-h2); /* 62px */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2);
  text-align: center;
  color: #131313;
}

/* Six 254px tiles overflow 1348px in the mockup, so the row scrolls. Touch and
   trackpad use the native scroll; the scrollbar is hidden, so pointer devices
   drag the track instead (data-slider in main.js). */
.instagram__list {
  display: flex;
  gap: var(--space-lg); /* 20px */
  margin-inline: calc(var(--container-gutter) * -1);
  padding-inline: var(--container-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
	  overflow-y: hidden;
  cursor: grab;
}

.instagram__list.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.instagram__list::-webkit-scrollbar {
  display: none;
}

.instagram__item {
  flex: 0 0 15.875rem; /* 254px */
  scroll-snap-align: center;
}

.instagram__link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: transform var(--duration) var(--ease);
}

.instagram__link:hover {
  transform: translateY(-4px);
}

.instagram__link img {
  width: 100%;
  height: auto;
  aspect-ratio: 254 / 317;
  object-fit: cover;
}

.instagram__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-lg);
}

.instagram__button {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.instagram__button:hover {
  background-color: var(--color-bg-ink);
}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.site-footer {
  overflow: hidden;
  padding-block-end: 1.3125rem; /* 21px */
}

.footer {
  position: relative;
  display: grid;
  /* contacts | gap | navigation | gap | services — percentages of the 1279px
     content box so each column lands on its mockup x position */
  grid-template-columns: 35.45% 15.06% 19.23% 7.58% 19.23%;
  min-height: 35.9375rem; /* 575px */
  padding: 4.9375rem 2.375rem 0; /* 79px / 38px */
  background-color: #020403;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__link-muted {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.1px;
  color: rgba(255, 255, 255, 0.67);
  transition: color var(--duration) var(--ease);
}

.footer__link-muted:hover {
  color: #ffffff;
}

.footer__mail {
  font-family: var(--font-display);
  font-size: var(--fs-lead); /* 30px */
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: -0.3px;
  color: #ffffff;
  overflow-wrap: anywhere;
	text-transform: uppercase;
	
}

.footer__contacts {
  grid-column: 1;
}

.footer__col {
  min-width: 0;
}

.footer__col:nth-of-type(1) {
  grid-column: 3;
}

.footer__col:nth-of-type(2) {
  grid-column: 5;
}

.footer__heading {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 200;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-lg);
  color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  margin-block-start: var(--space-md);
}

.footer__list a {
  font-size: var(--fs-base);
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--duration) var(--ease);
}

.footer__list a:hover {
  color: #ffffff;
}

/* Decorative wordmark across the foot of the footer. It runs from the mockup's
   x=95 to the content edge, and the artwork's own ratio sets the height. */
.footer__wordmark {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem; /* 95px − 38px padding */
  inset-inline-end: 1rem;

  pointer-events: none;
}

.footer__wordmark img {
  width: 100%;
  height: auto;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-start: 0.6875rem; /* 2153 − 2142 */
  font-size: 0.75rem; /* 12px */
  line-height: var(--lh-normal);
  color: #ffffff;
}

.footer__legal a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   13. Responsive
   3.1  ≤1260px — fluid down-scale of the 1440 layout
   3.2  ≤1023px — navigation collapses behind the burger
   3.3  ≤767px  — values from the 393px design frame
   ========================================================================== */

/* --- 3.1 Tablet / small desktop ------------------------------------------ */
@media (max-width: 78.75em) {
  :root {
    --fs-display: clamp(3.25rem, 5.7vw, 5.125rem);
    --fs-h2: clamp(2.25rem, 4.3vw, 3.875rem);
    --container-gutter: 2rem;
  }

  .hero__top {
    padding-block-start: clamp(11rem, 20vw, 18.5rem);
    min-height: 0;
  }

  .hero__title {
    max-width: 55%;
  }

  .hero__visual {
    inset-block-start: clamp(8rem, 14vw, 12.975rem);
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 45%;
  }

  .hero__cta {
    margin-block-start: clamp(2rem, 4vw, 3.9375rem);
    margin-block-end: clamp(3rem, 8vw, 6rem);
    margin-inline-start: 0;
  }

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

  .hero__lede {
    grid-column: 1 / -1;
  }

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

  .fact-card--wide {
    grid-column: 1 / -1;
  }

  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "ads      seo"
      "social   website"
      "email    analytics"
      "crm      maps";
    column-gap: var(--space-2xl);
    row-gap: var(--space-2xl);
  }

  .services__cell--ring {
    display: none;
  }

  .services__grid > * {
    margin-block-start: 0;
  }

  /* --- Case studies: card becomes a single column --- */
  .cases__title {
    font-size: clamp(2rem, 4vw, 3.4375rem);
  }

  .case {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2xl);
    min-height: 0;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    background-image: radial-gradient(
        135% 80% at 28% 30%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.85) 38%,
        rgba(255, 255, 255, 0.25) 66%,
        rgba(255, 255, 255, 0) 84%
      ),
      radial-gradient(
        120% 55% at 55% 100%,
        rgba(62, 14, 134, 0.92) 0%,
        rgba(62, 14, 134, 0) 74%
      ),
      linear-gradient(180deg, rgba(12, 11, 13, 0) 60%, rgba(12, 11, 13, 0.9) 100%);
  }

  .case__col--info {
    gap: var(--space-lg);
  }

  .case__block--problem {
    margin-block: 0;
  }

  .case__col--data {
    gap: var(--space-lg);
  }

  .case__name {
    font-size: 2.125rem; /* 34px */
    letter-spacing: var(--ls-base);
  }

  .case__label {
    font-size: var(--fs-h4); /* 24px */
  }

  .case__nav {
    inset-block-start: auto;
    inset-block-end: calc(var(--space-2xl) * -1 - 1.25rem);
  }

  .case__nav--prev {
    inset-inline-start: calc(50% - 3.75rem);
  }

  .case__nav--next {
    inset-inline-end: calc(50% - 3.75rem);
  }

  .cases__cta {
    margin-block-start: 3.5rem;
  }

  /* --- CTA: artwork covers whatever height the copy needs --- */
  .cta__bg {
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* Dark scrim keeps the copy legible over the artwork once it is cropped —
     the mobile frame does the same with a radial fill behind the title */
  .cta__intro {
    max-width: 55%;
    gap: var(--space-2xl);
    padding: var(--space-lg);
    margin-inline: calc(var(--space-lg) * -1);
    border-radius: var(--radius-lg);
    background: radial-gradient(
      120% 100% at 30% 40%,
      rgba(0, 5, 17, 0.92) 0%,
      rgba(0, 5, 17, 0) 100%
    );
  }

  .cta__text {
    font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  }

  .cta__button {
    margin-block-start: clamp(12rem, 28vw, 31.0625rem);
  }

  .cta__stats {
    padding-block-end: clamp(8rem, 22vw, 28.1875rem);
  }

  /* --- Team: collage becomes a flow layout --- */
  .team {
    padding-block: var(--space-6xl);
  }

  .team__inner {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .team__title {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.5ch;
    text-align: center;
    pointer-events: auto;
  }

  .team__title-part {
    position: static;
    inset: auto;
  }

  .team__title-part--b {
    font-weight: 600;
  }

  .team__text {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 35.5625rem; /* 569px */
  }

  .team__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
    width: 100%;
    margin-block-start: var(--space-sm);
  }

  .member__caption {
    min-height: 4.375rem;
    padding: var(--space-sm);
  }

  .member__name {
    font-size: var(--fs-h4); /* 24px */
  }

  .member__role {
    font-size: 0.875rem; /* 14px */
  }

  .member {
    position: relative;
    inset: auto;
    width: auto;
    aspect-ratio: 265 / 357;
  }

  .team__puzzle {
    display: none;
  }

  .faq__title {
    font-size: clamp(2rem, 4vw, 3.4375rem);
  }

  /* --- Contact: single column --- */
  .contact {
    padding-block: 5rem 0;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2xl);
  }

  .contact__title {
    max-width: 100%;
    font-size: clamp(2rem, 4vw, 3.4375rem);
  }

  .contact__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  /* Mobile order is heading → form → socials → address. `display: contents`
     lifts the aside's children into the grid so `order` can interleave them
     with the form without touching the markup. */
  .contact__grid {
    row-gap: var(--space-2xl);
  }

  .contact__aside {
    display: contents;
  }

  .contact__title {
    order: 1;
    text-align: center;
  }

  .form {
    order: 2;
  }

  .contact__socials {
    order: 3;
    flex-direction: row;
    gap: 0.5625rem; /* 9px */
    margin-block-start: 0;
  }

  .contact__address {
    order: 4;
    max-width: 15.1875rem; /* 243px */
    margin-block-start: -1rem; /* 16px below the icons, not the row gap's 32 */
    opacity: 1;
  }

  .social {
    width: 2.875rem; /* 46px */
    height: 2.875rem;
  }

  .contact__socials {
    flex-direction: row;
    margin-block-start: 0;
  }

  .contact__address {
    margin-block-start: 0;
  }

  .form {
    margin-block-start: 0;
  }

  /* --- Instagram --- */
  .instagram__title {
    font-size: clamp(2rem, 4.3vw, 3.875rem);
    margin-block-end: var(--space-2xl);
  }

  /* --- Footer --- */
  .footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
    row-gap: var(--space-2xl);
    min-height: 0;
    padding: var(--space-2xl) var(--space-2xl) 12rem;
  }

  .footer__contacts {
    grid-column: 1 / -1;
  }

  .footer__col:nth-of-type(1) {
    grid-column: 1;
  }

  .footer__col:nth-of-type(2) {
    grid-column: 2;
  }

  .footer__wordmark {
    inset-inline-start: var(--space-2xl);
    inset-block-end: 1.5rem;
  }

  /* --- How we start: the 5-column rail collapses into a snap scroller --- */
  .process__steps {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-lg); /* 20px */
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
		        overflow-y: hidden;
  }

  .process__steps::-webkit-scrollbar {
    display: none;
  }

  .step {
    flex: 0 0 18.75rem; /* 300px */
    gap: 0.5rem;
    min-height: 0;
    scroll-snap-align: center;
  }

  .step::before,
  .step::after {
    display: none;
  }

  /* Bar and copy become one light card, with the bar clipped to its radius */
  .step__group {
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-light);
    padding-block-end: var(--space-md);
  }

  .step__pill {
    margin-block-start: 0;
    padding: 0.5rem 1rem;
  }

  .step__card {
    min-height: 0;
    margin-block-start: 0;
    padding: var(--space-sm) var(--space-md) 0;
    border-radius: 0;
    background: none;
  }

  .step__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .step__text {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-base);
  }
}

/* --- 3.2 Collapsed navigation -------------------------------------------- */
@media (max-width: 63.9375em) {
  .header {
    position: fixed;
    inset-block-start: 0;
    background-color: rgba(5, 5, 9, 0.9);
    -webkit-backdrop-filter: blur(13.125px);
    backdrop-filter: blur(13.125px);
    border-block-end: 1px solid rgba(255, 255, 255, 0.15);
  }

  .header__inner {
    gap: var(--space-xs);
    min-height: 4rem; /* 13px padding + 38px logo */
    padding-block: 0.8125rem; /* 13px */
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .header__logo {
    width: 6.875rem; /* 110px */
  }

  .header__burger {
    display: block;
  }

  /* Slide-down panel */
  .header__nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: var(--container-gutter);
    background-color: rgba(1, 2, 4, 0.98);
    -webkit-backdrop-filter: blur(13.125px);
    backdrop-filter: blur(13.125px);
    border-block-end: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--duration) var(--ease),
      visibility var(--duration) var(--ease);
  }

  .header__nav.is-open {
    max-height: 60vh;
    visibility: visible;
  }

  .header__link {
    padding-block: var(--space-md);
    text-align: start;
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header__link::after {
    display: none;
  }
}

/* --- 3.3 Mobile ---------------------------------------------------------- */
@media (max-width: 47.9375em) {
  :root {
    --container-gutter: 1rem; /* 16px */
  }

  /* The mobile frame paints the hero #050509 and puts The Problem 70px below
     the stats — that gap belongs to .problem's padding, not the hero's */
  .hero {
    background-color: #050509;
    padding-block-end: 0;
  }

  .header__inner {
    min-height: 4.25rem; /* 68px = 13×2 + 42 */
  }

  .hero__top {
    padding-block-start: 6.75rem; /* 108px */
    min-height: 0;
  }

  .hero__title {
    max-width: 100%;
  }

  .hero__visual {
    position: static;
    width: 100%;
    margin-block-start: 0;
    padding: 0; /* the desktop inset would add ~6px of height here */
    transform: rotate(-1.7deg);
  }

  .hero__visual::before {
    display: none;
  }

  /* Centred on the 393 frame. .btn is inline-flex, so it needs a block-level
     box of its own content width before auto margins can do anything. */
  .hero__cta {
    display: flex;
    width: fit-content;
    margin-block: 2rem 2.375rem;
    margin-inline: auto;
  }

  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-md);
  }

  .hero__lede {
    grid-column: auto;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    letter-spacing: var(--ls-base);
  }

  .stat-card {
    gap: var(--space-sm);
    min-height: 9.375rem; /* 150px */
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  /* First card sits alongside the intro copy and is taller in the mockup */
  .hero__stats .stat-card:first-of-type {
    min-height: 10.5rem; /* 168px */
  }

  .stat-card__value {
    word-spacing: -0.22em; /* mockup renders "2,550+" tight on mobile */
  }

  .stat-card__label {
    text-align: center;
  }

  .stat-card--light .stat-card__label {
    color: var(--color-text-slate);
  }

  .stat-card--accent .stat-card__label {
    font-family: var(--font-display);
    color: var(--color-surface-light);
  }

  .hero__glow {
    inset-block-start: 30%;
    inset-inline-start: 20%;
    width: 90%;
  }

  /* --- The Problem --- */
  .problem {
    padding-block: 4.375rem; /* 70px */
  }

  .problem__head {
    margin-block-end: var(--space-2xl); /* 32px */
  }

  .problem__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .problem-card {
    min-height: 16.4375rem; /* 263px */
    padding: var(--space-md);
  }

  .problem-card--light {
    padding-inline: var(--space-md);
  }

  /* The mobile frame pins the screenshot at (28, 127) inside a 361×263 card —
     the copy is only three lines wide here, so it clears it */
  .problem-card__media,
  .problem-card--light .problem-card__media {
    position: absolute;
    inset-block-start: 48.29%; /* 127 / 263 */
    inset-inline-start: 7.76%; /* 28 / 361 */
    width: 84.76%; /* 306 / 361 */
    margin: 0;
  }

  .problem-card__title {
    font-weight: 500;
  }

  .problem__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem; /* 8px */
    margin-block-start: var(--space-md);
  }

  .fact-card__value {
    font-weight: 500;
  }

  .fact-card--wide {
    align-items: center;
    text-align: center;
  }

  /* The mobile frame carries no button here, and it moves the puzzle in */
  .problem__cta {
    display: none;
  }

  .problem__decor {
    display: block;
    inset-block-end: 1.4375rem; /* 23px */
    inset-inline-start: 67.18%; /* 264 / 393 */
    width: 29.06%; /* 114 / 393 */
    transform: rotate(0.9deg);
  }

  .fact-card {
    min-height: 9.375rem; /* 150px */
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .fact-card--wide {
    grid-column: 1 / -1;
    min-height: 8.6875rem; /* 139px */
    padding: 1.875rem;
  }

  .problem__cta {
    margin-block-start: var(--space-2xl);
  }

  /* --- Services --- */
  .services {
    padding-block: 4.375rem; /* 70px */
  }

  .services__head {
    margin-block-end: var(--space-2xl); /* 32px */
  }

  /* Single column on a timeline rail, truncated until "View all" */
  .services__grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    row-gap: var(--space-md);
    max-width: 22.3125rem; /* 357px — puts the cards on 335 */
    margin-inline: auto;
    padding-inline-start: 1.375rem; /* 22px */
    /* No overflow clip: the truncation is done by the cards themselves now, and
       a clip here would shave the left edge of the rail and the node glow. */
  }

  /* Named areas are gone here — clear the desktop placement so the cards
     auto-flow instead of collapsing into the first cell */
  .services__grid > * {
    grid-area: auto;
    margin-block-start: 0;
  }

  /* Collapsed: the frame shows four whole cards and nothing of the fifth —
     "View all" is the only hint that the list goes on. Counting cards beats a
     max-height: the cut lands on a card edge whatever the copy does to their
     heights. */
  .services__grid:not(.is-expanded) .service-card:nth-of-type(n + 5) {
    display: none;
  }

  /* Timeline rail, drawn one segment per card so that it starts at the first
     node instead of at the top of the grid. It lives on .service-card__head
     because the card's own pseudo-elements are taken by the gradient border
     and the node — the head is static, so the segment still resolves against
     the card. Each segment covers its card plus the row gap below it, which
     makes the segments tile seamlessly at any card height. */
  .service-card__head::before {
    content: "";
    position: absolute;
    inset-block: 0 calc(var(--space-md) * -1); /* own height + the 16px gap */
    inset-inline-start: -0.78125rem; /* 12.5px → the rail sits clear of the edge */
    width: 1.5px;
    background-color: #8f57c0;
  }

  .service-card:first-of-type .service-card__head::before {
    inset-block-start: 50%; /* the first node */
    background-image: linear-gradient(180deg, #faf5f5, #8f57c0);
  }

  /* Nothing to bridge below the last visible card, so the rail stops on its
     node instead of trailing 16px into empty space — the mirror of the first
     segment, which starts on the first node. Collapsed that is the fourth card,
     expanded the eighth. */
  .services__grid:not(.is-expanded) .service-card:nth-of-type(4) .service-card__head::before,
  .service-card:last-of-type .service-card__head::before {
    inset-block-end: 50%;
    background-image: linear-gradient(180deg, #8f57c0, #4f13a5);
  }

  .service-card {
    gap: var(--space-md);
    min-height: 9.125rem; /* 146px */
    padding: var(--space-lg); /* 20px */
    border-radius: var(--radius-md);
  }

  /* Timeline node, vertically centred on its card */
  .service-card::after {
    content: "";
    position: absolute;
    inset-block-start: calc(50% - 0.375rem);
    inset-inline-start: -1.125rem; /* 18px — keeps the node centred on the rail */
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--gradient-card);
    box-shadow: 0 0 0.25rem 0.0625rem rgba(226, 226, 226, 0.9);
  }

  .service-card__icon {
    width: 3.25rem; /* 52px */
    height: 3.25rem;
  }

  .service-card__title {
    font-size: var(--fs-h4); /* 24px */
  }

  .services__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-2xl);
  }

  /* --- Contact --- */
  .contact {
    padding-block: 4.375rem 0;
  }

  /* The 32px row gap is right above the form; under it the icons and address
     sit tighter — 20 and 16, as the reference has them. */
  .contact__socials {
    margin-block-start: -0.75rem; /* 32 → 20 */
  }

  .contact__address {
    margin-block-start: -1rem; /* 32 → 16 */
  }

  .form__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-md);
  }

  .form__footer {
    padding: 0 var(--space-md) var(--space-md);
  }

  .form {
    padding-block-start: var(--space-lg);
  }

  /* --- Instagram --- */
  .instagram {
    padding-block: 4.375rem;
  }

  /* --- Footer --- */
  .footer {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-lg) var(--space-lg) 7rem;
  }

  .footer__col:nth-of-type(1),
  .footer__col:nth-of-type(2) {
    grid-column: 1;
  }

  .footer__mail {
    font-size: 20px; /* 24px */
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  /* --- FAQ --- */
  .faq {
    padding-block: 4.375rem; /* 70px */
  }

  .faq__inner {
    gap: var(--space-2xl); /* 32px */
  }

  .faq__trigger {
    gap: var(--space-sm);
    min-height: 0;
    padding: var(--space-sm); /* 12px */
  }

  .faq__text {
    padding: 0 var(--space-sm) var(--space-sm);
  }

  /* --- How we start --- */
  .process {
    padding-block: 4.375rem; /* 70px */
  }

  .process__head {
    margin-block-end: var(--space-2xl); /* 32px */
  }

  .step__num {
    font-size: 0.6875rem; /* 11px */
    line-height: var(--lh-normal);
    opacity: 0.5;
  }

  .process__nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm); /* 12px */
    margin-block-start: var(--space-xl); /* 24px */
  }

  .process__btn {
    display: grid;
    place-items: center;
    width: 2.25rem; /* 36px */
    height: 2rem; /* 32px */
    border-radius: 0.25rem;
    background-color: var(--color-surface-light);
    transition: opacity var(--duration) var(--ease);
  }

  .process__btn svg {
    width: 1rem;
    height: 1rem;
  }

  .process__btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .process__nav [data-slider-prev] svg {
    rotate: 180deg;
  }

  /* --- Case studies --- */
  .cases {
    padding-block: 4.375rem; /* 70px */
  }

  .cases__head {
    gap: var(--space-lg);
    margin-block-end: var(--space-2xl);
  }

  .cases__title {
    font-size: var(--fs-h2); /* 62px */
    letter-spacing: var(--ls-h2);
  }

  .cases__tab {
    min-height: 4rem; /* 64px */
    padding-inline: 0.5rem;
  }

  .case {
    padding: var(--space-md);
    row-gap: var(--space-lg);
  }

  /* The figure clips to its own radius, so it has to match the image's 8px —
     otherwise the 20px corner of the desktop figure is what shows. Relative
     because the rail controls inside it are centred on the photo here. */
  .case__media {
    position: relative;
    border-radius: var(--radius-sm); /* 8px */
  }

  .case__media img {
    aspect-ratio: 329 / 187;
    border-radius: var(--radius-sm); /* 8px */
  }

  .case__metrics {
    gap: var(--space-md);
		align-items: start;
  }

  .metric--case {
    padding: 0.5rem 0.125rem; /* 8px / 2px */
  }

  .metric--case .metric__value {
    font-size: var(--fs-h4); /* 24px */
    font-weight: 500;
    line-height: var(--lh-snug);
  }

  .metric--case .metric__label {
    font-size: 0.75rem; /* 12px */
    letter-spacing: -0.1px;
  }

  /* The 393 frame puts the pair on the photo itself, one at either end. The
     figure is the containing block here, so the offsets are read from the
     image; the tablet rule that parks them under the card is undone. */
  .case__nav {
    inset-block: 50% auto;
    translate: 0 -50%;
  }

  .case__nav--prev {
    inset-inline-start: 0;
  }

  .case__nav--next {
    inset-inline-end: 0;
  }

  /* --- CTA --- */
  .cta__inner {
    padding-block: 4.375rem 0; /* 70px */
  }

  .cta__intro {
    max-width: 100%;
    gap: var(--space-lg);
    padding: 0; /* the mobile Title frame is flush 361px wide */
    margin-inline: 0;
    text-align: center;
    background: radial-gradient(
      105% 105% at 50% 50%,
      rgba(0, 5, 17, 0.95) 0%,
      rgba(0, 5, 17, 0) 100%
    );
  }

  .cta__title {
    font-size: 2rem; /* 32px */
    letter-spacing: var(--ls-base);
  }

  .cta__text {
    max-width: 100%;
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-base);
  }

  .cta__button {
    margin-block-start: 13.125rem; /* 426px − title block */
  }

  .cta__stats {
    gap: var(--space-lg);
    margin-block-start: 11.8125rem; /* button ends 478 → row at 667 */
    padding-block-end: 8.875rem; /* row ends ~743 → frame ends 885 */
  }

  .metric__value {
    font-size: var(--fs-h4); /* 24px */
    font-weight: 500;
    line-height: var(--lh-snug);
  }

  .metric__label {
    font-size: 0.75rem; /* 12px */
    letter-spacing: -0.1px;
  }

  .cta__glow,
  .cta__puzzle {
    display: none;
  }

  .cta__fade--upper {
    inset-block-start: 70.4%;
    height: 29.6%;
  }

  .cta__fade--lower {
    display: none;
  }

  /* --- Team: horizontal snap scroller, as in the mobile frame --- */
  .team {
    padding-block: 4.375rem; /* 70px */
  }

  .team__inner {
    gap: var(--space-2xl);
  }

  .team__title {
    font-size: 2rem; /* 32px */
    letter-spacing: var(--ls-base);
  }

  .team__puzzle {
    display: block;
    inset-block-start: auto;
    inset-block-end: 2.3125rem; /* 37px */
    inset-inline-start: 76.31%; /* 300 / 393 */
    width: 18.88%; /* 74 / 393 */
  }

  /* The mobile frame ended this block with the arrows alone, but the link is
     now the only route from the slider to a case study, so it stays. */
  .cases__cta {
    margin-block-start: var(--space-2xl);
  }

  .team__list {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-xs); /* 10px */
    margin-block-start: 0;
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
		    overflow-y: hidden;
  }

  .team__list::-webkit-scrollbar {
    display: none;
  }

  .member {
    flex: 0 0 16.5625rem; /* 265px */
    border-radius: var(--radius-md);
    scroll-snap-align: center;
  }

  .member__caption {
    min-height: 4.375rem; /* 70px */
    border-radius: var(--radius-md);
  }

  .member__name {
    font-size: var(--fs-h4); /* 24px */
  }
}

/* ==========================================================================
   14. Ambient motion — slow, low-cost loops that keep the page breathing
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Hero bloom drifts and pulses */
  .hero__glow {
    animation: bloom 14s var(--ease) infinite alternate;
  }

  .cta__glow {
    animation: bloom 11s var(--ease) infinite alternate;
  }

  @keyframes bloom {
    from {
      opacity: 0.75;
      scale: 0.94;
    }
    to {
      opacity: 1;
      scale: 1.06;
    }
  }

  /* Glass puzzle pieces float */
  .problem__decor,
  .cta__puzzle,
  .team__puzzle {
    animation: float 9s var(--ease) infinite alternate;
  }

  .cta__puzzle--2 {
    animation-duration: 12s;
    animation-delay: -3s;
  }

  .team__puzzle {
    animation-duration: 10.5s;
    animation-delay: -5s;
		        inset-block-end: -4.6875rem;
  }

  @keyframes float {
    from {
      translate: 0 -0.5rem;
    }
    to {
      translate: 0 0.75rem;
    }
  }

  /* Ring nodes pulse. Deliberately not scale/rotate: the dots are placed with
     `transform: rotate() translateY()`, so any geometry change would drag them
     off the arrow tails. Only the glow animates. */
  .services__dot {
    animation: node 3.2s var(--ease) infinite alternate;
  }

  .services__dot:nth-of-type(even) {
    animation-delay: -1.6s;
  }

  @keyframes node {
    from {
      box-shadow: 0 0 0.25rem 0.0625rem rgba(226, 226, 226, 0.55);
    }
    to {
      box-shadow: 0 0 0.5rem 0.125rem rgba(226, 226, 226, 0.95);
    }
  }

  /* The lime accent on the step bars gets a soft glow on hover */
  .step__pill {
    transition: box-shadow var(--duration) var(--ease),
      translate var(--duration) var(--ease);
  }

  .step:hover .step__pill {
    box-shadow: 0 0.75rem 1.75rem rgba(128, 26, 168, 0.45);
    translate: 0 -0.25rem;
  }
}