body.doob-bz-about-page {
  background: #fbfaf8;
}

.doob-bz-about {
  --about-ink: #41444e;
  --about-muted: #77756f;
  --about-paper: #fbfaf8;
  --about-soft: #efeeeb;
  --about-warm: #e5d9c8;
  --about-dark: #202738;
  --about-gold: #9b7a33;
  --about-container-x: 24px;
  --about-copy-protection: 16px;
  --about-section-y: 80px;
  --about-title-media: 48px;
  --about-media-copy: 48px;
  min-width: 320px;
  overflow: hidden;
  color: var(--about-ink);
  background: var(--about-paper);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

.doob-bz-about *,
.doob-bz-about *::before,
.doob-bz-about *::after {
  box-sizing: border-box;
}

.doob-bz-about :where(h1, h2, p, figure, figcaption) {
  margin: 0;
}

.doob-bz-about-container {
  width: min(1184px, calc(100% - (2 * var(--about-container-x))));
  margin-inline: auto;
}

.doob-bz-about-hero {
  position: relative;
  display: grid;
  height: clamp(320px, 38dvh, 420px);
  min-height: 320px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #8a6842;
}

.doob-bz-about-hero__picture,
.doob-bz-about-hero__picture img,
.doob-bz-about-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.doob-bz-about-hero__picture {
  z-index: -2;
}

.doob-bz-about-hero__picture img {
  object-fit: cover;
  object-position: center 46%;
}

.doob-bz-about-hero__shade {
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(33 25 18 / 8%), rgb(22 18 15 / 22%)),
    radial-gradient(circle at 50% 42%, rgb(255 224 181 / 6%), rgb(31 24 18 / 12%) 70%);
}

.doob-bz-about-hero__inner {
  display: grid;
  place-items: center;
}

.doob-bz-about-hero h1 {
  width: min(760px, calc(100% - 48px));
  padding: 24px 32px;
  color: #fff;
  background: rgb(23 25 31 / 52%);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 48px;
  text-align: center;
  box-shadow: 0 12px 40px rgb(17 13 9 / 12%);
  text-shadow: 0 2px 20px rgb(17 13 9 / 34%);
  text-transform: uppercase;
  text-wrap: balance;
}

.doob-bz-about-hero__line {
  display: none;
}

.doob-bz-about-period,
.doob-bz-about-summary,
.doob-bz-about-contact {
  position: relative;
  padding-block: var(--about-section-y);
}

.doob-bz-about-period--paper {
  background: var(--about-paper);
}

.doob-bz-about-period--soft {
  background: var(--about-soft);
}

.doob-bz-about-period--dark {
  color: #f5f2ec;
  background: var(--about-dark);
}

.doob-bz-about-period__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.doob-bz-about-period__year {
  margin-bottom: 16px;
  color: var(--about-gold);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 44px;
}

.doob-bz-about-period--1993 .doob-bz-about-period__year::after {
  display: block;
  width: 64px;
  height: 2px;
  margin: 16px auto 0;
  background: var(--about-gold);
  content: "";
}

.doob-bz-about-period__header h2,
.doob-bz-about-summary h2,
.doob-bz-about-contact h2 {
  width: min(22ch, 100%);
  color: var(--about-gold);
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  text-wrap: balance;
}

.doob-bz-about-period__header::after,
.doob-bz-about-summary h2::after {
  display: block;
  width: 64px;
  height: 2px;
  margin: 24px auto 0;
  background: var(--about-gold);
  content: "";
}

.doob-bz-about-period--1993 .doob-bz-about-period__header::after {
  display: none;
}

.doob-bz-about-copy {
  width: min(65ch, calc(100% - (2 * var(--about-copy-protection))));
  min-width: min(420px, calc(100% - (2 * var(--about-copy-protection))));
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.doob-bz-about-copy--centered {
  margin: var(--about-media-copy) auto 0;
}

.doob-bz-about-copy p + p {
  margin-top: 16px;
}

.doob-bz-about-copy strong {
  font-weight: 600;
}

.doob-bz-about-period--1993::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("assets/images/home/header-logo.png") center / min(1100px, 90vw) auto no-repeat;
  content: "";
  opacity: 0.035;
  pointer-events: none;
}

.doob-bz-about-period--1993 .doob-bz-about-container {
  position: relative;
  z-index: 1;
}

.doob-bz-about-leather-pair {
  display: grid;
  width: min(800px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin: var(--about-title-media) auto 0;
}

.doob-bz-about-leather-pair--second {
  margin-top: 48px;
}

.doob-bz-about-leather-pair picture,
.doob-bz-about-leather-pair img {
  display: block;
  width: 100%;
}

.doob-bz-about-leather-pair picture:nth-child(even) {
  transform: translateY(24px);
}

.doob-bz-about-leather-pair img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 2px 4px 12px rgb(33 38 50 / 20%);
}

.doob-bz-about-leather-copy--last {
  margin-top: 48px;
}

.doob-bz-about-photo-table,
.doob-bz-about-photo-table picture,
.doob-bz-about-photo-table img {
  display: block;
  width: 100%;
}

.doob-bz-about-photo-table {
  overflow: hidden;
  background: #e9e8e5;
}

.doob-bz-about-photo-table img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.doob-bz-about-carousel-section {
  padding-block: 40px;
  overflow: hidden;
  background: var(--about-soft);
}

.doob-bz-about-carousel {
  --about-carousel-gap: 32px;
  --about-carousel-slide: min(860px, 72vw);
  position: relative;
  width: 100%;
  margin-inline: auto;
  outline: none;
  touch-action: pan-y;
}

.doob-bz-about-carousel:focus-visible {
  outline: 3px solid var(--about-gold);
  outline-offset: 4px;
}

.doob-bz-about-carousel__viewport {
  overflow: hidden;
  background: #e9e8e5;
}

.doob-bz-about-carousel__track {
  display: flex;
  width: 100%;
  gap: var(--about-carousel-gap);
  padding-inline: calc((100% - var(--about-carousel-slide)) / 2);
  transition: transform 300ms ease;
  will-change: transform;
}

.doob-bz-about-carousel__slide {
  flex: 0 0 var(--about-carousel-slide);
  overflow: hidden;
  box-shadow: 2px 4px 14px rgb(33 38 50 / 18%);
}

.doob-bz-about-carousel__slide picture,
.doob-bz-about-carousel__slide img {
  display: block;
  width: 100%;
}

.doob-bz-about-carousel__slide img {
  height: auto;
  aspect-ratio: 1280 / 853;
  object-fit: cover;
  user-select: none;
}

.doob-bz-about-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: #292929;
  background: rgb(238 238 238 / 92%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  cursor: pointer;
  transform: translateY(-50%);
}

.doob-bz-about-carousel__arrow--previous {
  left: calc(50% - (var(--about-carousel-slide) / 2) - 20px);
}

.doob-bz-about-carousel__arrow--next {
  right: calc(50% - (var(--about-carousel-slide) / 2) - 20px);
}

.doob-bz-about-carousel__arrow:focus-visible {
  outline: 3px solid var(--about-gold);
  outline-offset: 3px;
}

.doob-bz-about-cases-banner {
  width: 100%;
  margin-top: 64px;
  overflow: hidden;
}

.doob-bz-about-cases-banner picture,
.doob-bz-about-cases-banner img {
  display: block;
  width: 100%;
}

.doob-bz-about-cases-banner picture {
  width: 100%;
}

.doob-bz-about-cases-banner img {
  height: auto;
  aspect-ratio: 1800 / 778;
  object-fit: cover;
}

.doob-bz-about-period--2001 {
  padding-top: 40px;
  padding-bottom: 0;
}

.doob-bz-about-split {
  display: grid;
  width: min(1040px, 100%);
  grid-template-columns: minmax(420px, 600px) minmax(220px, 300px);
  justify-content: center;
  align-items: center;
  gap: 64px;
  margin: var(--about-media-copy) auto 0;
}

.doob-bz-about-split .doob-bz-about-copy {
  width: 100%;
}

.doob-bz-about-medal {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doob-bz-about-medal picture,
.doob-bz-about-medal img {
  display: block;
  width: 220px;
}

.doob-bz-about-medal figcaption {
  width: min(28ch, 100%);
  margin-top: 12px;
  color: var(--about-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.doob-bz-about-era-composition {
  position: relative;
  display: grid;
  width: min(1160px, 100%);
  grid-template-columns: minmax(460px, 536px) minmax(420px, 1fr);
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin: var(--about-title-media) auto 0;
}

.doob-bz-about-era-composition .doob-bz-about-copy {
  position: relative;
  z-index: 1;
  width: 100%;
}

.doob-bz-about-awards {
  display: grid;
  width: 100%;
  gap: 32px;
}

.doob-bz-about-awards picture,
.doob-bz-about-awards img {
  display: block;
  width: 100%;
}

.doob-bz-about-awards__main,
.doob-bz-about-awards__case {
  overflow: hidden;
  box-shadow: 2px 4px 16px rgb(33 38 50 / 20%);
}

.doob-bz-about-awards__main {
  order: 2;
}

.doob-bz-about-awards__case {
  order: 1;
}

.doob-bz-about-awards__main img {
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
}

.doob-bz-about-awards__case img {
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
}

.doob-bz-about-period--2003 .doob-bz-about-container {
  position: relative;
}

.doob-bz-about-period__emblem {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  display: block;
  width: min(560px, 50%);
  opacity: 0.045;
  pointer-events: none;
  transform: translateY(-50%);
}

.doob-bz-about-period__emblem img {
  display: block;
  width: 100%;
  height: auto;
}

.doob-bz-about-transition-media,
.doob-bz-about-transition-media img {
  display: block;
  width: 100%;
}

.doob-bz-about-transition-media {
  overflow: hidden;
}

.doob-bz-about-transition-media img {
  aspect-ratio: 1680 / 359;
  object-fit: cover;
  object-position: center top;
}

.doob-bz-about-period--2014 {
  padding-top: 0;
}

.doob-bz-about-period--2014 > .doob-bz-about-container {
  padding-top: var(--about-section-y);
}

.doob-bz-about-dark-columns {
  display: grid;
  width: min(1104px, 100%);
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 64px;
  margin: var(--about-media-copy) auto 0;
}

.doob-bz-about-dark-columns .doob-bz-about-copy {
  width: 100%;
}

.doob-bz-about-map,
.doob-bz-about-map img {
  display: block;
  width: 100%;
}

.doob-bz-about-map {
  width: 440px;
  margin: 48px auto 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  box-shadow: 5px 6px 16px rgb(0 0 0 / 44%);
}

.doob-bz-about-map img {
  aspect-ratio: 1;
  object-fit: cover;
}

.doob-bz-about-period--2017 .doob-bz-about-copy--centered {
  margin-top: var(--about-media-copy);
}

.doob-bz-about-period--2017 {
  padding-top: 64px;
  padding-bottom: 40px;
}

.doob-bz-about-summary {
  padding-top: 40px;
  color: var(--about-ink);
  background: var(--doob-bz-header-bg, #f0eee9);
}

.doob-bz-about-summary__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doob-bz-about-summary h2 {
  color: var(--about-ink);
}

.doob-bz-about-contact {
  color: var(--about-ink);
  background: var(--about-paper);
}

.doob-bz-about-contact__inner {
  display: flex;
  width: min(760px, calc(100% - (2 * var(--about-container-x))));
  flex-direction: column;
  align-items: center;
}

.doob-bz-about-contact h2 {
  width: min(22ch, 100%);
  margin-inline: auto;
  color: var(--about-ink);
  text-align: center;
}

.doob-bz-about-contact__copy {
  width: 100%;
}

.doob-bz-about-contact__copy > p {
  width: min(65ch, calc(100% - 32px));
  margin-top: 32px;
  margin-inline: auto;
  color: var(--about-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}

.doob-bz-about-contact__form-block {
  width: 100%;
  margin-top: 40px;
}

.doob-bz-about-form {
  position: relative;
  display: grid;
  gap: 16px;
}

.doob-bz-about-form input:not([type="hidden"]),
.doob-bz-about-form button {
  display: block;
  width: 100%;
  min-height: 56px;
  border-radius: 8px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.doob-bz-about-form input:not([type="hidden"]) {
  padding: 14px 16px;
  border: 1px solid #d4d1ca;
  color: #41444e;
  background: transparent;
  appearance: none;
}

.doob-bz-about-form input::placeholder {
  color: #888;
  opacity: 1;
}

.doob-bz-about-form button {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border: 1px solid #26324b;
  color: #f1efe9;
  background: #26324b;
  box-shadow: 0 12px 26px rgb(31 42 64 / 18%);
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 160ms ease, transform 160ms ease;
}

.doob-bz-about-form button::after {
  flex: 0 0 24px;
  width: 24px;
  height: 18px;
  background: currentcolor;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2 10h23m-7-7 7 7-7 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms ease;
}

.doob-bz-about-form button:hover {
  background: #1f2a40;
}

.doob-bz-about-form button:hover::after {
  transform: translateX(4px);
}

.doob-bz-about-form button:active {
  transform: translateY(1px);
}

.doob-bz-about-form input:focus-visible,
.doob-bz-about-form button:focus-visible,
.doob-bz-about-contact__privacy a:focus-visible {
  border-color: #536b99;
  outline: none;
  box-shadow: inset 0 0 0 1px #536b99;
}

.doob-bz-about-form__status {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.doob-bz-about-form__status.is-error {
  color: #9e2f2f;
}

.doob-bz-about-form__status.is-success {
  color: #376b45;
}

.doob-bz-about-contact__privacy {
  margin-top: 24px;
  color: #606674;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.doob-bz-about-contact__privacy a {
  color: inherit;
  text-underline-offset: 3px;
}

.doob-bz-about-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 960px) {
  .doob-bz-about-period--1993,
  .doob-bz-about-summary {
    padding-block-end: 64px;
  }

  .doob-bz-about-period--1994,
  .doob-bz-about-contact {
    padding-block-start: 64px;
  }
}

@media (max-width: 1039px) {
  .doob-bz-about-split {
    width: min(640px, 100%);
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .doob-bz-about-medal picture,
  .doob-bz-about-medal img {
    width: 180px;
  }

  .doob-bz-about-dark-columns {
    width: min(640px, 100%);
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .doob-bz-about-dark-columns .doob-bz-about-copy {
    min-width: 420px;
  }

  .doob-bz-about-era-composition {
    position: relative;
    display: block;
    width: min(720px, 100%);
  }

  .doob-bz-about-era-composition .doob-bz-about-awards {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
  }

  .doob-bz-about-awards__main,
  .doob-bz-about-awards__case {
    order: initial;
  }

  .doob-bz-about-era-composition .doob-bz-about-copy {
    position: relative;
    z-index: 1;
    margin: 48px auto 0;
  }

  .doob-bz-about-period__emblem {
    position: absolute;
    top: 48%;
    right: auto;
    left: 50%;
    z-index: 0;
    width: min(520px, 86vw);
    opacity: 0.045;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 959px) {
  .doob-bz-about {
    --about-section-y: 64px;
    --about-title-media: 40px;
    --about-media-copy: 40px;
  }

  .doob-bz-about-hero {
    height: clamp(300px, 40dvh, 400px);
    min-height: 300px;
  }

  .doob-bz-about-hero h1 {
    padding: 24px;
    font-size: 36px;
    line-height: 40px;
  }

  .doob-bz-about-period__year {
    font-size: 32px;
    line-height: 36px;
  }

  .doob-bz-about-period__header h2,
  .doob-bz-about-summary h2,
  .doob-bz-about-contact h2 {
    font-size: 32px;
    line-height: 36px;
  }

  .doob-bz-about-leather-pair {
    width: min(640px, 100%);
  }

  .doob-bz-about-awards {
    width: min(640px, 100%);
  }

  .doob-bz-about-contact__inner {
    width: min(640px, calc(100% - (2 * var(--about-container-x))));
  }

  .doob-bz-about-contact h2,
  .doob-bz-about-contact__copy > p {
    margin-inline: auto;
    text-align: center;
  }


  .doob-bz-about-cases-banner {
    margin-top: 48px;
  }
}

@media (max-width: 640px) {
  .doob-bz-about {
    --about-copy-protection: 8px;
    --about-section-y: 48px;
    --about-title-media: 32px;
    --about-media-copy: 32px;
  }

  .doob-bz-about-hero {
    height: clamp(420px, 123vw, 520px);
    min-height: 420px;
  }

  .doob-bz-about-hero h1 {
    width: calc(100% - 48px);
    padding: 24px 16px;
    font-size: 30px;
    line-height: 34px;
  }

  .doob-bz-about-period__year {
    font-size: 26px;
    line-height: 30px;
  }

  .doob-bz-about-period__header h2,
  .doob-bz-about-summary h2,
  .doob-bz-about-contact h2 {
    font-size: 26px;
    line-height: 30px;
  }

  .doob-bz-about-period__header::after,
  .doob-bz-about-summary h2::after {
    width: 48px;
    margin-top: 16px;
  }

  .doob-bz-about-copy {
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .doob-bz-about-leather-pair {
    position: relative;
    display: block;
    width: 100vw;
    height: clamp(250px, 72vw, 390px);
    margin-top: 32px;
    margin-left: calc(50% - 50vw);
  }

  .doob-bz-about-leather-pair picture {
    position: absolute;
    width: clamp(210px, 62vw, 360px);
    transform: none;
  }

  .doob-bz-about-leather-pair picture:nth-child(even) {
    transform: none;
  }

  .doob-bz-about-leather-pair--first picture:first-child,
  .doob-bz-about-leather-pair--second picture:last-child {
    top: 16px;
    left: -24px;
  }

  .doob-bz-about-leather-pair--first picture:last-child,
  .doob-bz-about-leather-pair--second picture:first-child {
    right: -24px;
    bottom: 16px;
    z-index: 1;
  }

  .doob-bz-about-leather-pair--second {
    height: clamp(240px, 68vw, 360px);
    margin-top: 32px;
  }

  .doob-bz-about-leather-pair img {
    box-shadow: 3px 6px 16px rgb(33 38 50 / 24%);
  }

  .doob-bz-about-leather-copy,
  .doob-bz-about-leather-copy--last {
    margin-top: 32px;
  }

  .doob-bz-about-photo-table img {
    aspect-ratio: 1;
  }

  .doob-bz-about-carousel-section {
    padding-block: 24px;
  }

  .doob-bz-about-carousel {
    --about-carousel-gap: 16px;
    --about-carousel-slide: calc(100vw - 48px);
    width: 100vw;
  }

  .doob-bz-about-carousel__viewport {
    box-shadow: none;
  }

  .doob-bz-about-carousel__arrow--previous {
    left: 8px;
  }

  .doob-bz-about-carousel__arrow--next {
    right: 8px;
  }

  .doob-bz-about-cases-banner {
    margin-top: 48px;
  }

  .doob-bz-about-period--2001 {
    padding-top: 48px;
  }

  .doob-bz-about-cases-banner picture {
    width: 100%;
  }

  .doob-bz-about-cases-banner img {
    aspect-ratio: 1920 / 2303;
  }

  .doob-bz-about-split {
    gap: 32px;
  }

  .doob-bz-about-medal figcaption {
    font-size: 12px;
    line-height: 18px;
  }

  .doob-bz-about-era-composition .doob-bz-about-awards {
    position: relative;
    display: block;
    width: 100vw;
    height: clamp(280px, 78vw, 430px);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }

  .doob-bz-about-awards picture {
    position: absolute;
    width: clamp(248px, 70vw, 420px);
  }

  .doob-bz-about-awards__main {
    top: 16px;
    left: -32px;
  }

  .doob-bz-about-awards__case {
    right: -32px;
    bottom: 16px;
    z-index: 1;
  }

  .doob-bz-about-period__emblem {
    top: 58%;
    width: min(94vw, 430px);
    opacity: 0.04;
  }

  .doob-bz-about-era-composition .doob-bz-about-copy {
    margin-top: 40px;
  }

  .doob-bz-about-transition-media img {
    aspect-ratio: 1;
    object-position: center;
  }

  .doob-bz-about-dark-columns,
  .doob-bz-about-dark-columns .doob-bz-about-copy {
    min-width: 0;
  }

  .doob-bz-about-map {
    width: min(72vw, 320px);
    margin-top: 40px;
  }

  .doob-bz-about-period--2017,
  .doob-bz-about-summary {
    padding-block: 48px;
  }

  .doob-bz-about-contact__copy > p {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.4;
  }
}