/* =========================================================
   CUSTOM ORDERS — light banner card, photo on the right
   ========================================================= */
.cta {
  --ct-ink: #0f2a20;
  --ct-muted: #6a655d;
  --ct-gold: #b98a4a;
  --ct-green: #0f3a2a;
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vh, 80px) clamp(12px, 2.8vw, 56px);
  background: linear-gradient(180deg, #f7f1ea 0%, #f6efe6 100%);
}

/* the card keeps the photo's proportions (1760 × 711) on desktop so the crop lines up */
.cta .cta-inner {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, 1760px, calc((100vh - 60px) * 2.4754));
  aspect-ratio: 1760 / 711;
  display: flex; align-items: center; justify-items: initial;
  padding: 0 clamp(24px, 6.4vw, 120px);
  text-align: left; color: var(--ct-ink);
  border-radius: clamp(22px, 2.4vw, 40px);
  background:
    radial-gradient(ellipse 60% 80% at 25% 20%, rgba(255, 246, 228, .95), transparent 70%),
    linear-gradient(120deg, #faf3e8 0%, #f5ebdc 60%, #efe3d1 100%);
  border: 1px solid rgba(185, 138, 74, .16);
  box-shadow: 0 40px 80px -50px rgba(70, 48, 16, .45);
}

/* photo: x 960–1815, y 66–777 of img/cta.webp (1869 × 842) */
.cta-photo {
  position: absolute; z-index: -1; top: 0; right: 0; height: 100%;
  aspect-ratio: 855 / 711;
  background: url("../img/cta.webp") 94.675% 50.382% / 218.6% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
  transform-origin: 70% 50%;
}
.cta-sprig { position: absolute; z-index: 0; left: 50%; top: 13%; width: clamp(90px, 10vw, 190px); height: auto; pointer-events: none; }
.cta-swoosh { position: absolute; z-index: 0; left: 0; bottom: 4%; width: 46%; height: 30%; overflow: visible; pointer-events: none; }
.cta-swoosh .cta-swoosh-line { stroke-dasharray: 1; }

.cta-copy { position: relative; z-index: 1; max-width: min(46%, 760px); }
.cta .eyebrow { color: #9c6f28; font-weight: 800; letter-spacing: .28em; margin-bottom: clamp(10px, 2vh, 22px); }
.cta .eyebrow::before { width: 40px; opacity: 1; background: var(--ct-gold); }
.cta h2 { margin: 0; color: var(--ct-ink); font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, min(3.9vw, 7vh), 4.2rem); line-height: 1.08; letter-spacing: -.025em; }
.cta h2 em .w-i { background: linear-gradient(180deg, #c99a4e 0%, #a8742c 55%, #7d501c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta .cta-sub { max-width: 560px; margin: clamp(12px, 2.4vh, 24px) 0 clamp(18px, 3.4vh, 36px); color: var(--ct-muted); font-size: clamp(.92rem, min(1.15vw, 2.2vh), 1.12rem); line-height: 1.6; }
.cta .cta-actions { justify-content: flex-start; gap: clamp(10px, 1.2vw, 18px); }
.btn-cta-wa { background: var(--ct-green); color: #fff; padding: 1.05em 1.9em; box-shadow: 0 14px 30px -14px rgba(10, 50, 30, .7); }
.btn-cta-wa::before { background: #1c5c40; }
.btn-cta-wa svg { width: 22px; height: 22px; }
.btn-cta-ig { color: #7a5520; border: 1.5px solid #c9a063; background: rgba(255, 252, 246, .6); padding: 1.05em 1.9em; }
.btn-cta-ig::before { background: linear-gradient(180deg, #d8ad63, #b8863c); }
.btn-cta-ig:hover { color: #fff; }
.btn-cta-ig svg { width: 22px; height: 22px; stroke-width: 1.6; }

/* tablet & phone: photo on top, copy underneath */
@media (max-width: 900px) {
  .cta .cta-inner { aspect-ratio: auto; width: 100%; flex-direction: column; align-items: stretch; padding: 0 0 clamp(26px, 5vw, 40px); }
  .cta-photo { position: relative; width: 100%; height: auto; margin-bottom: -40px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .cta-copy { max-width: none; padding: 0 clamp(20px, 5vw, 40px); }
  .cta-sprig { left: auto; right: 4%; top: 46%; opacity: .5; }
  .cta-swoosh { width: 80%; opacity: .5; }
}
@media (max-width: 560px) {
  .cta .cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}