.demo-details{background:var(--detail-paper);color:var(--detail-ink);border-top:1px solid color-mix(in srgb,var(--detail-ink) 22%,transparent)}
.demo-details .w{max-width:1260px}
.demo-reviews{padding-block:85px}
.demo-details-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:end;margin-bottom:35px}
.demo-details-kicker{font:500 10px/1.7 'DM Sans',sans-serif;letter-spacing:1.8px;margin:0 0 22px;text-transform:uppercase}
.demo-details h2{font-size:clamp(36px,4.2vw,62px);line-height:1.1;letter-spacing:-1.8px;font-weight:500;margin:0;max-width:600px}
.demo-details-intro>p,.demo-location>div>p:not(.demo-details-kicker){font:400 14px/1.8 'DM Sans',sans-serif;max-width:440px;margin:0;opacity:.82}
.demo-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.demo-review{margin:0;padding:30px;border:1px solid color-mix(in srgb,var(--detail-ink) 24%,transparent);background:color-mix(in srgb,var(--detail-ink) 4%,var(--detail-paper));display:flex;flex-direction:column}
.demo-example-tag{font:500 10px/1.7 'DM Sans',sans-serif;letter-spacing:1.3px;margin:0 0 24px;opacity:.8}
.demo-review blockquote{font:500 clamp(23px,2.3vw,31px)/1.4 'Cormorant Garamond',serif;letter-spacing:-.25px;margin:0 0 28px;max-width:500px}
.demo-review figcaption{display:flex;align-items:center;gap:13px;margin-top:auto;font:500 13px/1.6 'DM Sans',sans-serif}
.demo-review figcaption small{display:block;font:400 11px/1.7 'DM Sans',sans-serif;opacity:.75;margin-top:2px}
.demo-review-avatar{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--detail-ink) 30%,transparent);font-size:12px}
.demo-location{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-block:65px 85px;border-top:1px solid color-mix(in srgb,var(--detail-ink) 22%,transparent);align-items:center}
.demo-location h2{margin-bottom:24px}
.demo-location address{font:400 22px/1.5 'DM Sans',sans-serif;letter-spacing:-.4px;margin:26px 0 10px}
.demo-location>div>.demo-address-note{font-size:12px;margin:0 0 24px;opacity:.8}
.demo-map-link{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:48px;font:500 13px/1.6 'DM Sans',sans-serif;padding:13px 18px;border:1px solid var(--detail-ink);color:var(--detail-ink);text-decoration:none;max-width:100%}
.demo-map-link:hover{background:var(--detail-ink);color:var(--detail-paper)}
.demo-map-link:focus-visible{outline:3px solid var(--detail-ink);outline-offset:5px}
.demo-map-panel{min-width:0}
.demo-map-art{height:310px;position:relative;overflow:hidden;background:color-mix(in srgb,var(--detail-ink) 6%,var(--detail-paper));border:1px solid color-mix(in srgb,var(--detail-ink) 18%,transparent);background-image:linear-gradient(30deg,transparent 47%,var(--detail-paper) 47%,var(--detail-paper) 53%,transparent 53%),linear-gradient(-55deg,transparent 45%,var(--detail-paper) 45%,var(--detail-paper) 53%,transparent 53%)}
.map-block{position:absolute;background:color-mix(in srgb,var(--detail-ink) 13%,var(--detail-paper));border:1px solid color-mix(in srgb,var(--detail-ink) 20%,transparent);border-radius:4px;transform:rotate(-20deg)}
.map-block-a{left:12%;top:17%;width:26%;height:29%}.map-block-b{right:13%;top:20%;width:28%;height:20%;transform:rotate(30deg)}.map-block-c{right:16%;bottom:10%;width:32%;height:22%}
.map-pin{position:absolute;left:47%;top:39%;border:1px solid var(--detail-ink);width:46px;height:46px;display:grid;place-items:center;background:var(--detail-ink);color:var(--detail-paper);border-radius:50% 50% 50% 0;transform:rotate(-45deg);font-size:14px;box-shadow:0 9px 18px #0002}
.map-place{position:absolute;left:50%;top:61%;transform:translateX(-50%);font:500 9px/1.6 'DM Sans',sans-serif;letter-spacing:1.1px;background:var(--detail-paper);padding:7px 12px;white-space:nowrap}
.demo-map-panel>p{font:400 11px/1.7 'DM Sans',sans-serif;margin:12px 0 0;opacity:.75;max-width:none}
.demo-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Additional demo navigation stays usable alongside the original links. */
.nav .nav-links{flex-wrap:wrap;gap:18px;justify-content:flex-end}
@media(max-width:1000px){.demo-details-intro,.demo-location{gap:35px}.nav .nav-links{gap:12px}.nav .nav-links>a{font-size:12px}}
@media(max-width:700px){
 .demo-reviews{padding-block:52px}
 .demo-details-intro{grid-template-columns:1fr;gap:24px;margin-bottom:28px}
 .demo-details h2{font-size:clamp(34px,9vw,48px);letter-spacing:-1px}
 .demo-details-kicker{font-size:9px;letter-spacing:1.1px;margin-bottom:18px}
 .demo-review-grid{grid-template-columns:1fr;gap:16px}
 .demo-review{padding:24px}
 .demo-review blockquote{font-size:28px;line-height:1.35;margin-bottom:24px}
 .demo-details-intro>p,.demo-location>div>p:not(.demo-details-kicker){font-size:14px;line-height:1.75}
 .demo-location{grid-template-columns:1fr;gap:30px;padding-block:48px}
 .demo-location address{font-size:21px}
 .demo-location>div>.demo-address-note{font-size:12px}
 .demo-map-art{height:260px}
 .demo-map-link{font-size:12px;gap:14px;padding:12px 14px}
 .nav .nav-links{gap:7px 16px;justify-content:flex-start}
 .nav .nav-links>a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
}