/* Inner pages on the ruled grid from blocks.css: cells placed with --c / --r, row heights from --rows (px at 1440).
   Breakpoints as the home page: two columns below 1080, one below 700 */

:root { --steel: #4c606e; --soft: #2c3339; --glow: rgba(10, 13, 16, .55); }
:root[data-theme="dark"] { --soft: #d9d5cc; --glow: rgba(244, 242, 237, .6); }

/* ---------- placement and rows */
.rows { grid-template-rows: var(--rows); }
.at { grid-column: var(--c, auto); grid-row: var(--r, auto); }
.cell.col { display: flex; flex-direction: column; }
.cell.between { justify-content: space-between; }
.cell.between > :only-child { margin-top: auto; }   /* a lone display word still sits at the foot of its block */
.cell.end { justify-content: flex-end; }
.cell.pad0 { padding: 0; }
.cell.card { background: var(--card); }
.cell.steel { background: var(--steel); color: #f4f2ed; }
.cell.inv { background: var(--tile-a); color: var(--tile-a-ink); }   /* the page colour inverted: ink in light, paper in dark */
.cell.e { background: var(--bg); }
.cell p, .cell h1, .cell h2, .cell h3 { margin: 0; }

/* ---------- type */
.t-word { margin: 0; font-weight: 400; font-size: calc(var(--w, 200) * var(--s)); line-height: .98; letter-spacing: -0.04em; }
.t-xl { font-size: var(--t-xl); line-height: 1.18; letter-spacing: -0.02em; font-weight: 400; }
.t-xxl { font-size: var(--t-xxl); line-height: 1.14; letter-spacing: -0.025em; font-weight: 400; }
.t-lg { font-size: var(--t-lg); line-height: 1.22; letter-spacing: -0.02em; font-weight: 400; }
.t-md { font-size: var(--t-md); line-height: 1.5; }
.t-p { font-size: var(--t-p); line-height: 1.75; color: var(--tx-3); max-width: 560px; }
/* running text in body tone, leads and statements in the intermediate; headings, figures and links stay bright (tokens.css) */
:where(.cell > p) { color: var(--tx-3); }
:where(.t-lg, .t-md) > p, p:is(.t-lg, .t-md), .hero2 .t-p { color: var(--tx-2); }
.card-post .cp-foot .t-p { color: var(--tx-3); }.dim { color: var(--muted); }
/* a line of short facts told apart by tone and space; .dim is muted */
.kv { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kv > :first-child { color: var(--tx-1); }
.cell.ink .dim, .cell.card .dim { color: inherit; opacity: .6; }
.cell.gold .t-p { color: var(--on-gold); }
.cell.gold .dim { color: var(--on-gold); opacity: .7; }
.dim-card { opacity: .6; }
.mono.dim-card { position: absolute; left: 24px; bottom: 24px; }
.cell .label { position: relative; }

/* ---------- illustrations and windows */
.cell.illo { padding: 0; }
.cell.illo > .label { position: absolute; left: 24px; top: 24px; z-index: 2; }
.cell.win { background: transparent; }

/* ---------- misc */
.cell.win > .label { position: absolute; left: 24px; top: 24px; }
.lst.deliver { grid-auto-rows: minmax(160px, auto); }
.cni-item { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; min-height: 160px; }
.cni-item .t-lg { font-size: var(--t-ml); max-width: 360px; }
.cni-close .t-lg { font-size: var(--t-ml); line-height: 1.3; color: var(--tx-1); max-width: none; }.cni-close .prose { font-size: var(--t-p); }
.cni-close .prose p + p { margin-top: 1em; }
.subnav { position: sticky; top: var(--hh); z-index: 20; }
@media (max-width: 1080px) { .subnav { position: relative; top: auto; } .cni-item { grid-template-columns: 1fr; } }

/* ---------- hero (960) */
.hero2 .hp-word { display: flex; align-items: flex-end; padding: 0 24px 28px; }
.hero2 .t-word { white-space: nowrap; }
.hero2.co .t-word { white-space: normal; max-width: 1000px; }
.hero2 .cell p { max-width: 312px; }
.hero2 .gold p { max-width: 312px; }
.hero2.eq .gold p { max-width: 400px; }.hero2.co .ink { gap: 48px; }
.hero2.co .ink p { max-width: 13.125em; font-size: var(--t-lg); line-height: 1.22; letter-spacing: -0.02em; }.hero2 .cta-block, .hero2 .link { font-size: 12px; }
.link .ar .swap, .cta-block .ar .swap { width: 18px; height: 18px; }

/* ---------- services rows */
.rc .rc-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.rc .rc-title .go { display: flex; align-items: center; height: calc(32px * 1.22); color: var(--gold); }.rc .cell p { max-width: 640px; }

/* ---------- cards across (services audiences, three words, etc.) */
.aud .cell { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.aud .cell .t-lg { margin-top: 18px; }
.aud .cell .t-lg:first-child { margin-top: 0; }
.aud .cell .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.aud .go { color: var(--gold); font-size: 22px; }
.aud .go .swap, .rc .go .swap, .card-post .go .swap { width: 24px; height: 24px; }

/* ---------- statements */
.stmt .cell.txt { display: flex; flex-direction: column; }
.stmt .cell.txt .t-xl { max-width: 880px; }
.stmt .cell.txt .t-p { margin-top: 72px; max-width: 520px; }
.stmt .cell.txt .t-xxl { max-width: 960px; margin-top: 48px; }
.stmt .cell.txt .bot { margin-top: auto; }

/* ---------- three words */
.words .t-lg { max-width: 312px; }
.words .w1, .words .w2 { display: flex; flex-direction: column; justify-content: space-between; }
/* pinned words: ten rows deep, words start two rows apart so each pins at the header in turn (staircase 480 / 360 / 240);
   .wp cells and --rp keep the grid whole */
.words .wp { display: none; }
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
  .sec.words { grid-template-rows: repeat(10, 120px); }
  .words .at { grid-row: var(--rp, var(--r)); }
  .words .wp { display: block; }
  .words :is(.w1, .w2, .w3) { position: sticky; top: var(--hh); z-index: 2; }
}

/* ---------- list sections: rows left, big heading right (How we help, What we deliver) */
.lst .row { display: flex; justify-content: space-between; gap: 24px; align-items: stretch; }
.lst .row .txt { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.lst .row .t-p { max-width: 560px; }
/* the icon is a square window at the row's right end, flush with the block's top, right and bottom edges */
.lst .row .ring { flex: none; align-self: stretch; aspect-ratio: 1; margin: -24px -24px -24px 0; overflow: hidden; position: relative;
                  box-shadow: inset var(--hair) 0 0 0 var(--rule); }
.lst .row .ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* lst-l (Private Clients How we help): the icon window sits at the row's left end, its rule on its right edge */
.lst-l .row { justify-content: flex-start; }   /* short rows keep their text beside the icon */
.lst-l .row .ring { order: -1; margin: -24px 0 -24px -24px; box-shadow: inset calc(-1 * var(--hair)) 0 0 0 var(--rule); }
.lst .head { position: sticky; top: var(--hh); align-self: start; min-height: 360px; }
.lst .head .t-word { --w: 120; max-width: 640px; }
.lst .row.svc { flex-direction: column; justify-content: flex-start; gap: 0; }.lst .row.svc .t-lg { font-size: var(--t-ml); margin-top: 16px; }
.lst .row.svc .t-p { margin-top: auto; padding-top: 28px; }

/* ---------- equestrian risks / levels / case */
.risks .cell { display: flex; align-items: flex-end; }
.levels .cell { display: flex; flex-direction: column; }
.levels .bars { display: grid; gap: 8px; }
.levels .bars i { display: block; height: 12px; border: 1px solid var(--rule); opacity: .55; }
.levels .bars i.on { background: var(--gold); border-color: var(--gold); opacity: 1; }
.levels .name { margin-top: 72px; }
.levels .t-p { margin-top: auto; }
/* columns slide in on scroll (site.js), each over the next */
@media (min-width: 1081px) {
  .levels { overflow-x: clip; }
  .levels > .cell:nth-of-type(1) { z-index: 4; }
  .levels > .cell:nth-of-type(2) { z-index: 3; }
  .levels > .cell:nth-of-type(3) { z-index: 2; }
}
.case .stack { display: flex; flex-direction: column; justify-content: space-between; }
.case .main { display: flex; flex-direction: column; }
.case .main .t-xl { margin-top: 56px; max-width: 560px; }
.case .main .bot { margin-top: auto; display: grid; gap: 32px; }
.case .case-img img { object-position: left top; }   /* the horse faces left: keep its head in the narrow cell */
/* images in the grid redraw their block's rules above the image */
:is(.case-img, .cni-img) img { height: 116%; top: -8%; bottom: auto; will-change: transform; }   /* room to drift (site.js [data-drift]) */
:is(.case-img, .cni-img, .f-img, .art-img, .pp-img)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset var(--hair) var(--hair) 0 0 var(--rc), inset calc(-1 * var(--hair)) 0 0 0 var(--rr); }

/* ---------- people */
.portrait-c { position: relative; padding: 0; }
.portrait-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- corporate */
.steps .cell { display: flex; flex-direction: column; }
.steps .cell .t-xl { margin-top: auto; padding-bottom: 28px; }
.marq { height: 120px; display: flex; align-items: center; overflow: hidden; padding: 0; }
.marq .track { display: inline-flex; align-items: center; white-space: nowrap; animation: marq 60s linear infinite; font-size: var(--t-lg); letter-spacing: -0.02em; }
.marq .sep { display: inline-block; width: 14px; height: 26px; background: currentColor; margin: 0 36px; flex: none; }
@keyframes marq { to { transform: translateX(-50%); } }
.cni .cell.txt { display: flex; flex-direction: column; gap: 22px; }
.cni .cell.txt .t-xl { max-width: 760px; }
.cni .cell.txt .t-p { max-width: 640px; }
.cni .cell.txt .t-md { max-width: 640px; }
.cni .cni-img img { object-position: center; }

/* ---------- about */
.ledger .cell { display: flex; flex-direction: column; justify-content: space-between; }
.ledger .fig { font-size: calc(120 * var(--s)); line-height: 1; letter-spacing: -0.04em; }
.ledger .fig + p { min-height: 36px; }/* badges centre on the figures' line */
.ledger .mq { display: flex; align-items: center; min-height: calc(120 * var(--s)); margin-bottom: 50px; }
.story .t-xxl { max-width: 17.85em; margin-top: 56px; }
.founder2 .t-lg { margin-top: 40px; max-width: 640px; font-size: var(--t-ml); line-height: 1.32; }
.founder2 .cell.ink { padding: 48px; }
.founder2 .who { margin-top: auto; padding-top: 48px; }
.founder2 .who strong { display: block; font-weight: 400; font-size: var(--t-md); }
.founder2 .t-p { margin-top: 40px; max-width: 520px; }
.three { grid-template-columns: var(--c3); }
.three .cell { display: flex; flex-direction: column; justify-content: space-between; }
.three .cell .t-xl { margin: auto 0; max-width: 300px; }

/* ---------- contact */
.form-cell { display: flex; flex-direction: column; }
.form-cell .t-lg { max-width: 640px; }
.srg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 56px; }
.srg-form .f { display: flex; flex-direction: column; gap: 8px; }
.srg-form .f.full { grid-column: 1 / -1; }
.srg-form label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0; text-transform: uppercase; color: var(--muted); }
.srg-form input, .srg-form select, .srg-form textarea { font: inherit; font-size: 16px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 10px 0; width: 100%; appearance: none; -webkit-appearance: none; }
.srg-form select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.srg-form select option { color: #0a0d10; }
.srg-form textarea { min-height: 120px; resize: vertical; }
.srg-form input:focus, .srg-form select:focus, .srg-form textarea:focus { outline: 0; border-bottom-color: var(--gold); }
.srg-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.srg-form button { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; background: var(--block); color: var(--block-ink); border: 0; padding: 22px 24px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; cursor: pointer; }
.srg-form .note { grid-column: 1 / -1; color: var(--muted); }
.srg-form .note a { color: inherit; }
.srg-form .err, .form-ok { grid-column: 1 / -1; font-size: var(--t-p); padding: 14px 16px; border: 1px solid var(--gold); }
.form-off { margin-top: 56px; max-width: 640px; }
.form-off a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.direct a { display: block; margin-top: 10px; font-size: var(--t-md); text-decoration: none; }
.direct .label { margin-bottom: 22px; }

/* ---------- insights */
.filter { display: flex; flex-wrap: nowrap; height: 72px; overflow-x: auto; scrollbar-width: none; }
.filter .cell { flex: none; display: flex; align-items: center; padding: 0 24px; white-space: nowrap; text-decoration: none; }
.filter .cell.sp { flex: 1; justify-content: flex-end; color: var(--muted); }
.filter .cell.on { background: var(--block); color: var(--block-ink); box-shadow: var(--rules), inset 0 -3px 0 var(--gold); }
.grid3 { grid-template-columns: var(--c3); }
.card-post { display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; text-decoration: none; }
.card-post .t-lg { margin-top: 18px; max-width: 360px; }
.card-post .cp-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.card-post .cp-foot .t-p { max-width: 340px; }
.card-post .go { color: var(--ink); font-size: 22px; flex: none; }
.card-post.ink .go { color: var(--gold); }
.empty-state { min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; }
/* pager: every number and arrow is a 72px square */
.pager { display: flex; height: 72px; font-size: 20px; line-height: 1; }.pager .cell { display: flex; align-items: center; justify-content: center; width: 72px; flex: none; padding: 0; text-decoration: none; }
.pager .cell.sp { flex: 1; }
.pager .cell .swap { width: 1.2em; height: 1.2em; vertical-align: 0; }
.pager .cell.on { background: var(--block); color: var(--block-ink); }
.featured .cell.ink { display: flex; flex-direction: column; justify-content: space-between; }
.featured .t-word { --w: 84; max-width: 1000px; letter-spacing: -0.03em; line-height: 1; }
.featured .link { align-self: flex-start; color: inherit; }
/* featured article and header fill one screen */
.featured { --vh: 100vh; --feat-h: max(520px, calc(var(--vh) - var(--hh))); }
@supports (height: 100svh) { .featured { --vh: 100svh; } }
/* the grid's ring windows only complete its last row, each at its own column count */
.grid3 .win-c2 { display: none; }
.toc-m { display: none; }   /* the phone and tablet contents bar (below 1080) */
@media (min-width: 701px) and (max-width: 1080px) {
  .grid3 .win-c3 { display: none; }
  .grid3 .win-c2 { display: block; }
}
/* index images: featured in columns 3 to 4, card images at the top; both drift on scroll (site.js) so are drawn taller than their frames */
.featured.has-img .t-word { --w: 64; }
.f-img { padding: 0; background: var(--card); }
.card-post.has-img { justify-content: flex-start; }
.card-post .cp-img { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; overflow: clip; background: var(--card); margin: -24px -24px 28px; }
.card-post .cp-img::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* its block's rules, plus one under the picture */
  box-shadow: inset var(--hair) var(--hair) 0 0 var(--rc), inset calc(-1 * var(--hair)) 0 0 0 var(--rr), inset 0 calc(-1 * var(--hair)) 0 0 var(--rc); }
/* pictures are 16:9 of a whole-pixel column so the height matches across a row (the last column takes spare pixels) */
@supports (width: round(down, 10%, 1px)) and (container-type: inline-size) {
  .grid3 { container-type: inline-size; }
  .card-post .cp-img { aspect-ratio: auto; height: calc(round(down, 100cqi / 3, 1px) * 9 / 16); }
  @media (max-width: 1080px) { .card-post .cp-img { height: calc(round(down, 100cqi / 2, 1px) * 9 / 16); } }
  @media (max-width: 700px) { .card-post .cp-img { height: auto; aspect-ratio: 16 / 9; } }
}
/* zoom the picture while its card is hovered (scale, so the scroll drift's transform is untouched) */
.ready .card-post .cp-img img { transition: scale 1.2s var(--ease); }
.card-post:is(:hover, :focus-visible) .cp-img img { scale: 1.06; }
.card-post.has-img .cp-foot { margin-top: auto; padding-top: 32px; }
:is(.f-img, .cp-img) img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; display: block; will-change: transform; }

/* ---------- article */
.rail .meta { margin-top: 56px; display: grid; }
.rail .meta div { border-top: 1px solid var(--rule); padding: 12px 0 14px; }
.rail .meta span { display: block; font-size: 12px; }
.rail .meta .k { color: var(--muted); }
.rail .back { text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; align-self: stretch; }
.rail .back .swap { width: 16px; height: 16px; }
.art-hero .t-word { --w: 80; max-width: 860px; letter-spacing: -0.03em; line-height: 1; }
.art-hero .stand { margin-top: 48px; font-size: var(--t-ml); line-height: 1.45; max-width: 640px; color: var(--tx-2); }
.art-hero .art-title { padding-bottom: 72px; }.art-img { padding: 0; position: relative; background: var(--card); }
.art-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.art-img .mono { position: absolute; left: 24px; top: 24px; opacity: .6; }
/* article image slides over the pinned title section; drawn larger so the drift has room */
.pin-art > .art-hero { position: sticky; top: min(var(--hh), calc(100vh - var(--art-h, 480px))); z-index: 0; }   /* --art-h: set by site.js */
.pin-art > .art-figure { z-index: 1; }
.pin-art .art-img img { height: 116%; top: -8%; bottom: auto; will-change: transform; }
/* drifting pictures arrive as refining blocks on a canvas over them (site.js BLOCKS) */
.blocks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.blocks.on { display: block; }
.prose .pic-frame { display: block; position: relative; width: fit-content; max-width: 100%; margin: 1.6em 0; }
.prose .pic-frame img { margin: 0; display: block; }
.prose figure > .pic-frame { margin: 0; }
/* no top rule on the article picture as it slides over the title */
.pin-art > .art-figure { background: transparent; }
.pin-art .art-img { --rules: inset var(--hair) 0 0 0 var(--rc), inset calc(-1 * var(--hair)) 0 0 0 var(--rr), var(--hair) var(--hair) 0 0 var(--rc); }
.pin-art .art-img::after { box-shadow: inset var(--hair) 0 0 0 var(--rc), inset calc(-1 * var(--hair)) 0 0 0 var(--rr); }
.art-meta { display: none; }
.art-meta .cell span { display: block; font-size: 12px; }  .art-meta .k { color: var(--muted); }
.art-side { position: sticky; top: calc(var(--hh) + 40px); align-self: start; }/* reading progress: gold line over the header's bottom rule, filled by --f (site.js) */
.read-bar { position: fixed; left: 0; right: 0; top: var(--hh); height: 2px; z-index: 31; pointer-events: none; }
.read-bar::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
.art-side .toc { margin-top: 28px; display: grid; }
:is(.art-side, .toc-m) .toc a { border-top: 1px solid var(--rule); padding: 12px 0; text-decoration: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; }
:is(.art-side, .toc-m) .toc a { position: relative; padding-left: 16px; color: var(--muted); transition: color .4s var(--ease); }
/* contents list: gold bar beside the section being read */
:is(.art-side, .toc-m) .toc a::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--gold);
                           transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s var(--ease-io); }
:is(.art-side, .toc-m) .toc a:hover, :is(.art-side, .toc-m) .toc a.on { color: var(--ink); }
:is(.art-side, .toc-m) .toc a.l3 { padding-left: 30px; font-size: 11px; border-top-style: dashed; }
:is(.art-side, .toc-m) .toc a.l3::before { left: 14px; }
:is(.art-side, .toc-m) .toc a:hover::before { transform: scaleY(.4); }
:is(.art-side, .toc-m) .toc a.on::before { transform: scaleY(1); }
.art-side .share { margin-top: 40px; }
.toc-m .share { margin-top: 24px; }
/* share marks: one row of squares on a ruled grid (the gaps show the rule colour) */
:is(.art-side, .toc-m) .share-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--hair); max-width: 420px; margin-top: 12px;
  background: var(--rule); border: var(--hair) solid var(--rule); }
:is(.art-side, .toc-m) .si { aspect-ratio: 1; display: grid; place-items: center; background: var(--bg); color: var(--tx-1); border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; }
:is(.art-side, .toc-m) .si .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
:is(.art-side, .toc-m) .share-msg { display: block; min-height: 1.4em; margin-top: 10px; font-size: 11px; }
.prose { font-size: var(--t-body); line-height: 2.1; letter-spacing: -0.01em; color: var(--tx-3); }
.prose > * { max-width: 640px; }
.prose p { margin: 0 0 1.2em; }
.prose h2 { font-size: var(--t-lg); line-height: 1.22; letter-spacing: -0.02em; font-weight: 400; color: var(--tx-1); margin: 64px 0; scroll-margin-top: calc(var(--hh) + 24px); }
.prose h3 { font-size: 22px; line-height: 1.32; font-weight: 400; color: var(--tx-1); margin: 1.4em 0 .5em; }
.prose h4 { font-size: var(--t-md); font-weight: 400; color: var(--tx-1); margin: 1.2em 0 .4em; }
.prose a, .prose :is(strong, b) { color: var(--tx-1); }
.prose a { text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose img, .prose figure { max-width: 100%; height: auto; margin: 1.6em 0; }
.prose figcaption { font-size: var(--t-sm); color: var(--muted); margin-top: 8px; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--gold); font-size: var(--t-ml); line-height: 1.38; letter-spacing: -0.01em; color: var(--tx-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--t-p); }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 8px 10px 8px 0; text-align: left; }
.prose .wp-block-embed, .prose iframe { max-width: 100%; }
.prose .clause-no { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); margin-right: 10px; }
.legal-wrap { padding: 72px 24px 120px; }
.legal-wrap .prose h2 { font-size: var(--t-ml); }
.author .t-lg { margin-top: 28px; }
.author .t-p { margin-top: 28px; max-width: 560px; }
.author a.more { display: flex; flex-direction: column; justify-content: space-between; }
.author .go { color: var(--gold); font-size: 28px; transition: transform .4s var(--ease); }

/* ---------- capability */
.subnav { display: grid; grid-template-columns: var(--c5); height: 72px; }
.subnav a.cell { display: flex; align-items: center; padding: 0 24px; text-decoration: none; color: var(--muted); }
.subnav a.cell b { font-weight: 400; margin-right: 16px; }
.subnav a.cell.on { background: var(--gold-cell); color: var(--on-gold); }
.cap-hero .word-cell { display: flex; flex-direction: column; justify-content: space-between; }
.cap-hero .word-cell .t-word { --w: 130; }
.cap-hero .cell.ink .t-word { color: var(--block-ink); }
.cap-hero.A .word-cell { --c: 1/3; --r: 1/3; }
.covers .rail-col { position: relative; padding: 0; }
/* column pins under the header and sub-nav; the illustration is the pin's foot */
.covers .rail-col .pin { position: sticky; top: calc(var(--hh) + 72px); }
.covers .rail-col .pin .illo-c { position: relative; aspect-ratio: 1; }
.covers .rail-col .pin .illo-c canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.covers .intro .t-xxl { max-width: 760px; }
.covers .intro .t-p { margin-top: 40px; max-width: 560px; }
.covers .ct { display: flex; align-items: center; }
.covers .ct .t-word { --w: 100; }
.covers .item { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.covers .item .t-lg { font-size: var(--t-ml); max-width: 320px; }
.covers .item .t-p { font-size: var(--t-sm); max-width: 420px; }

/* ---------- 404 and plain */
.plain { min-height: 40vh; }

/* ---------- below 1080: two columns */
@media (max-width: 1080px) {
  .rows { grid-template-rows: none; grid-auto-rows: minmax(220px, auto); }
  .strip.rows { grid-auto-rows: minmax(72px, auto); }   /* label strips keep their desktop height */
  .at { grid-column: 1 / -1; grid-row: auto; }
  .at.half { grid-column: auto; }
  .hero2 .hp-word { min-height: 380px; }
  .hero2 .t-word { font-size: min(200px, 22vw); white-space: normal; }
  .cell.win, .cell.illo { min-height: 240px; }
  .stmt .cell.txt .t-p { margin-top: 40px; }
  .grid3, .three, .subnav { grid-template-columns: var(--c2); }
  .subnav { height: auto; grid-template-columns: var(--c3); }
  .subnav a.cell { height: 56px; }
  .three .cell { min-height: 320px; }
  .lst .head { position: relative; top: auto; min-height: 0; order: -1; }
  .words .e { display: none; }  .founder2 .who { margin-top: 72px; }   /* stacked, the block has no spare height to push the name down */
  .founder2 .t-lg, .founder2 .t-p { margin-top: 56px; }
  .founder2 .cell.ink { padding: 40px; }
  .founder2 .who strong { margin-bottom: 8px; }
  .lst .head .t-word { --w: 72; }
  .lst.deliver { grid-auto-rows: auto; }  .lst.deliver .row.svc { min-height: 160px; }
  .covers .rail-col { display: none; }  .covers .item { grid-template-columns: 1fr; }
  .case .main .t-xl { margin-bottom: 40px; }  .case .case-img { width: 100%; aspect-ratio: 4 / 3; max-height: 640px; }   /* stacked: the image at a set shape (full width once max-height caps it) */
  .case .main { order: -2; }
  .case .case-img { order: -1; }  .stmt .cell.txt .bot { margin-top: 40px; }  .cni .cni-img { width: 100%; aspect-ratio: 4 / 3; max-height: 640px; }   /* stacked: the image at a set shape below the text (full width once max-height caps it) */
  .cni .txt + .win { display: none; }  .portrait-c.has-img:not(.case-img, .cni-img) { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; }   /* stacked portraits: tall enough to show the face, not just the top of the head */
  .art-hero .t-word { --w: 56; }
  /* phones and tablets: a contents bar under the header while the article is read (site.js .toc-m.show); it opens into the list */
  .toc-m { display: block; position: fixed; left: 0; right: 0; top: var(--hh); z-index: 29; transform: translateY(-100%); visibility: hidden;
           transition: transform .4s var(--ease), visibility 0s linear .4s; }
  .toc-m.show { transform: none; visibility: visible; transition: transform .4s var(--ease); }
  .toc-m-btn { width: 100%; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 24px; border: 0; cursor: pointer; background: var(--bg); color: var(--tx-1);
               box-shadow: inset 0 calc(-1 * var(--hair)) 0 0 var(--rule); font: 12px/1 "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .toc-m-btn .cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
  .toc-m-list { display: none; max-height: calc(100svh - var(--hh) - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 16px; background: var(--bg);
                box-shadow: inset 0 calc(-1 * var(--hair)) 0 0 var(--rule); }
  .toc-m.open .toc-m-list { display: block; }  .toc-m .toc { display: grid; }
  .featured .t-word { --w: 56; }
  /* article with a picture: the hero is just the way back and the title, pinned; the picture fills the screen as it slides over it,
     and the details follow it (.art-meta) */
  .pin-art .art-hero { grid-auto-rows: auto; }
  .pin-art .art-hero .meta, .pin-art .art-hero .win { display: none; }
  .pin-art .art-figure.rows { grid-template-rows: calc(100vh - var(--hh)); grid-template-rows: calc(100svh - var(--hh)); grid-auto-rows: auto; }
  .art-meta { display: grid; }
  .art-meta .cell { min-height: 0; padding-block: 16px 18px; }
  .f-img { aspect-ratio: 16 / 9; order: -1; }  /* featured stacked: at least one screen with the header; image takes the rest, min 16:9 or 40% of the screen */
  .featured.rows { min-height: var(--feat-h); grid-template-rows: auto; grid-auto-rows: minmax(240px, 1fr); }
  .featured.has-img.rows { grid-template-rows: 1fr auto; }
  .featured .f-img { aspect-ratio: auto; min-height: min(56.25vw, 40vh); }
  .featured .cell.ink { gap: 32px; }
  .featured .t-word { font-size: max(32px, calc(var(--w) * var(--s))); }   /* never smaller than a card's title */
  .art-side { position: relative; top: auto; }
  .srg-form { grid-template-columns: 1fr; }
  .card-post { min-height: 300px; }
}
@media (max-width: 700px) {
  .art-hero .t-word { font-size: 34px; line-height: 1.08; }
  .art-meta { grid-template-columns: var(--c2); }
  .founder2 .cell.ink { padding: 32px 24px; }
  .art-hero .stand { margin-top: 28px; font-size: var(--t-md); }
  .grid3, .three { grid-template-columns: 1fr; }
  .subnav { grid-template-columns: var(--c2); }
  .at.half { grid-column: 1 / -1; }
  .hero2 .t-word { font-size: 24vw; }
  .lst.deliver .head .t-word { font-size: 44px; }   /* stays above the row titles */
  .cell.win { display: none; }
  .cni .cni-img { order: -1; aspect-ratio: 10 / 9; }  .link, .sectors .intro .link, .featured .link { display: flex; align-self: stretch; justify-content: space-between; }  .hero2 .cell.win, .cell.illo { min-height: 200px; }
  .stmt .cell.txt p.mono.bot { font-size: 14px; line-height: 20px; }
  .lst .row { flex-direction: column; }
  .lst .row .ring, .lst-l .row .ring { order: 0; aspect-ratio: auto; height: 200px; margin: 0 -24px -24px; box-shadow: inset 0 var(--hair) 0 0 var(--rule); }  .filter .cell { padding: 0 16px; }
}
/* ---------- team: two people per row on tablets (--tc, --tr from inc/sections.php), stacked on phones */
.people [data-pp-gap] { display: none; }
@media (max-width: 1080px) {
  .people .pp, .people .pp-t { grid-column: var(--tc); grid-row: var(--tr); }
  .people .pp { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; }
  .people .pp-t { min-height: 360px; padding-block: 40px; gap: 32px; }
  .people .cell.win { display: none; }
  .people .cell.win[data-pp-gap] { display: block; grid-column: 2; grid-row: var(--tr) / span 2; }
}
@media (max-width: 700px) {
  .people .pp, .people .pp-t { grid-column: 1 / -1; grid-row: auto; }
  .people .pp-t { min-height: 320px; }
  .people .cell.win[data-pp-gap] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marq .track { animation: none; }
  .card-post .cp-img img { transition: none; }
}

/* Cookie consent (inc/consent.php): a ruled panel bottom left, three equal buttons so rejecting is as easy as accepting */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - var(--hh) - 32px); overflow-y: auto; overflow-x: hidden;
  background: var(--bg); color: var(--ink); border: var(--hair) solid var(--rule); padding: 28px 28px 0;
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.consent.on { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent .label { margin: 0 0 14px; font-size: 11px; text-transform: uppercase; color: var(--muted); outline: 0; }
.consent-txt { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--tx-2); }
.consent-txt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent-opts { margin-top: 20px; border-top: var(--hair) solid var(--rule); }
.copt { display: grid; grid-template-columns: 18px 1fr; gap: 14px; padding: 16px 0; border-bottom: var(--hair) solid var(--rule); font-size: var(--t-sm); line-height: 1.55; color: var(--tx-3); cursor: pointer; }
.copt strong { display: block; color: var(--tx-1); font-weight: 400; }
.copt input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: var(--hair) solid var(--rule); border-radius: 0; background: transparent; cursor: pointer; }
.copt input:checked { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 3px var(--bg); }
.copt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent-btns { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px -28px 0; border-top: var(--hair) solid var(--rule); }
.consent-btns .cbtn + .cbtn { border-left: var(--hair) solid var(--rule); }
.cbtn { position: relative; isolation: isolate; background: var(--block); color: var(--block-ink); border: 0; border-radius: 0; padding: 18px 12px;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; cursor: pointer; }
.cbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@media (max-width: 700px) {
  .consent { left: 0; bottom: 0; width: 100%; border-width: var(--hair) 0 0; padding: 22px 16px 0; }
  .consent-btns { margin: 20px -16px 0; }
}

/* a third-party post waiting for the visitor's go-ahead */
.consent-embed { margin: 32px 0; padding: 28px; border: var(--hair) solid var(--rule); max-width: 560px; }
.consent-embed .label { margin: 0 0 12px; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.consent-embed p { margin: 0; }
.consent-embed-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 20px !important; }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }