/* Page styles for /b2b-marketing-agency. Everything here is scoped to a
   section id so no other page that shares pillar.css is affected. */

/* The two intro columns carry headings of different line counts, which left
   their paragraphs starting at different heights. Subgrid hands both columns
   the same two rows, so the headings share a row and the paragraphs line up
   whatever the headings wrap to. Below 900px the grid is a single column
   and there is nothing to align. */
@media (min-width: 901px) {
  #what .sit-grid { grid-template-rows: auto auto; }
  #what .sit-grid > div {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
  }
}

/* The philosophy section keeps the heading size every other section uses and
   sets its body below the pull-quote weight .why-text applies by default. */
#philosophy .why-text {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}

/* The sequence is an order of operations, not a ranked list, so it carries no
   numbers. Without the number the heading needs its own top spacing back. */
#sequence .svc h3 { margin-top: 0; }

/* .svc is a flex column, so margin-top:auto drops every link to the foot of
   its card. Cards in a row share a height, so the links align across the row
   and each one clears the copy above it. */
#services .svc .link {
  margin-top: auto;
  padding-top: 22px;
  align-self: flex-start;
  color: var(--accent);
  font-weight: 500;
}

/* Line count depends on where each sentence happens to wrap, not on its
   length, so balancing the copy alone never lines the cards up. Reserving the
   tallest block each layout produces makes every description occupy the same
   space, which keeps the Read More links evenly spaced rather than merely
   bottom-aligned. Values are the observed maximum at each column count. */
#services .svc p { min-height: calc(3 * 1.5em); }
@media (min-width: 1101px) { #services .svc p { min-height: calc(5 * 1.5em); } }
@media (max-width: 600px)  { #services .svc p { min-height: 0; } }

/* Two card grids already run above this one, so the qualifying list is set as
   editorial rows: rules instead of panels, and no number. */
.sec-you .you-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(40px, 6vw, 88px);
  margin-top: 8px;
}
.sec-you .you-item {
  padding: 24px 0 26px;
  border-top: 1px solid var(--hairline);
}
.sec-you .you-item h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.01em;
}
.sec-you .you-item p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .sec-you .you-grid { grid-template-columns: 1fr; }
}