/* Full-width navigation and hero areas with responsive edge spacing. */
.header { position: relative; z-index: 20; }
.nav-dropdown { position: relative; }
.nav-dropdown summary { display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; padding-block: 12px; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::marker { content: ''; }
.nav-dropdown-active summary { color: #7c5b27; }
.nav-dropdown summary:hover { color: #9a6d28; }
.nav-dropdown summary>span { transition: transform .2s; }
.nav-dropdown[open] summary>span { transform: rotate(180deg); }
.nav-submenu { position: absolute; top: 100%; left: -20px; width: 220px; padding: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 15px 35px #162d231f; z-index: 25; }
.nav-submenu a { display: flex; justify-content: space-between; gap: 25px; padding: 13px 12px; font-size: 12px; }
.nav-submenu a:hover,.nav-submenu a:focus-visible { background: var(--cream); }
.nav-submenu a>span { color: #73845c; }
.fluid-shell {
    width: 100%;
    max-width: none;
    padding-inline: clamp(20px, 4vw, 72px);
}
.header.fluid-shell { gap: clamp(16px, 3vw, 56px); }
.header #navigation { gap: clamp(16px, 2vw, 36px); }
.hero-grid.fluid-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 80px);
    min-height: clamp(600px, 43vw, 760px);
}
.hero-grid.fluid-shell .hero-copy { align-self: center; }
.hero-grid.fluid-shell .hero-photo { align-self: stretch; }
.about-intro-grid.fluid-shell {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 80px);
}
@media (max-width: 1100px) {
    .header #navigation { gap: 16px; }
}
@media (max-width: 760px) {
    .nav-dropdown { width: 100%; }
    .nav-dropdown summary { justify-content: space-between; padding-block: 0; }
    .nav-submenu { position: static; width: 100%; box-shadow: none; border: 0; border-left: 2px solid var(--line); padding: 0 0 0 10px; margin-top: 16px; }
    .header #navigation {
        left: 0;
        right: 0;
        top: 100%;
        padding: 24px clamp(20px, 4vw, 72px);
    }
    .hero-grid.fluid-shell,
    .about-intro-grid.fluid-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-height: 0;
    }
    .hero-grid.fluid-shell .hero-photo {
        height: clamp(300px, 90vw, 440px);
    }
    .about-intro-grid.fluid-shell { gap: 20px; }
}