/* ==========================================================================
   Anthēs — About page
   Figma page "05 About", frame 19:38 (About / Desktop, 1280 × 9209)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero — Figma 19:67
   -------------------------------------------------------------------------- */
.bhero { padding: 100px 0; overflow: hidden; }

.bhero__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 100px;
}

.bhero__art { flex: 0 0 auto; width: 504px; }
.bhero__art img { width: 100%; height: auto; }

.bhero__copy {
  flex: 0 1 521px;
  width: 521px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

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

.bhero__title {
  font-size: 63.2px;
  font-weight: var(--w-regular);
  line-height: 64.6px;
  letter-spacing: -1.21px;
  color: var(--ink);
}
.bhero__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.bhero__lede { font-size: 18px; line-height: 28px; color: var(--ink); }

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

/* --------------------------------------------------------------------------
   Statement — Figma 19:82
   -------------------------------------------------------------------------- */
.statement { background: #000; padding: 128px 0 103px; }

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

.statement__lead {
  font-size: 45px;
  line-height: 56px;
  letter-spacing: -0.62px;
  color: #fff;
}
.statement__lead strong { font-weight: var(--w-bold); color: var(--coral-pink); }

.statement__note { display: flex; align-items: center; gap: 24px; width: 100%; }
.statement__note img { flex: 0 0 60px; width: 60px; height: 60px; }
.statement__note p { font-size: 15px; line-height: 24.4px; color: #828282; }

/* --------------------------------------------------------------------------
   Tools we use — Figma 476:1169
   -------------------------------------------------------------------------- */
.atools { background: #000; padding: 24px 0 115px; }

.atools__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

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

.atools__logos { display: flex; align-items: center; gap: 46px; flex-wrap: wrap; }
.atools__wp { position: relative; width: 107.53px; height: 21.78px; }

/* --------------------------------------------------------------------------
   Operations crew — Figma 19:86 + 582:4669
   -------------------------------------------------------------------------- */
.crew { background: #000; padding: 128px 0; }

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

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

.crew__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
}
.crew__title strong { font-weight: var(--w-bold); color: var(--sky); }

/* Four across in the Figma, two rows */
.crew__grid {
  width: 100%;
  padding-top: 23.6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 35.4px;
}

.member { display: flex; flex-direction: column; gap: 8.86px; }

.member__portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #151515;
}
.member__portrait--rose { background: #ac3f65; }
.member__portrait img { width: 100%; height: 100%; object-fit: cover; }

.member__name {
  font-size: 17.75px;
  font-weight: var(--w-bold);
  line-height: 28.6px;
  color: #fff;
}
.member__role { font-size: 12.82px; line-height: 20.7px; color: #858585; }

.crew__photo {
  width: min(1146px, 100% - (2 * var(--gutter)));
  margin: 80px auto 0;
}
.crew__photo img { width: 100%; height: auto; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Why we built Anthēs — Figma 19:102
   -------------------------------------------------------------------------- */
.whybuilt { background: var(--shell-bg); padding: 128px 0; }

.whybuilt__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 80px;
}

.whybuilt__art { flex: 0 0 auto; width: 395px; }
.whybuilt__art img { width: 100%; height: auto; }

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

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

.whybuilt__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 57px;
  letter-spacing: -0.62px;
  color: var(--ink);
  max-width: 620px;
  margin-bottom: 5px;
}
.whybuilt__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.whybuilt__body { font-size: 16px; line-height: 26.4px; color: var(--ink-70); }
.whybuilt__body em { font-style: italic; }

.whybuilt__callout {
  margin-top: 5px;
  border-left: 3.62px solid var(--sun-yellow);
  padding: 24px 28.963px;
  font-size: 18px;
  line-height: 25px;
  color: var(--ink);
}
.whybuilt__callout strong { font-weight: var(--w-bold); }

/* --------------------------------------------------------------------------
   How we actually work — Figma 20:65
   -------------------------------------------------------------------------- */
.howwork { padding: 128px 0; }

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

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

.howwork__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 91px;
  padding-block: 40px;
}
.howwork__row--flip { flex-direction: row-reverse; gap: 112px; }

.howwork__art { flex: 0 0 auto; width: 380px; height: auto; }

.howwork__copy { flex: 0 1 434px; }
.howwork__copy h3 {
  font-size: 31px;
  font-weight: var(--w-bold);
  line-height: 1.3;
  letter-spacing: -0.62px;
  color: var(--ink);
  margin-bottom: 5px;
}
.howwork__copy p { font-size: 15.5px; line-height: 25px; color: var(--ink); }

.howwork__formula {
  width: 100%;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.howwork__formula > p:first-child {
  max-width: 1022px;
  font-size: 17px;
  line-height: 27px;
  color: var(--ink);
}
.howwork__verdict {
  font-size: 24px;
  font-weight: var(--w-bold);
  line-height: 32px;
  letter-spacing: -0.29px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Backed by Tansley — Figma 20:79
   -------------------------------------------------------------------------- */
.backed { background: #000; padding: 128px 0 81px; }

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

/* Mark top-left, its top on the cap height of the title's first line
   (David, 2026-10-07). The cap top sits ~0.22em below the line box, so the
   offset follows the title's own size: 11.5px at 52px, less as it shrinks. */
.backed__head { display: flex; align-items: flex-start; gap: 34px; }
.backed__head img { margin-top: clamp(7.5px, 0.9vw, 11.5px); }
/* At 1280+ keep the drawn two-line break: Chrome sets DM Sans ~8% wider
   than Figma, so line 2 needs ~840px against 802px available and "Tansley."
   fell to a third line. In Figma the title already runs past the columns. */
@media (min-width: 1280px) {
  .backed__head  { width: max-content; }
  .backed__title { white-space: nowrap; }
}
.backed__head img { flex: 0 0 93px; width: 93px; height: 95px; }

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

.backed__cols { display: flex; gap: 16px; }
.backed__cols p { flex: 1 1 0; font-size: 16px; line-height: 24.4px; color: #fff; }
.backed__cols strong { font-weight: var(--w-bold); color: var(--sun-yellow); }

.backed__equation { display: flex; align-items: center; gap: 16px; }
.backed__equation img { flex: 0 0 37px; width: 37px; height: 37px; }
.backed__equation span {
  font-size: 22px;
  line-height: 35px;
  letter-spacing: -0.11px;
  color: #fff;
}
.backed__equation em { font-style: normal; color: rgba(255, 255, 255, 0.5); }
.backed__equation strong { font-weight: var(--w-bold); }

/* --------------------------------------------------------------------------
   What to expect — Figma 20:85
   -------------------------------------------------------------------------- */
.expect { background: #000; padding: 50px 0 135px; }

.expect__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 72px;
}

.expect__photo {
  flex: 0 0 442px;
  width: 442px;
  height: 618px;
  object-fit: cover;
  border-radius: 11px;
}

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

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

.expect__title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
  max-width: 460px;
}
.expect__title strong { font-weight: var(--w-bold); color: var(--coral-pink); }

.expect__list { margin: 0; padding-top: 31px; display: flex; flex-direction: column; gap: 15.5px; }

.expect__row { display: flex; align-items: center; gap: 22.12px; padding-block: 15.5px; }
.expect__row + .expect__row { border-top: 0.968px solid rgba(219, 218, 218, 0.21); }

.expect__row dt {
  flex: 0 0 246px;
  width: 246px;
  display: flex;
  align-items: center;
  gap: 17.34px;
  font-size: 25px;
  font-weight: 600;
  line-height: 29px;
  color: var(--pill);
}

.expect__icon {
  flex: 0 0 54.23px;
  width: 54.23px;
  height: 54.23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.expect__icon--tint { background: rgba(254, 242, 247, 0.1); }

.expect__row dd { flex: 1 1 0; min-width: 0; margin: 0; font-size: 16px; line-height: 24.2px; color: #fff; }

/* --------------------------------------------------------------------------
   Clients / next step — Figma 476:1407
   -------------------------------------------------------------------------- */
.fitcta { background: var(--paper); padding: 114px 0; }

.fitcta__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 68px;
}

.fitcta__art { flex: 0 0 auto; width: 303px; }
.fitcta__art img { width: 100%; height: auto; }

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

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

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

.fitcta__sub { font-size: 16px; line-height: 25.6px; color: var(--ink); }

.fitcta__btn {
  background: #e04d48;
  color: #fff;
  border: 0;
  padding: 14px 26px;
  font-size: 15px;
}
.fitcta__btn:hover { filter: brightness(0.92); }

/* The light variant of the shared quote band */
.says--light { background: var(--paper); padding: 64px 0 128px; }
.says--light .says__eyebrow { color: var(--coral-pink); text-align: center; }  /* centred, per David 2026-10-07 */
.says--light .quote { background: #f5f5f5; border-color: transparent; color: var(--ink); }
.says--light .quote p { color: var(--ink); }

/* --------------------------------------------------------------------------
   Get in touch — Figma 572:2783
   -------------------------------------------------------------------------- */
.touch { background: #000; padding: 64px 0 128px; }

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

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

.touch__cards { width: 100%; display: flex; gap: 28px; }

.tcard {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  min-height: 409px;
  border: 1px solid #2d2d2d;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tcard--work { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(219, 48, 114, 0.25)); }
.tcard--join { background: linear-gradient(260.24deg, rgba(88, 161, 210, 0.25) 0.34%, rgba(0, 0, 0, 0.25) 99.99%); }

.tcard__img {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 195px;
  height: calc(100% + 2px);
  object-fit: cover;
}

/* Join card photo: on a phone the strip is wide and short, keep the faces */
.tcard__img--join { object-position: 50% 30%; }

.tcard__body {
  position: relative;
  margin-left: 230px;
  padding: 32px 24px 32px 0;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.tcard__body h3 {
  font-size: 45.79px;
  font-weight: 300;
  line-height: 50.28px;
  color: #fff;
}
.tcard__body > p { font-size: 16px; line-height: 25px; color: rgba(255, 255, 255, 0.58); }

.tcard__btn {
  background: var(--marigold);
  color: #000;
  border: 0;
  padding: 14px 26px;
  font-size: 15px;
}
.tcard__btn:hover { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   Responsive — derived; the Figma has no artboards below 1280
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .bhero { padding: 72px 0; }
  .bhero__inner { gap: clamp(32px, 5vw, 100px); }
  .bhero__art { width: clamp(280px, 38vw, 504px); }
  .bhero__copy { flex: 1 1 380px; width: auto; }
  .bhero__title { font-size: clamp(38px, 5vw, 63.2px); line-height: 1.06; }

  .statement { padding: 96px 0 80px; }
  .statement__lead { font-size: clamp(28px, 3.6vw, 45px); line-height: 1.25; }

  .crew { padding: 104px 0; }
  .crew__title,
  .whybuilt__title,
  .backed__title,
  .expect__title,
  .fitcta__title,
  .howwork .section-title { font-size: clamp(34px, 4.2vw, 52px); line-height: 1.17; }
  .crew__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

  .whybuilt { padding: 104px 0; }
  .whybuilt__inner { gap: 48px; }
  .whybuilt__art { width: clamp(220px, 28vw, 395px); }

  .howwork { padding: 104px 0; }
  .howwork__row,
  .howwork__row--flip { gap: clamp(32px, 6vw, 91px); }
  .howwork__art { width: clamp(240px, 30vw, 380px); }

  .backed { padding: 104px 0 72px; }
  .expect { padding: 48px 0 104px; }
  .expect__inner { gap: 48px; }
  .expect__photo { flex: 0 0 auto; width: clamp(260px, 32vw, 442px); height: auto; aspect-ratio: 442 / 618; }
  .expect__row dt { flex: 0 0 200px; width: 200px; font-size: 21px; }

  .fitcta { padding: 96px 0; }
  .fitcta__art { width: clamp(200px, 24vw, 303px); }
  .fitcta__copy { flex: 1 1 320px; width: auto; }

  .touch { padding: 56px 0 104px; }
  /* image strip is 195px wide: keep a 32px gap before the text (was 5px) */
  .tcard__body { margin-left: 227px; }
  .tcard__body h3 { font-size: clamp(28px, 3.6vw, 45.79px); line-height: 1.12; }
}

@media (max-width: 900px) {
  .bhero__inner { flex-direction: column-reverse; align-items: flex-start; }
  .bhero__art { width: 100%; max-width: 504px; align-self: center; }
  .bhero__copy { flex: 1 1 auto; width: 100%; }

  .atools__inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  .whybuilt__inner,
  .expect__inner,
  .fitcta__inner { flex-direction: column; align-items: flex-start; }
  .whybuilt__art,
  .fitcta__art { align-self: center; }
  .expect__photo { align-self: center; width: 100%; max-width: 442px; }
  .whybuilt__copy,
  .expect__copy,
  .fitcta__copy { flex: 1 1 auto; width: 100%; }

  .howwork__row,
  .howwork__row--flip { flex-direction: column; align-items: flex-start; gap: 32px; }
  .howwork__art { align-self: center; }

  .backed__head { flex-direction: column; gap: 20px; }
  .backed__cols { flex-direction: column; gap: 20px; }

  .touch__cards { flex-direction: column; }
  /* Stacked, the cards' "flex: 1 1 0" meant a zero height: they collapsed
     to their border on tablet and phone. Size them by their content. */
  .tcard { flex: 0 0 auto; min-height: 320px; }
}

@media (max-width: 640px) {
  .crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .expect__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .expect__row dt { flex: 1 1 auto; width: auto; }

  /* The image strip crowds the card text at phone width */
  .tcard { flex-direction: column; min-height: 0; }
  .tcard__img { position: relative; left: auto; top: auto; width: 100%; height: 180px; }
  .tcard__body { margin-left: 0; padding: 24px; max-width: none; }
}

/* WordPress lockup: mark + wordmark positioned as on the home page. Those
   rules live in home.css, which this page doesn't load, so the mark was
   stacking above the word. */
.atools__wp .pbt__wp-mark { position: absolute; left: 0;       top: 0;      width: 21.66px; height: 21.78px; }
.atools__wp .pbt__wp-word { position: absolute; left: 24.08px; top: 5.23px; width: 83.45px; height: 10.89px; }