/* Work hub and case studies (work/, work/murata-traffic, work/self-driving-car, work/umw-platform).
   Rebuilt 13 Oct 2026 on the one palette: paper, oat, white cards, ink, orange. No per-case hero colours,
   no carousels, no lettering tiles. Pairs with cs-template.css (for .wrap). */

/* ---------- shared: case card (hub grid and the "more of our work" row) ---------- */
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.wk-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.wk-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;min-height:340px;color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.wk-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.wk-card .who{font:600 14px/20px var(--sans);color:var(--muted)}
.wk-card h3{margin-top:10px;font:600 24px/30px var(--sans);letter-spacing:-.48px;text-wrap:balance}
.wk-card p{margin-top:12px;font:400 16px/24px var(--sans);color:var(--muted)}
.wk-card .stat{margin-top:auto;padding-top:28px}
.wk-card .stat b{display:block;font:600 44px/1.05 var(--sans);letter-spacing:-1.3px;font-variant-numeric:tabular-nums}
.wk-card .stat span{display:block;margin-top:6px;font:400 14px/20px var(--sans);color:var(--muted)}
.wk-card .go{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font:500 15px/20px var(--sans);color:var(--brand-text)}
.wk-card .stat+.go{margin-top:20px}
.wk-card>p+.go{margin-top:auto}
@media (max-width:1000px){.wk-grid,.wk-grid.two{grid-template-columns:1fr}.wk-card{min-height:0;padding:24px}.wk-card .stat b{font-size:38px}}

/* ---------- hub ---------- */
.wk-hero{padding:168px 0 72px}
.wk-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:end}
.wk-hero h1{font:600 clamp(56px,9vw,128px)/.95 var(--sans);letter-spacing:-.045em}
.wk-lede p{font:400 18px/27px var(--sans);color:var(--muted)}
.wk-lede p+p{margin-top:16px}
.wk-lede strong{color:var(--ink);font-weight:600}
.wk-cases{padding:0 0 96px}
.wk-quotes{padding:0 0 96px}
.wk-quotes .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid var(--line);padding-top:48px}
.wk-quotes blockquote{margin:0;padding-left:20px;border-left:3px solid var(--brand)}
.wk-quotes blockquote p{font:500 20px/30px var(--sans);letter-spacing:-.3px}
.wk-quotes footer{margin-top:14px;font:400 14px/20px var(--sans);color:var(--muted)}
.wk-quotes footer b{font-weight:600;color:var(--ink)}
.wk-more{padding:0 0 96px}
.wk-more h2{font:500 40px/44px var(--sans);letter-spacing:-.8px}
.wk-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.wk-list a{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);transition:color .2s}
.wk-list a:hover{color:var(--brand-text)}
.wk-list b{font:500 16px/24px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.wk-list span{font:500 18px/26px var(--sans)}
.wk-list i{font-style:normal;color:var(--brand-text)}
.wk-with{padding:0 0 32px}
.wk-with .wrap{border-top:1px solid var(--line);padding-top:32px}
.wk-with h2{font:500 16px/24px var(--sans);color:var(--muted)}
.wk-logos{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px}
.wk-logos li{font:600 20px/32px var(--sans);letter-spacing:-.3px;color:var(--ink)}
.wk-logos img{display:block;height:32px;width:auto;max-width:140px}
@media (max-width:900px){
  .wk-hero{padding:136px 0 48px}.wk-hero .wrap{grid-template-columns:1fr;gap:24px}
  .wk-cases,.wk-quotes,.wk-more{padding-bottom:64px}
  .wk-quotes .wrap{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .wk-more h2{font-size:30px;line-height:34px}
  .wk-list a{grid-template-columns:56px minmax(0,1fr);gap:12px}.wk-list i{display:none}.wk-list span{font-size:16px;line-height:24px}
}

/* ---------- case study: hero ---------- */
.cs-hero{padding:136px 0 56px}
.crumbs{display:flex;align-items:center;gap:8px;font:400 14px/20px var(--sans);color:var(--muted)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.cs-hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;align-items:center;margin-top:28px}
.cs-hero h1{font:600 52px/56px var(--sans);letter-spacing:-1.8px;text-wrap:balance}
.cs-hero .lede{margin-top:20px;max-width:520px;font:400 19px/28px var(--sans);color:var(--muted)}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.cs-stats b{display:block;font:600 30px/36px var(--sans);letter-spacing:-.6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-stats span{display:block;margin-top:6px;font:400 14px/20px var(--sans);color:var(--muted)}
.cs-hero .img{aspect-ratio:4/3;border-radius:16px}
@media (max-width:900px){
  .cs-hero{padding:124px 0 40px}
  .cs-hgrid{grid-template-columns:1fr;gap:28px;margin-top:20px}
  .cs-hero h1{font-size:34px;line-height:40px;letter-spacing:-1px}
  .cs-stats{grid-template-columns:1fr;gap:16px;margin-top:28px}
  .cs-stats b{font-size:26px;line-height:32px}
}

/* ---------- case study: body ---------- */
.cs-main{position:relative;background:#fff;border-radius:20px 20px 0 0;padding:56px 0 0}
.cs-cols{display:grid;grid-template-columns:240px minmax(0,800px);gap:96px;align-items:start}
.cs-side{position:sticky;top:128px;align-self:start}
.cs-side .b{background:var(--oat);border-radius:16px;padding:10px 18px}
.cs-side .b a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font:400 14px/20px var(--sans);color:var(--muted);transition:color .2s}
.cs-side .b a:hover,.cs-side .b a.on{color:var(--ink)}
.cs-side .b a.on{font-weight:500}
.cs-side .b a i{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--brand);opacity:0;transition:opacity .2s}
.cs-side .b a.on i{opacity:1}
.cs-body section{padding:48px 0 32px;scroll-margin-top:128px}
.cs-body section:first-child{padding-top:0}
.cs-body .glance>h2{font:500 30px/38px var(--sans);letter-spacing:-.6px;text-wrap:balance}
.glance .two{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;margin-top:40px;align-items:start}
.facts{position:sticky;top:128px;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:6px}
.facts .fl{font:500 13px/18px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.facts p{font:400 16px/22.4px var(--sans)}
.facts a{font:500 14px/20px var(--sans);text-decoration:underline;text-underline-offset:3px}
.facts .gap{height:12px}
.lead p{font:400 20px/30px var(--sans)}
.lead strong{display:block;margin-top:24px;font:600 20px/30px var(--sans)}
.cs-body ul,.cs-body ol{margin:20px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.cs-body li{font:400 17.6px/26.4px var(--sans)}
.pics{margin-top:32px}
.pics .ph{aspect-ratio:16/9;border-radius:16px}
.cs-body h2.sh{margin-top:0;font:500 38px/42px var(--sans);letter-spacing:-.76px;text-wrap:balance}
.cs-body h3.tpl{margin-top:48px;font:600 26px/32px var(--sans);letter-spacing:-.5px;text-wrap:balance}
.cs-body figure{margin:32px 0}.cs-body figure:not(.dgm){border:1px solid var(--line);border-radius:16px;padding:8px}
.cs-body figure .ph{aspect-ratio:16/9;border-radius:10px}
.cs-body figure .ph.r43{aspect-ratio:4/3}
.cs-body figure .ph.r32{aspect-ratio:3/2}
.cs-body figure .ph.r21{aspect-ratio:2/1}
.cs-body section>p{margin-top:22px;font:400 20px/30px var(--sans)}
.cs-body h2.sh+p,.cs-body figure+p,.cs-body h3.tpl+p{margin-top:0}
.cs-body blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid var(--brand);font:500 21px/32px var(--sans);letter-spacing:-.2px;color:var(--ink)}
.cs-more{background:#fff;border-top:1px solid var(--line);margin-top:64px;padding:56px 0 24px}
.cs-more h2{font:600 32px/38px var(--sans);letter-spacing:-.64px;margin-bottom:28px}
@media (max-width:1200px){.cs-cols{grid-template-columns:220px minmax(0,1fr);gap:48px}.glance .two{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .cs-main{padding-top:40px}
  .cs-cols{grid-template-columns:1fr}.cs-side{display:none}
  .glance .two{grid-template-columns:1fr;gap:24px}.facts{position:static}
  .cs-body .glance>h2{font-size:24px;line-height:31px}
  .cs-body h2.sh{font-size:30px;line-height:34px}.cs-body h3.tpl{font-size:22px;line-height:28px}
  .lead p,.lead strong,.cs-body section>p{font-size:18px;line-height:27px}
  .cs-body blockquote{font-size:18px;line-height:28px;padding-left:18px}
  .cs-more{margin-top:40px;padding-top:40px}.cs-more h2{font-size:26px;line-height:32px}
}

/* ---------- diagrams drawn in HTML/SVG from each page's own words ---------- */
.cs-body figure .ph.dg{aspect-ratio:auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;text-align:left;gap:16px;padding:32px;background:var(--white);color:var(--ink)}
.cs-body figure .ph.dg.short{padding:24px 32px}
.dg .cap{font:500 13px/1.3 var(--sans);color:var(--muted)}
.dg .flow{display:flex;align-items:stretch;gap:8px}
.dg .nd{flex:1 1 0;min-width:0;background:#fff;border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px}
.dg .nd .k{font:500 13px/1.2 var(--sans);color:var(--brand-text)}
.dg .nd b{font:600 17px/1.25 var(--sans);letter-spacing:-.2px}
.dg .nd span{font:400 13.5px/1.4 var(--sans);color:var(--muted)}
.dg .nd.hot{background:var(--brand-tint);box-shadow:inset 0 0 0 1.5px var(--brand)}
.dg .nd.ink{background:#161618;color:#F7F6F3;box-shadow:none}
.dg .nd.ink .k{color:var(--brand)}.dg .nd.ink span{color:rgba(247,246,243,.72)}
.dg>.nd{flex:none}.dg>.nd.mid{align-self:center;width:min(100%,380px)}
.dg .ar{flex:0 0 20px;align-self:center;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231D1D1D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat;opacity:.55}
.dg .dchips{display:flex;flex-wrap:wrap;gap:8px}
.dg .nd .dchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:8px 14px;font:500 14px/1.2 var(--sans);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.dg .dchip i{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 8px}
.dg .nd .dchip.no{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(180,35,24,.7)}
.dg .dchip.no i{background:#B42318}
.dg .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg svg{display:block;width:100%;height:auto}
.dg .kit{display:grid;grid-template-columns:1fr minmax(0,1.5fr) 1fr;gap:12px;align-items:center}
.dg .kit .side{display:flex;flex-direction:column;gap:10px}
.dg .tree{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:14px;align-items:center}
.dg .tree .rows{display:flex;flex-direction:column;gap:10px}
.dg .tree .row{display:flex;align-items:stretch;gap:8px}
.dg .mapl{font:600 34px var(--sans);letter-spacing:-.4px;fill:#1D1D1D}
.dg .maps{font:400 22px var(--sans);fill:#565656}
.dg.bars{gap:14px}
.dg .bar{display:grid;grid-template-columns:130px minmax(0,1fr) 92px;align-items:center;gap:14px}
.dg .bar .bl{font:500 14px/1.2 var(--sans);color:var(--muted)}
.dg .bar .bt{position:relative;display:flex;align-items:center;gap:10px;height:34px}
.dg .bar .bt i{display:block;height:100%;background:var(--brand);border-radius:2px 6px 6px 2px}
.dg .bar .bt em{font:600 13px/1 var(--sans);font-style:normal;color:var(--ink);white-space:nowrap}
.dg .bar b{font:600 17px/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
/* a live status, as the customer sees it (UMW): four stages on one line */
.dg .status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:8px 0 0}
.dg .status li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font:500 14px/1.3 var(--sans);color:var(--ink)}
.dg .status li::before{content:"";position:relative;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--white)}
.dg .status li::after{content:"";position:absolute;top:8px;left:50%;width:100%;height:2px;background:var(--brand)}
.dg .status li:last-child::after{display:none}
.dg .status li.now::before{background:#fff;box-shadow:inset 0 0 0 4px var(--brand),0 0 0 4px var(--white)}
.dg .status li.now::after,.dg .status li.next::after{background:var(--line-2)}
.dg .status li.next{color:var(--muted)}
.dg .status li.next::before{background:#fff;box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 4px var(--white)}
@media (max-width:700px){
  .cs-body figure .ph.dg{padding:18px}
  .cs-body figure .ph.dg.short{padding:18px}
  .dg .flow,.dg .tree .row{flex-direction:column}
  .dg .ar{transform:rotate(90deg)}
  .dg .two,.dg .tree{grid-template-columns:1fr}
  .dg .kit{grid-template-columns:1fr 1fr}.dg .kit .car{grid-column:1/-1;order:-1}
  .dg .bar{grid-template-columns:1fr auto;gap:6px 10px}.dg .bar .bt{grid-column:1/-1;grid-row:2;height:26px}.dg .bar b{grid-row:1;grid-column:2}
  .dg .status{grid-template-columns:1fr;gap:18px;padding:4px 0}
  .dg .status li{flex-direction:row;text-align:left;gap:14px}
  .dg .status li::after{top:18px;left:8px;width:2px;height:calc(100% + 18px)}
}

/* a placeholder label (data-label) is for an empty frame; once a real picture is in, it must not print over it */
.ph:has(>img)::after,.ph:has(>video)::after{display:none}
.glance .two:first-child{margin-top:0}

/* ---------- colour with meaning (14 Oct 2026) ----------
   Each case wears its division (base.css tokens): the self-driving car kinetik, Murata traffic harmonik, the UMW
   platform heuristik (a custom-built software platform). A case page sets data-tone on <main>; the hero stays paper,
   the tone shows in the accents, the diagrams, the side menu and the closing impact panel. Hub cards and "more of our
   work" cards each carry their own case's tone and lift on hover. */
.wk-card[data-tone] .who,.wk-card[data-tone] .go{color:var(--t-ink)}
.wk-card[data-tone] .stat span,.wk-card[data-tone] p{color:var(--muted)}
.wk-card[data-tone] .go{border-top-color:color-mix(in srgb,var(--t) 26%,transparent)}
.wk-quotes blockquote[data-tone]{border-left-color:var(--t)}
.wk-quotes blockquote[data-tone] footer b{color:var(--t-ink)}
.wk-list li[data-tone] a{position:relative;transition:color .2s,background .25s,padding .35s var(--ease)}
.wk-list li[data-tone] b{color:var(--t-ink)}
.wk-list li[data-tone] i{color:var(--t-ink);transition:transform .3s var(--ease)}
.wk-list li[data-tone] a::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:3px;background:var(--t);opacity:0;transition:opacity .25s}
.wk-list li[data-tone] a:hover{color:var(--ink);background:var(--t-bg);padding-left:16px;padding-right:16px}
.wk-list li[data-tone] a:hover::before{opacity:1}
.wk-list li[data-tone] a:hover i{transform:translateX(4px)}
/* case pages: the tone set on <main> */
main[data-tone] .crumbs [aria-current]{color:var(--t-ink)}
main[data-tone] .cs-stats{border-top:2px solid var(--t)}
main[data-tone] .cs-stats b{color:var(--t-ink)}
main[data-tone] .cs-side .b{background:#fff;border:1px solid var(--line);box-shadow:none}
main[data-tone] .cs-side .b a.on{color:var(--t-ink)}
main[data-tone] .cs-side .b a i{background:var(--t)}
main[data-tone] .facts{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main[data-tone] .facts .fl{color:var(--t-ink)}
main[data-tone] .cs-body li::marker{color:var(--t-ink);font-weight:600}
main[data-tone] .cs-body blockquote{border-left-color:var(--t)}
main[data-tone] .cs-press a:hover{color:var(--t-ink)}
/* diagrams: a tinted panel with white nodes; the node REKA built carries the tone */
main[data-tone] .cs-body figure:has(>.dg){background:var(--t-bg);border-color:transparent}
main[data-tone] .cs-body figure .ph.dg{background:var(--t-bg)}
main[data-tone] .cs-body figure .ph.dg.map{background:#fff}
main[data-tone] .dg .cap{color:var(--t-ink)}
main[data-tone] .dg .nd{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 16%,transparent)}
main[data-tone] .dg .nd .k{color:var(--t-ink)}
main[data-tone] .dg .nd.hot{background:var(--t-2);box-shadow:inset 0 0 0 1.5px var(--t);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
main[data-tone] .dg .nd.hot:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--t),0 14px 30px -20px color-mix(in srgb,var(--t) 80%,transparent)}
main[data-tone] .dg .nd.ink{box-shadow:none}
main[data-tone] .dg .nd.ink .k{color:var(--t-2)}
main[data-tone] .dg .dchip:not(.no) i,main[data-tone] .dg .bar .bt i{background:var(--t)}
main[data-tone] .dg .status li::before,main[data-tone] .dg .status li::after{background:var(--t)}
main[data-tone] .dg .status li.now::before{background:#fff;box-shadow:inset 0 0 0 4px var(--t),0 0 0 4px var(--t-bg)}
main[data-tone] .dg .status li::before{box-shadow:0 0 0 4px var(--t-bg)}
main[data-tone] .dg .status li.now::after,main[data-tone] .dg .status li.next::after{background:var(--line-2)}
main[data-tone] .dg .status li.next::before{background:#fff;box-shadow:inset 0 0 0 2px var(--line-2),0 0 0 4px var(--t-bg)}
/* the drawn maps and the car were orange; they take the case's colour (a CSS fill beats the attribute) */
main[data-tone] .dg svg [fill="#FB9800"]{fill:var(--t)}
main[data-tone] .dg svg [stroke="#FB9800"]{stroke:var(--t)}
main[data-tone=harmonik] .dg svg g[transform] text,main[data-tone=heuristik] .dg svg g[transform] text{fill:#fff}
/* the closing impact: one tinted panel, the page's one coloured block */
main[data-tone] .cs-body section#impact{margin-top:32px;padding:40px 40px 36px!important;border-radius:24px;background:var(--t-bg)}
main[data-tone] .cs-body section#impact h2.sh{color:var(--ink)}
main[data-tone] .cs-body section#impact h2.sh+p{margin-top:16px}
main[data-tone] .cs-body section#impact+section{padding-top:56px}
@media (max-width:900px){main[data-tone] .cs-body section#impact{padding:28px 22px 26px!important;border-radius:20px}}