/* ==========================================================================
   Anthēs — Home page
   Figma page "01 Home", frame 594:780 (Home / Desktop, 1280 × 9181)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — Figma 594:781
   The nav instance sits inside this frame in Figma (594:855); here it is
   lifted out into the real <header>, so the section is 921 − 63 = 858 tall.
   -------------------------------------------------------------------------- */
.hero { overflow: hidden; }

.hero__inner {
  position: relative;
  max-width: var(--frame);
  min-height: 858px;
  margin-inline: auto;
}

.hero__copy {
  position: absolute;
  left: 50px;
  top: 147px;
  width: 553.63px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 23.65px;
}

.hero__eyebrow {
  font-size: 11.824px;
  font-weight: var(--w-bold);
  line-height: 18.722px;
  letter-spacing: 1.6554px;
  text-transform: uppercase;
  color: var(--marigold);
  white-space: nowrap;
}

.hero__title {
  font-size: 63.838px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2.5865px;
  color: var(--ink);
}

.hero__sub {
  font-size: 20.692px;
  line-height: 29.068px;
  color: var(--ink);
  max-width: 345px;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 15.77px;
  flex-wrap: wrap;
}

.btn--lg {
  padding: 13.8px 25.62px;
  font-size: 14.78px;
  gap: 7.88px;
}

.hero__link {
  font-size: 14.78px;
  color: var(--ink);
  white-space: nowrap;
}
.hero__link:hover { color: var(--marigold); }

/* Collage artwork */
.hero__art {
  position: absolute;
  left: 581px;
  top: 127px;
  width: 655px;
  height: 541px;
}
.hero__art > img:first-child { width: 655px; height: 541px; }

.hero__star { position: absolute; }
.hero__star--3 { left: 609px; top: 115px; width: 23px; height: 23px; }
.hero__star--4 { left: 568px; top: 164px; width: 16px; height: 16px; }
.hero__star--2 { left: 594px; top: 210px; width: 17px; height: 16px; }

/* --------------------------------------------------------------------------
   Why Anthēs — Figma 594:857
   -------------------------------------------------------------------------- */
/* The dark band runs full width; the content sits in a centred column so the
   slack is split evenly on both sides instead of collecting on the right. */
.why {
  background: #101213;
  padding: 100px 0 60px;
}

.why__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.why__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.why__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
  max-width: 1144px;
}

.why__cards { display: flex; align-items: flex-start; gap: 0; }

.why-card {
  width: 381px;
  flex: 0 1 381px;
  padding: 11px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.why-card__num {
  font-size: 13px;
  font-weight: var(--w-bold);
  line-height: 21px;
  letter-spacing: 1.82px;
  color: var(--marigold);
}

.why-card__title {
  font-size: 20px;
  font-weight: var(--w-bold);
  line-height: 25px;
  color: #fff;
}

.why-card__body {
  font-size: 15.5px;
  line-height: 24.8px;
  color: #b5b5b5;
}

/* --------------------------------------------------------------------------
   Results — Figma 594:873
   -------------------------------------------------------------------------- */
/* Fixed-height frame in Figma (912), content vertically centred and clipped */
.results {
  background: #101213;
  height: 912px;
  overflow: hidden;
  padding: 95px var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.results__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 126px;
  width: 1082px;
  max-width: 100%;
}

/* Left-hand composition: portrait, floating bar-chart card, wave chart */
.results__art {
  position: relative;
  flex: 0 0 490.65px;
  width: 490.65px;
  height: 622.38px;
}

.results__portrait {
  position: absolute;
  left: 51.5px;
  top: -5.5px;
  width: 444.65px;
  height: 633.38px;
}

.results__card {
  position: absolute;
  left: 0;
  top: 235.77px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11.42px;
  padding: 19.04px;
  background: #101213;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16.5px;
}
.results__card img { width: 111.7px; height: 66.64px; }
.results__card p {
  font-size: 24.12px;
  font-weight: 600;
  line-height: 31.73px;
  color: #fff;
  white-space: nowrap;
}

.results__wave {
  position: absolute;
  left: 80.19px;
  top: 400.6px;
  width: 221.32px;
  height: 118.83px;
}

.results__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.results__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--sun-yellow);
}

.results__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
  /* Figma's text box is 427px, but Chrome lays DM Sans out a little wider than
     Figma does at the same size/tracking/opsz, which pushed "speak" onto a
     third line. Widening to the column keeps the designed two-line break:
     "The numbers speak / for the work." */
  max-width: 465px;
}

.results__stats {
  padding-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.stat { display: flex; flex-direction: column; gap: 12px; }

.stat__value {
  font-size: 45px;
  font-weight: var(--w-bold);
  line-height: 60px;
}
.stat__value--crimson  { color: var(--crimson); }
.stat__value--marigold { color: var(--marigold); }
.stat__value--violet   { color: #8849a4; }

.stat__label {
  font-size: 16px;
  font-weight: var(--w-bold);
  line-height: 24.2px;
  color: #fff;
}
.stat__desc {
  font-size: 16px;
  line-height: 24.2px;
  color: #a1a1a1;
}
/* The label/description pair is one text block in Figma — no gap between them */
.stat__label + .stat__desc { margin-top: -12px; }

/* --------------------------------------------------------------------------
   Trusted by — Figma 594:897
   -------------------------------------------------------------------------- */
/* Fixed-height frame in Figma (187) */
.trusted {
  background: #101213;
  height: 187px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 32px 48px;
}

.trusted__label {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(168, 166, 167, 0.42);
  white-space: nowrap;
}

.trusted__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 81.25px;
  width: 944.12px;
  max-width: 100%;
}

.trusted__logos > li { flex: 0 0 auto; }

/* Brossard Physio is a stacked mark + wordmark lockup */
.trusted__stack { position: relative; width: 79.14px; height: 75.63px; }
.trusted__mark { position: absolute; left: 23.94px; top: 0;       width: 34.29px; height: 50.37px; }
.trusted__word { position: absolute; left: 0;       top: 57.59px; width: 79.14px; height: 18.04px; }

/* --------------------------------------------------------------------------
   Packages — Figma 594:997
   -------------------------------------------------------------------------- */
.pkgs {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  padding: 144px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.pkgs__intro { display: flex; align-items: flex-start; gap: 48px; width: 100%; }

.pkgs__heading {
  width: 554px;
  flex: 0 0 554px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pkgs__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.pkgs__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: var(--ink);
}

/* Three supporting points, each with a tinted icon tile */
.pkgs__points { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.point { display: flex; gap: 21px; align-items: flex-start; }
.point--divided { padding-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.point--end { align-items: flex-end; }
.point--center { align-items: center; }

.point__icon {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.point__icon--pink  { background: #fef2f7; }
.point__icon--amber { background: #fff3e3; }
.point__icon--rose  { background: #fce7f1; }

.point__text { flex: 1 1 0; min-width: 0; font-size: 17px; line-height: 25px; color: var(--ink-70); }
.point__text strong { font-weight: var(--w-bold); color: #000; }
.point__text--stacked { display: flex; flex-direction: column; gap: 16px; }
.point__lead { font-size: 17px; font-weight: var(--w-bold); line-height: 23px; color: #000; }
.point__body { font-size: 17px; line-height: 25px; color: var(--ink-70); }

/* Pricing row */
.pkgs__paths { width: 100%; display: flex; flex-direction: column; gap: 26px; }

.pkgs__pathlabel {
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 1.82px;
  text-transform: uppercase;
  color: var(--ink-40);
}

.pricing { position: relative; display: flex; align-items: flex-start; gap: 18px; }

/* The 10px cap carrying the package's locked pillar colour is painted as the
   card's own background rather than as a child element. A 10px-tall element
   cannot reproduce the card's 30px corner — the browser clamps its radius and
   it renders as a lozenge — but a background is clipped by the card's radius
   exactly. It also leaves the card unclipped, so the "Most chosen" badge can
   still sit outside it. */
.pcard {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 470px;
  padding-top: 10px;
  border: 1px solid var(--ink-15);
  border-radius: 30px;
  display: flex;
  flex-direction: column;

  background-color: var(--paper);
  background-image: linear-gradient(var(--package), var(--package));
  background-repeat: no-repeat;
  background-size: 100% 10px;
  background-position: top left;
  background-origin: padding-box;
  background-clip: padding-box;
}

.pcard__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pcard__name {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: #000;
}

.pcard__price {
  font-size: 34px;
  font-weight: var(--w-bold);
  line-height: 38px;
  color: var(--ink);
}
.pcard__price span {
  font-size: 13px;
  font-weight: var(--w-regular);
  color: var(--ink-40);
}

.pcard__tagline {
  font-size: 11px;
  font-weight: var(--w-bold);
  line-height: 16px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 220px;
}

.pcard__desc {
  font-size: 14px;
  line-height: 21.7px;
  color: var(--ink-70);
  max-width: 220px;
}

.pcard__features {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcard__features li {
  font-size: 13.5px;
  line-height: 19px;
  color: var(--ink);
  max-width: 220px;
  display: flex;
  gap: 8px;
}
.pcard__features .tick { font-weight: var(--w-bold); color: var(--package); flex: 0 0 auto; }

.pcard__more { padding-top: 12px; }
.pcard__more a {
  font-size: 13.5px;
  font-weight: var(--w-bold);
  line-height: 19px;
  color: var(--ink);
}
.pcard__more a:hover { color: var(--package); }

/* "Most chosen" badge, straddling the top edge of the Growth card */
.pkgs__badge {
  position: absolute;
  left: 50%;
  top: -22.9px;
  transform: translateX(-50%);
  z-index: 1;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: #ead83a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.6px 12.375px;
  font-size: 9.11px;
  font-weight: 800;
  line-height: 11px;
  letter-spacing: 1.1349px;
  text-transform: uppercase;
  text-align: center;
  color: #000;
}

.pkgs__footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pkgs__note { font-size: 14.5px; line-height: 23.2px; color: var(--ink-70); max-width: 436px; }

.btn--arrow { gap: 8px; }
.btn--outline { border-width: 1px; padding: 14px 26px; font-size: 15px; }

/* --------------------------------------------------------------------------
   Banner — Figma 594:1087
   Photo bleeds off the left edge; two centred statements sit on black.
   -------------------------------------------------------------------------- */
.banner { background: #000; }

/* Full-bleed: the photo runs all the way to the left edge of the viewport.
   The Figma frame is 1280 wide with a 627px photo, so the two columns keep
   that ratio at any width — at 1280 it is the drawn layout exactly. */
.banner__inner {
  position: relative;
  width: 100%;
  height: 596px;
  display: grid;
  grid-template-columns: 627fr 653fr;
  align-items: center;
  overflow: hidden;
}

.banner__photo {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.banner__line {
  font-size: 41px;
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.8895px;
  text-align: center;
  color: #fff;
}

/* Each statement is centred within its own column, as in the Figma */
.banner__line--left {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  justify-self: center;
  width: 355.1px;
  max-width: calc(100% - 32px);
}

.banner__right {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 355.1px;
  max-width: calc(100% - 32px);
}

.banner__rule {
  width: 292px;
  max-width: 100%;
  height: 3px;
  margin: 13.6px auto 0;
}

/* --------------------------------------------------------------------------
   Case study — Figma 594:1092
   -------------------------------------------------------------------------- */
/* Centred content column — equal space either side at any width */
.cstudy {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 128px 0;
}

/* The collage is laid out proportionally rather than in fixed pixels, so it
   scales as one piece instead of its parts spilling out of the box. The
   percentages are the Figma values over the 526 × 535 frame. */
.cstudy__collage {
  position: relative;
  flex: 0 1 526px;
  width: 526px;
  max-width: 100%;
  aspect-ratio: 526 / 535;
  margin: 0;
  overflow: hidden;   /* keeps the parallaxed portrait inside the yellow block */
}

/* Sun-yellow block behind the portrait */
.cstudy__block {
  position: absolute;
  left: 3.8%; top: 6%;
  width: 92.4%; height: 94%;
  background: var(--sun-yellow);
}

.cstudy__collage img {
  position: absolute;
  left: 19%; top: 20.9%;
  width: 77.2%; height: 79.1%;
  object-fit: cover;
}

.cstudy__collage figcaption {
  position: absolute;
  left: 49.9%; top: 92.5%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: var(--w-bold);
  letter-spacing: 1.5289px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  white-space: nowrap;
}

.cstudy__copy {
  flex: 0 1 540px;
  width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cstudy__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--coral-pink);
}

.cstudy__title {
  font-size: 32px;
  font-weight: var(--w-regular);
  line-height: 37.8px;
  letter-spacing: -0.38px;
  color: var(--ink);
  max-width: 479px;
}
.cstudy__title strong { font-weight: var(--w-bold); color: var(--coral-pink); }

.cstudy__stars {
  font-size: 14px;
  line-height: 22.4px;
  letter-spacing: 2.52px;
  color: var(--marigold);
}

.cstudy__quote {
  font-size: 18px;
  line-height: 27.9px;
  color: var(--ink);
  margin: 0;
}

.cstudy__attrib {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--ink-70);
}

.cstudy__ctas { display: flex; align-items: center; gap: 16px; padding-top: 8px; flex-wrap: wrap; }

.btn--solid-marigold {
  background: var(--marigold);
  color: #fff;
  border: 0;
  padding: 14px 26px;
  font-size: 15px;
}
.btn--solid-marigold:hover { filter: brightness(0.9); }

.cstudy__link { font-size: 15px; color: var(--ink); white-space: nowrap; }
.cstudy__link:hover { color: var(--marigold); }

/* --------------------------------------------------------------------------
   Powered by Tansley — Figma 594:1110
   -------------------------------------------------------------------------- */
/* Fixed-height frame in Figma (1013), content vertically centred */
.pbt {
  background: #000;
  height: 1013px;
  overflow: hidden;
  padding: 145px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Both blocks share the centred content column, so they stay left-aligned
   with each other while the band itself runs full width */
.pbt__main,
.pbt__equation {
  width: min(var(--content), 100% - (2 * var(--gutter)));
}

.pbt__main { display: flex; flex-direction: column; gap: 30px; }

.pbt__heading { display: flex; flex-direction: column; gap: 16px; }

.pbt__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--sun-yellow);
}

.pbt__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 59px;
  letter-spacing: -0.62px;
  color: #fff;
  max-width: 974px;
}
.pbt__title strong { font-weight: var(--w-bold); color: var(--sun-yellow); }

.pbt__columns { display: flex; align-items: flex-start; gap: 32px; padding-block: 21px; }

.pbt-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.pbt-col__head { display: flex; align-items: center; gap: 16px; }
.pbt-col__head img { flex: 0 0 auto; }
.pbt-col__head h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  max-width: 187px;
}

.pbt-col > p {
  font-size: 15px;
  line-height: 21.2px;
  color: rgba(255, 255, 255, 0.65);
}

.pbt__tools {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-block: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.pbt__toolslabel {
  font-size: 11px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.pbt__toolslogos { display: flex; align-items: center; gap: 46px; flex-wrap: wrap; }

/* WordPress is a mark + wordmark lockup */
.pbt__wp { position: relative; width: 107.53px; height: 21.78px; }
.pbt__wp-mark { position: absolute; left: 0;       top: 0;      width: 21.66px; height: 21.78px; }
.pbt__wp-word { position: absolute; left: 24.08px; top: 5.23px; width: 83.45px; height: 10.89px; }

/* The locked signature equation */
.pbt__equation { display: flex; align-items: flex-start; gap: 16px; }
.pbt__equation img { flex: 0 0 37px; width: 37px; height: 37px; }
.pbt__equation span {
  font-size: 22px;
  line-height: 35px;
  letter-spacing: -0.11px;
  color: #fff;
}
.pbt__equation em { font-style: normal; color: rgba(255, 255, 255, 0.5); }
.pbt__equation strong { font-weight: var(--w-bold); }
.pbt__equation .is-yellow { color: var(--sun-yellow); }
.pbt__equation .is-coral  { color: var(--coral-pink); }

/* --------------------------------------------------------------------------
   Insights — Figma 594:1282
   -------------------------------------------------------------------------- */
.insights {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  padding: 128px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.insights__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.insights__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: var(--ink);
  /* Figma box is 974px; Chrome sets DM Sans slightly wider, so this is widened
     within the 1144px column to keep the designed single-line heading. */
  max-width: 1030px;
}
.insights__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.insights__grid { display: flex; align-items: flex-start; gap: 24px; padding-top: 32px; }

.acard {
  flex: 0 0 365px;
  width: 365px;
  min-height: 339px;
  background: var(--paper);
  border: 1px solid var(--ink-15);
  border-radius: 20px;
  overflow: hidden;
}
.acard > a { display: flex; flex-direction: column; gap: 25px; height: 100%; padding-bottom: 24px; }

.acard img { width: 100%; height: 170px; object-fit: cover; }

.acard__body { display: flex; flex-direction: column; gap: 16px; padding-inline: 24px; }

.acard__kicker {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--ink-40);
}

.acard__title {
  font-size: 20px;
  font-weight: var(--w-bold);
  line-height: 26px;
  color: var(--ink);
  max-width: 317px;
}

.acard__read { font-size: 13.5px; font-weight: var(--w-bold); color: var(--ink); }
.acard > a:hover .acard__read { color: var(--marigold); }

/* --------------------------------------------------------------------------
   Responsive — derived; the Figma has no artboards below 1280
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .hero__inner {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 72px var(--gutter) 80px;
  }
  .hero__copy {
    position: static;
    width: auto;
    flex: 1 1 480px;
    max-width: 554px;
  }
  .hero__art {
    position: relative;
    left: auto; top: auto;
    flex: 0 1 560px;
    width: auto;
    height: auto;
    aspect-ratio: 655 / 541;
  }
  .hero__art > img:first-child { width: 100%; height: auto; }

  /* Stars are placed as a percentage of the collage once it can scale */
  .hero__star--3 { left: 93%; top: 21.3%; }
  .hero__star--4 { left: 86.7%; top: 30.3%; }
  .hero__star--2 { left: 90.7%; top: 38.8%; }

  .hero__title { font-size: clamp(40px, 5vw, 63.838px); letter-spacing: -0.04em; }

  .why { padding: 80px 0 56px; }
  .why__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }
  .why__cards { flex-wrap: wrap; gap: 8px; }
  .why-card { flex: 1 1 300px; }

  /* Figma's fixed section heights only hold at 1280; below that they grow */
  .results, .trusted, .pbt { height: auto; }

  .results { padding: 80px var(--gutter); }
  .results__inner { gap: clamp(40px, 7vw, 126px); width: 100%; }
  .results__art {
    flex: 0 1 490.65px;
    width: auto;
    height: auto;
    aspect-ratio: 490.65 / 622.38;
  }
  /* Once the composition can scale, the overlays are placed proportionally */
  .results__portrait { left: 10.5%; top: -0.9%; width: 90.6%; height: 101.8%; }
  .results__card     { top: 37.9%; padding: 14px; gap: 8px; }
  .results__card img { width: 88px; height: 52px; }
  .results__card p   { font-size: 20px; line-height: 26px; }
  .results__wave     { left: 16.3%; top: 64.4%; width: 45.1%; height: auto; }
  .results__title    { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }

  .trusted { flex-direction: column; gap: 24px; padding: 32px var(--gutter); }
  .trusted__logos { flex-wrap: wrap; justify-content: center; gap: clamp(32px, 6vw, 81.25px); width: 100%; }

  .pkgs { padding: 104px 0; gap: 40px; }
  /* Equal bases so the heading can't starve the points column; they wrap to
     one column once both no longer fit side by side. */
  .pkgs__intro { gap: 32px; flex-wrap: wrap; }
  .pkgs__heading { flex: 1 1 400px; width: auto; }
  .pkgs__points { flex: 1 1 400px; }
  .pkgs__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }
  .pricing { flex-wrap: wrap; }
  .pcard { flex: 1 1 calc(50% - 9px); height: auto; min-height: 470px; }
  .pricing { row-gap: 46px; }

  /* The two-column banner holds; only the type needs to come down */
  .banner__line { font-size: clamp(28px, 3.4vw, 41px); }

  .cstudy { padding: 96px 0; gap: 40px; }
  .cstudy__collage { flex: 0 1 440px; width: auto; }
  .cstudy__copy { flex: 1 1 340px; width: auto; }

  .pbt { padding: 104px 0; }
  .pbt__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.14; }
  .pbt__columns { flex-wrap: wrap; gap: 32px 32px; }
  .pbt-col { flex: 1 1 280px; }
  .pbt__tools { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pbt__toolslogos { gap: 32px; }
  .pbt__equation span { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; }

  .insights { padding: 104px 0; }
  .insights__title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }
  .insights__grid { flex-wrap: wrap; }
  .acard { flex: 1 1 300px; width: auto; }
  .acard__title { max-width: none; }
}

@media (max-width: 860px) {
  .pkgs__heading, .pkgs__points { flex: 1 1 100%; }

  /* Stacked: photo with its statement over it, second statement beneath */
  .banner__inner { height: auto; grid-template-columns: minmax(0, 1fr); }
  .banner__photo { grid-column: 1; grid-row: 1; height: 340px; }
  .banner__line--left { grid-column: 1; grid-row: 1; }
  .banner__right { grid-column: 1; grid-row: 2; padding-block: 48px; }

  .cstudy__title { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.18; }
}

/* The case study stacks earlier than the rest — side by side it squeezes the
   quote column before the other sections are under any pressure. */
@media (max-width: 1000px) {
  .cstudy { flex-direction: column; align-items: flex-start; }
  .cstudy__collage {
    flex: 0 0 auto;
    width: 100%;
    max-width: 526px;
    align-self: center;
  }
  .cstudy__collage figcaption { font-size: 12px; }
  .cstudy__copy { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 860px) {
  .hero__inner { flex-direction: column; align-items: flex-start; }
  .hero__copy { flex: 1 1 auto; max-width: 554px; }
  .hero__art { flex: 1 1 auto; width: 100%; max-width: 560px; align-self: center; }
}

@media (max-width: 640px) {
  .hero__inner { padding-top: 48px; padding-bottom: 56px; }
  .hero__copy { gap: 20px; }
  .hero__sub { font-size: 18px; line-height: 27px; }
  .hero__ctas { gap: 12px; }

  .why { padding: 64px 0 48px; }
  .why__cards { flex-direction: column; gap: 0; }
  .why-card { width: 100%; flex: 1 1 auto; padding-bottom: 32px; }

  .results { padding: 64px var(--gutter); }
  .results__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
  .results__art { flex: 1 1 auto; width: 100%; max-width: 420px; align-self: center; }
  .results__stats { gap: 28px; }
  .stat__value { font-size: 38px; line-height: 48px; }
}