/* Demo site for a made-up business. Used only by /sample-work/local-website-demo/.
   System fonts only. The colours are the site's own. Everything here is scoped to .demo-site or .azg-banner. */
.azg-banner { background:var(--soft); border-bottom:1px solid var(--line); color:var(--ink); font-size:14px; line-height:1.45; padding:10px 16px; text-align:center; }
.azg-banner a { margin-left:6px; white-space:nowrap; }

.demo-site { font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:17px; line-height:1.55; color:#1F2937; background:#fff; letter-spacing:0; }
.demo-site *, .demo-site *::before, .demo-site *::after { box-sizing:border-box; }
.demo-site h1, .demo-site h2, .demo-site h3, .demo-site p, .demo-site ul, .demo-site dl, .demo-site dd { margin:0; padding:0; font-family:inherit; letter-spacing:0; text-transform:none; }
.demo-site a { color:inherit; text-decoration:none; }
.demo-site ul { list-style:none; }
.ds-wrap { max-width:960px; margin:0 auto; padding:0 20px; }

.ds-top { background:#1F3A5F; color:#fff; padding:0 0 44px; }
.ds-brand { padding:16px 0 14px; border-bottom:1px solid rgba(255,255,255,.18); margin-bottom:34px; }
.ds-brand b { display:block; font-size:19px; font-weight:700; line-height:1.2; }
.ds-brand span { display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; margin-top:2px; }
.demo-site .ds-top h1 { font-size:clamp(30px,7.2vw,46px); line-height:1.12; font-weight:700; color:#fff; margin-bottom:16px; max-width:18ch; }
.ds-top p { font-size:18px; max-width:44ch; opacity:.92; margin-bottom:26px; }
.ds-actions { display:flex; flex-direction:column; gap:12px; max-width:340px; }
.demo-site .ds-btn { display:flex; align-items:center; justify-content:center; min-height:50px; padding:12px 22px; border-radius:6px; border:2px solid #0F766E; background:#0F766E; color:#fff; font:inherit; font-size:17px; font-weight:600; cursor:pointer; text-align:center; }
.demo-site .ds-btn.ghost { background:transparent; border-color:#fff; color:#fff; }
.demo-site .ds-btn:focus-visible, .demo-site .ds-callbar:focus-visible { outline:3px solid #9fb6d3; outline-offset:3px; }

.ds-block { padding:48px 0; }
.ds-block.soft { background:#f5f7fa; }
.demo-site h2 { font-size:clamp(24px,5.4vw,32px); line-height:1.2; font-weight:700; color:#1F3A5F; margin-bottom:8px; }
.demo-site .ds-sub { color:#5B6B7F; margin-bottom:24px; }
.ds-cards { display:grid; grid-template-columns:1fr; gap:14px; }
.ds-card { background:#fff; border:1px solid #E2E8F0; border-radius:8px; padding:18px 18px 16px; }
.demo-site h3 { font-size:18px; line-height:1.3; font-weight:700; color:#1F3A5F; margin-bottom:6px; }
.ds-card p { font-size:16px; color:#1F2937; }

.ds-form { display:grid; gap:16px; max-width:560px; }
.ds-form label { display:block; font-size:15px; font-weight:600; margin-bottom:6px; color:#1F2937; }
.ds-form input, .ds-form select, .ds-form textarea { width:100%; font:inherit; font-size:17px; color:#1F2937; background:#fff; border:1px solid #5B6B7F; border-radius:6px; padding:12px 12px; min-height:48px; }
.ds-form textarea { min-height:110px; resize:vertical; }
.ds-form input:focus-visible, .ds-form select:focus-visible, .ds-form textarea:focus-visible { outline:3px solid #9fb6d3; outline-offset:2px; }
.ds-note { font-size:15px; color:#5B6B7F; }
.ds-status { font-size:16px; font-weight:600; color:#1F3A5F; border-left:3px solid #1F3A5F; background:#f5f7fa; padding:10px 14px; }
.ds-status[hidden] { display:none; }

.ds-visit { display:grid; grid-template-columns:1fr; gap:20px; }
.ds-visit dl { display:grid; gap:2px; }
.ds-visit dt { font-size:14px; font-weight:700; color:#5B6B7F; letter-spacing:.04em; text-transform:uppercase; margin-top:14px; }
.ds-visit dt:first-child { margin-top:0; }
.ds-visit dd a { text-decoration:underline; }
.ds-open { margin-top:6px; }
.ds-open li { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid #E2E8F0; }
.ds-map { display:flex; align-items:center; justify-content:center; text-align:center; min-height:200px; padding:20px; background:#E2E8F0; border:1px dashed #5B6B7F; border-radius:8px; color:#1F2937; font-size:16px; }
.ds-foot { background:#1F3A5F; color:#fff; padding:22px 0; font-size:15px; }
.ds-foot p + p { margin-top:4px; opacity:.85; }

.demo-site .ds-callbar { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:center; min-height:56px; background:#0F766E; color:#fff; font-size:18px; font-weight:700; text-align:center; box-shadow:0 -2px 8px rgba(31,58,95,.25); }

@media (min-width:700px) {
  .ds-actions { flex-direction:row; max-width:none; }
  .demo-site .ds-btn { min-width:230px; }
  .ds-cards { grid-template-columns:repeat(2,1fr); }
  .ds-cards.three { grid-template-columns:repeat(3,1fr); }
  .ds-visit { grid-template-columns:1fr 1fr; }
}
@media (min-width:900px) {
  .ds-cards { grid-template-columns:repeat(3,1fr); }
  .demo-site .ds-callbar { display:none; }
}
@media (prefers-reduced-motion:reduce) { .demo-site * { scroll-behavior:auto; } }