/* Case-study pages (work/<name>/index.html), on top of style.css. Each page takes on its client's look by setting
   these tokens in a style attribute on its <main class="case">; everything else is shared. Text on --c-navy is
   white; on --c-sky it is --c-navy. --c-ocean is the client's accent (numbers, links, the glow in the hero). The
   font tokens are only for the type samples in the "colours and type" part. */

.case {
  --c-navy: #0f2d5b;
  --c-ocean: #1e73e8;
  --c-sky: #f2f7ff;
  --c-slate: #687c93;
  --c-font-display: var(--font-sans);
  --c-display-style: normal;
  --c-display-weight: 700;
  --c-font-text: var(--font-sans);
  --wrap: calc(1180px + 2 * var(--gutter));
}

/* ---------- Hero ----------
   A rounded slab in the client's navy, inset like the home page hero so the shared header floats on it the same
   way. Deep space at the bottom lets the mockup below hang over its edge. */

.case-hero {
  position: relative;
  isolation: isolate;
  margin: 12px 12px 0;
  padding: clamp(150px, 13vw, 180px) var(--gutter) clamp(170px, 22vw, 330px);
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 44px);
  background:
    radial-gradient(ellipse 70% 55% at 50% 110%, color-mix(in srgb, var(--c-ocean) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 0%, color-mix(in srgb, var(--c-ocean) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-navy) 70%, #000) 0%, var(--c-navy) 60%);
  color: #fff;
  text-align: center;
}

.case-hero :focus-visible {
  outline-color: #fff;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  color: rgb(255 255 255 / 0.6);
  font-size: 0.875rem;
  list-style: none;
}

.crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: rgb(255 255 255 / 0.35);
}

.crumbs a {
  transition: color 0.2s;
}

.crumbs a:hover {
  color: #fff;
}

.case-hero__eyebrow {
  display: inline-block;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  font-size: 0.875rem;
  font-weight: 500;
}

.case-hero__title {
  margin: 18px 0 0;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.case-hero__lead {
  max-width: 40ch;
  margin: 18px auto 0;
  color: rgb(255 255 255 / 0.78);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  text-wrap: balance;
}

.case-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 36px);
}

.btn--ghost {
  border: 1px solid rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 0.18);
}

/* The computer and phone mockup, pulled up over the bottom of the hero. The picture has its own soft shadow and
   transparent space round it, so it needs no frame here. */
.case-shot {
  position: relative;
  max-width: 1120px;
  margin: calc(-1 * clamp(150px, 21vw, 310px)) auto 0;
  padding: 0 var(--gutter);
}

.case-shot img {
  width: 100%;
  height: auto;
}

/* ---------- The facts: client, kind of business, scope, address ---------- */

.case-info {
  max-width: var(--wrap);
  margin: clamp(8px, 2vw, 24px) auto 0;
  padding: 0 var(--gutter);
}

.case-info__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

@media (min-width: 560px) {
  .case-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .case-info__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.case-info__item {
  padding: 20px 22px 22px;
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #fff;
}

.case-info__item dt {
  color: var(--c-slate);
  font-size: 0.875rem;
}

.case-info__item dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.case-info__item a {
  color: var(--c-ocean);
  overflow-wrap: anywhere;
}

.case-info__item a:hover {
  text-decoration: underline;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
  margin-top: clamp(20px, 2.4vw, 28px);
}

.case-tags p {
  margin: 0;
  color: var(--c-slate);
  font-size: 0.9375rem;
}

.case-tags ul {
  display: contents;
  list-style: none;
}

.case-tags li {
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--c-ocean) 25%, #fff);
  border-radius: 999px;
  background: var(--c-sky);
  color: var(--c-navy);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ---------- The story ----------
   Numbered parts, each a band of its own: the text in a narrow column, the screenshot in a wide one, swapping sides
   from one part to the next. Every other band is the client's pale sky. One column on phones, text first. */

.case-story {
  margin-top: clamp(56px, 8vw, 112px);
}

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
}

.story:nth-child(odd) {
  max-width: none;
  padding-inline: max(var(--gutter), (100% - 1180px) / 2);
  background: var(--c-sky);
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .story:nth-child(even) .story__text {
    order: 1;
  }

  .story:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.story__num {
  margin: 0;
  color: var(--c-ocean);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.story__text h2,
.case-brand__head h2 {
  margin: 10px 0 0;
  color: var(--c-navy);
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.story__text p:not(.story__num),
.case-brand__head p:not(.story__num) {
  margin: 18px 0 0;
  color: #3d4a63;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.story__text .story__note {
  padding-left: 16px;
  border-left: 3px solid color-mix(in srgb, var(--c-ocean) 45%, #fff);
  color: var(--c-slate) !important;
  font-size: 0.9375rem !important;
}

/* The screenshot in a browser window, with the phone version standing in front of it at the bottom right. The
   window leaves room on its right and below for the phone to overhang. */
.story__media {
  position: relative;
  margin: 0;
  padding: 0 7% 8% 0;
  container-type: inline-size;
}

.frame {
  overflow: hidden;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 60px -30px rgb(15 45 91 / 0.35), 0 8px 20px -10px rgb(15 45 91 / 0.15);
}

.frame::before {
  content: "";
  display: block;
  height: 26px;
  border-bottom: 1px solid #e3e8f2;
  background:
    radial-gradient(circle, #ff5f57 4px, transparent 4.5px) 12px 50% / 10px 10px no-repeat,
    radial-gradient(circle, #febc2e 4px, transparent 4.5px) 28px 50% / 10px 10px no-repeat,
    radial-gradient(circle, #28c840 4px, transparent 4.5px) 44px 50% / 10px 10px no-repeat,
    #eef1f6;
}

.frame img,
.phone img {
  width: 100%;
  height: auto;
}

/* sized in cqw of the figure, so its edge and island keep their shape at any width */
.phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22%;
  padding: 1cqw;
  border-radius: 4.2cqw;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 24px 40px -18px rgb(15 45 91 / 0.55);
}

.phone img {
  border-radius: 3.2cqw;
}

.phone::after {
  content: "";
  position: absolute;
  top: 2cqw;
  left: 50%;
  width: 6cqw;
  height: 1.7cqw;
  margin-left: -3cqw;
  border-radius: 999px;
  background: var(--ink);
}

/* ---------- Colours and type ---------- */

.case-brand {
  padding: clamp(56px, 8vw, 112px) var(--gutter);
}

.case-brand__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.case-brand__head {
  max-width: 62ch;
}

/* Five cards in a row; on a phone, a list of rows with the colour as a square at the left of each. */
.swatches {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.swatch {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-content: center;
  padding: 8px;
  border: 1px solid #e3e8f2;
  border-radius: 16px;
  background: #fff;
}

.swatch__chip {
  grid-row: 1 / 3;
  height: 56px;
  border-radius: 10px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgb(15 45 91 / 0.08); /* so Sky and White still show an edge */
}

.swatch b {
  align-self: end;
}

@media (min-width: 640px) {
  .swatches {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .swatch {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 8px 8px 16px;
    border-radius: 18px;
  }

  .swatch__chip {
    grid-row: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 12px;
    border-radius: 12px;
  }

  .swatch b,
  .swatch code {
    padding: 0 8px;
  }
}

.swatch b {
  color: var(--c-navy);
  font-size: 1rem;
  font-weight: 600;
}

.swatch code {
  color: var(--c-slate);
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.fonts {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

@media (min-width: 800px) {
  .fonts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.font-card {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid #e3e8f2;
  border-radius: 18px;
  background: #fff;
}

.font-card p {
  margin: 0;
}

.font-card__name {
  color: var(--c-navy);
  font-weight: 600;
}

.font-card__name span {
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-sky);
  color: var(--c-ocean);
  font-size: 0.8125rem;
  font-weight: 500;
}

.font-card__sample {
  margin: clamp(16px, 2vw, 24px) 0 !important;
  color: var(--c-navy);
  line-height: 1.35;
}

.font-card__sample--display {
  font-family: var(--c-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: var(--c-display-style);
  font-weight: var(--c-display-weight);
}

.font-card__sample--text {
  font-family: var(--c-font-text);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.font-card__why {
  color: var(--c-slate);
  font-size: 0.9375rem;
}

/* ---------- Call to action, and the way back ---------- */

.case-cta {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 0 var(--gutter) clamp(56px, 8vw, 112px);
}

.case-cta__card {
  width: 100%;
  max-width: 880px;
  padding: clamp(32px, 5vw, 56px) clamp(22px, 4vw, 56px);
  border: 1px solid #e3e8f2;
  border-radius: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgb(10 98 240 / 0.08), transparent 70%),
    #fff;
  text-align: center;
}

.case-cta__card h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.case-cta__card p {
  margin: 12px 0 0;
  color: #4a5570;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  text-wrap: balance;
}

.case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.btn--line {
  border: 1px solid var(--navy);
  color: var(--navy);
}

.btn--line:hover {
  background: var(--navy);
  color: #fff;
}

.case-back {
  color: var(--navy);
  font-weight: 600;
  transition: color 0.2s;
}

.case-back:hover {
  color: var(--blue);
}