.nav-portfolio { position: relative; }
.nav-portfolio-label { display: flex; align-items: center; gap: 5px; }
.portfolio-nav-toggle { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; background: transparent; border: 0; color: var(--slate); cursor: pointer; }
.portfolio-nav-toggle { transition: background .35s,color .35s; }
.portfolio-nav-toggle .portfolio-menu-mark { display: block; width: 13px; height: 13px; position: relative; transform: none; }
.portfolio-menu-mark::before,.portfolio-menu-mark::after { content: ''; position: absolute; background: currentColor; }
.portfolio-menu-mark::before { width: 13px; height: 1px; left: 0; top: 6px; }
.portfolio-menu-mark::after { width: 1px; height: 13px; left: 6px; top: 0; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.portfolio-nav-toggle[aria-expanded="true"] .portfolio-menu-mark { transform: none; }
.portfolio-nav-toggle[aria-expanded="true"] .portfolio-menu-mark::after { transform: scaleY(0); }
.portfolio-nav-toggle:hover { background: rgba(168,154,147,.12); }
.portfolio-submenu[hidden] { display: none; }
.portfolio-submenu { position: absolute; left: -22px; top: calc(100% + 20px); min-width: 210px; padding: 12px 22px; background: var(--cotton); border: 1px solid var(--line); box-shadow: 0 15px 35px rgba(35,24,35,.08); }
.main-nav .portfolio-submenu a { display: block; padding: 12px 0; font-size: 12px; }
.main-nav .portfolio-submenu a::after { content: none; }
.main-nav .portfolio-submenu a:hover,.main-nav .portfolio-submenu [aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.home-page .home-offers { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.home-page .home-offer { padding: 35px 25px; min-height: 430px; }
.home-page .home-offer h3 { font-size: clamp(28px,2.5vw,38px); }
.portfolio-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.portfolio-category-image { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #e9e3dc; }
.portfolio-category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.portfolio-category-image > span { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; background: var(--cotton); display: grid; place-items: center; }
.portfolio-category h2 { font-size: 38px; margin: 25px 0 15px; }
.portfolio-category p { max-width: 360px; font-size: 17px; line-height: 1.8; }
.portfolio-category a:hover img { transform: scale(1.035); }
.site-footer .footer-gallery-link { padding-left: 14px; font-size: 13px; opacity: .75; }
@media(max-width:1100px) { .home-page .home-offers { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .nav-portfolio { width: 100%; }
 .main-nav > a,.main-nav .nav-portfolio-label > a { font-size: 28px; letter-spacing: 0; text-transform: none; }
 .nav-portfolio-label { gap: 15px; }
 .nav-portfolio-label > a { flex: 1; }
 .portfolio-nav-toggle { width: 44px; height: 44px; }
 .portfolio-submenu { position: static; padding: 0 0 12px 20px; border: 0; box-shadow: none; }
 .main-nav .portfolio-submenu a { font-size: 18px; padding-block: 11px; }
 .site-header.menu-open .main-nav { overflow-y: auto; }
 .home-page .home-offers,.portfolio-category-grid { grid-template-columns: 1fr; }
 .home-page .home-offer { min-height: 340px; padding: 32px 26px; }
 .portfolio-category-image { aspect-ratio: 4/3; }
}
@media(prefers-reduced-motion:reduce) { .portfolio-category-image img,.portfolio-nav-toggle,.portfolio-menu-mark::after { transition: none; } }