/* ============================================================
   WELDONE EVENTS — About page styles
   ============================================================ */

/* story */
.story-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(44px, 6vw, 96px);
  align-items:center;
}
.story-copy .display-2{ margin-bottom:22px; }
.story-copy p + p{ margin-top:16px; }
.story-points{
  margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.story-points > div{
  border-left:2px solid var(--gold);
  padding:6px 0 6px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.story-points b{
  font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:var(--ink);
}
.story-points span{ font-size:.88rem; color:var(--ink-2); }
.story-media{ position:relative; }
.story-media > .frame:first-child{ width:88%; margin-left:auto; }
.story-media .frame-tag{ left:auto; right:22px; top:20px; bottom:auto; }
.story-small{
  position:absolute; left:-6%; bottom:-12%; width:44%; z-index:2;
}
.story-small .frame-media{ border:6px solid var(--bg); }

/* quote strip */
.quote-strip{
  position:relative; overflow:hidden;
  padding-block:clamp(84px, 10vw, 140px);
  border-block:1px solid var(--line);
}
.quote-inner{ max-width:940px; text-align:center; position:relative; }
.q-mark{
  font-family:var(--font-display); font-size:7rem; line-height:.4;
  color:var(--gold); display:block; margin-bottom:34px;
}
.quote-inner blockquote{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(1.5rem, 3vw, 2.4rem); line-height:1.45; color:var(--ink);
}
.quote-inner .signature{ margin-top:36px; align-items:center; display:flex; flex-direction:column; gap:2px; }
.quote-inner .script{ font-size:2.5rem; }
.quote-inner small{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3); }

/* values */
.values{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.value-card{
  position:relative; padding:clamp(32px, 3.6vw, 50px);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(160deg, var(--bg-3), transparent 70%);
  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.value-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:var(--gold); }
.v-num{
  display:inline-grid; place-items:center; width:56px; height:56px;
  border-radius:50%; border:1px solid var(--line);
  font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--gold);
  margin-bottom:24px; transition:all .4s;
}
.value-card:hover .v-num{ background:var(--grad-gold); color:#1d0f16; border-color:transparent; }
.value-card h3{ font-size:1.42rem; margin-bottom:14px; }
.value-card p{ font-size:.94rem; color:var(--ink-2); }

/* journey timeline */
.journey{ position:relative; padding-left:34px; }
.journey::before{
  content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--gold), var(--line));
}
.j-step{
  position:relative; display:grid; grid-template-columns:120px 1fr;
  gap:26px; padding:26px 0; align-items:start;
}
.j-step::before{
  content:""; position:absolute; left:-30px; top:40px;
  width:9px; height:9px; border-radius:50%;
  background:var(--grad-gold); box-shadow:0 0 0 5px rgba(217,143,156,.15);
}
.j-year{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1.2;
}
.j-step h3{ font-size:1.35rem; margin-bottom:8px; }
.j-step p{ color:var(--ink-2); max-width:62ch; }

@media (max-width:1024px){
  .values{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
}
@media (max-width:860px){
  .story-grid{ grid-template-columns:1fr; gap:80px; }
  .story-media{ max-width:480px; margin-inline:auto; }
  .story-points{ grid-template-columns:1fr; }
  .j-step{ grid-template-columns:1fr; gap:8px; }
}