/* Shared by the three existing color variations. */
.design-gallery{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(27,97,138,.08),transparent 55%);padding-block:78px 72px}
.design-gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px}
.design-gallery-heading .eyebrow{margin-bottom:15px}
.design-gallery-heading h2{font-size:clamp(28px,3.1vw,43px);line-height:1.8;margin:0}
.design-gallery-lead{font-size:14px;line-height:2.1;color:var(--muted);margin-bottom:6px}
.design-gallery-note{font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:32px}
.design-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 30px}
.design-example{min-width:0;margin:0}
.design-example-image{display:block;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#e8e8e4;box-shadow:0 12px 38px #0002}
.design-example-image img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;transition:transform .35s ease}
.design-example-image:hover img{transform:scale(1.025)}
.design-example-image:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
.design-example-enlarge{position:absolute;right:13px;bottom:13px;display:inline-flex;align-items:center;gap:7px;border-radius:25px;padding:7px 12px;background:#001629df;color:#fff;font:500 11px/1.7 var(--sans);box-shadow:0 2px 12px #0002}
.design-example-enlarge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.design-example figcaption{padding:17px 2px 0}
.design-example-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 10px/1.8 var(--sans);letter-spacing:.08em;color:var(--ice)}
.design-example-meta>span:last-child{font-size:11px;letter-spacing:.04em}
.design-example h3{font:500 clamp(17px,1.8vw,23px)/1.8 var(--serif);margin:8px 0 5px}
.design-example figcaption>p{font-size:13px;line-height:1.9;color:var(--muted)}
.design-gallery-cta{margin-top:46px;padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px}
.design-gallery-cta>p{font:500 17px/2 var(--serif)}
.design-gallery-cta .button{font-size:15px;min-width:265px;min-height:55px;white-space:nowrap}
.design-viewer{width:min(1280px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--navy);color:#f2f8ff;box-shadow:0 25px 90px #0008;overflow:auto}
.design-viewer:not([open]){display:none}
.design-viewer::backdrop{background:#000c1ee8;backdrop-filter:blur(7px)}
.design-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px}
.design-viewer-count{font:500 10px/1.6 var(--sans);letter-spacing:.13em;color:var(--ice)}
.design-viewer h2{font:500 18px/1.8 var(--serif);margin:3px 0 0}
.design-viewer button{font:500 13px/1.7 var(--sans);color:inherit;background:transparent;cursor:pointer}
.design-viewer button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.design-viewer-close{display:flex;align-items:center;gap:12px;flex-shrink:0;border:1px solid var(--line);border-radius:24px;padding:6px 15px}
.design-viewer-close span{font-size:24px;font-weight:400;line-height:1}
.design-viewer-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 185px);object-fit:contain;background:#e8e8e4}
.design-viewer-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 20px}
.design-viewer-footer p{font:400 11px/1.7 var(--sans);color:var(--muted);text-align:center}
.design-viewer-footer button{border:0;padding:9px 5px;white-space:nowrap}
html:has(.design-viewer[open]){overflow:hidden}
body[data-sample] .design-gallery,body[data-sample] .design-example-image,body[data-sample] .design-gallery-cta,body[data-sample] .design-viewer,body[data-sample] .design-viewer-close{border-color:var(--sample-border)}
body[data-sample] .design-gallery{background:linear-gradient(180deg,var(--sample-wash),transparent 60%)}
body[data-sample] .design-gallery-lead,body[data-sample] .design-gallery-note,body[data-sample] .design-example figcaption>p,body[data-sample] .design-viewer-footer p{color:var(--sample-quiet)}
body[data-sample] .design-example-meta,body[data-sample] .design-viewer-count{color:var(--sample-accent)}
body[data-sample] .design-viewer{background:var(--sample-panel);color:var(--sample-text)}
@media(max-width:900px){.design-gallery-heading{display:block}.design-gallery-lead{margin-top:15px}.design-gallery-grid{gap:33px 22px}.design-example-meta{flex-wrap:wrap;gap:3px 12px}.design-example h3{font-size:18px}.design-gallery-cta>p{font-size:15px}.design-gallery-cta .button{min-width:230px;font-size:13px}}
@media(max-width:650px){.design-gallery{padding-block:46px}.design-gallery-heading{margin-bottom:16px}.design-gallery-heading h2{font-size:27px}.design-gallery-heading h2>span{display:block}.design-gallery-lead{font-size:13px;line-height:1.9}.design-gallery-note{font-size:11px;margin-bottom:25px}.design-gallery-grid{grid-template-columns:1fr;gap:30px}.design-example-meta{flex-wrap:nowrap}.design-example-meta>span:last-child{font-size:10px}.design-example h3{font-size:18px;margin-top:7px}.design-example figcaption{padding-top:13px}.design-example figcaption>p{font-size:12px}.design-example-enlarge{right:9px;bottom:9px;padding:6px 10px;font-size:10px}.design-gallery-cta{display:block;margin-top:32px;padding-top:24px}.design-gallery-cta>p{font-size:15px}.design-gallery-cta .button{margin-top:19px;width:100%;min-width:0}.design-viewer{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}.design-viewer-bar{align-items:flex-start;padding:13px 12px;gap:10px}.design-viewer h2{font-size:14px}.design-viewer-close{padding:6px 9px;font-size:11px!important;gap:5px}.design-viewer-close span{font-size:19px}.design-viewer-image{max-height:calc(100dvh - 180px)}.design-viewer-footer{gap:8px;padding:8px 12px}.design-viewer-footer p{font-size:9px}.design-viewer-footer button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.design-example-image img{transition:none}.design-example-image:hover img{transform:none}}