/* Demo websites for fictional businesses (/demos/*). Each demo has its own look. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 17px; line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1em; }

/* Notice shown on every demo */
.demo-notice { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding: 10px max(16px, 4vw); background: #111619; color: #F7F6F3; font-family: "Segoe UI", system-ui, Arial, sans-serif; font-size: 14.5px; }
.demo-notice p { margin: 0; }
.demo-notice-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.demo-notice a { color: #F7F6F3; text-underline-offset: 3px; }
.demo-notice .demo-notice-cta { color: #D7C9B8; font-weight: 600; }
fieldset[disabled] { margin: 0; padding: 0; border: 0; opacity: .75; }

/* ---------- Demo 1: electrical contractor ---------- */
.demo-elektro { --el-navy: #0E2A47; --el-yellow: #F5C400; --el-ink: #0B1B2B; --el-grey: #EEF1F4; background: #fff; color: var(--el-ink); font-family: "Barlow", "Segoe UI", Arial, sans-serif; }
.el-wrap { width: min(1160px, 100% - 2 * max(16px, 4vw)); margin-inline: auto; }
.el-head { background: var(--el-navy); color: #fff; }
.el-head-row { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.el-logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; text-decoration: none; }
.el-logo svg { width: 26px; height: 26px; fill: var(--el-yellow); }
.el-nav { display: flex; gap: 22px; margin-left: auto; font-size: 16px; }
.el-nav a { text-decoration: none; opacity: .9; }
.el-phone { padding: 8px 14px; background: var(--el-yellow); color: var(--el-ink); font-weight: 600; text-decoration: none; }
.el-hero { background: var(--el-navy); color: #fff; padding: 56px 0 72px; }
.el-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; }
.el-hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 600; }
.el-hero p { max-width: 54ch; font-size: 19px; color: #D3DCE6; }
.el-kicker { color: var(--el-yellow) !important; font-weight: 600; font-size: 16px !important; }
.el-badge { color: var(--el-yellow); justify-self: center; width: min(240px, 60vw); }
.el-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.el-btn { display: inline-block; padding: 13px 22px; border: 2px solid var(--el-yellow); background: var(--el-yellow); color: var(--el-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.el-btn--line { background: transparent; color: #fff; }
.el-alert { background: var(--el-yellow); color: var(--el-ink); padding: 14px 0; font-size: 16.5px; }
.el-section { padding: 64px 0; }
.el-section--grey { background: var(--el-grey); }
.el-section h2 { font-size: clamp(28px, 3vw, 38px); font-weight: 600; }
.el-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.el-grid article { padding: 22px; border-top: 5px solid var(--el-yellow); background: var(--el-grey); }
.el-grid h3 { font-size: 21px; font-weight: 600; }
.el-grid p { margin: 0; font-size: 16px; }
.el-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.el-towns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; padding: 0; list-style: none; font-weight: 600; }
.el-towns li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--el-navy); }
.el-form { display: grid; gap: 8px; padding: 24px; background: var(--el-grey); }
.el-form fieldset { display: grid; gap: 8px; }
.el-form label { font-weight: 600; font-size: 15px; }
.el-form input, .el-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #B9C3CE; background: #fff; font: inherit; }
.el-form .el-btn { justify-self: start; margin-top: 8px; }
.el-form-note { margin: 6px 0 0; font-size: 14px; color: #4A5A6A; }
.el-foot { padding: 24px 0; background: var(--el-ink); color: #B9C3CE; font-size: 14.5px; }

/* ---------- Demo 2: physiotherapy practice ---------- */
.demo-physio { --ph-teal: #2F7F7A; --ph-teal-dark: #1F5B57; --ph-cream: #F6F4EF; --ph-ink: #23302F; --ph-sand: #E8DFD1; background: var(--ph-cream); color: var(--ph-ink); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
.ph-wrap { width: min(1080px, 100% - 2 * max(16px, 4vw)); margin-inline: auto; }
.ph-head { background: #fff; border-bottom: 1px solid #E4DED4; }
.ph-head-row { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.ph-logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; text-decoration: none; color: var(--ph-teal-dark); }
.ph-logo-mark { width: 28px; height: 28px; border-radius: 50% 50% 50% 8px; background: var(--ph-teal); }
.ph-nav { display: flex; gap: 22px; margin-left: auto; font-size: 15.5px; }
.ph-nav a { text-decoration: none; }
.ph-btn { display: inline-block; padding: 13px 26px; border: 0; border-radius: 999px; background: var(--ph-teal); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ph-btn--small { padding: 9px 18px; font-size: 15px; white-space: nowrap; }
.ph-hero { padding: 80px 0 88px; background: radial-gradient(circle at 85% 20%, #DCEBE8 0, #DCEBE8 22%, transparent 22.2%), var(--ph-cream); }
.ph-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 600; color: var(--ph-teal-dark); max-width: 14ch; }
.ph-kicker { font-size: 15px; font-weight: 600; color: var(--ph-teal); }
.ph-lead { max-width: 52ch; font-size: 19px; margin-bottom: 28px; }
.ph-section { padding: 64px 0; }
.ph-section--tint { background: #fff; }
.ph-section h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: var(--ph-teal-dark); }
.ph-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ph-cards article { padding: 26px; border-radius: 20px; background: #fff; }
.ph-cards h3 { font-size: 20px; font-weight: 600; }
.ph-cards p { margin: 0; font-size: 16px; }
.ph-dot { display: block; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--ph-sand); box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 36px var(--ph-teal); }
.ph-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.ph-hours { width: 100%; border-collapse: collapse; font-size: 17px; }
.ph-hours th, .ph-hours td { padding: 14px 0; border-bottom: 1px solid #E4DED4; text-align: left; font-weight: 400; }
.ph-hours td { text-align: right; font-weight: 600; }
.ph-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.ph-team div { display: grid; gap: 4px; justify-items: start; }
.ph-team span:last-child { font-size: 15px; color: #5A6866; }
.ph-avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; background: var(--ph-sand); color: var(--ph-teal-dark); font-weight: 600; }
.ph-form { display: grid; gap: 8px; padding: 26px; border-radius: 20px; background: var(--ph-cream); }
.ph-form fieldset { display: grid; gap: 8px; }
.ph-form label { font-weight: 600; font-size: 15px; }
.ph-form input, .ph-form select { width: 100%; padding: 11px 14px; border: 1px solid #D6CEC1; border-radius: 12px; background: #fff; font: inherit; }
.ph-form .ph-btn { justify-self: start; margin-top: 8px; }
.ph-form-note { margin: 6px 0 0; font-size: 14px; color: #5A6866; }
.ph-foot { padding: 24px 0; background: var(--ph-teal-dark); color: #DCEBE8; font-size: 14.5px; }

@media (max-width: 860px) {
  .el-nav, .ph-nav { display: none; }
  .el-hero-grid, .el-split, .ph-split { grid-template-columns: minmax(0, 1fr); }
  .el-badge { display: none; }
  .el-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-cards, .ph-team { grid-template-columns: minmax(0, 1fr); }
  .el-head-row, .ph-head-row { justify-content: space-between; }
}
@media (max-width: 520px) {
  .el-grid, .el-towns { grid-template-columns: minmax(0, 1fr); }
  .el-phone { padding: 6px 10px; font-size: 15px; }
  .el-logo { font-size: 17px; }
  .ph-head .ph-btn--small { display: none; }
}