/* services.small.css — 10 / Services below 900px
 *
 * TWO BANDS: the designed mobile layout first, then the undesigned tablet
 * fallback at the end of the file. The tablet block is fenced with
 * `min-width: 768px`, so it cannot reach into the mobile block and the order
 * between them carries no meaning.
 *
 * From the Customer acquisition services design mobile handoff ("11a"). Unlike 08
 * and 09 this is NOT a second implementation: the handoff says to implement one
 * component with two layout branches and share the motion code, and that is what
 * happens — services.js runs the same per-frame math on both, with mobile
 * constants. Only the layout and the type change here.
 *
 * WHAT CHANGES
 *   · the card is BOTTOM-anchored (desktop puts it at 35.5vh) and stacks in one
 *     column: meta row, title, tagline, paragraph
 *   · the intro is left-aligned and gains a scroll cue
 *   · the media wrapper goes back to `cover`; see the note on .panel__pic below
 *   · a single vertical veil, darker at the bottom, because the card now sits
 *     over the bottom of the frame
 *
 * TRACK: 100vh + 5 x STEP at 700px = 3500px. STEP in services.js reads the same
 * breakpoint and the two must stay in step.
 */

@media (max-width: 767.98px) {

  .svc-track { height: calc(100vh + 3500px); }


  /* --- panel 0 · intro ---------------------------------------------------- */

  .intro {
    align-items: flex-start;
    text-align: left;
    gap: 24px;
    padding: 0 26px;
  }
  .intro__eyebrow { font-size: 10px; letter-spacing: .32em; }
  .intro__eyebrow i { width: 6px; height: 6px; box-shadow: 0 0 12px 2px rgba(var(--red-accent-rgb), .7); }
  .intro__h2 {
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: -.03em;
    max-width: none;
    text-wrap: initial;   /* the copy carries its own five line breaks */
  }
  .intro__p {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: none;
    padding-top: 16px;
  }
  .intro__cue {
    display: block;
    font-family: var(--hud); font-weight: 400;
    font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase;
    /* The handoff notes rgba(244,242,237,.4) is below AA and suggests .55; the
       cue is decorative and duplicated by the arrow, but there is no reason to
       ship the dimmer value. */
    color: rgba(244, 242, 237, .55);
  }
  .panel__glow {
    background: radial-gradient(320px 300px at 50% 44%, rgba(var(--red-accent-rgb), .12), transparent 70%);
  }


  /* --- the growing media window ------------------------------------------- */

  /* COVER, not the desktop's contain. The desktop stage is landscape and the
     clips are 16:9, so contain shows each one whole; a 390x844 stage is portrait
     and contain would letterbox a 16:9 clip into a 219px band inside an 844px
     box — and the strip grows from the BOTTOM, so it would enter as a bar of
     flat #0e0f12 rather than as picture. */
  .panel__pic { object-fit: cover; }

  /* One vertical veil, darker at the bottom, because the card is bottom-anchored
     here and sits over the frame. The desktop build deliberately runs its media
     ungraded — that decision was about a grade covering the WHOLE frame; this is
     legibility under the card, and it is why the handoff specifies it only for
     the mobile branch. */
  .panel__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(7, 7, 10, .5) 0%, rgba(7, 7, 10, .15) 34%, rgba(7, 7, 10, .8) 100%);
    pointer-events: none;
  }
  /* Above the veil: ::after is generated as the last child and would otherwise
     paint over the red wash. */
  .panel__tint {
    z-index: 1;
    background: radial-gradient(320px 300px at 45% 24%, rgba(var(--red-accent-rgb), .12), transparent 66%);
  }

  /* Panel 03's still is already dark, so it takes a lighter veil and a weaker
     wash. Panel 0 is the intro, so the third service panel is :nth-child(4). */
  .panel:nth-child(4) .panel__media::after {
    background: linear-gradient(180deg,
      rgba(7, 7, 10, .45) 0%, rgba(7, 7, 10, .1) 34%, rgba(7, 7, 10, .55) 100%);
  }
  .panel:nth-child(4) .panel__tint {
    background: radial-gradient(320px 300px at 45% 24%, rgba(var(--red-accent-rgb), .10), transparent 66%);
  }
  .panel:nth-child(4) .panel__pic { object-position: 50% 0%; }


  /* --- the description card ----------------------------------------------- */

  .card {
    top: auto;
    /* 22px above the availability banner, not 22px above the viewport floor.
       The banner is fixed over everything and this handoff did not know it
       exists — the same correction 08/09 already make with --banner-h. */
    bottom: calc(22px + var(--banner-h));
    left: 16px;
    right: 16px;
    /* display: contents on the two wrappers lets the four pieces be placed by
       the card's own grid: the number and the kicker share the meta row, and the
       title, tagline and paragraph stack under it. On desktop they are three
       columns and the wrappers do real work. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "num   kicker"
      "title title"
      "tag   tag"
      "body  body";
    gap: 14px;
    padding: 22px 22px 24px;
    box-shadow:
      0 2px 4px rgba(0, 0, 0, .35),
      0 20px 40px -12px rgba(0, 0, 0, .7),
      0 48px 90px -30px rgba(0, 0, 0, .85);
  }
  .card__meta, .card__head { display: contents; }

  .card__num    { grid-area: num; font-size: 11px; letter-spacing: .16em; }
  .card__kicker { grid-area: kicker; justify-self: end; font-size: 9.5px; letter-spacing: .2em; }

  .card__title,
  .card__title--lg {
    grid-area: title;
    font-size: 32px;
    line-height: .96;
    letter-spacing: -.025em;
    text-align: left;
  }

  /* The tagline is one line on mobile, and it carries the rule the desktop card
     puts between its columns. */
  .card__tag {
    grid-area: tag;
    font-size: 9.5px;
    letter-spacing: .12em;
    line-height: 1.6;
    border-top: 1px solid rgba(14, 18, 22, .14);
    padding-top: 12px;
  }

  /* The other half of the pair in services.css: below 768px the narrow
     paragraph shows, the wide one goes, and every <br class="wide-only"> goes
     with it — which is what puts each tagline on one line and takes a line off
     the longer titles. */
  .wide-only   { display: none; }
  .narrow-only { display: block; }

  .card__body {
    grid-area: body;
    align-self: start;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.65;
    padding-left: 16px;
  }


  /* --- contents card: the three values -------------------------------------
     Built to the design file, `Net-Face Mobile.dc.html` panel 0, not to the
     README — the README documents the caps but not the row, and the row is the
     part that was wrong.

     The card had NO mobile rules at all, so it was rendering the desktop
     composition: the value name on its own line beneath the index, left
     aligned, sentence case. The design puts the index and the name on ONE row,
     `justify-content: space-between`, with the name pushed right and set in
     caps.

     THE ROW IS MADE WITH GRID AREAS BECAUSE THE MARKUP CANNOT GIVE IT. main.js
     builds .vgroup__h as a SIBLING of .vgroup__head, not a child, so there is
     no flex row to hand a space-between to. Areas put the two back on one line
     without touching the builder.

     The service count stays and rides with the index on the left. It is not in
     the design file, but the copy is correct as it stands and removing it would
     be a text change rather than a layout one. */

  .intro__groups {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 0;
    padding-top: 22px;
    border-top: 1px solid var(--hair-on-dark-2);
  }

  .vgroup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "head  name"
      "gloss gloss"
      "list  list";
    align-items: baseline;
    column-gap: 14px;
    row-gap: 12px;
  }
  .vgroup__head { grid-area: head; }
  .vgroup__h {
    grid-area: name;
    font-size: 26px; line-height: 1;
    text-align: right;
    text-transform: uppercase;
  }
  .vgroup__p {
    grid-area: gloss;
    max-width: none;
    font-size: 12.5px;
  }

  /* ONE rule above the whole list, not one per row. The design draws a single
     hairline between the gloss and the service items; desktop's per-item border
     reads as a table at this width. */
  .vgroup__list {
    grid-area: list;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--hair-on-dark);
  }
  .vitem {
    padding-top: 0;
    border-top: 0;
  }
  .vitem__n { line-height: 1.4; letter-spacing: .12em; }
  .vitem__t { font-size: 12.5px; }


  /* --- fact strip ----------------------------------------------------------
     Desktop lays the three or four cells out as one flex row, which is right
     across a 1180px card and unusable across a 390px one: each cell comes out
     about 90px wide. Two columns instead.

     THE SUB-LINE IS DROPPED HERE — label and headline only, as the mobile
     handoff draws it and as Zsolt confirmed on 2026-08-14 against the plan.
     It is the third line on desktop (`Your prospects' real constraints,
     named`); at this width it doubles the height of every cell and turns a
     scannable strip into a wall. The strip is a glance, not a read — the card's
     own paragraph above it is where the explaining happens.

     display:none, not visually-hidden: this is an editorial cut, so it should
     leave the accessibility tree too rather than being read out to a screen
     reader that cannot see the layout reason it went. */

  .card__facts { display: grid; grid-template-columns: 1fr 1fr; }

  .fact__s { display: none; }

  .fact { padding: 12px 16px 13px; }

  /* An odd cell opens a row, so it drops the column divider and the left
     inset — which holds for a three-cell service too, where cell 3 opens the
     second row on its own. Even cells close a row against the card edge. */
  .fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .fact:nth-child(even) { padding-right: 0; }

  /* A rule between ROWS as well as columns — from the third cell on, since
     those are the ones that wrap. */
  .fact:nth-child(n + 3) { border-top: 1px solid var(--hair-2); }


  /* --- reduced motion -----------------------------------------------------
     The stacked fallback above already handles this; it only needs the card
     released from the grid areas, which are meaningless once every panel is an
     ordinary block. */
  @media (prefers-reduced-motion: reduce) {
    .card {
      position: relative;
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "num" "kicker" "title" "tag" "body";
      margin: -8vh 16px 8vh;
      bottom: auto;
    }
    .card__kicker { justify-self: start; }
  }
}


/* =========================================================================
   TABLET FALLBACK — 768 to 900px
   Not designed. Per the desktop handoff: collapse the three-column card to one
   column and drop the display sizes. The grow/rise motion goes with it — there
   is no room for a 1036px card and a full-bleed window at once. Below 768px the
   mobile handoff keeps the motion and re-times it (services.small.css), so
   this band is fenced off from it.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 900px) {
  .svc-track { height: auto; }
  .svc { position: relative; height: auto; }

  .panel { position: relative; inset: auto; }
  .panel--intro { min-height: 82vh; display: flex; }
  .intro { position: relative; inset: auto; padding: 12vh 22px; gap: 22px; }
  .intro__h2 { font-size: clamp(28px, 8.4vw, 44px); }

  /* 16:9, not a fixed vh. The clips are all 16:9 and .panel__pic is `contain`,
     so matching the window to the footage fills it exactly — no letterbox and no
     crop. A fixed height would letterbox on the short side instead. */
  .panel__img {
    position: relative; left: auto;
    width: 100% !important; height: auto !important; aspect-ratio: 16 / 9;
    top: auto !important; margin-left: 0 !important;
    opacity: 1 !important;
  }
  .panel__media { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }

  .card {
    position: relative; inset: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px 30px;
    margin: -8vh 22px 8vh;
    opacity: 1 !important;
    transform: none !important;
  }
  .card__meta { flex-direction: row; align-items: baseline; gap: 16px; }
  .card__head { align-items: flex-start; }
  .card__title, .card__title--lg { text-align: left; font-size: clamp(24px, 8vw, 36px); line-height: 1; }
  .card__body { max-width: none; }
}