/* The home page hero on a phone (18 October - the owner's picks: the tall moving cut, and What we do on the hero).
   At 900 px and under the hero plays his tall picture moving: the tall loop, muted, looping, inline, in a frame of its own
   shape (1170 x 2414: 390 x 805 at a true 390). The phone's loop is chosen in the markup (a source for 900 px and under ahead
   of the wide one), so a phone never asks for the wide loop. Until the loop plays, the frame shows the still - the phone
   poster, the loop's own first frame - and the loop stays out of sight; once it plays (the loop's script marks the frame
   hp-on), the still steps back. Under reduced motion the still stands and no video shows. The old painted still, its
   closed-up band (a3-hero.css, part 2) and its two tap targets are off the phone path. The page's own real type sits on the
   picture's black foot, from where the scene ends (row 1684 of 2414; the foot is 730/1170 of the frame's width): the line,
   the two buttons, then What we do - six buttons, two to a row, white on black in the site's outline - and the foot line.
   The section grows to hold them. On a computer nothing here shows: the wide loop carries its own words. */
/* 19 October, the owner's words "too big now on phone": on a phone the picture is now a shorter box, full width, the moving
   picture cropped to fill it (never shrunk), the title above it and the type under it on the page's own black, so the title,
   the picture, the line and both buttons are on the first screen. The notes dated 19 October below say what changed. */
.hero-platform .hp-type { display: none; }

@media (max-width: 900px) {
  /* the frame: the loop and the still in one cell, the still on top until the loop plays */
  /* 19 October: the frame runs the full width of the screen, so the picture is never a smaller picture floating in black. */
  .a3-phone-page .hero-platform .hp-frame { display: grid; width: 100%; }
  /* 19 October, the owner's words "the animations are different": the frame now holds the box's height itself and hides what
     runs past it, so his own film can be drawn taller than the box with its black rows and its painted line out of sight. */
  .a3-phone-page .hero-platform .hp-frame {
    height: clamp(380px, 56vh, 520px);
    height: clamp(380px, 56svh, 520px);
    overflow: hidden;
  }
  .a3-phone-page .hero-platform .hp-frame > .hp-loop,
  .a3-phone-page .hero-platform .hp-frame > .hp-still { grid-area: 1 / 1; }
  /* 19 October: the box is cut shorter - 56 percent of the screen's height, never under 380 px or over 520 px (473 px on a
     390 x 844 phone) - and the moving picture fills it, cropped, never shrunk. The crop keeps the scene's heart: at 50% 20%
     the whole scene shows on a 390 x 844 phone (the tops of the Websites and Marketing panels, the M&H cube near the middle,
     the robot and the clients panel) and the loop's black rows over the scene and its black foot under it are cropped away. */
  /* 19 October, the owner's words "the animations are different": a phone plays his own film again (1760 x 1008, the one a
     computer plays), cropped to the box by cover, never shrunk. It is drawn so the film's rows 66 to 874 fill the box - its 66
     black rows over the scene sit above the frame's top, and its own small painted line of words under the scene (rows 897 to
     936) sits below the frame's bottom, both out of sight - and placed so the film's column 743 of 1760 sits at the screen's
     left edge on every phone (where the pick of 68% puts it on a 390 x 844 phone): the M&H cube in the middle, the tops of the
     Websites and Marketing panels and the robot in the box, and the film's own painted title and words on its left never in
     view, however short the screen. On a wider screen the film's right edge is held to the box's right edge instead. */
  /* 19 October, late, the owner's words "the hero doesn't fit": no zoom. His film fills the box at cover alone - every one of
     its rows, about 831 of its 1760 columns on a 390 x 844 phone - and is placed with the scene's middle (column 1156; the
     panels run from the Websites panel's left edge at 743 to the Lead Tracking panel's right edge at 1569) at the box's middle,
     so every panel and the funnel are whole in the box; the left edge never comes before column 640 (the film's own painted
     words end about 632) and the right edge stays inside the film. */
  .a3-phone-page .hero-platform .hp-loop {
    display: block;
    width: 100%;
    height: clamp(380px, 56vh, 520px);
    height: clamp(380px, 56svh, 520px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: max(100%, min(calc(clamp(380px, 56vh, 520px) * -640 / 1008), calc(50% - clamp(380px, 56vh, 520px) * 276 / 1008))) 50%;
    object-position: max(100%, min(calc(clamp(380px, 56svh, 520px) * -640 / 1008), calc(50% - clamp(380px, 56svh, 520px) * 276 / 1008))) 50%;
    opacity: 0;
  }
  .a3-phone-page .hero-platform .hp-frame.hp-on > .hp-loop { opacity: 1; }
  .a3-phone-page .hero-platform .hp-still {
    display: block;
    overflow: visible;
    aspect-ratio: auto;
  }
  /* 19 October, evening: the still is now the film's own poster, drawn and placed exactly as the film is (rows 66 to 874 in
     the box, column 743 at the left edge), so nothing moves when the film starts and a visitor who asks for less motion sees the
     same picture. */
  /* 19 October, late: no zoom, so the still sits at the box's top exactly as the film does. */
  .a3-phone-page .hero-platform .hp-still {
    margin-top: 0;
  }
  /* 19 October: the still - the loop's own first frame - fills the same box with the same crop, so nothing moves when the
     loop starts, and a visitor who asks for less motion sees the same picture standing. */
  .a3-phone-page .hero-platform .hp-still img {
    width: 100%;
    height: clamp(380px, 56vh, 520px);
    height: clamp(380px, 56svh, 520px);
    object-fit: cover;
    object-position: max(100%, min(calc(clamp(380px, 56vh, 520px) * -640 / 1008), calc(50% - clamp(380px, 56vh, 520px) * 276 / 1008))) 50%;
    object-position: max(100%, min(calc(clamp(380px, 56svh, 520px) * -640 / 1008), calc(50% - clamp(380px, 56svh, 520px) * 276 / 1008))) 50%;
  }
  .a3-phone-page .hero-platform .hp-frame.hp-on > .hp-still { visibility: hidden; }
  /* 19 October, late: a black fade over the box's bottom 16 percent hides the film's own small painted line of words under the
     scene, instead of a zoom: clear where the scene ends (84 percent of the box, the film's row 851), black from 30 percent of
     the fade down (row 895), before the line's first row (897). The still has the same fade; it lies over both. */
  .a3-phone-page .hero-platform .hp-frame::after {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 16%;
    aspect-ratio: auto;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 30%, #000 100%);
    pointer-events: none;
  }
  .a3-phone-page .hero-platform .hp-hot { display: none; }

  /* the real type on the black foot */
  /* 19 October: the type now sits directly under the picture's box on the page's own black - the box crops the black foot
     away, so the old pull up onto the foot is gone: the line, both buttons, then What we do under them. */
  .a3-phone-page .hero-platform .hp-type {
    display: block;
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 6px 16px 30px;
    box-sizing: border-box;
    text-align: center;
  }
  .a3-phone-page .hero-platform .hp-type__line {
    max-width: 32em;
    margin: 0 auto 12px;
    color: var(--gray-1, #d7d6d1);
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .a3-phone-page .hero-platform .hp-type__go {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 26px;
  }
  .a3-phone-page .hero-platform .hp-type__go .button {
    min-width: 0;
    min-height: 46px;
    padding: 6px 10px;
    box-sizing: border-box;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
  }

  /* What we do: the strip's six names as buttons on the hero; the white boxes of 12 October (a3-phone.css, PHONE LIST 2) off */
  .a3-phone-page .hero-platform .hp-type .hp-tools {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__head {
    margin: 0 0 12px;
    padding-left: 0.34em;
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__list li {
    display: flex;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    letter-spacing: normal;
    text-transform: none;
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__list a.button {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 8px 10px;
    box-sizing: border-box;
    color: var(--paper, #f1f0eb);
    background: transparent;
    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: center;
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__list a.button:hover,
  .a3-phone-page .hero-platform .hp-type .hp-tools__list a.button:focus-visible {
    color: var(--black, #000);
    background: var(--paper, #f1f0eb);
  }
  .a3-phone-page .hero-platform .hp-type .hp-tools__foot { padding-left: 0.2em; }
}

/* reduced motion on a phone: the still stands, no video shows */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .a3-phone-page .hero-platform .hp-loop { display: none; }
}