/* Homepage — "One house, four ways": staggered photo cards with the brand's hand-drawn illustrations */
.hz-ways-sec { padding: var(--section-y, 72px) 0; background: var(--paper); }
.hz-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.hz-ways > li:nth-child(even) { margin-top: var(--space-8); }

.hz-way { position: relative; display: block; color: var(--ink); }
.hz-way .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-alt); }
.hz-way .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(29,28,24,.28), rgba(29,28,24,0) 45%); transition: opacity .5s; }
.hz-way .ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.92); }
.hz-way:hover .ph img { transform: scale(1.08); filter: saturate(1.05); }

/* hand-drawn illustration in a cream medallion, overlapping the photo edge */
.hz-way .ph + .ico { position: relative; display: flex; align-items: center; justify-content: center; width: 92px; height: 92px; margin: -46px 0 0 var(--space-5, 20px); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(29,28,24,.08); z-index: 2; transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.hz-way .ico img { max-width: 56px; max-height: 62px; width: auto; height: auto; }
.hz-way:hover .ico { transform: translateY(-8px) rotate(-4deg); }

.hz-way .body { padding: var(--space-4) var(--space-2) 0 var(--space-5, 20px); }
.hz-way .n { display: flex; align-items: center; gap: var(--space-3); font: italic 400 16px/1 var(--font-display); color: var(--olive); margin-bottom: var(--space-2); }
.hz-way .n::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.hz-way:hover .n::after { width: 48px; }
.hz-way h3 { margin: 0 0 var(--space-2); font: 400 clamp(26px, 2.1vw, 32px)/1.1 var(--font-display); color: var(--ink); transition: color .3s; }
.hz-way:hover h3 { color: var(--olive); }
.hz-way p { margin: 0 0 var(--space-4); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.hz-way .go { display: inline-flex; align-items: center; gap: var(--space-3); font: 700 11px/16px var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--olive); }
.hz-way .go svg { width: 32px; height: 8px; stroke: currentColor; transition: transform .3s; }
.hz-way:hover .go svg { transform: translateX(6px); }

@media (max-width: 860px) {
  .hz-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-12); }
  .hz-ways > li:nth-child(even) { margin-top: var(--space-8); }
}
@media (max-width: 560px) {
  .hz-ways { grid-template-columns: 1fr; }
  .hz-ways > li:nth-child(even) { margin-top: 0; }
  .hz-way .ph { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .hz-way .ph img, .hz-way .ico { transition: none; } }