/*-- -------------------------- -->
<---            About           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #about-2905 {
    padding: var(--sectionPadding);
    background-color: #fff;
  }
  #about-2905 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #about-2905 .cs-content {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Short accent rule sits above the eyebrow (not below it), eyebrow
     itself recoloured to the terracotta accent */
  #about-2905 .cs-topper {
    margin: 0 0 1rem;
    padding-top: 1rem;
    color: #cc7c46;
    position: relative;
  }
  #about-2905 .cs-topper:before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: #cc7c46;
    position: absolute;
    left: 0;
    top: 0;
  }
  #about-2905 .cs-title {
    /* Softer than the shared 900 -- matches the therapy brand weight */
    font-weight: 400;
    max-width: 20ch;
    margin-bottom: 1.5rem;
    color: #223a4d;
  }
  /* Last word of the heading -- same navy as the rest of the heading, sat
     over a two-layer highlighter mark (two rotated, clipped ellipses in
     Peach Citrus) instead of an italic/colour change or a static image. */
  #about-2905 .cs-title span {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 0 0.2rem;
    white-space: nowrap;
  }
  #about-2905 .cs-title span:before {
    content: "";
    position: absolute;
    left: -0.4rem;
    right: -0.2rem;
    bottom: -0.05rem;
    height: 25%;
    background: var(--secondary);
    opacity: 0.85;
    z-index: -2;
    border-radius: 4px 8px 4px 12px;
    clip-path: ellipse(60% 100% at 50% 0%);
    transform: rotate(-1deg);
  }
  #about-2905 .cs-title span:after {
    content: "";
    position: absolute;
    left: -0.1rem;
    right: -0.5rem;
    bottom: 0.05rem;
    height: 38%;
    background: var(--secondary);
    opacity: 0.5;
    z-index: -1;
    border-radius: 6px 12px 4px 8px;
    clip-path: ellipse(55% 100% at 48% 0%);
    transform: rotate(0.5deg);
  }
  #about-2905 .cs-text {
    max-width: 40rem;
    margin-bottom: 1.25rem;
  }
  #about-2905 .cs-card-group {
    width: 100%;
    margin: 1rem 0 2.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  /* Just a logo, centred -- no card box. Row of 3 at every width, with a
     vertical divider to the left of each logo except the first. The three
     logos are different shapes (wide/square/wide), so object-fit:contain
     keeps each one's own aspect ratio instead of stretching. */
  #about-2905 .cs-item {
    list-style: none;
    padding: 0 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #about-2905 .cs-item:first-child {
    padding-left: 0;
  }
  #about-2905 .cs-item:not(:first-child) {
    border-left: 1px solid rgba(104, 115, 107, 0.25);
  }
  #about-2905 .cs-item img {
    width: 100%;
    height: 2.5rem;
    max-width: none;
    object-fit: contain;
    display: block;
  }
  /* "Learn More" text link -- underlined, arrow flips with the link colour */
  #about-2905 .cs-text-link {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--headerColor);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 3px;
    position: relative;
    transition: color 0.3s;
  }
  #about-2905 .cs-text-link:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.35;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: opacity 0.3s;
  }
  #about-2905 .cs-text-link:hover {
    color: var(--primary);
  }
  #about-2905 .cs-text-link:hover:after {
    opacity: 1;
  }
  #about-2905 .cs-text-link-arrow {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }
  #about-2905 .cs-image-group {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #about-2905 .cs-picture {
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 4 / 5;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    display: block;
  }
  #about-2905 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /* Name tag pinned to the top-left corner of the headshot */
  #about-2905 .cs-name-tag {
    font-family: 'Self Modern', serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.2em;
    white-space: nowrap;
    color: #223a4d;
    background-color: #fff;
    padding: 0.625rem 1rem;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
  }
}

/* Mobile/tablet only (below the 64rem side-by-side layout): headshot
   moves up to sit directly under the heading instead of after all the
   copy. cs-content is unwrapped with display:contents so its children
   become siblings of cs-image-group in the same flex column, letting
   them all be reordered together with the order property. */
@media only screen and (max-width: 63.9375rem) {
  /* The container's flex gap now sits between every promoted child
     (there's no longer just 2), so it's zeroed out in favour of each
     element's own margin -- image-group gets one added since it never
     needed a bottom margin when it was its own flex item before. */
  #about-2905 .cs-container {
    align-items: flex-start;
    gap: 0;
  }
  #about-2905 .cs-content {
    display: contents;
  }
  #about-2905 .cs-topper {
    order: 1;
  }
  #about-2905 .cs-title {
    order: 2;
  }
  #about-2905 .cs-image-group {
    order: 3;
    margin-bottom: 2rem;
  }
  #about-2905 .cs-text {
    order: 4;
  }
  #about-2905 .cs-card-group {
    order: 5;
  }
  #about-2905 .cs-button-group {
    order: 6;
  }
}

/* Tablet - 768px: more breathing room between the 3 logos */
@media only screen and (min-width: 48rem) {
  #about-2905 .cs-item {
    padding-left: 1.5rem;
  }
  #about-2905 .cs-item img {
    height: 3.75rem;
  }
}

/* Desktop - 1024px: content and image side by side */
@media only screen and (min-width: 64rem) {
  #about-2905 .cs-container {
    flex-direction: row;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  #about-2905 .cs-content {
    flex: 1;
  }
  #about-2905 .cs-image-group {
    flex: 1;
    justify-content: flex-end;
  }
  #about-2905 .cs-picture {
    max-width: 32rem;
  }
}