/* Team profiles (/team/*) (Team Profile Reskin V2, 1 Nov): the approved design's values, by name. Visual reskin only:
   every profile's own text, photo, links and fields are unchanged. A block with no data is not rendered (template). */
.cf-tp { --pad: 41px; --sec: 115px; --gap-hc: 70px; --t-hero: 72px; --t-h2: 48px; --t-stmt: 32px; --t-title: 24px; --t-intro: 20px; }
@media (max-width: 767px) { .cf-tp { --pad: 40px; --sec: 60px; --gap-hc: 40px; --t-hero: 42px; --t-h2: 35px; --t-stmt: 24px; --t-title: 22px; --t-intro: 18px; } }
@media (max-width: 360px) { .cf-tp { --pad: 20px; } }
.cf-tp :where(ul, li, p, h1, h2, h3, figure, blockquote) { margin: 0; padding: 0; }
.cf-tp__in { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); }
.cf-tp__sec { border-bottom: 1px solid var(--cf-border-warm); }
.cf-tp__sec:last-child { border-bottom: 0; }
.cf-tp__block { padding-top: var(--sec); padding-bottom: var(--sec); display: flex; flex-direction: column; gap: var(--gap-hc); }
.cf-tp__h2 { font-family: var(--cf-font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; color: var(--cf-navy); text-wrap: balance; }
.cf-tp__label { font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); }

/* photos: greyscale, colour on hover (and on keyboard focus of the card they sit in) */
.cf-tp__photo { display: block; width: 100%; object-fit: cover; background: #E6E1D8; filter: grayscale(1); transition: filter 400ms; }
.cf-tp__photo:hover, a:hover > .cf-tp__photo, a:focus-visible > .cf-tp__photo { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .cf-tp__photo { transition: none; } }

/* 1 head */
.cf-tp__head { background: var(--cf-canvas-warm); }
.cf-tp__head-in { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.cf-tp__head-text { padding: var(--sec) 0 48px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cf-tp__role { font: 500 16px/1.3 var(--cf-font-display); color: var(--cf-light-blue-on-warm); }
.cf-tp__name { font-family: var(--cf-font-display); font-weight: 400; font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.035em; color: var(--cf-navy); text-wrap: balance; }
.cf-tp__lane { max-width: 30ch; font-family: var(--cf-font-display); font-weight: 400; font-size: var(--t-stmt); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-tp__portrait { align-self: end; justify-self: start; width: 100%; max-width: 100%; }
.cf-tp__portrait .cf-tp__photo { aspect-ratio: 1 / 1; height: auto; }
@media (min-width: 768px) { .cf-tp__portrait { max-width: 420px; } }
@media (min-width: 1024px) {
  .cf-tp__head-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 80px; }
  .cf-tp__head-text { padding-bottom: var(--sec); }
  .cf-tp__portrait { justify-self: end; max-width: 480px; }
}

/* 2 off the clock: the confession on the left, Loves and On repeat side by side on the right; without a confession they take the full width */
.cf-tp__off { background: var(--cf-white); }
.cf-tp__off-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px 96px; align-items: start; }
.cf-tp__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 56px; min-width: 0; }
.cf-tp__conf, .cf-tp__col { padding-top: 32px; border-top: 1px solid var(--cf-navy); display: flex; flex-direction: column; min-width: 0; }
.cf-tp__conf { gap: 24px; }
.cf-tp__col { gap: 20px; }
.cf-tp__conf-text { font-family: var(--cf-font-display); font-weight: 300; font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; color: var(--cf-navy); text-wrap: balance; }
.cf-tp__conf-text span { background: var(--cf-highlight); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.1em; }
.cf-tp__list { border-top: 1px solid var(--cf-border-warm); }
.cf-tp__list ul, .cf-tp__list ol { list-style: none; margin: 0; padding: 0; }
.cf-tp__list li, .cf-tp__list > p { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--cf-border-warm); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.cf-tp__loves .cf-tp__list li, .cf-tp__loves .cf-tp__list > p { color: var(--cf-navy); }
.cf-tp__repeat .cf-tp__list li, .cf-tp__repeat .cf-tp__list > p { color: var(--cf-dark-blue); }
.cf-tp__list strong { font-weight: 600; color: var(--cf-navy); }
.cf-tp__list a { color: var(--cf-navy); }
@media (min-width: 768px) {
  .cf-tp__conf-text { font-size: 40px; }
  .cf-tp__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .cf-tp__off-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* 3 story */
.cf-tp__story { background: var(--cf-white); border-bottom: 0; }
.cf-tp__story-in { padding-top: var(--sec); padding-bottom: var(--sec); display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 120px; align-items: start; }
.cf-tp__bio-col { display: flex; flex-direction: column; gap: 28px; max-width: 640px; min-width: 0; }
.cf-tp__bio { display: flex; flex-direction: column; gap: 28px; }
.cf-tp__bio p { font-size: 18px; line-height: 1.65; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-tp__bio > p:first-child { font-size: var(--t-intro); color: var(--cf-navy); }
.cf-tp__bio a { color: var(--cf-navy); }
.cf-tp__stop { margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--cf-navy); font-family: var(--cf-font-display); font-weight: 400; font-size: var(--t-stmt); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-tp__talk { padding-top: 32px; border-top: 1px solid var(--cf-navy); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
.cf-tp__talk-img { width: 120px; height: 120px; transition-duration: 300ms; }
.cf-tp__talk-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf-tp__talk-h { font-family: var(--cf-font-display); font-weight: 500; font-size: var(--t-title); line-height: 1.2; letter-spacing: -0.015em; color: var(--cf-navy); }
.cf-tp__talk-role { font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-tp__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--cf-navy); text-decoration: none; }
.cf-tp__link > span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.cf-tp__link:hover { color: var(--cf-light-blue); }
@media (max-width: 480px) { .cf-tp__talk { grid-template-columns: 88px minmax(0, 1fr); gap: 20px; } .cf-tp__talk-img { width: 88px; height: 88px; } }
@media (min-width: 1024px) {
  .cf-tp__story-in { grid-template-columns: minmax(0, 1fr) 400px; }
  .cf-tp__talk { position: sticky; top: 112px; }
}

/* 4 quote */
.cf-tp__quote { background: var(--cf-section-warm); border-bottom: 0; }
.cf-tp__quote .cf-tp__in { padding-top: var(--sec); padding-bottom: var(--sec); }
.cf-tp__fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 56px; align-items: start; max-width: 1100px; }
.cf-tp__quote-img { width: 120px; height: 120px; transition-duration: 300ms; }
.cf-tp__quote-text { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cf-tp__bq { font-family: var(--cf-font-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.03em; color: var(--cf-navy); text-wrap: balance; }
.cf-tp__attrib { padding-top: 20px; border-top: 1px solid var(--cf-line-strong); max-width: 520px; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
@media (min-width: 768px) { .cf-tp__fig { grid-template-columns: 120px minmax(0, 1fr); } }

/* 5 insights */
.cf-tp__ins { background: var(--cf-white); border-top: 1px solid var(--cf-border-warm); }
.cf-tp__ins .cf-tp__in, .cf-tp__team .cf-tp__in { padding-top: var(--sec); padding-bottom: var(--sec); }
.cf-tp__sechead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px 48px; }
.cf-tp__all { white-space: nowrap; font-weight: 600; font-size: 16px; color: var(--cf-navy); text-decoration: none; border-bottom: 1px solid var(--cf-navy); padding-bottom: 4px; }
.cf-tp__all:hover { color: var(--cf-light-blue); border-color: var(--cf-light-blue); }
.cf-tp__cards { list-style: none; margin-top: var(--gap-hc); display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 40px; }
.cf-tp__cards li { min-width: 0; }
.cf-tp__card { display: flex; flex-direction: column; gap: 20px; height: 100%; color: var(--cf-navy); text-decoration: none; }
.cf-tp__card:hover { color: var(--cf-medium-blue); }
.cf-tp__card-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #E6E1D8; }
.cf-tp__card-t { font-family: var(--cf-font-display); font-weight: 500; font-size: var(--t-title); line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }
.cf-tp__more { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 14px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (min-width: 768px) { .cf-tp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-tp__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 6 the rest of the team */
.cf-tp__team { background: var(--cf-canvas-warm); border-top: 1px solid var(--cf-border-warm); }
.cf-tp__people { list-style: none; margin-top: var(--gap-hc); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.cf-tp__people li { min-width: 0; }
.cf-tp__person { display: flex; flex-direction: column; gap: 14px; color: var(--cf-navy); text-decoration: none; }
.cf-tp__person:hover { color: var(--cf-light-blue-on-warm); }
.cf-tp__person .cf-tp__photo { aspect-ratio: 1 / 1; height: auto; transition-duration: 300ms; }
.cf-tp__person-t { display: flex; flex-direction: column; gap: 4px; }
.cf-tp__person-n { font-family: var(--cf-font-display); font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.cf-tp__person-r { font-size: 14px; line-height: 1.4; color: var(--cf-medium-blue); }
@media (min-width: 768px) { .cf-tp__people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-tp__people { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* no confession: Loves and On repeat take the full width (README rule) */
@media (min-width: 1024px) { .cf-tp__pair:only-child { grid-column: 1 / -1; } }
