/* Capabilities (14 Oct 2026, owner: "what REKA works on", one page per division, beside Services, which is how you
   work with REKA). Page-scoped (cp-), built on the section grammar at the end of base.css: open chapter titles, trays,
   white cards. The page's own division tone (data-tone on <main>) colours the hero accent, frames, titles and buttons;
   service cards are orange, other capabilities carry their own tones. Text never sits on a tint. */
.cp h2{font:600 52px/1.05 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.cp p{text-wrap:pretty}

/* hero: the name, the line in the division's colour, a lede, one picture */
.cp-hero{padding:184px 0 32px}
.cp-hgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.cp-hero h1{font:600 68px/1.03 var(--sans);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.cp-hero h1 span{display:block;color:var(--t-ink,var(--ink))}
.cp-hero .lede{margin-top:28px;max-width:640px;font-size:20px;line-height:1.55;color:var(--ink)}
.cp-hero .lede+.lede{margin-top:16px;font-size:18px;color:var(--muted)}
.cp-hero .lede b{font-weight:600;color:var(--t-ink,var(--ink))}
.cp-hero .lede a,.cp-txt a{border-bottom:1px solid currentColor}
.cp-hero .lede a:hover,.cp-txt a:hover{color:var(--t-ink,var(--brand-text))}
.cp-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cp-pic{margin:0;border-radius:28px;overflow:hidden;background:var(--t-bg,var(--oat))}
.cp-pic .ph{width:100%;aspect-ratio:4/3}
.cp-pic.shot{padding:24px 24px 0}
.cp-pic.shot img{display:block;width:100%;height:auto;border-radius:12px 12px 0 0;box-shadow:0 0 0 1px rgba(29,29,29,.08)}
.cp-pic figcaption{padding:12px 4px 16px;font-size:14px;line-height:1.45;color:var(--muted)}

/* grids of white cards inside trays */
.cp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cp-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cp-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cp-grid+.cp-grid{margin-top:16px}
.cp .card .tt{font-size:21px}
.cp .card p{font-size:15px;line-height:23px}
.cp .card p+p{margin-top:2px}
.cp .card .meta{font:600 13px/1.4 var(--sans);color:var(--t-ink,var(--muted))}
.cp .card .more{margin-top:auto;padding-top:12px;align-self:flex-start;font-size:14.5px}
.cp[data-tone] .more .arr,.cp [data-tone] .more .arr{background:var(--t-btn);color:var(--t-btn-fg)}
.cp .card .fig{font:600 26px/1.15 var(--sans);letter-spacing:-.02em;color:var(--t-ink,var(--ink))}

/* a picture frame on a linked card: a screenshot sits on the tint, a placeholder or diagram fills it */
.cp .card .frame{aspect-ratio:16/9}
.cp .card .frame .ph{width:100%;height:100%}.cp .card .frame>svg{width:100%;height:100%;display:block}
.cp .card>.dgm:first-child{margin:-12px -12px 8px}
.cp a.card-foot:hover .corner,.cp a.card-foot:focus-visible .corner{background:var(--t-btn,var(--ink));color:var(--t-btn-fg,#fff);box-shadow:none}
.cp-grid.two:has(>.card>.dgm){align-items:start}
.cp .card .frame.shot{padding:16px 16px 0}
.cp .card .frame.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:10px 10px 0 0;box-shadow:0 0 0 1px rgba(29,29,29,.08)}
.cp .card.big .tt{font-size:26px;letter-spacing:-.5px}

/* the record: years on one thin line, dots in the division's colour (dates, not steps) */
.cp-rec{background:#fff;border-radius:20px;padding:28px 28px 8px;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px}
.cp-rec h3{font:600 20px/1.3 var(--sans);letter-spacing:-.01em}
.cp-rec ol{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0 20px}
.cp-rec li{position:relative;padding:28px 0 20px}
.cp-rec li::before{content:"";position:absolute;left:0;right:-20px;top:5px;height:1px;background:var(--ink);opacity:.2}
.cp-rec li:last-child::before{right:0}
.cp-rec li::after{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--t,var(--brand))}
.cp-rec b{display:block;font:600 15px/1 var(--mono);color:var(--t-ink,var(--brand-text))}
.cp-rec span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.cp-rec a{border-bottom:1px solid currentColor}

/* hub: the four capabilities, and what is inside each */
.cp-in{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cp-in li{font:500 13px/1.3 var(--sans);color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:6px 11px}
.cp-intro{max-width:760px}
.cp-txt{font-size:18px;line-height:1.6;color:var(--ink)}
.cp-txt+.cp-txt{margin-top:14px}

/* partners we build this with: one row of white tiles; assets/partner-logos.js swaps each name for its real logo */
.cp-logos{background:#fff;border-radius:20px;padding:24px 28px;box-shadow:inset 0 0 0 1px var(--line);margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.cp-logos p{font-size:15px;line-height:1.5;color:var(--muted);max-width:420px}
.cp-logos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cp-logos li{position:relative;display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 22px;border-radius:14px;background:var(--white);font:600 16px/1.2 var(--sans);letter-spacing:-.01em}
.cp-logos li img{padding:12px 14px!important}

/* AI page: the honest horizon for optimisation */
.cp-hz .card .meta{font-family:var(--sans)}
.cp-after{margin-top:24px;text-align:center}

@media (max-width:1100px){
  .cp-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cp-rec ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}
  .cp-rec li::before{right:0}
}
@media (max-width:900px){
  .cp h2{font-size:36px;line-height:1.08}
  .cp-hero{padding:136px 0 16px}
  .cp-hgrid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cp-hero h1{font-size:46px;line-height:1.04;letter-spacing:-.035em}
  .cp-hero .lede{font-size:18px}.cp-hero .lede+.lede{font-size:16px}
  .cp-pic{border-radius:22px}.cp-pic .ph{aspect-ratio:16/10}.cp-pic.shot{padding:14px 14px 0}
  .cp-grid,.cp-grid.two{grid-template-columns:minmax(0,1fr)}
  .cp .card.big .tt{font-size:22px}
  .cp-txt{font-size:17px}
  .cp-rec{padding:22px 20px 4px}
  .cp-rec ol{grid-template-columns:minmax(0,1fr);gap:0;margin-top:18px}
  .cp-rec li{padding:0 0 18px 26px}
  .cp-rec li::before{left:5px;right:auto;top:6px;bottom:0;width:1px;height:auto}
  .cp-rec li:last-child::before{display:none}
  .cp-rec span{margin-top:6px}
}
@media (max-width:600px){.cp-grid.four{grid-template-columns:minmax(0,1fr)}}

/* Pictures (owner, 14 Oct 2026: "no page is just text"). A wide picture across the top of a tray; a picture beside a
   column of cards (sides swap down the page); a picture frame on a work card. */
.cp-band{margin:0 0 16px;border-radius:20px;overflow:hidden;background:var(--t-bg,var(--oat))}
.cp-band .ph{width:100%;aspect-ratio:21/9}
.cp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.cp-split.flip>.cp-side{order:2}
.cp-side{margin:0;border-radius:20px;overflow:hidden;background:var(--t-bg,var(--oat))}
.cp-side .ph{width:100%;height:100%;min-height:360px}
.cp-stack{display:grid;gap:16px}
.cp .card>.frame:first-child .ph{display:grid}
@media (max-width:900px){
  .cp-band .ph{aspect-ratio:16/10}
  .cp-split{grid-template-columns:minmax(0,1fr)}
  .cp-split.flip>.cp-side{order:0}
  .cp-side .ph{min-height:0;height:auto;aspect-ratio:16/10}
}
@media (max-width:600px){.cp-band .ph{aspect-ratio:4/3}.cp-side .ph{aspect-ratio:4/3}}
.cp-grid+.cp-band{margin:16px 0 0}

/* Phones (owner, 14 Oct 2026: "fix the phone gaps too"). Short linked cards (a title and a line) sit two to a row,
   as "Keep exploring" does site-wide, so the end of each page is not a long column of words. */
@media (max-width:600px){
  .cp-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cp .tray:has(>.cp-grid.four){padding:16px}
  .cp .cp-grid.four .card{padding:14px;gap:6px}
  .cp .cp-grid.four .card .tt{font-size:15px;line-height:1.3;letter-spacing:-.2px}
  .cp .cp-grid.four .card p{font-size:13px;line-height:18px}
  .cp .cp-grid.four .card-foot{gap:8px}
  .cp .cp-grid.four .card-foot .code{font-size:12px;min-width:0}
}
/* the wide picture of "What we work on" lives among its cards: across the top (or the foot, .cp-end) on a desktop,
   after the third card on a phone, so the stack of six is broken in the middle */
.cp-grid>.cp-mid{grid-column:1/-1;order:-1;margin:0}
.cp-grid>.cp-mid.cp-end{order:99}
@media (max-width:900px){
  .cp-grid>.cp-mid,.cp-grid>.cp-mid.cp-end{order:1}
  .cp-grid:has(>.cp-mid)>div.card:nth-of-type(n+4){order:2}
  .cp-grid:has(>.cp-mid.at4)>div.card:nth-of-type(4),.cp-grid:has(>.cp-mid.at5)>div.card:nth-of-type(-n+5){order:0}
  /* a record grid of words and pictures alternates on a phone, a picture first */
  .cp-grid.cp-mix>:nth-child(4){order:1}.cp-grid.cp-mix>:nth-child(1){order:2}.cp-grid.cp-mix>:nth-child(5){order:3}
  .cp-grid.cp-mix>:nth-child(2){order:4}.cp-grid.cp-mix>:nth-child(6){order:5}.cp-grid.cp-mix>:nth-child(3){order:6}
}
/* phones: a slimmer tray and card edge, so the words run wider and the stacks run shorter */
@media (max-width:600px){
  .cp .tray{padding:16px}
  .cp .card{padding:18px}
  .cp .card>.frame:first-child{margin:-8px -8px 8px}
  .cp .card>.dgm:first-child{margin:-18px -18px 10px}  /* a diagram runs to the card edge, so its words stay readable */
  .cp-rec{padding:20px 18px 2px}
}
@media (max-width:420px){.cp-btns .btn{white-space:normal;max-width:100%;text-align:left}}
/* small phones: "Transformation" is the longest word in any capability title; keep it inside the screen at 360 */
@media (max-width:400px){.cp-hero h1{font-size:clamp(36px,11vw,46px)}}