/* The same typeface as the wordmark, with a quieter sentence-case navigation. */
.dimension-site header{position:sticky;min-height:106px;padding-top:26px;padding-bottom:8px}
.dimension-site nav a{font-family:'Vinaches Grotesk',Arial,sans-serif;font-size:.98rem;font-weight:500;letter-spacing:-.025em;text-transform:none;border-left:0;padding:20px 17px}
.dimension-site nav a[aria-current=page]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.dimension-site .site-languages{position:absolute;top:8px;right:30px;display:flex;align-items:center;gap:15px;z-index:1;font-family:'Vinaches Grotesk',Arial,sans-serif}
.dimension-site .site-languages a{display:inline-flex;align-items:center;justify-content:center;min-width:23px;min-height:24px;padding:2px 0;font-size:.64rem;line-height:1;letter-spacing:.07em;text-decoration:none;color:inherit;opacity:.55;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
.dimension-site .site-languages a:hover,.dimension-site .site-languages a:focus-visible,.dimension-site .site-languages a[aria-current=true]{opacity:1;border-bottom-color:currentColor}
.dimension-site .site-languages a:focus-visible{outline:1px solid currentColor;outline-offset:3px}
@media(max-width:1100px) and (min-width:961px){.dimension-site nav a{font-size:.9rem;padding-left:12px;padding-right:12px}}
@media(max-width:960px){.dimension-site header{min-height:102px;padding:34px 24px 16px}.dimension-site .site-languages{top:5px;right:24px;gap:13px}.dimension-site nav a{font-size:1.08rem;padding:17px 14px}.dimension-site .menu{font-family:'Vinaches Grotesk',Arial,sans-serif;font-size:1rem;letter-spacing:-.02em}}
@media(max-width:480px){.dimension-site header{padding-left:20px;padding-right:20px}.dimension-site .site-languages{right:20px}.dimension-site .brand{font-size:1.4rem}.dimension-site .brand span{font-size:.59rem;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.dimension-site .site-languages a{transition:none}}

/* Signature accent: only the wordmark punctuation uses turquoise. */
.dimension-site .brand-dot{display:inline;color:#36b8b0!important;font:inherit;letter-spacing:inherit;font-style:normal}

/* The two lowercase i tittles share the signature turquoise. */
.dimension-site .footer-brand{text-transform:none}
.dimension-site .footer-brand .brand-letter-i{display:inline-block;line-height:1;color:inherit}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .dimension-site .footer-brand .brand-letter-i{background:linear-gradient(to bottom,#36b8b0 0 .32em,currentColor .32em 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
}

.dimension-site .project-meta .project-honour{font-size:.9rem;font-weight:500;line-height:1.5;letter-spacing:.015em;color:inherit;margin:-8px 0 18px}

.dimension-site .service-photo .service-loop{display:block;width:100%;height:100%;object-fit:cover;transform:translate3d(var(--service-image-x,0px),var(--service-image-y,0px),0) scale(1);transition:transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.dimension-site .service summary:hover .service-loop{transform:translate3d(var(--service-image-x,0px),var(--service-image-y,0px),0) scale(1.025)}
@media(prefers-reduced-motion:reduce){.dimension-site .service-photo .service-loop{transition:none}}

/* Contact follows the same navigation treatment as its peers. */
.dimension-site header nav a:last-child{background:transparent;color:inherit;margin-left:0;padding:20px 17px;border:0;border-radius:0}
.dimension-site header nav a:last-child:hover,.dimension-site header nav a:last-child[aria-current=page]{background:#e1e1e1;color:#151515}
.dimension-site.home-contrast header nav a:last-child:hover,.dimension-site.home-contrast header nav a:last-child[aria-current=page]{background:#333;color:#fff}
@media(max-width:1100px) and (min-width:961px){.dimension-site header nav a:last-child{padding-left:12px;padding-right:12px}}
@media(max-width:960px){.dimension-site header nav a:last-child{padding:17px 14px}}

/* Full-width photographic service bands, one discipline per row. */
.dimension-site main>section.service-bands{margin-inline:0!important;padding-inline:0!important;border-inline:0}
.dimension-site .service-bands>.section-head{margin-inline:clamp(20px,4vw,72px)}
.dimension-site .service-bands .visual-services.immersive-services{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;width:100%;perspective:none}
.dimension-site .service-bands .immersive-services>.service{grid-column:1;border:0;min-width:0;padding:0}
.dimension-site .service-bands .visual-services.immersive-services .service summary{transform:none;outline-offset:-4px;padding:0!important}
.dimension-site .service-bands .service summary::before{display:none}
.dimension-site .service-bands .visual-services.immersive-services .service-photo{height:clamp(200px,21vw,320px);min-height:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.dimension-site .service-bands .visual-services.immersive-services .service summary>h3{left:clamp(20px,4vw,72px);right:100px;bottom:28px;max-width:none;font-size:clamp(1.65rem,2.8vw,2.8rem);line-height:1.1;transform:none}
.dimension-site .service-bands .visual-services.immersive-services .service summary>.plus{right:clamp(20px,4vw,72px);bottom:25px;transform:none}
.dimension-site .service-bands .visual-services.immersive-services .service[open] summary>.plus{transform:rotate(45deg)}
.dimension-site .service-bands .visual-services.immersive-services .service-copy{padding:26px clamp(20px,4vw,72px) 12px;max-width:1100px}
@media(max-width:760px){
 .dimension-site .service-bands .visual-services.immersive-services{gap:20px}
 .dimension-site .service-bands .visual-services.immersive-services .service-photo{height:180px;min-height:0}
 .dimension-site .service-bands .visual-services.immersive-services .service summary>h3{font-size:clamp(1.3rem,4.4vw,1.75rem);right:72px;bottom:22px}
 .dimension-site .service-bands .visual-services.immersive-services .service summary>.plus{right:20px;bottom:20px}
}

/* A quiet diagonal arrow replaces the boxed plus on every service band. */
.dimension-site .service-bands .visual-services.immersive-services .service summary>.service-arrow{display:block;width:1.15em;height:1.15em;border:0;border-radius:0;background:none!important;font-family:Arial,sans-serif;font-size:1.8rem;font-weight:400;line-height:1;color:#fff;opacity:.78;transform:none;transition:transform .35s ease,opacity .35s ease}
.dimension-site .service-bands .visual-services.immersive-services .service summary:hover>.service-arrow,.dimension-site .service-bands .visual-services.immersive-services .service summary:focus-visible>.service-arrow{opacity:1;transform:translate(3px,-3px)}
.dimension-site .service-bands .visual-services.immersive-services .service[open] summary>.service-arrow{transform:rotate(90deg);opacity:1;background:none}
@media(prefers-reduced-motion:reduce){.dimension-site .service-bands .visual-services.immersive-services .service summary>.service-arrow{transition:none}}