/* THE FIX (v2): phones keep two side-by-side columns, but laid out to fill the screen.
   Each stylist gets 11 of the 24 columns, with a 2-column gap in the middle.
   Banner on top, round photo under it, booking text under that. */
@media (max-width: 767px) {
  :root { --gap: 0px; --gutter: 3vw; }
  .grid {
    --container: calc(100vw - var(--gutter) * 2);
    --cell: calc(1500px / 24);
    grid-template-rows: repeat(70, minmax(calc(var(--container) * 0.0215), auto));
    grid-template-columns: minmax(var(--gutter), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gutter), 1fr);
  }
  .a-logo  { grid-area: 3/2/14/13; }   .k-logo  { grid-area: 3/15/14/26; }
  .a-photo { grid-area: 15/2/36/13; }  .k-photo { grid-area: 15/15/36/26; }
  .a-text  { grid-area: 37/2/70/13; }  .k-text  { grid-area: 37/15/70/26; }

  .text h4 { font-size: clamp(12px, 4.4vw, 20px); line-height: 1.15; margin-bottom: 1em; }
}