/* V36 — centered services, complete archive and contact-led footer. */
/* Vivid screen palette informed by Pantone Spring/Summer 2022. Custom HEX values, not official Pantone equivalents. */
.v36 [data-category="space"]{--category-bg:#31c79b;--category-ink:#10271f}
.v36 [data-category="interaction"]{--category-bg:#335cff;--category-ink:#fff}
.v36 [data-category="live"]{--category-bg:#ff8c54;--category-ink:#321b12}
.v36 [data-category="system"]{--category-bg:#a98af4;--category-ink:#251b38}
.v36 .v33-services-layout{width:84%;margin-inline:auto;grid-template-columns:24% minmax(0,1fr);column-gap:4%}
.v36 .v33-footer{border-top:1px solid #151515;margin-top:0;padding-top:0}
.v36 .v30-colophon{border-top:0;padding-top:64px}
.v36 .v30-colophon-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:0}
.v36 .v36-contact-heading{grid-column:1 / span 2}
.v36 .v36-contact-heading h2{margin:0;font:400 clamp(36px,2.4vw,60px)/1.08 var(--sans);letter-spacing:-.055em}
.v36 .v36-contact-links{grid-column:3;gap:18px}
.v36 .v36-contact-links a{font-size:clamp(18px,1.15vw,30px);line-height:1.5;letter-spacing:-.025em}
.v36 .v36-contact-links .v36-contact-inquiry{font-size:clamp(18px,1vw,26px);text-decoration:underline;text-underline-offset:6px}
.v36 .v36-social{grid-column:4;padding-left:15%}
.v36 .v30-colophon-bottom{padding-top:28px;border-top:1px solid #c4c4c4}
@media(max-width:1000px){
 .v36 .v33-services-layout{width:100%}
 .v36 .v30-colophon-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
 .v36 .v36-contact-heading{grid-column:1/-1}
 .v36 .v36-contact-links{grid-column:1}
 .v36 .v36-social{grid-column:2;padding-left:15%}
}
@media(max-width:600px){
 .v36 .v33-services-layout{grid-template-columns:1fr;gap:20px}
 .v36 .v33-footer{margin-top:0;padding-top:0}
 .v36 .v30-colophon{padding-top:38px}
 .v36 .v30-colophon-grid{grid-template-columns:1fr;gap:32px}
 .v36 .v36-contact-links,.v36 .v36-social{grid-column:1;padding-left:0}
 .v36 .v36-contact-links a{font-size:20px}
}
/* Match the preview to the four service rows, independent of image ratio. */
@media(min-width:601px){
 .v36 .v33-service-preview{align-self:stretch;aspect-ratio:auto;height:auto;min-height:0;max-height:none}
 .v36 .v30-service-list>a:first-child{margin-top:0;padding-top:0}
 .v36 .v30-service-list>a:last-child{padding-bottom:0}
}

/* Artwork closes the main content; Contact Us begins the footer. */
.v36 main>.v30-artwork{margin:clamp(80px,4.5vw,150px) 0 0;padding:0;width:100%;max-width:none}
@media(max-width:600px){.v36 main>.v30-artwork{margin-top:60px}}

/* Clear section headings without auxiliary dates or project totals. */
.v36 #services-title,.v36 #projects-title{font:500 clamp(16px,.85vw,23px)/1.35 var(--sans);letter-spacing:.025em}
@media(max-width:600px){.v36 #services-title,.v36 #projects-title{font-size:16px}}

/* Always-visible project navigation, one quiet toolbar. */
.v36 #project-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 36px;border-top:0;padding-top:0;margin-top:24px;margin-bottom:30px}
.v36 .v30-search{margin-top:0;gap:24px;flex-wrap:wrap}
.v36 .v30-search label{font-size:13px;gap:12px}
.v36 .v30-search input{width:230px}
.v36 .v30-search select{width:130px}
.v36 .v30-filters>button[aria-pressed="true"]{outline-width:1px;outline-offset:3px}
.v36 .v30-colophon-grid>.v36-contact-links{gap:14px}
.v36 .v30-colophon-grid>.v36-contact-links>span{margin-bottom:0}
@media(min-width:1001px){.v36 .v36-contact-heading{padding-top:35px}}
@media(max-width:600px){
 .v36 #project-tools{gap:18px;margin-top:20px;margin-bottom:24px}
 .v36 .v30-filters{gap:6px 12px}
 .v36 .v30-search{width:100%;gap:10px}
 .v36 .v30-search label{width:100%;justify-content:space-between}
 .v36 .v30-search input,.v36 .v30-search select{width:76%}
}

/* Both section labels share the right-hand third of the page grid. */
.v36 #services>.v30-eyebrow,.v36 #projects>.v30-eyebrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.v36 #services-title,.v36 #projects-title{grid-column:3;justify-self:end;text-align:right}
/* A full-width inset rule separates the projects from artwork. */
.v36 main>.v30-artwork::before{content:"";display:block;height:1px;background:#bcbcbc;width:calc(100% - 2 * var(--v30-gutter));margin-left:var(--v30-gutter);margin-bottom:clamp(56px,3.5vw,116px)}
@media(max-width:600px){
 .v36 #services-title,.v36 #projects-title{grid-column:2/4;justify-self:end}
 .v36 main>.v30-artwork::before{margin-bottom:42px}
}
/* Keep project images still on hover; center captions beneath wide images. */
.v36 .v30-card>a:hover img,.v36 .v30-card>a:focus-visible img{transform:none}
.v36 .v30-card-media img{transition:filter .25s}
@media(min-width:601px){
 .v36 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-info{display:block;position:relative;padding-inline:64px;text-align:center}
 .v36 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-role{margin-inline:auto}
 .v36 .v30-card:is([data-span="8"],[data-span="12"]) .v33-project-categories{justify-content:center}
 .v36 .v30-card:is([data-span="8"],[data-span="12"]) .v30-card-year{position:absolute;right:20px;top:16px}
}

/* Commercial reads as a distinct division tab. */
.v36 .site-nav a.nav-commercial{background:#111;color:#fff;border-left:0;border-radius:3px;padding:4px 14px;line-height:1.5;text-decoration:none}
.v36 .site-nav a.nav-commercial:hover{background:#303030;color:#fff;text-decoration:none}
.v36 .site-nav a.nav-commercial:focus-visible{outline:2px solid #111;outline-offset:4px}
@media(max-width:860px){.v36 .site-nav a.nav-commercial{padding:3px 7px;margin-left:8px}}
@media(max-width:380px){.v36 .site-nav a.nav-commercial{padding-inline:5px;margin-left:2px}}
/* Keep the division separator independent of the Commercial tab surface. */
.v36 .site-nav a.nav-commercial{position:relative}
.v36 .site-nav a.nav-commercial::before{content:"";position:absolute;left:calc(clamp(36px,5.5vw,112px)/-2);top:50%;transform:translateY(-50%);height:1.7em;width:1px;background:#c9c9c9;pointer-events:none}
@media(max-width:860px){.v36 .site-nav a.nav-commercial::before{left:-8px;height:1.5em}}
@media(max-width:380px){.v36 .site-nav a.nav-commercial::before{left:-6px}}