/* Home — Pillar teaser polish.
   Adds a numbered badge (01–04) to each pillar image, a teal accent
   bar that scales in on hover from the top edge, and a stronger lift
   transition. Builds on the global .pillar-grid / .pillar-card
   primitives so the rest of the card styling stays consistent. */

.pillars--home{
  padding:100px 0 110px;
  background:var(--cream);
  position:relative;overflow:hidden;
}

/* Decorative orb — kept subtle, behind the grid. */
.pillars--home::before{
  content:"";position:absolute;
  top:-160px;right:-160px;
  width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.16), transparent 70%);
  pointer-events:none;
}

.pillars--home .pillar-card{
  position:relative;
  background:var(--paper);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),
             box-shadow .35s ease,
             border-color .25s ease;
}
/* Teal accent bar at the top — scales in on hover. */
.pillars--home .pillar-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--teal);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
  z-index:2;
}
.pillars--home .pillar-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 50px -22px rgba(10,42,39,.28);
  border-color:var(--mint);
}
.pillars--home .pillar-card:hover::before{transform:scaleX(1)}

.pillars--home .pillar-img{
  position:relative;
  aspect-ratio:4/2.9;
}

/* Numbered indicator chip (top-right of image). */
.pillar-num{
  position:absolute;top:14px;right:14px;z-index:1;
  min-width:42px;height:42px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(252,250,244,.94);
  color:var(--pine);
  border:1px solid rgba(255,255,255,.6);
  border-radius:100px;
  font-family:"Fraunces",serif;font-weight:500;
  font-size:.95rem;letter-spacing:.02em;
  backdrop-filter:blur(6px);
  box-shadow:0 6px 14px -8px rgba(10,42,39,.35);
  transition:transform .3s ease, background .3s ease;
}
.pillar-card:hover .pillar-num{
  transform:translateY(-2px);
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}

.pillars--home .pillar-body{
  padding:26px 28px 30px;
}

@media(max-width:980px){
  .pillars--home{padding:80px 0 90px}
  .pillars--home .pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .pillars--home{padding:64px 0 72px}
  .pillars--home .pillar-grid{grid-template-columns:1fr;gap:16px}
  .pillar-num{min-width:36px;height:36px;font-size:.85rem;top:12px;right:12px}
}