/* =========================================================
   VARAMALA — light, one screen: photo left, steps right
   ========================================================= */
.varamala {
  --vm-ink: #0f2a20;
  --vm-muted: #6a655d;
  --vm-gold: #b98a4a;
  --vm-green: #0f3a2a;
  position: relative; z-index: 2; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(40px, 6vh, 72px) 0;
  color: var(--vm-ink);
  background:
    radial-gradient(ellipse 45% 60% at 70% 20%, rgba(255, 240, 214, .8), transparent 70%),
    linear-gradient(180deg, #fbf6ee 0%, #f7efe3 100%);
}

/* photo: the left part of img/varamala.webp (x 0–985 of 1810), fading into the page */
.vm-photo {
  position: absolute; left: 0; top: 0; z-index: 0;
  height: 100%; aspect-ratio: 985 / 869;
  max-width: 60vw;
  background: url("../img/varamala.webp") 0 50% / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
  transform-origin: 40% 50%;
  will-change: transform;
}

/* gold line-art sprig, far right */
.vm-sprig { position: absolute; right: 0; bottom: 0; z-index: 0; height: 78%; width: auto; opacity: .85; pointer-events: none; }

.vm-wrap { position: relative; z-index: 1; width: min(1640px, 100%); margin-inline: auto; padding-inline: clamp(16px, 3vw, 56px); display: flex; justify-content: flex-end; }
.varamala .vm-copy { width: min(640px, 44%); margin-right: clamp(0px, 4vw, 90px); }

.varamala .eyebrow { color: #a8813f; font-weight: 800; letter-spacing: .28em; margin-bottom: clamp(10px, 1.8vh, 18px); }
.varamala .eyebrow::before { width: 40px; opacity: 1; background: var(--vm-gold); }
.varamala h2 {
  margin: 0;
  color: var(--vm-ink);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, min(3.4vw, 6.6vh), 3.7rem);
  line-height: 1.07; letter-spacing: -.02em;
}
.varamala h2 em { color: #9c6f28; }
.varamala h2 em .w-i { background: linear-gradient(180deg, #c99a4e 0%, #a8742c 55%, #7d501c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.varamala .vm-lede {
  color: var(--vm-muted);
  font-family: var(--sans);
  font-size: clamp(.9rem, min(1.05vw, 2vh), 1.02rem); line-height: 1.6;
  max-width: 560px;
  margin: clamp(10px, 1.8vh, 18px) 0 clamp(16px, 3vh, 30px);
}

/* timeline of four */
.varamala .vm-steps { position: relative; list-style: none; display: grid; gap: clamp(8px, 1.6vh, 16px); margin: 0 0 clamp(18px, 3.4vh, 32px); }
.varamala .vm-steps::before { content: ""; position: absolute; left: 29px; top: 30px; bottom: 30px; width: 1.5px; background: linear-gradient(180deg, var(--vm-gold), rgba(185, 138, 74, .35)); }
.varamala .vm-steps li {
  position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: center;
  padding: 0; border: 0; border-radius: 0; background: none;
}
.varamala .vm-steps li:hover { background: none; transform: none; }
.varamala .vm-steps li > .vm-icon {
  position: relative; z-index: 1;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #24684a, #0b3223 75%);
  box-shadow: 0 0 0 3px #fbf6ee, 0 0 0 4.5px rgba(185, 138, 74, .55), 0 12px 24px -10px rgba(10, 50, 30, .6);
  transition: transform .5s var(--ease);
}
.vm-icon svg { width: 24px; height: 24px; fill: none; stroke: #f2e3c2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vm-card {
  display: grid; grid-template-columns: clamp(40px, 3.4vw, 56px) 1fr; gap: 12px; align-items: center;
  padding: clamp(10px, 1.6vh, 16px) clamp(16px, 1.8vw, 26px);
  border-radius: 14px;
  background: rgba(255, 253, 249, .78);
  border: 1px solid rgba(185, 138, 74, .14);
  box-shadow: 0 16px 34px -26px rgba(70, 48, 16, .45);
  backdrop-filter: blur(6px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.varamala .vm-steps li:hover .vm-card { transform: translateX(6px); background: #fffdf9; box-shadow: 0 22px 40px -24px rgba(70, 48, 16, .5); }
.varamala .vm-steps li:hover .vm-icon { transform: scale(1.06); }
.vm-no { font-family: var(--serif); font-weight: 500; font-size: clamp(1.2rem, 1.6vw, 1.5rem); color: var(--vm-gold); }
.vm-card strong { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.25; color: var(--vm-ink); }
.vm-card p { margin-top: 3px; font-family: var(--sans); font-size: clamp(.82rem, .9vw, .9rem); line-height: 1.5; color: var(--vm-muted); }

/* buttons */
.varamala .vm-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-vm-solid { background: var(--vm-green); color: #fff; box-shadow: 0 14px 30px -14px rgba(10, 50, 30, .7); padding: 1.05em 1.9em; }
.btn-vm-solid::before { background: linear-gradient(180deg, #d8ad63, #b8863c); }
.btn-vm-outline { color: #7a5520; border: 1.5px solid #c9a063; background: rgba(255, 252, 246, .6); padding: 1.05em 1.9em; }
.btn-vm-outline::before { background: var(--vm-green); }
.btn-vm-outline:hover { color: #fff; }

/* short screens: tighter cards */
@media (max-height: 760px) and (min-width: 981px) {
  .vm-card p { font-size: .8rem; }
  .varamala .vm-lede { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* tablet & phone: photo on top, copy below */
@media (max-width: 980px) {
  .varamala { min-height: 0; flex-direction: column; padding-top: 0; }
  .vm-photo { position: relative; width: 100%; max-width: none; height: auto; aspect-ratio: 985 / 760; background-size: auto 114%;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .vm-wrap { justify-content: flex-start; margin-top: -30px; }
  .varamala .vm-copy { width: 100%; margin: 0; }
  .vm-sprig { height: 40%; opacity: .4; }
}
@media (max-width: 560px) {
  .varamala .vm-steps li { grid-template-columns: 48px 1fr; gap: 12px; }
  .varamala .vm-steps li > .vm-icon { width: 48px; height: 48px; }
  .vm-icon svg { width: 20px; height: 20px; }
  .varamala .vm-steps::before { left: 23px; }
  .vm-card { grid-template-columns: 1fr; gap: 2px; }
  .varamala .vm-ctas .btn { flex: 1 1 100%; }
}