/* ================================================================
   TEAM FOUNDERS SECTION — CSS START
   Scoped entirely under .team-founders-section — safe to paste
   as-is into the existing stylesheet without affecting any other
   section. No global tag selectors, no shared class names.
================================================================= */

/* ---- TF: design tokens (scoped to this section only) ---- */
.team-founders-section {
    --tf-primary: #275d2b !important;     /* Square green — connector line, active states */
      /*  --icp-primary: #2e9e5b;  Square green — active line / active node */

    --tf-accent: #FDB82C;    /* Square yellow — number markers */
    --tf-dark: #343A40;      /* headings / dark UI */
    --tf-black: #000000;     /* body copy */
    --tf-white: #FFFFFF;     /* section background */
    --tf-light: #F8F9FA;     /* portrait mask / fallback background */
    --tf-muted: #B3B3B3;     /* secondary / meta text */
    --tf-border: #CCCCCC;    /* structural lines */
    --tf-font: "Rubik", Arial, sans-serif;
    --tf-content-width: 1110px;
  }
  
  /* ---- TF: section shell ---- */
  .team-founders-section {
    position: relative;
    width: 100%;
    background: var(--tf-white);
    font-family: var(--tf-font);
    padding: clamp(64px, 9vw, 128px) 20px;
    overflow: hidden;
  }
  .team-founders-section *,
  .team-founders-section *::before,
  .team-founders-section *::after {
    box-sizing: border-box;
  }
  
  /* ---- TF: optional faint blueprint grid (no external assets) ---- */
  .team-founders-section__grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(var(--tf-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--tf-border) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.05;
  }
  
  .team-founders-section__inner {
    position: relative;
    max-width: var(--tf-content-width);
    margin: 0 auto;
  }
  
  /* ---- TF: header ---- */
  .team-founders-section__header {
    max-width: 640px;
    margin: 0 auto clamp(48px, 7vw, 88px) auto;
    text-align: center;
  }
  .team-founders-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tf-primary);
    margin: 0 0 5px 0;
  }
  .team-founders-section__eyebrow::before,
  .team-founders-section__eyebrow::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--tf-primary);
  }
  .team-founders-section__title {
    font-size: clamp(30px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--tf-dark);
    margin: 0;
  }
  
  /* ---- TF: profiles grid (portrait | connector | portrait) ---- */
  .team-founders-section__profiles {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    align-items: start;
    gap: 0 8px;
  }
  
  /* ---- TF: individual profile ---- */
  .team-founders-section__profile {
    display: flex;
    flex-direction: column;
  }
  /* mirrored offset — communicates "two perspectives" without decoration */
  .team-founders-section__profile--01 {
    margin-top: 0;
  }
  .team-founders-section__profile--02 {
    margin-top: clamp(0px, 6vw, 64px);
  }
  
  /* ---- TF: portrait ---- */
  .team-founders-section__portrait {
    position: relative;
  }
  .team-founders-section__number {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--tf-white);
    background: rgba(52, 58, 64, 0.55);
    padding: 4px 10px;
    border-radius: 2px;
  }
  
  /* fallback shown behind the image; visible only if the <img> fails/hides */
  .team-founders-section__portrait-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-light);
    border: 1px solid var(--tf-border);
    color: var(--tf-muted);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
  }
  
  .team-founders-section__portrait-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid var(--tf-border);
    z-index: 1;
  }
  .team-founders-section__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  
  /* reveal mask — sits above the image, animated by JS via GSAP only.
     No hidden/animated state is hard-coded here: if GSAP never runs,
     the mask stays at scaleY(0) (see base rule) and the photo is
     simply visible immediately. */
  .team-founders-section__portrait-mask {
    position: absolute;
    inset: 0;
    background: var(--tf-light);
    transform: scaleY(0);
    will-change: transform;
    pointer-events: none;
  }
  /* reveal directions: 01 bottom-to-top, 02 top-to-bottom */
  .team-founders-section__profile--01 .team-founders-section__portrait-mask {
    transform-origin: top;
  }
  .team-founders-section__profile--02 .team-founders-section__portrait-mask {
    transform-origin: bottom;
  }
  
  /* ---- TF: meta (architectural annotation, not a card) ---- */
  .team-founders-section__meta {
    position: relative;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--tf-border);
  }
  .team-founders-section__meta-number {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--tf-accent);
    margin-bottom: 8px;
  }
  .team-founders-section__name {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 500;
    line-height: 1.25;
    color: var(--tf-dark);
    margin: 0 0 4px 0;
  }
  .team-founders-section__role {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tf-primary);
    margin: 0 0 12px 0;
  }
  .team-founders-section__bio {
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--tf-black);
    opacity: 0.75;
    margin: 0;
    max-width: 46ch;
  }
  
  /* ---- TF: central connector ---- */
  .team-founders-section__connector {
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
    padding-top: 40px;
  }
  .team-founders-section__connector-line {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--tf-primary);
    transform-origin: top;
    will-change: transform;
    /* NOTE: no scaleY(0) here on purpose — visible by default. JS
       (only if GSAP loads) sets the hidden starting state via
       gsap.set() right before building the draw-in animation. */
  }
  .team-founders-section__vision {
    position: relative;
    z-index: 2;
    margin-top: 44%;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.5;
    color: var(--tf-dark);
    background: var(--tf-white);
    padding: 6px 2px;
    will-change: opacity;
    /* NOTE: no opacity:0 here on purpose — see connector-line note above. */
  }
  
  /* ---- TF: desktop hover interaction (pointer devices only) ---- */
  @media (hover: hover) and (pointer: fine) {
    .team-founders-section__image {
      transition: transform 0.4s ease;
    }
    .team-founders-section__profile:hover .team-founders-section__image {
      transform: scale(1.02);
    }
    .team-founders-section__profile:hover .team-founders-section__number {
      background: var(--tf-primary);
    }
  }
  
  /* ---- TF: focus visibility (in case links/icons are added later) ---- */
  .team-founders-section a:focus-visible,
  .team-founders-section button:focus-visible {
    outline: 2px solid var(--tf-primary);
    outline-offset: 4px;
  }
  
  /* ================================================================
     TF: RESPONSIVE — TABLET (<=992px)
  ================================================================= */
  @media (max-width: 992px) {
    .team-founders-section__profiles {
      grid-template-columns: 1fr 56px 1fr;
    }
    .team-founders-section__profile--02 {
      margin-top: 32px;
    }
    .team-founders-section__bio {
      max-width: 40ch;
    }
  }
  
  /* ================================================================
     TF: RESPONSIVE — MOBILE (<=768px)
     Two-column composition breaks; spine goes vertical, single column.
  ================================================================= */
  @media (max-width: 768px) {
    .team-founders-section__profiles {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .team-founders-section__profile--01,
    .team-founders-section__profile--02 {
      margin-top: 0;
      position: relative;
      padding-left: 24px;
    }
    /* connector becomes a left-side vertical spine running behind both profiles */
    .team-founders-section__connector {
      display: none;
    }
    .team-founders-section__profile::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: -48px;
      left: 0;
      width: 2px;
      background: var(--tf-border);
    }
    .team-founders-section__profile--02::before {
      bottom: 0;
    }
    .team-founders-section__profile + .team-founders-section__profile {
      margin-top: 48px;
    }
    .team-founders-section__portrait,
    .team-founders-section__meta {
      margin-left: 8px;
    }
    .team-founders-section__bio {
      max-width: 100%;
    }
    /* mobile "One Vision" marker sits inline between the two profiles */
    .team-founders-section__profile--01::after {
      /*content: "One Vision";*/
      position: absolute;
      left: -1px;
      bottom: -34px;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--tf-dark);
      background: var(--tf-white);
      padding: 4px 8px;
      white-space: nowrap;
    }
  }
  
  /* ================================================================
     TF: REDUCED MOTION — everything fully visible, no scroll animation
  ================================================================= */
  @media (prefers-reduced-motion: reduce) {
    .team-founders-section__portrait-mask {
      transform: scaleY(0) !important;
    }
    .team-founders-section__connector-line {
      transform: scaleY(1) !important;
    }
    .team-founders-section__vision {
      opacity: 1 !important;
    }
  }
  
  /* ================================================================
     TEAM FOUNDERS SECTION — CSS END
  ================================================================= */