/* Vertex Studio — image-first editorial direction */
:root{--paper:#f7f6f2;--ink:#181a19;--muted:#666864;--line:#d4d2ca;--soft:#eceae4;--accent:#5b493e}
html{background:var(--paper)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.65;background:var(--paper);color:var(--ink)}
h1,h2{font-family:"Iowan Old Style","Baskerville","Times New Roman",serif;font-weight:400;letter-spacing:-.045em;line-height:1.02}
h3{letter-spacing:-.015em}
em{font-family:inherit;font-style:italic}
.eyebrow{font-size:.875rem;letter-spacing:.14em;font-weight:500}
header{position:sticky;top:0;z-index:20;padding:20px 5%;border-bottom:1px solid var(--line);background:rgba(247,246,242,.94);backdrop-filter:blur(14px)}
.brand{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:.14em;font-size:1.65rem}
.brand span{font-size:.64rem;letter-spacing:.55em;margin-left:.55em}
nav{gap:32px}
nav a{font-size:.875rem}
.hero{height:calc(100svh - 84px);min-height:620px;max-height:1050px;background:#202321}
.hero:after{background:linear-gradient(180deg,rgba(0,0,0,.02) 20%,rgba(10,12,11,.72) 100%)}
.hero-copy{left:5%;bottom:11%}
.hero h1{font-size:clamp(3.4rem,7.2vw,8rem);max-width:1150px;color:#fff;text-wrap:balance}
.hero-links{display:flex;gap:40px;flex-wrap:wrap}
.hero .line-link{color:#fff;margin-top:30px}
.image-note{right:4%;bottom:22px;font-size:.8rem;letter-spacing:.03em}
.section{padding:125px 5%}
.intro{grid-template-columns:minmax(180px,.7fr) minmax(0,2fr);gap:70px;padding-top:140px;padding-bottom:150px}
.intro h2{font-size:clamp(3rem,5.6vw,6rem);max-width:900px}
.intro p:not(.eyebrow){font-size:1.08rem;max-width:620px;margin-top:38px}
.projects{padding-top:20px}
.section-heading{padding-top:30px;border-top:1px solid var(--line);margin-bottom:80px;align-items:flex-start}
.section-heading h2{font-size:clamp(3rem,5.5vw,6rem)}
.section-heading>p{max-width:360px;font-size:1rem;margin-top:8px}
.project-grid{gap:110px 42px}
.project.wide{grid-column:1/-1}
.photo{background:#dfddd6}
.photo img{height:auto;aspect-ratio:4/3;object-fit:cover}
.wide .photo img{height:auto;aspect-ratio:16/9}
.photo span{bottom:18px;right:18px;background:rgba(247,246,242,.94);padding:11px 18px;font-size:.85rem;transition:background .25s,color .25s}
.project a:hover .photo span{background:var(--ink);color:#fff}
.caption{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.caption h3{font-size:1.28rem}
.caption p,.credit,.image-note,.studio-image span{font-size:.875rem}
.credit{line-height:1.6}
.offset{padding-top:120px}
.studio{background:#1d201f}
.studio-copy{padding:110px 11%}
.studio-copy h2{font-size:clamp(3rem,5vw,5.5rem)}
.studio-copy p:not(.eyebrow){font-size:1.02rem}
.studio-image img{object-position:center}
.services .section-heading{margin-bottom:30px}
.service-list article{grid-template-columns:70px minmax(220px,.8fr) minmax(280px,1fr);padding:34px 0}
.service-list h3{font-size:1.25rem}
.contact{background:#e8e6df}
.contact h2{font-size:clamp(3.6rem,7vw,7.8rem);max-width:1100px}
.contact-bottom{border-top:1px solid var(--line);padding-top:42px}
.contact-button{background:var(--ink);padding:19px 27px;transition:background .2s}
.contact-button:hover{background:var(--accent)}
.area-columns{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:40px;max-width:1050px}
.service-area{border-bottom:1px solid var(--line);padding-top:100px;padding-bottom:100px}
footer{padding:60px 5%}
.detail{max-width:1700px;padding:70px 5% 120px}
.detail .back{display:inline-block;margin-bottom:35px}
.detail h1{max-width:1250px;font-size:clamp(3.4rem,7vw,7.5rem);margin:24px 0 30px;text-wrap:balance}
.detail>.eyebrow{padding-bottom:24px;border-bottom:1px solid var(--line)}
.detail>.lead{max-width:850px;margin:40px 0 60px;font-size:1.2rem;line-height:1.7;color:#474a47}
.detail>img{max-height:86svh;object-fit:contain;background:var(--soft);margin:0}
.detail-info{padding:90px 0 110px;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:12%;border-bottom:1px solid var(--line)}
.detail-info h2{font-size:clamp(2.7rem,4.6vw,5.2rem)}
.detail-info h3{font-size:1.15rem;margin-bottom:22px}
.detail-info p{color:#4f524f}
.gallery{margin:90px 0 110px;padding-top:0}
.gallery>h2{font-size:clamp(2.8rem,5vw,5.5rem)}
.gallery>p{max-width:620px;margin:22px 0 48px}
.gallery-grid{gap:75px 34px}
.gallery figure:first-child{grid-column:1/-1}
.gallery img{max-height:86svh;object-fit:contain;background:var(--soft);transition:opacity .2s}
.gallery a:hover img{opacity:.9}
.gallery figcaption{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:14px 0 18px}
.gallery figcaption span{text-align:right;font-size:.82rem}
.project-navigation{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:80px 0 45px;background:var(--line);border:1px solid var(--line)}
.project-navigation a{display:flex;flex-direction:column;gap:9px;padding:28px 30px;background:var(--paper);transition:background .2s}
.project-navigation a:last-child{text-align:right;align-items:flex-end}
.project-navigation a:hover{background:var(--soft)}
.project-navigation span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.project-navigation strong{font-size:1rem;font-weight:500}
.image-viewer{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:70px 3% 30px;border:0;background:#151515;color:white}
.image-viewer::backdrop{background:#151515}
.viewer-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:16px;height:100%}
.viewer-stage figure{margin:0;min-width:0}
.viewer-stage img{max-height:calc(100dvh - 170px);width:100%;object-fit:contain;margin:0}
.viewer-stage figcaption{font-size:.875rem;text-align:center;padding:16px 0;line-height:1.5}
.image-viewer button{font:inherit;color:white;background:transparent;border:1px solid #777;cursor:pointer;min-height:48px;min-width:48px}
.viewer-close{position:absolute;right:4%;top:18px;padding:8px 16px}
@media(max-width:900px){.section{padding:90px 6%}.intro{grid-template-columns:1fr;gap:12px;padding-top:100px;padding-bottom:110px}.section-heading{margin-bottom:50px}.project-grid{gap:70px 26px}.studio-copy{padding:75px 7%}.service-list article{grid-template-columns:50px 1fr}.service-list p{grid-column:2}.detail{padding:55px 6% 85px}.detail-info{grid-template-columns:1fr;gap:38px;padding:65px 0}.gallery-grid{gap:50px 24px}}
@media(max-width:650px){header{padding:17px 5%}.brand{font-size:1.28rem}.brand span{font-size:.54rem}nav{gap:13px}nav a{font-size:.8rem}.hero{min-height:590px;height:78svh}.hero-copy{left:6%;right:6%;bottom:12%}.hero h1{font-size:clamp(3rem,13vw,4.4rem)}.hero-links{gap:0;display:block}.hero-links .line-link{margin-right:24px}.image-note{left:6%;right:6%;font-size:.72rem}.section{padding:72px 6%}.intro{padding-top:85px;padding-bottom:90px}.project-grid{grid-template-columns:1fr;gap:58px}.wide{grid-column:auto!important}.offset{padding-top:0}.photo img,.wide .photo img{aspect-ratio:4/3}.caption{display:flex}.caption p{text-align:right;max-width:145px;margin:0}.studio-copy{padding:65px 6%}.service-area{padding-top:70px;padding-bottom:70px}.area-columns{grid-template-columns:1fr;gap:22px}.contact-bottom{grid-template-columns:1fr;gap:32px}.detail{padding:42px 6% 70px}.detail h1{font-size:clamp(3rem,13vw,4.6rem)}.detail>.lead{font-size:1.05rem;margin:30px 0 40px}.detail-info{padding:50px 0 65px}.gallery{margin:65px 0 75px}.gallery-grid{grid-template-columns:1fr;gap:38px}.gallery figure{grid-column:auto!important}.gallery figcaption{display:block}.gallery figcaption span{text-align:left;margin-top:5px}.project-navigation{grid-template-columns:1fr;margin:60px 0 35px}.project-navigation a:last-child{text-align:left;align-items:flex-start}.viewer-stage{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}.image-viewer button{min-width:40px}footer{padding:45px 6%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img,.gallery img{transition:none}}