/* Shared editorial finishing for the three fictional demonstration sites. */
.demo-site img { max-width: 100%; }
.demo-site a { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.demo-site a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.demo-site a:active { transform: translateY(1px); }
.demo-site .demo-rise { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--demo-delay, 0ms); }
.demo-site.demo-motion-ready .demo-rise:not(.demo-visible) { opacity: 0; transform: translateY(28px); }
.demo-site .demo-rise.demo-visible { opacity: 1; transform: none; }
.demo-site .demo-photo { overflow: hidden; }
.demo-site .demo-photo img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
@media (hover:hover) { .demo-site .demo-photo:hover img { transform: scale(1.035); } }
@media (prefers-reduced-motion:reduce) {
  .demo-site, .demo-site * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .demo-site.demo-motion-ready .demo-rise:not(.demo-visible) { opacity: 1; transform: none; }
}
/* Apex: keep the uploaded hero composition, but stop long headline lines crossing into the photograph. */
.demo-apex .hero-copy { min-width: 0; }
.demo-apex .hero h1 { max-width: 100%; font-size: clamp(46px,5vw,76px); overflow-wrap: normal; }
.demo-apex .service, .demo-apex .review { border-color: color-mix(in srgb,var(--navy) 10%,transparent); box-shadow: 0 8px 32px rgba(3,46,75,.045); }
.demo-apex .service { min-height: 205px; }
.demo-apex .service:hover, .demo-apex .service:focus-visible { border-color: var(--blue); box-shadow: 0 20px 48px rgba(3,46,75,.12); }
.demo-apex .review { min-height: 0; }
.demo-apex .review:hover { box-shadow: 0 20px 48px rgba(3,46,75,.11); }
@media (max-width:920px) { .demo-apex .hero h1 { max-width: 12ch; } }
/* Salon: preserve the quiet editorial identity while tightening vast blank gaps. */
.demo-salon .hero { min-height: min(76svh,760px); }
.demo-salon .hero img { min-height: min(76svh,760px); }
.demo-salon .section { padding-top: clamp(70px,7vw,105px); padding-bottom: clamp(70px,7vw,105px); }
.demo-salon .gallery img { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.demo-salon .gallery img:hover { transform: scale(1.015); }
.demo-salon .price { transition: padding-left .25s cubic-bezier(.16,1,.3,1), background-color .25s ease; }
.demo-salon .price:hover { padding-left: 10px; background: color-mix(in srgb,var(--sage) 6%,transparent); }
.demo-salon .button:hover { background: var(--sage); color: var(--chalk); transform: translateY(-2px); }
.demo-salon .hero-copy { min-width: 0; }
@media (max-width:760px) { .demo-salon .hero img { min-height: 370px; } }
/* Cafe: keep the playful menu and photography, with lighter separators and responsive type. */
.demo-cafe .hero { min-height: min(78svh,760px); }
.demo-cafe .hero img { min-height: min(78svh,760px); }
.demo-cafe h1 { font-size: clamp(52px,7vw,100px); }
.demo-cafe .today, .demo-cafe .visit { padding-top: clamp(70px,7vw,105px); padding-bottom: clamp(70px,7vw,105px); }
.demo-cafe .dish { transition: padding-left .25s cubic-bezier(.16,1,.3,1), background-color .25s ease; }
.demo-cafe .dish:hover { padding-left: 10px; background: color-mix(in srgb,var(--yellow) 9%,transparent); }
.demo-cafe .order:hover { background: var(--green); color: var(--cream); transform: translateY(-2px); }
.demo-cafe .gallery { overflow: hidden; gap: 8px; }
.demo-cafe .gallery img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
.demo-cafe .gallery img:hover { transform: scale(1.02); }
@media (max-width:760px) { .demo-cafe .hero img { min-height: 370px; } .demo-cafe .hero { min-height: auto; } }