/* ===============================
   ROOT VARIABLES
================================ */
:root {
  --cream: #fbf1e6;
  --card: #ffffff;
  --dark: #0f172a;
  --muted: #6b7280;
  --orange: #f36f21;
  --border: #e5e7eb;
  --black: #000;

  --space-xs: clamp(8px, 1vw, 12px);
  --space-sm: clamp(12px, 2vw, 20px);
  --space-md: clamp(20px, 3vw, 32px);
  --space-lg: clamp(32px, 5vw, 64px);
  --space-xl: clamp(48px, 7vw, 96px);
}

/* ===============================
   RESET
================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  font-family: "Inter", "sans-serif";
  background: var(--cream);
  color: var(--dark);
  line-height: 1.7;
}

/* ===============================
   HERO
================================ */
.hero {
  padding: clamp(80px, 15vw, 140px) 20px clamp(64px, 10vw, 96px);
  text-align: center;
}

.hero h1 {
  font-size: clamp(36px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #1A1A1A;
  margin-bottom: var(--space-md);
}

.hero-title {
  width: 100%;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}

/* Hide line break on desktop */
.mobile-break {
  display: none;
}

/* Allow break only on smaller screens */
@media (max-width: 768px) {
  .mobile-break {
    display: inline;
  }
}

.hero p {
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(16px, 2vw, 20px);
  color: #5C5C5C;
}

/* ===============================
   HERO IMAGE
================================ */
.hero-media {
  padding-top: 0;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto var(--space-xl);
}

/* ===============================
   VALUES SECTION
================================ */
.values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.values-image {
  width: 100%;
  height: auto;
  max-width: 420px;
  justify-self: center;
}


/* Separated section styling */
.section-separated {
  background-color: #FDF6F1;
  padding: 100px 0;
}


/* Optional: soft divider feel */




.values-content h2 {
  margin-bottom: clamp(16px, 3vw, 32px);
}

.values-content p {
  margin-bottom: clamp(12px, 2vw, 20px);
  max-width: 560px;
}

/* ===============================
   TYPOGRAPHY
================================ */
h1, h2, h3 {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  margin-bottom: var(--space-sm);
}

h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  color: #4A4A4A;
}

p {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

/* ===============================
   SHARED
================================ */
.section {
  padding: var(--space-xl) clamp(16px, 6vw, 64px);
}

.center {
  text-align: center;
}

.image {
  width: 100%;
  display: block;
}

/* ===============================
   TIMELINE
================================ */
.timeline-wrapper {
  position: relative;
  margin-top: var(--space-lg);
}


.timeline-track h3{
  color:#E87A5D;
  font-size: 48px;
}
.timeline-track::-webkit-scrollbar {
  display: none;
}

.timeline-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 42px*2 - 24px*2)/3); 
  gap: var(--space-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  margin-left: -var(--space-md);
  margin-right: -var(--space-md);
  scroll-padding-left: 0; 
  scroll-padding-right: 0;
 
}

.card {
  background: var(--card);
  padding: var(--space-md);
  border-radius: 12px;
  scroll-snap-align: start;
  width: 100%;
 
}

/* ===============================
   ARROWS
================================ */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;
  z-index: 5;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arrow:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.arrow.left {
  left: 0; /* sticks to the very left */
}

.arrow.right {
  right: 0; /* sticks to the very right */
}


.arrow-icon {
  display: block;
  width: 24px;
  height: 45px;
}

/* ===============================
   GRID / TEAM
================================ */
.grid, .team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.align-top {
  align-items: start;
}

.btn {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 12px 26px;
  background: var(--orange);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
 
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1024px) {
  .timeline-track {
    grid-auto-columns: calc((100% - 24px) / 2);
   
  }

  .timeline-track img{
    height:25px;
    width:25px;
  }

  .arrow.left { left: 8px; }
  .arrow.right { right: 8px; }
}

@media (max-width: 768px) {
  .values,
  .grid,
  .team {
    grid-template-columns: 1fr;
  }

  .timeline-track {
    grid-auto-columns: 100%;
  }

  .arrow {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 64px 16px;
  }

  .arrow {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 768px) {
  .values-image {
    max-width: 100%;
  }

  .values-content {
    text-align: left;
  }
  

  .arrow-icon {
  display: block;
  width: 25px;
  height: 45px;

}
    
}

/* ===== DESKTOP: EXACTLY 3 CARDS ===== */
@media (min-width: 1024px) {
  .timeline-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--space-md) * 2)) / 3);
    gap: var(--space-md);

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    margin: 0;             
    padding: 0;             
  }

  .card {
    scroll-snap-align: start;
  }
  .timeline-wrapper {
  position: relative;
  padding: 0 48px; /* space for arrows */
}

.arrow.left {
  left: 0;
}

.arrow.right {
  right: 0;
}

}

@media (max-width: 1024px) {
  .timeline-track {
    grid-auto-columns: calc((100% - var(--space-md)) / 2);
  }
}

@media (max-width: 768px) {
  .timeline-track {
    grid-auto-columns: 100%;
  }
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.modal.active {
  display: block;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.modal-box {
  background: #fff;
  max-width: 700px;
  width: 90%;
  margin: 80px auto;
  padding: 32px;
  border-radius: 12px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

.more {
    color: #E87A5D;       
    text-decoration: none;   
    transition: all 0.3s ease; 
}

.more:hover {     
    text-decoration: underline !important;
}