/* Prototype-04: preserve the accepted desktop composition; reflow only as space runs out. */
#studio .paint-stroke { background-color: #5e6e99; }
#studio .intro-visual > img { transform: scale(1.15); transform-origin: center; }
.hero-copy, .intro-copy, .intro-visual, .gallery-copy, .gallery-image,
.contact-copy, .contact-art, .p2-offer-head > *, .p2-product > *,
.alo-layout > *, .alo-extras dt, .alo-extras dd { min-width: 0; }
.hero-actions { flex-wrap: wrap; row-gap: 14px; }
.header-order, .hero-actions > a { flex-shrink: 0; }
.hero-note { max-width: calc(100% - 24px); }
.p2-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p2-product-price { flex-wrap: wrap; }
.p2-product-order .p2-button { max-width: 100%; }
.p2-product-copy h3, .next-service h3, .contact-label, .alo-info p, .alo-info li { overflow-wrap: break-word; }
.alo-extras dd { overflow-wrap: anywhere; }

/* Intermediate widths: retain the two-column sections with breathing room for text. */
@media (min-width: 761px) and (max-width: 1000px) {
  .site-header { gap: 18px; }
  .site-header .brand { flex: 0 1 150px; min-width: 100px; }
  .site-header nav { gap: 18px; }
  .intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw; }
  .gallery { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4vw; }
  .intro h2, .gallery h2 { font-size: clamp(42px, 6.2vw, 62px); line-height: .95; }
  .contact { grid-template-columns: minmax(0, .7fr) minmax(0, 1.1fr); column-gap: 5vw; }
  .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* At cramped desktop/zoomed widths, reserve real space for Hye instead of overlapping copy. */
@media (min-width: 761px) and (max-width: 900px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 128px 7vw 0; }
  .hero-copy { align-self: auto; width: 100%; }
  .hero h1 { font-size: clamp(60px, 8.5vw, 76px); line-height: .88; }
  .hero-intro { max-width: 42ch; }
  .hero-art { position: relative; top: auto; bottom: auto; right: auto; width: 100%; height: auto; aspect-ratio: 1.3; margin: 28px 0 0; align-self: center; }
  .hero-art .orb-blue { width: 60%; height: auto; aspect-ratio: 1; right: 10%; bottom: 3%; }
  .hero-art .orb-cream { width: 26%; height: auto; aspect-ratio: 1; left: 9%; top: 4%; }
  .hero-note.note-top { top: 0; right: 3%; }
  .hero-note.note-bottom { bottom: 2%; left: 0; }
  .hero > .ribbon { position: relative; left: auto; right: auto; bottom: auto; width: calc(100% + 14vw); margin: 18px -7vw 0; }
  .p2-offer-head { flex-wrap: wrap; gap: 20px; }
  .p2-offer-note { max-width: 42ch; }
  .p2-product { grid-template-columns: 1fr; }
  .p2-product-copy { padding: 32px; }
  .p2-product-order { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .p2-product-art { padding: 45px 35px 30px; }
}

/* Keep extreme zoom-out from stretching the editorial content without a bound. */
@media (min-width: 1920px) {
  .intro, .gallery, .contact, footer { padding-inline: max(8vw, calc((100% - 1600px) / 2)); }
  .hero-art { width: min(65%, 1248px); right: max(-5%, calc((100% - 2112px) / 2)); }
}

/* Existing mobile composition is retained, with tighter text and button safeguards. */
@media (max-width: 760px) {
  .p2-product { grid-template-columns: 1fr; }
  .p2-product-price { row-gap: 8px; }
  .hero-actions > a { flex-shrink: 1; max-width: 100%; }
  .hero-note { overflow-wrap: break-word; }
  .social-grid { grid-template-columns: 1fr; }
  .contact-art img, .contact-type { max-width: 100%; }
}
@media (max-width: 370px) {
  .hero h1 { font-size: clamp(36px, 14vw, 52px); }
  .p2-offer h2 { font-size: clamp(30px, 10vw, 38px); }
  .p2-product-copy { padding-inline: 20px; }
  .p2-product h3 { font-size: clamp(30px, 10vw, 38px); }
  .site-header { gap: 6px; }
  .header-order { min-width: 0; flex-shrink: 1; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
}

/* A single dialog scroll is safer than two small panes on short/zoomed screens. */
@media (max-width: 900px), (max-height: 620px) {
  .alo-dialog { width: min(760px, calc(100% - 24px)); height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
  .alo-layout { height: auto; grid-template-columns: 1fr; padding: 18px; gap: 12px; align-items: start; }
  .alo-close { position: sticky; top: 10px; right: auto; float: right; margin: 10px 10px -54px 0; }
  .alo-gallery { position: relative; top: auto; width: min(100%, 420px); justify-self: center; max-height: none; overflow: visible; border-radius: 18px; padding: 24px 18px; }
  .alo-gallery-heading { justify-content: center; padding-inline: 22px; }
  .alo-image-frame { width: 100%; max-width: 330px; margin: 20px auto 12px; }
  .alo-gallery-controls { max-width: 330px; margin-inline: auto; }
  .alo-info { height: auto; overflow: visible; padding: 22px 4px; }
  .alo-info > .alo-eyebrow { padding-right: 0; }
}
@media (max-width: 370px) {
  .alo-layout { padding: 12px; }
  .alo-gallery { padding-inline: 12px; }
  .alo-info h2 { font-size: 32px; }
  .alo-extras div { flex-wrap: wrap; gap: 2px 12px; }
  .alo-extras dd { text-align: left; }
}

/* Contact effects never alter padding, icon dimensions or layout positions. */
.social-grid a { transition: color .25s ease !important; }
.social-grid a:hover, .social-grid a:focus-visible { padding-left: 4px; }
.social-grid .contact-icon { transition: filter .3s ease !important; }
.social-grid a[href*="instagram.com"] { --contact-glow: drop-shadow(-2px 0 4px #fa6996b3) drop-shadow(2px 0 5px #ff9a52b3); }
.social-grid a[href*="tiktok.com"] { --contact-glow: drop-shadow(0 0 3px #7adfffcc) drop-shadow(0 0 7px #70d7ff99); }
.social-grid a[href*="facebook.com"] { --contact-glow: drop-shadow(0 0 3px #185bdbe6) drop-shadow(0 0 7px #165bc999); }
.social-grid a[href*="x.com"] { --contact-glow: drop-shadow(0 0 3px #7864e6d9) drop-shadow(0 0 7px #536bd1b3); }
.social-grid a:hover .contact-icon, .social-grid a:focus-visible .contact-icon { filter: brightness(1.15) var(--contact-glow, drop-shadow(0 0 5px #a59bff80)); }
.social-grid a.email { position: relative; isolation: isolate; }
/* Render rainbow light separately: stacked directional shadows biased the visual center. */
.social-grid a.email::before { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -2px; top: 50%; width: 36px; height: 36px; transform: translateY(-50%); border-radius: 50%; background: conic-gradient(#ff5353, #ff9e43, #ffe45c, #5cda82, #52d8ef, #6385ff, #bc6bf1, #ff5353); filter: blur(5px); opacity: 0; transition: opacity .3s ease !important; }
.social-grid a.email:hover::before, .social-grid a.email:focus-visible::before { opacity: .75; }
.social-grid a.email:hover .contact-icon, .social-grid a.email:focus-visible .contact-icon { filter: brightness(1.15); }
.social-grid a.email, .social-grid a.email:hover, .social-grid a.email:focus-visible { padding-left: 4px; transform: none; }
.social-grid a.email .contact-icon { transform: none; }
@media (max-width: 760px) { .social-grid a.email::before { width: 34px; height: 34px; } }
.social-grid a.email .contact-arrow { margin-left: auto; }
.contact-copy .button-lime { transition: filter .3s ease, box-shadow .3s ease !important; }
.contact-copy .button-lime:hover, .contact-copy .button-lime:focus-visible { transform: none; filter: brightness(1.08); box-shadow: 0 0 9px #17ff0080, 0 0 22px #17ff004d; }

/* A gentle invitation to open ALO, without moving or resizing the card. */
.p2-product { transition: box-shadow .3s ease !important; }
.p2-product:hover, .p2-product:focus-within { box-shadow: 0 0 0 1px #c4baff66, 0 0 22px #b6abfd26; }

/* Follow the sample change with a synchronized 450ms palette fade. */
.alo-gallery { transition: background-color .45s linear, color .45s linear !important; }
.alo-image-frame::before { transition: background-color .45s linear !important; }
.alo-gallery[data-sample="enen"] { background-color: #5e6e99; color: #fff8e7; }
.alo-gallery[data-sample="enen"] .alo-image-frame::before { background-color: #a3a8e3; }

/* Slow availability glow; the badge and its text remain stationary and readable. */
.p2-open { animation: p4-open-glow 3.2s ease-in-out infinite !important; }
@keyframes p4-open-glow {
  0%, 100% { box-shadow: 0 0 2px #17ff0026, 0 0 5px #17ff0014; }
  50% { box-shadow: 0 0 8px #17ff00a6, 0 0 18px #17ff0066; }
}