/* ===========================================================================
   DESIGN 1 - MODERN MINIMAL
   Whitespace-heavy, sans-serif, hairline rules, restrained motion.
   Suits: consultancies, clinics, studios wanting a calm premium feel.
   Loads after base.css and only overrides what makes this variant distinct.
   =========================================================================== */

.design-1 { letter-spacing: -0.005em; }

.design-1 h1, .design-1 h2 { font-weight: 600; letter-spacing: -0.03em; }
.design-1 .eyebrow { color: var(--c-muted); font-weight: 600; letter-spacing: .22em; }

/* Header: hairline, no shadow until scrolled */
.design-1 .site-header { border-bottom-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
.design-1 .brand-mark { background: var(--c-primary); border-radius: 4px; }

/* Hero: text-led, generous whitespace, thin divider instead of a photo overlay */
.design-1 .section-hero { padding-block: var(--sp-10) var(--sp-9); }
.design-1 .hero-media::after { background: rgba(255,255,255,.72); }
.design-1 .hero-title { font-size: clamp(2.2rem, 5.6vw, 4rem); }
.design-1 .hero-sub { font-size: 1.2rem; max-width: 52ch; }
.design-1 .hero-copy::after {
  content: ''; display: block; width: 64px; height: 1px;
  background: var(--c-text); margin-top: var(--sp-6); opacity: .35;
}

/* Cards: flat, border only, lift very slightly */
.design-1 .card { border-radius: 4px; box-shadow: none; }
.design-1 .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17,24,39,.06); }
.design-1 .card-media img { height: 190px; }
.design-1 .card-icon { background: transparent; border: 1px solid var(--c-border); }

/* Sections separated by rules, not colour blocks */
.design-1 .section + .section { border-top: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent); }
.design-1 .section-stats { background: transparent; }
.design-1 .stat-value, .design-1 .stat-suffix { color: var(--c-text); font-weight: 600; }

.design-1 .feature { background: transparent; border-left: 2px solid var(--c-border); border-radius: 0; padding-left: var(--sp-4); }
.design-1 .feature:hover { border-left-color: var(--c-accent); }

.design-1 .price-card { border-radius: 4px; }
.design-1 .testimonial { background: transparent; border: 1px solid var(--c-border); border-radius: 4px; }

.design-1 .btn { border-radius: 4px; font-weight: 500; }
.design-1 .btn-primary { background: var(--c-primary); }
.design-1 .btn-ghost { border-width: 1px; }

.design-1 .section-cta { background: var(--c-surface); color: var(--c-text); }
.design-1 .section-cta .cta-title, .design-1 .section-cta p { color: var(--c-text); }
.design-1 .section-cta .btn-primary { background: var(--c-primary); color: #fff; }

.design-1 .contact-form { background: transparent; border: 1px solid var(--c-border); border-radius: 4px; }
.design-1 .field input, .design-1 .field textarea { border-radius: 4px; }

.design-1 .site-footer { background: transparent; border-top: 1px solid var(--c-border); }

/* Motion: fade only, no travel */
.design-1 .reveal { transform: none; }