/* HERO */
      .team-hero {
        max-width: 1200px;
        margin: 5rem auto 3rem;
        padding: 0 2rem;
        text-align: center;
      }

      .team-hero__eyebrow {
        /* Small all-caps label above the main heading */
        display: inline-block;
        font-family: "Roboto", sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        text-transform: uppercase;
        color: #298675;
        background: #e8f7f5;
        border-radius: 100px;
        padding: 0.35em 1.1em;
        margin-bottom: 1.4rem;
      }

      .team-hero h1 {
        font-family: "Space Grotesk", monospace;
        font-size: clamp(2.6rem, 5vw, 4rem);
        color: #237675;
        line-height: 1.15;
        margin-bottom: 1.2rem;
      }

      .team-hero__lead {
        max-width: 680px;
        margin: 0 auto 2.5rem;
        font-size: 1.15rem;
        color: #175774;
        line-height: 1.8;
      }

      /* Decorative orbit ring beneath hero */
      .team-hero__orbit {
        position: relative;
        width: 140px;
        height: 140px;
        margin: 0 auto 4rem;
        background: center / contain no-repeat url("assets/img/can.svg");
        animation: float 4s ease-in-out infinite;
      }

      .team-hero__orbit::after {
        content: "";
        position: absolute;
        inset: -20px;
        border: 2px dashed #29867540;
        border-radius: 50%;
        animation: spin 18s linear infinite;
      }

      @keyframes float {
        0%, 100% { transform: translateY(0); }
        50%       { transform: translateY(-12px); }
      }

      @keyframes spin {
        to { transform: rotate(360deg); }
      }

      /* TEAM SECTION */
      .team-section {
        background: #f0faf9;
        padding: 5rem 2rem;
      }

      .team-section__inner {
        max-width: 1200px;
        margin: 0 auto;
      }

      .team-section__heading {
        font-family: "Space Grotesk", monospace;
        font-size: 2.2rem;
        color: #237675;
        text-align: center;
        margin-bottom: 0.6rem;
      }

      .team-section__sub {
        text-align: center;
        color: #175774;
        font-size: 1.05rem;
        margin-bottom: 3.5rem;
      }

      .team-grid {
        display: grid;
        /* Two members per row on desktop, one on mobile */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 2rem;
      }

      /* Individual member card */
      .member-card {
        background: #fff;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(35, 118, 117, 0.08);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
      }

      .member-card:hover {
        transform: translateY(5px);
      }

      .member-card__avatar {
        width: 100%;
        height: 220px;
        border-radius: 24px;

        /* Fallback colour shown while the image loads or if it fails */
        background-color: #237675;

        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Space Grotesk", monospace;
        font-size: 3rem;
        font-weight: 700;

        /*
          Hide the initial-letter text once a background-image is present.
          The div and its aria-label stay in the accessibility tree, so
          screen readers still announce the member's name correctly.
          Assumption: every card now has a background-image set inline.
          If a future card is added without a photo, set color:#fff inline
          on that card to restore the visible initial as a fallback.
        */
        color: transparent;

        /*
          cover  — the image always fills the 220 px slot edge-to-edge,
                   no matter the source aspect ratio.
          center — the avatar illustrations are square and visually centred,
                   so centering on both axes keeps the face fully in view.
                   (The original "center top" was better for portrait photos.)
        */
        background-size: cover;
        background-position: center center;
      }

      .member-card__body {
        padding: 1.6rem 1.8rem 2rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .member-card__name {
        font-family: "Space Grotesk", monospace;
        font-size: 1.25rem;
        font-weight: 700;
        color: #175774;
      }

      .member-card__role {
        display: inline-block;
        font-size: 0.78rem;
	font-family: "Roboto", sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        color: #237675;
        background: #e8f7f5;
        border-radius: 100px;
        padding: 0.25em 0.85em;
        align-self: flex-start;
      }

      .member-card__bio {
        font-size: 0.95rem;
        color: #3a6070;
        line-height: 1.7;
        margin-top: 0.4rem;
        flex: 1;
      }

      /* SCHOOL BANNER */
      .school-banner {
        max-width: 900px;
        margin: 6rem auto;
        padding: 3rem 2.5rem;
        border-radius: 28px;
        background: linear-gradient(135deg, #237675 0%, #175774 100%);
        color: #fff;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .school-banner h2 {
        font-family: "Space Grotesk", monospace;
        font-size: 2rem;
        margin-bottom: 1rem;
      }

      .school-banner p {
        font-size: 1.05rem;
        line-height: 1.8;
        opacity: 0.9;
        max-width: 640px;
        margin: 0 auto 2rem;
      }

      /* Override the primary button colours inside the dark banner */
      .school-banner .primary {
        background: #fff;
        color: #237675;
        width: auto;
        padding: 0.9em 2em;
      }

      .school-banner .primary:hover {
        filter: brightness(0.95);
      }

      /* ── RESPONSIVE TWEAKS ───────────────────── */
      @media (max-width: 768px) {
        .team-hero {
          margin-top: 3rem;
        }

        .school-banner {
          margin: 4rem 1rem;
          padding: 2.5rem 1.5rem;
        }

        .school-banner h2 {
          font-size: 1.6rem;
        }
      }