/* Compact kitchens: layout-led comparisons, storage details and light finishes. */
.compact-design { padding: 64px 0; }
.compact-container,.compact-design > .max-w-7xl { max-width: 1280px; margin: auto; padding-left: 32px; padding-right: 32px; }
.compact-design h2 { color: #132319; font-size: clamp(29px,3.2vw,43px); line-height: 1.12; font-weight: 750; letter-spacing: -.04em; }
.compact-design h3 { color: #162c1c; font-weight: 700; letter-spacing: -.025em; }
.compact-design p { text-align: left; }
.compact-heading { max-width: 950px; margin-bottom: 32px; }
.compact-heading > span { display: block; color: #2a713b; font-size: 11px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.compact-heading h2 { margin: 12px 0 0; }
.compact-intro { background: #fff; }
.compact-intro > div > .grid > div:first-child { padding: 26px 0; }
.compact-intro .space-y-4 { color: #55664e; font-size: 15px; line-height: 1.85; }
.compact-intro ul.grid li { min-width: 0; padding: 16px; border: 1px solid #d5e1ce; border-radius: 8px; background: #f3f8ee; font-size: 13px; text-align: left; }
.compact-intro .justify-between { justify-content: flex-start; gap: 20px; }
.compact-remodel-levels { padding-top: 32px; border-top: 1px solid #d4dfcd; }
.compact-remodel-levels > h3 { font-size: 27px; }
.compact-remodel-levels .site-content-card { padding: 26px; border-color: #d3e0cb; background: #f5f9f1; box-shadow: 0 6px 20px #21371a09; }
.compact-remodel-levels .site-content-card > span { background: #e4f0dc; color: #317543; }
.compact-remodel-levels svg { width: 25px; height: 25px; }
.compact-remodel-levels .site-content-card:hover { background: #e2f4dc; }
.compact-layouts { background: #f3f6ee; }
.compact-layout-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.compact-layout { min-width: 0; overflow: hidden; border: 1px solid #ccd9c4; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px #17351909; }
.compact-layout-photo { position: relative; height: 280px; overflow: hidden; }
.compact-layout-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compact-layout-photo > span { position: absolute; top: 17px; left: 17px; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #ffffff88; border-radius: 7px; background: #153520e8; color: #fff; font-size: 12px; font-weight: 700; }
.compact-layout-copy { display: grid; grid-template-columns: 100px 1fr; gap: 22px; align-items: start; padding: 25px; }
.compact-layout-copy > svg { display: block; width: 100px; height: 95px; }
.compact-layout h3 { margin: 0 0 10px; font-size: 23px; line-height: 1.2; }
.compact-layout p { margin: 0; color: #5a6953; font-size: 14px; line-height: 1.75; }
.compact-features { background: #112a1c; }
.compact-features h2,.compact-features h3 { color: #fff; }
.compact-features .compact-heading > span { color: #a1da96; }
.compact-feature-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; }
.compact-feature-photo { position: relative; min-height: 430px; overflow: hidden; border-radius: 10px; }
.compact-feature-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.compact-feature-list { display: grid; gap: 0; }
.compact-feature { display: grid; grid-template-columns: 38px 1fr; align-content: start; gap: 20px; padding: 23px 0; border-bottom: 1px solid #3b5b42; }
.compact-feature:first-child { padding-top: 0; }
.compact-feature:last-child { border: 0; padding-bottom: 0; }
.compact-feature > svg { width: 35px; height: 35px; color: #a2d995; }
.compact-feature h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; }
.compact-feature p { margin: 0; color: #d5e0ce; font-size: 14px; line-height: 1.7; }
.compact-styles { background: #fff; }
.compact-style-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.compact-style { min-width: 0; border-bottom: 1px solid #ccd9c4; }
.compact-style-photo { height: 340px; overflow: hidden; border-radius: 100px 8px 8px 8px; }
.compact-style:nth-child(2) .compact-style-photo { border-radius: 8px; }
.compact-style:nth-child(3) .compact-style-photo { border-radius: 8px 100px 8px 8px; }
.compact-style-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compact-style-copy { position: relative; padding: 23px 0 25px; }
.compact-style-copy > span { display: block; margin-bottom: 10px; color: #6f9463; font-size: 11px; letter-spacing: .12em; font-weight: 700; }
.compact-style h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.compact-style p { margin: 0; color: #596951; font-size: 14px; line-height: 1.75; }
.compact-materials { background: #f4f7ef; }
.compact-materials .compact-heading { margin-bottom: 18px; }
.compact-material-lead { max-width: 840px; color: #56664d; font-size: 15px; line-height: 1.8; }
.compact-material-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 30px; }
.compact-material { min-width: 0; padding: 22px; border: 1px solid #d3dfcb; border-radius: 10px; background: #fff; box-shadow: 0 6px 20px #142a1308; }
.compact-material-swatch { position: relative; height: 130px; margin-bottom: 24px; border: 1px solid #d0d7c8; border-radius: 7px; overflow: hidden; }
.compact-material-swatch > span { position: absolute; top: 12px; left: 12px; color: #38543b; font-size: 11px; font-weight: 700; }
.compact-swatch-1 { background: #dbe6d2; }
.compact-swatch-1::after { content: ''; position: absolute; inset: 16px 30%; border: 10px solid #edf2e6; box-shadow: 0 2px 8px #3d532125,inset 0 2px 6px #3d532112; }
.compact-swatch-2 { background: linear-gradient(135deg,transparent 48%,#d6d4c8 49%,#f3f0e6 50%,transparent 52%),linear-gradient(30deg,#f7f5ed 40%,#deddd3 41%,#f4f1e8 42%,#f7f5ed 46%); }
.compact-swatch-3 { background-color: #e6dfcf; background-image: linear-gradient(#fff9 1px,transparent 1px),linear-gradient(90deg,#fff9 1px,transparent 1px); background-size: 95px 65px; }
.compact-material h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; }
.compact-material p { margin: 0; color: #596851; font-size: 14px; line-height: 1.75; }
.compact-reviews { background: #fff; }
.compact-reviews .site-content-card { border: 1px solid #d0ddc7; box-shadow: 0 7px 22px #162d150a; }
.compact-reviews .site-content-card svg { color: #3e894b; fill: #e4f0da; }
.compact-reviews .marquee-track:hover { animation-play-state: paused; }
.compact-process { background: #f7f9f3; }
.compact-process .compact-heading { margin-bottom: 18px; }
.compact-process-lead { margin: 0 0 30px; color: #55664d; font-size: 15px; line-height: 1.8; }
.compact-process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.compact-process-photo { position: relative; overflow: hidden; min-height: 470px; border-radius: 9px; }
.compact-process-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.compact-process-grid ol { margin: 0; padding: 0; list-style: none; }
.compact-process-grid li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 21px 0; border-bottom: 1px solid #cfdcc5; }
.compact-process-grid li:first-child { padding-top: 0; }
.compact-process-grid li:last-child { border: 0; padding-bottom: 0; }
.compact-process-grid li > span { color: #7b9c70; font-size: 26px; font-weight: 700; }
.compact-process-grid h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.25; }
.compact-process-grid p { margin: 0; color: #596a51; font-size: 14px; line-height: 1.75; }
.compact-condo-note { margin-top: 32px; padding: 28px; border: 1px solid #c9dabc; border-radius: 10px; background: #eaf3e2; }
.compact-condo-note h3 { font-size: 24px; }
.compact-condo-note ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.compact-condo-note li { padding: 17px; border: 1px solid #cfdec3; border-radius: 7px; background: #f7fbf2; }
.compact-condo-note p { color: #526748; font-size: 14px; }
.compact-areas { background: #fff; }
.compact-areas li { border: 1px solid #d5e1ce; box-shadow: none; background: #f3f8ed; }
.compact-related { background: #f2f6ec; }
.compact-related .site-content-card { border-color: #d1dec7; border-radius: 9px; box-shadow: 0 6px 18px #1d371408; }
.compact-related .site-content-card:hover { background: #e1f1d8; }
.compact-related a > svg { width: 20px; height: 20px; color: #347a43; }
@media(max-width:1000px) {
 .compact-layout-copy { grid-template-columns: 75px 1fr; gap: 15px; padding: 20px; }
 .compact-layout-copy > svg { width: 75px; height: 75px; }
 .compact-layout-photo { height: 230px; }
 .compact-style-photo { height: 270px; }
 .compact-style h3 { font-size: 21px; }
 .compact-material-grid { gap: 16px; }
 .compact-material { padding: 18px; }
 .compact-condo-note ul { grid-template-columns: 1fr; gap: 12px; }
}
@media(max-width:700px) {
 .compact-design { padding: 40px 0; }
 .compact-container,.compact-design > .max-w-7xl { padding-left: 20px; padding-right: 20px; }
 .compact-layout-grid,.compact-style-grid,.compact-material-grid,.compact-feature-split,.compact-process-grid { grid-template-columns: 1fr; }
 .compact-layout-photo { height: 230px; }
 .compact-layout-copy { grid-template-columns: 75px 1fr; }
 .compact-feature-photo { min-height: 300px; }
 .compact-feature-split { gap: 28px; }
 .compact-feature h3 { font-size: 20px; }
 .compact-style:nth-child(n) .compact-style-photo { height: 290px; border-radius: 9px; }
 .compact-material-swatch { height: 145px; }
 .compact-process-photo { min-height: 300px; }
 .compact-process-grid { gap: 28px; }
 .compact-condo-note { padding: 22px; }
}
.compact-condo-note li { text-align: left; }

/* Consultation assurances and practical guidance, each with a clear visual hierarchy. */
.compact-intro-assurances { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 0; margin: 26px 0 0; list-style: none; }
main .compact-intro-assurances li { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 19px 16px; border: 1px solid #cedfc6; border-radius: 11px; background: #f6faf2; box-shadow: 0 4px 14px #1b341208; text-align: left; }
.compact-intro-assurances li > svg { box-sizing: content-box; flex-shrink: 0; padding: 10px; border-radius: 10px; background: #e5f0dd; color: #2e7240; }
.compact-intro-assurances li > span { color: #213924; font-size: 13px; font-weight: 600; line-height: 1.55; }
.compact-condo-planning { display: grid; grid-template-columns: .9fr 1.3fr; overflow: hidden; margin-top: 34px; border: 1px solid #ccdbc4; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px #203b1409; }
.compact-condo-heading { padding: 34px; background: #173821; }
.compact-condo-heading > svg { width: 48px; height: 48px; margin-bottom: 24px; color: #b4df9e; }
.compact-condo-heading h3 { margin: 0 0 18px; color: #fff; font-size: clamp(24px,2.3vw,30px); font-weight: 700; line-height: 1.2; }
.compact-condo-heading p { margin: 0; color: #d8e5cf; font-size: 14px; line-height: 1.8; }
.compact-condo-planning ol { margin: 0; padding: 12px 32px; list-style: none; }
.compact-condo-planning li { display: grid; grid-template-columns: 35px 1fr; align-items: start; gap: 20px; padding: 22px 0; border-bottom: 1px solid #d8e3d0; text-align: left; }
.compact-condo-planning li:last-child { border: 0; }
.compact-condo-number { padding-top: 1px; color: #86a778; font-size: 24px; font-weight: 650; line-height: 1.2; }
.compact-condo-planning h4 { margin: 0 0 8px; color: #1a3c23; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.compact-condo-planning li p { margin: 0; color: #57694e; font-size: 14px; line-height: 1.75; }
.compact-condo-footer { grid-column: 1/-1; margin: 0; padding: 18px 32px; border-top: 1px solid #d1dfc6; background: #edf5e6; color: #3e5e35; font-size: 13px; line-height: 1.65; }
@media(max-width:1050px) { main .compact-intro-assurances li { gap: 10px; padding: 16px 12px; } .compact-intro-assurances li > svg { padding: 8px; width: 22px; height: 22px; } }
@media(max-width:700px) {
 .compact-condo-planning { grid-template-columns: 1fr; }
 .compact-condo-heading { padding: 26px; }
 .compact-condo-heading > svg { margin-bottom: 18px; }
 .compact-condo-planning ol { padding: 4px 24px; }
 .compact-condo-planning li { gap: 15px; }
 .compact-condo-footer { padding: 18px 24px; }
}
@media(max-width:430px) { .compact-intro-assurances { grid-template-columns: 1fr; gap: 11px; } main .compact-intro-assurances li { padding: 16px 18px; gap: 16px; } }

/* User-supplied material photos replace the illustrated swatches. */
.compact-material-image { position: relative; height: 220px; margin-bottom: 24px; overflow: hidden; border: 1px solid #d0d7c8; border-radius: 7px; background: #edf1e7; }
.compact-material-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.compact-material-image > span { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #b7cbaa; border-radius: 4px; background: #fafdf5ed; color: #2c5935; font-size: 11px; font-weight: 700; }
.compact-material:nth-child(3) .compact-material-image img { object-position: center 68%; }
@media(max-width:1000px) and (min-width:701px) { .compact-material-image { height: 180px; } }
@media(max-width:700px) { .compact-material-image { height: 240px; } }