/* over-ons.html */
.about-hero {
      padding-top: calc(80px + clamp(var(--space-16), 8vw, var(--space-32)));
      padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
      background: var(--color-surface-subtle);
      position: relative;
      overflow: hidden;
    }

    .about-hero::before {
      content: '';
      position: absolute;
      top: -20%;
      right: -8%;
      width: 50vw;
      height: 50vw;
      max-width: 600px;
      max-height: 600px;
      background: radial-gradient(circle, rgba(77,182,172,0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    .about-hero::after {
      content: '';
      position: absolute;
      bottom: -120px;
      left: 5%;
      width: 380px;
      height: 380px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(77,182,172,0.10) 0%, transparent 70%);
      pointer-events: none;
    }

    .about-hero__eyebrow {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4DB6AC;
      background: rgba(77,182,172,0.1);
      border-radius: 100px;
      padding: 5px 14px;
      margin-bottom: 20px;
    }

    .about-hero__grid {
      display: grid;
      grid-template-columns: 1fr minmax(0, 360px);
      align-items: stretch;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
    }


    .about-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--color-text-primary);
      margin-bottom: var(--space-6);
    }

    .about-hero__title em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }

    .about-hero__intro {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--color-text-secondary);
      max-width: 46ch;
    }

    /* Profile card — photo + info as one unit */
    .about-hero__profile {
      display: flex;
      flex-direction: column;
      height: 100%;
      gap: 0;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      box-sizing: border-box;
    }

    .about-hero__photo {
      width: 100%;
      flex: 1;
      min-height: 320px;
      border-radius: 0;
      overflow: hidden;
      background: var(--teal-50);
      position: relative;
    }

    .about-hero__photo-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, var(--teal-100) 0%, var(--teal-200) 60%, var(--teal-300) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-hero__photo-bg svg {
      width: 44px;
      height: 44px;
      opacity: 0.35;
      color: var(--teal-600);
    }

    .about-hero__cred {
      padding: var(--space-5) var(--space-6);
      border-top: 1px solid var(--color-border);
      flex-shrink: 0;
    }

    .about-hero__cred-name {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-md);
      font-weight: var(--weight-semibold);
      color: var(--color-text-primary);
      line-height: 1.2;
    }

    .about-hero__cred-title {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      margin-top: var(--space-1);
      font-weight: var(--weight-light);
      line-height: var(--leading-snug);
    }

    .about-hero__cred-divider {
      width: 24px;
      height: 1.5px;
      background: var(--teal-300);
      margin: var(--space-3) 0;
    }

    .about-hero__cred-badges {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: var(--space-3);
    }

    /* Mission section */
    .mission {
      background: var(--color-surface);
    }

    .mission__grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
      align-items: start;
    }

    .mission__statement {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-snug);
      letter-spacing: var(--tracking-tight);
      color: var(--color-text-primary);
      position: sticky;
      top: 100px;
    }

    .mission__statement em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }

    .mission__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
    }

    .mission__block-title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: var(--space-3);
    }

    .mission__block-text {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--color-text-secondary);
    }

    /* Values */
    .values__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-20);
    }

    .value-card {
      background: rgba(255,255,255,0.06);
      border-radius: var(--radius-2xl);
      padding: var(--space-8);
      border: 1px solid rgba(255,255,255,0.1);
    }

    .value-card__num {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xs);
      color: var(--teal-300);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-wide);
      margin-bottom: var(--space-3);
    }

    .value-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xl);
      font-weight: var(--weight-medium);
      color: var(--neutral-0);
      margin-bottom: var(--space-3);
    }

    .value-card__body {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--neutral-400);
      line-height: var(--leading-relaxed);
    }

    /* Credentials / expertise */
    .expertise {
      background: var(--color-surface);
    }

    .expertise__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
      align-items: start;
    }

    .expertise__list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .expertise__item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
      padding-bottom: var(--space-5);
      border-bottom: 1px solid var(--color-border);
    }

    .expertise__item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .expertise__icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-lg);
      background: var(--teal-50);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .expertise__item-title {
      font-weight: var(--weight-semibold);
      font-size: var(--text-sm);
      color: var(--color-text-primary);
      margin-bottom: 3px;
    }

    .expertise__item-desc {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-normal);
    }

    /* Partners */
    .partners {
      background: var(--neutral-900);
      padding-block: clamp(var(--space-12), 5vw, var(--space-20));
    }

    .partners__label {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--neutral-500);
      text-align: center;
      margin-bottom: var(--space-8);
    }

    .partners__row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-10);
      flex-wrap: wrap;
    }

    .partner-chip {
      background: var(--neutral-800);
      border: 1px solid var(--neutral-700);
      border-radius: var(--radius-full);
      padding: var(--space-2) var(--space-6);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      color: var(--neutral-400);
      letter-spacing: var(--tracking-wide);
    }

    /* CTA — styles in shared.css as .vsn-cta */

    @media (max-width: 768px) {
      .about-hero__grid,
      .mission__grid,
      .expertise__grid {
        grid-template-columns: 1fr;
      }

      .about-hero__grid { direction: ltr; }
      .about-hero__photo { order: -1; }
      .values__grid { grid-template-columns: 1fr; }
      .mission__statement { position: static; }
    }