/* ==========================================================================
   Project page — a faithful copy of the live innovinto.digital project
   template (measured at 1440px). Generated by admin/js/render.js; header,
   footer, lightbox and share links come from components.css / main.js.
   ========================================================================== */

.page-project { --pj-gap: 120px; background: var(--c-light); color: var(--c-navy); }

/* every page shares one side edge (the home page's --gutter), and inside the
   project column one gap (--pj-gap) runs between blocks */
.pj { padding: 160px var(--gutter) 0; }
/* title area: a breadcrumb that starts with the way back, the project name as the headline, then the
   excerpt as a calmer lead in line with the cover, the services beside it */
.pj__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 16px; line-height: 1.2; color: var(--c-muted); }
.pj__crumbs li { display: flex; align-items: center; gap: 12px; }
.pj__crumbs li + li::before { content: "/"; color: rgba(var(--c-navy-rgb), .3); }
.pj__crumbs li:last-child:not(:first-child) { font-weight: var(--fw-medium); color: var(--c-navy); }
.pj__crumbs a { transition: color var(--dur-fast); }
.pj__crumbs a:hover, .pj__crumbs a:focus-visible { color: var(--c-accent); }
.pj__back { display: inline-flex; align-items: center; gap: 10px; color: var(--c-navy); }
.pj__back svg { width: 20px; height: 20px; transition: translate var(--dur) var(--ease); }
.pj__back:hover, .pj__back:focus-visible { color: var(--c-accent); }
.pj__back:hover svg, .pj__back:focus-visible svg { translate: -4px 0; }
.pj__title { margin-top: 26px; font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: var(--fw-light); line-height: 1.04; letter-spacing: -.03em; }
.pj__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pj__excerpt { margin-top: 18px; font-size: clamp(2.25rem, 3.47vw, 3.125rem); font-weight: var(--fw-light); line-height: 1.2; }
/* with words marked **bold** in the admin, those stay dark with a thin purple underline and the rest turns grey */
.pj__excerpt--em { color: #8a8d98; }
.pj__excerpt strong { font-weight: var(--fw-regular); color: var(--c-navy); }
.pj__excerpt--em strong { padding-bottom: 2px; background: var(--grad-brand) 0 100% / 100% 2px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* entrance (js/project.js adds .pj-armed, then .is-in): the name rises word
   by word from behind a mask, the excerpt's words rise one after another and
   its underlines draw from left to right, the breadcrumb and chips fade up */
.pj-armed .pj__title .pj-mask { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.pj-armed .pj__title .pj-mask > span { display: inline-block; translate: 0 110%; transition: translate .9s var(--ease) calc(var(--i, 0) * 70ms); }
.pj-armed .pj__crumbs, .pj-armed .pj__side { opacity: 0; translate: 0 14px; transition: opacity .8s var(--ease) .45s, translate .8s var(--ease) .45s; }
.pj-armed .pj__excerpt .pj-w { display: inline-block; opacity: 0; translate: 0 .35em; transition: opacity .6s var(--ease) calc(.35s + var(--i, 0) * 35ms), translate .6s var(--ease) calc(.35s + var(--i, 0) * 35ms); }
.pj-armed .pj__excerpt--em strong { background-size: 0 2px; transition: background-size .9s var(--ease) var(--u, 1s); }
.pj-armed .pj__side { transition-delay: .9s; }
.pj-armed.is-in .pj__title .pj-mask > span, .pj-armed.is-in .pj__crumbs, .pj-armed.is-in .pj__side, .pj-armed.is-in .pj__excerpt .pj-w { opacity: 1; translate: none; }
.pj-armed.is-in .pj__excerpt--em strong { background-size: 100% 2px; }
.pj-armed .pj__crumbs { transition-delay: .1s; }

.pj__grid { display: grid; grid-template-columns: 23.4% minmax(0, 1fr); column-gap: 6.3%; margin-top: 46px; align-items: start; }

/* left column: it starts level with the cover and stays pinned under the
   header while the page scrolls (js/project.js pins a column taller than the
   screen by its bottom edge). Service chips with how many projects share them
   (hovering one unfolds their covers), a rule, year / industry / platform, a
   small view count, the note, then the previous and next project as two rows. */
.pj__side { position: sticky; top: calc(var(--header-h) + 16px); }
.pj__chips a, .pj__chips label { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid rgba(var(--c-navy-rgb), .25); border-radius: var(--radius-pill); font-size: 13px; line-height: 1; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.pj__chips em { font-style: normal; font-size: 11px; color: var(--c-muted); font-variant-numeric: tabular-nums; transition: color var(--dur-fast); }
/* the recommendation page uses the same chips as a one-choice list (radio buttons inside) */
.pj__chips label { cursor: pointer; }
.pj__chips label input { position: absolute; opacity: 0; pointer-events: none; }
.pj__chips label:has(:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.pj__chips a:hover, .pj__chips a:focus-visible, .pj__chips a.is-on, .pj__chips label:hover, .pj__chips label:has(:checked) { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pj__chips a:hover em, .pj__chips a:focus-visible em, .pj__chips a.is-on em { color: #aab0bd; }
.pj__flys { position: relative; z-index: 5; }
.pj__fly { position: absolute; left: 0; right: 0; top: 10px; padding: 14px; border: 1px solid rgba(var(--c-navy-rgb), .14); border-radius: 18px; background: var(--c-white); }
.pj__fly[hidden] { display: none; }
.pj__fly p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.pj__fly b { font-weight: var(--fw-medium); }
.pj__fly p a { display: inline-flex; align-items: center; gap: 4px; flex: none; font-weight: var(--fw-medium); color: var(--c-accent); }
.pj__fly p a svg { width: 14px; height: 14px; }
.pj__fly-th { display: flex; margin-top: 12px; padding-left: 12px; }
.pj__fly-th a { display: block; width: 58px; height: 58px; margin-left: -12px; overflow: hidden; border: 2.5px solid var(--c-white); border-radius: 14px; background: #d9dce4; transition: transform var(--dur) var(--ease); }
.pj__fly-th a:hover, .pj__fly-th a:focus-visible { z-index: 1; transform: translateY(-4px); }
.pj__fly-th img { width: 100%; height: 100%; object-fit: cover; }
.pj__meta { margin-top: 26px; border-top: 1px solid var(--c-navy); padding-top: 10px; }
.pj__meta div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(var(--c-navy-rgb), .12); font-size: 14px; line-height: 1.35; }
.pj__meta dt { flex: none; color: var(--c-muted); }
.pj__meta dd { text-align: right; }
.pj__meta .pj__client { align-items: center; padding-block: 7px; }
.pj__client img { display: block; width: auto; max-width: 150px; height: 28px; object-fit: contain; object-position: right center; }
.pj__stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 18px; }
.pj__views { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--c-muted); }
.pj__views svg { width: 16px; height: 16px; flex: none; }
.pj__views b { font-weight: var(--fw-regular); color: var(--c-navy); font-variant-numeric: tabular-nums; }
.pj__views i { width: 3px; height: 3px; margin: 0 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.pj__sharebar { display: flex; gap: 5px; }
.pj__sharebar a, .pj__sharebar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(var(--c-navy-rgb), .2); border-radius: 50%; background: none; color: var(--c-navy); cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.pj__sharebar svg { width: 13px; height: 13px; }
.pj__sharebar a:hover, .pj__sharebar a:focus-visible, .pj__sharebar button:hover, .pj__sharebar button:focus-visible { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pj__sharebar button.is-done { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-white); }
.pj__note { display: flex; gap: 8px; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.pj__note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.pj__pn { display: grid; gap: 6px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(var(--c-navy-rgb), .16); }
.pj__pn-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid transparent; border-radius: 18px; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.pj__pn-th { width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: #d9dce4; }
.pj__pn-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pj__pn-row small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.pj__pn-row b { display: block; font-size: 13.5px; font-weight: var(--fw-medium); line-height: 1.3; }
.pj__pn-row i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(var(--c-navy-rgb), .2); border-radius: 50%; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pj__pn-row i svg { width: 15px; height: 15px; transition: translate var(--dur) var(--ease); }
.pj__pn-row:hover, .pj__pn-row:focus-visible { border-color: rgba(var(--c-navy-rgb), .1); background: var(--c-white); }
.pj__pn-row:hover img, .pj__pn-row:focus-visible img { transform: scale(1.12); }
.pj__pn-row:hover i, .pj__pn-row:focus-visible i { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pj__pn-row.is-next:hover i svg, .pj__pn-row.is-next:focus-visible i svg { translate: 2px 0; }
.pj__pn-row.is-prev:hover i svg, .pj__pn-row.is-prev:focus-visible i svg { translate: -2px 0; }

/* right column */
/* 20% lower than the 1620 × 912 cover picture: the picture keeps its full
   height (125% of the frame) and its middle shows; js/project.js slides it
   down inside the frame, slower than the page, as the page scrolls past it */
.pj__cover { aspect-ratio: 1620 / 730; overflow: hidden; border-radius: 24px; background: #d9dce4; }
.pj__cover img { width: 100%; height: 125%; object-fit: cover; translate: 0 -10%; will-change: transform; }
.pj__body { padding: 61px 30px 0; }
.pj__body > * + * { margin-top: 20px; }
/* the areas come in any order (admin/js/render.js): one column gap between
   them, except a sentence right under its picture, which stays close to it */
.pj__body > :is(.pj__lead, .pj__media):not(:first-child) { margin-top: var(--pj-gap); }
.pj__body > .pj__media + .pj__lead { margin-top: 20px; }
.pj__body > :is(.pj__story, .pj__reel-head):first-child { margin-top: 0; }
.pj__media img { width: 100%; height: auto; }
.pj__media video { display: block; width: 100%; height: auto; }
/* 404 page (render.js notFound) */
.nf__eye { margin: 0 0 18px; color: var(--c-accent); }
.nf__title { max-width: 15ch; }
.nf__lead { max-width: 52ch; margin: 24px 0 36px; font-size: 20px; line-height: 1.6; color: rgba(var(--c-navy-rgb), .72); }
.nf__links { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0 0 72px; }
.nf__more { margin-top: 0; padding-top: 0; }
/* ---- App screens: three phones that turn as the page scrolls -------------
   The overview picture's composition with no panel behind it: the middle
   phone facing you, the side ones smaller and turned in. Without JS the first
   three screens stand still in place (data-pos). js/project.js adds .is-live,
   pins the stage while every screen passes the middle and moves the phones. */
.ac { position: relative; }
/* the stage holds air above the phones (about 70px, 55px on tablets, 12px on
   phones), so the gap to the text above still reads as --pj-gap */
.pj__body > .ac { margin-top: calc(var(--pj-gap) - 70px); }
@media (max-width: 1024px) { .pj__body > .ac { margin-top: calc(var(--pj-gap) - 55px); } }
@media (max-width: 767px) { .pj__body > .ac { margin-top: calc(var(--pj-gap) - 12px); } }
/* first under the cover, the phones' air is all the gap there is */
.pj__body > .ac:first-child { margin-top: -70px; }
@media (max-width: 1024px) { .pj__body > .ac:first-child { margin-top: -55px; } }
@media (max-width: 767px) { .pj__body > .ac:first-child { margin-top: -12px; } }
.ac__stage { container-type: inline-size; position: relative; aspect-ratio: 1200 / 801; overflow: hidden; perspective: 1700px; }
.ac__phone { --pw: 25cqw; position: absolute; left: 50%; top: 50%; width: var(--pw); aspect-ratio: 9 / 18.6; margin: calc(var(--pw) * -1.0333) 0 0 calc(var(--pw) * -.5); padding: calc(var(--pw) * .045); border-radius: calc(var(--pw) * .16); background: linear-gradient(160deg, #f4f5f7, #a8abb3 18%, #e9eaee 48%, #8f939c 82%, #d9dbe0); opacity: 0; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ac__phone::before { content: ""; position: absolute; inset: calc(var(--pw) * .012); border-radius: calc(var(--pw) * .15); background: #0d0e12; }
.ac__phone img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--pw) * .115); background: var(--c-white); }
.ac__phone[data-pos] { opacity: 1; }
.ac__phone[data-pos="c"] { z-index: 3; }
.ac__phone[data-pos="l"] { z-index: 2; transform: translate3d(-27cqw, 2.5cqw, -13cqw) rotateY(18deg) scale(.8); }
.ac__phone[data-pos="r"] { z-index: 2; transform: translate3d(27cqw, 2.5cqw, -13cqw) rotateY(-18deg) scale(.8); }
.ac.is-live { height: calc((var(--n, 6) - 1) * 60vh + var(--h, 600px) + 10vh); }
/* the meter under the phones: the screen facing you, the next bar filling as
   the page scrolls, and a small mouse saying that scrolling turns them */
.ac__meter { display: none; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 4px; }
.ac.is-live .ac__meter { display: flex; }
.ac__meter b { font-size: 12px; font-weight: var(--fw-regular); letter-spacing: .1em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ac__meter b span { font-weight: var(--fw-bold); color: var(--c-navy); }
.ac__meter ol { display: flex; gap: 6px; margin: 0; }
.ac__meter li { width: 34px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(var(--c-navy-rgb), .14); }
.ac__meter li i { display: block; height: 100%; border-radius: inherit; background: var(--c-accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.ac__hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-muted); }
.ac__hint i { position: relative; width: 14px; height: 21px; border: 1.5px solid currentColor; border-radius: 8px; }
.ac__hint i::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 4px; margin-left: -1px; border-radius: 2px; background: var(--c-accent); animation: ac-wheel 1.6s var(--ease) infinite; }
@keyframes ac-wheel { 0% { opacity: 0; translate: 0 -2px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .ac__hint i::after { animation: none; } }
.ac.is-live .ac__pin { position: sticky; top: calc(50vh - var(--h, 600px) / 2 + var(--header-h) / 2); }
@media (max-width: 767px) {
  .ac__phone { --pw: 29cqw; }
  .ac__phone[data-pos="l"] { transform: translate3d(-31cqw, 2.5cqw, -13cqw) rotateY(18deg) scale(.8); }
  .ac__phone[data-pos="r"] { transform: translate3d(31cqw, 2.5cqw, -13cqw) rotateY(-18deg) scale(.8); }
  .ac__meter { gap: 14px; }
  .ac__meter li { width: 20px; }
}

.pj__lead { font-size: clamp(1.5rem, 2.22vw, 2rem); font-weight: var(--fw-regular); line-height: 1.3; }
.pj__lead strong, .pj__h2 strong { font-weight: var(--fw-bold); }

/* white card: facts, role and the six process steps */
.pj__card { margin: var(--pj-gap) -30px 0; background: var(--c-white); border: 1px solid var(--c-light); border-radius: 60px 60px 0 0; padding: 58px 29px 116px; } /* 29 + its 1px border = the 30px text edge */
.pj__h2 { font-size: clamp(1.75rem, 2.92vw, 2.625rem); font-weight: var(--fw-regular); line-height: 1.3; }
.pj__card > :first-child { margin-top: 0; }
.pj__role { margin-top: 19px; font-size: 16px; line-height: 1.4; }
/* "How it was made": the steps as an editorial grid, a hairline over each, a
   large faint number behind its name, how many practices, then the practices
   after short dashes. Hovering a step draws its line in purple and tints its
   number and dashes. */
.pj__steps-label { margin-top: 56px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.pj__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 34px; margin-top: 26px; }
.pj__step { position: relative; padding-top: 24px; border-top: 1px solid rgba(var(--c-navy-rgb), .16); }
.pj__step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pj__step > b { position: absolute; top: 12px; right: 0; font-size: 96px; font-weight: var(--fw-light); line-height: .9; letter-spacing: -.05em; color: rgba(var(--c-navy-rgb), .06); font-variant-numeric: tabular-nums; pointer-events: none; transition: color .4s var(--ease); }
.pj__step small { position: relative; font-size: 12px; color: var(--c-muted); }
.pj__step h3 { position: relative; margin-top: 6px; font-size: 26px; font-weight: var(--fw-regular); line-height: 1.2; }
.pj__step ul { position: relative; display: grid; gap: 9px; margin-top: 20px; font-size: 15.5px; line-height: 1.35; }
.pj__step li { display: flex; align-items: flex-start; gap: 10px; }
.pj__step li::before { content: ""; flex: none; width: 10px; height: 1px; margin-top: .67em; background: rgba(var(--c-navy-rgb), .35); transition: background-color .4s var(--ease); }
.pj__step li.has-ic::before { display: none; }
.pj__step li svg { width: 14px; height: 14px; flex: none; margin-top: .2em; fill: currentColor; }
.pj__step:hover::before { transform: scaleX(1); }
.pj__step:hover > b { color: rgba(var(--c-accent-rgb), .16); }
.pj__step:hover li::before { background: var(--c-accent); }

/* dark card: tool logos */
.pj__tools { position: relative; margin: -53px -30px 0; background: var(--c-navy); color: var(--c-white); border-radius: 60px; padding: 90px 30px 52px; } /* the logo cells keep ~38px below the logos */
.pj__tools h2 { font-size: 16px; font-weight: var(--fw-medium); line-height: 1.2; padding-bottom: 36px; }
.pj__tools .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* logos 30% bigger than the shared grid (145x64 -> 188x83, every file is 170x75); the cells
   grow with them, so the air around each logo and the space for the name under it stay the same */
.pj__tools .tools.is-live .tool { height: 151px; }
.pj__tools .tools.is-live .tool img { width: min(96%, 188px); height: auto; max-width: none; max-height: none; }
@media (max-width: 640px) { .pj__tools .tools.is-live .tool { height: 114px; } .pj__tools .tools.is-live .tool img { width: min(100%, 141px); } }

/* gallery: 3:2 tiles that open in the lightbox */
/* gallery: a reel of large pictures running to the edge of the column. js/project.js
   drags it, moves the counter and the line, and shows the round "Drag" cursor;
   a click opens the picture full size (the lightbox in js/main.js) */
.pj__reel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.pj__body > .pj__reel-head { margin-top: var(--pj-gap); }
.pj__reel-eye { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.pj__body .pj__reel-head .pj__h2--gallery { margin-top: 10px; }
.pj__reel-head > p { max-width: 320px; font-size: 13px; line-height: 1.4; text-align: right; color: var(--c-muted); }
.pj__body .pj__reel { position: relative; margin: 26px -30px 0 0; }
.pj__reel-track { position: relative; display: flex; gap: 14px; padding-right: 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.pj__reel-track::-webkit-scrollbar { display: none; }
.pj__reel-track.is-dragging { scroll-snap-type: none; }
/* the page's own grey (#e6e8ef), 4% darker, behind every picture, as in the
   lightbox, so a transparent PNG still reads as its own panel */
.pj__reel-item { flex: none; height: clamp(220px, 34vw, 430px); scroll-snap-align: start; overflow: hidden; border-radius: 20px; background: #dadde7; }
.pj__reel-item img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; transition: scale .6s var(--ease); }
.pj__reel-item:hover img { scale: 1.03; }
.pj__reel-track.is-dragging .pj__reel-item img { scale: none; }
/* the cursor is the smoked-glass disc of the home page's Selected Work
   (.work-disc in components.css): "View" over a picture, "Drag" while dragging */
.pj__reel.is-hover .work-disc { opacity: 1; scale: 1; }
.pj__reel.is-hover .pj__reel-track.is-dragging + .work-disc { scale: .8; }
@media (hover: hover) and (pointer: fine) { .pj__reel.is-live .pj__reel-track { cursor: none; } }
@media (hover: none) { .pj__reel .work-disc { display: none; } }
.pj__reel-bar { display: flex; align-items: center; gap: 18px; margin: 22px 30px 0 0; }
.pj__reel-bar b { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .08em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj__reel-bar em { font-style: normal; font-weight: var(--fw-regular); color: var(--c-muted); }
.pj__reel-line { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(var(--c-navy-rgb), .12); }
.pj__reel-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--c-accent); transition: width .15s linear; }
.pj__reel-bar button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(var(--c-navy-rgb), .18); border-radius: 50%; background: var(--c-white); color: var(--c-navy); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast); }
.pj__reel-bar button + button { margin-left: -8px; }
.pj__reel-bar button:hover:not(:disabled), .pj__reel-bar button:focus-visible { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pj__reel-bar button:disabled { opacity: .35; cursor: default; }
.pj__reel-bar svg { width: 16px; height: 16px; }

/* stories: a heading over its pictures, or a picture beside a heading */
.pj__story { margin-top: var(--pj-gap); display: grid; gap: 20px; }
.pj__story--side { grid-template-columns: minmax(0, 550fr) minmax(0, 340fr); align-items: center; }
/* the same, mirrored: the heading on the left (on phones it comes first) */
.pj__story--flip { grid-template-columns: minmax(0, 340fr) minmax(0, 550fr); }
/* a heading with its text under it, in the role paragraph's style; a blank
   line in the admin starts a new paragraph */
.pj__copy { display: block; }
.pj__text { margin-top: 19px; font-size: 16px; line-height: 1.4; }
.pj__text + .pj__text { margin-top: 12px; }
.pj__text strong { font-weight: var(--fw-bold); }
.pj__story img { width: 100%; height: auto; }
/* story pictures open full size on a click (the lightbox in js/main.js) */
.pj__zoom { display: block; cursor: zoom-in; }
.pj__zoom img { transition: scale .6s var(--ease); }
.pj__zoom:hover img, .pj__zoom:focus-visible img { scale: 1.015; }
/* a picture's caption is for the full-size viewer only (js/main.js reads it) */
.cert__cap[hidden] { display: none; }
/* picture parallax (js/project.js): the picture's pieces move up at their own
   speeds inside its frame; the picture itself stays for the layout, the
   lightbox and when there is no script */
.pj__media.is-px a, .pj__media.is-px { position: relative; }
.pj__media.is-px > img, .pj__media.is-px .pj__zoom > img { opacity: 0; }
.pj-px { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; }
/* the "Fade the top and bottom" setting */
.pj-px.is-fade { -webkit-mask: linear-gradient(transparent, var(--c-black) 9%, var(--c-black) 91%, transparent) no-repeat; mask: linear-gradient(transparent, var(--c-black) 9%, var(--c-black) 91%, transparent) no-repeat; }
/* a pinned whole picture: its heading and frame in one block, spaced as the story */
.pj-pin { display: grid; gap: 20px; align-self: start; }   /* its own height inside the taller section, so it can stick */
.pj-px img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; will-change: transform; }   /* a picture covering a taller frame is wider than it */

/* presentation (js/project.js): a laptop drawn here, its slides on the screen.
   The script pins the block while the slides change, opens the lid once as it
   comes into view and draws the change; without it the first slide shows */
.pj-deck__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: start; }   /* the meter never widens it */
.pj-deck__lp { container-type: inline-size; width: min(100%, calc((100svh - var(--header-h)) * 1.2)); margin: 28px auto 0; perspective: 2200px; }
.pj-deck__lid { position: relative; width: 82cqw; margin: 0 auto; padding: .32cqw; border-radius: 3cqw 3cqw .9cqw .9cqw; background: linear-gradient(160deg, #f4f5f7, #b3b6be 22%, #e9eaee 50%, #9a9ea7 85%, #d9dbe0); transform-origin: 50% 100%; }
.pj-deck__bezel { position: relative; padding: 2.1cqw 2.1cqw 2.9cqw; border-radius: 2.7cqw 2.7cqw .6cqw .6cqw; background: #0b0c10; }
.pj-deck__bezel::before { content: ""; position: absolute; left: 50%; top: .78cqw; width: .55cqw; height: .55cqw; margin-left: -.275cqw; border-radius: 50%; background: #1d2027; outline: .12cqw solid #262a33; }
.pj-deck__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .35cqw; background: var(--c-black); isolation: isolate; }
.pj-deck__screen::after { content: ""; position: absolute; inset: 0; z-index: 6; background: linear-gradient(118deg, rgba(var(--c-white-rgb), .07) 0%, rgba(var(--c-white-rgb), .02) 38%, rgba(var(--c-white-rgb), 0) 39%); pointer-events: none; }   /* the glass */
.pj-deck__slide { position: absolute; inset: 0; }
.pj-deck__slide + .pj-deck__slide { visibility: hidden; }
.pj-deck .pj-deck__slide img, .pj-deck__slide .pj__zoom { display: block; width: 100%; height: 100%; }
.pj-deck .pj-deck__slide img { object-fit: cover; background: var(--c-black); }
.pj-deck__edge { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: 2px; margin-left: -1px; background: var(--c-accent); opacity: 0; pointer-events: none; }   /* the Wipe line */
.pj-deck__strips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pj-deck .pj-deck__strips img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pj-deck__base { position: relative; width: 98cqw; height: 1.55cqw; margin: -.05cqw auto 0; border-radius: .2cqw .2cqw 2.4cqw 2.4cqw / .2cqw .2cqw 1.3cqw 1.3cqw; background: linear-gradient(180deg, #f1f2f5 0%, #d6d9df 38%, #b3b7bf 78%, #8f939c 100%); }
.pj-deck__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15cqw; height: .62cqw; margin-left: -7.5cqw; border-radius: 0 0 .7cqw .7cqw; background: linear-gradient(180deg, #a9adb5, #c8cbd2); }
/* the Dark laptop */
.pj-deck__lp--dark .pj-deck__lid { background: linear-gradient(160deg, #70747d, #3b3e45 22%, #5d6068 50%, #2e3036 85%, #4d5058); }
.pj-deck__lp--dark .pj-deck__base { background: linear-gradient(180deg, #6e727b 0%, #50535b 38%, #3a3d44 78%, #2a2c31 100%); }
.pj-deck__lp--dark .pj-deck__base::before { background: linear-gradient(180deg, #2f3137, #45484f); }
/* the TV wall: a thin black frame on the wall and a small power light; it has no
   lid, it turns on (the screen lights up) as it comes into view */
.pj-deck__lp--tv { width: min(100%, calc((100svh - var(--header-h)) * 1.25)); perspective: none; }
.pj-deck__lp--tv .pj-deck__lid { width: 100cqw; padding: 0; border-radius: .7cqw; background: #0b0c10; }
.pj-deck__lp--tv .pj-deck__bezel { padding: .8cqw .8cqw 1.5cqw; border-radius: .7cqw; }
.pj-deck__lp--tv .pj-deck__bezel::before { top: auto; bottom: .5cqw; width: .45cqw; height: .45cqw; margin-left: -.225cqw; background: #2c2f36; outline: 0; }
.pj-deck__lp--tv .pj-deck__screen { border-radius: .2cqw; }
.pj-deck__lp--tv .pj-deck__base { display: none; }
.pj-deck.has-lid .pj-deck__lp--tv .pj-deck__lid { transform: none; transition: none; }
/* the lid: closed until the laptop comes into view, then it opens and the screen lights up */
.pj-deck.has-lid .pj-deck__lid { transform: rotateX(-86deg); transition: transform 1.25s cubic-bezier(.2, .7, .15, 1); }
.pj-deck.has-lid.is-open .pj-deck__lid { transform: none; }
.pj-deck.has-lid .pj-deck__screen::before { content: ""; position: absolute; inset: 0; z-index: 7; background: var(--c-black); transition: opacity .7s ease .85s; pointer-events: none; }
.pj-deck.has-lid.is-open .pj-deck__screen::before { opacity: 0; }
/* the meter of App screens, its bars sharing the width with up to twelve slides */
.pj-deck.is-live .ac__meter { display: flex; }
.pj-deck .ac__meter b, .pj-deck .ac__hint { flex: none; white-space: nowrap; }
.pj-deck .ac__meter ol { flex: 0 1 auto; min-width: 0; }
.pj-deck .ac__meter li { flex: 0 1 auto; min-width: 6px; }   /* App screens' width, shrinking when there is no room */
@media (max-width: 767px) {
  .pj-deck__lp { margin-top: 12px; }
  .pj-deck .ac__meter ol { gap: 4px; }
}

/* website (js/project.js): a desktop drawn here, one long picture of a page on
   its screen. The script pins the block, moves the page through the screen as
   the page scrolls and lights the screen up once; without it (or with reduced
   motion) the screen scrolls by hand */
.pj-site__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: start; }
.pj-site__mon { container-type: inline-size; width: min(100%, calc((100svh - var(--header-h) - 220px) * 1.6)); margin: 28px auto 0; }
.pj-site__frame { width: 84cqw; margin: 0 auto; padding: .3cqw; border-radius: 1.5cqw; background: linear-gradient(160deg, #f4f5f7, #b3b6be 22%, #e9eaee 50%, #9a9ea7 85%, #d9dbe0); }
.pj-site__bezel { position: relative; padding: 1.1cqw; border-radius: 1.25cqw 1.25cqw 0 0; background: #0b0c10; }
.pj-site__bezel::before { content: ""; position: absolute; left: 50%; top: .38cqw; width: .4cqw; height: .4cqw; margin-left: -.2cqw; border-radius: 50%; background: #1d2027; }
.pj-site__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .25cqw; background: var(--c-white); isolation: isolate; }
.pj-site__bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 1.2%; height: 6.2%; padding: 0 1.6%; border-bottom: 1px solid #e0e2e8; background: #f1f2f5; }
.pj-site__bar i { width: .9%; aspect-ratio: 1; border-radius: 50%; background: #c9ccd4; }
.pj-site__bar span { display: flex; flex: 0 1 38%; align-items: center; justify-content: center; gap: .5em; height: 58%; margin: 0 auto; overflow: hidden; border-radius: 99px; background: var(--c-white); font-size: max(7px, 1.05cqw); color: var(--c-muted); white-space: nowrap; }
.pj-site__bar span b { flex: none; width: .55em; height: .7em; border: 1px solid #a9abb4; border-radius: 2px 2px 1px 1px; }   /* the lock */
.pj-site__view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.has-bar .pj-site__view { top: 6.2%; }
.pj-site .pj-site__view img { display: block; width: 100%; height: auto; max-width: none; }
.pj-site.is-live .pj-site__view { overflow: hidden; }
.pj-site.is-live .pj-site__view img { will-change: transform; }
.pj-site__sb { display: none; position: absolute; right: .5%; top: 1.5%; bottom: 1.5%; z-index: 3; width: .55%; pointer-events: none; }   /* where the page is */
.has-bar .pj-site__sb { top: 7.7%; }
.pj-site.is-live .pj-site__sb { display: block; }
.pj-site__sb b { position: absolute; left: 0; right: 0; top: 0; height: var(--th, 20%); border-radius: 99px; background: var(--c-accent); }
.pj-site__chin { height: 4cqw; border-radius: 0 0 1.25cqw 1.25cqw; background: linear-gradient(180deg, #eceef1, #cfd2d8); }
.pj-site__neck { width: 13cqw; height: 6.5cqw; margin: 0 auto; background: linear-gradient(90deg, #b9bcc4, #e7e8ec 42%, #c3c6cd); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.pj-site__foot { width: 25cqw; height: 1cqw; margin: 0 auto; border-radius: .5cqw .5cqw .25cqw .25cqw; background: linear-gradient(180deg, #eef0f3, #b8bcc4); }
/* the Dark desktop */
.pj-site__mon--dark .pj-site__frame { background: linear-gradient(160deg, #70747d, #3b3e45 22%, #5d6068 50%, #2e3036 85%, #4d5058); }
.pj-site__mon--dark .pj-site__chin { background: linear-gradient(180deg, #4a4d55, #34363c); }
.pj-site__mon--dark .pj-site__neck { background: linear-gradient(90deg, #3a3d44, #61646c 42%, #44474e); }
.pj-site__mon--dark .pj-site__foot { background: linear-gradient(180deg, #5c5f67, #34363c); }
/* tablet and phone: the picture of the page taken at their width, in a rounded
   frame with an even bezel; the phone keeps a status strip with its island at
   the top and the address bar at the bottom */
.pj-site__mon--tablet { width: min(56%, calc((100svh - var(--header-h) - 220px) * .72)); }
.pj-site__mon--phone { width: min(34%, calc((100svh - var(--header-h) - 220px) * .45)); }
:is(.pj-site__mon--tablet, .pj-site__mon--phone) :is(.pj-site__chin, .pj-site__neck, .pj-site__foot) { display: none; }
:is(.pj-site__mon--tablet, .pj-site__mon--phone):not(.pj-site__mon--dark) .pj-site__frame { background: linear-gradient(160deg, #f4f5f7, #a8abb3 18%, #e9eaee 48%, #8f939c 82%, #d9dbe0); }
.pj-site__mon--tablet .pj-site__frame { width: 100%; padding: 1.2cqw; border-radius: 7cqw; }
.pj-site__mon--tablet .pj-site__bezel { padding: 4.5cqw 4cqw; border-radius: 6cqw; }
.pj-site__mon--tablet .pj-site__bezel::before { top: 1.9cqw; width: 1cqw; height: 1cqw; margin-left: -.5cqw; }
.pj-site__mon--tablet .pj-site__screen { aspect-ratio: 3 / 4; border-radius: 1.5cqw; }
.pj-site__mon--tablet .pj-site__bar { height: 4.2%; }
.pj-site__mon--tablet .pj-site__bar span { flex-basis: 50%; font-size: max(7px, 1.9cqw); }
.pj-site__mon--tablet .has-bar .pj-site__view { top: 4.2%; }
.pj-site__mon--tablet .has-bar .pj-site__sb { top: 5.7%; }
.pj-site__mon--phone .pj-site__frame { width: 100%; padding: 2cqw; border-radius: 16cqw; }
.pj-site__mon--phone .pj-site__bezel { padding: 3.5cqw; border-radius: 14cqw; }
.pj-site__mon--phone .pj-site__bezel::before { top: 5.6cqw; z-index: 8; width: 24cqw; height: 6.5cqw; margin-left: -12cqw; border-radius: 99px; background: #0b0c10; }   /* the island */
.pj-site__mon--phone .pj-site__screen { aspect-ratio: 9 / 19.5; border-radius: 11cqw; }
.pj-site__mon--phone .pj-site__screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 5%; background: var(--c-white); }
.pj-site__mon--phone .pj-site__view { top: 5%; }
.pj-site__mon--phone .pj-site__bar { top: auto; bottom: 0; height: 7%; padding: 0 6%; border-top: 1px solid #e0e2e8; border-bottom: 0; }
.pj-site__mon--phone .pj-site__bar i { display: none; }
.pj-site__mon--phone .pj-site__bar span { flex: 1 1 auto; height: 60%; font-size: max(7px, 3.4cqw); }
.pj-site__mon--phone .has-bar .pj-site__view { top: 5%; bottom: 7%; }
.pj-site__mon--phone .pj-site__sb { top: 6.5%; bottom: 1.5%; width: 1.2%; }
.pj-site__mon--phone .has-bar .pj-site__sb { bottom: 8.5%; }
/* the screen lights up once the desktop is in view */
.pj-site.has-light .pj-site__screen::after { content: ""; position: absolute; inset: 0; z-index: 7; background: #05060a; transition: opacity .8s ease .15s; pointer-events: none; }
.pj-site.has-light.is-lit .pj-site__screen::after { opacity: 0; }
/* the meter of App screens with one bar: how much of the page has passed */
.pj-site.is-live .ac__meter { display: flex; }
.pj-site .ac__meter b, .pj-site .ac__hint { flex: none; white-space: nowrap; }
.pj-site__line { flex: 0 1 240px; min-width: 40px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(var(--c-navy-rgb), .14); }
.pj-site__line i { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }
@media (max-width: 767px) {
  .pj-site__mon { margin-top: 12px; }
  .pj-site__mon--tablet { width: min(86%, calc((100svh - var(--header-h) - 220px) * .72)); }
  .pj-site__mon--phone { width: min(62%, calc((100svh - var(--header-h) - 220px) * .45)); }
}

/* device ecosystem (js/project.js): the product's devices as one family on one
   desk, smaller towards the front: the TV wall hanging large at the back in the
   middle (black), the desktop before its left side and the tablet or phone
   before its right side (silver), the watch at the front between them (black),
   all front devices standing on a thin desk line, one light on every glass. The
   script brings them in one by one (the desktop lights up, the tablet or phone
   slides in, the watch rises, the TV rises behind) with the note of the newest
   under the stage; without it they all stand there */
.pj-eco__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: start; }
.pj-eco__stage { position: relative; container-type: inline-size; width: min(100%, calc((100svh - var(--header-h) - 330px) * 1.85)); aspect-ratio: 16 / 9; margin: 52px auto 0; }
.pj-eco__desk { position: absolute; left: 0; right: 0; bottom: 10%; height: 1px; background: rgba(var(--c-navy-rgb), .16); }
.pj-eco__dev { position: absolute; bottom: 10%; margin: 0; }
.pj-eco__dev figcaption { position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 2.4cqw; font-size: max(10px, .95cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); text-align: center; }
.pj-eco__scr { position: relative; overflow: hidden; background: #05060a; }
.pj-eco__scr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(var(--c-white-rgb), .10) 0%, rgba(var(--c-white-rgb), .03) 34%, rgba(var(--c-white-rgb), 0) 35%); pointer-events: none; }   /* one glass, one light */
.pj-eco .pj-eco__scr img, .pj-eco__scr .pj__zoom { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pj-eco .pj-eco__scr img { object-fit: cover; object-position: top; }
.pj-eco__dev--tv { left: 17%; top: 0; bottom: auto; z-index: 1; width: 66%; }
.pj-eco__dev--tv .pj-eco__frame { padding: .45cqw; border-radius: .45cqw; background: #0b0c10; }
.pj-eco__dev--tv .pj-eco__scr { aspect-ratio: 16 / 9; border-radius: .15cqw; }
.pj-eco__dev--tv figcaption { top: auto; bottom: 100%; margin: 0 0 1cqw; }
.pj-eco__feet { display: none; }
.pj-eco__dev--desktop { left: 4%; z-index: 2; width: 44%; }
.pj-eco__dev--desktop .pj-eco__frame, .pj-eco__dev--tablet .pj-eco__frame, .pj-eco__dev--phone .pj-eco__frame { padding: .3cqw; background: linear-gradient(160deg, #f4f5f7, #b3b6be 22%, #e9eaee 50%, #9a9ea7 85%, #d9dbe0); }
.pj-eco__dev--desktop .pj-eco__frame { border-radius: .9cqw .9cqw 0 0; }
.pj-eco__dev--desktop .pj-eco__bz { padding: .9cqw; border-radius: .7cqw .7cqw 0 0; background: #0b0c10; }
.pj-eco__dev--desktop .pj-eco__scr { aspect-ratio: 16 / 10; border-radius: .15cqw; }
.pj-eco__chin { height: 2.2cqw; border-radius: 0 0 .9cqw .9cqw; background: linear-gradient(180deg, #eceef1, #cfd2d8); }
.pj-eco__neck { width: 6.5cqw; height: 3.4cqw; margin: 0 auto; background: linear-gradient(90deg, #b9bcc4, #e7e8ec 42%, #c3c6cd); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.pj-eco__foot { width: 13cqw; height: .6cqw; margin: 0 auto; border-radius: .3cqw .3cqw .15cqw .15cqw; background: linear-gradient(180deg, #eef0f3, #b8bcc4); }
.pj-eco__dev--tablet { right: 4%; z-index: 3; width: 27%; }
.pj-eco__dev--tablet .pj-eco__frame { border-radius: 1.4cqw; }
.pj-eco__dev--tablet .pj-eco__bz { padding: 1.1cqw; border-radius: 1.2cqw; background: #0b0c10; }
.pj-eco__dev--tablet .pj-eco__scr { aspect-ratio: 4 / 3; border-radius: .3cqw; }
.pj-eco__dev--phone { right: 8%; z-index: 3; width: 12%; }
.has-both .pj-eco__dev--phone { right: 1.5%; z-index: 5; width: 10%; }   /* before the tablet's right corner */
.pj-eco__dev--phone .pj-eco__frame { padding: .45cqw; border-radius: 2cqw; }
.pj-eco__dev--phone .pj-eco__scr { aspect-ratio: 9 / 19.5; border-radius: 1.5cqw; border: .3cqw solid #0d0e12; background: var(--c-white); }
.pj-eco__dev--watch { left: 50.5%; z-index: 4; width: 9.5%; margin-left: -4.75%; }
.pj-eco__dev--watch .pj-eco__frame { padding: .5cqw; border-radius: 1.1cqw; background: linear-gradient(160deg, #3b3e45, #16181c 40%, #2e3036); }
.pj-eco__dev--watch .pj-eco__scr { aspect-ratio: 355 / 305; border-radius: .45cqw; }
.pj-eco__band { width: 58%; height: 2.6cqw; margin: 0 auto; border-radius: .3cqw .3cqw 0 0; background: linear-gradient(90deg, #1f2127, #34373e 50%, #1f2127); }
.pj-eco__band--b { border-radius: 0 0 .3cqw .3cqw; }
/* live: --t per device (0 away, 1 in place and on) */
.pj-eco.is-live .pj-eco__dev:is(.pj-eco__dev--tablet, .pj-eco__dev--phone) { transform: translate3d(calc((1 - var(--t, 0)) * 50%), 0, 0); opacity: var(--t, 0); }
.pj-eco.is-live .pj-eco__dev--watch { transform: translate3d(0, calc((1 - var(--t, 0)) * 45%), 0); opacity: var(--t, 0); }
.pj-eco.is-live .pj-eco__dev--tv { transform: translate3d(0, calc((1 - var(--t, 0)) * 14%), 0); opacity: var(--t, 0); }
.pj-eco.is-live .pj-eco__scr img { opacity: calc(.08 + .92 * var(--t, 0)); }
.pj-eco.is-live .pj-eco__dev figcaption { opacity: var(--t, 0); }
.pj-eco.is-live .pj-eco__dev:focus-within, .pj-eco.is-live .pj-eco__dev:focus-within figcaption, .pj-eco.is-live .pj-eco__dev:focus-within .pj-eco__scr img { opacity: 1; transform: none; }
.pj-eco.is-live .pj-eco__dev.is-cur figcaption { color: var(--c-accent); }
.pj-eco__note { display: none; }
.pj-eco.is-live .pj-eco__note { display: grid; }
.pj-eco.is-live .ac__meter { display: flex; }
.pj-eco .ac__meter b, .pj-eco .ac__hint { flex: none; white-space: nowrap; }
.pj-eco .ac__meter b em { font-style: normal; text-transform: uppercase; }
@media (max-width: 767px) {
  .pj-eco__stage { width: 100%; margin-top: 30px; }
}

/* control room (js/project.js): a navy wall of two to six screens, up to three
   in a row (Video wall: edge to edge; One picture: one dashboard over four).
   The script pins the block, comes close to each screen as it turns on (a line
   of light opening into the picture, or a fade), lights its power light purple
   and moves the note under the wall along; before that the screens stand by,
   faint with a power sign, or are off. Without the script all are on and each
   shows its note under it */
.pj-wall__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-self: start; }
.pj-wall__cam { position: relative; overflow: hidden; width: min(100%, calc((100svh - var(--header-h) - 300px) * 1.45 * var(--cw, 3) / var(--ch, 1))); margin: 28px auto 0; border-radius: 18px; background: var(--c-navy); }
.pj-wall__panel { position: relative; container-type: inline-size; display: flow-root; border-radius: 18px; background: var(--c-navy); transform-origin: 0 0; }
/* with Focus the camera frame is at least 16:9, the wall in its middle, so a screen can come close */
.pj-wall.is-focus .pj-wall__cam { width: min(100%, calc((100svh - var(--header-h) - 330px) * 1.65)); }
.pj-wall.is-focus .pj-wall__panel { position: absolute; left: 0; top: 0; width: 100%; }
.pj-wall__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2cqw; margin: 3cqw 3cqw 2.2cqw; }
.pj-wall--video .pj-wall__grid, .pj-wall--one .pj-wall__grid { gap: .1cqw; margin-bottom: 3cqw; }   /* hairline seams, as on a real video wall */
.pj-wall__tv { container-type: inline-size; margin: 0; }
.pj-wall__b { position: relative; padding: 1.6cqw 1.6cqw 3cqw; border-radius: 1.4cqw; background: var(--c-black); outline: 1px solid #23283a; }
:is(.pj-wall--video, .pj-wall--one) .pj-wall__b { padding: .2cqw; border-radius: .15cqw; outline: 0; }
:is(.pj-wall--video, .pj-wall--one) .pj-wall__scr { border-radius: 0; }
.pj-wall__b::after { content: ""; position: absolute; left: 50%; bottom: 1cqw; width: 1.1cqw; height: 1.1cqw; margin-left: -.55cqw; border-radius: 50%; background: #2c2f36; transition: background .3s; }   /* the power light */
:is(.pj-wall--video, .pj-wall--one) .pj-wall__b::after { display: none; }
.pj-wall__scr { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: .4cqw; background: #05060a; }
.pj-wall .pj-wall__scr img, .pj-wall__scr .pj__zoom { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pj-wall .pj-wall__scr img { object-fit: cover; }
.pj-wall__base { opacity: 0; }
.pj-wall__ray { position: absolute; left: 4%; right: 4%; top: 50%; z-index: 2; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--c-white) 20%, var(--c-white) 80%, transparent); opacity: 0; pointer-events: none; }
.pj-wall__tv figcaption { margin-top: 1.2cqw; font-size: max(11px, 1.15cqw); letter-spacing: .1em; text-transform: uppercase; color: #8a8f9c; text-align: center; }
.pj-wall__tv figcaption b { margin-right: .5em; font-weight: 700; color: #b08bff; transition: color .3s; }
.pj-wall__tvnote { margin-top: .6em; font-size: max(12px, 1.2cqw); line-height: 1.45; color: #c3c6cf; text-align: center; }
/* live: standby or off before, the screen's own progress in --t */
.pj-wall.is-live .pj-wall__tvnote { display: none; }
.pj-wall.is-live .pj-wall__tv:not(.is-on) figcaption b { color: #5d6170; }
.pj-wall.is-live .pj-wall__tv.is-on .pj-wall__b::after { background: var(--c-accent); }
.pj-wall.is-live.is-standby .pj-wall__base { opacity: .1; filter: grayscale(1); }
.pj-wall.is-live .pj-wall__pic { opacity: var(--t, 0); }
.pj-wall.is-live.is-line .pj-wall__pic { opacity: 1; clip-path: inset(calc((1 - var(--t, 0)) * 50%) 0); }
.pj-wall.is-live.is-standby .pj-wall__tv.is-idle .pj-wall__scr::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw; border: .9cqw solid rgba(var(--c-white-rgb), .35); border-top-color: transparent; border-radius: 50%; }   /* the power sign */
.pj-wall.is-live.is-standby .pj-wall__tv.is-idle .pj-wall__scr::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: .9cqw; height: 7cqw; margin: -7.5cqw 0 0 -.45cqw; border-radius: 1cqw; background: rgba(var(--c-white-rgb), .35); }
/* the note of the screen in focus */
.pj-wall__note { display: none; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-items: start; min-height: 66px; transition: opacity .3s; }
.pj-wall.is-live .pj-wall__note { display: grid; }
.pj-wall__note.is-swap { opacity: 0; }
.pj-wall__n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: var(--c-white); font-size: 14px; font-weight: 700; }
.pj-wall__note h3 { font-size: 22px; font-weight: var(--fw-medium); line-height: 1.3; }
.pj-wall__note p { font-size: 15px; line-height: 1.5; color: #3d404a; }
/* the meter of App screens: the screen in focus by number and name, a bar per screen */
.pj-wall.is-live .ac__meter { display: flex; }
.pj-wall .ac__meter b, .pj-wall .ac__hint { flex: none; white-space: nowrap; }
.pj-wall .ac__meter b em { font-style: normal; text-transform: uppercase; }
.pj-wall .ac__meter ol { flex: 0 1 auto; min-width: 0; }
.pj-wall .ac__meter li { flex: 0 1 auto; min-width: 6px; }
/* phones: two in a row; with Focus one screen at a time, large, and a strip of them all */
.pj-wall__strip { display: none; }
@media (max-width: 767px) {
  .pj-wall__cam { width: 100%; margin-top: 12px; }
  .pj-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-wall__tv:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 1cqw); }
  .pj-wall.is-phone .pj-wall__grid { grid-template-columns: minmax(0, 1fr); }
  .pj-wall.is-phone .pj-wall__tv:not(.is-cur) { display: none; }
  .pj-wall.is-phone .pj-wall__tv.is-cur { grid-column: auto; width: auto; }
  .pj-wall.is-phone .pj-wall__strip { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
  .pj-wall__strip span { aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: 4px; outline: 1px solid #23283a; background: #05060a; }
  .pj-wall__strip img { width: 100%; height: 100%; object-fit: cover; opacity: .15; filter: grayscale(1); }
  .pj-wall__strip .is-on img { opacity: 1; filter: none; }
  .pj-wall__strip .is-cur { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .pj-wall__note { grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; }
  .pj-wall__n { width: 34px; height: 34px; font-size: 12px; }
  .pj-wall__note h3 { font-size: 17px; }
  .pj-wall__note p { font-size: 13px; }
}

/* scroll reveal: words go from grey to ink as the heading scrolls through */
.pj-word { opacity: .2; transition: opacity .45s var(--ease); }
.pj-word.is-on { opacity: 1; }

/* "Send me a postcard": the comments. The approved ones stack on the left as
   postcards (js/project.js deals through them); the form is a blank postcard
   on the right that flies onto the stack when it is sent. */
.pj__talk { margin: var(--pj-gap) -30px 0; padding: 44px 30px; border-radius: 32px; background: var(--c-white); }
.pj__talk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.pj__talk-eye { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.pj__talk h2 { margin-top: 10px; font-size: clamp(2rem, 3.06vw, 2.75rem); font-weight: var(--fw-light); line-height: 1.05; letter-spacing: -.01em; }
.pj__talk-head > p { font-size: 13px; color: var(--c-muted); }
.pj__talk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 50px; align-items: center; margin-top: 40px; }
/* a postcard: the message, a rule, then the stamp, the postmark and the addresses */
.pc-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1px solid rgba(var(--c-navy-rgb), .14); border-radius: 14px; background: var(--c-white); }
.pc-card__msg { padding: 22px 20px; border-right: 1px solid rgba(var(--c-navy-rgb), .12); font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.pc-card__addr { position: relative; padding: 22px 18px; }
.pc-stamp { display: grid; place-items: center; width: 58px; height: 68px; margin-left: auto; border: 2px dashed var(--c-accent); border-radius: 6px; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-accent); }
.pc-mark { position: absolute; top: 44px; right: 78px; display: grid; place-items: center; width: 64px; height: 64px; border: 1.5px solid rgba(var(--c-accent-rgb), .5); border-radius: 50%; font-size: 8.5px; font-weight: var(--fw-bold); letter-spacing: .1em; line-height: 1.3; text-align: center; color: rgba(var(--c-accent-rgb), .75); rotate: -14deg; }
.pc-line { display: block; margin-top: 16px; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--c-navy-rgb), .2); font-size: 13.5px; overflow-wrap: anywhere; }
.pc-line small { display: block; font-size: 12px; color: var(--c-muted); }
/* the stack: two plain cards fanned behind the one on top; the next one comes
   in from the right as the last goes out to the left */
.pc-stack { position: relative; height: 330px; }
.pc-stack .pc-card, .pc-back, .pc-empty { position: absolute; inset: 20px 10px 46px; }
.pc-back { border: 1px solid rgba(var(--c-navy-rgb), .14); border-radius: 14px; background: var(--c-light-2); rotate: -6deg; translate: -14px 8px; }
.pc-back + .pc-back { background: #eceef3; rotate: 4deg; translate: 12px 4px; }
.pc-stack .pc-card { overflow: hidden; rotate: 8deg; translate: 30% 6px; opacity: 0; pointer-events: none; transition: translate .6s var(--ease), rotate .6s var(--ease), opacity .45s var(--ease); }
.pc-stack .pc-card.is-top { rotate: -1.5deg; translate: none; opacity: 1; pointer-events: auto; }
.pc-stack .pc-card.is-out { rotate: -14deg; translate: -40% 10px; opacity: 0; }
.pc-empty { display: grid; place-items: center; border: 1.5px dashed rgba(var(--c-navy-rgb), .2); border-radius: 14px; background: var(--c-white); rotate: -1.5deg; font-size: 15px; line-height: 1.5; text-align: center; color: var(--c-muted); }
.pc-nav { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-nav[hidden] { display: none; }
.pc-nav button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(var(--c-navy-rgb), .18); border-radius: 50%; color: var(--c-navy); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pc-nav button:hover, .pc-nav button:focus-visible { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pc-nav svg { width: 15px; height: 15px; }
/* the visitor's postcard */
.pc-card--mine { min-height: 290px; border: 2px solid var(--c-accent); }
.pc-card--mine textarea, .rec__msg textarea { display: block; width: 100%; height: 200px; padding: 0; border: 0; outline: 0; resize: none; font: inherit; font-size: 16px; line-height: 32px; color: var(--c-navy); background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(var(--c-navy-rgb), .14) 31px 32px); }
.pc-card--mine .pc-stamp { border-style: solid; background: var(--c-accent-soft); }
.pc-card--mine .pc-line { margin-top: 14px; padding: 0; border: 0; font-size: 12px; font-weight: var(--fw-bold); color: var(--c-muted); }
.pc-card--mine input, .rec__f input { display: block; width: 100%; margin-top: 4px; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(var(--c-navy-rgb), .22); outline: 0; font: inherit; font-size: 14px; font-weight: var(--fw-regular); color: var(--c-navy); background: none; transition: border-color var(--dur-fast); }
.pc-card--mine input:focus, .rec__f input:focus { border-bottom-color: var(--c-accent); }
.pc-card--mine textarea:focus-visible, .rec__msg textarea:focus-visible, .pc-card--mine input:focus-visible, .rec__f input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.pc-card--mine textarea::placeholder, .pc-card--mine input::placeholder, .rec__msg textarea::placeholder, .rec__f input::placeholder { color: #9a9daa; }
.pc-form .hp, .rec__form .hp { position: absolute; left: -9999px; }
.pc-send { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.pc-send output { font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.pc-send output.is-error { color: #c62828; }
.pc-send button { display: inline-flex; align-items: center; gap: 12px; flex: none; height: 50px; padding: 0 7px 0 22px; border-radius: var(--radius-pill); background: var(--c-navy); color: var(--c-white); font-size: 14.5px; font-weight: var(--fw-medium); white-space: nowrap; }
.pc-send button i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); transition: translate var(--dur) var(--ease); }
.pc-send button:hover i, .pc-send button:focus-visible i { translate: 3px 0; }
.pc-send button:disabled { opacity: .6; cursor: wait; }
.pc-send svg { width: 16px; height: 16px; }
/* sent: the postcard flies onto the stack (js/project.js sets --fx, --fy) */
.pc-card--mine.is-flying { translate: var(--fx, -110%) var(--fy, 0); rotate: -10deg; scale: .9; opacity: 0; transition: translate .8s var(--ease), rotate .8s var(--ease), scale .8s var(--ease), opacity .8s ease-in; }
@media (prefers-reduced-motion: reduce) { .pc-stack .pc-card, .pc-card--mine.is-flying { transition: none; } }

/* other projects: same cards as the home page, four in a row */
.pj-more { padding: 80px var(--gutter) calc(var(--panel-radius) + 80px); }
.pj-more h2 { font-size: 16px; font-weight: var(--fw-medium); line-height: 1.2; margin-bottom: 34px; }
.pj-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.pj-more .project-card { aspect-ratio: 318 / 360; }

@media (max-width: 1024px) {
  .pj { padding-top: 130px; }
  .pj__grid { grid-template-columns: minmax(0, 1fr); margin-top: 30px; }
  .pj__side { position: static; padding: 30px 0; }
  /* the column sits above the cover here, so the way on to other projects is
     left to "See other projects" at the end of the page */
  .pj__pn { display: none; }
  .pj-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj__talk-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .page-project { --pj-gap: 72px; }
  .pj { padding: 121px var(--gutter) 0; }
  .pj__title { margin-top: 20px; font-size: 38px; }
  .pj__excerpt { margin-top: 14px; font-size: 30px; }
  .pj__cover { border-radius: 16px; }
  /* no box inside a box: the text keeps the page edge and the cards run to the screen edge */
  .pj__body { padding: 30px 0 0; }
  .pj__lead { font-size: 24px; line-height: 1.2; }
  .pj__card { margin-inline: calc(var(--gutter) * -1); border-radius: 40px 40px 0 0; padding: 40px calc(var(--gutter) - 1px) 80px; }
  .pj__h2 { font-size: 28px; }
  .pj__steps-label { margin-top: 40px; }
  .pj__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; margin-top: 20px; }
  .pj__step { padding-top: 18px; }
  .pj__step > b { top: 10px; font-size: 60px; }
  .pj__step h3 { font-size: 20px; }
  .pj__step ul { gap: 7px; margin-top: 14px; font-size: 14px; }
  .pj__tools { margin-inline: calc(var(--gutter) * -1); border-radius: 40px; padding: 60px var(--gutter) 34px; }
  .pj__tools h2 { padding-bottom: 20px; }
  .pj__tools .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj__reel-head { display: block; }
  .pj__reel-head > p { margin-top: 8px; text-align: left; }
  .pj__body .pj__reel { margin-right: calc(var(--gutter) * -1); }
  .pj__reel-track { gap: 10px; padding-right: var(--gutter); }
  .pj__reel-item { border-radius: 14px; }
  .pj__reel-bar { margin-right: var(--gutter); }
  .pj__story--side { grid-template-columns: 1fr; }
  .pj__talk { margin-inline: calc(var(--gutter) * -1); padding: 30px var(--gutter); border-radius: 24px; }
  .pj__talk-head { display: block; }
  .pj__talk-head > p { margin-top: 8px; }
  .pc-card { grid-template-columns: minmax(0, 1fr); }
  .pc-card__msg { border-right: 0; border-bottom: 1px solid rgba(var(--c-navy-rgb), .12); }
  .pc-stack { height: 440px; }
  .pc-card--mine textarea { height: 160px; }
  .pc-send { flex-direction: column-reverse; align-items: stretch; }
  .pc-send button { justify-content: space-between; }
  .pj-more__grid { grid-template-columns: 1fr; gap: 24px; }
  .pj-more .project-card { aspect-ratio: auto; min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .pj-word { opacity: 1; transition: none; } }

/* ---- Portfolio page (measured on the live page at 1440, 1024 and 390) ---- */
.pf { padding: 172px var(--gutter) calc(var(--panel-radius) + 80px); }
.pf__title { max-width: 753px; font-size: clamp(2.5rem, 4.86vw, 4.375rem); font-weight: var(--fw-light); line-height: 1.2; }
.pf__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.pf .project-card { aspect-ratio: 440 / 360; }
.pf .project-card[hidden] { display: none; }
.pf__empty { text-align: center; color: var(--c-muted); padding: 40px 0; }
@media (max-width: 1024px) {
  .pf { padding-top: 100px; }
  .pf__title { max-width: none; font-size: 46px; line-height: 1; }
  .pf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
  .pf .project-card { aspect-ratio: 470 / 410; }
}
@media (max-width: 767px) {
  .pf { padding: 112px var(--gutter) calc(var(--panel-radius) + 60px); }
  .pf__title { font-size: 36px; line-height: 1.2; }
  .pf__grid { grid-template-columns: 1fr; }
  .pf .project-card { aspect-ratio: 330 / 273; }
}

/* Cards on the project and portfolio pages copy the live loop card: services as
   one comma-separated line that wraps mid-term, a medium 24px title and a
   14px excerpt. The arrow and the shadow behind the text are shared with the
   home page (components.css). */
.pj-more .project-card__top, .pf .project-card__top { min-height: 85px; }
.pj-more .project-card__top .tags, .pf .project-card__top .tags { display: block; max-width: 70%; margin-top: 7px; font-size: 12px; line-height: 1.2; letter-spacing: .05em; }
.pj-more .project-card__top .tags li, .pf .project-card__top .tags li { display: inline; }
.pj-more .project-card__top .tags li:not(:last-child)::after, .pf .project-card__top .tags li:not(:last-child)::after { content: ", "; }
.pj-more .project-card__body, .pf .project-card__body { padding: 110px 20px 20px; }
.pj-more .project-card__title, .pf .project-card__title { font-size: 24px; font-weight: var(--fw-medium); line-height: 1.4; }
.pj-more .project-card__desc, .pf .project-card__desc { display: block; max-width: none; margin-top: 10px; font-size: 14px; line-height: 1.2; overflow: visible; -webkit-line-clamp: unset; }
@media (max-width: 1024px) {
  .pj-more .project-card__top, .pf .project-card__top { min-height: 70px; }
  .pj-more .project-card__top .tags, .pf .project-card__top .tags { margin-top: 4px; }
}
@media (max-width: 767px) { .pj-more .project-card__title, .pf .project-card__title { font-size: 20px; line-height: 1.3; } }

/* ---- Portfolio filter bar (js/project.js) --------------------------------
   One bar: a search and four groups (market, product, expertise, domain). A
   group opens a white tray of picture tiles below the bar; hovering a tile
   lights the matching cards, a click chooses it. At rest the bar is only a
   line on the page colour; while choosing it turns grey with the open slot
   in white. Once the bar scrolls away a small dark bar follows. On phones
   the bar is a "Filters" button that opens every group in a sheet. Flat:
   lines and contrast, no shadows. Without JS the bar stays hidden. */
/* no z-index here: the phone sheet must stack above the fixed header */
.pff { --pff-line: rgba(var(--c-navy-rgb), .2); margin: 72px 0 56px; }
.pff[hidden] { display: none; }
.pff small { display: block; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--c-navy); }
.pff__bar { display: flex; align-items: center; height: 88px; padding: 7px; border: 1px solid var(--pff-line); border-radius: var(--radius-pill); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pff.is-open .pff__bar { background: #eceef3; border-color: transparent; }
.pff__seg { position: relative; flex: 1; display: flex; align-items: center; height: 100%; min-width: 0; border-radius: var(--radius-pill); transition: background-color var(--dur-fast); }
.pff__seg + .pff__seg::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: rgba(var(--c-navy-rgb), .14); }
.pff__seg.is-on::before, .pff__seg.is-on + .pff__seg::before { display: none; }
.pff__seg:not(.is-on):hover { background: rgba(var(--c-navy-rgb), .04); }
.pff__seg.is-on { background: var(--c-white); outline: 1px solid rgba(var(--c-navy-rgb), .12); }
.pff__seg--q { flex: 1.25; gap: 14px; padding: 0 22px 0 26px; cursor: text; }
.pff__seg--q > svg { flex: none; width: 22px; height: 22px; }
.pff__seg--q > span { flex: 1; min-width: 0; }
.pff input[type="search"] { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--c-navy); outline: 0; -webkit-appearance: none; appearance: none; }
.pff input[type="search"]::placeholder { color: var(--c-muted); opacity: 1; }
.pff input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pff__seg--q input { margin-top: 5px; }
.pff input[type="search"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; }
.pff__open { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; height: 100%; padding: 0 28px; border-radius: inherit; text-align: left; }
.pff__open > span { max-width: 100%; margin-top: 5px; overflow: hidden; font-size: 16px; color: var(--c-muted); text-overflow: ellipsis; white-space: nowrap; }
.pff__seg.has .pff__open { padding-right: 54px; }
.pff__seg.has .pff__open > span { font-weight: var(--fw-medium); color: var(--c-navy); }
.pff__x { position: absolute; right: 16px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border: 1px solid var(--pff-line); border-radius: 50%; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pff__x[hidden] { display: none; }
.pff__x svg { width: 14px; height: 14px; }
.pff__x:hover, .pff__x:focus-visible { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-white); }
.pff__fbtn { display: none; }
.pff__go { flex: none; display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 10px 0 28px; border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--c-white); font-size: 16px; font-weight: 600; white-space: nowrap; transition: filter var(--dur-fast); }
.pff__go:hover, .pff__go:focus-visible { filter: brightness(.92) saturate(1.1); }
/* the three words share one cell, so the button keeps the width of the
   longest ("All projects") and the bar never shifts when the word changes */
.pff__label { display: grid; justify-items: center; }
.pff__label > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
.pff__label > span.is-on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
.pff__go b { display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 8px; border-radius: var(--radius-pill); background: rgba(var(--c-white-rgb), .2); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* the tray of the open group */
.pff__panel { display: none; }
.pff.is-open .pff__panel { display: block; margin-top: 14px; padding: 30px 30px 22px; border: 1px solid rgba(var(--c-navy-rgb), .1); border-radius: 34px; background: var(--c-white); }
.pff__tray { display: none; }
.pff__tray.is-open { display: block; }
.pff__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.pff__head h2 { font-size: 24px; font-weight: var(--fw-regular); line-height: 1.2; }
.pff__head h2 small { display: none; }
.pff__head p { font-size: 14px; color: var(--c-muted); }
.pff__head button { margin-left: auto; font-size: 14px; font-weight: var(--fw-medium); color: var(--c-accent); }
.pff__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pff__tile { display: flex; align-items: center; gap: 18px; min-height: 78px; padding: 14px 18px; border: 1px solid #e4e6ec; border-radius: 22px; outline: 4px solid transparent; background: var(--c-white); text-align: left; transition: border-color var(--dur-fast), outline-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast); }
/* room for three covers, so the names line up whatever the count */
.pff__th { display: flex; flex: none; min-width: 104px; padding-left: 14px; }
.pff__th img { width: 44px; height: 44px; margin-left: -14px; border: 2.5px solid var(--c-white); border-radius: 13px; object-fit: cover; transition: transform .35s var(--ease), border-color var(--dur-fast); }
.pff__tt { min-width: 0; }
.pff__tt b { display: block; font-size: 17px; font-weight: var(--fw-medium); line-height: 1.25; }
.pff__tt small { margin-top: 3px; font-size: 13px; font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.pff__tile:not(:disabled):hover, .pff__tile:focus-visible { border-color: var(--c-accent); outline-color: var(--c-accent-soft); }
.pff__tile:not(:disabled):hover .pff__th img:nth-child(1) { transform: rotate(-10deg) translate(-4px, 2px); }
.pff__tile:not(:disabled):hover .pff__th img:nth-child(2) { transform: translateY(-5px); }
.pff__tile:not(:disabled):hover .pff__th img:nth-child(3) { transform: rotate(10deg) translate(6px, 2px); }
.pff__tile[aria-pressed="true"] { border-color: var(--c-navy); background: var(--c-navy); color: var(--c-white); }
.pff__tile[aria-pressed="true"] small { color: #aab0bd; }
.pff__tile[aria-pressed="true"] .pff__th img { border-color: var(--c-navy); }
.pff__tile:disabled { opacity: .38; cursor: default; }
.pff__hint { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #eef0f3; font-size: 13.5px; color: var(--c-muted); }
.pff__hint svg { flex: none; width: 18px; height: 18px; color: var(--c-accent); }
.pff__hint kbd { padding: 3px 6px; border: 1px solid #d9dbe3; border-radius: 6px; font: 600 11px/1 var(--font-sans, inherit); color: #5d616c; }
.pff__sheet-head, .pff__sheet-q, .pff__show { display: none; }

/* hovering a tile previews its matches in the grid */
.pf__grid.is-previewing .project-card { transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); }
.pf__grid.is-previewing .project-card.is-out { opacity: .22; filter: grayscale(1); }
.pf__grid.is-previewing .project-card.is-match { outline: 3px solid var(--c-accent); outline-offset: -3px; }

/* the small bar that follows once the filter bar has scrolled away */
.pff__mini { position: fixed; left: 50%; top: 22px; z-index: calc(var(--z-header) + 1); display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 8px 0 10px; border-radius: var(--radius-pill); background: var(--c-navy); color: var(--c-white); font-size: 14px; white-space: nowrap; translate: -50% -150%; opacity: 0; visibility: hidden; transition: translate .45s var(--ease), opacity .3s var(--ease), visibility 0s linear .45s; }
.pff__mini.is-on { translate: -50% 0; opacity: 1; visibility: visible; transition: translate .45s var(--ease), opacity .3s var(--ease); }
.pff__mini button { display: inline-flex; align-items: center; gap: 8px; height: 42px; border-radius: var(--radius-pill); color: inherit; font-weight: var(--fw-medium); }
.pff__mini [data-pff-clear] { padding: 0 10px 0 16px; background: rgba(var(--c-white-rgb), .1); }
.pff__mini [data-pff-clear] svg { width: 14px; height: 14px; opacity: .7; }
.pff__mini [data-pff-add] { padding: 0 12px; color: #aab0bd; font-weight: var(--fw-regular); }
.pff__mini [data-pff-add]:hover, .pff__mini [data-pff-clear]:hover { color: var(--c-white); background: rgba(var(--c-white-rgb), .16); }
.pff__mini [data-pff-edit] { gap: 10px; height: 44px; padding: 0 6px 0 16px; background: var(--grad-brand); font-weight: 600; }
.pff__mini [data-pff-edit] b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(var(--c-white-rgb), .2); font-variant-numeric: tabular-nums; }
.pff__mini [data-pff-edit] svg { width: 18px; height: 18px; }
.pff__mini .is-phone { display: none; }

@media (max-width: 1180px) {
  .pff__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pff__open { padding: 0 20px; }
  .pff__seg--q { flex: 1; padding-left: 20px; }
}
@media (max-width: 1024px) {
  .pff { margin: 56px 0 48px; }
  .pff__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pff__seg--q > svg { display: none; }
}
/* phones: a "Filters" button and the count; every group opens in a sheet */
@media (max-width: 767px) {
  .pff { margin: 40px 0 36px; }
  .pff::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-header) + 2); background: rgba(var(--c-navy-rgb), .45); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
  .pff.is-sheet::before { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .pff__bar { height: 62px; padding: 5px; }
  .pff__seg { display: none; }
  .pff__fbtn { display: flex; flex: 1; align-items: center; gap: 12px; height: 100%; padding: 0 16px; font-size: 15px; font-weight: var(--fw-medium); }
  .pff__fbtn svg { width: 20px; height: 20px; }
  .pff__fbtn i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--c-accent); color: var(--c-white); font-size: 12px; font-style: normal; }
  .pff__fbtn i[hidden] { display: none; }
  .pff__go { gap: 10px; padding: 0 6px 0 18px; font-size: 15px; }
  .pff__go b { min-width: 40px; height: 40px; font-size: 16px; }
  .pff.is-open .pff__bar { background: none; border-color: var(--pff-line); }
  .pff__panel, .pff.is-open .pff__panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) + 3); display: block; max-height: 86vh; margin: 0; padding: 0 22px 18px; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 32px 32px 0 0; background: var(--c-white); translate: 0 105%; visibility: hidden; transition: translate .45s var(--ease), visibility 0s linear .45s; }
  .pff.is-sheet .pff__panel { translate: none; visibility: visible; transition: translate .45s var(--ease); }
  .pff__sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 26px 0 14px; background: var(--c-white); }
  .pff__sheet-head::before { content: ""; position: absolute; left: 50%; top: 10px; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: #d9dbe3; }
  .pff__sheet-head h2 { font-size: 22px; font-weight: var(--fw-medium); }
  .pff__sheet-head [data-pff-clear] { margin-left: auto; font-size: 14px; font-weight: var(--fw-medium); color: var(--c-accent); }
  .pff__close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--pff-line); border-radius: 50%; }
  .pff__close svg { width: 16px; height: 16px; }
  .pff__sheet-q { display: flex; align-items: center; gap: 10px; height: 48px; margin-bottom: 6px; padding: 0 16px; border: 1px solid var(--pff-line); border-radius: var(--radius-pill); }
  .pff__sheet-q svg { flex: none; width: 18px; height: 18px; }
  .pff__tray, .pff__tray.is-open { display: block; padding: 16px 0; border-top: 1px solid #eef0f3; }
  .pff__sheet-q + .pff__tray { border-top: 0; }
  .pff__head { margin-bottom: 10px; }
  .pff__head h2 span, .pff__head p, .pff__head button { display: none; }
  .pff__head h2 small { display: block; font-size: 11px; }
  .pff__tiles { display: flex; flex-wrap: wrap; gap: 8px; }
  .pff__tile { gap: 0; min-height: 38px; padding: 0 14px; border-color: #dfe1e8; border-radius: var(--radius-pill); outline: 0; }
  .pff__th { display: none; }
  .pff__tt { display: flex; align-items: baseline; gap: 6px; }
  .pff__tt b { font-size: 14px; font-weight: var(--fw-regular); }
  .pff__tt small { margin: 0; font-size: 11px; }
  .pff__tt small span { display: none; }
  .pff__hint { display: none; }
  .pff__show { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center; gap: .3em; height: 58px; margin-top: 8px; border-radius: var(--radius-pill); background: var(--grad-brand); color: var(--c-white); font-size: 16px; font-weight: 600; }
  .pff__mini { top: auto; bottom: 16px; translate: -50% 150%; }
  .pff__mini .is-desk { display: none; }
  .pff__mini .is-phone { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .pff__th img, .pff__mini, .pff__panel, .pff::before { transition: none; }
}

/* ==== Write a recommendation (recommend/) ===================================
   The form on a white card and the review as it will show on the home page.
   Chips, fields and the send button are the ones of the project pages. */
.rec { padding: 160px var(--gutter) 120px; }
.rec__title { margin-top: 26px; font-size: clamp(2.25rem, 3.47vw, 3.125rem); font-weight: var(--fw-regular); line-height: 1.15; letter-spacing: -.01em; }
.rec__lead { margin-top: 18px; max-width: 46ch; font-size: 18px; line-height: 1.55; color: #4a4f5c; }
.rec__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 56px; }
.rec__card { padding: 44px 40px; border-radius: 32px; background: var(--c-white); }
.rec__form { display: grid; gap: 34px; }
.rec__form[hidden] { display: none; }
.rec__set { display: grid; gap: 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rec__set legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin-bottom: 0; padding: 0; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.rec__set legend + * { clear: both; }
.rec__set legend em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-accent-soft); font-style: normal; font-size: 12px; color: var(--c-accent); letter-spacing: 0; }
.rec__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.rec__f small { display: block; font-size: 12px; color: var(--c-muted); }
.rec__f input { font-size: 16px; padding: 8px 0 10px; }
.rec__ideas { font-size: 13.5px; line-height: 1.5; color: var(--c-muted); }
.rec__msg { padding: 14px 20px 6px; border: 2px solid var(--c-accent); border-radius: 14px; }
.rec__msg textarea { height: 224px; }
.rec__count { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--c-muted); }
.rec__count .is-ok { color: #19a463; }
.rec__ok { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #4a4f5c; cursor: pointer; }
.rec__ok input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--c-accent); }
.rec__form .pc-send { margin-top: 0; padding-top: 26px; border-top: 1px solid rgba(var(--c-navy-rgb), .1); }
.rec__form .pc-send output { max-width: 32ch; }
.rec__done { display: grid; gap: 16px; justify-items: start; padding: 20px 0; outline: 0; }
.rec__done[hidden] { display: none; }
.rec__done h2 { font-size: clamp(2rem, 3.06vw, 2.75rem); font-weight: var(--fw-light); line-height: 1.1; }
.rec__done p { max-width: 40ch; font-size: 16px; line-height: 1.55; color: #4a4f5c; }
.rec__live { position: sticky; top: 120px; padding: 40px 10px 0 30px; }
.rec__eye { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.rec__eye i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.rec__review { margin-top: 40px; gap: 30px; }
.rec__review .rv__quote { overflow-wrap: anywhere; }
.rec__review .rv__quote p + p { margin-top: .6em; }
.rec__review .rec__ph { color: #a6a9b3; }
.rec__review .rv__by { margin-top: 18px; }
.rec__note { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(var(--c-navy-rgb), .12); max-width: 46ch; font-size: 13px; line-height: 1.6; color: var(--c-muted); }
@media (max-width: 1024px) { .rec__live { padding-left: 10px; } }
@media (max-width: 767px) {
  .rec { padding: 121px var(--gutter) 80px; }
  .rec__title { font-size: 34px; }
  .rec__lead { font-size: 16px; }
  .rec__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 36px; }
  .rec__card { margin-inline: calc(var(--gutter) * -1); padding: 30px var(--gutter); border-radius: 24px; }
  .rec__2 { grid-template-columns: minmax(0, 1fr); }
  .rec__form .pc-send { flex-direction: column; align-items: stretch; }
  .rec__form .pc-send button { justify-content: space-between; }
  .rec__live { position: static; padding: 0; }
  .rec__review { margin-top: 28px; }
}

/* the recommendation form: the field the message names (2026-11-10) */
.rec__f.is-bad input, .rec__msg.is-bad textarea { border-color: #b3261e; }
.rec__f.is-bad small { color: #b3261e; }

/* the recommendation form (2026-11-10): the word counter is loud until the minimum is reached; a wrong field or chip group turns red */
.rec__count[data-rec-countwrap] { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.rec__count[data-rec-countwrap] [data-rec-count] { font-weight: 700; font-size: 15px; transition: color var(--dur-fast, .2s); }
.rec__count.is-low [data-rec-count] { color: #b3261e; }
.rec__count.is-ok [data-rec-count] { color: #1b7f4b; }
.rec__count-hint { font-size: 12px; color: var(--c-muted); }
.pj__chips.is-bad label { border-color: #b3261e; }
.rec__ok.is-bad { color: #b3261e; }