/* One continuous drawing-to-villa scene, with no enclosing panel. */
.hero { grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); min-height: max(780px, 100svh); }
.hero-text { padding: 120px clamp(28px, 4.5vw, 76px) 80px; z-index: 3; background: transparent; }
.hero-heading { font-size: clamp(56px, 5.1vw, 86px); }
#hero-media-mount { position: relative; align-self: stretch; min-height: 700px; margin: 64px -24px 16px -48px; overflow: hidden; isolation: isolate; background: transparent; border: 0; user-select: none; -webkit-user-select: none; }
#hero-media-mount:focus-within { outline: none; }
.villa-sketch, .villa-poster, .villa-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.villa-sketch { object-fit: contain; opacity: 1; clip-path: inset(0 100% 0 0); animation: villa-sketch-fallback 18s linear both; transition: opacity .65s ease; }
@keyframes villa-sketch-fallback { to { clip-path: inset(0 0 0 0); } }
.villa-sketch { pointer-events: none; }
.villa-poster { object-fit: contain; opacity: 0; }
.villa-poster img { object-fit: contain; }
#hero-media-mount .villa-poster[hidden] { display: none; }
.villa-canvas { opacity: 0; touch-action: none; cursor: grab; outline: none; transition: opacity .65s ease; }
#hero-media-mount canvas.villa-canvas { pointer-events: auto; touch-action: none; }
.villa-canvas:active { cursor: grabbing; }
.villa-canvas:focus-visible { outline: 2px solid #87663d; outline-offset: -12px; border-radius: 4px; }
#hero-media-mount[data-hero-state="assembling"] .villa-canvas, #hero-media-mount[data-hero-state="complete"] .villa-canvas { opacity: 1; }
#hero-media-mount[data-hero-state="assembling"] .villa-sketch, #hero-media-mount[data-hero-state="complete"] .villa-sketch, #hero-media-mount[data-hero-state="unavailable"] .villa-sketch { opacity: 0; }
#hero-media-mount[data-hero-state="unavailable"] .villa-poster { opacity: 1; }
.villa-hint { position: absolute; z-index: 3; bottom: 28px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: #56534b; font: 400 12px/1.5 Outfit, sans-serif; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.villa-hint svg { width: 16px; height: 16px; }
#hero-media-mount[data-hero-state="complete"] .villa-hint { opacity: 1; }
@media (min-width: 1600px) { #hero-media-mount { min-height: 840px; } }
@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-text { padding: 120px 40px 40px; }
    #hero-media-mount { margin: 0 -12px 40px; width: auto; height: 65vw; min-height: 340px; max-height: 650px; }
}
@media (max-width: 600px) {
    .hero { padding: 104px 24px 40px; gap: 20px; grid-template-areas: "tag" "heading" "villa" "description" "cta"; }
    .hero-text { display: contents; }
    .hero-tag { grid-area: tag; margin: 0; }
    .hero-heading { grid-area: heading; margin: 0; font-size: 48px; max-width: 340px; }
    .hero-heading br { display: none; }
    .hero-sub { grid-area: description; margin: 0; }
    .hero-cta { grid-area: cta; margin: 0; }
    #hero-media-mount { grid-area: villa; margin: 0 -24px; height: 100vw; min-height: 320px; max-height: 440px; }
    .villa-hint { bottom: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .villa-sketch, .villa-canvas, .villa-hint { transition: none; } .villa-sketch { animation: none; clip-path: none; } }