header #navigation ul{display:flex;align-items:center;gap:38px;list-style:none;margin:0;padding:0}header #navigation li{margin:0}
.admin-bar header{top:32px}.wp-content{min-height:55vh}.wp-content img{max-width:100%;height:auto}.wp-content .wp-block-button__link{background:var(--brand-blue);color:white}
.work-card .project-art img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.work-card .project-art:has(img){padding:0}
@media(max-width:782px){.admin-bar header{top:46px}}@media(max-width:760px){header #navigation ul{flex-direction:column;align-items:flex-start;gap:1.2rem}}

/* Keep the small labels legible in the light presentation. */
:root[data-theme="light"] .hero-top .eyebrow,
:root[data-theme="light"] .etalage-label .eyebrow,
:root[data-theme="light"] .landing-hero > .eyebrow {color:#405a77}
.work-card .project-art small {display:block;letter-spacing:.2em;font-size:12px;margin-top:12px}
.work-card.steel .project-art {flex-direction:column}

/* WordPress renders recent project styles as work-card, rather than recent-card. */
.work-card:is(.vanwestem,.vathorst,.mheen,.villavie) .project-art > span {
 font-size:clamp(2rem,4vw,4rem);
 font-weight:600;
 line-height:1.08;
 letter-spacing:-.045em;
 max-width:100%;
 overflow-wrap:break-word;
}
.work-card.villavie .project-art > span {font-family:Georgia,serif;font-weight:400}
@media(max-width:700px) {
 .work-card:is(.vanwestem,.vathorst,.mheen,.villavie) .project-art > span {font-size:clamp(1.75rem,8vw,3.375rem)}
}

/* Responsive WordPress layouts: shrink the content, not the reading area. */
:is(.hero-grid,.work-grid,.section-heading,.detail-grid,.steps,.footer-grid,.contact-section,.subscription-story,.case-cta,.faq-section) > * {min-width:0}
:is(.work-caption,.deck-bottom,.footer-grid,.wp-content,.prose,.contact-copy,.next-case) {overflow-wrap:anywhere}
:is(.button,.nav-cta) {max-width:100%;white-space:normal}
.button > span,.service-plus {flex-shrink:0}
.header-controls {flex-wrap:wrap;min-width:0}
header #navigation a {display:block}
.work-card .project-art:has(img) {position:relative;aspect-ratio:3/2;flex:none;width:100%;margin:24px 0}
.work-card .project-art img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-form :is(input,textarea,select) {font-size:1rem;min-width:0;max-width:100%}
.wp-content :is(video,iframe) {max-width:100%}
.wp-content .wp-block-table {overflow-x:auto}
@media(max-width:1000px) {
 header #navigation ul {gap:22px}
 .hero-actions {flex-wrap:wrap;gap:18px}
 .subscription-story {gap:32px}
 .hero-copy h1 em,.landing-hero h1 em {white-space:normal}
}
/* Switch the navigation and narrow multi-column sections together. */
@media(max-width:900px) {
 header {gap:12px;padding:20px 6%}
 header > .logo {order:1}
 header > button.menu {order:2;margin-left:auto;display:block;min-height:44px;background:transparent;color:var(--page-text);border:1px solid var(--rule);border-radius:100px;padding:10px 18px}
 header > .header-controls {order:3;width:100%;justify-content:space-between;gap:10px}
 header #navigation {display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:20px 6%;background:var(--page-bg);color:var(--page-text);border-bottom:1px solid var(--rule);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain}
 header #navigation.open {display:block}
 header #navigation ul {flex-direction:column;align-items:stretch;gap:8px}
 header #navigation a {padding:12px 14px;min-height:44px}
 .hero-grid {display:flex;flex-direction:column;gap:20px}
 .hero-copy {width:100%;padding-bottom:0}
 .hero-copy h1 {font-size:clamp(2.75rem,8.5vw,5.5rem);line-height:1.04}
 .interactive-etalage {width:100%;max-width:650px;min-height:570px;margin-top:24px}
 .section-heading:not(.inline),.detail-grid,.faq-section,.case-cta,.contact-section,.subscription-story {grid-template-columns:1fr;gap:32px}
 .section-heading > p {grid-column:auto;max-width:550px}
 .service {grid-template-columns:28px minmax(0,1fr) 24px;gap:14px}
 .service p {grid-column:2;max-width:none}
 .service-plus {grid-column:3;grid-row:1/3}
 .work-grid {grid-template-columns:minmax(0,1fr)}
 .work-card {min-height:360px}
 .work-caption {display:block}
 .work-caption > span {display:block;margin-top:8px}
 .approach-heading {display:block}
 .steps {grid-template-columns:1fr;gap:24px}
 .steps p {max-width:none}
 .footer-top {display:block}
 .footer-top .button {margin-top:24px}
 .landing-bottom {display:block}
 .landing-bottom .button {margin-top:24px}
 .contact-copy h1 {font-size:clamp(2.5rem,7.5vw,4.5rem)}
 .contact-copy h1 em {white-space:normal}
}
@media(max-width:700px) {
 .hero-copy h1 {font-size:clamp(2.5rem,11vw,4.5rem)}
 .section-heading h2,.subscription-story h2,.approach h2 {font-size:clamp(2rem,8.8vw,2.625rem)}
 .interactive-etalage {height:455px;min-height:455px;max-width:100%}
 .work-card {padding:24px;min-height:340px}
 .steel .project-art > span {font-size:clamp(2rem,10.5vw,3.625rem);overflow-wrap:anywhere;max-width:100%}
 .blue .project-art > span {padding-left:0;max-width:100%;overflow-wrap:anywhere;line-height:1.08}
 .project-art small {letter-spacing:.14em;overflow-wrap:anywhere}
 .case-cover {padding:24px;min-height:300px}
 .case-cover .project-art > span {font-size:clamp(1.75rem,8.5vw,3.375rem);overflow-wrap:anywhere}
 .footer-grid {grid-template-columns:minmax(0,1fr);gap:28px}
 .footer-grid > .logo,.footer-grid > div:last-child {grid-column:auto}
 .footer-bottom {justify-content:flex-start;gap:12px 20px}
 .display-dialog {max-width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:20px 16px}
 .display-title-row {align-items:flex-start}
 .display-title-row h2 {min-width:0;overflow-wrap:anywhere}
 .display-title-row button {flex-shrink:0}
 .setting-row {flex-wrap:wrap;gap:10px}
 .setting-row > span {flex:1;min-width:0}
 .setting-row:has(select) {display:block}
 .setting-row select {display:block;width:100%;max-width:100%;margin-top:10px}
 .settings-actions > button {width:100%;justify-content:space-between}
 .cookie-banner {padding:20px;bottom:max(12px,env(safe-area-inset-bottom));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
 .cookie-copy,.cookie-actions {min-width:0;overflow-wrap:anywhere}
 .cookie-actions {gap:10px}
 .cookie-actions button {min-width:0;flex:1 1 110px}
 :root:not([data-text="100"]) .hero-copy h1 {font-size:clamp(2rem,10.5vw,3.5rem)}
 :root:not([data-text="100"]) h1 em {white-space:normal}
 :root:not([data-text="100"]) .deck-project strong {font-size:clamp(1.5rem,7vw,2.75rem);overflow-wrap:anywhere}
}
@media(max-width:380px) {
 .theme-toggle button {padding:8px 10px;gap:4px}
 .deck-project {padding:16px}
 .deck-project strong {font-size:clamp(1.5rem,7.5vw,1.875rem)}
 .deck-two strong {font-size:2.25rem}
 .deck-bottom {gap:10px}
 .hero-bottom {gap:12px 18px}
 .contact-form {padding:24px 16px}
}
@media(hover:none),(pointer:coarse) {
 .work-card:hover,.deck-project:hover,.button:hover,.tilt-enabled:hover {transform:none;translate:none}
 .dfp-cursor {display:none}
 .pointer-custom,.pointer-custom :is(a,button,summary) {cursor:auto}
}
@media(max-width:900px) {
 main :is(h1,h2,h3) {overflow-wrap:anywhere}
 main h1 em {white-space:normal}
 .wp-content h1 {font-size:clamp(2rem,8vw,3.5rem)}
}
@media(max-width:700px) {
 :root:not([data-text="100"]) .landing-hero h1,
 :root:not([data-text="100"]) .contact-copy h1 {font-size:clamp(1.875rem,9vw,3.5rem)}
}