/* ---------- About page ----------
   Layout borrowed from the Expo portfolio template (framed columns, staggered photo row,
   numbered grid, scrolling sign-off), drawn in the site's own type scale, orange and cream. */
:root { --ab-line: rgba(0, 0, 0, .12); --ab-cream: rgb(250, 247, 242); --ab-sand: rgb(244, 236, 226); }
.ab { position: relative; }
.ab[data-theme="black"] { --ab-line: rgba(255, 255, 255, .2); }
/* Expo's signature: content sits in a column framed by hairlines, and each band is ruled off from the next */
.ab-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 4vw 5vw; border-left: 1px solid var(--ab-line); border-right: 1px solid var(--ab-line); }
.ab + .ab { border-top: 1px solid var(--ab-line); }
.ab h1, .ab h2, .ab h3, .ab p { margin: 0; }
.ab-btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; border-radius: 300px; padding: 19px 32px; font: 500 16px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; text-transform: uppercase; transition: background .2s, color .2s; }
.ab-btn:hover, .ab-btn:focus-visible { background: #000; }
.ab[data-theme="black"] .ab-btn:hover, .ab[data-theme="black"] .ab-btn:focus-visible { background: #fff; color: #000; }
.ab-note { font-size: 15px; letter-spacing: -.01em; opacity: .7; }

/* Hero: centred headline, then a photo collage */
.ab-hero .ab-wrap { padding-bottom: 0; }
.ab-hero-copy { max-width: 980px; margin: 0 auto; text-align: center; display: grid; gap: 26px; justify-items: center; }
.ab-hero-copy p { max-width: 720px; }
.ab-hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }

/* Collages, in Gabe's home-page style: square-cornered photos and colour blocks that overlap.
   Each collage is a 24-column grid of square cells (--cu = one column), so it keeps its shape at every width;
   later items sit on top. --rows sets how many cells tall it is. */
.ab-hero .ab-wrap { container-type: inline-size; }
.ab-collage { --cu: calc(100cqw / 24); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), var(--cu)); }
.ab-collage > * { margin: 0; min-width: 0; min-height: 0; position: relative; }
.ab-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-hero .ab-collage { margin-top: 4vw; padding-bottom: 4vw; }
.ab-tile--fact { display: grid; align-content: space-between; gap: 12px; padding: max(16px, 2.6cqw); z-index: 2; }
.ab-tile--fact strong { --fs: clamp(22px, 3.5cqw, 52px); font-weight: 500; line-height: .95; letter-spacing: -.05em; }
.ab-tile--fact span { font-size: clamp(13px, 1.35cqw, 16px); line-height: 1.4; letter-spacing: -.02em; }
.ab-tile--orange { background: var(--accent); color: #fff; }
.ab-tile--black { background: #000; color: #fff; }
.ab-tile--black span { opacity: .75; }

/* /about/: the two founders' portraits side by side, staggered, with the orange block bridging the gap between them */
.ab-collage--duo { --rows: 14; }
.ab-collage--duo .ab-c-sam { grid-area: 1 / 1 / 13 / 10; }
.ab-collage--duo .ab-c-sam img { object-position: 50% 30%; }
.ab-collage--duo .ab-c-gabe { grid-area: 3 / 16 / 15 / 25; }
.ab-collage--duo .ab-c-gabe img { object-position: 53% 40%; }
.ab-collage--duo .ab-tile--fact { grid-area: 5 / 8 / 11 / 18; }
/* The tile fits its text (no empty gap between the number and the line), still centred across the gap (Sam, 2026-10-28) */
.ab-collage--duo .ab-tile--fact { align-self: center; align-content: start; gap: max(14px, 1.8cqw); }
/* Profiles: the photo in the middle, the orange block over its lower left, the black block over its upper right */
.ab-collage--wide { --rows: 13; }
.ab-collage--wide .ab-c-photo { grid-area: 2 / 6 / 12 / 20; }
.ab-collage--wide .ab-c-photo img { object-position: 53% 40%; }
.ab-collage--wide .ab-tile--orange { grid-area: 8 / 1 / 14 / 9; }
.ab-collage--wide .ab-tile--black { grid-area: 1 / 17 / 6 / 25; }

/* Story: heading beside the copy (Expo "track record"), then the jobsite photo flush to the frame */
.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw 6vw; align-items: start; }
.ab-split h2 { position: sticky; top: calc(var(--hdr-now, 0px) + 24px); }
.ab-copy { display: grid; gap: 1.1rem; }
.ab-photo { margin: 4vw 0 0; }
.ab-photo img { width: 100%; height: auto; aspect-ratio: 1400 / 811; object-fit: cover; display: block; }

.ab-head { max-width: 760px; margin: 0 auto 3.5vw; text-align: center; display: grid; gap: 18px; justify-items: center; }

/* Numbered 2 x 2 grid (Expo's awards grid) */
.ab-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ab-line); }
.ab-grid li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 24px; padding: 3.6vw 3vw 3.6vw 0; border-bottom: 1px solid var(--ab-line); }
.ab-grid li:nth-child(even) { padding-left: 3vw; padding-right: 0; border-left: 1px solid var(--ab-line); }
.ab-n { grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--accent); display: grid; place-items: center; font: 500 16px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; }
.ab-grid h3 { font-weight: 500; line-height: 1.15; letter-spacing: -.04em; align-self: end; }
.ab-grid p { opacity: .72; }

/* FAQ */
.ab-faq .ab-split h2 { position: static; }

/* Sign-off: Expo's scrolling line, then the button */
.ab-end .ab-wrap { padding-left: 0; padding-right: 0; text-align: center; display: grid; gap: 3vw; justify-items: center; }
.ab-end .marquee { width: 100%; }
.ab-end .marquee-track span { padding-right: .6em; }
.ab-end .marquee-track span::after { content: "✳"; color: var(--accent); margin-left: .6em; font-size: .6em; vertical-align: .25em; }
.ab-end-cta { display: grid; gap: 16px; justify-items: center; padding: 0 var(--sqs-site-gutter); max-width: 720px; }

@media (max-width: 767px) {
  .ab-wrap { padding: 36px var(--sqs-mobile-site-gutter); border-left: 0; border-right: 0; }
  .ab-hero .ab-wrap { padding-top: 28px; }
  .ab-hero-copy { gap: 20px; }
  /* Phone collages: taller arrangements of the same overlaps; the colour blocks sit in a row below the photos,
     pulled up over the photo's lower edge, and grow to fit their text */
  .ab-collage { grid-template-rows: repeat(var(--rows), var(--cu)) auto; }
  .ab-hero .ab-collage { margin-top: 28px; padding-bottom: 36px; }
  .ab-tile--fact { padding: 16px; gap: 14px; }
  .ab-tile--fact strong { --fs: 24px; }
  .ab-tile--fact span { font-size: 13px; }
  .ab-collage--duo { --rows: 19; }
  .ab-collage--duo .ab-c-sam { grid-area: 1 / 1 / 17 / 13; }
  .ab-collage--duo .ab-c-gabe { grid-area: 4 / 13 / 20 / 25; }
  .ab-collage--duo .ab-tile--fact { grid-area: 20 / 3 / 21 / 23; margin-top: calc(var(--cu) * -5); }
  .ab-collage--wide { --rows: 17; }
  .ab-collage--wide .ab-c-photo { grid-area: 1 / 1 / 18 / 25; }
  .ab-collage--wide .ab-tile--orange { grid-area: 18 / 1 / 19 / 13; margin-top: calc(var(--cu) * -2); }
  .ab-collage--wide .ab-tile--black { grid-area: 18 / 13 / 19 / 25; margin-top: calc(var(--cu) * -5); align-self: start; }
  .ab-split { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ab-split h2 { position: static; }
  .ab-photo { margin-top: 24px; }
  .ab-head { margin-bottom: 24px; text-align: left; justify-items: start; }
  .ab-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-grid li, .ab-grid li:nth-child(even) { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 24px 0; border-left: 0; }
  .ab-n { width: 44px; height: 44px; font-size: 14px; }
  .ab-end .ab-wrap { gap: 28px; }
}

/* Brand list (Expo's "trusted by" row), set as type */
.ab-brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.ab-brands li { font-weight: 500; line-height: 1.2; letter-spacing: -.04em; }
.ab-brands li + li::before { content: "•"; color: var(--accent); margin: 0 .6em; }
.ab-brands-note { text-align: center; margin-top: 24px; font-size: 15px; opacity: .65; }

/* Work gallery: captioned photos in three columns; the middle one drops and overlaps its neighbours, and the
   right-hand captions sit flush right so the overlap never covers them */
.ab-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw 2.4vw; }
.ab-gallery li:nth-child(3n + 2) { position: relative; z-index: 1; margin: 5vw -5vw 0; }
.ab-gallery li:nth-child(3n) figcaption { justify-items: end; text-align: right; padding-left: 3vw; }
.ab-gallery li:nth-child(3n + 1) figcaption { padding-right: 3vw; }
.ab-gallery figure { margin: 0; }
.ab-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.ab-gallery figcaption { margin-top: 12px; display: grid; gap: 2px; }
.ab-gallery strong { font-weight: 500; letter-spacing: -.02em; }
.ab-gallery span { font-size: 14px; opacity: .65; }

/* Client quotes */
.ab-quotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ab-line); }
.ab-quotes li { display: grid; gap: 18px; align-content: space-between; padding: 3vw 2.4vw 0 0; }
.ab-quotes li + li { padding-left: 2.4vw; border-left: 1px solid var(--ab-line); }
.ab-quotes blockquote { margin: 0; line-height: 1.35; letter-spacing: -.03em; }
.ab-quotes blockquote::before { content: "“"; color: var(--accent); }
.ab-quotes blockquote::after { content: "”"; color: var(--accent); }
.ab-quotes cite { font: 500 13px/1.3 'Space Grotesk', sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

@media (max-width: 767px) {
  /* Phones: a ruled two-column list instead of a wrapping line, so no bullet starts a row */
  .ab-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; border-top: 1px solid var(--ab-line); }
  .ab-brands li { font-size: 20px; padding: 14px 0; border-bottom: 1px solid var(--ab-line); }
  .ab-brands li + li::before { content: none; }
  .ab-brands-note { text-align: left; margin-top: 16px; }
  .ab-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .ab-gallery li:nth-child(3n + 2) { margin: 0; }
  .ab-gallery li:nth-child(3n) figcaption, .ab-gallery li:nth-child(3n + 1) figcaption { justify-items: start; text-align: left; padding: 0; }
  .ab-gallery li:nth-child(even) { margin-top: 28px; }
  .ab-gallery span { font-size: 13px; }
  .ab-quotes { grid-template-columns: minmax(0, 1fr); }
  .ab-quotes li, .ab-quotes li + li { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--ab-line); }
}

/* Main about page: a card each for the founders, side by side */
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4vw; }
.ab-person { display: grid; gap: 14px; align-content: start; }
.ab-person img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 10px; }
.ab-person h3 { font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.ab-person .ab-role { margin-top: -8px; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; opacity: .6; }
.ab-person p:not(.ab-role) { opacity: .8; }
.ab-link { justify-self: start; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.ab-link:hover, .ab-link:focus-visible { color: #000; }

@media (max-width: 767px) {
  .ab-people { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* >>> phone grid rows (generated) */
/* <<< phone grid rows */