/* Services page — "Area of Expertise" body: the four sticky-stacking
   discipline panels, the Design Capabilities block and the Creative
   Workflow chain. Per-element styling lives inline on the markup. */

@media (max-width: 900px) {
    /* sticky discipline panels: unstick, stack to one column, size to content */
    #brand-identity, #graphic-design, #product-design, #website-design {
      position: static !important; display: block !important;
      height: auto !important; min-height: 0 !important;
      margin: 0 14px 14px !important; border-radius: 18px !important; box-shadow: none !important;
    }
    #brand-identity > div, #graphic-design > div, #product-design > div, #website-design > div {
      padding: 34px 22px !important;
    }
    /* artwork side: cap its height so it doesn't dominate */
    #brand-identity > div[style*="order:"], #graphic-design > div[style*="order:"],
    #product-design > div[style*="order:"], #website-design > div[style*="order:"] {
      min-height: 190px !important; max-height: 300px !important; padding: 28px !important;
    }
    /* discipline title 54px -> smaller */
    h3[style*="font-size: 54px"] { font-size: 32px !important; }
    /* capability groups grids (auto-fit minmax 190) -> 2 up */
    div[style*="minmax(190px"] { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
    /* Design Capabilities heading (132px) + rows (46px) */
    [data-cap-head] { padding: 84px 22px 18px !important; }
    [data-cap-head] h2 { font-size: clamp(42px, 14vw, 62px) !important; }
    h3[style*="font-size: 46px"] { font-size: 30px !important; }
    h3[style*="font-size: 46px"] > span[style*="92px"] { font-size: 54px !important; }
    /* Design Capabilities rows: 1fr 2.1fr grid + negative margin -> stack, reset margin */
    [data-cap-row] { display: flex !important; flex-direction: column !important; gap: 34px !important; margin: 0 !important; padding: 52px 2px !important; }
    /* the title/description column is position:sticky on desktop; stacked on mobile that
       pins it and the capability groups scroll under it -> unstick it */
    [data-cap-row] > * { position: static !important; top: auto !important; }
    /* "My process" header (heading | description) -> stack */
    div[style*="gap: 80px; align-items: end"] { grid-template-columns: 1fr !important; gap: 26px !important; }
    /* process ("My process") chain: 6 columns -> 2, hide the connector line */
    div[style*="repeat(6, minmax"] { grid-template-columns: repeat(2, 1fr) !important; gap: 42px 14px !important; }
    [style*="top: 27px; left: 8%"] { display: none !important; }
    /* rein in the wide inner-wrapper horizontal padding */
    [style*="padding: 160px 64px"], [style*="padding: 0 64px"] { padding-left: 22px !important; padding-right: 22px !important; }
  }