/* Inner-page additions, 17 Oct 2026 (ideas from the Usarion teardown, rebuilt in our tokens).
   Loaded after pages.css on service, case study, work and general pages. Token values only:
   ink #050505, white, sheet #F6F6F6, line #E6E6E6, text-2 #444, mute #555, accent #FF3C00;
   type 12 (labels) / 14 / 16 / 18 / 20 / 24 / 32 / 64; radius 4px cards, 2px boxes, 0 for flush pictures; no shadows. */

/* ---------- Related links: one line on when you'd need it ---------- */
.p-rel-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html body .p-rel-why { font: 400 14px/20px var(--p-font); color: var(--p-text-2); text-wrap: pretty; }

/* ---------- Price band: what moves the price (case chips) ---------- */
.p-drivers { margin-top: 24px; }
.p-drivers ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.p-drivers li, .p-wtags li { padding: 4px 8px; border-radius: var(--p-r-box); background: var(--p-sheet); font: 400 14px/20px var(--p-font); color: var(--p-text-2); }

/* ---------- Review: platform tile beside the quote ---------- */
.p-review { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1101px) { .p-review { grid-template-columns: 320px minmax(0, 1fr); } }
.p-rtile { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); color: var(--p-ink); transition: background-color var(--p-ease); }
@media (min-width: 761px) { .p-rtile { padding: 40px; } }
.p-rtile:hover { background: var(--p-sheet); }
.p-rtile:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; }
.p-rscore { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 600 64px/64px var(--p-font); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.p-rscore svg { width: 24px; height: 24px; fill: var(--p-accent); }
html body .p-rtile .p-body { color: var(--p-text-2); }
html body .p-rtile .p-body + .p-body { margin-top: 0; }
html body .p-rtile .p-src { margin-top: auto; padding-top: 16px; }

/* ---------- Case study: service link under the facts ---------- */
.p-wsvc { margin: 24px 0 0; }

/* ---------- Case study: the site's colours and type ---------- */
.p-sys { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.p-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .p-swatches { grid-template-columns: 1fr; gap: 16px; } .p-swatches li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; } .p-swatches .p-swatch { grid-row: 1 / 4; aspect-ratio: 1; } html body .p-swatches .p-t20 { margin-top: 0; } }
@media (min-width: 761px) { .p-swatches { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; } }
.p-swatch { display: block; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--p-r-card); box-shadow: inset 0 0 0 1px var(--p-line); }
html body .p-swatches .p-t20 { margin-top: 16px; }
html body .p-hex { margin: 4px 0 0; font: 500 14px/20px var(--p-font); color: var(--p-mute); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
html body .p-swatches .p-body { margin-top: 8px; font-size: 14px; line-height: 20px; }
.p-fonts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--p-line); }
.p-fonts li { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--p-line); }
@media (min-width: 761px) { .p-fonts li { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; } }

/* ---------- /work wall: industry word behind three real pictures ---------- */
.p-wall { display: grid; grid-template-columns: 1fr; gap: 64px 24px; }
@media (min-width: 761px) { .p-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-wcard { display: flex; flex-direction: column; min-width: 0; }
.p-wpic { position: relative; display: block; aspect-ratio: 16 / 11; max-width: 100%; overflow: hidden; border-radius: var(--p-r-card); background: var(--p-sheet); }
.p-wword { position: absolute; top: 24px; left: 24px; right: 24px; font: 600 40px/44px var(--p-font); letter-spacing: -0.04em; color: var(--p-ink); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (min-width: 1101px) { .p-wword { top: 32px; left: 32px; font-size: 64px; line-height: 64px; } }
.p-wgrid { position: absolute; left: 24px; right: 24px; bottom: 0; top: 96px; display: grid; gap: 8px; }
@media (min-width: 1101px) { .p-wgrid { left: 32px; right: 32px; top: 128px; } }
.p-wgrid-3 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: 1fr 1fr; }
.p-wgrid-3 > :first-child { grid-row: 1 / 3; }
.p-wgrid-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.p-wgrid-1 { grid-template-columns: 1fr; }
/* odd count: the first case runs full width so no card sits alone in the last row */
@media (min-width: 761px) { .p-wall > .p-wcard:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .p-wall > .p-wcard:first-child:nth-last-child(odd) .p-wpic { aspect-ratio: 16 / 7; } }
.p-wimg { position: relative; display: block; overflow: hidden; border-radius: var(--p-r-box) var(--p-r-box) 0 0; box-shadow: inset 0 0 0 1px var(--p-line); background: var(--p-white); }
.p-wgrid-3 > :not(:first-child) { border-radius: var(--p-r-box); }
.p-wgrid-3 > :last-child { border-radius: var(--p-r-box) var(--p-r-box) 0 0; }
.p-wimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.p-wimg-phone img { object-fit: cover; object-position: top center; }
.p-wbody { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.p-wbody .p-t24 a { color: inherit; text-decoration: none; }
.p-wbody .p-t24 a:focus-visible { outline: 2px solid var(--p-accent-deep); outline-offset: 2px; border-radius: var(--p-r-box); }
.p-wtags { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }

/* four checks fill two columns instead of leaving one alone */
@media (min-width: 1101px) { .p-checks:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }