/* Focused refinements; loaded after main.css to preserve the existing theme. */
/* Keep intrinsic image dimensions out of card sizing. */
.services-directory-card, .project-archive-card, .home-service-card {
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
}
.services-directory-media, .project-archive-media, .home-service-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.services-directory-media img, .project-archive-media img, .home-service-media img,
.project-showcase-image img, .next-project-background img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}
.project-showcase-image {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.next-project-link {
    position: relative;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
    min-height: 240px;
    padding: clamp(24px,5vw,64px);
    aspect-ratio: 16 / 6;
    color: #f4f0e8;
    background: #171c1b;
    text-decoration: none;
}
.next-project-background, .next-project-overlay { position: absolute; inset: 0; pointer-events: none; }
.next-project-background { z-index: -2; overflow: hidden; }
.next-project-overlay { z-index: -1; background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.75)); }
.next-project-content { min-width: 0; }
.next-project-content h2 { font-size: clamp(28px,4vw,60px); line-height: 1.1; overflow-wrap: anywhere; }
.project-content { padding: 40px var(--page-pad,24px); }
.project-content-inner { max-width: var(--content-max,1400px); margin-inline: auto; }
.project-content-inner img, .service-content-main img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}
.project-content-inner figure, .service-content-main figure { max-width: 100%; }
@media (max-width: 700px) {
    .next-project-link { aspect-ratio: 4 / 3; min-height: 220px; }
}
.hero { isolation: isolate; }
.hero-media img { display: block; object-position: 50% 44%; }
.hero-overlay {
    background: linear-gradient(180deg,rgba(9,15,16,.65),rgba(9,15,16,.08) 32%,rgba(9,15,16,.78) 100%);
    pointer-events: none;
}
.hero-main h1 {
    font-size: clamp(64px,7.6vw,126px);
    line-height: 1.04;
    letter-spacing: -.055em;
    text-shadow: 0 2px 24px rgba(0,0,0,.2);
}
.hero-topline { flex-wrap: wrap; gap: 16px 28px; }
.hero-topline span { font-size: 12px; opacity: 1; letter-spacing: .16em; }
.hero-bottom p { font-size: 16px; opacity: 1; max-width: 460px; }
.hero-discover { font-size: 12px; min-height: 48px; }
.header-cta { font-size: 12px; letter-spacing: .08em; min-height: 44px; white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: 3px solid #cfac77; outline-offset: 5px; }
.site-header.menu-open { color: #f4f0e8; }
.site-header.menu-open .header-cta, .site-header.menu-open .site-logo { color: #f4f0e8; }
@media (min-width: 901px) and (max-width: 1150px) {
    .header-inner { grid-template-columns: auto 1fr auto; gap: 18px; }
    .site-logo-mark { width: 170px; }
    .desktop-menu { gap: 16px; }
    .desktop-menu a { letter-spacing: .04em; }
}
@media (max-width: 900px) {
    .header-inner { grid-template-columns: minmax(0,1fr) auto auto; gap: 14px; }
    .header-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
    .site-header.menu-open { transform: none; filter: none; }
    .site-header.menu-open .mobile-menu { background: #111 !important; opacity: 1; }
    .mobile-menu-inner { padding-top: calc(106px + env(safe-area-inset-top)); }
    .mobile-menu { min-height: 0; }
    .hero-content { padding-top: 112px; }
}
@media (max-width: 600px) {
    .header-inner { padding-inline: 16px; gap: 10px; }
    .site-logo-mark { width: 130px; max-width: 100%; }
    .header-cta { font-size: 11px; letter-spacing: .01em; }
    .header-cta .cta-arrow { display: none; }
    /* Keep the complete villa in view; the copy continues below on solid ink. */
    .hero { background: #111719; min-height: 0; }
    .hero-media { inset: 78px 0 auto; aspect-ratio: 1672 / 941; }
    .hero-media img { object-fit: contain; object-position: center; }
    .hero-overlay { background: linear-gradient(180deg,transparent 65%,#111719 100%); inset: 78px 0 auto; aspect-ratio: 1672 / 941; }
    .hero-content { min-height: 0; padding: calc(78px + 56.28vw) 22px 36px; gap: 24px; }
    .hero-topline { padding-top: 0; gap: 12px; }
    .hero-topline span { font-size: 12px; letter-spacing: .07em; }
    .hero-main { padding-top: 0; margin: 0; }
    .hero-main h1 { font-size: clamp(42px,11vw,64px); line-height: 1.08; }
    .hero-bottom { margin: 0; grid-template-columns: 1fr; gap: 22px; }
    .hero-bottom p { font-size: 16px; }
    .hero-discover { width: 100%; }
    body.home .site-header:not(.scrolled) { background: #111719; }
}