/* =========================================================
   ABOUT US
   The homepage's background video and fade sit behind the page;
   everything else follows the homepage's gutters and type scale.
   ========================================================= */
.nav__links a[aria-current="page"] .uline { background-size: 100% var(--uline-w); background-position-x: 0; }

.ab-hero { padding: calc(150 * var(--s)) var(--gutter) calc(240 * var(--s)); }
.ab-title { font-size: var(--fs-title); line-height: 1.1; letter-spacing: -0.04em; font-weight: 400; margin: 0; }
.ab-lede { max-width: 19.5em; margin: calc(70 * var(--s)) 0 0; font-size: calc(var(--fs-title) * .72); line-height: 1.13; letter-spacing: -0.03em; }

.ab-do { padding: 0 var(--gutter); }
.ab-cards { list-style: none; margin: calc(120 * var(--s)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(37 * var(--s)); }
.ab-card { position: relative; display: flex; flex-direction: column; aspect-ratio: 483 / 680; border: max(1px, calc(1.5 * var(--s))) solid #263a7d; padding: calc(36 * var(--s)) calc(36 * var(--s)) 0; background: rgba(0, 0, 30, .55); overflow: hidden; }
.ab-card__title { margin: 0; font-size: var(--fs-title); line-height: 1.07; letter-spacing: -0.04em; font-weight: 400; max-width: 6.4em; }
.ab-card__text { margin: calc(26 * var(--s)) 0 0 calc(8 * var(--s)); max-width: 22em; font-size: var(--fs-small); line-height: 1.3; letter-spacing: -0.02em; }
/* the clip fills the lower part of the frame, edge to edge */
.ab-card__media { flex: 1; margin: calc(40 * var(--s)) calc(-36 * var(--s)) 0; min-height: 0; }
.ab-card__media video, .ab-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ab-cta { padding: calc(200 * var(--s)) var(--gutter) calc(230 * var(--s)); }
.ab-cta__title { max-width: 10.5em; }
.ab-cta__row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: calc(80 * var(--s)); }
.ab-cta__text { margin: 0; font-size: calc(var(--fs-title) * .72); line-height: 1.2; letter-spacing: -0.03em; }
.ab-cta__link { margin: 0; font-size: calc(var(--fs-title) * .9); }

/* tablet: two cards a row */
@media (max-width: 1099px) {
  .ab-hero { padding-top: calc(110 * var(--s)); padding-bottom: calc(160 * var(--s)); }
  .ab-cards { grid-template-columns: repeat(2, 1fr); gap: calc(28 * var(--s)); margin-top: calc(70 * var(--s)); }
  .ab-card { padding: calc(30 * var(--s)) calc(30 * var(--s)) 0; }
  .ab-card__media { margin: calc(30 * var(--s)) calc(-30 * var(--s)) 0; }
  .ab-cta { padding-top: calc(140 * var(--s)); padding-bottom: calc(150 * var(--s)); }
}
/* phone: one card a row; the link under the text */
@media (max-width: 599px) {
  .ab-hero { padding-top: calc(60 * var(--s)); padding-bottom: calc(110 * var(--s)); }
  .ab-lede { margin-top: calc(30 * var(--s)); font-size: clamp(19px, 5.4vw, 26px); }
  .ab-cards { grid-template-columns: 1fr; gap: calc(22 * var(--s)); margin-top: calc(40 * var(--s)); }
  .ab-card { aspect-ratio: 483 / 560; padding: calc(24 * var(--s)) calc(24 * var(--s)) 0; }
  .ab-card__media { margin: calc(24 * var(--s)) calc(-24 * var(--s)) 0; }
  .ab-cta { padding-top: calc(90 * var(--s)); padding-bottom: calc(100 * var(--s)); }
  .ab-cta__row { flex-direction: column; align-items: flex-start; gap: calc(36 * var(--s)); margin-top: calc(30 * var(--s)); }
  .ab-cta__text { font-size: clamp(17px, 4.6vw, 22px); }
  .ab-cta__link { font-size: clamp(24px, 6.6vw, 32px); }
}
/* the card titles always fit their frame */
.ab-card { container-type: inline-size; }
.ab-card__title { font-size: min(var(--fs-title), 12.6cqw); }
@media (max-width: 599px) {
  .ab-lede { font-size: 17px; line-height: 1.25; }
  .ab-cta__text { font-size: 16px; line-height: 1.3; }
  .ab-card__title { font-size: var(--fs-title); }
}
/* Brand & Identity: the artwork sits across the frame, in the lower middle */
.ab-card--brand .ab-card__media { display: flex; align-items: center; }
.ab-card--brand .ab-card__media img { height: auto; object-fit: contain; }
/* AI & Emerging Tech: the photo fills the lower part of the frame */
.ab-card--ai .ab-card__media { display: flex; align-items: center; }
.ab-card--ai .ab-card__media img { height: auto; aspect-ratio: 476 / 268; }
/* the clips and the 3D shapes: a 16:9 picture across the frame, in the space under the text */
.ab-card--video .ab-card__media, .ab-card--data .ab-card__media, .ab-card--marketing .ab-card__media, .ab-card--web .ab-card__media { display: flex; align-items: center; }
.ab-card__media video, .ab-card__media canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ab-card--web .ab-card__media { align-items: stretch; }
.ab-card--web .ab-card__media canvas { height: 100%; aspect-ratio: auto; }
/* the steaming coffee cup, above "Start a Conversation", lined up with its left edge */
.ab-cta__row { align-items: flex-end; }
.ab-cta__go { display: flex; flex-direction: column; align-items: flex-start; }
.ab-coffee { display: block; width: auto; height: calc(var(--fs-title) * 2.35); aspect-ratio: 292 / 744; margin-bottom: calc(var(--fs-title) * .3); background: #00001e; }
@media (max-width: 599px) { .ab-coffee { height: 110px; } }
.ab-coffee { height: calc(var(--fs-title) * 3.2); margin-bottom: calc(var(--fs-title) * .25); }
@media (max-width: 599px) {
  .ab-cta__row { flex-direction: column; align-items: flex-start; }
  .ab-coffee { height: 130px; }
}
/* every picture and clip sits in the same 16:9 box, the same distance from the
   bottom of its frame, so they all line up across a row whatever the titles do */
.ab-card .ab-card__media { flex: none; display: block; margin-top: auto; margin-bottom: 9cqw; aspect-ratio: 16 / 9; }
.ab-card .ab-card__media > * { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.ab-card--web .ab-card__media > img { object-fit: contain; background: #00001e; }
/* pinned to the same spot in every frame, whatever the text above does */
.ab-card .ab-card__media { position: absolute; left: 0; right: 0; bottom: 9cqw; margin: 0; }
/* Brand & Identity: the 3D shapes get a taller stage than the clips */
.ab-card--brand .ab-card__media { aspect-ratio: auto; height: 80cqw; }
@media (max-width: 599px) { .ab-card--brand .ab-card__media { height: 72cqw; } }
.ab-card--brand .ab-card__media { bottom: 13cqw; }
/* Web & Digital: the tablet sits centred between the text and the bottom of its frame */
.ab-card { --padx: calc(36 * var(--s)); }
@media (max-width: 1099px) { .ab-card { --padx: calc(30 * var(--s)); } }
@media (max-width: 599px) { .ab-card { --padx: calc(24 * var(--s)); } }
.ab-card.ab-card--web .ab-card__media { position: relative; left: auto; right: auto; bottom: auto; margin: auto calc(-1 * var(--padx)); }
/* the cup sits to the left of "Tell us what you're working on", lined up with the title's left edge */
.ab-cta__row { align-items: center; }
.ab-cta__say { display: flex; align-items: center; gap: calc(var(--fs-title) * .55); }
.ab-cta__say .ab-coffee { flex: none; height: calc(var(--fs-title) * 2.6); margin: 0; }
@media (max-width: 599px) {
  .ab-cta__row { align-items: flex-start; }
  .ab-cta__say .ab-coffee { height: 96px; }
  .ab-cta__say { gap: 16px; }
}
.ab-cta__say .ab-coffee { height: calc(var(--fs-title) * 3.4); } @media (max-width: 599px) { .ab-cta__say .ab-coffee { height: 110px; } }
/* never squeeze or crop the clips: each keeps its full 16:9 picture */
.ab-card .ab-card__media { flex-shrink: 0; }
.ab-card .ab-card__media > video { object-fit: contain; }
/* Web & Digital: a taller clip, so the tablet is 1.5x larger and still never cut off as it turns */
.ab-card.ab-card--web .ab-card__media { aspect-ratio: 1280 / 1080; }
/* the cup itself (not its steam) is centred on the two lines of text; the steam rises above */
.ab-cta__say .ab-coffee { translate: 0 -20%; margin-top: calc(var(--fs-title) * 3.4 * .4); }
@media (max-width: 599px) { .ab-cta__say .ab-coffee { margin-top: 44px; } }
.ab-cta__say .ab-coffee { margin-top: 0; }
@media (max-width: 599px) { .ab-cta__say .ab-coffee { margin-top: 0; } }
/* "Tell us what you're working on": 40px on the 1920 design (4/7 of the section title) */
.ab-cta__text { font-size: max(15px, calc(var(--fs-title) * 40 / 70)); line-height: 1.3; }
@media (max-width: 599px) { .ab-cta__text { font-size: 15px; } }
/* "...how we can help." and "Conversation" sit on the same baseline */
@media (min-width: 600px) { .ab-cta__row { align-items: last baseline; } .ab-cta__go { display: block; } }
@media (min-width: 600px) { .ab-cta__link { translate: 0 -0.08em; } }
/* the cup (not its steam), the two lines and the link all share one centre line */
@media (min-width: 600px) { .ab-cta__row { align-items: center; } .ab-cta__link { translate: none; } }
/* everything sits on one bottom line: the base of the cup, "...how we can help." and "Conversation" */
@media (min-width: 600px) {
  .ab-cta__say { align-items: flex-end; }
  .ab-cta__say .ab-coffee { translate: none; }
  .ab-cta__text { margin-bottom: var(--ab-sink, -0.27em); }
  .ab-cta__row { align-items: last baseline; }
  .ab-cta__link { translate: 0 -0.08em; }
}
/* the cup's bottom line sits exactly on the text's baseline (the browser lines them up, so it holds in every browser) */
@media (min-width: 600px) {
  .ab-cta__say { align-items: last baseline; }
  .ab-cta__text { margin-bottom: 0; }
  .ab-cta__say .ab-coffee { margin-bottom: -0.6%; }
}
@media (min-width: 600px) { .ab-cta__say .ab-coffee { margin-bottom: -4%; } }
@media (min-width: 600px) { .ab-cta__say .ab-coffee { margin-bottom: 0; translate: 0 2.5%; } }
/* CTA title removed: the coffee line moves up into its place */
.ab-cta__row { margin-top: 0; }
/* intro: same type and height as the homepage's "Unopen is a New York creative studio…" */
.ab-hero { padding-top: calc(212 * var(--s)); }
@media (max-width: 1099px) { .ab-hero { padding-top: calc(158 * var(--s)); } }
@media (max-width: 599px) { .ab-hero { padding-top: calc(70 * var(--s)); } }
.ab-spacer { visibility: hidden; margin: 0; }
.ab-hero .ab-intro, .ct-hero .ct-title { margin-top: 0; }
/* hero text: letter tops line up with the homepage title */
.ab-hero .ab-intro { margin-top: calc(10.5 * var(--s)); }
.ct-hero .ct-title { margin-top: calc(6 * var(--s)); }
@media (max-width: 1099px) { .ab-hero .ab-intro { margin-top: calc(9 * var(--s)); } .ct-hero .ct-title { margin-top: calc(5.5 * var(--s)); } }
@media (max-width: 599px) { .ab-hero .ab-intro { margin-top: 0; } .ct-hero .ct-title { margin-top: calc(-1.2 * var(--s)); } }
/* About / Contact: "Learn More" sits still (no fade-in), a little further below the text */
.ab-hero .hero__more { animation: none; margin-top: calc(80 * var(--s)); }
@media (max-width: 1099px) { .ab-hero .hero__more { margin-top: calc(40 * var(--s)); } }
@media (max-width: 599px) { .ab-hero .hero__more { margin-top: calc(40 * var(--s)); } }
@media (min-width: 1100px) { .ab-hero .hero__more { margin-top: calc(23 * var(--s)); } }
/* About intro uses the Contact hero's type (size, spacing, width) and its top alignment */
.ab-hero .ab-intro { font-size: var(--fs-title); line-height: 1.12; letter-spacing: -0.04em; max-width: 16.2em; margin-top: calc(6 * var(--s)); }
@media (max-width: 1099px) { .ab-hero .ab-intro { margin-top: calc(5.5 * var(--s)); } }
@media (max-width: 599px) { .ab-hero .ab-intro { font-size: clamp(24px, 6.6vw, 32px); margin-top: calc(-1.2 * var(--s)); } }
.ab-card__text { margin-left: 0; }   /* fine-tuned by js/optical-align.js */
/* closing row (About + Contact) uses the "Find out more" section's type:
   white line = "Find out more about what we do", blue link = "Connect with our team" */
.ab-cta__text { font-size: calc(56 * var(--s)); line-height: 1.18; letter-spacing: -0.04em; }
.ab-cta__link { font-size: calc(40 * var(--s)); }
@media (max-width: 1099px) {
  .ab-cta__text { font-size: max(21px, calc(30 * 100vw / 1000)); }
  .ab-cta__link { font-size: max(16px, calc(21.5 * 100vw / 1000)); }
}
@media (max-width: 599px) { .ab-cta__text { font-size: 21.9px; } }