/* -------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------- */
.hero{
  position:relative;
  background: var(--cream);
  overflow:hidden;
  padding: 76px 0 96px;
  padding-top: 20px; /* Adjusted for sticky header */
}


.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items:center;
}

.hero-copy h1{
  font-size: 2.85rem;
  font-weight:700;
  margin-bottom:22px;
}
.hero-copy h1 .accent{ color: var(--gold); }

.hero-copy p{
  max-width:520px;
  color:var(--text-body);
  margin-bottom:30px;
}

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* =====================================================
   HERO MEDIA
   Image + Background Shape
===================================================== */

.hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    width: 100%;
    min-height: 560px;
}


/* =====================================================
   HERO BACKGROUND SHAPE
===================================================== */

.hero-arc {
    position: absolute;

    width: 82%;
    height: 450px;

    left: 8%;
    bottom: 0;

    background: var(--cream-arc);

    border-radius: 70px 70px 0 0;

    z-index: 0;
}


/* =====================================================
   HERO PHOTO CONTAINER
===================================================== */

.hero-photo {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 440px;

    display: flex;
    justify-content: center;
    align-items: flex-end;

    /* IMPORTANT:
       Do not crop the transparent PNG */
    overflow: visible;

    border-radius: 0;

    /* Remove the card-like appearance */
    box-shadow: none;
}


/* =====================================================
   HERO PHOTO IMAGE
===================================================== */

.hero-photo img {
  display: block;

  width: 100%;
  height: 100%;

  /* Keep the entire person visible */
  object-fit: contain;

  /* Keep her standing on the bottom */
  object-position: center bottom;

  /* Do not crop the image */
  max-width: 100%;
  max-height: 100%;
}

.expertise-card{
  position:absolute;
  z-index:2;
  right: -1px;
  left: 320px;
  bottom: -18px;
  width: 200px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
}
.expertise-card h4{
  font-size:.95rem;
  margin-bottom:14px;
}
.expertise-card ul{ display:flex; flex-direction:column; gap:12px; }
.expertise-card li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  font-weight:600;
  color:var(--navy);
}
.expertise-card .icon-dot{
  width:32px; height:32px;
  min-width:32px;
  border-radius:50%;
  background: var(--blue-tint);
  display:flex; align-items:center; justify-content:center;
  color: var(--blue);
  font-size:.85rem;
  margin-bottom:0;
}

/* -------------------------------------------------------------
   3. PROFESSIONAL SUMMARY
   ------------------------------------------------------------- */
.summary-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.summary-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.summary-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-4px); }

.summary-card h3{
  font-size:1.08rem;
  margin-bottom:6px;
  position:relative;
  padding-bottom:10px;
}
.summary-card h3::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:26px; height:3px;
  background: var(--gold);
  border-radius:2px;
}
.summary-card p{ font-size:.92rem; margin-top:10px; }

/* -------------------------------------------------------------
   4. CORE EXPERTISE
   ------------------------------------------------------------- */
.expertise-section{ background: var(--bg-tint); }

.skills-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.skill-card{
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 26px 12px;
  text-align:center;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.skill-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }

.skill-card i{
  font-size:1.3rem;
  color: var(--blue);
  margin-bottom:12px;
  display:block;
}
.skill-card span{
  font-size:.82rem;
  font-weight:600;
  color: var(--navy);
}

/* -------------------------------------------------------------
   5. CAREER HIGHLIGHTS
------------------------------------------------------------- */

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    /* Force all cards in the row to stretch equally */
    align-items: stretch;
}


/* -------------------------------------------------------------
   CAREER CARD
------------------------------------------------------------- */

.timeline-card {
    position: relative;

    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    padding: 34px 24px 26px;
    margin-top: 18px;

    /*
     * Give every card a consistent height.
     * This prevents cards with less content from
     * becoming visually shorter.
     */
    min-height: 326px;

    height: 326px;

    display: flex;
    flex-direction: column;
}


/* -------------------------------------------------------------
   NUMBER BADGE
------------------------------------------------------------- */

.timeline-badge {
    position: absolute;

    top: -18px;
    left: 24px;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--navy);
    color: var(--white);

    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* -------------------------------------------------------------
   CARD CONTENT
------------------------------------------------------------- */

.timeline-card h3 {
    font-size: 1.02rem;
    margin-bottom: 3px;
}

.timeline-role {
    color: var(--gold-dark);
    font-weight: 600;
    font-size: 0.86rem;
    margin-bottom: 4px;
    display: block;
}

.timeline-date {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 12px;
    display: block;
}

.timeline-card p {
    font-size: 0.88rem;
    line-height: 1.6;
}


/* -------------------------------------------------------------
   CAREER CTA
------------------------------------------------------------- */

.timeline-cta {
    text-align: center;
    margin-top: 22px;
}
/* -------------------------------------------------------------
   6. EDUCATION & CERTIFICATIONS
   ------------------------------------------------------------- */
.edu-grid{
  display:grid;
  grid-template-columns: 1fr 1fr .85fr;
  gap: 26px;
  align-items:stretch;
}

.edu-card{
  background: var(--white);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.edu-card > h3{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.05rem;
  margin-bottom:22px;
}
.edu-card .icon-circle{
  width:44px; height:44px;
  margin-bottom:0;
  font-size:1.05rem;
}

.edu-item{
  position:relative;
  padding-left:20px;
  margin-bottom:20px;
  border-left: 1.5px dotted var(--border);
}
.edu-item:last-child{ margin-bottom:0; }
.edu-item::before{
  content:"";
  position:absolute;
  left:-5px; top:3px;
  width:9px; height:9px;
  border-radius:50%;
  background: var(--gold);
}
.edu-item strong{
  display:block;
  color: var(--navy);
  font-size:.94rem;
  margin-bottom:3px;
}
.edu-item span{
  font-size:.82rem;
  color: var(--text-muted);
}

.edu-photo{
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  min-height: 100%;
}
.edu-photo img{ width:100%; height:100%; object-fit:cover; }

/* -------------------------------------------------------------
   7. CTA BANNER
   ------------------------------------------------------------- */
.cta-banner{
  background: var(--navy);
  border-radius: var(--radius-lg);
  margin: 0 auto;
  max-width: var(--container);
  padding: 40px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}

.cta-left{ display:flex; align-items:center; gap:22px; }

.cta-icon{
  width:64px; height:64px;
  min-width:64px;
  border-radius:50%;
  background: var(--white);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
  font-size:1.4rem;
}

.cta-left h2{
  color: var(--white);
  font-size:1.4rem;
  margin-bottom:6px;
}
.cta-left p{
  color: rgba(255,255,255,.68);
  font-size:.92rem;
  max-width:480px;
}