/* /about — redesigned 11 Nov 2026. Layout and spacing only; body type comes from styles.css. */
.dz-about { --edge: max(24px, calc((100vw - 1240px) / 2 + 24px)); --tint: #f5f4ef; --paper: #f5f4ef; }
.dz-about p { margin: 0 0 12px; }
.dz-about .ab-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dz-about .ab-btns .btn { margin: 0; }

/* What we believe: heading in the margin, the argument in a wide column */
.dz-about .ab-believe { padding: 96px 0 88px; }
.dz-about .ab-believe .inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 72px; }
.dz-about .ab-believe h2 { margin: 0; }
.dz-about .ab-believe-text { columns: 2; column-gap: 56px; }
.dz-about .ab-believe-text .lead { column-span: all; margin: 0 0 28px; padding-bottom: 28px; border-bottom: 3px solid var(--black); color: var(--black); font-weight: 700; }
.dz-about .ab-believe-text p { break-inside: avoid; }
.dz-about .ab-more-link { display: inline-block; font-weight: 900; color: var(--black); margin-top: 4px; }
.dz-about .ab-more-link::after { content: " \2192"; }

/* Performance on Purpose: the method on black, with the purpose and performance map drawn */
.dz-about .ab-pop { background: var(--black); color: var(--white); padding: 96px 0; }
.dz-about .ab-pop .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.dz-about .ab-pop h2, .dz-about .ab-pop h3 { color: var(--white); }
.dz-about .ab-pop p { color: #e6e5df; }
.dz-about .ab-pop-text h2 { margin: 0 0 20px; }
.dz-about .ab-layers { list-style: none; margin: 32px 0 0; padding: 0; counter-reset: l; }
.dz-about .ab-layers li { counter-increment: l; position: relative; padding: 20px 0 8px 56px; border-top: 1px solid #4a4a46; }
.dz-about .ab-layers li::before { content: counter(l); position: absolute; left: 0; top: 18px; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: var(--black); font-family: "Anton", sans-serif; font-size: 1.15rem; display: grid; place-items: center; }
.dz-about .ab-layers h3 { margin: 0 0 6px; }
.dz-about .ab-pop-map h3 { font-family: "Lato", sans-serif; font-weight: 900; font-size: 1.5rem; margin: 0 0 10px; }
.dz-about .ab-grid { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto 40px; margin-top: 28px; }
.dz-about .ab-ax-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; font-weight: 900; color: var(--lime); border-right: 3px solid var(--white); padding-right: 8px; position: relative; }
.dz-about .ab-ax-y::after { content: ""; position: absolute; right: -9px; bottom: -2px; border: 7px solid transparent; border-bottom: 10px solid var(--white); border-top: 0; transform: rotate(180deg); }
.dz-about .ab-ax-x { grid-row: 2; grid-column: 2; text-align: right; font-weight: 900; color: var(--lime); border-top: 3px solid var(--white); padding-top: 8px; position: relative; }
.dz-about .ab-ax-x::after { content: ""; position: absolute; right: -2px; top: -9px; border: 7px solid transparent; border-left: 10px solid var(--white); border-right: 0; }
.dz-about .ab-qs { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 0 0 4px 4px; }
.dz-about .ab-q { background: #1f1f1d; border-radius: 6px; padding: 24px 24px 20px; }
.dz-about .ab-q h4 { font-family: "Lato", sans-serif; font-weight: 900; font-size: 1.25rem; line-height: 1.1; color: var(--white); margin: 0 0 10px; }
.dz-about .ab-q p { margin: 0; }
.dz-about .ab-q strong { color: var(--white); }
.dz-about .ab-q.tr { background: var(--lime); }
.dz-about .ab-q.tr h4, .dz-about .ab-q.tr p, .dz-about .ab-q.tr strong { color: var(--black); }

/* Sister brands */
.dz-about .ab-brands { padding: 96px 0; }
.dz-about .ab-brands-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 72px; align-items: end; margin-bottom: 44px; }
.dz-about .ab-brands-head h2 { margin: 0; }
.dz-about .ab-brands-head p { margin: 0; }
.dz-about .ab-bs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dz-about .ab-b { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 28px; align-items: start; text-decoration: none; color: inherit; border: 2px solid var(--black); border-radius: var(--radius); padding: 28px 28px 26px; }
.dz-about .ab-b h3 { font-family: "Lato", sans-serif; font-weight: 900; font-size: 1.35rem; line-height: 1.1; margin: 0; color: var(--black); grid-row: 1 / span 2; }
.dz-about .ab-b p { margin: 0; }
.dz-about .ab-b span { font-weight: 900; color: var(--black); }
.dz-about .ab-b span::after { content: " \2192"; }
.dz-about .ab-b:hover { background: var(--tint); }

/* Close: the quote on lime beside the rest of the About pages */
.dz-about .ab-close { background: var(--lime); padding: 80px 0; }
.dz-about .ab-close .inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 88px; align-items: center; }
.dz-about .ab-close h2 { margin: 0; }
.dz-about .ab-close .btn-outline { color: var(--black); }
.dz-about .ab-call { margin: 20px 0 0; color: var(--black); }
.dz-about .ab-call a { color: var(--black); font-weight: 900; }
.dz-about .ab-more { display: grid; border-top: 3px solid var(--black); }
.dz-about .ab-more a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(14,14,14,.3); color: var(--black); font-weight: 900; text-decoration: none; }
.dz-about .ab-more a::after { content: "\2192"; }
.dz-about .ab-more a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .dz-about .ab-pop .inner { grid-template-columns: 1fr; }
  .dz-about .ab-b { grid-template-columns: 1fr; }
  .dz-about .ab-b h3 { grid-row: auto; }
}
@media (max-width: 860px) {
  .dz-about .ab-believe .inner, .dz-about .ab-brands-head, .dz-about .ab-close .inner { grid-template-columns: 1fr; }
  /* The team becomes a list: photo beside name and role */
  .dz-about .ab-believe-text { columns: 1; }
  .dz-about .ab-believe, .dz-about .ab-pop, .dz-about .ab-brands { padding: 64px 0; }
  .dz-about .ab-bs { grid-template-columns: 1fr; }
  .dz-about .ab-close { padding: 56px 0; }
}
@media (max-width: 560px) {
  .dz-about .ab-qs { grid-template-columns: 1fr; grid-template-rows: none; }
  .dz-about .ab-q.tr { order: -1; }
  .dz-about .ab-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .dz-about .ab-ax-y, .dz-about .ab-ax-x { display: none; }
  .dz-about .ab-qs { grid-row: auto; grid-column: auto; padding: 0; gap: 8px; }
  .dz-about .ab-q { padding: 20px 20px 18px; }
}


/* Hero: plain lime, with the three freedom cards set over its bottom edge (buzz-model.css) */
.dz-about .ab-hero { background: #cfea3d; }
.dz-about .ab-hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 72px; align-items: end; padding-top: 88px; padding-bottom: 170px; }
.dz-about .ab-hero-top h1 { margin: 0; color: var(--black); font-size: clamp(2.8rem, 5.2vw, 4.7rem); line-height: 1.02; }
.dz-about .ab-hero-side .lead { margin: 0; color: var(--black); }
.dz-about .ab-hero .btn-outline { border-color: var(--black); color: var(--black); }
.dz-about .ab-free { position: relative; margin-top: -120px; padding-bottom: 24px; }
.dz-about .ab-free .bm-card { box-shadow: 8px 8px 0 var(--black); }

/* Pillars on the neutral grey, the same cards as the freedoms */
.dz-about .ab-pillars { background: #f5f4ef; padding: 88px 0; margin-top: 72px; }
.dz-about .ab-pillars h2 { margin: 0 0 40px; }

@media (max-width: 860px) {
  .dz-about .ab-hero-top { grid-template-columns: 1fr; padding-top: 44px; padding-bottom: 110px; }
  .dz-about .ab-free { margin-top: -72px; }
  .dz-about .ab-free .bm-card { box-shadow: 6px 6px 0 var(--black); margin-right: 6px; }
  .dz-about .ab-pillars { padding: 64px 0; margin-top: 48px; }
}