/* ==========================================================================
   About Us page (2026-11-05), Steve Speet's Round 5 design.

   Values are read off the Figma-exported PDF ("EQM 87185 - About Page Design -
   Desktop - Round 5"), drawn at 1440: a 1320px content column with 60px sides,
   card corners of 5px, the story card's 200px top-right sweep, the culture
   cards' single 100px corner and the quote photo's 200px top-left one are the
   literal path radii. Colours are the site's own (#1f3d47, #ffab00, #faf7f5,
   #dab9ff), the same four the practice-area pages use.

   There is no mobile design, so phone and tablet are ours. Mobile-first: base
   rules are the phone layout and each min-width query adds to it.

   Text sizes: the design sets body copy at 15px and labels at 12px. Both are
   raised to 18px here, the floor for readable text on our builds; display type
   and the 24px lines are as drawn.
   ========================================================================== */

.ab {
	--ab-blue: #1f3d47;
	--ab-orange: #ffab00;
	--ab-beige: #faf7f5;
	--ab-lilac: #dab9ff;
	--ab-r: 5px;
	--ab-display: 42px;
	color: var(--ab-blue);
	font-family: Objectiv, "Objectiv Fallback", Arial, Helvetica, sans-serif;
	overflow-x: clip;
}
.ab *, .ab *::before, .ab *::after { box-sizing: border-box; }
.ab :where(p, h1, h2, h3, ul, figure, blockquote) { margin: 0; padding: 0; }
.ab ul { list-style: none; }
.ab img { display: block; max-width: 100%; height: auto; }

.ab .screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- layout */
.ab-w { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px)  { .ab-w { padding: 0 40px; } }
@media (min-width: 1280px) { .ab-w { padding: 0 60px; } }

.ab .ab-c-orange { color: var(--ab-orange); }
.ab .ab-c-beige { color: var(--ab-beige); }
.ab .ab-c-white { color: #fff; }

/* ---- type: display lines are 72/76 at 1440, stepping down per breakpoint */
@media (min-width: 768px)  { .ab { --ab-display: 56px; } }
@media (min-width: 1280px) { .ab { --ab-display: 72px; } }
.ab .ab-display {
	font-family: inherit;
	font-size: var(--ab-display);
	font-weight: 400;
	line-height: 1.056;   /* 76 / 72 */
	letter-spacing: -0.045em;
	color: var(--ab-blue);
	text-wrap: balance;
}
.ab .ab-eyebrow {
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ab-blue);
}
.ab :where(p) { font-size: 18px; line-height: 1.5; }

/* ---- buttons: orange pill, blue bold label */
.ab .ab-btn-row { display: flex; flex-wrap: wrap; gap: 20px; }
.ab .ab-btn-row--center { justify-content: center; }
.ab .ab-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 14px 26px;
	border-radius: 100px;
	background: var(--ab-orange); color: var(--ab-blue);
	font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
	text-decoration: none; white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ab .ab-btn:hover, .ab .ab-btn:focus-visible { background: var(--ab-blue); color: #fff; }
.ab .ab-btn:focus-visible { outline: 3px solid var(--ab-orange); outline-offset: 3px; }
.ab .ab-family .ab-btn:hover, .ab .ab-family .ab-btn:focus-visible, 
.ab .ab-cta .ab-btn:hover, .ab .ab-cta .ab-btn:focus-visible { background: #fff; color: var(--ab-blue); }

/* ==================================================================== hero */
.ab .ab-hero { background: var(--ab-beige); padding: 40px 0 48px; }
.ab .ab-hero__inner { display: grid; gap: 40px; }
.ab .ab-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.ab .ab-hero .ab-eyebrow { margin-bottom: 24px; }
.ab .ab-hero__title { margin-bottom: 30px; }
.ab .ab-hero__intro { max-width: 540px; }
.ab .ab-hero .ab-btn-row { margin-top: 30px; }

/* The collage: six photos overlapping, positioned from the design's own
   coordinates inside a 750 x 643 box (x 631-1380, y 156-799 at 1440). Each
   tile is 315 x 240, or 240 x 315 for the two portraits; z-order is the
   design's. Positions are percentages, so it scales as one picture. */
.ab .ab-collage { position: relative; width: 100%; max-width: 750px; aspect-ratio: 750 / 643; margin: 0 auto; }
.ab .ab-collage__tile { position: absolute; overflow: hidden; border-radius: var(--ab-r); background: #e9e3dc; }
.ab .ab-collage__tile img { width: 100%; height: 100%; object-fit: cover; }
.ab .ab-collage__tile--1 { left: 0;      top: 55.68%; width: 42%; height: 37.33%; z-index: 1; }
.ab .ab-collage__tile--2 { left: 43.2%;  top: 0;      width: 42%; height: 37.33%; z-index: 2; }
.ab .ab-collage__tile--3 { left: 14.27%; top: 8.86%;  width: 32%; height: 48.99%; z-index: 3; }
.ab .ab-collage__tile--4 { left: 68%;    top: 25.35%; width: 32%; height: 48.99%; z-index: 4; }
.ab .ab-collage__tile--5 { left: 25.87%; top: 32.19%; width: 42%; height: 37.33%; z-index: 5; }
.ab .ab-collage__tile--6 { left: 34.13%; top: 62.67%; width: 42%; height: 37.33%; z-index: 6; }
/* Five photos (Zack took the office group photo out, November 12). A tight,
   staggered collage around the family photo with the children (the fifth), in
   the middle: no two photo edges line up, so it reads as a collage rather than
   a grid. Overlaps and bottom crops only hide bodies and background; positions
   were searched against each photo's face positions so no face is covered.
   Tiles are cropped from the bottom, so the image is pinned to the top. */
.ab .ab-collage--5 { aspect-ratio: 562 / 503; }
.ab .ab-collage--5 .ab-collage__tile img { object-position: center top; }
.ab .ab-collage--5 .ab-collage__tile--1 { left: 0.00%; top: 0.00%; width: 56.02%; height: 47.75%; z-index: 1; }
.ab .ab-collage--5 .ab-collage__tile--2 { left: 43.98%; top: 4.69%; width: 56.02%; height: 47.75%; z-index: 3; }
.ab .ab-collage--5 .ab-collage__tile--3 { left: 52.02%; top: 62.40%; width: 42.68%; height: 37.60%; z-index: 4; }
.ab .ab-collage--5 .ab-collage__tile--4 { left: 4.12%; top: 57.06%; width: 56.02%; height: 38.52%; z-index: 2; }
.ab .ab-collage--5 .ab-collage__tile--5 { left: 28.13%; top: 31.35%; width: 49.08%; height: 37.60%; z-index: 5; }
/* Fewer than five photos: no collage, a simple grid instead. */
.ab .ab-collage:not(.ab-collage--6):not(.ab-collage--5) { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ab .ab-collage:not(.ab-collage--6):not(.ab-collage--5) .ab-collage__tile { position: static; width: auto; height: auto; aspect-ratio: 315 / 240; }

@media (min-width: 1024px) {
	.ab .ab-hero { padding: 60px 0 36px; }
	.ab .ab-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 750px); align-items: center; gap: 40px; }
	.ab .ab-hero__copy { max-width: 520px; }
}

/* ---- figures: 72px numbers over 24px labels */
.ab .ab-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 48px; }
.ab .ab-stat { display: flex; flex-direction: column; gap: 12px; }
.ab .ab-stat__n { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -0.045em; }
.ab .ab-stat__l { font-size: 18px; line-height: 1.33; letter-spacing: -0.01em; }
@media (min-width: 1024px) {
	.ab .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin-top: 53px; }
	.ab .ab-stat { gap: 26px; }
	.ab .ab-stat__n { font-size: 72px; }
	.ab .ab-stat__l { font-size: 24px; }
}

/* =================================================================== story */
.ab .ab-story { background: #fff; padding: 20px 0 0; }
.ab .ab-story__card {
	background: var(--ab-orange);
	border-radius: var(--ab-r) 100px var(--ab-r) var(--ab-r);
	padding: 48px 24px;
	text-align: center;
}
.ab .ab-story__title { margin: 0 auto 32px; max-width: 900px; }
.ab .ab-story__title .ab-c-beige { display: block; }
.ab .ab-story__cols { display: grid; gap: 20px; text-align: left; max-width: 1092px; margin: 0 auto; }
.ab .ab-story__col p + p { margin-top: 12px; }
@media (min-width: 768px) {
	.ab .ab-story__card { padding: 64px 48px; border-top-right-radius: 160px; }
	.ab .ab-story__cols { grid-template-columns: 1fr 1fr; gap: 44px; }
}
@media (min-width: 1280px) {
	.ab .ab-story { padding-top: 60px; }
	/* 1104 to 1626 at 1440: heading 93 below the top, 100 of air at the foot. */
	.ab .ab-story__card { padding: 93px 113px 100px; border-top-right-radius: 200px; }
	.ab .ab-story__title { margin-bottom: 55px; }
}

/* ================================================================= beliefs */
.ab .ab-beliefs { background: #fff; padding: 48px 0; }
.ab .ab-beliefs__inner { display: grid; gap: 32px; }
.ab .ab-beliefs .ab-eyebrow { margin-bottom: 18px; }
.ab .ab-beliefs__list li {
	padding: 16px 0 16px 1ch;
	border-bottom: 1px solid var(--ab-orange);
	font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em;
}
.ab .ab-beliefs__list li:last-child { border-bottom: 0; }
.ab .ab-beliefs__img { width: 100%; aspect-ratio: 635 / 430; object-fit: cover; border-radius: var(--ab-r); }
@media (min-width: 1024px) {
	.ab .ab-beliefs { padding: 60px 0; }
	.ab .ab-beliefs__inner { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
	.ab .ab-beliefs__list li { font-size: 24px; padding: 16px 0 17px 1ch; }
	.ab .ab-beliefs__list li:first-child { padding-top: 6px; }
}

/* ================================================================== family */
.ab .ab-family { background: var(--ab-blue); padding: 56px 0; scroll-margin-top: 100px; }
.ab .ab-family__title { color: var(--ab-beige); margin-bottom: 36px; }
.ab .ab-people { display: grid; gap: 20px; }
.ab .ab-person {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-areas: "photo name" "bio bio";
	gap: 20px 20px; align-items: center;
	padding: 24px;
	border-radius: var(--ab-r);
	background: var(--ab-beige);
}
.ab .ab-person--nophoto { grid-template-areas: "name name" "bio bio"; }
.ab .ab-person__photo { grid-area: photo; width: 96px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ab-orange); }
.ab .ab-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab .ab-person__name {
	grid-area: name;
	font-family: inherit; font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.045em;
	color: var(--ab-blue);
}
.ab .ab-person__bio { grid-area: bio; }
.ab .ab-person__bio p + p { margin-top: 10px; }
.ab .ab-cert { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 64px; }
.ab .ab-cert__badge { display: block; width: 196px; color: #fff; }
.ab .ab-cert__badge svg { display: block; width: 100%; height: auto; }
.ab .ab-cert__text {
	max-width: 640px; margin: 31px 0 36px;
	color: #fff; font-size: 22px; font-weight: 700; line-height: 1.33;
}
@media (min-width: 768px) {
	.ab .ab-person {
		grid-template-columns: 140px minmax(0, 1fr);
		grid-template-areas: "photo name" "photo bio";
		padding: 30px 40px; gap: 16px 32px;
	}
	.ab .ab-person--flip { grid-template-columns: minmax(0, 1fr) 140px; grid-template-areas: "name photo" "bio photo"; }
	.ab .ab-person__photo { width: 140px; }
	.ab .ab-person__name { font-size: 56px; align-self: end; }
	.ab .ab-person__bio { align-self: start; }
}
@media (min-width: 1280px) {
	.ab .ab-family { padding: 93px 0 100px; }
	.ab .ab-family__title { margin-bottom: 53px; }
	.ab .ab-people { gap: 30px; }
	/* 1320 x 235 cards, 30px in, a 175 circle. The bio column is 472 wide and
	   ends 70 from the right edge (or 50 short of the circle on the flipped
	   cards, where the name starts 60 in). */
	.ab .ab-person {
		grid-template-columns: 175px minmax(0, 1fr) 472px;
		grid-template-areas: "photo name bio";
		gap: 0 32px; padding: 30px 70px 30px 60px; min-height: 235px;
	}
	.ab .ab-person--flip { grid-template-columns: minmax(0, 1fr) 452px 175px; grid-template-areas: "name bio photo"; gap: 0 50px; padding: 30px 60px; }
	.ab .ab-person--nophoto { grid-template-columns: minmax(0, 1fr) 472px; grid-template-areas: "name bio"; }
	.ab .ab-person__photo { width: 175px; }
	.ab .ab-person__name { font-size: 72px; align-self: center; }
	.ab .ab-person__bio { align-self: center; }
	.ab .ab-cert { margin-top: 100px; }
	.ab .ab-cert__text { font-size: 24px; line-height: 32px; }
}

/* ================================================================= culture */
.ab .ab-culture { background: var(--ab-beige); padding: 48px 0; }
.ab .ab-culture__head { max-width: 640px; margin-bottom: 40px; }
.ab .ab-culture .ab-eyebrow { margin-bottom: 18px; }
.ab .ab-culture__title { margin-bottom: 30px; }
.ab .ab-cards { display: grid; gap: 20px; }
.ab .ab-card {
	background: var(--ab-lilac);
	border-radius: var(--ab-r);
	padding: 40px 32px 48px;
	min-height: 260px;
}
/* One sweeping corner per card, in the design's order. */
.ab .ab-card:nth-child(6n+1) { border-bottom-left-radius: 100px; }
.ab .ab-card:nth-child(6n+2) { border-top-right-radius: 100px; }
.ab .ab-card:nth-child(6n+3) { border-bottom-right-radius: 100px; }
.ab .ab-card:nth-child(6n+4) { border-top-right-radius: 100px; }
.ab .ab-card:nth-child(6n+5) { border-bottom-right-radius: 100px; }
.ab .ab-card:nth-child(6n+6) { border-top-right-radius: 100px; }
.ab .ab-chip {
	display: inline-block; max-width: 100%; margin-bottom: 30px;
	padding: 9px 10px;
	border-radius: var(--ab-r);
	background: var(--ab-beige);
	font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase;
	color: var(--ab-blue);
}
.ab .ab-card__text { font-size: 22px; line-height: 1.33; letter-spacing: -0.01em; }
@media (min-width: 768px) { .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.ab .ab-culture { padding: 60px 0; }
	.ab .ab-culture__head { margin-bottom: 61px; }
	.ab .ab-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
	.ab .ab-card { min-height: 328px; padding: 50px 40px; }
	.ab .ab-card__text { font-size: 24px; line-height: 32px; }
}

/* ============================================================== difference */
.ab .ab-diff { background: var(--ab-orange); padding: 48px 0; }
.ab .ab-diff__title { margin-bottom: 32px; }
.ab .ab-quote { border-radius: var(--ab-r); overflow: hidden; }
.ab .ab-quote__media { border-radius: 100px var(--ab-r) 0 0; overflow: hidden; }
.ab .ab-quote__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; }
.ab .ab-quote__body { background: var(--ab-beige); padding: 24px; border-radius: 0 0 var(--ab-r) var(--ab-r); }
.ab .ab-quote--nophoto .ab-quote__body { border-radius: var(--ab-r); }
.ab .ab-quote__text { margin: 0; padding: 0; border: 0; quotes: none; font-style: normal; text-align: left; }
.ab .ab-quote__text::before, .ab .ab-quote__text::after { content: none; }
.ab .ab-quote__text p { font-style: normal; font-size: 20px; font-weight: 700; line-height: 1.33; letter-spacing: -0.01em; }
.ab .ab-quote__who {
	display: block; margin-top: 16px; text-align: left; font-style: normal;
	font-size: 18px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ab .ab-points { display: grid; gap: 0; margin-top: 40px; }
.ab .ab-point { padding: 22px 0; border-bottom: 1px solid var(--ab-blue); }
.ab .ab-point:last-child { border-bottom: 0; }
.ab .ab-point__title {
	margin-bottom: 12px;
	font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ab-blue);
}
@media (min-width: 768px) {
	.ab .ab-quote__img { aspect-ratio: 1320 / 432; }
	.ab .ab-quote__media { border-top-left-radius: 200px; }
	.ab .ab-quote__body { padding: 30px; }
	.ab .ab-quote__text p { font-size: 24px; line-height: 32px; }
	.ab .ab-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
	.ab .ab-point:nth-last-child(-n+2):nth-child(odd), .ab .ab-point:nth-last-child(-n+2):nth-child(odd) ~ .ab-point { border-bottom: 0; }
}
@media (min-width: 1024px) {
	.ab .ab-points { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 50px; }
	.ab .ab-point { border-bottom: 0; }
	/* The rule runs under the first row only, as drawn. */
	.ab .ab-point:nth-child(-n+3) { border-bottom: 1px solid var(--ab-blue); padding-bottom: 30px; }
	.ab .ab-point:nth-child(n+4) { padding-top: 30px; }
}
@media (min-width: 1280px) {
	.ab .ab-diff { padding: 53px 0 60px; }
	.ab .ab-diff__title { margin-bottom: 53px; }
	.ab .ab-points { margin-top: 60px; }
	.ab .ab-point { padding-top: 0; }
}

/* ===================================================================== cta */
.ab .ab-cta { background: var(--ab-beige); padding: 40px 0; }
.ab .ab-cta__panel {
	background: var(--ab-blue); border-radius: var(--ab-r);
	padding: 48px 24px; text-align: center;
}
.ab .ab-cta__title { margin: 0 auto 28px; }
.ab .ab-cta__text { max-width: 600px; margin: 0 auto 40px; color: var(--ab-beige); font-size: 18px; line-height: 26px; }
@media (min-width: 1280px) {
	.ab .ab-cta { padding: 60px 0; }
	.ab .ab-cta__panel { padding: 60px 60px 60px; }
	.ab .ab-cta__title { margin-bottom: 33px; }
	.ab .ab-cta__text { margin-bottom: 60px; }
}

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