/* Client results: the home page's one dark band, a little over a screen tall and edge to edge.
   Top to bottom: the title, centred; one case; the two tiles that swap the cases
   (client-results.js), centred. A case is its overview video, which takes most of the
   width, with its figures in a column beside it; each figure counts up when its case
   comes into view. The case is set wider than the page's other columns, so the video
   and the figures reach further out to the sides.

   The band has no hard top or bottom edge: its dark ground fades out over --cr-fade into
   the page's own colour, which is what the sections above and below it stand on.

   The figures are in the page's own sans, in proportional digits: equal-width digits
   make a large "121" look loose. Figures and the "12 → 19" lines carry dir="ltr" in
   the markup, so a right-to-left page does not turn them round. */
.cr {
  /* How far each edge takes to blend into the page. */
  --cr-fade: clamp(56px, 9vh, 110px);
  /* Air above the title and under the tiles, beyond what the fades take: with it the band is
     taller than the screen, by design (the owner found it squeezed top and bottom at one screen). */
  --cr-air: clamp(26px, 5.5vh, 64px);
  /* The title sits this much higher than the air alone would put it, and that much further
     from the case: the case itself does not move (the owner wanted the title pushed up a bit). */
  --cr-lift: clamp(14px, 2.6vh, 28px);
  /* Everything in the band that is not the video, top to bottom: the room the video may not take. */
  --cr-rest: 440px;
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-items: center;
  min-height: 100svh;
  /* The top clears the header bar and the fade; nothing white is set on the fading ground. */
  padding: max(86px, calc(var(--cr-fade) + 26px + var(--cr-air) - var(--cr-lift))) 0 calc(var(--cr-fade) + 6px + var(--cr-air));
  color: #fff; background: transparent;
  /* A jump to #results fills the screen with it. */
  scroll-margin-top: 0;
}
/* The hero's blue glow and ruled grid, on navy instead of paper. */
.cr::before, .cr::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cr::before {
  z-index: -2;
  background:
    radial-gradient(ellipse 68% 58% at 84% 6%, rgba(72, 108, 252, .5), transparent 70%),
    radial-gradient(ellipse 58% 52% at 0% 100%, rgba(72, 108, 252, .24), transparent 70%),
    linear-gradient(180deg, #0c2454 0%, #071634 100%);
  /* The blended edges: the ground is let through gradually at the top and again at the
     bottom, on an eased ramp so no band shows. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.05) calc(var(--cr-fade) * 0.14), rgba(0, 0, 0, 0.2) calc(var(--cr-fade) * 0.3),
    rgba(0, 0, 0, 0.5) calc(var(--cr-fade) * 0.5), rgba(0, 0, 0, 0.8) calc(var(--cr-fade) * 0.7), rgba(0, 0, 0, 0.95) calc(var(--cr-fade) * 0.86),
    #000 var(--cr-fade), #000 calc(100% - var(--cr-fade)), rgba(0, 0, 0, 0.95) calc(100% - var(--cr-fade) * 0.86),
    rgba(0, 0, 0, 0.8) calc(100% - var(--cr-fade) * 0.7), rgba(0, 0, 0, 0.5) calc(100% - var(--cr-fade) * 0.5), rgba(0, 0, 0, 0.2) calc(100% - var(--cr-fade) * 0.3),
    rgba(0, 0, 0, 0.05) calc(100% - var(--cr-fade) * 0.14), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.05) calc(var(--cr-fade) * 0.14), rgba(0, 0, 0, 0.2) calc(var(--cr-fade) * 0.3),
    rgba(0, 0, 0, 0.5) calc(var(--cr-fade) * 0.5), rgba(0, 0, 0, 0.8) calc(var(--cr-fade) * 0.7), rgba(0, 0, 0, 0.95) calc(var(--cr-fade) * 0.86),
    #000 var(--cr-fade), #000 calc(100% - var(--cr-fade)), rgba(0, 0, 0, 0.95) calc(100% - var(--cr-fade) * 0.86),
    rgba(0, 0, 0, 0.8) calc(100% - var(--cr-fade) * 0.7), rgba(0, 0, 0, 0.5) calc(100% - var(--cr-fade) * 0.5), rgba(0, 0, 0, 0.2) calc(100% - var(--cr-fade) * 0.3),
    rgba(0, 0, 0, 0.05) calc(100% - var(--cr-fade) * 0.14), transparent 100%);
}
.cr::after {
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 72% at 50% 40%, #000 18%, transparent 76%);
          mask-image: radial-gradient(ellipse 80% 72% at 50% 40%, #000 18%, transparent 76%);
}
/* Wider than the page's own column (.wrap): the case reaches out towards both edges. */
.cr .cr-wrap { width: 100%; max-width: 1760px; padding-inline: clamp(18px, 3.2vw, 64px); }

.cr h2.cr-title {
  margin: 0 0 calc(clamp(20px, 3.6vh, 40px) + var(--cr-lift)); max-width: none;
  color: #fff; text-align: center; text-wrap: balance;
  font-size: clamp(2.1rem, 3.8vw, 3.3rem); line-height: 1.08;
  font-weight: 300;                        /* lighter than the page's other headings (500): white on navy reads heavier */
}

/* The two cases are picked by tile, under the case: the business's shop front, with its
   logo in front. The photo is darkened from the bottom so the white logo always reads.
   No outline on either: the chosen tile is in colour and lifted, the other has the
   colour taken out of its photo and is dimmed. */
.cr-tabs { display: flex; justify-content: center; gap: 12px; margin-top: clamp(20px, 3.4vh, 38px); }
.cr-tab {
  appearance: none; position: relative; isolation: isolate; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; flex: none; width: 96px; height: 96px; padding: 0;
  border: 0; border-radius: 20px; background: #0b1020;
  opacity: .58;
  transition: opacity .35s var(--ease), box-shadow .35s var(--ease);
}
.cr-tab::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 22, 52, .3), rgba(7, 22, 52, .74)); }
.cr-tab-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) brightness(.8);
  transition: filter .45s var(--ease), transform .7s var(--ease);
}
.cr-tab-logo { display: block; width: 76%; height: auto; max-height: 46%; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); }
.cr-tab:hover { opacity: .9; }
.cr-tab[aria-selected="true"] { opacity: 1; box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8); }
.cr-tab[aria-selected="true"] .cr-tab-photo { filter: none; transform: scale(1.05); }
/* Keyboard focus only: a ring that a pointer never draws. */
.cr-tab:focus-visible, .cr-panel:focus-visible, .cr-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* A case. In the page its parts come in reading order: what the business is, its video,
   its figures, the way on. From 901px the video and the figures stand side by side, and
   the first and last of the four share one line under them, the full width (so the
   sentence stays on one line in every language).
   The video's column is 60% of the width, less on a short screen: it is sized so that title,
   video, the line beneath and the tiles would fit one screen without the band's extra air
   (--cr-rest is everything but the video and that air), so a jump to the band shows them all. */
.cr-panel {
  display: grid; align-items: start;
  grid-template-columns: minmax(46%, min(60%, calc((100svh - var(--cr-rest)) * 16 / 9))) minmax(0, 1fr);
  grid-template-areas: "film stats" "foot foot";
  column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(12px, 2vh, 18px);
  scroll-margin-top: 76px;                 /* a case brought into view by its tile stops under the header bar */
}
.cr-panel[hidden] { display: none; }
.cr-who { grid-area: foot; margin: 0 9em 0 0; margin-inline: 0 9em; color: rgba(255, 255, 255, .74); font-size: .86rem; line-height: 1.6; text-wrap: pretty; }
.cr-link { grid-area: foot; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.cr-link span { transition: transform .2s ease; }
.cr-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.cr-link:hover span { transform: translateX(4px); }

/* The overview video. The page holds its still; client-results.js lays the video over it
   and plays it when the case is on screen. The button (the whole frame, drawn as a round
   play mark) is shown only when the browser will not start a video by itself. */
.cr-film {
  grid-area: film; position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 1.5vw, 22px); background: #0b1020;
  box-shadow: 0 34px 70px -38px rgba(0, 0, 0, .9);
}
.cr-film > img, .cr-film > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-film > video { opacity: 0; transition: opacity .45s var(--ease); }          /* fades in over the still once it is running */
.cr-film.is-playing > video { opacity: 1; }
.cr-film-play { appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cr-film-play[hidden] { display: none; }
.cr-film-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: rgba(7, 22, 52, .66); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
  transition: background .3s var(--ease);
}
.cr-film-play::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -8px;
  border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.cr-film-play:hover::before { background: rgba(72, 108, 252, .9); }
.cr-film-play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* The figures: two to a row, the rows spread over the height of the video. Rows keep their own height (a language whose labels run to four lines makes
   one row taller, not all three). Each figure is sized from the column's own width
   (10cqw), so "$17,129" fits its half at any screen size, and from the screen's height
   (5.2vh), so three rows of them stay no taller than the video beside them. */
.cr-stats {
  grid-area: stats; align-self: stretch; container-type: inline-size;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: space-between;
  column-gap: clamp(18px, 2.4vw, 34px);
}
.cr-stats li { padding: clamp(10px, 1.5vh, 14px) 0 clamp(8px, 1.25vh, 12px); border-top: 1px solid rgba(255, 255, 255, .18); }
.cr-num { display: inline-block; white-space: nowrap; }
.cr-value { margin: 0; font: 500 clamp(1.8rem, 2.9vw, 2.7rem)/1 var(--sans); letter-spacing: -.05em; }
@supports (font-size: 1cqw) { .cr-value { font-size: clamp(1.7rem, min(10cqw, 5.2vh), 3.3rem); } }
.cr-label { margin: 7px 0 0; color: rgba(255, 255, 255, .86); font-size: .84rem; line-height: 1.46; overflow-wrap: anywhere; }
.cr-base { margin: 4px 0 0; color: rgba(255, 255, 255, .62); font-size: .78rem; line-height: 1.5; }
.cr-stars { color: #f6b93b; letter-spacing: .08em; }
/* A case with four figures has two rows to fill the same height: they are set larger. */
@media (min-width: 901px) {
  .cr-stats-few { grid-auto-rows: 1fr; }
  .cr-stats-few .cr-value { font-size: clamp(2.1rem, 3.7vw, 3.4rem); }
  @supports (font-size: 1cqw) { .cr-stats-few .cr-value { font-size: clamp(2.1rem, min(13cqw, 7vh), 4rem); } }
  .cr-stats-few .cr-label { margin-top: 12px; font-size: .95rem; }
  .cr-stats-few .cr-base { margin-top: 6px; font-size: .84rem; }
}

/* A case arriving: its blocks rise in turn. client-results.js adds .is-in. */
@keyframes cr-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
.cr-panel.is-in > .cr-film, .cr-panel.is-in > .cr-who, .cr-panel.is-in > .cr-link, .cr-panel.is-in .cr-stats li { animation: cr-in .7s var(--ease) both; }
.cr-panel.is-in .cr-stats li:nth-child(1) { animation-delay: .08s; }
.cr-panel.is-in .cr-stats li:nth-child(2) { animation-delay: .13s; }
.cr-panel.is-in .cr-stats li:nth-child(3) { animation-delay: .18s; }
.cr-panel.is-in .cr-stats li:nth-child(4) { animation-delay: .23s; }
.cr-panel.is-in .cr-stats li:nth-child(5) { animation-delay: .28s; }
.cr-panel.is-in .cr-stats li:nth-child(6) { animation-delay: .33s; }
.cr-panel.is-in > .cr-who, .cr-panel.is-in > .cr-link { animation-delay: .3s; }

/* A wide but short screen (a small laptop): a shorter fade, less air and smaller tiles,
   so the video keeps its share of the width and all of the case is on screen at once. */
@media (min-width: 901px) and (max-height: 780px) {
  .cr { --cr-fade: 38px; --cr-air: 30px; --cr-lift: 16px; --cr-rest: 304px; padding: calc(74px + var(--cr-air) - var(--cr-lift)) 0 calc(40px + var(--cr-air)); }
  .cr h2.cr-title { margin-bottom: calc(14px + var(--cr-lift)); font-size: clamp(1.9rem, 3vw, 2.5rem); }
  .cr-tabs { margin-top: 14px; }
  .cr-tab { width: 76px; height: 76px; border-radius: 18px; }
  .cr-stats li { padding: 9px 0 7px; }
  .cr-label { margin-top: 6px; line-height: 1.42; }
}
@media (max-width: 900px) {
  @supports (font-size: 1cqw) { .cr-value { font-size: clamp(1.7rem, 10cqw, 2.9rem); } }
  .cr-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "film" "stats" "link"; row-gap: clamp(18px, 3vh, 26px); }
  .cr-who { grid-area: who; margin-inline: 0; text-align: center; }
  .cr-stats { align-self: auto; }
  .cr-link { grid-area: link; justify-self: center; min-height: 32px; }
}
/* The narrowest phones: a one-word label longer than its column ("Webbplatsförfrågningar")
   is hyphenated where the language allows, rather than cut anywhere. */
@media (max-width: 380px) { .cr-label { -webkit-hyphens: auto; hyphens: auto; } }
@media (max-width: 560px) {
  .cr-tab { flex: 0 1 168px; width: auto; height: 96px; }
  .cr-tab-logo { width: 68%; max-height: 52%; }
  .cr-stats { column-gap: 18px; }
  .cr-label { font-size: .84rem; }
  .cr-film-play::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-panel.is-in > .cr-film, .cr-panel.is-in > .cr-who, .cr-panel.is-in > .cr-link, .cr-panel.is-in .cr-stats li { animation: none; }
  .cr-tab, .cr-tab-photo, .cr-film > video, .cr-film-play::before, .cr-link span { transition: none; }
}