/* Our work (work/index.html), on the section grammar (14 Oct 2026). Loaded after cs-template.css and customers.css,
   which the case pages also use, so every rule here is scoped to main.pg-work and overrides them for this page only.
   Order: hero; the three cases as linked cards in an oat tray (each in its division: car kinetik, Murata harmonik,
   UMW platform heuristik); the two quotes as white cards in the page's one ink tray; "More from the work" as linked
   cards; "Worked with" as logo tiles. No hairlines between sections. */
main.pg-work .wk-hero{padding:184px 0 40px}
main.pg-work .wk-hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:end}
main.pg-work .wk-cases,main.pg-work .wk-quotes,main.pg-work .wk-more,main.pg-work .wk-with{padding-bottom:0}
main.pg-work .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}

/* the cases */
main.pg-work .wk-grid{gap:16px}
main.pg-work .wk-cs{padding:12px 12px 20px;gap:0}
main.pg-work .wk-cs .frame{margin:0 0 18px}
main.pg-work .wk-cs .frame .ph{aspect-ratio:16/9;width:100%;border-radius:0}
main.pg-work .wk-cs>:not(.frame){margin-inline:10px}
main.pg-work .wk-cs .who{font:600 14px/20px var(--sans);color:var(--t-ink)}
main.pg-work .wk-cs .tt{margin-top:8px;font:600 24px/30px var(--sans);letter-spacing:-.48px}
main.pg-work .wk-cs p{margin-top:10px;font:400 16px/24px var(--sans);color:var(--muted)}
main.pg-work .wk-cs .stat{margin-top:auto;padding-top:28px}
main.pg-work .wk-cs .stat b{display:block;font:600 40px/1.05 var(--sans);letter-spacing:-1.2px;font-variant-numeric:tabular-nums;color:var(--ink)}
main.pg-work .wk-cs .stat span{display:block;margin-top:6px;font:400 14px/20px var(--sans);color:var(--muted)}
main.pg-work .wk-cs .card-foot{padding-top:24px}
main.pg-work .wk-cs .code{color:var(--t-ink)}
main.pg-work .wk-cs>p+.card-foot{margin-top:auto}

/* the quotes: white cards in the ink tray; the speaker's name carries the colour of the work it speaks for */
main.pg-work .wk-qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-work .wk-quotes blockquote.card{margin:0;padding:32px;border-left:0;justify-content:space-between;gap:20px}
main.pg-work .wk-quotes blockquote p{font:500 21px/31px var(--sans);letter-spacing:-.3px;color:var(--ink)}
main.pg-work .wk-quotes footer{margin:0;font:400 14px/20px var(--sans);color:var(--muted)}
main.pg-work .wk-quotes footer b{font-weight:600;color:var(--t-ink)}

/* more from the work: one linked card per milestone; the year (a figure) in mono, beside what it is about */
main.pg-work .wk-mgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
main.pg-work .wk-mgrid li{display:flex}
main.pg-work .wk-mgrid .card{flex:1;gap:12px;min-height:168px}
main.pg-work .wk-mgrid .yr{display:flex;align-items:center;gap:10px}
main.pg-work .wk-mgrid .yr b{font:500 15px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--t-ink)}
main.pg-work .wk-mgrid .tx{font:500 18px/26px var(--sans);letter-spacing:-.2px;color:var(--ink);text-wrap:pretty}

/* worked with: logo tiles (partner-logos.js fills them; the name stays as the fallback) */
main.pg-work .wk-logos{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
main.pg-work .wk-logos li{display:flex;align-items:center;justify-content:center;min-height:88px;padding:16px 24px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 18px/1.2 var(--sans)}
main.pg-work .wk-logos li img{box-sizing:border-box;padding:20px 32px!important}

@media (max-width:1000px){
  main.pg-work .wk-grid{grid-template-columns:minmax(0,1fr)}
  main.pg-work .wk-qgrid,main.pg-work .wk-mgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  main.pg-work .wk-hero{padding:136px 0 24px}
  main.pg-work .wk-hgrid{grid-template-columns:minmax(0,1fr);gap:24px}
  main.pg-work .chap-head h2{font-size:38px;line-height:1.08}
}
@media (max-width:760px){
  main.pg-work .wk-cs .tt{font-size:22px;line-height:28px}
  main.pg-work .wk-cs .stat b{font-size:34px}
  main.pg-work .wk-quotes blockquote.card{padding:22px}
  main.pg-work .wk-quotes blockquote p{font-size:18px;line-height:27px}
  main.pg-work .wk-mgrid .card{min-height:0}
  main.pg-work .wk-mgrid .tx{font-size:16px;line-height:24px}
  main.pg-work .wk-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  main.pg-work .wk-logos li{min-height:68px;padding:12px 14px;font-size:16px}
  main.pg-work .wk-logos li img{padding:16px 18px!important}
}

/* More from the work, with a picture (14 Oct 2026): on desktop a photo beside the four milestones (they sit two by
   two); on narrow screens it opens the tray, so neither the desktop nor the phone page runs long without a picture. */
main.pg-work .wk-mtray{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:16px;align-items:stretch}
main.pg-work .wk-mpic{display:flex}
main.pg-work .wk-mpic .ph{flex:1;width:100%;min-height:280px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
@media (max-width:1000px){
  main.pg-work .wk-mtray{grid-template-columns:minmax(0,1fr);gap:12px}
  main.pg-work .wk-mpic .ph{min-height:0;aspect-ratio:16/9}
}