.case-page--kitehouse { --case-green: #c08d3a; --case-paper-deep: #e8e2d5; }
.case-page--kitehouse .case-hero-media img { object-position: 60% center; }
.case-page--kitehouse .case-hero::after { background: linear-gradient(90deg, rgba(12,14,12,.7), rgba(12,14,12,.22) 47%, rgba(12,14,12,.08)), linear-gradient(0deg, rgba(12,14,12,.58), transparent 55%); }
.case-page--kitehouse .case-choice { background: #1a1c17; }
.case-page--kitehouse .case-choice:hover { background: #27291f; }
.case-page--kitehouse .case-choice h3 { color: var(--case-paper); }
.case-page--kitehouse .case-choice p:not(.case-kicker) { color: rgba(245,242,234,.6); }
.case-page--kitehouse .case-choice .case-kicker { color: #d0a45e; }
.kitehouse-product { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 31rem; overflow: hidden; background: #ece7da; }
.kitehouse-product-copy { padding: clamp(1.5rem, 4vw, 3.2rem); }
.kitehouse-product-copy h3 { margin-top: 1rem; font-size: clamp(2.6rem, 5vw, 5.5rem); }
.kitehouse-product-copy > p:not(.case-kicker) { max-width: 19rem; margin-top: 1rem; color: var(--case-muted); font-size: .85rem; line-height: 1.65; }
.kitehouse-swatches { display: grid; gap: .5rem; margin-top: 2rem; }
.kitehouse-swatches button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .75rem; border: 1px solid transparent; background: transparent; color: var(--case-ink); cursor: pointer; text-align: left; font: .65rem/1 var(--case-mono); letter-spacing: .08em; text-transform: uppercase; }
.kitehouse-swatches button:hover, .kitehouse-swatches button.is-active { border-color: rgba(17,23,17,.24); background: rgba(255,255,255,.38); }
.kite-swatch { width: 1.15rem; height: 1.15rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17,23,17,.2); }
.kite-swatch--chalk { background: #d8d0be; }
.kite-swatch--trail { background: #687661; }
.kite-swatch--night { background: #232a2a; }
.kitehouse-product-copy .case-link { margin-top: 2rem; }
.kitehouse-object { position: relative; display: grid; min-height: 31rem; place-items: center; overflow: hidden; background: radial-gradient(circle at 52% 40%, rgba(255,255,255,.72), transparent 36%), linear-gradient(135deg, #c9d2c8, #d6b071 52%, #455349); }
.kitehouse-object::before { position: absolute; inset: 0; background: linear-gradient(125deg, transparent 47%, rgba(255,255,255,.34) 48%, transparent 52%), repeating-linear-gradient(90deg, transparent 0 7rem, rgba(17,23,17,.08) 7.02rem 7.08rem); content: ""; opacity: .5; }
.kitehouse-pack { position: relative; z-index: 1; width: min(23rem, 66%); aspect-ratio: .92; border-radius: 16% 16% 19% 19%; background: linear-gradient(135deg, #e6ded0, #a8b5a5 52%, #515d53); box-shadow: 2rem 2.4rem 3rem rgba(17,23,17,.28), inset .8rem .4rem 0 rgba(255,255,255,.22); transform: rotate(-7deg); transition: background .35s ease, transform .35s ease; }
.kitehouse-pack::after { position: absolute; top: 12%; right: 12%; left: 12%; height: 28%; border-radius: 13% 13% 22% 22%; background: linear-gradient(160deg, rgba(19,27,20,.06), rgba(33,44,37,.48)); box-shadow: inset 0 0 0 1px rgba(17,23,17,.13); content: ""; }
.kitehouse-pack-top { position: absolute; top: -8%; right: 18%; left: 18%; height: 17%; border-radius: 50%; background: #626e61; box-shadow: inset 0 .5rem .8rem rgba(255,255,255,.12); }
.kitehouse-pack-pocket { position: absolute; right: 10%; bottom: 13%; left: 10%; height: 28%; border-radius: 16%; background: linear-gradient(135deg, #98a696, #4d5a50); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.kitehouse-pack-strap { position: absolute; top: 8%; width: 13%; height: 78%; border-radius: 1rem; background: rgba(25,31,27,.38); }
.kitehouse-pack-strap--left { left: 9%; transform: rotate(4deg); }
.kitehouse-pack-strap--right { right: 9%; transform: rotate(-4deg); }
.kitehouse-shadow { position: absolute; z-index: 0; bottom: 13%; left: 19%; width: 62%; height: 8%; border-radius: 50%; background: rgba(17,23,17,.28); filter: blur(1.2rem); transform: rotate(-6deg); }
.kitehouse-label { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.1rem; color: rgba(17,23,17,.66); font: .6rem/1 var(--case-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 760px) {
  .kitehouse-product { grid-template-columns: 1fr; }
  .kitehouse-object { min-height: 22rem; }
  .kitehouse-pack { width: min(17rem, 58%); }
}