/* tiers.css — Refresh / Refine / Restore. Three equal columns across the
   full container; every card the same visual: a stacked before-over-after
   photograph with the tier name laid over the BEFORE half. */
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%}
@media (max-width:980px){.tier-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

.tier{display:flex;flex-direction:column;background:#F5F0E8;color:#16291E;border-radius:3px;overflow:hidden}

/* name band on top, then the full square photo: before and after both fully visible.
   The photo's top edge fades up into the band so the text still reads as laid over it. */
.tier-media{position:relative;display:flex;flex-direction:column;background:#16291E}
.tier-over{position:relative;z-index:2;padding:22px 24px 4px;color:#F5F0E8;min-height:132px}
.tier-num{display:block;font-size:12px;letter-spacing:.22em;font-weight:700;color:#C9A861;margin:0 0 6px}
.tier-name{font-size:56px;line-height:.92;margin:0 0 8px;letter-spacing:.01em;color:#F5F0E8}
.tier-line{font-size:14px;line-height:1.4;margin:0;color:rgba(245,240,232,.85);max-width:30ch}
.tier-badge{position:absolute;top:22px;right:20px;background:#C9A861;color:#16291E;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 10px}
.tier-photo{position:relative;aspect-ratio:1/1;overflow:hidden}
.tier-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.tier:hover .tier-photo img{transform:scale(1.04)}}
.tier-shade{position:absolute;left:0;right:0;top:0;height:14%;pointer-events:none;
  background:linear-gradient(180deg,#16291E 0%,rgba(22,41,30,0) 100%)}

.tier-tag{position:absolute;left:16px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:#F5F0E8;background:rgba(22,41,30,.62);padding:4px 8px;border-radius:2px;backdrop-filter:blur(3px)}
.tier-tag-b{bottom:calc(50% + 10px)}
.tier-tag-a{bottom:12px}
.tier-cap{position:absolute;right:14px;bottom:12px;font-size:12px;letter-spacing:.06em;color:rgba(245,240,232,.9);
  background:rgba(22,41,30,.62);padding:4px 8px;border-radius:2px;max-width:60%;text-align:right;backdrop-filter:blur(3px)}

.tier-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 22px}
.tier-facts{display:flex;justify-content:space-between;gap:14px;padding:0 0 14px;margin:0 0 14px;
  border-bottom:1px solid rgba(22,41,30,.14)}
.tier-facts small{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(22,41,30,.5);margin:0 0 4px}
.tier-facts b{font-size:20px;line-height:1;font-weight:400;color:#16291E;white-space:nowrap}
.tier-facts div:last-child{text-align:right}
.tier-facts .tier-price{color:#8A6B2E}
.tier-fit{border-left:2px solid #C9A861;padding:2px 0 2px 11px;margin:0 0 16px;font-size:14px;line-height:1.45;color:rgba(22,41,30,.9)}
.tier-fit b{color:#8A6B2E}

.tier .opt-detail{margin:auto 0 14px}
.tier-more ul{list-style:none;margin:12px 0 0;padding:0;font-size:14px;line-height:1.45;color:rgba(22,41,30,.8)}
.tier-more li{position:relative;padding-left:16px;margin-bottom:6px}
.tier-more li span{position:absolute;left:0;top:0;font-weight:700}
.tier-more .tier-cons{color:rgba(22,41,30,.65)}
.tier-ways{margin:12px 0 0;border-top:1px solid rgba(22,41,30,.1)}
.tier-ways div{display:grid;grid-template-columns:1fr auto;padding:8px 0;border-bottom:1px solid rgba(22,41,30,.1);font-size:14px}
.tier-ways span{font-weight:600}
.tier-ways b{color:#8A6B2E}
.tier-ways small{grid-column:1/-1;font-size:12px;color:rgba(22,41,30,.5)}

.tier-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.tier-link{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#16291E;text-decoration:none;
  border-bottom:1px solid #C9A861;padding-bottom:2px}