.design-portfolio-page { background: #f4f5f2; }
.design-intro, .design-collection, .design-appointment { max-width: 1256px; margin: 0 auto; padding-right: 38px; padding-left: 38px; }
.design-intro { padding-top: 150px; padding-bottom: 50px; }
.design-intro h1 { max-width: 100%; margin-top: 20px; font-size: 64px; line-height: 1.05; }
.design-intro-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: 26px; }
.design-intro-bottom p { max-width: 670px; color: #53605a; }
.design-intro-bottom .text-link { flex-shrink: 0; }
.design-collection { padding-bottom: 78px; }
.design-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; border-top: 1px solid #cfd6d1; }
.design-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.design-filters[hidden], [data-design-card][hidden], .design-reference-note[hidden] { display: none; }
.design-filters button { padding: 9px 14px; min-height: 44px; border: 1px solid transparent; background: transparent; color: #4c5851; font: inherit; font-size: 14px; cursor: pointer; }
.design-filters button[aria-pressed="true"] { background: #173d35; border-color: #173d35; color: #fff; }
.design-filters button:focus-visible, .design-card a:focus-visible, .viewer-info a:focus-visible, .viewer-icon:focus-visible, .viewer-form-link:focus-visible, .viewer-thumbnails button:focus-visible { outline: 3px solid #bd852d; outline-offset: 4px; }
.design-result-count { color: #56645b; font-size: 13px; flex-shrink: 0; }
.design-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 44px; }
.design-cover { position: relative; overflow: hidden; background: #e1e5df; aspect-ratio: 3 / 2; }
.design-cover img { width: 100%; height: 100%; object-fit: contain; }
.design-image-type { position: absolute; left: 14px; top: 14px; padding: 5px 9px; color: #fff; background: rgba(12, 24, 20, .88); font-size: 12px; }
.design-open-mark { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: rgba(12, 24, 20, .78); font-size: 23px; }
.design-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 19px 0 8px; }
.design-card-heading h2 { min-width: 0; font-size: 30px; line-height: 1.1; }
.design-card-heading > span { flex-shrink: 0; color: #617167; font-size: 12px; white-space: nowrap; text-align: right; }
.design-card-heading small { display: block; font-size: 12px; line-height: 1.6; }
.design-card > p { color: #385448; font-size: 13px; }
.design-card .design-card-scope { color: #68716b; font-size: 14px; margin-top: 4px; }
.design-provenance { margin-top: 44px; padding-top: 22px; border-top: 1px solid #cfd6d1; color: #56645b; font-size: 13px; }
.design-provenance a { display: inline-block; color: #173d35; text-decoration: underline; text-underline-offset: 4px; }
.design-appointment { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; padding-top: 58px; padding-bottom: 70px; border-top: 1px solid #cfd6d1; }
.design-appointment h2 { margin-top: 18px; font-size: 48px; line-height: 1.06; }
.design-appointment-list article { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid #cfd6d1; }
.design-appointment-list article:first-child { padding-top: 0; }
.design-appointment-list article > span { color: #376554; font-family: Georgia, serif; }
.design-appointment-list h3 { font-size: 18px; margin-bottom: 7px; }
.design-appointment-list p { color: #58665c; font-size: 15px; }
.design-contact h2 { font-size: 50px; }
.design-contact .text-link { display: block; width: fit-content; margin-top: 22px; color: #e7c98f; }
.field-optional { font-weight: 400; color: #b5bcb5; }
.design-reference-note { grid-column: 1 / -1; padding: 10px 0; color: #e7c98f; font-size: 14px; }

.design-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; margin: 0; border: 0; background: #101714; color: #fff; overflow: auto; }
.design-viewer::backdrop { background: rgba(0, 0, 0, .8); }
body.design-viewer-open { overflow: hidden; }
.viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid #354039; }
.viewer-header > span { color: #c1ccc3; font-size: 13px; }
.viewer-header-actions { display: flex; align-items: center; gap: 12px; }
.viewer-enquiry-quick { display: grid; place-items: center; padding: 8px 12px; min-height: 44px; border: 1px solid #b8995e; color: #e7c98f; font-size: 12px; }
.viewer-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #526359; color: #fff; background: transparent; font: inherit; font-size: 25px; cursor: pointer; flex-shrink: 0; }
.viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; min-height: calc(100dvh - 69px); }
.viewer-media { display: flex; min-width: 0; flex-direction: column; padding: 24px; background: #070b09; }
.viewer-stage { display: grid; place-items: center; height: calc(100dvh - 214px); min-height: 220px; touch-action: pan-y pinch-zoom; }
.viewer-stage img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 14px; }
.viewer-navigation p { min-width: 55px; text-align: center; font-size: 14px; }
.viewer-caption { color: #c2cbc5; font-size: 13px; text-align: center; margin-top: 12px; }
.viewer-info { padding: 28px; min-width: 0; }
.viewer-info .section-label { color: #b4c7bc; }
.viewer-info h2 { margin-top: 14px; font-size: 35px; line-height: 1.08; }
.viewer-info > p:not(.section-label) { margin-top: 18px; color: #c4cec7; font-size: 14px; }
.viewer-info .viewer-type { color: #e7c98f; font-size: 12px; }
.viewer-info dl { margin: 22px 0; }
.viewer-info dl > div { margin-top: 16px; padding-top: 14px; border-top: 1px solid #354039; }
.viewer-info dt { color: #b0c3b6; font-size: 11px; text-transform: uppercase; }
.viewer-info dd { margin: 6px 0 0; color: #e5eae7; font-size: 13px; }
.viewer-thumbnails { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 24px 0; }
.viewer-thumbnails button { min-width: 0; padding: 2px; border: 2px solid transparent; background: transparent; cursor: pointer; }
.viewer-thumbnails button[aria-current="true"] { border-color: #e7c98f; }
.viewer-thumbnails img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.viewer-info .button { width: 100%; padding: 14px 10px; font-size: 13px; text-align: center; }
.viewer-form-link { display: block; min-height: 44px; padding: 12px 0; margin: 8px 0 16px; border: 0; background: none; color: #e7c98f; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.viewer-original { color: #b5c6bc; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 920px) { .design-intro, .design-collection, .design-appointment { padding-left: 24px; padding-right: 24px; } .design-intro h1 { font-size: 52px; } .design-intro-bottom { align-items: flex-start; flex-direction: column; gap: 20px; } .viewer-layout { grid-template-columns: minmax(0, 1fr) 310px; } .viewer-info { padding: 22px; } }
@media (max-width: 620px) {
  .design-intro, .design-collection, .design-appointment { padding-left: 18px; padding-right: 18px; }
  .design-intro { padding-top: 92px; padding-bottom: 24px; }
  .design-intro h1 { font-size: 42px; }
  .design-intro-bottom { margin-top: 20px; }
  .design-intro-bottom p { font-size: 15px; }
  .design-intro-bottom br { display: none; }
  .design-portfolio-page .portfolio-path-nav a { padding: 12px 0; min-height: 44px; }
  .design-portfolio-page .portfolio-path-nav span { display: none; }
  .design-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; padding: 15px 0; }
  .design-filters { gap: 2px; }
  .design-filters button { padding: 8px 9px; font-size: 12px; }
  .design-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .design-card-heading h2 { font-size: 28px; }
  .design-collection { padding-bottom: 44px; }
  .design-appointment { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; padding-bottom: 45px; }
  .design-appointment h2, .design-contact h2 { font-size: 38px; }
  .design-contact .contact-form { order: 1; }
  .design-contact .contact-copy { order: 0; }
  .viewer-header { padding: 8px 12px; position: sticky; top: 0; z-index: 2; background: #101714; }
  .viewer-header > span { font-size: 11px; }
  .viewer-layout { display: block; }
  .viewer-media { padding: 12px; }
  .viewer-stage { height: 39dvh; min-height: 220px; }
  .viewer-caption { margin-bottom: 6px; }
  .viewer-info { padding: 24px 18px 36px; }
  .viewer-info h2 { font-size: 32px; }
  .viewer-thumbnails { max-width: 400px; }
}