/* =========================================================
   LINKWORLD EXPRESS
   ABOUT — PAGE-SPECIFIC STYLES
   Shared tokens/header/footer/hero/buttons/cta/loader/
   statistics live in style.css. This file only holds what's
   unique here.
========================================================= */


/* =========================================================
   OUR STORY
========================================================= */
.our-story{
  padding:100px 0;
}

.story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.story-image img{
  width:100%;
  border:1px solid var(--line);
}

.story-content .eyebrow{ margin-bottom:16px; }

.story-content h2{
  font-family:var(--display);
  font-size:clamp(28px,3.4vw,38px);
  color:var(--navy);
  font-weight:700;
  line-height:1.1;
  margin-bottom:20px;
}

.story-content p{
  color:var(--muted);
  font-size:15px;
  margin-bottom:16px;
}


/* =========================================================
   OUR VALUES
========================================================= */
.our-values{
  background:var(--paper-2);
  padding:100px 0;
}

.values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:var(--line);
}

.value-card{
  background:var(--paper);
  padding:34px 28px;
}

.value-icon{
  width:46px; height:46px;
  background:var(--navy);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  margin-bottom:18px;
}

.value-card h3{
  font-family:var(--display);
  font-size:19px;
  color:var(--navy);
  font-weight:700;
  margin-bottom:8px;
}

.value-card p{
  color:var(--muted);
  font-size:14px;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:980px){

  .story-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }

}

@media (max-width:600px){

  .our-story,
  .our-values{ padding:64px 0; }

  .values-grid{ grid-template-columns:1fr; }

}
