.hop-ap-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  width:100%;
}

/* ── Left: arch image column with Double-Bezel ── */
.hop-ap-img{
  position:relative;
  padding-bottom:56px;
}
.hop-ap-bezel-outer{
  padding:8px;
  background:rgba(197,160,89,0.08);
  border-radius:50% 50% 18px 18px / 24% 24% 18px 18px;
  border:1px solid rgba(197,160,89,0.18);
  box-shadow:0 32px 80px rgba(24,40,30,0.10);
}
.hop-ap-arch{
  position:relative;
  aspect-ratio:4/5;
  border-radius:50% 50% 14px 14px / 26% 26% 14px 14px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),
             0 12px 36px rgba(24,40,30,0.10);
}
.hop-ap-arch > img,
.elementor .hop-ap-arch > img{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
}
.hop-ap-arch::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 58%,rgba(24,40,30,0.14) 100%);
  pointer-events:none;
}

/* Floating card — gold accent rule, overflows right edge */
.hop-ap-card{
  position:absolute;
  bottom:-28px;right:-28px;
  background:#1A2621;
  padding:30px 34px;
  border-radius:24px;
  width:76%;max-width:300px;
  z-index:10;
  box-shadow:0 24px 56px rgba(10,31,20,0.32);
}
.hop-ap-card-rule{
  width:32px;height:2px;
  background:#C5A059;
  margin-bottom:16px;
  opacity:0.85;
}
.hop-ap-card h4{
  font-family:'DM Sans',sans-serif;
  font-style:italic;font-weight:400;
  font-size:clamp(18px,1.5vw,22px);
  color:#FBF9F7;
  margin:0 0 10px;line-height:1.25;
}
.hop-ap-card p{
  font-family:DM Sans,sans-serif;
  font-size:13px;line-height:1.65;
  color:rgba(252,249,244,0.68);
  margin:0;
}

/* ── Right: text column ── */
.hop-ap-text{
  padding-left:8px;
}
.hop-ap-eyebrow{
  display:block;
  font-family:DM Sans,sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:#737873;margin-bottom:16px;
}
.hop-ap-title{
  font-family:'DM Sans',sans-serif;
  font-style:italic;font-weight:400;
  font-size:clamp(30px,3vw,48px);
  line-height:1.08;
  color:#1A2621;
  margin:0 0 40px;
}

/* Steps list with connecting line */
.hop-ap-steps{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  position:relative;
}
.hop-ap-steps::before{
  content:'';
  position:absolute;
  left:23px;top:48px;
  width:1px;
  height:calc(100% - 96px);
  background:linear-gradient(to bottom,rgba(24,40,30,0.14),rgba(24,40,30,0.03));
  pointer-events:none;
}
.hop-ap-step{
  display:flex;gap:24px;
  align-items:flex-start;
  padding:18px 0;
}
.hop-ap-num{
  flex-shrink:0;
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid rgba(24,40,30,0.2);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;
  font-style:italic;font-size:20px;
  color:rgba(24,40,30,0.6);
  background:#f4f1ea;
  position:relative;z-index:1;
  transition:background 0.28s ease,border-color 0.28s ease,color 0.28s ease;
}
.hop-ap-step:hover .hop-ap-num{
  background:#1A2621;
  border-color:#1A2621;
  color:#FBF9F7;
}
.hop-ap-body{
  padding-top:10px;flex:1;
}
.hop-ap-step-title{
  font-family:DM Sans,sans-serif;
  font-weight:700;font-size:20px;
  color:#1A2621;
  margin:0 0 6px;line-height:1.3;
}
.hop-ap-step-desc{
  font-family:DM Sans,sans-serif;
  font-size:16px;line-height:1.72;
  color:#737873;margin:0;
}

@media(max-width:1024px){
  .hop-ap-grid{grid-template-columns:1fr;gap:0;}
  .hop-ap-img{padding-bottom:0;margin-bottom:68px;}
  .hop-ap-card{
    position:relative;
    bottom:auto;right:auto;
    width:100%;max-width:100%;
    border-radius:16px;
    margin-top:20px;
  }
  .hop-ap-arch{border-radius:50% 50% 0 0 / 100px 100px 0 0;}
  .hop-ap-text{padding-left:0;}
}
@media(max-width:600px){
  .hop-ap-title{font-size:28px;}
  .hop-ap-arch{border-radius:50% 50% 0 0 / 64px 64px 0 0;}
}