:root {
  --bg: #f8f8f8;
  --text: #111;
  --muted: #555;
  --brand: #ff3b30;
  --accent: linear-gradient(90deg, #ff3b30, #ff9500);
  --radius: 12px;
  --maxw: 1080px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* Container */
.container { max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem; }

/* Navbar */
.navbar { background: #fff; border-bottom: 1px solid #ddd; position: sticky; top: 0; z-index: 100; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.nav-links a { margin: 0 1rem; color: var(--muted); }
.nav-actions .btn { margin-left: .5rem; }

/* Buttons */
.btn { padding: .6rem 1.2rem; border-radius: var(--radius); border: 1px solid #ddd; }
.btn.primary { background: var(--accent); color: #fff; border: none; }
.btn.ghost { background: #fff; color: var(--text); }
.btn.linkedin { background: #6c63ff; color: #fff; margin-top: 1rem; display: inline-block; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.hero-text { flex: 1 1 480px; }
.hero-text h1 { font-size: 2.4rem; margin-bottom: .5rem; }
.hero-text h2 { font-size: 1.2rem; color: var(--muted); margin-bottom: 1rem; }
.hero-text p { margin-bottom: 1rem; }
.hero-image img { border-radius: 50%; width: 260px; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.metrics { display: flex; gap: 1rem; margin: 1rem 0; flex-wrap: wrap; }
.metric { flex: 1; border: 1px solid var(--brand); border-radius: var(--radius); padding: 1rem; text-align: center; }
.metric span { font-size: 1.8rem; font-weight: 700; color: var(--brand); display: block; }
.cta-row { margin: 1rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.contact-inline p { margin: .2rem 0; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.card h3 { margin-bottom: .5rem; }
.card small { color: var(--muted); font-size: .9rem; }

/* Timeline */
.timeline { border-left: 2px solid var(--brand); margin-left: 1rem; padding-left: 1.5rem; }
.entry { margin-bottom: 2rem; }
.entry h3 { font-size: 1.2rem; margin-bottom: .2rem; }
.entry span { font-size: .9rem; color: var(--muted); }
.entry ul { margin-top: .5rem; padding-left: 1rem; list-style: disc; }

/* Projects */
.cards.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card.highlight { background: var(--accent); color: #fff; }
.card.highlight button { background: #000; color: #fff; border: none; margin-top: .5rem; padding: .5rem .8rem; border-radius: var(--radius); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.contact-card { background: #fff; padding: 1rem; border-radius: var(--radius); text-align: center; }
.footer { background: #111; color: #fff; text-align: center; padding: 1rem; margin-top: 2rem; }

/* Responsive */
@media (max-width: 768px) {
  .hero { flex-direction: column-reverse; text-align: center; }
  .hero-image img { width: 200px; }
  .metrics { justify-content: center; }
}
@media (max-width: 480px) {
  .nav-links { display: none; }
  .nav-actions .btn { margin-left: 0; }
  .hero-text h1 { font-size: 1.8rem; }
  .hero-text h2 { font-size: 1rem; }
}

/* ---------- Typography updates ---------- */
body { 
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; 
  background: var(--bg); 
  color: var(--text); 
  line-height: 1.6; 
}

.hero-text h1 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;              /* bold like the screenshot */
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 2rem;
}

.hero-text h2 {
  font-weight: 600;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw + .9rem, 1.25rem);
  margin-bottom: 1rem;
}

/* ---------- Hero layout: image LEFT, text RIGHT ---------- */
.hero {
  display: grid;
  grid-template-columns: 320px 1fr;   /* left column for photo */
  align-items: center;
  gap: 2.5rem;
  padding-top: 7rem;
}

.hero-image {
  display: grid;
  place-items: center;
}

.hero-image img {
  width: 260px;               /* adjust as you like */
  height: 260px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  background: #fff;
}

.hero-text {
  max-width: 720px;           /* keeps the right column tidy */
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2.2rem 0 2.2rem;
}

.metric {
  border: 2px solid #ff6a3d;  /* red-ish outline like your design */
  border-radius: 14px;
  padding: 1.4rem;
  text-align: center;
  background: #fff;
}

.metric span {
  display: block;
  font-weight: 800;
  font-size: 1.7rem;
  color: #ff3b30;
  line-height: 1.1;
}

.metric p { 
  margin-top: .35rem; 
  color: var(--muted);
  font-size: .9rem; 
}

/* ---------- Buttons & inline contacts (unchanged but tidy) ---------- */
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.contact-inline p { margin: 1.5rem 1.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { 
    grid-template-columns: 1fr;     /* stack on mobile */
    text-align: center; 
  }
  .hero-text { margin: 0 auto; }
  .metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .hero-image img { width: 200px; height: 200px; }
}
/* ---------- Section Titles ---------- */
.section-title {
  text-align: center;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  margin: 3rem auto 2rem;
  position: relative;
  display: inline-block;
  color: var(--text);
}

/* Optional underline accent */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff3b30; /* brand accent color */
  margin: 0.6rem auto 0;
  border-radius: 2px;
}

/* Strong centering for section titles */
.container > .section-title,
.section > .section-title,
section .section-title {
  display: block;          /* full-width block */
  width: 100%;
  text-align: center;      /* center the text */
  margin: 3rem auto 2rem;  /* top/bottom spacing */
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  color: var(--text);
}

/* Underline accent centered */
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff3b30;
  margin: 0.6rem auto 0;   /* auto centers the line */
  border-radius: 2px;
}

/* If a parent uses flex/grid and pushes content to the left,
   this wrapper rule recenters the heading line itself */
section {
  /* no change to children; just ensure headings can center */
}
section .section-title {
  text-align: center;      /* force center */
  margin: 3rem auto 2rem;  /* top/bottom spacing */
}

/* Bottom CTA alignment */
.bottom-cta {
  justify-content: center;   /* center buttons */
  margin-top: 5rem;          /* extra breathing room */
}

.center-text {
  text-align: center;
  max-width: 700px;     /* keeps it from stretching too wide */
  margin: 0 auto 1.5rem; /* centers horizontally with auto left/right */
  color: var(--muted);   /* optional: use your muted text color */
  font-size: 1.1rem;
  line-height: 1.6;
}

/* ===== Timeline: perfect center spine + alternating sides ===== */

/* container + spine */
.timeline {
  position: relative;
  margin: 2rem auto 0;
  max-width: var(--maxw);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #e44731; /* red spine */
}

/* 2 columns, NO column gap (spine lives exactly at 50%) */
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: relative;
}

/* each timeline item sits in the middle, offset left or right */
.tl-item {
  position: relative;
  width: 50%;                 /* take half the container */
}
.tl-item:nth-child(odd) {
  margin-left: 50%;           /* push to right side */
  text-align: left;
}
.tl-item:nth-child(even) {
  margin-left: 0;             /* stay on left side */
  text-align: right;
}

.tl-card {
  background: #fff;
  text-align: left !important;
  border: 1px solid #e9e9e9;  /* neutral border */
  border-radius: 14px;
  padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  max-width: 460px;
}

/* spine stays centered */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #e44731;
}

/* red dots */
.tl-item::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #e44731;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;
  transform: translate(-50%, -50%);
  left: 0;  /* default for even */
}
.tl-item:nth-child(odd)::before {
  left: 0;  /* left edge of right-side cards */
  transform: translate(-50%, -50%);
}
.tl-item:nth-child(even)::before {
  right: 0; /* right edge of left-side cards */
  left: auto;
  transform: translate(50%, -50%);
}

/* Mobile fallback: all cards left-aligned */
@media (max-width: 900px) {
  .tl-item {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .tl-card {
    max-width: 100%;
  }
  .timeline::before {
    left: 12px;
    transform: none;
  }
  .tl-item::before {
    left: 12px;
    right: auto;
    transform: translate(-50%, -50%);
  }
}

/* the cards sit close to the spine with equal gutter */
.tl-card {
  width: clamp(320px, 90%, 560px);
  background: #fff;
  border: 1px solid #e9e9e9;   /* neutral (no color) */
  border-radius: 14px;
  padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  color: var(--text);          /* ensure dark text */
}
.tl-item:nth-child(odd)  .tl-card { /* LEFT column */
  justify-self: end;           /* anchor to spine */
  margin-right: 28px;          /* gap from spine */
}
.tl-item:nth-child(even) .tl-card { /* RIGHT column */
  justify-self: start;
  margin-left: 28px;
}

/* red dot centered on each card's vertical center ON THE SPINE */
.tl-item::before {
  content: "";
  position: absolute;
  top: 50%;                    /* vertical center of the item (card) */
  width: 10px;
  height: 10px;
  background: #e44731;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;  /* white ring */
  transform: translate(-50%, -50%);
}
.tl-item:nth-child(odd)::before {   /* left column items */
  left: 100%;                  /* item’s right edge ... */
  transform: translate(50%, -50%);  /* ... move to the boundary */
}
.tl-item:nth-child(even)::before {  /* right column items */
  left: 0;                     /* item’s left edge ... */
  transform: translate(-50%, -50%); /* ... move to the boundary */
}

/* meta + company + role + pills (kept from before, neutral text) */
.tl-meta    { color:#777; font-size:.9rem; margin-bottom:.3rem; }
.tl-company { font-family:"Playfair Display", Georgia, serif; font-weight:800; font-size:1.25rem; margin-bottom:.15rem; }
.tl-role    { color:#666; font-style:italic; margin-bottom:.6rem; }

.tl-highlights { list-style:none; padding-left:0; display:grid; gap:.6rem; }
.tl-highlights li { display:flex; align-items:flex-start; gap:.6rem; }
.tl-highlights li::before { content:"•"; color:#e44731; font-weight:700; line-height:1; transform:translateY(2px); }

.pill {
  display:inline-block;
  background: linear-gradient(90deg,#e44731,#ff7a2a);
  color:#fff;
  padding:.5rem .75rem;
  border-radius:10px;
  line-height:1.25;
  box-shadow:0 6px 14px rgba(228,71,49,.25);
}

/* Mobile: single column; spine becomes a left guide */
@media (max-width: 900px) {
  .timeline::before { left: 12px; transform:none; }
  .timeline-list    { grid-template-columns: 1fr; }
  .tl-item, .tl-item:nth-child(even), .tl-item:nth-child(odd) { grid-column: 1; }
  .tl-item::before  { left: 0; transform: translate(-50%, -50%); }
  .tl-card          { margin-left: 28px; margin-right: 0; justify-self: stretch; }
}

/* ============ TIMELINE FIXES ============ */

/* 0) Nuke any accidental left borders/lines from earlier attempts */
.timeline, .tl-item, .tl-card { border-left: none !important; }

/* 1) Remove the little bullet dot before each orange pill line */
.tl-highlights { list-style: none; padding-left: 0; }
.tl-highlights li::before { content: none !important; }

/* 2) True center-spine layout (keep your existing width:50% pattern) */
.timeline { position: relative; }
.timeline::before {               /* single center spine */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #e44731;
}

/* Each item uses half the width; odd/right, even/left */
.tl-item { position: relative; width: 50%; }
.tl-item:nth-child(odd)  { margin-left: 50%; text-align: left;  } /* RIGHT side */
.tl-item:nth-child(even) { margin-left: 0;   text-align: right; } /* LEFT side  */

/* Cards — neutral borders, positioned relative so we can anchor the center dot */
.tl-card {
  position: relative;
  background: #fff;
  border: 1px solid #e9e9e9;      /* neutral */
  border-radius: 14px;
  padding: 1.2rem 1.2rem 1rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  max-width: 460px;
  margin: 0 28px;                 /* 28px gap from the spine */
}

/* 2b) Put the red dot on the spine, vertically centered on each card */
.tl-card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #e44731;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #fff;     /* white ring */
}

/* For RIGHT-side cards (odd): dot goes on the LEFT edge (toward spine) */
.tl-item:nth-child(odd)  .tl-card::before {
  left: -28px;                    /* matches the card margin gap */
  transform: translate(-50%, -50%);
}

/* For LEFT-side cards (even): dot goes on the RIGHT edge (toward spine) */
.tl-item:nth-child(even) .tl-card::before {
  right: -28px;
  transform: translate(50%, -50%);
}

/* 3) Ensure no stray left spine shows up from older CSS */
.timeline::after { content: none !important; }

/* 4) Responsive: stack to LEFT with a simple left guide */
@media (max-width: 900px) {
  .tl-item { width: 100%; margin-left: 0; text-align: left; }
  .tl-card { max-width: 100%; margin: 0 0 0 28px; }  /* 28px from the guide */

  .timeline::before { left: 12px; transform: none; } /* left guide line */

  /* Dot moves to that left guide at 12px */
  .tl-card::before {
    left: -16px;                  /* roughly lands on the 12px guide (12 + 4px radius) */
    right: auto;
    transform: translate(-50%, -50%);
  }
}

/* ==== remove ALL dots ==== */
/* pills list bullets */
.tl-highlights { list-style: none; padding-left: 0; }
.tl-highlights li::before { content: none !important; }

/* timeline dots (both versions we may have added) */
.tl-item::before,
.tl-card::before { content: none !important; }

/* ==== desktop keeps center spine; cards alternate as before ==== */
/* (no change needed here if your desktop looked fine) */

/* ==== mobile / tablet: stack left, no spine ==== */
@media (max-width: 900px) {
  /* hide center spine on small screens */
  .timeline::before { display: none !important; }

  /* every item takes full width and aligns left */
  .tl-item {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* cards go full width and lose side margins so they don’t indent oddly */
  .tl-card {
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* CTA row (mobile center) */
.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 3rem 0;
}

/* On mobile, center align */
@media (max-width: 900px) {
  .cta-row {
    justify-content: center;
  }
}

/* Navbar Brand */
.brand {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;            /* semi-bold */
  font-size: 1.3rem;           /* tweak as you like */
  color: var(--text);
  letter-spacing: -0.04em;
}