/* ==========================================================================
   THE CLIENT RAIL'S HEAD — the site heading system, applied to #q7.

   The site standard is: small blue eyebrow, a 1-3 word heading, one
   supporting sentence. This band is the one place it had to be fitted rather
   than simply written, because #q7 is what the hero reveals through the fold:
   gads-vm-v1/vm.css reserves 254px for it on a desktop (--h3-show) and the
   band already measures 261. Every pixel added here is a pixel of the rail
   pushed under the fold.

   So the supporting line goes in the slot the head was always built to hold —
   gads-vm-v1/vm.css draws .mp-head as a baseline flex row with a hairline
   ::after filling the space beside the title, and that space held a second
   line until the line that was in it turned out to be interface guidance.
   A descriptive line costs the band NO height at all. Only the eyebrow adds a
   row, and it adds one 17px row.

   Loaded last, after gads-vm-v1/vm.css, whose #q7 rules it extends.
   ========================================================================== */

/* the eyebrow takes a full row of its own; row-gap is zeroed so vm.css's
   14px column gap does not also open up between the eyebrow and the title */
#q7 .mp-head{ flex-wrap: wrap; gap: 0 14px; }

#q7 .q7h-eye{
  flex: 1 0 100%;
  margin: 0 0 5px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
}

/* the accent full stop, which every other heading on the site ends on. The
   title is a <p>, so ds.css's global `h1 i, h2 i…` rule does not reach it. */
#q7 .mp-t i{ font-style: normal; color: var(--accent); }

/* the hairline keeps its place between the title and the line, and the line
   takes the rest of the row. Without `order` the ::after is always last. */
#q7 .mp-head::after{ order: 1; flex: 1 1 32px; min-width: 24px; }
#q7 .q7h-sub{
  order: 2;
  flex: 0 1 auto;
  max-width: 54ch;
  margin: 0;
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---- phone ---------------------------------------------------------------
   vm.css drops the hairline here and align.css lays the head out as a block,
   so the three parts simply stack. There is room: the band measures 129px
   against a 230px reserve (--h3-show-m). */
@media (max-width: 860px){
  #q7 .q7h-eye{ margin-bottom: 4px; font-size: 10.5px; letter-spacing: .2em; }
  #q7 .q7h-sub{ margin-top: 6px; max-width: none; font-size: 13.4px; }
}

/* ---- the homepage --------------------------------------------------------
   The same rail is the Google Ads tab of the homepage's work slider, where
   the section's heading is deliberately not drawn at all
   (home-gads-tab/gah.css clips .mp-t). Its eyebrow and supporting line go
   with it — the tab itself is the heading there. */
.gah .q7h-eye, .gah .q7h-sub{ display: none; }