/* Demo landing pages share tokens/base from style.css; this file adds demo-only layout + per-trade accents. */

.demo-banner{
  background: var(--ink); color: var(--cream); font-size:.86rem; text-align:center;
  padding:.6em var(--sp-4);
}
.demo-banner a{ color: var(--ochre); text-decoration:underline; font-weight:600; }

.demo-header{ padding-block: 1.1rem; border-bottom:1px solid var(--paper-line); background: var(--paper); }
.demo-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.demo-brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.demo-brand-mark{
  width:2.6rem; height:2.6rem; border-radius:4px 14px 4px 14px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:var(--cream); background:var(--accent, var(--rust)); flex-shrink:0;
}
.demo-brand-text{ font-family: var(--font-display); font-weight:600; font-size:1.25rem; }
.demo-brand-text small{ display:block; font-family: var(--font-body); font-weight:500; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#6b7880; }
.demo-nav{ display:flex; gap: var(--sp-5); align-items:center; }
.demo-nav a:not(.btn){ text-decoration:none; font-weight:500; font-size:.95rem; }

.demo-hero{ padding-block: var(--sp-8); background: var(--paper); }
.demo-hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-7); align-items:center; }
.demo-hero-tag{
  display:inline-block; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--accent-deep, var(--rust-deep)); margin-bottom:.8em;
}
.demo-hero h1{ font-size: clamp(2.1rem, 3vw + 1rem, 3.2rem); margin-bottom:.4em; }
.demo-hero p.lede{ font-size:1.1rem; color:#3c4a53; max-width:42ch; }
.demo-hero-actions{ display:flex; gap:1rem; margin-top: var(--sp-5); flex-wrap:wrap; }
.demo-hero-photo{ border-radius: 4px 24px 4px 24px; overflow:hidden; box-shadow: var(--shadow-lift); aspect-ratio: 5/4; }
.demo-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.demo-services{ padding-block: var(--sp-8); background: var(--paper-deep); }
.demo-services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-6); }
.demo-service-card{ background: var(--cream); border:1px solid var(--paper-line); border-radius: 4px 16px 4px 16px; padding: var(--sp-5); }
.demo-service-card h3{ font-size:1.15rem; color: var(--accent-deep, var(--rust-deep)); }
.demo-service-card p{ font-size:.94rem; color:#3c4a53; margin:0; }

.demo-about{ padding-block: var(--sp-8); }
.demo-about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items:center; }
.demo-about-grid p{ color:#3c4a53; }

.demo-contact{ padding-block: var(--sp-8); background: var(--accent, var(--rust)); color: var(--cream); }
.demo-contact h2{ color: var(--cream); }
.demo-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items:center; }
.demo-contact-list{ display:flex; flex-direction:column; gap:.8em; font-size:1.05rem; }
.demo-contact-list a{ color: var(--cream); text-decoration:underline; }
.demo-hours{ list-style:none; padding:0; margin:1em 0 0; font-size:.95rem; }
.demo-hours li{ display:flex; justify-content:space-between; padding:.35em 0; border-bottom:1px solid rgba(246,240,226,.2); max-width:22rem; }

.demo-footer{ padding-block: var(--sp-5); background: var(--ink); color: rgba(246,240,226,.7); text-align:center; font-size:.85rem; }
.demo-footer a{ color: var(--ochre); }

@media (max-width: 860px){
  .demo-hero-grid, .demo-about-grid, .demo-contact-grid{ grid-template-columns:1fr; }
  .demo-services-grid{ grid-template-columns:1fr; }
  .demo-nav a:not(.btn){ display:none; }
}