@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@font-face{font-family:Instrument Serif;src:url(fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF;font-display:swap}
@font-face{font-family:Instrument Serif;src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
@font-face{font-family:DM Sans;src:url(fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF;font-display:swap}
@font-face{font-family:DM Sans;src:url(fonts/dm-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F;font-display:swap}
:root{color-scheme:dark;--bg:#0a0908;--text:#eee8de;--muted:#cec6ba;--line:#756e65;--gold:#d8a365;--gutter:clamp(1.35rem,4.6vw,6rem);--display:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 "DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
img{display:block;width:100%;object-fit:cover}
h1,h2,p,ul{margin:0}
h1,h2,.brand{font-family:var(--display);font-weight:400}
h1{font-size:clamp(3.2rem,8vw,9rem);line-height:.92;letter-spacing:-.018em}
h2{font-size:clamp(2.55rem,5.9vw,6rem);line-height:.98;letter-spacing:-.012em}
.header,.footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:clamp(1rem,2.65vw,2.7rem) var(--gutter);z-index:2}
.header.over-hero{position:absolute;inset:0 0 auto;background:linear-gradient(#080706d6,transparent)}
.brand{font-size:clamp(1.35rem,3.15vw,2.6rem);letter-spacing:.23em;white-space:nowrap;line-height:1}
.header nav,.footer nav{display:flex;gap:clamp(.9rem,3vw,3rem);align-items:center;font-size:clamp(.78rem,1.56vw,1.1rem)}
nav a:hover,.line-link:hover,.service-list a:hover,.blog-links a:hover{color:var(--gold)}
.menu-toggle{display:none}
.hero{position:relative;display:flex;align-items:center;isolation:isolate;min-height:clamp(26rem,66vw,56rem);overflow:hidden}
.hero-art{position:absolute;inset:0 0 0 29%;z-index:-1}
.hero-art img{height:100%;object-position:center 57%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),#0a0908c9 12%,transparent 54%),linear-gradient(0deg,#0a0908a6,transparent 22%)}
.hero-copy{padding:4rem var(--gutter) 2rem}
.hero h1{margin-bottom:clamp(1.4rem,3vw,2.9rem)}
.line-link{display:inline-flex;align-items:center;gap:1rem;padding:0 0 .55em;background:none;border:0;border-bottom:1px solid var(--line);font-size:clamp(.9rem,2.1vw,1.3rem)}
.inset{margin-inline:var(--gutter)}
.rule-title{display:flex;align-items:baseline;gap:clamp(.8rem,2.5vw,2.5rem)}
.rule-title>span,.project-controls i{flex:1;border-top:1px solid var(--line)}
.rule-title>a{font-size:clamp(.7rem,1.65vw,1rem);color:var(--muted)}
.services{position:relative;isolation:isolate;min-height:clamp(20rem,59vw,49rem);display:flex;align-items:flex-start}
.service-copy{padding:clamp(1.1rem,3vw,3rem) 0 2rem var(--gutter);width:48%}
.service-list{list-style:none;padding:0;margin-top:clamp(1.2rem,4.4vw,4.5rem);width:max-content;max-width:100%}
.service-list a{display:block;font-size:clamp(1rem,3.05vw,2.45rem);padding:.63em 0;border-bottom:1px solid var(--line)}
.service-art{position:absolute;z-index:-1;inset:0 0 0 auto;width:69%;height:100%;clip-path:polygon(34% 0,100% 0,100% 100%,0 100%);object-position:50% 64%}
.portfolio{padding:clamp(1.7rem,4.4vw,4rem) 0 clamp(1.7rem,4.4vw,4.5rem)}
.project-track{display:flex;align-items:end;gap:clamp(.5rem,1.15vw,1.3rem);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:clamp(.9rem,2.5vw,2.5rem) 0 .35rem}
.project-track::-webkit-scrollbar{display:none}
.project-card{position:relative;display:block;flex:0 0 32vw;max-width:38rem;scroll-snap-align:start}
.project-card img{height:clamp(12rem,39vw,31rem);clip-path:polygon(0 0,75% 0,100% 14%,100% 100%,0 100%)}
.project-card span{display:block;background:#0d0c0bed;padding:.45em var(--gutter);font-size:clamp(1rem,2.8vw,2rem)}
.project-card:first-child{flex-basis:61vw;max-width:68rem}
.project-card:first-child img{height:clamp(11rem,35vw,29rem);clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 48%)}
.project-card:first-child span,.blog-feature span{position:absolute;left:0;bottom:0;clip-path:polygon(0 0,100% 0,92% 100%,0 100%);padding-right:3rem}
.project-card:nth-child(2){display:grid;grid-template-columns:60% 1fr;align-items:center}
.project-card:nth-child(2) span{font:400 clamp(1rem,2.75vw,2.4rem)/1.1 var(--display);padding:0 .65em}
.project-card:nth-child(2) span::before{content:"";display:block;width:1.5em;border-top:1px solid var(--gold);margin-bottom:.65em}
.project-card:hover img,.blog-feature:hover img{filter:brightness(1.1)}
.project-controls{display:flex;align-items:center;gap:clamp(.65rem,3vw,3rem);margin:.85rem var(--gutter) 0;font-size:clamp(.68rem,1.65vw,1rem)}
.project-controls button{border:0;background:none;padding:.15rem;font-size:1.55rem;line-height:1}
.project-controls progress{appearance:none;width:34%;height:3px;background:var(--line);border:0;border-radius:4px}
progress::-webkit-progress-bar{background:var(--line);border-radius:4px}
progress::-webkit-progress-value{background:var(--gold);border-radius:4px}
progress::-moz-progress-bar{background:var(--gold);border-radius:4px}
.about{display:grid;grid-template-columns:56% 44%;align-items:center;min-height:clamp(15rem,36vw,33rem)}
.about img{height:100%;max-height:34rem;min-height:14rem;clip-path:polygon(0 0,100% 0,70% 100%,0 100%);object-position:50% 64%}
.about>div{padding:1rem var(--gutter) 1rem 7%}
.about h2::after,.blog-feature::after{content:"";display:block;width:2.25rem;border-top:1px solid var(--gold);margin:.48em 0}
.about p{font-size:clamp(.8rem,1.85vw,1.25rem);line-height:1.45;margin-bottom:1.15em}
.blog{padding-top:clamp(1rem,3vw,3rem)}
.blog-grid{display:grid;grid-template-columns:1.18fr .92fr;gap:clamp(1.6rem,8vw,8rem);margin-top:clamp(1rem,3vw,3rem)}
.blog-feature{position:relative;display:block;padding-bottom:1.5rem}
.blog-feature img{height:clamp(10rem,25vw,24rem)}
.blog-feature span{background:var(--bg);bottom:1rem;padding:.15em 2em .16em .25em;font:400 clamp(1.65rem,3.7vw,3.4rem)/1 var(--display)}
.blog-feature::after{position:absolute;bottom:0;left:.4rem;margin:0}
.blog-links a{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.85em 0;font-size:clamp(1rem,2.65vw,2.1rem)}
.contact-strip{padding:clamp(1.5rem,5vw,5rem) 0 clamp(1.1rem,4vw,4rem)}
.contact-strip .line-link{margin-top:1rem}
.footer{border-top:1px solid var(--line);margin:0 var(--gutter);padding-inline:0}
.footer .brand{font-size:clamp(1rem,2.4vw,1.8rem)}
.footer nav{font-size:clamp(.72rem,1.4vw,1rem)}
.inner{margin:auto;max-width:1440px;padding:3rem var(--gutter) 5rem;min-height:64vh}
.inner h1{font-size:clamp(3rem,7.5vw,7rem);margin:.3em 0 .5em}
.detail img{max-height:44rem;object-fit:contain;object-position:left;background:#100e0b}
.detail p,.inquiry p{white-space:pre-wrap}
.detail p{max-width:55rem;margin:1.7rem 0;font-size:1.2rem}
.listing{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem}
.listing img{aspect-ratio:4/3;clip-path:polygon(0 0,89% 0,100% 15%,100% 100%,0 100%)}
.listing h2,.inquiry h2{font-size:2.3rem;padding:.4em 0}
.pagination{display:flex;gap:1.5rem;list-style:none;padding:1.5rem 0}
.pagination .disabled{opacity:.55}
.form-page form{display:grid;gap:1rem;max-width:40rem}
.form-page label{display:grid;gap:.35rem}
.form-page input,.form-page textarea,.form-page select{background:#171410;color:var(--text);border:1px solid var(--line);padding:.65rem .8rem;width:100%;border-radius:0}
.form-page .checkbox{display:flex;align-items:center}
.form-page .checkbox input{width:auto}
.action{display:inline-block;background:var(--gold);border:1px solid var(--gold);color:#120e09;padding:.65rem 1.1rem;width:max-content}
.errors,.status{margin:0 0 1.4rem;padding:1rem 1.5rem;border:1px solid var(--line)}
.errors{color:#ffb2a1}
.status{color:#e3c397}
.admin-nav{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.admin-list{list-style:none;padding:1rem 0}
.admin-list li,.inquiry{padding:1rem 0;border-bottom:1px solid var(--line)}
.admin-list li{display:flex;justify-content:space-between;gap:1rem}
.admin-list span{color:var(--muted)}
.admin-photo{width:10rem}
.delete-form{margin-top:1.5rem}
@media(max-width:570px){
    .header{padding-block:1.2rem}
    .menu-toggle{display:block;background:#15120f;border:1px solid var(--line);padding:.3rem .6rem;font-size:.88rem}
    .header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:1.1rem var(--gutter);background:var(--bg);flex-direction:column;align-items:flex-start;font-size:1rem}
    .menu-toggle[aria-expanded=true]+nav{display:flex}
    .header{position:relative}
    .hero-art{left:7%}
    .hero-art::after{background:linear-gradient(90deg,#0a0908e8,transparent 86%),linear-gradient(0deg,#0a0908a0,transparent 25%)}
    .services{min-height:19rem}
    .service-copy{width:61%}
    .service-art{width:65%;opacity:.72;clip-path:polygon(45% 0,100% 0,100% 100%,13% 100%)}
    .project-card{flex-basis:53vw}
    .project-card:first-child{flex-basis:74vw}
    .project-card:nth-child(2){grid-template-columns:1fr}
    .project-card:nth-child(2) span{padding:.45em .5em}
    .project-card:nth-child(2) span::before{display:none}
    .about{grid-template-columns:44% 56%}
    .about img{clip-path:polygon(0 0,100% 0,75% 100%,0 100%)}
    .about>div{padding-left:0}
    .blog-grid{grid-template-columns:1fr;gap:1rem}
    .footer{align-items:flex-start;flex-direction:column}
    .footer nav{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.contact-details{display:flex;flex-wrap:wrap;gap:.65rem 1.5rem;margin-bottom:1.8rem;font-style:normal}
.contact-details a{text-decoration:underline;text-underline-offset:.2em}
.detail-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem;margin:2rem 0}
.detail-gallery img{aspect-ratio:4/3;object-fit:cover}

/* Arch.az Montserrat typography */
:root, body.manage {
    --display: "Montserrat", system-ui, sans-serif;
}
body, body.manage {
    font-family: var(--display);
}
body :is(button, input, select, textarea) {
    font-family: inherit;
}
body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.18;
}
body :is(nav a, button, .action, .brand) {
    font-family: var(--display);
    font-weight: 600;
}
body .hero h1 {
    font-size: clamp(2.65rem, 6.2vw, 7rem);
    letter-spacing: -.045em;
}