@import url("../../assets/demo.css");

:root {
  --paper: #eeeee7;
  --ink: #242b24;
  --muted: #454e43;
  --rule: #aeb2a4;
  --accent: #4d563b;
  --notice: #dce0d3;
  --notice-text: #30382f;
  --hero-bg: #232a23;
  --hero-text: #f8f5ea;
  --hero-muted: #d6dacf;
  --hero-accent: #f1c77e;
  --button: #f1c77e;
  --button-text: #232a23;
  --band: #e1e4d9;
  --end: #232a23;
  --end-text: #f8f5ea;
  --end-muted: #d6dacf;
  --end-accent: #f1c77e;
  --display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-weight: 720;
}
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 5.05rem); }
.hero em { font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .95rem; margin-top: 1.25rem; }
.hero-actions .btn { margin: 0; }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.hero-image { margin: 0; padding: .75rem; border: 1px solid #687164; }
.hero-image img { aspect-ratio: 1.5; object-position: 52% center; }
.hero-image figcaption { color: var(--hero-muted); margin-top: .55rem; font-size: .77rem; }
.service-layout { align-items: start; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.service-list article { padding-block: 1rem; border-top: 1px solid var(--rule); }
.service-list p, .faq p { color: var(--muted); margin-top: .35rem; }
.faq details { padding-block: .85rem; border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { font-weight: 650; cursor: pointer; }
.brief-list { padding-left: 1.25rem; margin: 0; }
.brief-list li { padding-block: .45rem; }
.brief-list li::marker { color: var(--end-accent); }

@media (max-width: 730px) {
  .hero h1 { font-size: clamp(2.55rem, 9.2vw, 4.05rem); }
  .service-layout { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}