/* ===========================================================================
   DESIGN 3 - CORPORATE PROFESSIONAL
   Navy/grey palette, serif headings, square edges, structured 12-col rhythm.
   Suits: law firms, finance, hospitals, B2B services.
   =========================================================================== */

.design-3 h1, .design-3 h2, .design-3 h3 { font-weight: 700; letter-spacing: -0.01em; }
.design-3 .eyebrow {
  color: var(--c-accent); border-left: 3px solid var(--c-accent);
  padding-left: 10px; letter-spacing: .14em;
}

.design-3 .btn { border-radius: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; }
.design-3 .btn-primary { background: var(--c-primary); }
.design-3 .btn-primary:hover { background: var(--c-accent); color: var(--c-primary); }
.design-3 .btn:hover { transform: none; }

/* Header with a thin accent utility strip */
.design-3 .site-header { border-top: 4px solid var(--c-accent); }
.design-3 .brand-mark { border-radius: 0; background: var(--c-primary); }
.design-3 .site-nav a { text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; font-weight: 600; }

/* Hero: solid navy band, structured two-column feel */
.design-3 .section-hero { background: var(--c-primary); color: #fff; padding-block: var(--sp-8); }
.design-3 .section-hero .hero-title,
.design-3 .section-hero .hero-sub,
.design-3 .section-hero .hero-body { color: #fff; }
.design-3 .section-hero .hero-sub { color: rgba(255,255,255,.82); }
.design-3 .section-hero .eyebrow { color: var(--c-accent); border-color: var(--c-accent); }
.design-3 .hero-media::after { background: color-mix(in srgb, var(--c-primary) 80%, transparent); }
.design-3 .section-hero .btn-ghost { border-color: #fff; color: #fff; }
.design-3 .section-hero .btn-ghost:hover { background: #fff; color: var(--c-primary); }

.design-3 .card { border-radius: 0; border-top: 3px solid transparent; }
.design-3 .card:hover { border-top-color: var(--c-accent); transform: none; box-shadow: var(--shadow-md); }
.design-3 .card-icon { border-radius: 0; }

.design-3 .feature { border-radius: 0; background: var(--c-bg); border: 1px solid var(--c-border); }
.design-3 .feature-icon { border-radius: 0; }

.design-3 .section-stats { background: var(--c-primary); }
.design-3 .section-stats .section-title { color: #fff; }
.design-3 .stat { border-right: 1px solid rgba(255,255,255,.18); }
.design-3 .stat:last-child { border-right: none; }
.design-3 .stat-value, .design-3 .stat-suffix { color: var(--c-accent); }
.design-3 .stat-label { color: rgba(255,255,255,.75); }

.design-3 .gallery-item img { border-radius: 0; }
.design-3 .price-card { border-radius: 0; }
.design-3 .price-card.is-featured { border-top: 4px solid var(--c-accent); }
.design-3 .price-badge { border-radius: 0; background: var(--c-accent); color: var(--c-primary); }

.design-3 .testimonial { border-radius: 0; border-left: 3px solid var(--c-accent); background: var(--c-surface); }

.design-3 .accordion-trigger { text-transform: none; }
.design-3 .section-cta { background: var(--c-primary); border-block: 4px solid var(--c-accent); }
.design-3 .section-cta .btn-primary { background: var(--c-accent); color: var(--c-primary); }

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

.design-3 .site-footer { background: var(--c-primary); color: rgba(255,255,255,.8); }
.design-3 .site-footer .footer-brand, .design-3 .site-footer a:hover { color: #fff; }
.design-3 .footer-col h4 { color: var(--c-accent); }
.design-3 .footer-bottom, .design-3 .social-list a { border-color: rgba(255,255,255,.2); }