/* /about, the entity page (GRW-09), in the 2026 redesign (window 104, David 10/27: "make a version of the Chamberlin
   Studio website to be just like the Rev Productions"; "I really dislike the about page"). css/studio.css holds the
   shared parts (header, hero, sections, bento, stat cards, closing band); this file adds only this page's own pieces:
   the Meet David cards, the promise cards, the work tiles' labels, the stat cards' layout, the team circles and the
   last two cards. */

/* Meet David: two dark cards like REV's testimonials. One holds the round photo, the name, the role and his words; the
   other holds David at work in a phone that rises from the bottom of the card. */
.ab-meet { margin: 56px auto 0; max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; }
.ab-meet-card { display: grid; justify-items: center; align-content: center; padding: clamp(44px, 4.6vw, 64px) clamp(28px, 3.8vw, 56px); border-radius: 48px; background: var(--card); }
.ab-portrait { width: clamp(176px, 16vw, 230px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.ab-name { margin-top: 26px; font-weight: 400; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.2; }
.ab-name a { text-decoration: none; }
.ab-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ab-role { margin-top: 8px; font-size: 14px; color: var(--soft); }
.ab-intro { margin-top: 26px; max-width: 31em; font-size: 16px; line-height: 1.75; color: #e6e6e6; text-wrap: pretty; }
.ab-phone-card { display: flex; align-items: flex-end; justify-content: center; min-height: 540px; padding: 56px 28px 0; border-radius: 48px; background: var(--card); overflow: hidden; }
.ab-phone { width: min(276px, 100%); aspect-ratio: 9 / 17; border-radius: 40px 40px 0 0; overflow: hidden; background: #0b0b0b; box-shadow: 0 0 0 3px #fff; }
.ab-phone video { width: 100%; height: 100%; object-fit: cover; }

/* How I work: the four promises as dark cards, centered like REV's number cards. */
.ab-promises { margin-top: 48px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-promise { display: grid; align-content: center; justify-items: center; gap: 14px; min-height: 280px; padding: 36px 26px; border-radius: 28px; background: var(--card); }
.ab-promise h3 { font-weight: 400; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; }
.ab-promise p { max-width: 17em; font-size: 15px; line-height: 1.65; color: var(--soft); text-wrap: pretty; }

/* What I build: the shared bento with real projects in their own photography; each tile opens its case study. The
   name shows over a soft shade on hover or keyboard focus, and always on a touch screen (as on the home page's grid). */
.ab-bento a { display: block; color: #fefffe; text-decoration: none; isolation: isolate; }
.ab-bento img { transition: transform 1s var(--ease); }
.ab-tile-name {
  position: absolute; inset: auto 0 0; z-index: 1; padding: 52px 22px 18px; font-size: 14.4px; line-height: 1.35;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8)); opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none;
}
.ab-bento a:hover .ab-tile-name, .ab-bento a:focus-visible .ab-tile-name { opacity: 1; transform: none; }

/* Live today: three numbers, each above its sourced line. */
.ab-stats { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-stat p { margin: 10px auto 0; max-width: 20em; color: var(--soft); text-wrap: balance; }

/* Who you work with: REV's round photos. Rebecca's circle holds her initials until there is a photo of her. */
.ab-team { margin-top: 56px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 48px; }
.ab-person { width: clamp(180px, 17vw, 236px); }
.ab-person img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.ab-mono { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fefffe; color: #000; font-size: clamp(46px, 4.6vw, 66px); font-weight: 500; letter-spacing: .04em; line-height: 1; }
.ab-person h3 { margin-top: 20px; font-size: 18px; font-weight: 400; }
.ab-person p { margin-top: 2px; font-size: 14px; color: var(--soft); text-wrap: balance; }

/* Up north and beyond, and Say hello: two dark cards side by side. */
.ab-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ab-duo-card { display: grid; align-content: center; justify-items: center; gap: 16px; padding: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 48px); border-radius: 32px; background: var(--card); }
.ab-duo-title { font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.ab-duo-card p { max-width: 30em; font-size: 16px; line-height: 1.7; color: var(--soft); text-wrap: pretty; }

/* Links inside this page's words: white on the soft gray, a fine underline. */
.ab-promise a, .ab-stat a, .ab-person a, .ab-duo-card a { color: #fff; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ab-duo-card a { overflow-wrap: anywhere; }

/* Cards in a row arrive one after another (the shared reveal, staggered); hover lifts the work a little. */
@media (prefers-reduced-motion: no-preference) {
  .sx-js .ab-meet > :nth-child(2), .sx-js .ab-promises > :nth-child(2), .sx-js .ab-bento > :nth-child(2),
  .sx-js .ab-stats > :nth-child(2), .sx-js .ab-team > :nth-child(2), .sx-js .ab-duo > :nth-child(2) { transition-delay: .08s; }
  .sx-js .ab-promises > :nth-child(3), .sx-js .ab-bento > :nth-child(3), .sx-js .ab-stats > :nth-child(3) { transition-delay: .16s; }
  .sx-js .ab-promises > :nth-child(4), .sx-js .ab-bento > :nth-child(4) { transition-delay: .24s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ab-bento a:hover img { transform: scale(1.04); }
}
@media (hover: none) {
  .ab-tile-name { opacity: 1; transform: none; padding: 30px 12px 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-bento img, .ab-tile-name { transition: none; }
}

@media (max-width: 1080px) {
  .ab-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ab-meet, .ab-stats, .ab-duo { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .ab-phone-card { min-height: 0; }
  .ab-stat { min-height: 0; padding: 40px 28px; }
}
@media (max-width: 640px) {
  .ab-meet-card { padding: 40px 22px; border-radius: 32px; }
  .ab-phone-card { padding: 40px 22px 0; border-radius: 32px; }
  .ab-phone { width: min(236px, 80%); border-radius: 32px 32px 0 0; }
  .ab-promises { grid-template-columns: 1fr; }
  .ab-promise { min-height: 0; padding: 32px 24px; }
  .ab-stat { padding: 32px 22px; }
  .ab-team { gap: 28px 20px; }
  .ab-person { width: calc(50% - 10px); max-width: 200px; }
  .ab-duo-card { padding: 32px 22px; border-radius: 26px; }
}