/* ============================================================
   IQ UP Deep - Investors page (investors.html)
   Page-specific layout only. Colors, fonts, and borders come from iqup.css.
   Every rule is scoped under .page-investors.
   ============================================================ */

/* Block 1 - Intro. invest1.png is a 1200x750 landscape photo. The template
   stretches the image column to the text column's height and cover-crops the
   photo into a tall strip, which slices through the seated man's face. From
   992px up the photo sits at the top of its column as a square, framed to keep
   both faces and the monitor; below 992px it spans the width at its own ratio. */
@media (min-width: 992px) {
  .page-investors .invest-intro .img-full { height: auto; }
  .page-investors .invest-intro .img-full img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: 17% center;
    display: block;
  }
}

/* Block 4 - Market Size. invest3-*.png are wide 600x210 banners, not pill
   thumbnails: show them whole instead of the template's 140px pill frame. */
.page-investors .invest-approach .item .img {
  height: auto;
  border-radius: 15px;
}
.page-investors .invest-approach .item .img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}
.page-investors .invest-approach .item .img:after { border-radius: 15px; }

/* Block 5 - Traction & Roadmap. investline.svg is a 1920x582 timeline with
   small labels baked in. Full container width on desktop; below 1200px it
   keeps a readable size and scrolls sideways inside its own focusable box,
   and a fade on the right edge shows there is more to scroll to. */
.page-investors .invest-pipeline .pipeline-scroll { position: relative; }
.page-investors .invest-pipeline .pipeline-graphic { width: 100%; margin: 0 auto; }
.page-investors .invest-pipeline .pipeline-graphic img {
  width: 100%;
  height: auto;
  display: block;
}

/* Block 6 - Business Model. Each step has a description under its title, so
   pin the number to the top of the row. */
.page-investors .invest-roadmap .item { align-items: flex-start; }
.page-investors .invest-roadmap .item .num { flex: 0 0 45px; margin-top: 6px; }
.page-investors .invest-roadmap .item p { max-width: 90%; }

/* Block 7 - The Investment Path. invest4.png is a finished composition, so
   show it 1:1 (the template enlarges it to 120% and shifts it left). The
   template pulls the image row up under the heading by 50px; here the right
   column starts with a lead line, which "Path" would overlap, so drop that. */
@media (min-width: 992px) {
  .page-investors .invest-moment .sec-head { margin-bottom: 30px; }
}
.page-investors .invest-moment .img img {
  width: 100%;
  margin-left: 0;
  height: auto;
  display: block;
}
.page-investors .invest-moment .numbers-crev .item h3 { white-space: nowrap; }


/* Block 9 - How to Participate. Square collage image at its natural ratio;
   balance the heading so "In." does not sit alone on the second line. */
.page-investors .invest-participate .img img {
  width: 100%;
  height: auto;
  display: block;
}
.page-investors .invest-participate .sec-head h3 { text-wrap: balance; }

/* 992-1199px: three columns are narrow, so scale the market-row titles and
   the three stat numbers down until they fit (the template's 100px numbers
   clip "$100K" and wrap the months stat here). */
@media (min-width: 992px) and (max-width: 1199px) {
  .page-investors .invest-approach .item h2 { font-size: 36px; }
  .page-investors .invest-moment .numbers-crev .item h3 { font-size: 72px; }
}

@media (max-width: 1199px) {
  .page-investors .invest-pipeline .pipeline-graphic {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  /* the extra 56px of right padding lets the last stage scroll clear of the fade */
  .page-investors .invest-pipeline .pipeline-graphic img {
    width: 1456px;
    max-width: none;
    padding-right: 56px;
  }
  .page-investors .invest-pipeline .pipeline-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--iq-bg));
  }
}

@media (max-width: 991px) {
  .page-investors .invest-roadmap .item p { max-width: none; }
}

/* The template sizes the three-line "The / Investment / Path" heading at 8vw,
   which drops below the size of ordinary section headings on phones. */
@media (max-width: 767px) {
  .page-investors .invest-moment .sec-head h2 { font-size: 13vw; }
}