/* Melaaura Home — Indoor/Outdoor band */
.mh-io{ padding:clamp(20px,3vw,40px) clamp(20px,5vw,100px) clamp(40px,5vw,60px); }
.mh-io__wrap{ max-width:1360px; margin:0 auto; }
.mh-io__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(16px,2vw,28px); }
.mh-io__card{ position:relative; aspect-ratio:1/1.04; overflow:hidden; border-radius:var(--mh-io-radius,16px); text-decoration:none; display:block; background:#EFEAE1; }
.mh-io__img{ width:100%; height:100%; object-fit:cover; transition:transform 1.8s cubic-bezier(.22,.61,.36,1); }
.mh-io__card:hover .mh-io__img{ transform:scale(1.06); }
.mh-io__scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,0.5) 0%, rgba(10,8,6,0) 50%); transition:background .6s ease; }
.mh-io__card:hover .mh-io__scrim{ background:linear-gradient(0deg, rgba(10,8,6,0.7) 0%, rgba(10,8,6,0.05) 64%); }
.mh-io__cap{ position:absolute; left:clamp(20px,2.4vw,34px); right:clamp(20px,2.4vw,34px); bottom:clamp(22px,2.4vw,32px); color:#FFFFFF; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.mh-io__card:hover .mh-io__cap{ transform:translateY(-6px); }
.mh-io__eyebrow{ font-size:11px; letter-spacing:0.26em; text-transform:uppercase; opacity:0.82; margin-bottom:10px; }
.mh-io__title{ font-size:clamp(34px,3.4vw,52px); line-height:1; }
.mh-io__line{ margin-top:16px; width:0; height:1px; background:var(--mh-accent,#B28C3F); transition:width .6s cubic-bezier(.22,.61,.36,1); }
.mh-io__card:hover .mh-io__line{ width:64px; }
.mh-io__cta{ margin-top:16px; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; max-height:0; opacity:0; transform:translateY(8px); overflow:hidden; transition:max-height .55s ease, opacity .45s ease, transform .55s ease; }
.mh-io__card:hover .mh-io__cta{ max-height:48px; opacity:1; transform:translateY(0); }
.mh-io__cta span{ display:inline-flex; align-items:center; gap:10px; }
@media (hover:none){ .mh-io__cta{ max-height:48px; opacity:1; transform:none; } .mh-io__line{ width:64px; } }

/* io caption shadows — legibility over imagery */
.mh-io__eyebrow, .mh-io__title, .mh-io__cta{ text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 2px 16px rgba(0,0,0,0.42); }