.site-shell{max-width:1280px;width:calc(100% - 64px)}
.variant-image .option-hero{position:relative;isolation:isolate;overflow:hidden;background:#eeece4;border-radius:24px;margin:32px 0 40px;padding:48px 64px 32px;min-height:0;box-sizing:border-box}
.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;z-index:-1}
.image-copy{max-width:650px}.image-copy .eyebrow{font-size:11px;letter-spacing:.13em;margin:0 0 28px}
.image-copy h1{font:clamp(44px,4.8vw,64px)/1.06 var(--serif);letter-spacing:-.035em;margin:0 0 28px;hyphens:none;-webkit-hyphens:none;word-break:normal;overflow-wrap:normal}.image-copy h1 em{font-style:normal;color:#315b46}
.image-copy .lead{max-width:565px;font-size:17px;line-height:1.75;margin:0}.image-copy .actions{display:flex;align-items:center;gap:28px;margin-top:32px}.image-copy .hero-note{font-size:12px;margin-top:20px;max-width:510px}
.option-next .eyebrow{font-size:11px}.option-next h2{font:40px/1.15 var(--serif)}
@media(max-width:850px){.variant-image .option-hero{padding:40px}.image-copy{max-width:540px}.hero-background{opacity:.45}.image-copy h1{font-size:48px}}

.cta-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.image-copy{position:relative;z-index:1}

.chat-bubble{transform-box:fill-box;transform-origin:center;transition:transform .35s ease}
.option-hero:has(.button:hover) .chat-bubble,.option-hero:has(.button:focus-visible) .chat-bubble{animation:chat-float 1.8s ease-in-out infinite}
.option-hero:has(.button:hover) .chat-bubble circle,.option-hero:has(.button:focus-visible) .chat-bubble circle{animation:chat-dot 1.1s ease-in-out infinite}
.chat-bubble circle:nth-of-type(2){animation-delay:.15s!important}.chat-bubble circle:nth-of-type(3){animation-delay:.3s!important}
@keyframes chat-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes chat-dot{0%,65%,100%{transform:translateY(0);opacity:.65}30%{transform:translateY(-4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.chat-bubble,.chat-bubble circle{animation:none!important;transition:none!important}}


.line-in,.line-out{stroke-dasharray:1;stroke-dashoffset:1}
.option-hero:has(.button:is(:hover,:focus-visible)) .line-in{animation:grow-line .6s ease-in-out both}
.option-hero:has(.button:is(:hover,:focus-visible)) .draw-mark{stroke-dasharray:1;animation:grow-line .7s .55s ease-in-out both}
.option-hero:has(.button:is(:hover,:focus-visible)) .line-out{animation:grow-line .65s 1.25s ease-in-out both}
.option-hero:has(.button:is(:hover,:focus-visible)) .mark-dot{animation:show-dot .2s 1.18s both}
.option-hero:has(.button:is(:hover,:focus-visible)) .chat-bubble{animation-delay:1.8s}
@keyframes grow-line{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes show-dot{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.line-in,.line-out,.draw-mark,.mark-dot{animation:none!important;stroke-dashoffset:0!important}}


.option-hero:has(.button:is(:hover,:focus-visible)) .line-in{animation:draw-loop 5.5s linear infinite both}
.option-hero:has(.button:is(:hover,:focus-visible)) .chat-bubble{animation-delay:2.9s}


@keyframes draw-loop{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}


@media(max-width:720px){
.site-shell{width:calc(100% - 32px)}
.variant-image .option-hero{padding:28px 20px 228px;margin:20px 0 32px;border-radius:18px}
.image-copy{max-width:none}.image-copy .eyebrow{font-size:9px;line-height:1.6;margin-bottom:20px;letter-spacing:.09em}
.image-copy h1{font-size:35px;line-height:1.08;margin-bottom:22px;letter-spacing:-.035em}
.image-copy .lead{font-size:14px;line-height:1.65}
.image-copy .actions{display:flex;gap:16px;margin-top:24px;align-items:center}
.image-copy .actions .button{font-size:12px;padding:13px 14px;white-space:nowrap}
.image-copy .actions .text-link{font-size:11px;gap:5px;white-space:nowrap}
.image-copy .hero-note{font-size:10px;line-height:1.6;margin-top:17px}
.variant-image .hero-background{inset:auto 8px 0;width:calc(100% - 16px);height:208px;object-fit:contain;object-position:center}
.option-next h2{font-size:30px}
}


@media(max-width:720px){
.site-shell{width:calc(100% - 32px)}
.variant-image .option-hero{padding:28px 22px 200px;margin:20px 0 32px;border-radius:18px}
.image-copy{max-width:none}.image-copy .eyebrow{font-size:9px;line-height:1.6;letter-spacing:.1em;margin-bottom:20px}
.image-copy h1{font-size:36px;line-height:1.08;letter-spacing:-.03em;margin-bottom:20px}
.image-copy .lead{font-size:14px;line-height:1.7}
.image-copy .actions{display:grid!important;grid-template-columns:1fr;gap:4px;margin-top:24px}.image-copy .actions .button{width:100%;text-align:center}.image-copy .actions .text-link{justify-content:center;min-height:36px}.image-copy .button{font-size:13px;padding:13px 16px}.image-copy .text-link{font-size:12px;gap:6px}
.image-copy .hero-note{font-size:10px;line-height:1.6;margin-top:16px;align-items:flex-start}.image-copy .hero-note:before{flex-shrink:0;margin-top:5px}
.hero-background{inset:auto 0 18px;height:220px;width:100%;object-fit:contain;opacity:1}
.option-next h2{font-size:30px}.option-hero .chat-bubble{animation:chat-float 3.5s ease-in-out infinite!important}.option-hero .chat-bubble circle{animation:chat-dot 1.4s ease-in-out infinite!important}
}
@media(max-width:360px){.image-copy h1{font-size:32px}.variant-image .option-hero{padding-left:18px;padding-right:18px}.image-copy .actions{gap:12px}.image-copy .button{padding:12px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.option-hero .chat-bubble,.option-hero .chat-bubble circle{animation:none!important}}

@media(max-width:720px){.variant-image .option-hero{padding-bottom:260px}.variant-image .hero-background{inset:auto 0 14px;width:100%;height:230px;object-fit:contain;object-position:center top}.chat-position{display:none}}
@media(max-width:720px){
.variant-image .option-hero{padding-bottom:28px}
.variant-image .hero-background{inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;opacity:.25}
.image-copy{z-index:1}
}
/* A continuous stroke for each visual line of the emphasized phrase. */
.image-copy h1{position:relative}
.hero-underline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-underline path{fill:none;stroke:#87a176;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:hero-underline-draw 1.7s linear .65s both}
@keyframes hero-underline-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hero-underline path{animation:none}}