/* Our Team page — only what Tailwind utilities / inline styles can't express. */

/* Read more/less toggle is a <button>, which defaults to the arrow cursor —
   show the hand so it reads as an interactive control. */
.te-readmore { cursor: pointer; }

/* Bio truncation: clamp to 4 lines until the card is expanded (toggled in team.js). */
.te-bio--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Zoom a wider-framed portrait to match the tighter head-and-shoulders crop of
   the others. Anchored to the top so the head stays in place as it scales. */
.te-team-photo--zoom {
    transform: scale(1.35) translateY(-5%);
    transform-origin: top center;
}

/* Dark navy backdrop with faint diagonal pinstripe — hero + team grid sections. */
.te-team-bg {
    background: #0d1f3c;
    background-image: repeating-linear-gradient(160deg, rgba(255, 255, 255, 0.045) 0px, rgba(255, 255, 255, 0.045) 1px, transparent 1px, transparent 32px);
}

/* Hero eyebrow ("Our Team"). Brand orange: on the navy te-team-bg it reads
   ~5.6:1 (AA) — the darker "AA on white" #BF4E00 was a mis-applied pass
   here (it's ~2.5:1 on navy, worse on both counts). */
.te-team-eyebrow {
    color: #FF6900;
    line-height: 20px;
    letter-spacing: 2.8px;
}

/* Hero heading ("Executive Leadership Team."). */
.te-team-title {
    font-family: "DM Serif Display", serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
}
/* Same responsive ladder as the homepage H1: 40px mobile, 56px tablet,
   64px desktop (one line — it fits there; wrapping below keeps narrow
   viewports from clipping or scrolling horizontally). */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .te-team-title { font-size: 56px; }
}
@media (min-width: 1024px) {
    .te-team-title { font-size: 64px; white-space: nowrap; }
}

/* Orange full-stop accent inside the hero heading. */
.te-team-title__dot {
    color: #EF6200; /* AA large text on white (3.27:1) */
}

/* Inverted crescent divider — dark team section arcs down into light CTA. */
.te-team-divider {
    background: #f8f9fa;
    line-height: 0;
}

.te-team-divider__svg {
    width: 100%;
    height: 100px;
    display: block;
}

/* Role titles (Tailwind text-orange-400) sit on the navy te-team-bg — brand
   orange is ~5.6:1 there (AA); the old "on white" #BF4E00 was ~2.5:1. */
.text-orange-400 { color: #FF6900; }

/* Decorative dividers never intercept clicks or text selection. */
.te-team-divider { pointer-events: none; }

/* Read more stays bottom-pinned (the markup's mt-auto): with per-row grid
   stretch this aligns every collapsed row's links with zero reserved space.
   Known, accepted trade-off: while one bio is expanded, its row-mates'
   links sit at the stretched row bottom. (Reserving name/title/clamp line
   heights aligns the expanded state too, but the blank reserved space was
   worse — see 2026-07-19.) */

/* Mobile: H2 matches the homepage section headings' 1.15 line-height
   (site-wide pass; text-3xl already gives the 30px size). */
@media (max-width: 767.98px) {
    .te-team-h2 { line-height: 1.15; }
}

/* Mobile: hero sub reads left-justified with half the space below it;
   member-card typography steps up (site-wide card pattern); half the
   space above "Start a Conversation", whose sub tightens + left-aligns. */
@media (max-width: 767.98px) {
    .te-team-hero { padding-bottom: 40px; }
    /* The grid section below carries its own 80px top padding — halve it
       too, or the hero-side cut barely shows. */
    .te-team-hero + .te-team-bg { padding-top: 40px; }
    .te-team-sub { text-align: left; }
    .te-team-bg .grid h3 { font-size: 19px; }
    .te-team-bg .grid .text-orange-400 { font-size: 14px; }
    .te-bio { font-size: 16px; line-height: 1.6; }
    .te-readmore { font-size: 16px; }
    .te-team-form { padding-top: 48px; }
    .te-team-form-sub { text-align: left; line-height: 1.4; }
}