.real-cases-hero { display: grid; grid-template-columns: minmax(420px,.88fr) minmax(0,1.12fr); min-height: calc(100svh - 90px); background: #f8f5f0; }
.real-cases-hero > div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(48px,5vw,82px); }
.real-cases-hero h1 { margin: 15px 0 22px; font: 400 clamp(3rem,4vw,4.4rem)/1.16 "Noto Serif SC",serif; letter-spacing: .02em; }
.real-cases-hero > div > p:not(.focus-eyebrow) { max-width: 620px; color: #6f6861; line-height: 1.85; }
.real-cases-hero figure { position: relative; margin: 0; min-height: 680px; }
.real-cases-hero figure img { width: 100%; height: 100%; object-fit: cover; }
.real-cases-hero figcaption { position: absolute; right: 12px; bottom: 12px; padding: 9px 12px; background: rgba(30,28,26,.75); color: #fff; font-size: .67rem; }
.real-case-principles { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #d9d1c8; border-left: 1px solid #d9d1c8; }
.real-case-principles article { padding: clamp(25px,3vw,42px); border-right: 1px solid #d9d1c8; border-bottom: 1px solid #d9d1c8; }
.real-case-principles span { color: #8b3039; font: 500 .7rem/1 Manrope,sans-serif; }
.real-case-principles strong { display: block; margin: 20px 0 10px; font: 400 1.35rem/1.4 "Noto Serif SC",serif; }
.real-case-principles p { margin: 0; color: #746d67; font-size: .82rem; line-height: 1.7; }
.real-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.real-case-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #d9d1c8; background: #fff; color: #282522; text-decoration: none; }
.real-case-media { position: relative; overflow: hidden; }
.real-case-media img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .4s ease; }
.real-case-card.is-published:hover .real-case-media img { transform: scale(1.018); }
.real-case-media > span { position: absolute; top: 14px; right: 14px; padding: 7px 10px; background: #822d38; color: #fff; font-size: .67rem; }
.real-case-placeholder { display: grid; aspect-ratio: 4/3; place-content: center; gap: 12px; background: #292725; color: #fff; text-align: center; }
.real-case-placeholder span { color: #d8a8a3; font: 500 .65rem/1 Manrope,sans-serif; letter-spacing: .16em; }
.real-case-placeholder strong { font: 400 clamp(3rem,6vw,5.8rem)/1 Manrope,sans-serif; letter-spacing: -.045em; }
.real-case-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(26px,3.5vw,44px); }
.real-case-body h3 { margin: 12px 0 14px; font: 400 clamp(1.75rem,2.5vw,2.5rem)/1.2 "Noto Serif SC",serif; }
.real-case-body > p:not(.focus-eyebrow) { margin: 0; color: #6f6861; line-height: 1.75; }
.real-case-body dl { display: grid; width: 100%; margin: 26px 0; }
.real-case-body dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid #e1dad2; }
.real-case-body dt { color: #827a73; font-size: .72rem; }
.real-case-body dd { margin: 0; font-size: .78rem; }
.real-case-body .ia-text-link,.real-case-status { margin-top: auto; }
.real-case-status { color: #827a73; font-size: .75rem; }
.case-space-section { background:#f8f5f0; }
.case-space-filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.case-space-filters button { min-height:42px; padding:10px 18px; border:1px solid #cfc5bb; border-radius:999px; background:transparent; color:#5f5750; font:400 .78rem/1.2 "IBM Plex Sans SC",sans-serif; cursor:pointer; transition:.2s ease; }
.case-space-filters button:hover,.case-space-filters button:focus-visible,.case-space-filters button.is-active { border-color:#822d38; background:#822d38; color:#fff; }
.case-space-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.case-space-card { position:relative; display:block; min-width:0; overflow:hidden; background:#292522; color:#fff; text-decoration:none; }
.case-space-card[hidden] { display:none; }
.case-space-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease; }
.case-space-card:hover img { transform:scale(1.018); }
.case-space-card::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(0deg,rgba(24,21,19,.82),transparent); pointer-events:none; }
.case-space-card > span { position:absolute; z-index:1; right:0; bottom:0; left:0; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:22px; }
.case-space-card strong { font:400 1.22rem/1.3 "Noto Serif SC",serif; }
.case-space-card small { color:rgba(255,255,255,.72); font-size:.68rem; text-align:right; }
.space-detail-breadcrumb { display:flex; gap:9px; padding-top:28px; padding-bottom:22px; color:#817970; font-size:.72rem; }
.space-detail-breadcrumb a { color:#822d38; text-decoration:none; }
.space-detail-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); gap:clamp(34px,5vw,74px); align-items:center; padding-bottom:clamp(68px,8vw,116px); }
.space-detail-hero figure { margin:0; }
.space-detail-hero figure img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.space-detail-hero figcaption { margin-top:10px; color:#8a8179; font-size:.66rem; }
.space-detail-copy h1 { margin:14px 0 10px; font:400 clamp(2.7rem,4.5vw,4.7rem)/1.14 "Noto Serif SC",serif; }
.space-detail-project { margin:0 0 22px; color:#822d38; font-size:.76rem; letter-spacing:.08em; }
.space-detail-copy > p:not(.focus-eyebrow):not(.space-detail-project) { color:#6f6861; line-height:1.85; }
.space-detail-copy dl { margin:28px 0; border-top:1px solid #d9d1c8; }
.space-detail-copy dl div { display:grid; grid-template-columns:88px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid #d9d1c8; }
.space-detail-copy dt { color:#847b73; font-size:.72rem; }
.space-detail-copy dd { margin:0; font-size:.78rem; line-height:1.55; }
.space-detail-principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #d9d1c8; border-left:1px solid #d9d1c8; }
.space-detail-principles article { padding:clamp(25px,3vw,42px); border-right:1px solid #d9d1c8; border-bottom:1px solid #d9d1c8; }
.space-detail-principles span { color:#822d38; font:.68rem/1 Manrope,sans-serif; }
.space-detail-principles strong { display:block; margin:18px 0 10px; font:400 1.25rem/1.4 "Noto Serif SC",serif; }
.space-detail-principles p { margin:0; color:#746d67; font-size:.8rem; line-height:1.7; }
.space-product-section[hidden] { display:none; }
.space-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.space-product-grid article { display:grid; grid-template-columns:minmax(0,.92fr) minmax(240px,1.08fr); border:1px solid #d9d1c8; background:#fff; }
.space-product-grid article > img { width:100%; height:100%; min-height:320px; object-fit:cover; }
.space-product-grid article > div { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px,3vw,38px); }
.space-product-grid h3 { margin:11px 0 13px; font:400 clamp(1.45rem,2vw,2rem)/1.25 "Noto Serif SC",serif; }
.space-product-grid article > div > p:not(.focus-eyebrow) { margin:0 0 24px; color:#6f6861; font-size:.8rem; line-height:1.7; }
.space-product-grid .ia-text-link { margin-top:auto; }
.space-product-more { margin-top:24px; }
@media(max-width:900px){.real-cases-hero{grid-template-columns:1fr;min-height:0}.real-cases-hero figure{order:-1;min-height:0}.real-cases-hero figure img{height:auto;aspect-ratio:16/10}.real-cases-hero>div{padding:44px max(24px,6vw) 54px}}
@media(max-width:900px){.case-space-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.space-product-grid article{grid-template-columns:1fr}.space-product-grid article>img{height:auto;min-height:0;aspect-ratio:4/3}}
@media(max-width:900px){.space-detail-hero{grid-template-columns:1fr}.space-detail-principles,.space-product-grid{grid-template-columns:1fr}}
@media(max-width:720px){.real-cases-hero figure img{aspect-ratio:4/3}.real-cases-hero>div{padding:30px 20px 42px}.real-cases-hero .focus-eyebrow{display:none}.real-cases-hero h1{margin:0 0 18px;font-size:2.2rem;line-height:1.24}.real-case-principles,.real-case-grid,.case-space-grid{grid-template-columns:1fr}.real-case-grid{gap:12px}.real-case-body{padding:25px 20px}.real-case-placeholder strong{font-size:3.5rem}.case-space-filters{gap:8px;margin-bottom:22px}.case-space-filters button{min-height:38px;padding:9px 14px}.case-space-card>span{padding:18px}}

/* Full-image editorial hero, aligned with the collections index. */
.real-cases-page .real-cases-hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: min(820px, calc(100svh - 90px));
  overflow: hidden;
  background: #292522;
}
.real-cases-page .real-cases-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,20,18,.72) 0%, rgba(23,20,18,.42) 44%, rgba(23,20,18,.08) 78%);
  pointer-events: none;
}
.real-cases-page .real-cases-hero figure {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
}
.real-cases-page .real-cases-hero figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.real-cases-page .real-cases-hero > div {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: inherit;
  max-width: 960px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(80px,10vw,150px) clamp(34px,7.5vw,130px);
  color: #fff;
}
.real-cases-page .real-cases-hero .focus-eyebrow { margin: 0 0 22px; color: rgba(255,255,255,.76); }
.real-cases-page .real-cases-hero h1 {
  max-width: none;
  margin: 0 0 24px;
  color: #fff !important;
  font-size: clamp(3.4rem,5.2vw,5.6rem);
  line-height: 1.08;
  letter-spacing: .015em;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0,0,0,.2);
}
.real-cases-page .real-cases-hero > div > p:not(.focus-eyebrow) {
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(.92rem,1.2vw,1.08rem);
  line-height: 1.85;
}
.real-cases-page .real-cases-hero .focus-actions { margin-top: 28px; }
.real-cases-page .real-cases-hero .ia-button-secondary { border-color: rgba(255,255,255,.72); color: #fff; }
.real-cases-page .real-cases-hero figcaption { z-index: 3; background: rgba(30,28,26,.66); }

@media(max-width:720px) {
  .real-cases-page .real-cases-hero { min-height: 72svh; }
  .real-cases-page .real-cases-hero::after { background: linear-gradient(0deg,rgba(23,20,18,.79) 0%,rgba(23,20,18,.30) 65%,rgba(23,20,18,.08) 100%); }
  .real-cases-page .real-cases-hero figure { position: absolute; order: initial; }
  .real-cases-page .real-cases-hero figure img { height: 100%; aspect-ratio: auto; object-position: 54% center; }
  .real-cases-page .real-cases-hero > div { min-height: 72svh; padding: 48px 24px 44px; }
  .real-cases-page .real-cases-hero .focus-eyebrow { display: block; margin-bottom: 14px; font-size: .62rem; }
  .real-cases-page .real-cases-hero h1 { margin-bottom: 16px; font-size: clamp(2.55rem,12vw,3.5rem); line-height: 1.12; white-space: normal; }
  .real-cases-page .real-cases-hero > div > p:not(.focus-eyebrow) { max-width: 29em; font-size: .86rem; line-height: 1.7; }
  .real-cases-page .real-cases-hero .focus-actions { display: flex; width: 100%; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .real-cases-page .real-cases-hero .focus-actions .ia-button { width: auto; }
  .real-cases-page .real-cases-hero figcaption { right: 8px; bottom: 8px; left: auto; max-width: calc(100% - 16px); }
}

/* Compact, image-led room detail: distinct from the full residence case. */
.case-space-detail-page .space-detail-breadcrumb { padding-top:20px; padding-bottom:16px; }
.case-space-detail-page .space-detail-hero {
  grid-template-columns:minmax(0,1.48fr) minmax(330px,.52fr);
  gap:clamp(28px,4vw,58px);
  align-items:center;
  padding-bottom:clamp(44px,5vw,68px);
}
.case-space-detail-page .space-detail-hero figure img { aspect-ratio:16/10; }
.case-space-detail-page .space-detail-copy h1 { font-size:clamp(2.5rem,3.8vw,4rem); }
.case-space-detail-page .space-detail-copy dl { margin:20px 0; }
.case-space-detail-page .space-detail-copy dl div { padding:10px 0; }
.case-space-detail-page .space-detail-copy .focus-actions { gap:9px; margin-top:20px; }
.case-space-detail-page .space-detail-copy .ia-button { padding:12px 16px; }
.case-space-detail-page .space-product-section { padding-top:clamp(44px,5vw,68px); padding-bottom:clamp(48px,5vw,72px); }
.case-space-detail-page .space-product-section .focus-head { margin-bottom:24px; }
.case-space-detail-page .space-product-grid { gap:14px; }
.case-space-detail-page .space-product-grid article { grid-template-columns:190px 1fr; }
.case-space-detail-page .space-product-grid article > img { min-height:220px; }
.case-space-detail-page .space-product-grid article > div { padding:24px; }
.case-space-detail-page .space-product-grid h3 { margin:8px 0 10px; font-size:1.45rem; }
.case-space-detail-page .space-product-grid article > div > p:not(.focus-eyebrow) { margin-bottom:16px; }
.case-space-detail-page .space-product-more { margin-top:18px; }

@media(max-width:900px) {
  .case-space-detail-page .space-detail-hero { grid-template-columns:1fr; gap:26px; }
  .case-space-detail-page .space-detail-hero figure img { aspect-ratio:16/10; }
}
@media(max-width:720px) {
  .case-space-detail-page .space-detail-breadcrumb { padding:16px 20px 12px; }
  .case-space-detail-page .space-detail-hero { padding:0 20px 42px; }
  .case-space-detail-page .space-detail-copy h1 { margin-top:8px; font-size:2.25rem; }
  .case-space-detail-page .space-detail-copy > p:not(.focus-eyebrow):not(.space-detail-project) { line-height:1.7; }
  .case-space-detail-page .space-product-section { padding-top:38px; padding-bottom:44px; }
  .case-space-detail-page .space-product-grid article { grid-template-columns:128px 1fr; }
  .case-space-detail-page .space-product-grid article > img { min-height:190px; }
  .case-space-detail-page .space-product-grid article > div { padding:18px 16px; }
  .case-space-detail-page .space-product-grid h3 { font-size:1.2rem; }
}

/* Space browser is a compact index; large imagery belongs on the detail page. */
.real-cases-page .case-space-section { scroll-margin-top:92px; padding-top:clamp(48px,5vw,68px); padding-bottom:clamp(58px,6vw,82px); }
.real-cases-page .case-space-section .focus-head { margin-bottom:22px; }
.real-cases-page .case-space-section .focus-head h2 { font-size:clamp(2rem,3vw,3.15rem); }
.real-cases-page .case-space-filters { gap:8px; margin-bottom:20px; }
.real-cases-page .case-space-filters button { min-height:36px; padding:8px 14px; font-size:.72rem; }
.real-cases-page .case-space-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }

@media(max-width:1050px) {
  .real-cases-page .case-space-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.real-cases-page .case-space-card img { aspect-ratio:3/2; }
.real-cases-page .case-space-card > span { padding:15px 16px; }
.real-cases-page .case-space-card strong { font-size:1rem; }
.real-cases-page .case-space-card small { font-size:.6rem; }

@media(max-width:720px) {
  .real-cases-page .case-space-section { scroll-margin-top:70px; padding-top:38px; padding-bottom:48px; }
  .real-cases-page .case-space-section .focus-head { margin-bottom:18px; }
  .real-cases-page .case-space-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .real-cases-page .case-space-card > span { display:block; padding:12px; }
  .real-cases-page .case-space-card small { display:block; margin-top:3px; text-align:left; }
}