/*
 * Homepage final CTA — Figma "Website" file, node 4196:1557 (desktop 1440x700)
 * and 4312:27 (mobile 393x620). Sits directly above the footer.
 *
 * One photo (the two mountain dogs, Figma node 4196:1466) behind both layouts.
 * Desktop: copy on the left, the dogs and their name tags on the right; the
 * photo is bottom-aligned so its top third is cropped away. Mobile: copy at
 * the top, the dogs fill the lower half.
 *
 * The name tags (BONNIE / CLYDE with their leader lines) are Figma SVG exports
 * with the text as paths, so they render without the Geist Mono face. Each tag
 * export carries the tag's drop shadow, so the white box sits at 15/3 inside a
 * 100x87 (or 92x87) image — the positions below are the Figma tag positions
 * less that offset. The lines are separate exports because their angle differs
 * between the two layouts.
 *
 * Units: rem, like the rest of the site (1rem = 1px at 393 and 1440, see the
 * <style> block in index.html). The copy box is a plain .container so its left
 * edge lines up with the header, hero and footer (layout.css).
 *
 * Fonts: the heading is Aeonik Medium (--font-display), as in Figma;
 * subheading and button are Inter. The button reuses header.css .button-pill
 * at the same size as the hero's (hero.css .hero-cta).
 *
 * Loaded after hero.css.
 */

.final-cta {
  --final-white: #fff;

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 700rem;
  margin: 0;
  /* Figma: 96px above the copy box, 146px below; the copy centres in between */
  padding: 96rem 0 146rem;
  overflow: hidden;
  background-color: #222;
  color: var(--final-white);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Photo + scrims ----------------------------------------------------------- */

.final-cta-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
}

/* Figma places the photo at 100% width, 137.16% height, offset −37.22%: i.e.
   width-bound and flush with the bottom edge. object-fit: cover with a bottom
   anchor is the same crop at 1440 and keeps the section covered when the
   aspect ratio changes below it. */
.final-cta-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
}

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

/* Figma desktop overlay: black .5 at 23% → rgb(34,34,34) 0 at 81% */
.final-cta-scrim-side {
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 23.26%, rgba(34, 34, 34, 0) 80.97%);
}

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

/* Tags ------------------------------------------------------------------- */

.final-cta-tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

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

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

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

.final-cta-copy {
  max-width: 845rem;
}

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

/* Figma: 18/24, -0.48px, 677px measure, 24px below the heading */
.final-cta-subheading {
  max-width: 677rem;
  margin: 24rem 0 0;
  font-size: 18rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.48rem;
  color: var(--final-white);
}

/* Call to action — Figma "button-large" in section-final/Copy (4445:153):
   213x52, 14px/64px padding, Inter Semi Bold 16/24, -0.32px. 52px tall with
   the 1.5px hairline inside, so our outside border takes 13px vertical — the
   same construction as the how-it-works button. This replaced a 501x56 email
   pill; the Typeform asks for the address itself. */
.final-cta .button-pill.final-cta-button {
  margin: 32rem 0 0;
  max-height: none;
  padding: 13rem 64rem;
  font-size: 16rem;
  line-height: 24rem;
  letter-spacing: -0.32rem;
}

/* ------------------------------------------------------------------ */
/* Desktop tags                                                        */
/* ------------------------------------------------------------------ */

/* 992–1439: the section is 1040rem x 700rem, narrower than the photo's 3:2, so
   the photo is height-bound: 700rem tall, 1049.9rem wide, centred (−4.9rem).
   Every point of the 1440 composition maps to (x, y + 260) x 0.7291 on that
   photo — the 260 is the part of the photo cropped above the section at 1440.
   Tags keep their size (they are labels), the leader lines scale with the photo
   so they still end on the dogs. */
@media screen and (min-width: 992px) {
  .final-cta-tags .final-cta-line-bonnie {
    display: block;
    left: 586.1rem;
    top: 328.1rem;
    width: 1rem;
    height: 54rem;
  }

  .final-cta-tags .final-cta-line-clyde {
    display: block;
    left: 783.9rem;
    top: 360.4rem;
    width: 18.2rem;
    height: 46.7rem;
  }

  .final-cta-tags .final-cta-tag-bonnie {
    display: block;
    left: 550.4rem;
    top: 306.9rem;
    width: 100rem;
    height: 87rem;
  }

  .final-cta-tags .final-cta-tag-clyde {
    display: block;
    left: 781.8rem;
    top: 335.1rem;
    width: 92rem;
    height: 87rem;
  }
}

/* 1440–1919: rem = vw/14.4, so the whole 1440 composition scales as one — the
   Figma coordinates apply directly. */
@media screen and (min-width: 1440px) {
  .final-cta-tags .final-cta-line-bonnie {
    left: 810.63rem;
    top: 190rem;
    height: 74rem;
  }

  .final-cta-tags .final-cta-line-clyde {
    left: 1082.06rem;
    top: 234.3rem;
    width: 25rem;
    height: 64rem;
  }

  .final-cta-tags .final-cta-tag-bonnie {
    left: 761.63rem;
    top: 161rem;
  }

  .final-cta-tags .final-cta-tag-clyde {
    left: 1079.12rem;
    top: 199.65rem;
  }
}

/* ≥ 1920: rem stops scaling (1rem = 1px) but the photo keeps growing with the
   viewport. A fixed 700px band would crop the tags off the top, so the section
   grows with the width (36.46vw = 700 at 1920) and the photo is anchored at
   85% instead of the bottom, which keeps 38–93% of its height in view — the
   dogs and their tags. Photo top = −(66.675vw − 36.458vw) x .85 = −25.684vw;
   a design point (x, y) lands at x/14.4 vw, −25.684vw + (y + 260)/14.4 vw. */
@media screen and (min-width: 1920px) {
  .final-cta {
    min-height: 36.458vw;
  }

  .final-cta-photo img {
    object-position: 50% 85%;
  }

  .final-cta-tags .final-cta-line-bonnie {
    left: 56.294vw;
    top: 5.566vw;
    width: 1px;
    height: 5.139vw;
  }

  .final-cta-tags .final-cta-line-clyde {
    left: 75.143vw;
    top: 8.642vw;
    width: 1.736vw;
    height: 4.444vw;
  }

  .final-cta-tags .final-cta-tag-bonnie {
    left: 52.891vw;
    top: 3.552vw;
  }

  .final-cta-tags .final-cta-tag-clyde {
    left: 74.939vw;
    top: 6.236vw;
  }
}

/* ------------------------------------------------------------------ */
/* Tablet (768–991): desktop composition in a narrower column          */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .final-cta-copy {
    max-width: 100%;
  }

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

@media screen and (min-width: 768px) and (max-width: 991px) {
  /* The 768rem x 700rem band is much narrower than the photo, which becomes
     height-bound and centred; pulling the anchor right keeps both dogs in the
     frame, behind the copy's right half. No tags — the copy runs across the
     dogs in this band, as in the hero. */
  .final-cta-photo img {
    object-position: 65% 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile (< 768, Figma 393x620): copy on top, dogs below              */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .final-cta {
    justify-content: flex-start;
    min-height: 620rem;
    /* Figma: 64px vertical, 24px gutters (the column is full-bleed here) */
    padding: 64rem 24rem;
  }

  /* Figma places the photo at 238.43% x 100% of the 393x620 frame, offset
     −111.65%. Expressed in rem (929.8 x 620 at −438.8) rather than % because
     the tags below are in rem and between 480 and 767px the rem scale (vw/4.8)
     makes the section 480rem wide — a %-positioned photo would drift off the
     tags. The photo reaches 491rem, so it covers the 480rem section. */
  .final-cta-photo img {
    position: absolute;
    top: 0;
    left: -438.8rem;
    width: auto;
    height: 620rem;
    object-fit: unset;
  }

  /* Figma mobile overlay: black .6 at the top → clear 40–70% → black .9 */
  .final-cta-scrim-side {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0.69%, rgba(34, 34, 34, 0) 40%, rgba(34, 34, 34, 0) 69.67%, rgba(0, 0, 0, 0.9) 100%);
    mix-blend-mode: multiply;
  }

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

  /* Figma mobile frame coordinates, less each export's shadow padding */
  .final-cta-tags .final-cta-line-bonnie-mobile {
    display: block;
    left: 102.15rem;
    top: 421.24rem;
    width: 22rem;
    height: 33rem;
  }

  .final-cta-tags .final-cta-line-clyde-mobile {
    display: block;
    left: 279.21rem;
    top: 346.28rem;
    width: 23rem;
    height: 23rem;
  }

  .final-cta-tags .final-cta-tag-bonnie {
    display: block;
    left: 18rem;
    top: 451.1rem;
    width: 100rem;
    height: 87rem;
  }

  .final-cta-tags .final-cta-tag-clyde {
    display: block;
    left: 283.5rem;
    top: 327.98rem;
    width: 92rem;
    height: 87rem;
  }

  .final-cta-heading {
    font-size: 40rem;
    line-height: 44rem;
  }

  /* Figma: 18/24, 16px below the heading, full width */
  .final-cta-subheading {
    max-width: none;
    margin-top: 16rem;
  }

  /* Figma mobile: 345x48 (full width), 12px/64px padding */
  .final-cta .button-pill.final-cta-button {
    display: flex;
    width: 100%;
    margin-top: 24rem;
    padding: 11rem 64rem;
  }
}