/* assets/css/welcome.css */
/* ============================================================
   BOBO & WILD — SECTION 02, Welcome
   Cream, between the dark hero and the deep-green story.
   ============================================================ */

.wel{
  position:relative;z-index:2;
  background:var(--cream);color:var(--green-deep);
  padding:clamp(84px,12vh,156px) var(--pad) clamp(76px,11vh,140px);
}
.wel__inner{max-width:1320px;margin:0 auto}

.wel__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,90px);align-items:end;
}
.wel__eyebrow{margin-bottom:clamp(18px,2.2vw,28px)}
.wel__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(38px,6vw,92px);line-height:.98;letter-spacing:-.02em;
}
.wel__title .l{display:block;overflow:hidden;padding-bottom:.04em}
.wel__title .l span{display:block}
.wel__body p{
  font-size:clamp(15px,1.35vw,18px);line-height:1.75;font-weight:300;
  color:rgba(51,75,70,.80);
}
.wel__body p + p{margin-top:1.1em}

/* ---------- stats ---------- */
.wel__stats{
  display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,64px);
  margin:clamp(40px,5vw,72px) 0 clamp(34px,4vw,56px);
  padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(51,75,70,.16);
}
.stat{display:flex;align-items:baseline;gap:12px;max-width:30ch}
.stat b{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(30px,3.6vw,54px);line-height:1;letter-spacing:-.02em;
  color:var(--green-deep);
}
.stat span{font-size:12px;line-height:1.5;color:rgba(51,75,70,.62)}

/* ---------- the four pillars ---------- */
.wel__pillars{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
}
.pill4{
  display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,30px);
  border:1px solid rgba(51,75,70,.16);border-radius:3px;
  background:transparent;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.pill4:hover,.pill4:focus-visible{
  background:var(--green-deep);border-color:var(--green-deep);
  transform:translateY(-3px);
}
.pill4__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pill4__label{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(19px,1.9vw,27px);line-height:1.05;letter-spacing:-.01em;
  transition:color .45s var(--ease);
}
.pill4__n{
  font-size:10px;letter-spacing:.16em;
  color:var(--terracotta);flex:none;
  transition:color .45s var(--ease);
}
.pill4__line{
  margin-top:12px;flex:1;
  font-size:13px;line-height:1.6;font-weight:300;
  color:rgba(51,75,70,.66);
  transition:color .45s var(--ease);
}
.pill4__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(51,75,70,.5);
  transition:color .45s var(--ease);
}
.pill4__go svg{width:12px;height:12px;transition:transform .45s var(--ease)}
.pill4:hover .pill4__label,
.pill4:hover .pill4__go{color:var(--cream)}
.pill4:hover .pill4__line{color:var(--cream-70)}
.pill4:hover .pill4__n{color:var(--terracotta-lift)}
.pill4:hover .pill4__go svg{transform:translateX(4px)}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .wel__top{grid-template-columns:1fr;gap:clamp(22px,3vw,34px);align-items:start}
  .wel__pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .wel__pillars{grid-template-columns:1fr}
  .stat{max-width:none;width:100%}
  .wel__stats{gap:18px}
  .pill4__go{margin-top:16px}
}