/* Domus Veritas: calm residential identity */
:root {
  --ink: #222522;
  --ink2: #30372f;
  --paper: #f7f5ef;
  --stone: #e9e5da;
  --limestone: #ded9cc;
  --line: #cec9bb;
  --gold: #a89069;
  --text: #30342f;
  --muted: #666a62;
}

body { background: var(--paper); color: var(--text); }
h1, h2, h3 { font-family: 'DM Sans', Arial, sans-serif; font-weight: 500; letter-spacing: -.045em; }
h2 { font-size: clamp(2.4rem, 3.8vw, 4.2rem); line-height: 1.13; }
h3 { font-size: clamp(1.55rem, 1.9vw, 2.1rem); line-height: 1.2; }
.section { padding-block: clamp(6.5rem, 9vw, 10.5rem); }
.eyebrow { font-family: 'DM Sans', sans-serif; font-size: .79rem; font-weight: 600; letter-spacing: .16em; }
.eyebrow.dark { color: #566357; }
.eyebrow.light, .eyebrow.hero-eyebrow { color: #cbb994; }

.site-header { background: #282925; border-bottom: 1px solid rgba(234, 228, 211, .16); }
.header-inner { min-height: 96px; }
.brand { gap: 1rem; }
.brand-mark { width: 40px; height: 40px; }
.brand-name { color: #f2eee4; font-family: 'DM Sans', Arial, sans-serif; font-size: .94rem; font-weight: 500; letter-spacing: .075em; }
.brand-name span { color: #c7b898; font-size: .59rem; letter-spacing: .25em; }
.nav { gap: 1.55rem; }
.nav a { color: #e1dfd6; font-size: .875rem; }
.nav a:hover, .nav a:focus-visible { color: #d3c3a3; }
.lang-switch button { color: #c0c2bb; }
.lang-switch, .lang-switch button { font-size: .875rem; }
.lang-switch button[aria-pressed=true] { color: #f5f0e7; }
.header-cta { border-color: rgba(223, 213, 191, .5); color: #eee9dc; font-size: .875rem; font-weight: 500; }
.header-cta:hover { background: #e9e4d8; color: var(--ink); }

.hero { min-height: min(760px, 90svh); background: #282925; }
.hero-shade { background: linear-gradient(90deg, rgba(35, 36, 33, .78) 0%, rgba(35, 36, 33, .64) 32%, rgba(35, 36, 33, .12) 68%, rgba(35, 36, 33, .03) 100%), linear-gradient(0deg, rgba(35, 36, 33, .38), transparent 23%); }
.hero-inner { padding-top: clamp(7rem, 12vw, 11rem); padding-bottom: 6rem; }
.hero h1 { max-width: 760px; margin: 1.65rem 0 1.45rem; font-size: clamp(3.25rem, 4.8vw, 5.4rem); font-weight: 500; line-height: 1.09; color: #fffaf0; text-wrap: balance; }
.hero-copy { max-width: 600px; color: #f0eee8; font-size: clamp(1.03rem, 1.3vw, 1.19rem); line-height: 1.78; }
.hero-actions { margin-top: 2.7rem; gap: 2rem; }
.button { min-height: 56px; font-weight: 600; }
.button { font-size: .875rem; }
.button-light { background: #faf5e9; color: #202420; font-weight: 700; }
.button-light:hover { background: #fffaf0; }
.text-link { border-bottom-color: rgba(229, 219, 198, .7); color: #f2ede3; font-weight: 500; }
.text-link:hover { color: #e5d2ad; border-color: #a89069; }
.hero-footer { border-top-color: rgba(237, 229, 212, .33); color: #ebe8dc; letter-spacing: .025em; }

.intro { background: var(--paper); }
.intro h2 { max-width: 690px; }
.intro-right p, .renovation-grid p:not(.eyebrow) { color: #5a6058; }
.arrow-link { border-bottom-color: #9d937c; color: #3d453c; font-weight: 600; }
.arrow-link:hover { border-color: #3d453c; }

.services { background: var(--stone); }
.section-head { margin-bottom: 4rem; }
.section-head h2 { max-width: 770px; }
.section-head > p { max-width: 340px; color: #64675e; }
.service-grid { display: block; background: transparent; border: 0; }
.service-card { display: grid; grid-template-columns: 72px minmax(220px, .86fr) minmax(280px, 1fr); gap: clamp(1rem, 3vw, 4rem); align-items: start; min-height: 0; padding: 2.65rem 0 2.75rem; background: transparent; border-top: 1px solid #c8c2b4; }
.service-card:last-child { border-bottom: 1px solid #c8c2b4; }
.service-number { color: #8d7c5f; font: 600 .8rem 'DM Sans', sans-serif; letter-spacing: .17em; padding-top: .5rem; }
.service-card h3 { margin: 0; color: #292e28; }
.service-card p { margin: .2rem 0 0; max-width: 560px; color: #5d635b; font-size: 1.04rem; line-height: 1.75; }

.principle { background: #2b2f2a; padding-block: clamp(7rem, 10vw, 11rem); }
.principle-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .76fr); gap: clamp(4rem, 10vw, 12rem); }
.principle h2 { margin-top: 1.7rem; max-width: 670px; color: #f3f0e7; }
.principle-copy { padding-top: 3.5rem; }
.principle-copy p { color: #e2e5dc; line-height: 1.82; }
.principle-copy li { color: #f0f0e7; border-color: rgba(230, 230, 216, .2); }
.principle-copy li:before { color: #b6a17a; }

.renovation { background: var(--paper); }
.renovation-grid > div:last-child { padding-top: 3rem; }
.about-area { background: #e3dfd3; }
.about-area h2 { font-size: clamp(2.4rem, 3.6vw, 3.9rem); }
.about-area p:not(.eyebrow) { color: #5b6058; }
.area-block { border-left-color: #c7c0b0; }
.location-list { gap: 0; row-gap: .6rem; }
.location-list span { padding: 0 1.25rem 0 0; margin-right: 1.25rem; border: 0; border-right: 1px solid #a9a18e; color: #434b41; font-size: .9rem; white-space: nowrap; }
.location-list span:last-child { border-right: 0; }

.contact { background: #292c28; }
.contact h2 { color: #f4f0e7; }
.contact-grid > div > p:not(.eyebrow) { color: #e1e3da; }
.contact-phone, .contact-whatsapp { color: #ede7d9; border-bottom-color: #a89069; font-weight: 500; }
.contact-panel { background: #e9e5da; color: #30352f; }
.contact-panel-label { color: #5d6659; }
.contact-panel-intro { color: #5b6058; }
.contact-line { border-top-color: #c8c2b5; }
.contact-line span { color: #656e61; }
.contact-line-email { flex-wrap: wrap; gap: .35rem 1rem; }
.contact-line-email .email-value { white-space: nowrap; overflow-wrap: normal; }
.contact-note { color: #666c62; }
.footer { background: #252724; }
.footer-inner { min-height: 165px; }
.footer-inner p { color: #c9c9bd; }

@media (max-width: 1250px) {
  .header-inner { min-height: 88px; }
}
@media (max-width: 900px) {
  .nav { top: 88px; background: #282925; }
  .nav a { border-bottom-color: #41463f; }
  .menu-toggle { border-color: #787c71; }
  .hero { min-height: 700px; }
  .hero-shade { background: linear-gradient(90deg, rgba(35, 36, 33, .80) 0%, rgba(35, 36, 33, .68) 45%, rgba(35, 36, 33, .60) 75%, rgba(35, 36, 33, .09) 100%), linear-gradient(0deg, rgba(35, 36, 33, .38), transparent 23%); }
  .service-card { grid-template-columns: 52px minmax(200px, .8fr) minmax(260px, 1fr); gap: 1rem; }
  .principle-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .principle-copy { padding-top: 0; max-width: 650px; }
}
@media (max-width: 650px) {
  .header-inner { min-height: 76px; }
  .nav { top: 76px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-name { font-size: .82rem; }
  .hero { min-height: 740px; }
  .hero-shade { background: linear-gradient(90deg, rgba(35, 36, 33, .73) 0%, rgba(35, 36, 33, .60) 58%, rgba(35, 36, 33, .35) 100%), linear-gradient(0deg, rgba(35, 36, 33, .24), transparent 30%); }
  .hero h1 { max-width: 500px; font-size: clamp(2.75rem, 9vw, 4rem); overflow-wrap: break-word; }
  .contact-line-email { display: block; }
  .contact-line-email .email-value { display: block; margin-top: .3rem; text-align: left; }
  .hero-actions { gap: 1.2rem; }
  .service-card { grid-template-columns: 34px 1fr; gap: .7rem 1rem; padding: 2rem 0; }
  .service-card p { grid-column: 2; margin: 0; font-size: 1rem; }
  .service-number { padding-top: .45rem; }
  .principle { padding-block: 6rem; }
  .location-list span { margin-bottom: .6rem; }
}

/* Social and legal navigation, using the existing palette and spacing. */
.footer-inner { flex-wrap: wrap; padding-block: 2rem; }
.footer-links { flex-basis: 100%; grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; width: 100%; }
.social-links, .legal-links, .policy-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.footer-links a { color: #ded8ca; font-size: .875rem; line-height: 1.7; }
.footer-links a:hover, .footer-links a:focus-visible { color: #fffaf0; text-decoration: underline; }
.contact .social-links { margin-block: 1.5rem; }
.social-links a { overflow-wrap: anywhere; }
.policy-content { padding-block: clamp(3rem, 6vw, 6rem); max-width: 960px; }
.policy-section { border-bottom: 1px solid var(--line); padding-block: 2rem; scroll-margin-top: 8rem; }
.policy-section h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); letter-spacing: -.025em; }
.policy-section p { font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.policy-section a { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
@media (max-width: 650px) { .footer-links { flex-direction: column; } .policy-section { padding-block: 1.5rem; } }