/* About page — studio intro over a world map, team, approach and
   awards. Same language as the rest of the site: Century Gothic
   throughout, the dusty-red accent, contour-line patterns. */

.about_eyebrow,
.team_role,
.award_date {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-family: "Century Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.about_section {
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
  overflow: hidden;
}

.about_section.is-first {
  padding-top: 10rem;
}

/* The homepage's dark sections are charcoal, never pure black — that softer
   ground is what keeps the contour pattern readable behind the type. */
.about_section.is-dark {
  background-color: var(--background-color-gray);
}

/* The contour SVG already carries its own nested opacities (.3 over .2 on most
   groups), so it needs no further dimming to sit behind the type. */
.about_pattern {
  z-index: 0;
  position: absolute;
  inset: -10% 0;
}

.about_pattern img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.about_section > .container-large {
  z-index: 1;
  position: relative;
}

.about_eyebrow {
  color: var(--accent-color);
  margin-bottom: 1.4rem;
}

.about_title {
  color: var(--primary-color);
  font-family: "Century Gothic", sans-serif;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.05;
}

.about_heading {
  color: var(--primary-color);
  margin: 0;
  font-family: "Century Gothic", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.1;
}

.about_heading.is-light,
.about_title.is-light {
  color: var(--secondary-color);
}

/* section labels — "FOUNDER" and "PRINCIPALS" */
.about_heading.is-small {
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
}

.about_heading.is-spaced {
  margin-top: 3.5rem;
}

.about_section-head {
  max-width: 44rem;
  margin-bottom: 3rem;
}

.about_body {
  color: rgba(44, 44, 44, 0.8);
  font-family: "Century Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

.about_body.is-light {
  color: rgba(255, 255, 255, 0.72);
}

.about_body + .about_body {
  margin-top: 1.2rem;
}

/* SplitType line masks */
.about_eyebrow .line {
  padding-bottom: 0.1rem;
  overflow: hidden;
}

.about_title .line {
  padding-bottom: 0.4rem;
  overflow: hidden;
}

/* ---------- 1. intro + map ---------- */

/* Intro reads like the reference: title and copy top-left, map filling the
   right half from the same top edge. */
.about_intro-grid {
  grid-column-gap: 4rem;
  grid-template-columns: minmax(0, 34rem) 1fr;
  align-items: start;
  display: grid;
}

.about_intro-copy {
  max-width: 34rem;
}

.about_intro-copy .about_body {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.about_intro-copy .about_body + .about_body {
  margin-top: 1.2rem;
}

.about_intro-copy .about_title {
  text-transform: uppercase;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}

.about_title-text {
  color: inherit;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.about_intro-copy .about_title-text .line {
  flex: 0 0 auto;
  width: auto !important;
  padding-bottom: 0;
  line-height: 1;
}

.about_intro-copy .about_title img {
  flex: 0 1 auto;
  /* min-width:auto would hold a replaced element at its intrinsic width and
     push it off the edge; 0 lets it scale down beside the word instead. */
  min-width: 0;
  width: auto;
  max-width: 58%;
  height: 1em;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
}

.about_map {
  position: relative;
}

.about_map-image {
  width: 100%;
  height: auto;
  display: block;
}

.about_map-pin {
  background-color: #1919e6;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

/* ---------- 2. team ---------- */

.about_section.is-team {
  background-color: var(--background-color-white);
}

.team_founder {
  grid-column-gap: 3rem;
  grid-template-columns: minmax(0, 20rem) minmax(0, 34rem);
  align-items: start;
  display: grid;
}

.team_grid {
  grid-column-gap: 1.6rem;
  grid-row-gap: 2.4rem;
  grid-template-columns: repeat(3, minmax(0, 23rem));
  display: grid;
}

.team_portrait {
  background-color: #f1f1f1;
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
}

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

/* stands in until a portrait is supplied */
.team_placeholder {
  background-image: linear-gradient(
    135deg,
    rgba(44, 44, 44, 0.06),
    rgba(191, 153, 83, 0.12)
  );
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.team_placeholder-label {
  color: rgba(44, 44, 44, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.7rem;
}

.team_meta {
  margin-top: 0.7rem;
}

.team_head {
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  display: flex;
}

.team_name {
  color: var(--primary-color);
  margin: 0;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}

.team_founder .team_name {
  font-size: 1.35rem;
}

/* stacked micro-caps under the name */
.team_roles {
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.5rem;
  display: flex;
}

.team_role {
  color: rgba(44, 44, 44, 0.85);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
}

.team_founder .team_role {
  font-size: 0.9rem;
}

.team_links {
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1rem;
  display: flex;
}

.team_link {
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.3s;
}

.team_link:hover {
  color: var(--accent-color);
}

.team_bio {
  color: rgba(44, 44, 44, 0.85);
  max-width: 34rem;
  margin: 1rem 0 0;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-line;
}

.team_toggle {
  color: var(--primary-color);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  margin-top: 0.9rem;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  transition: color 0.3s;
}

.team_toggle:hover {
  color: var(--accent-color);
}

.team_head .team_toggle {
  margin-top: 0;
}

.team_info-body[hidden] {
  display: none;
}

.team_founder-body {
  padding-top: 0.2rem;
}

/* ---------- 3. statement ---------- */

.about_statement-grid {
  grid-column-gap: 4rem;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  display: grid;
}

.about_statement-media {
  border-radius: 0.3rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.3);
}

.about_statement-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.about_statement-text {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  font-family: "Century Gothic", sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
}

.about_statement-text + .about_statement-text {
  margin-top: 1.2rem;
}

/* ---------- read more ---------- */

/* Desktop has the room for the full copy, so the toggle is mobile-only and
   the collapsed half stays open here. */
.readmore_toggle {
  display: none;
  color: var(--primary-color);
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  margin-top: 1rem;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Century Gothic", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  transition: color 0.3s;
}

.readmore_toggle:hover {
  color: var(--accent-color);
}

.about_section.is-dark .readmore_toggle {
  color: var(--secondary-color);
}

/* the wrapper breaks the adjacent-sibling rule that spaced these */
.readmore_rest > .about_statement-text {
  margin-top: 1.2rem;
}

/* ---------- 4. expertise ----------
   Same section as the homepage's "Expertise" block (hover-swapped preview
   image + list), reusing its home.css rules and home-expertise.js so the
   two pages stay pixel-identical. */

.section_expertise[hidden] {
  display: none !important;
}

@media screen and (min-width: 992px) {
  .section_expertise {
    min-height: 100vh;
    margin-top: 0;
    margin-bottom: 0;
  }

  .section_expertise.is-expertise-scrollable {
    min-height: calc(100vh + var(--expertise-scroll-distance, 35vh));
  }

  .expertise_wrapper,
  .expertise_wrapper.overflow-hidden {
    height: 100vh;
  }

  .section_expertise .padding-section-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .expertise_grid-container {
    grid-template-columns: minmax(20rem, 1fr) minmax(30rem, 0.95fr);
  }

  .section_expertise .expertise_list-wrapper {
    height: auto;
    max-height: calc(100vh - 8rem);
  }
}

.expertise_left-col-wrapper {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: min(62vh, 34rem);
  flex-direction: column;
  justify-content: flex-start;
}

.home_expertise-title {
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
}

.home_expertise-subtext {
  margin: clamp(2rem, 6vh, 4rem) 0 0;
  color: var(--primary-color);
  font-size: clamp(1.75rem, 3vw, 3.5rem);
  line-height: 1.15;
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
}

.section_expertise:not(.is-expertise-hovering) .home_expertise-subtext {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.home_expertise-eyebrow {
  margin-bottom: 0.8rem;
  color: var(--primary-color);
  font-family: "Century Gothic", sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.home_expertise-media {
  position: absolute;
  top: clamp(8rem, 22%, 11rem);
  left: 0;
  width: min(100%, 34rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 0.2s ease;
}

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

.section_expertise.is-expertise-hovering .home_expertise-subtext {
  opacity: 0;
  transform: translateY(0.75rem);
}

.section_expertise.is-expertise-hovering .home_expertise-media {
  opacity: 1;
  transform: none;
}

.expertise_list-wrapper {
  position: relative;
  height: min(62vh, 34rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}

.expertise_list-track {
  width: 100%;
  transform: none !important;
}

.expertise_list-item,
.expertise_list-item.is-alternate {
  display: block;
  appearance: none;
  width: 100%;
  min-height: 4.25rem;
  margin: 0;
  padding: 0.7rem 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.expertise_list-item-content-wrapper {
  width: 100%;
}

.expertise_list-item-text-wrapper {
  align-items: baseline;
  opacity: 0.42 !important;
  transform: none !important;
  transition: opacity 0.3s ease;
}

.expertise_list-item-number,
.expertise_list-item-number.is-alternate {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1.25;
}

.expertise_list-item-text,
.expertise_list-item-text.is-alternate {
  min-width: 0;
  padding-left: 1rem;
  overflow-wrap: anywhere;
  font-size: clamp(1.75rem, 2.5vw, 2.75rem);
  line-height: 1.15;
  text-align: right;
}

.expertise_list-item-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color) !important;
  opacity: 1 !important;
  transition: height 0.3s ease;
  position: relative;
}

.expertise_list-item-line-overlay {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-color) !important;
  opacity: 1 !important;
  transform: none !important;
}

.expertise_list-item-line-wrapper,
.expertise-list-item-line-wrapper {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.expertise_list-item-image {
  display: none !important;
}

.expertise_list-item.is-active .expertise_list-item-text-wrapper,
.expertise_list-item:hover .expertise_list-item-text-wrapper,
.expertise_list-item:focus-visible .expertise_list-item-text-wrapper {
  opacity: 1 !important;
}

.expertise_list-item.is-active .expertise_list-item-line,
.expertise_list-item:hover .expertise_list-item-line,
.expertise_list-item:focus-visible .expertise_list-item-line {
  height: 2px;
}

.expertise_list-item.is-active .expertise_list-item-line-overlay,
.expertise_list-item:hover .expertise_list-item-line-overlay,
.expertise_list-item:focus-visible .expertise_list-item-line-overlay {
  opacity: 1;
}

.expertise_list-item:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 0.25rem;
}

@media screen and (max-width: 991px) {
  .section_expertise {
    min-height: auto;
    margin-top: 0;
    margin-bottom: 0;
  }

  .expertise_wrapper,
  .expertise_wrapper.overflow-hidden {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .expertise_grid-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  /* The grid's own gap already spaces the title from the list — Webflow's
     generic mobile breakpoint turns this spacer back to display:block for
     other uses on the page, but here it just adds an extra empty gap. */
  .expertise_grid-container .spacer-huge.instance {
    display: none;
  }

  .expertise_left-col-wrapper {
    display: block;
    min-height: 0;
  }

  .home_expertise-title {
    opacity: 1 !important;
    transform: none !important;
  }

  .home_expertise-media {
    display: none;
  }

  .expertise_list-wrapper {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .expertise_list-track {
    transform: none !important;
  }

  .expertise_list-item,
  .expertise_list-item.is-alternate {
    min-height: 0;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  .expertise_list-item-text-wrapper {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3rem;
    opacity: 1 !important;
  }

  .expertise_list-item-number,
  .expertise_list-item-number.is-alternate {
    font-size: 0.95rem;
    opacity: 0.6;
  }

  .expertise_list-item-text,
  .expertise_list-item-text.is-alternate {
    padding-left: 0;
    text-align: left;
    align-self: flex-start;
  }

  /* Each row's image, hidden on desktop for the hover-preview instead,
     shows stacked below its title here — touch has no hover to swap it in. */
  .expertise_list-item-image {
    display: block !important;
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-top: 1.25rem;
  }
}

@media screen and (max-width: 479px) {
  .expertise_list-item-number,
  .expertise_list-item-number.is-alternate,
  .expertise_list-item-text,
  .expertise_list-item-text.is-alternate {
    font-size: 1.3rem;
  }

  .expertise_list-item-text,
  .expertise_list-item-text.is-alternate {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home_expertise-title,
  .home_expertise-media,
  .expertise_list-track,
  .expertise_list-item-text-wrapper,
  .expertise_list-item-line {
    transition: none;
  }
}

/* ---------- 5. awards ---------- */

.about_section.is-awards {
  background-color: var(--background-color-white);
}

.about_section.is-awards .about_pattern {
  inset: 0;
}

.about_section.is-awards .about_pattern img {
  object-position: right center;
  width: auto;
  max-width: none;
  height: 110%;
  margin-left: auto;
  display: block;
}

.award_group + .award_group {
  margin-top: 2.5rem;
}

.award_year {
  color: var(--primary-color);
  border-bottom: 1px solid rgba(44, 44, 44, 0.18);
  margin: 0 0 0.4rem;
  padding-bottom: 0.6rem;
  font-family: "Century Gothic", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
}

.award_row {
  border-bottom: 1px solid rgba(44, 44, 44, 0.09);
  grid-column-gap: 2rem;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 1rem 0;
  transition:
    background-color 0.4s,
    padding-left 0.4s;
  display: grid;
}

.award_row:hover {
  background-color: rgba(191, 153, 83, 0.08);
  padding-left: 0.8rem;
}

.award_label {
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  display: flex;
}

.award_title {
  color: var(--primary-color);
  font-family: "Century Gothic", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
}

.award_detail {
  color: var(--accent-color);
  font-family: "Century Gothic", sans-serif;
  font-size: 1rem;
}

.award_date {
  color: rgba(44, 44, 44, 0.55);
  letter-spacing: 0.2em;
}

/* Compact footer: the homepage footer reveals itself over 200vh of scroll,
   which this page does not need. */
.footer.is-simple {
  min-height: auto;
  margin-top: 0;
}

.footer.is-simple .footer_wrapper {
  min-height: auto;
  position: static;
}

@media screen and (max-width: 991px) {
  /* the intro title is set by a two-class selector, so it needs one too —
     a media query on its own adds no specificity. */
  .about_title,
  .about_intro-copy .about_title {
    font-size: 2.8rem;
  }

  .about_heading {
    font-size: 2.2rem;
  }

  .about_intro-grid,
  .about_statement-grid,
  .team_founder {
    grid-row-gap: 2.4rem;
    grid-template-columns: 1fr;
  }

  .about_intro-copy {
    max-width: none;
  }

  .team_grid {
    grid-template-columns: repeat(2, minmax(0, 23rem));
  }

  .about_statement-media {
    order: -1;
  }
}

@media screen and (max-width: 767px) {
  .about_section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .about_section.is-first {
    padding-top: 8.5rem;
  }

  .about_title,
  .about_intro-copy .about_title {
    font-size: 2.3rem;
  }

  .about_heading {
    font-size: 1.9rem;
  }

  .readmore_toggle {
    display: inline-block;
  }

  .has-readmore:not(.is-readmore-open) .readmore_rest {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .team_grid {
    grid-template-columns: 1fr;
  }

  .award_row {
    grid-row-gap: 0.4rem;
    grid-template-columns: 1fr;
  }
}

/* Below this the word and the lockup no longer share a line legibly, so the
   lockup drops under it rather than shrinking further. */
@media screen and (max-width: 339px) {
  .about_intro-copy .about_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
  }

  .about_intro-copy .about_title img {
    width: 100%;
    max-width: 12rem;
    height: auto;
  }
}