.hop-sv-wrap{width:100%;font-family:DM Sans,sans-serif;}
.hop-sv-wrap .material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── Header ── */
.hop-sv-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:72px;position:relative;
}
.hop-sv-micro{
  position:absolute;top:0;left:0;
  font-family:DM Sans,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;color:#705a46;
}
.hop-sv-left{width:58%;padding-top:24px;}
.hop-sv-eyebrow{
  display:block;font-family:DM Sans,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:0.35em;text-transform:uppercase;
  color:#4C5A50;margin-bottom:18px;
}
.hop-sv-title{
  font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:clamp(38px,5.2vw,66px);line-height:1.04;
  color:#1A2621;margin:0;
}
.hop-sv-title em{font-style:italic;}
.hop-sv-right{
  width:36%;text-align:right;padding-bottom:6px;
  display:flex;flex-direction:column;align-items:flex-end;
}
.hop-sv-rule{width:36px;height:1px;background:rgba(24,40,30,0.16);margin-bottom:14px;}
.hop-sv-desc{
  font-size:14px;line-height:1.75;
  color:#5F665F;margin:0;
}

/* ── Standard 3-col grid ── */
.hop-sv-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* ── Card ── */
.hop-sv-card{
  background:#FFFFFF;border:1px solid #F7F3EE;
  border-radius:28px;
  padding:40px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform 0.4s ease,box-shadow 0.4s ease;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.hop-sv-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

/* Oversized faint index number (editorial micro-detail) */
.hop-sv-card-bg-num{
  position:absolute;top:-6px;right:16px;
  font-family:'DM Sans',sans-serif;font-size:128px;font-weight:400;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(24,40,30,0.08);text-stroke:1px rgba(24,40,30,0.08);pointer-events:none;user-select:none;
}

/* Icon */
.hop-sv-wrap .hop-sv-icon{
  font-size:40px;color:#C5A059;
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 40;
  display:block;line-height:1;margin-bottom:28px;
}

/* Card title */
.hop-sv-card-title{
  font-family:'DM Sans',sans-serif;font-weight:400;
  font-size:26px;line-height:1.15;
  color:#1A2621;margin:0 0 14px;
}

/* Description */
.hop-sv-card-desc{
  font-size:14px;line-height:1.72;color:#5F665F;
  margin:0 0 24px;flex-grow:1;
}

/* Bullet list */
.hop-sv-bullets{
  list-style:none;padding:0;margin:0 0 32px;
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid rgba(24,40,30,0.07);padding-top:20px;
}
.hop-sv-bullet{
  font-size:12px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:#705a46;
}

/* CTA */
.hop-sv-cta{display:flex;align-items:center;margin-top:auto;}
.hop-sv-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:DM Sans,sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.05em;color:#1A2621;
  text-decoration:none;text-transform:uppercase;
  transition:color 0.3s ease;
}
.hop-sv-wrap .hop-sv-btn span {
  font-size:16px;
  display:inline-block;
  width:auto;
  transition:transform 0.3s ease;
}
.hop-sv-card:hover .hop-sv-btn span {
  transform:translateX(4px);
}
.hop-sv-explore{
  text-align:center;font-size:12px;font-weight:700;
  letter-spacing:0.04em;color:#1A2621;
}

/* Responsive */
@media(max-width:1024px){
  .hop-sv-header{flex-direction:column;gap:28px;}
  .hop-sv-left,.hop-sv-right{width:100%;}
  .hop-sv-right{text-align:left;align-items:flex-start;}
  .hop-sv-grid{grid-template-columns:1fr;gap:20px;}
}
@media(max-width:600px){
  .hop-sv-title{font-size:34px;}
  .hop-sv-card{padding:36px 28px;}
}
