/* ============================================================
       ABOUT PAGE - PAGE-SPECIFIC STYLES
    ============================================================ */

    /* HERO */
    .hrb-about-hero {
      position: relative; overflow: hidden;
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0D3B36 100%);
      padding: 140px 0 100px; text-align: center;
    }
    .hrb-about-hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }
    .hrb-about-hero::after {
      content: '';
      position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
      width: 80vw; height: 60vw; max-width: 900px; max-height: 600px;
      background: radial-gradient(ellipse, rgba(13,148,136,0.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .hrb-about-hero__inner {
      position: relative; z-index: 1;
      max-width: 760px; margin: 0 auto;
    }
    .hrb-about-hero__label {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(13,148,136,0.2); border: 1px solid rgba(13,148,136,0.4);
      color: var(--primary-light); border-radius: var(--radius-full);
      padding: 6px 16px; font-size: 12px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px;
    }
    .hrb-about-hero__label-dot {
      width: 7px; height: 7px; background: var(--primary-light);
      border-radius: 50%; animation: hrb-pulse-teal 2s ease-in-out infinite;
    }
    @keyframes hrb-pulse-teal {
      0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0.5); }
      50% { box-shadow: 0 0 0 6px rgba(45,212,191,0); }
    }
    .hrb-about-hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800;
      color: white; line-height: 1.1; margin-bottom: 24px;
    }
    .hrb-about-hero__sub {
      font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(255,255,255,0.75);
      line-height: 1.75; max-width: 620px; margin: 0 auto;
    }

    /* STORY SECTION */
    .hrb-story { padding: var(--section-py) 0; background: var(--bg); }
    .hrb-story__inner {
      display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center;
    }
    @media (min-width: 1024px) { .hrb-story__inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
    .hrb-story__text h2 { margin-bottom: 24px; }
    .hrb-story__text p {
      font-size: 16px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px;
    }
    .hrb-story__text p:last-child { margin-bottom: 0; }
    .hrb-story__text strong { color: var(--dark); font-weight: 600; }
    .hrb-story__visual {
      background: none;
      border: none;
      border-radius: var(--radius-xl);
      min-height: 380px;
      display: flex; align-items: stretch;
      position: relative; overflow: hidden;
      padding: 0;
    }
    .hrb-story__visual::before {
      content: none;
      pointer-events: none;
    }
    .hrb-story__visual-icon {
      width: 72px; height: 72px; border-radius: var(--radius-lg);
      background: var(--primary); display: flex; align-items: center;
      justify-content: center; margin-bottom: 8px;
    }
    .hrb-story__visual-label {
      font-size: 14px; color: var(--text-muted); text-align: center; line-height: 1.6;
    }
    .hrb-story__visual-year {
      font-family: var(--font-display); font-size: 48px; font-weight: 800;
      color: var(--primary); line-height: 1;
    }
    .hrb-story__visual-caption {
      font-size: 13px; color: var(--text-muted); text-align: center;
    }
    /* <!-- REPLACE: Remove the placeholder above and add an actual office/team photo -->
         <img src="/path/to/team-photo.webp" alt="HR Software Bangalore founding team in Koramangala office" width="600" height="400" loading="lazy"> */

    /* VALUES SECTION */
    .hrb-values { padding: var(--section-py) 0; background: var(--bg-alt); }
    .hrb-values__header { text-align: center; max-width: 640px; margin: 0 auto 56px; }
    .hrb-values__grid {
      display: grid; grid-template-columns: 1fr; gap: 24px;
    }
    @media (min-width: 768px) { .hrb-values__grid { grid-template-columns: repeat(3, 1fr); } }
    .hrb-value-card {
      background: white; border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 36px 32px;
      position: relative; overflow: hidden;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .hrb-value-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--primary-light));
    }
    .hrb-value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .hrb-value-card__icon {
      width: 56px; height: 56px; border-radius: var(--radius-md);
      background: var(--primary-xlight); display: flex; align-items: center;
      justify-content: center; margin-bottom: 20px; font-size: 28px;
    }
    .hrb-value-card__title {
      font-family: var(--font-display); font-size: 20px; font-weight: 700;
      color: var(--dark); margin-bottom: 12px;
    }
    .hrb-value-card__desc {
      font-size: 15px; color: var(--text-muted); line-height: 1.7;
    }

    /* STATS SECTION */
    .hrb-about-stats {
      padding: var(--section-py) 0;
      background: linear-gradient(135deg, #0A7075 0%, #064E52 100%);
      position: relative; overflow: hidden;
    }
    .hrb-about-stats::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 48px 48px; pointer-events: none;
    }
    .hrb-about-stats__grid {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px 24px; text-align: center;
    }
    @media (min-width: 768px) { .hrb-about-stats__grid { grid-template-columns: repeat(4, 1fr); } }
    .hrb-astat__number {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(2.4rem, 5vw, 3.8rem); color: white; line-height: 1; margin-bottom: 8px;
    }
    .hrb-astat__number span { color: var(--accent); }
    .hrb-astat__label {
      font-size: 15px; color: rgba(255,255,255,0.75); font-weight: 500; line-height: 1.4;
    }
    .hrb-astat__sublabel {
      font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 4px;
    }

    /* TEAM SECTION */
    .hrb-team { padding: var(--section-py) 0; background: var(--bg); }
    .hrb-team__header { text-align: center; max-width: 640px; margin: 0 auto 56px; }
    .hrb-team__grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    }
    @media (min-width: 768px)  { .hrb-team__grid { grid-template-columns: repeat(3, 1fr); } }
    .hrb-team-card {
      background: var(--bg-alt); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: 32px 24px; text-align: center;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .hrb-team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
    .hrb-team-card__avatar {
      width: 80px; height: 80px; border-radius: 50%;
      margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 22px; font-weight: 800; color: white;
    }
    /* <!-- REPLACE: Replace each .hrb-team-card__avatar div with <img> tag once photos are available:
         <img src="/team/arjun-mehta.webp" alt="Arjun Mehta — Co-Founder & CEO" width="80" height="80" style="border-radius:50%;object-fit:cover;"> --> */
    .hrb-team-card__name {
      font-family: var(--font-display); font-size: 17px; font-weight: 700;
      color: var(--dark); margin-bottom: 4px;
    }
    .hrb-team-card__title {
      font-size: 13px; font-weight: 600; color: var(--primary);
      margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .hrb-team-card__bio {
      font-size: 14px; color: var(--text-muted); line-height: 1.6;
    }

    /* OFFICE SECTION */
    .hrb-office { padding: var(--section-py) 0; background: var(--bg-alt); }
    .hrb-office__inner {
      display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start;
    }
    @media (min-width: 1024px) { .hrb-office__inner { grid-template-columns: 1fr 1fr; gap: 72px; } }
    .hrb-office__info h2 { margin-bottom: 8px; }
    .hrb-office__info > p { font-size: 16px; color: var(--text-muted); margin-bottom: 36px; }
    .hrb-office__details { display: flex; flex-direction: column; gap: 20px; }
    .hrb-office__detail {
      display: flex; align-items: flex-start; gap: 14px;
    }
    .hrb-office__detail-icon {
      width: 44px; height: 44px; border-radius: var(--radius-md);
      background: var(--primary-xlight); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .hrb-office__detail-icon svg { color: var(--primary); }
    .hrb-office__detail-label {
      font-size: 12px; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
    }
    .hrb-office__detail-value {
      font-size: 15px; color: var(--dark); font-weight: 500; line-height: 1.5;
    }
    .hrb-office__detail-value a { color: var(--primary); transition: color 0.15s; }
    .hrb-office__detail-value a:hover { color: var(--primary-hover); }
    .hrb-office__map {
      background: linear-gradient(135deg, var(--bg-teal), var(--primary-xlight));
      border: 2px dashed var(--border-dark);
      border-radius: var(--radius-xl);
      min-height: 360px;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 12px;
      overflow: hidden;
    }
    /* <!-- REPLACE: Replace this map placeholder with:
         <iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="360" style="border:0;border-radius:24px;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
         Use your actual office coordinates at Prestige Tech Hub, Koramangala --> */
    .hrb-office__map-label { font-size: 14px; color: var(--text-muted); text-align: center; padding: 0 20px; }

    /* CTA SECTION */
    .hrb-about-cta {
      padding: var(--section-py) 0;
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
      text-align: center; position: relative; overflow: hidden;
    }
    .hrb-about-cta::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 100%, rgba(13,148,136,0.2) 0%, transparent 60%);
      pointer-events: none;
    }
    .hrb-about-cta__inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; }
    .hrb-about-cta h2 { color: white; margin-bottom: 16px; }
    .hrb-about-cta p { font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 40px; line-height: 1.65; }
    .hrb-about-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

    /* Mobile padding tweaks */
    @media (max-width: 767px) {
      .hrb-about-hero { padding: 120px 0 72px; }
      .hrb-story, .hrb-values, .hrb-team, .hrb-office, .hrb-about-cta { padding: 48px 0; }
      .hrb-about-stats { padding: 48px 0; }
      .hrb-team__grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 479px) {
      .hrb-team__grid { grid-template-columns: 1fr 1fr; }
    }