:root{--rose:#d6afa9}
.hero-mobile-art{display:none}
.gallery{display:flex;flex-direction:column;gap:38px}
.gallery[hidden],.portfolio-controls[hidden]{display:none}
.gallery .portfolio-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.gallery .landscape-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery .landscape-row .work-picture{aspect-ratio:16/9}
.video-project.landscape-project{width:min(1200px,94vw)}
.video-project.landscape-project #project-media video{width:100%;max-height:68vh;object-fit:contain}
.works .section-description,.gallery .work-caption small{color:var(--rose)}
.contact .eyebrow{color:var(--rose)}
.portfolio-controls{display:flex;justify-content:flex-end;margin-top:24px}
.portfolio-controls-bottom{justify-content:center;margin-top:38px}
.portfolio-toggle{color:var(--rose);background:transparent;border:1px solid #d6afa966;padding:14px 20px;cursor:pointer;font-size:14px;line-height:1.5;transition:background .2s}
.portfolio-toggle:hover{background:#d6afa912}
.portfolio-toggle:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
@media(max-width:700px){
 .gallery .portfolio-row{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
 .hero{min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .hero>.hero-art{display:none}
 .hero-content{padding:38px 5% 30px}
 .hero h1{font-size:clamp(48px,11vw,68px);line-height:1.03;margin:22px 0 14px}
 .hero-mobile-art{display:block;position:relative;width:111.12%;margin:0 -5.56%;aspect-ratio:5/4;overflow:hidden}
 .hero-mobile-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% center}
 .hero-mobile-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 15%,transparent 90%,var(--bg))}
 .hero .intro{max-width:none;margin:18px 0 26px;font-size:16px;line-height:1.75}
 .hero-bottom{position:static;margin:0 5%;padding:20px 0}
 .hero-content>.eyebrow{font-size:12px;letter-spacing:.1em}
 .portfolio-controls{justify-content:flex-start}
 .portfolio-controls-bottom{justify-content:center}
}
@media(max-width:480px){
 .gallery .portfolio-row{grid-template-columns:minmax(0,1fr)}
 .hero h1{font-size:clamp(46px,12vw,58px)}
 .hero-mobile-art{aspect-ratio:1.3}
}

/* Unified expertise cards and matching contact actions. */
.hero-composition{display:contents}
.contact-actions{display:flex;flex-direction:column;align-items:center;gap:14px}
.contact-actions .button{width:min(100%,365px)}
.contact-actions .telegram-button{color:var(--rose);border-color:var(--rose);background:#d6afa908}
.contact-actions .telegram-button:hover{background:var(--rose);color:var(--bg)}
@media(max-width:700px){
 .hero-composition{display:grid;grid-template-columns:minmax(0,1fr);width:111.12%;margin:22px -5.56% 0;isolation:isolate}
 .hero-composition .hero-mobile-art{grid-area:1/1;aspect-ratio:1.3;width:100%;margin:0;z-index:0}
 .hero-composition h1{grid-area:1/1;align-self:center;justify-self:start;z-index:1;width:52%;max-width:none;padding:0 0 0 5%;margin:0;font-size:clamp(35px,10vw,64px);line-height:1.08;letter-spacing:-.035em;text-shadow:0 1px 16px #071f1c55}
 .hero-composition .hero-mobile-art img{object-position:85% center}
 .hero-composition .hero-mobile-art:after{background:linear-gradient(0deg,var(--bg),transparent 15%,transparent 90%,var(--bg))}
}

/* Keep portrait previews comfortable on laptop screens. */
.gallery .portrait-row{width:min(100%,1100px);margin-inline:auto}
@media(min-width:701px){
 .gallery{width:100%;max-width:1200px;margin-inline:auto}
 .gallery .portrait-row{width:100%;max-width:none}
}
@media(max-width:480px){.gallery .portrait-row{max-width:320px}}

.gallery .work-caption small{font-size:1rem;line-height:1.5;margin-top:8px}
.gallery .landscape-row.single-project-row{grid-template-columns:minmax(0,1fr);width:calc((100% - 28px)/2);margin-inline:auto}
@media(max-width:700px){.gallery .landscape-row.single-project-row{width:calc((100% - 20px)/2)}}
@media(max-width:480px){.gallery .landscape-row.single-project-row{width:100%}}

/* Copy and accents for the portfolio, services and contact sections. */
.portfolio-toggle{color:var(--gold)}
.works .side-note,.services .side-note{font-size:1.0625rem}
.works .section-description{font-size:1.125rem;line-height:1.65}
.services .service-foot p,.contact-handle{font-size:1rem;line-height:1.7}
.services h2 em{color:#967432}
.service-card:hover{border-color:var(--rose)}

@media(min-width:701px){
 .gallery .portrait-row.two-project-row{grid-template-columns:repeat(6,minmax(0,1fr))}
 .gallery .portrait-row.two-project-row>.work:first-child{grid-column:2 / span 2}
 .gallery .portrait-row.two-project-row>.work:nth-child(2){grid-column:4 / span 2}
}