/* About group (/about/about-a, about-b, about-c) page styles.
   Owned by the about agent. Do not add rules for other page groups here. */

/* About B "Every number here is real" section: let the owner-workshop photo
   fill its grid column instead of leaving empty space below it. */
.momentum-2-image-wrapper {
  height: 100%;
}

.momentum-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* About B "A short history, told the way it happened" timeline.
   The template's Webflow IX2 scroll-jack translates .roadmap-2-holder by at
   most about -730px at desktop, but the four-card row is about 2595px wide in
   a 1226px container, so the last two milestones could never enter the
   viewport at 1440. Below 992px the template already falls back to a manual
   horizontal scroll; this makes desktop behave the same way and collapses the
   now-unused 250vh runway so there is no dead scroll. transform uses
   !important on purpose: it has to beat the inline transform IX2 writes. */
@media screen and (min-width: 992px) {
  .roadmap-2-main-wrapper {
    height: auto;
  }

  .roadmap-2-stick-wrapper {
    position: static;
    top: auto;
  }

  .roadmap-2-holder {
    transform: none !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(83, 110, 229, 0.4) transparent;
  }

  .road-map-2-card {
    scroll-snap-align: start;
  }
}

/* About A "A short history, told the way it happened" timeline. The template
   caps .roadmap-1-card at max-height:226px, sized for its own shorter copy.
   At mobile widths the lilAgents milestone copy wraps to more lines and the
   card boundary clips the last line mid-glyph. Let the cards grow to fit. */
@media screen and (max-width: 479px) {
  .roadmap-1-card {
    max-height: none;
    height: auto;
  }

  .roadmap-1-card-holder {
    height: auto;
  }
}

/* "The exit is designed in from day one" contact card on about-a, about-b and
   about-c: the dead template form was replaced with a Book a call CTA, so lay
   out the remaining paragraph and button with the spacing the form provided. */
.join-1-contact-holder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Same space-between gap as Contact A, on the about exit card. */
.join-us-grid {
  align-items: start;
}

.join-1-contact-wrapper,
.join-us-2-content-wrapper {
  justify-content: flex-start !important;
  height: auto !important;
  gap: 20px;
}

/* Portraits: David sits on the left of the source frames. Bias the crop
   toward him instead of the empty right side. */
img[src*="/team/david.jpg"] {
  object-fit: cover;
  object-position: center 18%;
}

/* David (glasses) is on the right of these frames. The previous crop
   slid left, onto the other person. */
.contact-3-image,
.why-choose-2-image,
img[src*="the-builders.jpg"],
img[src*="advisor-meeting.jpg"] {
  object-fit: cover;
  object-position: 100% 42%;
}

/* About B/C heroes: a 2x2 of the four people, centered. Drop the oversized
   center portrait and the extra stock shots. */
.about-2-image-grid,
.about-3-image-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 240px)) !important;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.about-2-hero-image-holder,
.about-3-image-wrapper {
  display: contents;
}

.about-3-image-wrapper.hide-mobile {
  display: none !important;
}

.about-2-hero-image-wrapper,
.about-2-hero-center-image-wrapper,
.about-3-image-holder {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
}

.about-2-hero-image-wrapper:has(img[src*="the-builders"]),
.about-3-image-holder:has(img[src*="the-builders"]) {
  display: none !important;
}

.about-2-hero-image,
.about-3-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

img[src*="david.jpg"].about-2-hero-image,
img[src*="david.jpg"].about-3-hero-image {
  object-position: 18% 22%;
}

/* About B "four people" was six cards. Keep the four builders. */
.team-2-card:has(img[src*="advisor-meeting"]),
.team-2-card:has(img[src*="the-builders"]),
.team-2-card:has(img[src*="contractor"]) {
  display: none !important;
}

.team-text-title {
  white-space: nowrap;
  font-size: clamp(15px, 1.35vw, 20px) !important;
  line-height: 1.25 !important;
}

/* Mission icons stay inside their 36px discs. The photos beside them were
   width:100% and height:100% with no object-fit, which stretched the frame. */
.about-1-mission-icon,
.mission-2-icon {
  width: 36px !important;
  height: 36px !important;
  max-width: none;
  max-height: none !important;
  object-fit: contain !important;
}

.about-1-mission-image-wrapper,
.mission-2-image-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.about-1-mission-image,
.about-2-mission-image,
.mission-image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 30%;
}

/* About B babysitting: the center photo left a dead band under itself.
   Banner on top, then the four promise cards in a 2x2. */
.about-1-mission-image-wrapper,
.mission-2-image-wrapper,
.momentum-1-image-wrapper {
  aspect-ratio: 4 / 5 !important;
  max-width: 440px;
  max-height: none;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  .about-2-mission-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .about-2-mission-grid > .mission-2-card-wrapper {
    display: contents;
  }

  .about-2-mission-grid > .mission-2-image-wrapper {
    grid-column: 1 / -1;
    order: -1;
    aspect-ratio: 4 / 5 !important;
    max-width: 420px;
    max-height: none;
    justify-self: center;
  }
}

/* About B team was three columns, so the fourth person sat alone. */
.team-2-grid,
.team-2-collection-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  overflow: visible !important;
}
.team-2-card {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  max-height: none !important;
}

/* About C: David was a featured dark card beside a smaller grid.
   Four equal cards. Drop the "whole team" extra. */
.team-3-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch;
}
@media screen and (min-width: 992px) {
  .team-3-card-holder,
  .team-3-card-grid {
    display: contents;
  }
}
.team-3-card:has(img[src*="the-builders"]) {
  display: none !important;
}
.team-3-dark-card-wrapper,
.team-3-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 16px;
  padding: 16px !important;
  background: #f4f6fb !important;
  border: 1px solid #e4e9f5 !important;
  border-radius: 16px !important;
  max-height: none !important;
  min-width: 0 !important;
  color: #211e1d;
}
.team-3-dark-card-wrapper .team-text-title,
.team-3-dark-card-wrapper .text-sm,
.team-3-dark-card-wrapper .white {
  color: #211e1d !important;
}
.team-3-image-wrapper {
  width: 96px !important;
  min-width: 96px;
  height: 96px !important;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
}
.team-3-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 18%;
}

/* Found in Seattle: the three-column grid's min-content width blew past the
   viewport and the page grew a horizontal scrollbar. */
.location-2-wrapper {
  max-width: 100%;
  overflow: hidden;
}

.location-2-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
}

.location-2-image-wrapper,
.location-2-image-holder {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.location-2-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .location-2-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Short history: a horizontal scroller with a scrollbar never told the story.
   Stack the milestones. */
.roadmap-2-main-wrapper,
.roadmap-1-main-wrapper {
  height: auto !important;
}

.roadmap-2-stick-wrapper,
.roadmap-1-stick-wrapper {
  position: static !important;
}

.roadmap-2-holder,
.roadmap-1-holder {
  transform: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100% !important;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.road-map-2-card,
.roadmap-1-card {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  scroll-snap-align: none;
}

/* ---- About master (scripts/about-master-0924.mjs) ---------------------- */
/* Team cards sit in the hero in place of the four large photos. */
.la-hero-team { width: 100%; }
.la-hero-team .team-1-wrapper { width: 100%; }
/* The conversation bar now stands in its own short section. */
.la-bar-section .section-wrapper { padding-top: 0; }
/* Exit card: the storefront fills the column under the booking prompt. */
.join-1-contact-wrapper { display: flex; flex-direction: column; }
.la-exit-art { flex: 1; align-self: stretch; width: 100%; min-height: 220px; margin-top: 18px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, #F3F5FE 55%, #E9EDFC 100%); position: relative; }
.la-exit-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Founders: the two of them, side by side. */
.la-founders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; }
.la-founders img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 14px; display: block; }
/* Remote: where the team is, with local times. */
.la-remote-wrap { display: flex; align-items: stretch; }
.la-remote-card { width: 100%; border: 1px solid #E4E9F5; border-radius: 20px; background: #FFFFFF; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.la-remote-title { font-family: var(--brand-font-heading); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #536ee5; margin-bottom: 10px; }
.la-remote-row { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid #EEF1F8; }
.la-remote-row:last-child { border-bottom: none; }
.la-remote-row svg { width: 18px; height: 18px; color: #536ee5; flex: none; }
.la-remote-city { flex: 1; font-family: var(--brand-font-heading); font-size: 17px; color: #232323; }
.la-remote-time { font-variant-numeric: tabular-nums; font-size: 15px; color: #6B7280; }

/* Our own material instead of stock photos (2026-09-25): the four builders on the 15+ card,
   and the "watching the week" illustration in the babysitting section. */
.lo-about-team { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 320px; margin: 0 auto; }
.lo-about-team img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; }
.lo-about-watch { display: flex; align-items: center; justify-content: center; background: #F3F5FB; border-radius: 20px; overflow: hidden; padding: 12px; aspect-ratio: 4 / 3; height: auto !important; }
.lo-about-watch svg { width: 100%; height: auto; display: block; }