/* ==========================================================================
   BENTO SECTIONS — rules transcribed verbatim from the source stylesheet
   (docs/research/css/index.f9761eab.pretty.css).
   Selectors keep the source BEM names so the markup is a 1:1 match.
   Breakpoints are source-only: 375 / 600 / 744 / 1020 / 1280 / 1440 / 1920.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .bento-background — the brown container that wraps #features / #marketing /
   #selling. The source sets the colour inline (style="background-color:#34281D")
   and only ships the transition in CSS.
   -------------------------------------------------------------------------- */
.bento-background {
  background-color: var(--bento-bg);
  transition: background-color .3s cubic-bezier(.455, .03, .515, .955);
}

/* --------------------------------------------------------------------------
   .headline
   -------------------------------------------------------------------------- */
.headline {
  padding: 80px var(--grid-gutter-width) 64px;
}
@media (width >= 1020px) {
  .headline {
    grid-template-columns: repeat(2, calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)));
    gap: 0 var(--grid-gutter-width);
    grid-template-rows: auto 1fr;
    align-items: flex-start;
    display: grid;
  }
}
@media (width >= 1280px) {
  .headline { padding: 120px var(--grid-gutter-width) 80px; }
}
.headline--no-padding-top { padding-top: 0; }
.headline--centered {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.headline__title {
  max-width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10));
  text-wrap: balance;
}
@media (width >= 375px) {
  .headline__title { max-width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9)); }
}
@media (width >= 744px) {
  .headline__title { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  .headline__title {
    max-width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4));
    grid-row: 1 / 3;
  }
}
.headline__title--centered {
  max-width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9));
}
@media (width >= 744px) {
  .headline__title--centered { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  .headline__title--centered { max-width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)); }
}

.headline__body { margin-top: 24px; }
@media (width >= 744px) {
  .headline__body { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  .headline__body { margin-top: 0; }
}
@media (width >= 1440px) {
  .headline__body { max-width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4)); }
}
@media (width >= 1920px) {
  .headline__body { max-width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3)); }
}
@media (width >= 744px) {
  .headline__body--center { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  .headline__body--center {
    max-width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5));
    margin-top: 24px;
  }
}
@media (width >= 1280px) {
  .headline__body--center { margin-top: 40px; }
}
@media (width >= 1920px) {
  .headline__body--center { max-width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3)); }
}

.headline__cta-container {
  width: 100%;
  margin-top: 40px;
}
@media (width >= 1020px) {
  .headline__cta-container { grid-column: 2; }
  .headline__cta-container:nth-child(2) {
    grid-row: 1 / 3;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    margin-top: 0;
    display: flex;
  }
}
.headline__cta-container--center:nth-child(2) {
  justify-content: center;
  margin-top: 40px;
}
.headline__cta {
  text-align: center;
  width: 100%;
}
@media (width >= 744px) {
  .headline__cta { width: auto; }
}

.headline__eyebrow {
  max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7));
  text-wrap: balance;
  margin-bottom: 40px;
}
@media (width >= 744px) {
  .headline__eyebrow { max-width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)); }
}

/* --------------------------------------------------------------------------
   .bento-box — outer padded wrapper
   -------------------------------------------------------------------------- */
.bento-box {
  width: 100%;
  padding: 80px var(--grid-gutter-width);
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--grid-gutter-width);
  flex-direction: column;
  display: flex;
}
@media (width >= 1280px) {
  .bento-box {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
.bento-box--no-padding-top { padding-top: 0; }

/* --------------------------------------------------------------------------
   .bento-box__group
   -------------------------------------------------------------------------- */
.bento-box__group {
  gap: var(--grid-gutter-width);
  grid-template-columns: 1fr;
  width: 100%;
  display: grid;
}
@media (width >= 744px) {
  .bento-box__group--4-card {
    flex-wrap: wrap;
    display: flex;
  }
  .bento-box__group:not(.bento-box__group--1-card) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 1020px) {
  .bento-box__group--4-card {
    --card-1-aspect-ratio: (432 / 474);
    --card-width: (100vw * (474 / 1020));
    --card-1-height: (var(--card-1-aspect-ratio) * var(--card-width));
    max-height: calc(2 * var(--card-1-height));
    flex-direction: column;
  }
}
@media (width >= 1280px) {
  .bento-box__group--4-card {
    --card-1-aspect-ratio: (528 / 580);
    --card-width: (100vw * (580 / 1280));
  }
}
@media (width >= 1440px) {
  .bento-box__group--4-card {
    --card-1-aspect-ratio: (600 / 660);
    --card-width: (100vw * (660 / 1440));
  }
}
@media (width >= 1920px) {
  .bento-box__group--4-card {
    --card-1-aspect-ratio: (820 / 900);
    --card-width: (100vw * (900 / 1920));
  }
}

/* --------------------------------------------------------------------------
   .bento-box__card — aspect ratios are driven by a ::before padding-top spacer,
   exactly as in the source.
   -------------------------------------------------------------------------- */
.bento-box__card {
  border-radius: 8px;
  display: block;
  position: relative;
  overflow: hidden;
}
.bento-box__card::before {
  content: "";
  width: 100%;
  padding-top: 145.833%;
  display: block;
}
@media (width >= 375px) {
  .bento-box__card { display: block; position: relative; }
  .bento-box__card::before { content: ""; width: 100%; padding-top: 145.773%; display: block; }
}

/* ---- 4-card ---- */
@media (width >= 744px) {
  .bento-box__card--4-card.bento-box__card--order-1 { width: 100%; display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-1::before { content: ""; width: 100%; padding-top: 44.54%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-2 { width: calc(50% - var(--grid-gutter-width) / 2); display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-2::before { content: ""; width: 100%; padding-top: 92.262%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-3 { width: calc(50% - var(--grid-gutter-width) / 2); display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-3::before { content: ""; width: 100%; padding-top: 92.262%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-4 { width: 100%; display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-4::before { content: ""; width: 100%; padding-top: 44.54%; display: block; }
}
@media (width >= 1020px) {
  .bento-box__card--4-card.bento-box__card--order-1 { width: calc(50% - var(--grid-gutter-width) / 2); display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-1::before { content: ""; width: 100%; padding-top: 91.139%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-2 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-2::before { content: ""; width: 100%; padding-top: 60.338%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-3 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-3::before { content: ""; width: 100%; padding-top: 60.338%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-4 { width: calc(50% - var(--grid-gutter-width) / 2); display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-4::before { content: ""; width: 100%; padding-top: 91.139%; display: block; }
}
@media (width >= 1280px) {
  .bento-box__card--4-card.bento-box__card--order-1 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-1::before { content: ""; width: 100%; padding-top: 91.034%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-2 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-2::before { content: ""; width: 100%; padding-top: 60.345%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-3 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-3::before { content: ""; width: 100%; padding-top: 60.345%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-4 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-4::before { content: ""; width: 100%; padding-top: 91.034%; display: block; }
}
@media (width >= 1440px) {
  .bento-box__card--4-card.bento-box__card--order-1 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-1::before { content: ""; width: 100%; padding-top: 90.909%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-2 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-2::before { content: ""; width: 100%; padding-top: 60.606%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-3 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-3::before { content: ""; width: 100%; padding-top: 60.606%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-4 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-4::before { content: ""; width: 100%; padding-top: 90.909%; display: block; }
}
@media (width >= 1920px) {
  .bento-box__card--4-card.bento-box__card--order-1 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-1::before { content: ""; width: 100%; padding-top: 91.111%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-2 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-2::before { content: ""; width: 100%; padding-top: 60.333%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-3 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-3::before { content: ""; width: 100%; padding-top: 60.333%; display: block; }
  .bento-box__card--4-card.bento-box__card--order-4 { display: block; position: relative; }
  .bento-box__card--4-card.bento-box__card--order-4::before { content: ""; width: 100%; padding-top: 91.111%; display: block; }
}

/* ---- 2-card ---- */
@media (width >= 744px) {
  .bento-box__card--2-card { display: block; position: relative; }
  .bento-box__card--2-card::before { content: ""; width: 100%; padding-top: 91.071%; display: block; }
}
@media (width >= 1020px) {
  .bento-box__card--2-card { display: block; position: relative; }
  .bento-box__card--2-card::before { content: ""; width: 100%; padding-top: 91.139%; display: block; }
}
@media (width >= 1280px) {
  .bento-box__card--2-card { display: block; position: relative; }
  .bento-box__card--2-card::before { content: ""; width: 100%; padding-top: 91.034%; display: block; }
}
@media (width >= 1440px) {
  .bento-box__card--2-card { display: block; position: relative; }
  .bento-box__card--2-card::before { content: ""; width: 100%; padding-top: 90.909%; display: block; }
}
@media (width >= 1920px) {
  .bento-box__card--2-card { display: block; position: relative; }
  .bento-box__card--2-card::before { content: ""; width: 100%; padding-top: 91.111%; display: block; }
}

/* --------------------------------------------------------------------------
   .bento-box__card-content / __content / __asset / __image
   -------------------------------------------------------------------------- */
.bento-box__card-content {
  flex-direction: column;
  /* Text sits at the bottom-left of the picture. The reference anchored it to
     the top, where it landed on whatever happened to be up there — on the
     Radverleih mockup that is a pale grey sweep, and white type on it was
     barely readable. */
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
@media (width >= 1280px) { .bento-box__card-content { padding: 32px; } }
@media (width >= 1920px) { .bento-box__card-content { padding: 40px; } }

.bento-box__content {
  z-index: 10;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  display: flex;
  position: relative;
}
@media (width >= 744px) {
  .bento-box__content { width: 312px; }
  .bento-box__content--2-card,
  .bento-box__content--3-card.bento-box__content--order-2,
  .bento-box__content--3-card.bento-box__content--order-3,
  .bento-box__content--4-card.bento-box__content--order-2,
  .bento-box__content--4-card.bento-box__content--order-3 { width: 100%; }
}
@media (width >= 1020px) {
  .bento-box__content,
  .bento-box__content--2-card,
  .bento-box__content--3-card.bento-box__content--order-2,
  .bento-box__content--3-card.bento-box__content--order-3,
  .bento-box__content--4-card.bento-box__content--order-2,
  .bento-box__content--4-card.bento-box__content--order-3 { width: 367px; }
}
@media (width >= 1280px) {
  .bento-box__content,
  .bento-box__content--2-card,
  .bento-box__content--3-card.bento-box__content--order-2,
  .bento-box__content--3-card.bento-box__content--order-3,
  .bento-box__content--4-card.bento-box__content--order-2,
  .bento-box__content--4-card.bento-box__content--order-3 { width: 445px; }
}
@media (width >= 1440px) {
  .bento-box__content,
  .bento-box__content--2-card,
  .bento-box__content--3-card.bento-box__content--order-2,
  .bento-box__content--3-card.bento-box__content--order-3,
  .bento-box__content--4-card.bento-box__content--order-2,
  .bento-box__content--4-card.bento-box__content--order-3 { width: 430px; }
}
@media (width >= 1920px) {
  .bento-box__content,
  .bento-box__content--2-card,
  .bento-box__content--3-card.bento-box__content--order-2,
  .bento-box__content--3-card.bento-box__content--order-3,
  .bento-box__content--4-card.bento-box__content--order-2,
  .bento-box__content--4-card.bento-box__content--order-3 { width: 531px; }
}

.bento-box__asset {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bento-box__image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* #print and #social hold artwork rather than photographs, and artwork of no
   consistent shape: an A4 flyer and a folder at 4:3, a 9:16 casting poster,
   and three feed mockups at about 2.9:1 — all of them in card boxes that are
   roughly 1.1:1 and 1.65:1.
   `cover` is right for the business cards in #features, which are all 4:3 and
   lose only a margin. Here it cropped the poster past its own headline, so it
   read as two torsos, and threw away most of the width of every panorama.
   These are presentation mockups: showing one whole is the entire point, so
   they sit contained on a ground the cards already use. */
#print .bento-box__image,
#social .bento-box__image {
  object-fit: contain;
  background-color: #241b14;
}

/* Scrim. The copy is white and the pictures are not — several are light
   mockups on near-white grounds — so the bottom of every card is darkened
   behind the text. It sits above the image and below `.bento-box__content`
   (z-index 10), and the ramp is weighted to the lower half so the top of the
   card is untouched. Measured worst case across all nine cards is stated in
   the commit; nothing falls below AA. */
.bento-box__asset::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The ramp is pinned by the text, not by taste: the copy starts 65% down on
     the short cards, and 4.5:1 against a WHITE picture needs 53.5% black there
     — so 55% is the stop at 65%. Everything above 30% is untouched. */
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 30%,
    rgb(0 0 0 / 55%) 65%,
    rgb(0 0 0 / 78%) 100%
  );
}

/* Inline links inside body copy — the source draws the underline with two
   gradient halves so it can slide on hover (`ctaUnderlineSlideIn`). */
.text--body a {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 51% 1px, 50% 1px;
}