/*
 * About closing band — Figma "Website" file, "Pointer - About" 5121:9659,
 * node "section-final" 5121:9831 (1440x759). Sits directly above the footer.
 * Shared by /about and /vets/about. < 768 is "Pointer - About mobile"
 * 5121:10903; 768–991 has no frame and is ours.
 *
 * Same construction as the homepage final CTA (final-cta.css): a photo (the
 * two dogs by the lake) with a left scrim and Figma's bottom scrim, the copy
 * on the left, name tags on the dogs. Its own file because the photo crop,
 * copy blocks and every tag coordinate differ.
 *
 * The AMY / TINA tags are Figma SVG exports (5121:9845, 5121:9849) with the
 * Geist Mono text as paths and the leader line included. Each export's
 * origin is its position in the frame: AMY (818.95, 437), TINA (1038, 252).
 * Off the 1440 composition, each tag is placed so its line's foot (AMY
 * 38.25/82.4, TINA 1.37/77.96 into the export) lands on the same point of
 * the photo: AMY 59.53% / 71.34%, TINA 72.18% / 51.6% of its width/height.
 *
 * Photo geometry. Figma places the image at 100% x 126.45%, offset -21.78%:
 * a 1440x959.8 box at (0, -165.3). The box and the tags are in rem, so the
 * composition is Figma's wherever the rem scale holds.
 *   992–1439 (no frame): the same box moved 150 left, which puts both dogs
 *     right of the copy in the 1040 band.
 *   ≥ 1920: the photo goes to vw (top -25vw) and the section grows with the
 *     width (39.53vw = 759 at 1920), tags in vw from their line feet.
 *   768–991 (no frame): copy on top, a 760 photo stage along the bottom
 *     with the dogs centred and the desktop tags kept full size.
 *   < 768 (Figma 5121:10903): the copy, then a 390 photo stage under it
 *     (no overlap), photo 740 wide at -300. The mobile frame redraws the
 *     leader lines (AMY 36.2 at -103.6deg, TINA 58.8 at -50.6deg), so it has
 *     its own exports (5199:417, 5199:421): AMY 48x60 placed at (105.58, 197)
 *     of the 393 stage, line foot (35.27, 59.49) into it, so (140.85, 256.49);
 *     TINA 66x73 at (225.63, 90), foot (1.37, 71.96), so (227, 161.96). Each
 *     export starts at its tag less its shadow room (AMY -1.05/-1, TINA 0/-1).
 *     The desktop tag-anchor percentages above don't apply: the mobile photo
 *     box is stretched (see the < 768 block).
 *
 * Fonts: headline and lead Aeonik Medium (--font-display), the rest Inter.
 * The button is header.css .button-pill at the final CTA's size.
 */

.about-final {
  --about-final-text: #fff;
  --about-final-ground: #111;

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 759rem;
  padding: 116rem 0;
  overflow: hidden;
  background-color: var(--about-final-ground);
  color: var(--about-final-text);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Photo, scrims, tags ------------------------------------------------------ */

/* The photo and the tags share this box, so the tag coordinates are the
   photo's. ≥ 992 it is the whole section. */
.about-final-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-final-stage.about-final-photo {
  z-index: 0;
  display: block;
  overflow: hidden;
}

.about-final-photo img {
  position: absolute;
  display: block;
  left: 0;
  top: -165.3rem;
  width: 1440rem;
  height: 959.8rem;
  max-width: none;
  object-fit: cover;
}

.about-final-scrim {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Figma: rgb(34,34,34) .5 at 5% → 0 at 57.5%, left to right */
.about-final-scrim-side {
  inset: 0;
  background: linear-gradient(to right, rgba(34, 34, 34, 0.5) 5.03%, rgba(34, 34, 34, 0) 57.5%);
}

/* Figma "Scrim-bottom" 5121:9832: 131.28, rgb(34,34,34) 0 → 1, multiply */
.about-final-scrim-bottom {
  left: 0;
  right: 0;
  bottom: -1rem;
  height: 131.28rem;
  background: linear-gradient(to bottom, rgba(34, 34, 34, 0), #222);
  mix-blend-mode: multiply;
}

.about-final-stage.about-final-tags {
  z-index: 2;
}

.about-final-tags img {
  position: absolute;
  display: block;
  max-width: none;
}

.about-final-tag-amy {
  left: 818.95rem;
  top: 437rem;
  width: 56rem;
  height: 83rem;
}

.about-final-tag-tina {
  left: 1038rem;
  top: 252rem;
  width: 70rem;
  height: 79rem;
}

/* Copy -------------------------------------------------------------------- */

.about-final .container.about-final-content {
  position: relative;
  z-index: 3;
}

/* Figma "Headlline" 5121:9833: 622 wide with 40 right padding, 32 between
   the blocks */
.about-final-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32rem;
  max-width: 582rem;
}

/* Figma: Aeonik Medium 64/64, -1.6px */
.about-final-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64rem;
  line-height: 64rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: var(--about-final-text);
}

/* Figma "Heading/Regular/M": Aeonik Medium 24/28, white .8 */
.about-final-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24rem;
  line-height: 28rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

/* Figma "Body/M": Inter 16/24, -0.32px, white .9 */
.about-final-text {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: rgba(255, 255, 255, 0.9);
}

/* Figma "button-large" 5121:9839: 52 tall, 14/64 padding with the hairline
   inside, so 13 vertical with our outside border (as .final-cta-button) */
.about-final .button-pill.about-final-cta {
  margin: 0;
  max-height: none;
  padding: 13rem 64rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

/* ------------------------------------------------------------------ */
/* 992–1439 (no frame): photo 150 left, dogs clear of the copy          */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 992px) and (max-width: 1439px) {
  .about-final-copy {
    max-width: 520rem;
  }

  .about-final-heading {
    font-size: 56rem;
    line-height: 58rem;
  }

  .about-final-photo img {
    left: -150rem;
  }

  .about-final-tag-amy {
    left: 668.95rem;
  }

  .about-final-tag-tina {
    left: 888rem;
  }
}

/* ------------------------------------------------------------------ */
/* ≥ 1920: the photo scales with the viewport, the section with it      */
/* ------------------------------------------------------------------ */

@media screen and (min-width: 1920px) {
  .about-final {
    min-height: 39.53vw;
  }

  /* 100vw x 66.65vw (the photo's ratio), top -25vw keeps both tags and the
     dogs' feet in the band */
  .about-final-photo img {
    top: -25vw;
    width: 100vw;
    height: 66.65vw;
  }

  /* line feet: AMY (59.53vw, 22.55vw), TINA (72.18vw, 9.4vw) */
  .about-final-tag-amy {
    left: calc(59.53vw - 38.25px);
    top: calc(22.55vw - 82.4px);
  }

  .about-final-tag-tina {
    left: calc(72.18vw - 1.37px);
    top: calc(9.4vw - 77.96px);
  }
}

/* ------------------------------------------------------------------ */
/* < 992 (no frame): copy on top, photo stage along the bottom          */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .about-final {
    justify-content: flex-start;
    min-height: 0;
  }

  .about-final-heading {
    font-size: 56rem;
    line-height: 58rem;
  }

  .about-final-stage {
    inset: auto 0 0 0;
  }

  /* The photo's dark top fades into the ground under the copy */
  .about-final-scrim-side {
    inset: auto 0 0 0;
    background: linear-gradient(to bottom, var(--about-final-ground), rgba(17, 17, 17, 0) 40%);
  }
}

/* 768–991: a 768x760 stage, photo 1140.3 wide at -368 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-final {
    padding: 64rem 0 480rem;
  }

  .about-final-copy {
    max-width: 600rem;
  }

  .about-final-stage,
  .about-final-scrim-side {
    height: 760rem;
  }

  .about-final-photo img {
    left: -368rem;
    top: 0;
    width: 1140.3rem;
    height: 760rem;
  }

  .about-final-tag-amy {
    left: 272.55rem;
    top: 459.8rem;
  }

  .about-final-tag-tina {
    left: 453.73rem;
    top: 314.2rem;
  }
}

/* < 768: Figma "From reactive to proactive" 5121:10903 (393x958): the copy
   ("Mission invitation" 5121:10904, 64/24/24), then a 390 tall photo stage
   ("Dogs by the lake" 5121:10914). Every stage offset is from its centre so
   480–767 (480rem) shows the 393 crop. */
@media screen and (max-width: 767px) {
  .about-final {
    padding: 64rem 24rem 414rem;
    background: linear-gradient(to bottom, #1b1b1b, #000);
  }

  .about-final-stage,
  .about-final-scrim-side {
    height: 390rem;
  }

  /* Figma's box: 740 x 469.01 at (-300, -79.01). Figma stretches the photo
     to it (1.578:1, the photo 1.501:1), so fill, not cover. */
  .about-final-photo img {
    left: calc(50% - 496.5rem);
    top: -79.01rem;
    width: 740rem;
    height: 469.01rem;
    object-fit: fill;
  }

  /* "Photograph scrim" 5121:10916: black at both ends, clear 22–80% */
  .about-final-scrim-side {
    background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 80%, #000);
  }

  .about-final-scrim-bottom {
    display: none;
  }

  /* The mobile exports 5199:417 / 5199:421 (their own leader lines; see
     the header comment for the anchors) */
  .about-final-tag-amy {
    left: calc(50% - 90.92rem);
    top: 197rem;
    width: 48rem;
    height: 60rem;
  }

  .about-final-tag-tina {
    left: calc(50% + 29.13rem);
    top: 90rem;
    width: 66rem;
    height: 73rem;
  }

  .about-final-copy {
    gap: 24rem;
    max-width: none;
  }

  /* Figma: Aeonik Medium 36/1.1 */
  .about-final-heading {
    font-size: 36rem;
    line-height: 1.1;
    letter-spacing: 0;
  }

  /* Figma: Aeonik Medium 20/1.2, #ccc */
  .about-final-lead {
    font-size: 20rem;
    line-height: 1.2;
    color: #ccc;
  }

  /* Figma: Inter 16/24, -0.32px, #ebebeb */
  .about-final-text {
    color: #ebebeb;
  }

  /* Figma "button-large" 5121:10908: full width, 12/48 inside a 1.5
     black .1 hairline (51 tall), #ff5900 */
  .about-final .button-pill.about-final-cta {
    display: flex;
    width: 100%;
    padding: 12rem 48rem;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background-color: #ff5900;
  }
}