/* The client pages: For businesses, For governments and For urban
   authorities, one kind of client each, on the dusk navy of Showcases. All
   three are laid out alike and show seven whole windows of the Polycity
   application in the same places: the study's change drawn in the editor
   beside the headline, over a soft glow of brand colours, with a framed strip
   of three things every client gets; then the study box with its two results;
   then four decisions, each drawn in the editor. Every rule starts at
   .client-page, so nothing reaches another page. One column under 720
   pixels. */

/* The header is navy over the page, as on Showcases: white words, CITY in the
   bright run of brand colours and the mark's lifted-colour copy. The phone
   menu still opens on paper, so the header goes back to paper while it lies
   open. */
.client-page { background: #000b2d; }
.client-page .site-header:not(:has(.mobile-menu[open])) { background: #000b2d; border-color: #000b2d; color: #fff; }
.client-page .site-header:not(:has(.mobile-menu[open])) .brand-lockup { color: #fff; }
.client-page .site-header:not(:has(.mobile-menu[open])) .brand-word span { background: linear-gradient(90deg, #0ad6ed, #3f6bff, #9a4dff, #d63aa4, #fd4b08); -webkit-background-clip: text; background-clip: text; color: transparent; }
.client-page .site-header:not(:has(.mobile-menu[open])) .brand .brand-mark { display: none; }
.client-page .site-header:not(:has(.mobile-menu[open])) .brand .brand-mark-light { display: block; }
.client-page .site-header:not(:has(.mobile-menu[open])) .nav-links a,
.client-page .site-header:not(:has(.mobile-menu[open])) .language-switch summary,
.client-page .site-header:not(:has(.mobile-menu[open])) .mobile-menu summary { color: #fff; }
.client-page .site-header:not(:has(.mobile-menu[open])) .nav-links a[aria-current=page] { color: #fff; box-shadow: 0 2px #0ad6ed; }
.client-page .site-header:not(:has(.mobile-menu[open])) .language-switch summary:hover { background: #ffffff1f; }
.client-page .site-header:not(:has(.mobile-menu[open])) .nav > .button { color: #fff; border-color: #ffffff66; background: transparent; }
.client-page .site-header:not(:has(.mobile-menu[open])) .nav > .button:hover { background: #ffffff1f; }

.client { --edge: clamp(20px, 4.5vw, 72px); font-family: Manrope, Arial, sans-serif; color: #fff; line-height: 1.5; background: radial-gradient(90% 520px at 80% 0, #2b3f80 0, #0f1d4c 45%, #000b2d 80%); padding-bottom: 8px; }
.client > * { width: min(1240px, calc(100% - 2 * var(--edge))); margin-inline: auto; }
.client .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: #0ad6ed; margin: 0 0 10px; }
.client h1, .client h2, .client h3 { font-weight: 650; margin: 0; }
.client h1 em, .client h2 em { font-style: normal; background: linear-gradient(90deg, #0ad6ed, #3f6bff 40%, #9a4dff 70%, #fd4b08); -webkit-background-clip: text; background-clip: text; color: transparent; }
.client figure { margin: 0; }
.client figcaption { font-size: 13px; color: #8e9bc2; margin: 10px 0 0; }

/* A window of the application, the one frame every picture on these pages
   stands in. */
.client-window { display: block; border: 1px solid #ffffff2e; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px #0008; }
.client-window img { display: block; width: 100%; height: auto; }

/* The opening: the headline beside the application's window, over a glow
   drawn with gradients only, so a screenshot of the page never trips on a
   blur filter. */
.client-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); gap: 28px 56px; align-items: center; padding: clamp(40px, 6vw, 72px) 0 44px; }
.client-hero h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 22px; }
.client-hero .lead { font-size: 18px; line-height: 1.55; color: #c9d2ea; margin: 0; max-width: 500px; }
.client-glow { position: relative; }
.client-glow::before { content: ""; position: absolute; inset: -56px -40px -32px; z-index: 0; pointer-events: none;
  /* Each glow fades out inside the box, so none of them ends on its edge. */
  background: radial-gradient(40% 50% at 32% 45%, #0ad6ed55, #0ad6ed00 70%), radial-gradient(38% 50% at 66% 52%, #9a4dff66, #9a4dff00 70%), radial-gradient(22% 26% at 80% 76%, #fd4b0844, #fd4b0800 70%); }
.client-glow > * { position: relative; z-index: 1; }

/* A framed strip of cells: the three things every client gets, and each
   decision's three results. Never loose pills. */
.client-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #ffffff2e; margin: 0; padding: 0; list-style: none; }
.client-cells li { padding: 12px 16px; font-size: 14px; font-weight: 700; border-left: 1px solid #ffffff1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-cells li:first-child { border-left: 0; }
.client-hero .client-cells { grid-column: 1 / -1; }

/* The study box: its text and button beside what a study shows, a numbered
   pair of the study's results and their key, and the three steps of a study
   on one line, running down on a phone. */
.client-study { position: relative; padding: clamp(22px, 3vw, 40px); border: 1px solid #0ad6ed55; background: linear-gradient(135deg, #0ad6ed14, #7b2fbf26); }
.client-study::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: linear-gradient(90deg, #0ad6ed, #3f6bff 40%, #9a4dff 70%, #fd4b08); }
.study-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.client-study h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 14px; }
.client-study .say { font-size: 16px; line-height: 1.55; color: #c9d2ea; margin: 0 0 22px; max-width: 520px; }
.study-ask { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; background: #febe11; color: #000b2d; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.study-ask:hover { background: #ffd04d; }
.study-shows { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8e9bc2; margin: 0 0 8px; }
.study-ticks { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ffffff1f; }
.study-ticks li { position: relative; font-size: 16px; font-weight: 600; padding: 11px 0 11px 30px; border-bottom: 1px solid #ffffff1f; }
.study-ticks li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 12px; height: 7px; border: solid #0ad6ed; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.client-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 34px 0 14px; }
.client-pair .client-window { box-shadow: 0 16px 36px #0008; }
.client-pair figcaption { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-pair figcaption b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #0ad6ed; color: #0ad6ed; font-size: 11px; font-weight: 800; }
.study-key { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: #c9d2ea; white-space: nowrap; }
.study-key li { display: flex; align-items: center; gap: 7px; }
.study-key i { display: block; width: 16px; height: 4px; border-radius: 2px; }
.study-key i.scale { width: 44px; }
.study-key .where { margin-left: auto; color: #8e9bc2; }
.study-steps { display: flex; align-items: center; gap: 16px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid #ffffff1f; list-style: none; }
.study-steps li { position: relative; display: flex; align-items: center; gap: 12px; flex: 1 1 auto; font-size: 15px; font-weight: 700; white-space: nowrap; }
.study-steps li:last-child { flex: none; }
.study-steps li:not(:last-child)::after { content: ""; flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, #0ad6ed, #0ad6ed00); }
.study-steps b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid #0ad6ed; color: #0ad6ed; background: #0a1640; font-size: 13px; font-weight: 800; }

/* The decisions: an icon in the decision's colour, who it is for, the
   decision, the example drawn and a framed strip of what they get, beside
   the example's window, on alternate sides. */
.client-table { margin-top: 48px; margin-bottom: 56px; }
.client-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 30px 0; border-bottom: 1px solid #ffffff1f; }
.client-tr:nth-child(even) > .client-window { order: -1; }
.client-tr .client-window { box-shadow: 0 16px 36px #0008, 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent); }
.decision { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.client-icon { grid-row: 1 / 3; width: 52px; height: 52px; border: 1px solid currentColor; border-radius: 10px; display: grid; place-items: center; background: #ffffff08; color: var(--tone); }
.client-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.decision .who { margin: 0; align-self: end; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #8e9bc2; }
.decision h3 { align-self: start; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.decision .set { grid-column: 1 / -1; margin: 22px 0 0; padding: 14px 0 14px 18px; border-left: 3px solid var(--tone); background: linear-gradient(90deg, #ffffff0d, #ffffff00); font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; }
.decision .client-cells { grid-column: 1 / -1; margin-top: 18px; }
.decision .client-cells li { font-size: 14px; font-weight: 600; color: #dfe5f5; white-space: normal; line-height: 1.3; padding: 12px 14px; }

.client-page .site-strip { border-top: 1px solid #ffffff1f; }

@media (max-width: 900px) {
  .study-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 720px) {
  .client-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 0 30px; }
  .client-hero h1 { font-size: 38px; }
  .client-hero .lead { font-size: 16px; }
  .client-glow::before { inset: -28px -12px -16px; }
  .client-cells { grid-template-columns: minmax(0, 1fr); }
  .client-cells li { border-left: 0; border-top: 1px solid #ffffff1f; }
  .client-cells li:first-child { border-top: 0; }
  .client-study { margin-inline: 14px; width: auto; }
  .client-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0 12px; }
  .client-pair figcaption { font-size: 14px; }
  .study-key { flex-wrap: wrap; gap: 8px 16px; font-size: 12px; }
  .study-key .where { margin-left: 0; width: 100%; }
  .study-steps { flex-direction: column; align-items: stretch; gap: 0; padding-top: 18px; }
  .study-steps li { padding: 0 0 20px; }
  .study-steps li:last-child { padding: 0; }
  .study-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 1px; min-width: 0; flex: none; height: auto; background: #0ad6ed88; }
  .client-table { margin-top: 32px; margin-bottom: 36px; }
  .client-tr { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .client-tr:nth-child(even) > .client-window { order: 0; }
  .decision { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; }
  .client-icon { width: 44px; height: 44px; }
  .client-icon svg { width: 22px; height: 22px; }
  .decision h3 { font-size: 20px; }
  .decision .set { margin-top: 16px; padding: 10px 0 10px 14px; font-size: 16px; }
  .decision .client-cells { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decision .client-cells li { border-top: 0; border-left: 1px solid #ffffff1f; font-size: 12.5px; padding: 10px; }
  .decision .client-cells li:first-child { border-left: 0; }
}