/* Case pages on phones (<= 767px, loaded with that media query): every block in one
   column. Sizes in --um (1px of a 390px-wide phone mock, mobile.css) where the desktop
   floors would be too large on a narrow screen. The rhythm is the landing's phones':
   blocks a section's air apart (--section-y), a title 24px over its content (the stack's
   headline over its chips, mobile-what.css), the pieces inside a block 16px apart. */

.case {
  --cb-x: var(--page-x); /* the narrow gutter on phones, as the landing's phones keep */
  --cb-xh: 0; /* the split stacks here: nothing to level */
  --cb-gap: var(--section-y);
  --cb-tight: var(--m-2);
  --cb-col: var(--m-2);
  --cb-head: var(--m-3);
  --cb-body: var(--fs-body); /* 18px here, as the landing's body */
  --cb-lead-fs: 21px; /* the lead, and the logo plate standing in it (case.css .cb-inline-mark--float) */
  --cb-air: var(--m-4); /* the larger air: the stats' under their title */
}

/* No curtain on phones (the landing's phones have none either): the hero scrolls away */
.cb-hero {
  position: relative;
  clip-path: none;
  min-height: var(--case-hero-h);
  padding-top: var(--m-below-head);
  padding-bottom: var(--m-4);
}
.cb-hero-title { font-size: calc(38 * var(--um)); line-height: 1.08; }
/* A service's mark (case.css .cb-hero-media--mark): above the title, in the screen's middle */
.cb-hero:has(.cb-hero-media--mark) > .cb-hero-title { max-width: none; }
.cb-hero-media--mark canvas {
  top: calc(var(--m-below-head) + var(--m-3));
  right: auto;
  left: 50%;
  width: min(64vw, 30svh);
  height: min(64vw, 30svh);
  translate: -50% 0;
}
.cb-title      { font-size: var(--fs-m-list-lg); }
.cb-label      { font-size: 22px; }
/* The float plate (case.css .cb-inline-mark--float) stands in the lead as on the desktop,
   square here: --float-lines of the lead tall and as wide, so the lines beside it still
   hold a few words each */
.cb-inline-mark--float {
  --float-lines: 4;
  width: calc((var(--float-lines) - 1) * 1lh + 0.686em);
}

/* Split: the title above its content, like a stacked block */
.cb-split { display: block; }
.cb-split > :first-child { padding-right: 0; }
.cb-split > :is(.cb-title, .cb-label, .eyebrow) + * { margin-top: var(--cb-head); }
/* (a list's first row starts with its own padding: the gap to its text is the same) */
.cb-split > .cb-title + .cb-list { margin-top: calc(var(--cb-head) - var(--cb-list-pad)); }
.cb-split > .cb-title + .cb-stats { margin-top: var(--cb-air); }
/* (What's next, case.css .cb-next: here a plain block of its own, before the call) */

/* The facts as a table, one to a row: the key at the left edge, the value at the right,
   hairlines between the rows and the block's own closing the last. (Two abreast, a long
   value ran to three lines and threw the row out; stacked, the keys read as a list.) */
.cb:has(> .cb-meta) { padding-bottom: 0; }
.cb-meta { display: block; }
.cb-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.cb-meta dt { flex: none; }
.cb-meta dd { margin: 0; white-space: normal; text-align: right; }

/* Stats: two to a line, whatever the desktop rows held. A label too long for its half takes
   its short form here (.ov-short, as the landing's contact overline) */
.cb-stats { gap: 24px; }
.cb-stats-row { flex-wrap: wrap; gap: 24px 16px; }
.cb-stat { flex: 1 1 calc(50% - 8px); }
.cb-stat-value { font-size: 25px; } /* = the landing's stats (sections.css .stat .h4) */
.cb-stat .ov-long { display: none; }
.cb-stat .ov-short { display: inline; }

.cb-cards { grid-auto-flow: row; }
.cb-card { padding: 24px; }
.cb-list--numbered > li { padding-left: 48px; }

.cb-points { max-width: none; gap: 28px; }

/* Pictures run edge to edge of the content (in the gutters, as the landing's works tiles),
   one after another. The desktop's wide strips
   (1352 / 534) are a sliver this narrow: 16:9 here (a plate with a ratio of its own keeps it) */
.cb-plate { --ratio: 16 / 9; }
.cb-media--offset .cb-plate { width: 100%; margin-left: 0; }
.cb-pair { grid-template-columns: 1fr; gap: var(--m-2); }
.cb-pair > :first-child { margin-right: 0; }
.cb-pair > .cb-plate--tall { --ratio: 4 / 5; }

/* Full bleed, its text on the page's gutters */
.cb-callout {
  margin-inline: calc(-1 * var(--cb-x));
  padding: 28px var(--cb-x) 32px;
}
.cb-callout-eq { height: 36%; }
.cb-callout-text { font-size: var(--fs-m-list); } /* the 28 step (mobile.css) */

/* The call on phones: a plain block, a screen high, on the scene's ground -- no board, no
   pin, nothing held to the window: it comes up and goes on with the page as one piece. The
   landing's phone composition (css/mobile.css .contact-*): the overline at its head, the
   mark on the centre line behind, the title and the button at its foot (in the block, not
   on the window's foot: held there, they slid over the mark as the block moved). svh, not
   the landing's lvh: with Safari's toolbar up the foot, and the button, is still on screen.
   In turn (js/case.js): the overline with the mark setting off, then the call once the
   mark has formed; once the block has covered the screen, all of it stays. */
html.case-js .cb-cta { --cta-open: 1; }
.cb-cta { --scene-glow-at: 50% 30%; height: auto; overflow: visible; }
.cb-cta-panel {
  position: relative;
  height: auto;
  min-height: 100svh;
  clip-path: none;
  padding-top: calc(var(--overline-top-narrow) + var(--m-foot)); /* the overline, its line and its air: the call never reaches it */
}
.cb-cta-panel > :not(.cb-cta-mark) { translate: none; }
.cb-cta .contact-copy { position: relative; bottom: auto; }
/* Its overline in a line mask (js/case.js): the slash beside the line, not over it, and
   coming in with it (it stood alone before the words had risen) */
.cb-cta .contact-overline.rv:not(.rv-block) { display: inline-flex; align-items: baseline; }
.cb-cta .contact-overline.rv:not(.rv-block)::before { transition: opacity var(--dur-slow) ease; }
.cb-cta .contact-overline.rv:not(.rv-block):not(.is-in)::before { opacity: 0; }

/* Pinned points: the landing's phone services (mobile-what.css) -- no pinned screen, an
   accordion. The titles stand in a column in grey, 16px apart; the open one is in ink with
   its tagline and copy under it, the grey plate with the mark beside the copy, run out to
   the screen's edge, and --open-air above and below it. A tap opens another (case-points.js:
   the plate goes with it and the mark re-forms, wiping in). */
.cb-points--pinned {
  --open-air: var(--m-4);
  --plate-w: var(--m-plate-w);
  --plate-h: var(--m-plate-h);
  height: auto;
}
.cb-points-panel { position: static; display: block; height: auto; padding-top: 0; }
.cb-points-list { gap: var(--m-2); padding-right: 0; }
.cb-points--pinned .cb-point {
  transition: grid-template-rows var(--dur-accordion) var(--ease-out), margin-top var(--dur-accordion) var(--ease-out);
}
.cb-points--pinned .cb-point.is-active:not(:first-child) { margin-top: calc(var(--open-air) - var(--m-2)); }
/* The titles at the integrations' step (mobile-what.css .list): the longest holds two lines */
.cb-points--pinned .cb-point > .cb-sub {
  font-size: var(--fs-m-list);
  color: var(--muted);
  cursor: pointer;
}
.cb-points--pinned .cb-point.is-active > .cb-sub { color: var(--ink); }
/* The body: the tagline across, then the copy in the left column and the plate in the
   right one, standing at the copy's foot (the copy's rows grow to the plate's height
   when it is the taller). Every body keeps the plate's column, so a copy's lines are the
   same with the plate or without it. Out to the screen's edge, where the plate stands. */
.cb-points--pinned .cb-point-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--plate-w) + var(--cb-x));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--m-2);
  align-content: start;
  max-width: none;
  margin-right: calc(-1 * var(--cb-x));
}
.cb-points--pinned .cb-point-body > * { grid-column: 1; }
.cb-points--pinned .cb-point-body > :first-child { padding-top: var(--m-2); }
.cb-points--pinned .cb-point-body > * + * { margin-top: var(--m-2); }
.cb-points--pinned .cb-point-body > .cb-point-tag { grid-column: 1 / -1; max-width: 30ch; }
.cb-points--pinned .cb-point-body > p:not(.cb-point-tag),
.cb-points--pinned .cb-point-body li { color: var(--ink); }
/* The air under the open entry (the list's gap makes up the rest), clipped with it shut */
.cb-points--pinned .cb-point-body::after {
  content: "";
  grid-column: 1 / -1;
  height: calc(var(--open-air) - var(--m-2));
}
.cb-points--pinned .cb-point-body > .cb-points-plate {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: stretch;
  width: auto;
  height: var(--plate-h);
  aspect-ratio: auto;
  margin: 0;
}

/* Back to top (js/ui/back-to-top.js): a white disc in the bottom right corner, lit as the
   pills are; it rises in once the hero has gone by (block-rise) */
.to-top {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: calc(var(--z-menu) - 1); /* under the drawer and the grey */
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--r-round);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--lift-rest);
  opacity: 0;
  translate: 0 var(--rise-block);
  pointer-events: none;
  transition: opacity var(--dur-slow) ease, translate var(--dur-slow) ease;
}
.to-top.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top svg {
  width: 24px; /* = its viewBox: the 2px stroke falls on whole pixels */
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2; /* = the service disc's plus */
  stroke-linecap: butt; /* square-ended, as every line on the site */
  stroke-linejoin: miter;
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}