/* ============================================
   HOMEPAGE - "About the Firm"

   Copy on the left; on the right four isometric slabs stacked into "How
   every engagement is built", each with a dashed leader line to its label.
   Type comes from css/theme.css. Markup: tools/home_about.py.
   ============================================ */

.abt { background: #ffffff; overflow-x: clip; }

.abt__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.abt__copy .section-title { margin-bottom: 20px; }
.abt__copy .bf-hero__btn { margin-top: 8px; }

.abt__lead { margin: 0 0 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.abt__lead strong { font-weight: 600; color: var(--heading-strong); }

.abt-tone--pink  { --tone-a: #f9cad7; --tone-ink: #b0305a; --tone-deep: #e79bb2; }
.abt-tone--lilac { --tone-a: #d4cef7; --tone-ink: #4b3fc4; --tone-deep: #aaa0ec; }
.abt-tone--sky   { --tone-a: #d2e7fa; --tone-ink: #1f5f99; --tone-deep: #9cc6ee; }
.abt-tone--peach { --tone-a: #fad9bd; --tone-ink: #874410; --tone-deep: #efb383; }

/* ---------- Stack ---------- */
.abt-stack { position: relative; }

.abt-stack__label {
  margin: 0 0 8px;
  font: 600 12px/18px var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3230e0;
}

.abt-stack__list { position: relative; margin: 0; padding: 40px 0 70px; list-style: none; }

.abt-layer { position: relative; z-index: calc(10 - var(--i)); height: 96px; }

/* A square turned into a diamond and squashed: an isometric slab. The
   stacked shadows give it thickness. */
.abt-layer__slab {
  position: absolute;
  left: 30px;
  top: 0;
  width: 200px;
  height: 200px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ffffff 0%, var(--tone-a) 100%);
  box-shadow:
    1px 1px 0 var(--tone-deep), 2px 2px 0 var(--tone-deep), 3px 3px 0 var(--tone-deep), 4px 4px 0 var(--tone-deep),
    5px 5px 0 var(--tone-deep), 6px 6px 0 var(--tone-deep), 7px 7px 0 var(--tone-deep), 8px 8px 0 var(--tone-deep),
    9px 9px 0 var(--tone-deep), 10px 10px 0 var(--tone-deep), 11px 11px 0 var(--tone-deep), 12px 12px 0 var(--tone-deep),
    30px 30px 40px rgba(35, 13, 79, 0.18);
  transform: translateY(-70px) scaleY(0.577) rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.abt-layer:hover .abt-layer__slab { transform: translateY(-86px) scaleY(0.577) rotate(45deg); }

.abt-layer__label {
  position: absolute;
  top: -8px;
  left: 330px;
  right: 0;
  padding-left: 26px;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}

/* Leader line from the slab's right corner to its label */
.abt-layer__label::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -60px;
  width: 76px;
  border-top: 2px dashed var(--tone-deep);
}

.abt-layer__label::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone-ink);
}

.abt-layer__label b { display: block; font: 500 18px/1.3 var(--font-display); color: var(--heading-strong); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .abt__grid { gap: 40px; }
}

@media (max-width: 1024px) {
  .abt__grid { grid-template-columns: minmax(0, 1fr); }
  .abt-stack { max-width: 560px; }
}

@media (max-width: 640px) {
  /* Slabs shrink and labels sit beside them */
  .abt-stack__list { padding: 20px 0 40px; }
  .abt-layer { height: 88px; }
  /* A 100px slab turned 45deg is ~142px wide; left 21px puts its left tip on the content edge */
  .abt-layer__slab { left: 21px; width: 100px; height: 100px; border-radius: 13px; transform: translateY(-24px) scaleY(0.577) rotate(45deg); }
  .abt-layer:hover .abt-layer__slab { transform: translateY(-30px) scaleY(0.577) rotate(45deg); }
  .abt-layer__label { top: -4px; left: 170px; padding-left: 0; font-size: 13px; line-height: 19px; }
  .abt-layer__label::before,
  .abt-layer__label::after { display: none; }
  .abt-layer__label b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .abt-layer__slab { transition: none; }
}