:root {
  --ink: #302a29;
  --cream: #f7f0ec;
  --paper: #fffaf7;
  --sage: #eee3df;
  --rust: #a9686d;
  --rose: #d9afb0;
  --line: rgba(78, 58, 57, .16);
  --sans: "DM Sans", "Noto Sans KR", Arial, sans-serif;
}

body { background: var(--paper); }
.section { padding: 76px 6vw; }
.eyebrow { color: #916064; letter-spacing: .22em; }
.site-header { height: 78px; padding: 0 6vw; border-color: var(--line); }
.brand span { border-color: var(--rose); background: #fff; color: #8f5e63; }
.nav-cta { border-radius: 999px; padding: 9px 20px !important; }
.button { border-radius: 999px; padding: 14px 24px; }
.button.dark { background: #5f4547; }
.button.dark:hover { background: #8e5c61; }
.text-link { border-color: #b9878b; }

.hero { min-height: 690px; grid-template-columns: 43% 57%; background: #fbf4f1; }
.hero-copy { padding: 8vh 6vw; }
.hero h1 { font-size: clamp(4.1rem, 7vw, 7.2rem); }
.hero h1 em { color: #a9686d; }
.hero-art { min-height: 610px; background-size: cover; background-position: center; }
.hero-art:before { inset: 22px; border-color: rgba(255,255,255,.72); }
.hero-art .image-note { top: auto; bottom: 34px; left: 42px; padding: 9px 13px; border-radius: 999px; background: rgba(255,250,247,.9); color: #5e4849; }
.hero-art .arch,.hero-art>p { display: none; }
.hero-stamp { background: #a9686d; box-shadow: 0 12px 35px rgba(95,69,71,.22); }

.intro { grid-template-columns: 24% 76%; padding-top: 72px; padding-bottom: 72px; }
.intro h2,.section-head h2,.story h2,.cta h2 { letter-spacing: -.015em; }
.services { padding: 0 6vw 72px; gap: 14px; }
.services article { padding: 38px 32px; border: 1px solid var(--line) !important; border-radius: 22px; background: rgba(255,255,255,.58); }
.services h3 { margin: 18px 0 10px; }
.services p { min-height: 64px; }
.property-grid { gap: 18px; }
.property-image { border-radius: 20px; }
.property-meta { padding: 16px 4px 4px; }
.page-title { padding: 70px 6vw 38px; }
.page-title h1 { font-size: clamp(4rem, 8vw, 7rem); }
.property-section { padding-top: 38px; padding-bottom: 70px; }
.filters button { border-radius: 999px; }

.page-hero { min-height: 580px; padding: 54px 6vw; background: #f8efeb; }
.portrait { height: 500px; overflow: hidden; border-radius: 180px 180px 18px 18px; background: #e7d4d0; }
.portrait:before { display: none; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.story { grid-template-columns: 45% 55%; gap: 6vw; }
.facts { padding-top: 46px; padding-bottom: 46px; background: #5f4547; }
.specialties { padding-top: 62px; padding-bottom: 62px; }
.tag-list span { background: #fff; border-radius: 999px; }
.cta { background: #5f4547; }

.contact-wrap { min-height: 670px; grid-template-columns: 40% 60%; background: #f8efeb; }
.contact-copy { padding: 8vh 6vw; }
.contact-form { margin: 34px 5vw 34px 0; padding: 56px 5vw; border-radius: 28px; box-shadow: 0 20px 60px rgba(78,58,57,.08); }

.closing-moments { gap: 4vw; background: #5f4547; }
/* Two-up only on wide screens; videos.css stacks it at <=980px. Keep this
   inside a min-width query -- as a base rule it outranked that stack by
   source order and left phones in a 28%/72% split. */
@media(min-width:981px) { .closing-moments { grid-template-columns: 28% 72%; } }
.video-card,.review-card { border-radius: 20px; overflow: hidden; }
.video-card { background: #493638; }
.testimonials { padding-top: 70px; padding-bottom: 70px; }
.review-card.feature-review { background: #ead8d4; }
.review-platforms { border-radius: 18px; background: #5f4547; }
footer { padding-top: 44px; }

@media(max-width:850px) {
  .section { padding: 62px 6vw; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 520px; }
  .intro,.story { grid-template-columns: 1fr; }
  .services { padding: 0 6vw 62px; }
  .contact-form { margin: 0; border-radius: 0; }
}

@media(max-width:520px) {
  .hero h1 { font-size: 3.45rem; }
  .hero-art { min-height: 430px; }
  .page-title { padding-top: 55px; }
}