:root{
  --ink:#1a1a1a; --ink-2:#4a4a4a; --ink-3:#8a8a8a;
  --paper:#f7f5f0; --paper-2:#efeae0; --paper-3:#e0d8c8;
  --cinnabar:#b83a2a; --cinnabar-h:#9a2e20; --bamboo:#4a7a6a; --gold:#b8956a;
  --radius:4px; --radius-lg:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Noto Sans SC',-apple-system,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
@media(min-width:1024px){.wrap{padding:0 48px}}

/* Header */
.header{padding:80px 0 20px;text-align:center}
.eyebrow{font-family:'Noto Serif SC',serif;font-size:12px;font-weight:600;color:var(--cinnabar);text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.section-title{font-family:'Noto Serif SC',serif;font-size:clamp(32px,5vw,52px);font-weight:600;letter-spacing:.04em;line-height:1.3;margin-bottom:16px}
.divider{width:48px;height:2px;background:var(--cinnabar);margin:20px auto}
.section-desc{font-size:16px;color:var(--ink-2);max-width:640px;margin:0 auto;line-height:1.8}

/* Card grid */
.grid{display:grid;gap:24px;padding:48px 0 60px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}

/* Card */
.card{
  background:#fff;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 4px 20px rgba(26,26,26,.08);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
  cursor:pointer;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(26,26,26,.15)}

/* Image area — landscape, image fills completely */
.card-img{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
}
.card-img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.card:hover .card-img img{transform:scale(1.03)}

/* Price tag — top right */
.price-tag{
  position:absolute;top:16px;right:16px;
  background:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:14px;font-weight:600;
  color:var(--bamboo);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  z-index:2;
  white-space:nowrap;
}

/* Bottom gradient overlay with title */
.card-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:50px 20px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 60%, transparent 100%);
  z-index:1;
}
.card-title{
  font-family:'Noto Serif SC',serif;
  font-size:20px;font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}

/* Text area below image */
.card-body{padding:20px 22px 24px}
.card-desc{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.65;
}

/* CTA card */
.cta-card{
  border-radius:var(--radius-lg);
  background:var(--bamboo);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:40px 32px;
  aspect-ratio:auto;
  min-height:300px;
  box-shadow:0 4px 20px rgba(26,26,26,.08);
}
.cta-card h3{
  font-family:'Noto Serif SC',serif;
  font-size:24px;font-weight:600;
  color:#fff;margin-bottom:8px;
}
.cta-card p{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:24px;line-height:1.6}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 32px;border-radius:999px;
  border:1.5px solid #fff;color:#fff;
  font-size:15px;font-weight:500;
  transition:all .3s;background:transparent;cursor:pointer;
}
.cta-btn:hover{background:#fff;color:var(--bamboo)}