/* Final editorial layer: shared type rhythm, deliberately scoped controls. */
:root body #process .process-glyph { filter:saturate(2.5) brightness(1.08) !important; }
@media (max-width:900px) {
      /* One filter component for all three rows. Each spans the full content
     width inside the page gutter and stays on ONE line, the buttons
     splitting that width equally — so Selected Work, Services and
     Playground read as the same control instead of three differently
     sized pill sets wrapping to two ragged lines.

     Sizing is Selected Work's, which was the reference: 14px/500, 10px of
     vertical padding, a 44px minimum tap target, a 1px hairline, full
     round. Equal widths are what force the single line: five buttons in a
     ~347px row is a ~64px share, so the long labels are swapped for short
     ones on phones by js/mobile-filter-labels.js. */
  :root body #work #swPills,
  :root body #expertise .xp__tabs,
  :root body #perspective .pg-gallery__tabs {
    display:flex !important;  flex-wrap:nowrap !important;
    align-items:stretch !important; 
    gap:6px !important; width:100% !important; 
     padding-inline:0 !important;
    overflow:visible !important;
    /* The row takes its height from its buttons. Playground's carried a
       46px used height of its own, and align-items:stretch then pushed its
       buttons 2px taller than the identical ones in the other two rows. */
    height:auto !important; min-height:0 !important;
  }
  /* The doubled container class is load-bearing. Two rules out-rank a plain
     child selector here — #expertise .xp__tab[class][class] in
     showcase-sections.css, and a flex:0 0 auto / min-width:64px pair for
     the Playground buttons in playground-all.css — which left Services at
     14.08px and Playground at 46px tall with uneven buttons. Repeating the
     container's own class lifts this above both.

     It has to be the CONTAINER that is doubled, not the child: qualifying
     the child as *[class] looked equivalent but silently missed four of
     the five Playground tabs, which carry no class attribute at all until
     script adds is-active to the selected one.

     The child is `button`, not `*`: filter-thumb.js inserts a span as the
     first child, and `*` squashed it to 10px and shifted every nth-child
     placement in the Services grid by one. */
  :root body #work #swPills.sw__pills > button,
  :root body #expertise .xp__tabs.xp__tabs > button,
  :root body #perspective .pg-gallery__tabs.pg-gallery__tabs > button {
    flex:1 1 0 !important; width:auto !important; min-width:0 !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    /* Pinned rather than min-height alone: Playground's buttons resolved a
       line box 2px taller than the identical markup in the other two rows,
       so they sat at 46px against 44px. One height for all three is what
       "match Work's proportions" actually means here, and the labels are
       single-line and nowrap so nothing clips. */
    height:44px !important; min-height:44px !important;
    padding:0 4px !important; 
    border:1px solid #7775 !important; 
      line-height:1.2 !important;
     
    overflow:hidden !important; text-overflow:ellipsis !important;
    background:transparent; color:inherit;
  }

  /* Services is the one row that does not fit on a single line at its full
     wording: five labels including "AI Experiences" and "Prototyping" come
     to 320px of text before any padding, inside a 347px row. It gets two
     rows instead — three across the top, two across the bottom — laid on a
     six-column grid so both rows still span the full width and the labels
     can be read in full. */
  :root body #expertise .xp__tabs.xp__tabs {
    display:grid !important;
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
  /* Every button is two columns wide, so all five are the same size as each
     other and as the single-row filters in Work and Playground. The pair on
     the second row is placed at columns 2-3 and 4-5 rather than spanning
     three each, which kept them 1.5x wider than the row above and was the
     proportion that read as inconsistent. */
  :root body #expertise .xp__tabs.xp__tabs > button:nth-of-type(-n+3) { grid-column:span 2 !important; }
  :root body #expertise .xp__tabs.xp__tabs > button:nth-of-type(4) { grid-column:2 / span 2; }
  :root body #expertise .xp__tabs.xp__tabs > button:nth-of-type(5) { grid-column:4 / span 2; }
  :root body :is(#swPills,.xp__tabs,.pg-gallery__tabs) > [aria-selected="true"] { background:#eee !important; color:#111 !important; }
  :root body #work #swMobileCards { display:grid; opacity:1 !important; visibility:visible !important; height:auto; }
  :root body #process .design-process__step {  height:auto;  display:flex; flex-direction:column; }
  :root body #process .process-glyph { width:170px !important;  object-fit:contain; }
  :root body #process .design-process__copy { padding:0;  }
  :root body #process .design-process__copy p { min-height:0;  }
  :root body #partnerships #partnershipsTrack { display:grid; grid-template-columns:minmax(0,1fr) !important; grid-auto-flow:row !important; gap:16px !important; overflow:visible !important;  transform:none !important; }
  :root body #partnerships .partnership-card[class] { width:100%; min-width:0; min-height:370px !important; padding:26px !important;  }
  :root body #partnerships .partnerships__rail { display:none; }
  /* The All tab's two tracks keep the same card they get on the web: the
     gradient field, the oversized index, the centred play and the meta at
     the foot. They used to be flattened into compact list rows here —
     artwork thumbnail, text left, small play right — which lost the
     artwork the gradient IS and made them read as a different component
     from the Music tab sitting one tab across. Play/pause behaviour is
     untouched; it is driven by .is-playing on the same button either way.
     The cards need a real height to be cards at all, and the pair share
     one grid area, so they split it here the way they do on the web. */
  :root body #perspective #pgPanelAll .pg-track {
    min-height:0;
    aspect-ratio:3 / 4;
  }
}
main#top h2 { text-wrap: balance; }
main#top :is(.section__lede,.toolkit__lede,.design-process__lede,.xp__lede,.editorial-head > p) {
  text-wrap: pretty;
}
@media (max-width:767px) {
    #work #swPills .sw-pill {       background:var(--surface-2,#212121); }
  #work #swPills .sw-pill.is-active { background:#eee !important; color:#111 !important; }
}
@media (min-width:768px) and (hover:hover) and (pointer:fine) {
  #partnerships .partnership-card[class] {   scale:var(--deck-stretch,1) 1; transition: scale var(--dur-4) var(--ease-spring),background-color var(--dur-3),color var(--dur-3); }
  #partnerships .partnership-card::before { content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(ellipse at 25% 35%,#66799555,transparent 55%),radial-gradient(ellipse at 80% 75%,#73725944,transparent 60%); transform:scale(.85); transition: opacity var(--dur-4),transform 1.2s var(--ease-out); }
  #partnerships .partnership-card:hover::before { opacity:1; transform:scale(1.1); }
}
@media (prefers-reduced-motion:reduce) {
  #partnerships .partnership-card[class] { scale:1; }
  #partnerships .partnership-card::before { transition:none; }
}

/* ---------------------------------------------------------------------
   Filter rows centre on the section's axis.

   The three of them — Selected Work's pills, Expertise's discipline tabs
   and Playground's category tabs — each inherited alignment from a
   different block and disagreed: Work and Playground already centred,
   Expertise sat hard left with ~800px of empty track beside it. This is
   declared last, after every per-section rule, so one line governs all
   three.

   Safe against the horizontal-scroll variants of these rows (centring a
   flex line inside an overflow container can put its start out of reach):
   both of those variants live at <=900px, where the block above already
   forces flex-wrap:wrap and overflow:visible, so no scroll container
   survives to be centred.
   --------------------------------------------------------------------- */
:root body #work #swPills,
:root body #expertise .xp__tabs,
:root body #perspective .pg-gallery__tabs {
  justify-content: center !important;
  margin-inline: auto !important;
}

/* Expertise's row carried two leftovers from the scrolling-chip-strip
   treatment it used to get under 900px: a 20px trailing pad so the last
   chip cleared the edge, and a mask fading the right edge to advertise
   "there is more over here". The row wraps now and does not scroll, so the
   pad pushed the centred line 20px off-axis and the mask was quietly
   fading out the right-hand chips of a row that ends on screen. */
:root body #expertise .xp__tabs[class] {
  -webkit-mask-image: none;
          mask-image: none;
}

/* ---------------------------------------------------------------------
   Phone page inset.

   The gutter ran at 20px, with Selected Work at 26px because its inner
   shell added a second inset on top — which is why its filter row started
   further in than every other row on the page. One tight value now, the
   way current editorial sites run it, with the notch respected. Declared
   in this file rather than tokens.css because styles.css and
   homepage-bundle.css both redefine these tokens after tokens.css loads.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root body {
    --gutter: max(14px, env(safe-area-inset-left));
    --mobile-gutter: max(14px, env(safe-area-inset-left));
  }
  /* The three filter rows sit in three different shells, each of which was
     insetting on its own terms — Selected Work's inner shell doubled up on
     the page gutter (26px), Expertise's stage hard-coded 20px, and only
     Playground read the token. All three read it now, so every row on the
     page starts and ends on the same vertical. */
  :root body #work .sw__inner,
  :root body #expertise .xp__stage {
    padding-inline: var(--gutter) !important;
  }
}

/* The fixed back-to-top button (48px, 20px from the viewport edge) sat on
   top of "All rights reserved" once the page reached the footer. The base
   row reserves the button's footprint at its right end so the two never
   share space. Phones centre the row, which already clears the button. */
@media (min-width: 901px) {
  :root body .folio-footer .folio-footer__base {
    padding-inline-end: 72px;
  }
}

/* Section rhythm on desktop. The visible gap between one section's last
   content and the next heading is ~252px (126px of padding each side) at
   most boundaries, but pinned and self-padded sections drifted from 171px
   to 312px. These trims bring the outliers back to the shared gap. */
@media (min-width: 1025px) {
  /* Playground's stage pinned to the very bottom of its track, leaving
     Testimonials only 171px below it. Padding releases the pin earlier. */
  :root body main#top #perspective.pg-gallery {
    padding-bottom: 80px !important;
  }
  /* Services → Approach and Approach → Product Stack were uneven (212px, 312px). */
  :root body main#top #process.design-process {
    padding-top: 146px !important;
    padding-bottom: 66px !important;
  }
  /* The testimonial rail line adds ~30px under the cards. */
  :root body main#top #partnerships.partnerships {
    padding-bottom: 95px !important;
  }
}

/* ---------------------------------------------------------------------
   Phone filter rows: buttons only.

   On desktop the rows are a segmented control: a tinted track with a
   sliding pill. On a phone they lay out as separate full-width buttons
   (Expertise even wraps to two rows), so the track behind them was a
   rounded slab that no longer matched what sat on it, and the sliding pill
   was positioned for a single line. Below 900px the track, its padding and
   the sliding pill are dropped and the selected button carries the fill
   itself, in the same ink as the desktop pill. This covers every filter
   row (Selected Work, Expertise, Playground) in one place.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root body #work #swPills.sw__pills[class][class],
  :root body #expertise .xp__tabs.xp__tabs[class][class],
  :root body #perspective .pg-gallery__tabs.pg-gallery__tabs[class][class] {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  :root body :is(#swPills, .xp__tabs, .pg-gallery__tabs) > .filter-thumb { display: none !important; }
  :root body #work #swPills.sw__pills > [aria-selected="true"][aria-selected="true"][aria-selected="true"],
  :root body #expertise .xp__tabs.xp__tabs > [aria-selected="true"][aria-selected="true"][aria-selected="true"],
  :root body #perspective .pg-gallery__tabs.pg-gallery__tabs > [aria-selected="true"][aria-selected="true"][aria-selected="true"],
  :root body #work #swPills .sw-pill.is-active {
    background: var(--filter-bg-active, #222) !important;
    border-color: var(--filter-bg-active, #222) !important;
    color: var(--filter-ink-active, #f4f4f4) !important;
  }
}