/* === About Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   ========================================================================== */

.cc-about {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 79px;
}

/* ── HERO ── */

.cc-about-hero {
  width: 100%;
  height: 452px;
  overflow: hidden;
}

.cc-about-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── SECTION 1: INTRO ── */

.cc-about-s1 {
  display: grid;
  grid-template-columns: 841px 20px 595px;
  grid-template-rows: auto 1fr;
  min-height: 875px;
  padding: 0 28px;
  margin-top: 47px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-about-s1__lead {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  margin-bottom: 0;
  max-width: 614px;
}

.cc-about-s1__body {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink);
  max-width: 651px;
}

.cc-about-s1__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
}

.cc-about-s1__image {
  grid-column: 3;
  grid-row: 1;
  width: 595px;
  height: 749px;
  overflow: hidden;
}

.cc-about-s1__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-about-s1__caption {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 35px;
}

.cc-about-s1__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── SECTION 2 ── */

.cc-about-s2 {
  padding: 0 28px;
  margin-top: 30px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-about-s2__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 30px;
}

.cc-about-s2__grid {
  display: grid;
  grid-template-columns: 595px 56px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 847px;
}

.cc-about-s2__image {
  grid-column: 1;
  grid-row: 1;
  width: 595px;
  height: 472px;
  overflow: hidden;
}

.cc-about-s2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-about-s2__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  margin-left: 20px;
}

.cc-about-s2__lead {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 614px;
}

.cc-about-s2__body {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 685px;
}

.cc-about-s2__caption {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  max-width: 595px;
}

.cc-about-s2__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── OUR SERVICES ── */

.cc-about-services {
  padding: 0 28px;
  margin-top: 34px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-about-services__rule {
  display: none;
}

.cc-about-services__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 152px;
}

.cc-about-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.cc-about-services__col {
  padding-right: 40px;
  position: relative;
}

.cc-about-services__col + .cc-about-services__col {
  padding-left: 30px;
  border-left: 0.5px solid var(--cc-archive);
}

.cc-about-services__col h3 {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-bottom: 43px;
}

.cc-about-services__col p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-archive);
}

/* ── SECTION 3: MISSION ── */

.cc-about-mission {
  padding: 0 28px;
  margin-top: 145px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-about-mission__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 34px;
}

.cc-about-mission__grid {
  display: grid;
  grid-template-columns: 595px 20px 1fr;
  grid-template-rows: auto auto;
}

.cc-about-mission__lead {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 566px;
}

.cc-about-mission__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
}

.cc-about-mission__image {
  grid-column: 3;
  grid-row: 1;
  height: 529px;
  overflow: hidden;
}

.cc-about-mission__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-about-mission__caption {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
}

.cc-about-mission__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── TEAM ── */

.cc-about-team {
  padding: 0 28px;
  margin-top: 60px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-about-team__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 34px;
}

.cc-about-team__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 11px;
}

.cc-about-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 349px);
  gap: 31px 20px;
  margin-left: 369px;
  align-items: stretch;
}

.cc-about-team__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cc-about-team__photo {
  width: 349px;
  height: 414px;
  overflow: hidden;
  position: relative;
  background: var(--cc-ink-2);
}

.cc-about-team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.cc-about-team__photo img[alt*="Noah" i] {
  object-position: center top;
  transform: scale(1.35);
  transform-origin: center top;
}

.cc-about-team__name {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-top: 31px;
}

.cc-about-team__role {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink);
  margin-top: 12px;
}

.cc-about-team__bio {
  position: relative;
  height: 166px;
  overflow: hidden;
  margin-top: 21px;
}

.cc-about-team__bio p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 343px;
}

.cc-about-team__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--cc-bg) 0%, rgba(250, 252, 249, 0) 100%);
  pointer-events: none;
}

.cc-about-team__more {
  display: inline-block;
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  margin-top: 12px;
}

/* ── ABOUT FOOTER OVERRIDE ── */

.cc-about .cc-footer {
  margin-top: 110px;
}

/* ── RESPONSIVE: TABLET ── */

@media (max-width: 1024px) {
  .cc-about {
    padding-top: 60px;
  }

  .cc-about-hero {
    height: 600px;
  }

  .cc-about-s1 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin-top: 40px;
    min-height: auto;
  }

  .cc-about-s1__lead {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }

  .cc-about-s1__body {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    max-width: 100%;
    margin-top: 24px;
  }

  .cc-about-s1__divider {
    display: none;
  }

  .cc-about-s1__image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: 500px;
    margin-top: 40px;
  }

  .cc-about-s1__caption {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .cc-about-s2__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }

  .cc-about-s2__image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: 400px;
  }

  .cc-about-s2__divider {
    display: none;
  }

  .cc-about-s2__lead {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
    margin-top: 30px;
  }

  .cc-about-s2__body {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    max-width: 100%;
    margin-top: 24px;
  }

  .cc-about-s2__caption {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    margin-top: 20px;
    max-width: 100%;
  }

  .cc-about-services__heading {
    margin-bottom: 60px;
  }

  .cc-about-services__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }

  .cc-about-services__col {
    padding-right: 0;
  }

  .cc-about-services__col + .cc-about-services__col {
    padding-left: 0;
    border-left: none;
  }

  .cc-about-services__col:nth-child(3) {
    padding-left: 0;
  }

  .cc-about-mission__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .cc-about-mission__lead {
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }

  .cc-about-mission__divider {
    display: none;
  }

  .cc-about-mission__image {
    grid-column: 1;
    grid-row: auto;
    height: 400px;
    margin-top: 30px;
  }

  .cc-about-mission__caption {
    grid-column: 1;
    grid-row: auto;
    margin-top: 20px;
  }

  .cc-about-team__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 0;
    gap: 30px 20px;
  }

  .cc-about-team__photo {
    width: 100%;
    height: 350px;
  }

  .cc-about-mission {
    margin-top: 80px;
  }
}

/* ── RESPONSIVE: MOBILE ── */

@media (max-width: 768px) {
  .cc-about-hero {
    height: 400px;
  }

  .cc-about-s1__image {
    height: 350px;
  }

  .cc-about-s2__image {
    height: 300px;
  }

  .cc-about-services__grid {
    grid-template-columns: 1fr;
  }

  .cc-about-services__col + .cc-about-services__col {
    border-left: none;
    padding-left: 0;
    border-top: 0.5px solid var(--cc-archive);
    padding-top: 30px;
  }

  .cc-about-services__heading {
    margin-bottom: 40px;
    font-size: 24px;
  }

  .cc-about-mission__image {
    height: 300px;
  }

  .cc-about-mission {
    margin-top: 60px;
  }

  .cc-about-team__grid {
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
  }

  .cc-about-team__photo {
    width: 100%;
    height: 280px;
  }

  .cc-about-team__name {
    font-size: 22px;
  }

  .cc-about .cc-footer {
    margin-top: 60px;
  }
}

/* ── WHAT WE DO (process) ── */
.cc-process {
  max-width: 1512px;
  margin: 0 auto;
  padding: 60px var(--cc-gutter) 0;
}

.cc-process__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 35px;
}

.cc-process__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 110px;
}

.cc-process__grid {
  display: flex;
  gap: 0;
  margin-bottom: 161px;
}

.cc-process__col {
  flex: 1;
  padding: 131px 18px 0;
}

.cc-process__col:first-child {
  padding-left: 0;
  padding-top: 131px;
}

.cc-process__col:last-child {
  padding-right: 0;
  padding-top: 131px;
}

.cc-process__col-divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  align-self: stretch;
}

.cc-process__number {
  display: block;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 7px;
}

.cc-process__col-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cc-ink-2);
}

@media (max-width: 767px) {
  .cc-process__grid {
    flex-direction: column;
    margin-bottom: 60px;
  }
  .cc-process__col {
    padding: 40px 0;
  }
  .cc-process__col-divider {
    width: 100%;
    border-left: none;
    border-top: 0.5px solid var(--cc-archive);
  }
}