/* Inline styles extracted from formt.njk */
#s-formt .gp-section__inner {
  --gp-section-pt: 0px;
  --gp-section-pb: 80px;
}

#s-formt .gp-formt-maxwidth-container {
  --gp-max-width: 100%;
}

#s-formt .gp-overlay-content {
  --gp-max-width: 535px;
}

#s-formt .gp-overlay-content .gp-spacer {
  --gp-height: 30px;
}

#s-formt .gp-overlay-content > .gp-max-width-container {
  --gp-max-width: 100%;
}

#s-formt .gp-image-box {
  --gp-si-width: min(505px, 56.1vh);
  --gp-si-height: min(507px, 56.3vh);
  justify-content: flex-end;
}

/* Desktop: the screendesign lifts the photo above the copy column's flow
   position and lets it stop 46px short of the section bottom. */
@media (min-width: 1000px) {
  #s-formt .gp-section__inner {
    --gp-section-pb: 46px;
  }
}

#s-formt .gp-three-points-content {
  --gp-max-width: 55%;
}

/* Section-specific styles extracted from style.css */
.gp-section-formt-main .gp-section-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--gp-brand-color-1);
  z-index: 0;
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-section-bg-overlay {
    height: 100%;
  }
}

.gp-section-formt-main .gp-overlay-content {
  position: absolute;
  z-index: 2;
  left: 0;
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-overlay-content {
    position: relative;
    left: 0;
    width: 100%;
    max-width: 70vw;
    margin: 0 auto;
    margin-top: -20px;
    margin-bottom: 12vh;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-formt-main .gp-overlay-content {
    max-width: 370px;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-overlay-content .gp-heading {
    font-size: 3.2vmax;
  }
}

/* Narrow tall phones */
@media (max-width: 360px) and (min-height: 780px) {
  .gp-section-formt-main .gp-overlay-content .gp-heading {
    font-size: 2.8vmax;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-formt-maxwidth-container {
    --gp-max-width: 100% !important;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-formt-flex-container {
    flex-direction: column;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-formt-flex-c-item {
    order: 2;
  }
}

.gp-section-formt-main .gp-formt-flex-i-item {
  margin-bottom: 0%;
  /* -13% lands the photo at the screendesign's y (347px into the section at
     the 1440x900 reference). Tablet keeps the original -8% below. */
  margin-top: -13%;
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-formt-main .gp-formt-flex-i-item {
    margin-top: -8%;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-formt-flex-i-item {
    order: 1;
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-image-box {
    --gp-si-width: 100% !important;
    --gp-si-height: 300px !important;
    margin-left: calc(var(--gp-container-side-gutter) * -1);
    margin-right: calc(var(--gp-container-side-gutter) * -1);
    margin-top: -20px;
  }
}

.gp-section-formt-main .gp-image-box > img {
  -o-object-position: center 20%;
     object-position: center 20%;
}

.gp-section-formt-main .gp-section__inner .gp-three-points-content {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 300;
}

@media (min-width: 1000px) {
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    --gp-three-points-third-item-margin-top: 150px;
    position: absolute;
    top: calc(0% + var(--gp-three-points-third-item-margin-top) - 13px);
    z-index: 2;
    right: 16%;
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .gp-section-formt-main .gp-section__inner .gp-three-points-content > div {
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
  }
  .gp-section-formt-main .gp-section__inner .gp-three-points-content > div > div:last-child {
    margin-top: var(--gp-three-points-third-item-margin-top);
  }
}

@media (max-width: 999px) {
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    --gp-max-width: 100% !important;
    z-index: 1;
    position: absolute;
    font-size: 3vmax;
    left: 0;
    padding-inline: var(--gp-container-side-gutter);
    bottom: 40px;
  }
}

/* Phones up to 440px */
@media (max-width: 440px) {
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    font-size: 2.5vmax;
  }
}

/* Narrow tall phones */
@media (max-width: 360px) and (min-height: 780px) {
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    font-size: 2.3vmax;
  }
}

/* ===== Mobile layout: image starts just under FORMT with a small overlap =====
   Design intent (mobile-design-screenshots/formt.png): image sits directly
   beneath the FORMT text with only a few px of overlap.

   ─── TUNE THIS to dial the overlap ──────────────────────────────────────
   --gp-formt-image-overlap controls how far the image top sits ABOVE the
   visible bottom of FORMT (i.e. how much they overlap vertically).
     positive value (e.g. 12px) → more overlap (image creeps further up)
     0                          → image top exactly at FORMT's bottom
     negative value             → gap (image starts below FORMT bottom)
   Scoped to mobile only (max-width: 999px); desktop is untouched.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .gp-section.gp-section-formt-main {
    --gp-formt-image-overlap: -4px;    /* ← tweak me */
    overflow: hidden;
  }
  .gp-section.gp-section-formt-main .gp-section__inner {
    justify-content: flex-start;
  }
  .gp-section.gp-section-formt-main .gp-formt-flex-i-item {
    margin-top: 0;
  }
  .gp-section.gp-section-formt-main .gp-image-box {
    margin-top: 0;
  }
  /* Padding-top places the image top at FORMT_visible_bottom - overlap.
     FORMT_visible_bottom derives from --gp-branding-font-size so it scales
     with the floating G's actual rendered size on every viewport. */
  #s-formt .gp-section__inner {
    --gp-section-pt: calc(var(--gp-branding-font-size) * 1.83 - 4.5rem - var(--gp-formt-image-overlap)) !important;
  }
}

/* ===== Mobile: fit the real copy inside 100svh =====
   The placeholder text this replaced was three lines; the shipped paragraph
   plus the three bullets pushed the list below the fold. Tighten the photo
   and type rather than letting the section scroll. */
@media (max-width: 767px) {
  .gp-section-formt-main .gp-overlay-content {
    max-width: 100%;
    margin-bottom: 0;
  }
  .gp-section-formt-main .gp-image-box {
    --gp-si-height: clamp(90px, calc(100svh - 610px), 200px) !important;
  }
  .gp-section-formt-main .gp-overlay-content .gp-heading {
    font-size: 20px;
  }
  .gp-section-formt-main .gp-overlay-content .gp-paragraph {
    font-size: 13px;
    line-height: 1.45;
  }
  #s-formt .gp-overlay-content .gp-spacer {
    --gp-height: 14px;
  }
  #s-formt .gp-bullet-list {
    font-size: 12.5px;
    margin-top: 16px;
  }
  #s-formt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 7px;
  }
}

/* Mobile: the tagline row sat in flow after the bullets and was pushed past
   the fold on narrower phones, where the copy wraps to more lines. Pin it to
   the section foot the way the hero's row already is. */
@media (max-width: 767px) {
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    position: absolute;
    left: 0;
    right: 0;
    /* Anchored from the top, not the bottom: .gp-section__inner is a flex item
       with min-height:auto, so it grows taller than the 100svh section and a
       `bottom` offset would land below the fold. */
    top: calc(100svh - 58px);
    bottom: auto;
    padding-inline: var(--gp-container-side-gutter);
    font-size: 16px;
  }
}

/* Short phones (SE-class, <=700px tall): the wordmark alone eats a third of
   the viewport, so pull the photo and type down another step. */
@media (max-width: 767px) and (max-height: 700px) {
  .gp-section-formt-main .gp-image-box {
    --gp-si-height: clamp(80px, calc(100svh - 478px), 118px) !important;
  }
  .gp-section-formt-main .gp-overlay-content .gp-heading {
    font-size: 18px;
  }
  .gp-section-formt-main .gp-overlay-content .gp-paragraph {
    font-size: 12px;
    line-height: 1.4;
  }
  #s-formt .gp-bullet-list {
    font-size: 12px;
    margin-top: 10px;
  }
  #s-formt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 4px;
  }
  #s-formt .gp-overlay-content .gp-spacer {
    --gp-height: 8px;
  }
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    font-size: 14px;
  }
}

/* ===== Tablet (768-999px): same problem as phones =====
   The photo plus the shipped copy ran the bullets past the fold. */
@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-formt-main .gp-image-box {
    --gp-si-height: clamp(100px, calc(100svh - 610px), 215px) !important;
  }
  .gp-section-formt-main .gp-overlay-content {
    max-width: 470px;
  }
  .gp-section-formt-main .gp-overlay-content .gp-heading {
    font-size: 26px;
  }
  .gp-section-formt-main .gp-overlay-content .gp-paragraph {
    font-size: 15px;
    line-height: 1.45;
  }
  #s-formt .gp-overlay-content .gp-spacer {
    --gp-height: 18px;
  }
  #s-formt .gp-bullet-list {
    font-size: 14px;
    margin-top: 18px;
  }
  #s-formt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 8px;
  }
  .gp-section-formt-main .gp-section__inner .gp-three-points-content {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100svh - 70px);
    bottom: auto;
    padding-inline: var(--gp-container-side-gutter);
    font-size: 20px;
  }
}

/* Short desktops (<=820px tall, e.g. 1366x768): the bullets sat a few pixels
   past the fold. Above this height the screendesign spacing is untouched. */
@media (min-width: 1000px) and (max-height: 820px) {
  #s-formt .gp-bullet-list {
    margin-top: 20px;
  }
  #s-formt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 7px;
  }
  #s-formt .gp-overlay-content .gp-spacer {
    --gp-height: 20px;
  }
}