/* ===========================================================================
   DESIGN 4 - CREATIVE / AGENCY
   Asymmetric grid, oversized display type, parallax hero, offset imagery.
   Suits: studios, agencies, photographers, film production.
   =========================================================================== */

.design-4 h1, .design-4 h2 { font-weight: 700; letter-spacing: -0.04em; text-transform: none; }
.design-4 .eyebrow { color: var(--c-secondary); font-weight: 700; }

.design-4 .btn { border-radius: 2px; font-weight: 700; }
.design-4 .btn-primary { background: var(--c-secondary); }
.design-4 .btn-ghost { border-color: var(--c-primary); }

.design-4 .site-header { background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: none; }
.design-4 .brand-mark { background: var(--c-secondary); border-radius: 2px; transform: rotate(-4deg); }

/* Hero: full-bleed parallax image, huge type overlapping the edge */
.design-4 .section-hero { min-height: 92vh; display: flex; align-items: flex-end; padding-block: var(--sp-9) var(--sp-8); }
.design-4 .hero-media { background-attachment: fixed; }
.design-4 .hero-media::after { background: linear-gradient(to top, rgba(15,15,16,.82) 0%, rgba(15,15,16,.25) 60%, transparent 100%); }
.design-4 .section-hero .hero-title { font-size: clamp(2.6rem, 8vw, 6rem); line-height: .96; color: #fff; }
.design-4 .section-hero .hero-sub, .design-4 .section-hero .hero-body { color: rgba(255,255,255,.86); }
.design-4 .section-hero .eyebrow { color: var(--c-accent); }
.design-4 .hero-copy { max-width: 900px; }
.design-4 .hero-scroll-hint {
  display: block; position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 1px; height: 52px; background: rgba(255,255,255,.4); overflow: hidden;
}
.design-4 .hero-scroll-hint span { display: block; width: 100%; height: 18px; background: #fff; animation: scroll-hint 1.9s var(--ease) infinite; }
@keyframes scroll-hint { 0% { transform: translateY(-20px); } 100% { transform: translateY(56px); } }

/* Asymmetric section rhythm */
.design-4 .about-grid { align-items: start; }
.design-4 .about-media { position: relative; }
.design-4 .about-media img { border-radius: 2px; }
.design-4 .about-media::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--c-secondary); z-index: -1;
}
.design-4 .about-copy { padding-top: var(--sp-6); }

.design-4 .card { border-radius: 2px; border: none; background: var(--c-surface); }
.design-4 .card:hover { transform: translateY(-10px); }
.design-4 .card-media img { height: 260px; transition: transform 600ms var(--ease); }
.design-4 .card:hover .card-media img { transform: scale(1.06); }
.design-4 .card-icon { border-radius: 2px; }

.design-4 .feature { background: transparent; border-top: 2px solid var(--c-primary); border-radius: 0; padding-inline: 0; }
.design-4 .feature h3 { font-size: 1.1rem; }

.design-4 .section-stats { background: var(--c-primary); color: var(--c-bg); }
.design-4 .stat-value, .design-4 .stat-suffix { color: var(--c-accent); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.design-4 .stat-label { color: rgba(255,255,255,.7); }

/* Masonry-ish gallery */
.design-4 .gallery-item img { border-radius: 2px; aspect-ratio: auto; height: 100%; }
.design-4 .gallery.gallery-grid .gallery-item:nth-child(4n+1) { grid-row: span 2; }
.design-4 .gallery.gallery-grid .gallery-item:nth-child(4n+1) img { aspect-ratio: 3 / 4; }

.design-4 .price-card { border-radius: 2px; text-align: left; }
.design-4 .price-badge { border-radius: 2px; left: var(--sp-5); transform: none; }
.design-4 .testimonial { border-radius: 2px; background: var(--c-surface); }
.design-4 .testimonial blockquote { font-size: 1.25rem; line-height: 1.5; }

.design-4 .section-cta { background: var(--c-primary); }
.design-4 .section-cta .btn-primary { background: var(--c-accent); color: var(--c-primary); }

.design-4 .contact-form { border-radius: 2px; }
.design-4 .field input, .design-4 .field textarea { border-radius: 2px; background: transparent; border-width: 0 0 2px 0; padding-inline: 0; }

.design-4 .site-footer { background: var(--c-primary); color: rgba(255,255,255,.72); }
.design-4 .footer-brand { color: #fff; font-size: 2rem; }
.design-4 .footer-bottom, .design-4 .social-list a { border-color: rgba(255,255,255,.18); }

.design-4 .reveal { transform: translateY(34px); }

/* --- Structural personality: editorial, oversized, off-grid --------------- */
.design-4 .section { padding-block: var(--sp-10); }
.design-4 .section-title {
  font-size: clamp(2.2rem, 7vw, 4.4rem);
  font-weight: 800; letter-spacing: -.045em; line-height: .95;
  text-transform: uppercase;
}
.design-4 .eyebrow {
  font-family: var(--font-body); letter-spacing: .3em; font-size: .68rem;
  color: var(--c-secondary); font-weight: 700;
}
.design-4 .section-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--sp-6); align-items: end; max-width: none; }
.design-4 .section-lead { border-left: 3px solid var(--c-accent); padding-left: var(--sp-4); }

/* Hero: giant type, image bleeds past the column */
.design-4 .hero-title { font-size: clamp(2.6rem, 9vw, 6rem); line-height: .9; text-transform: uppercase; letter-spacing: -.05em; }
.design-4 .hero-inner { grid-template-columns: 1fr; gap: var(--sp-7); }
.design-4 .hero-media { margin-inline-end: calc(var(--sp-7) * -1); }
.design-4 .hero-media img { border-radius: 0; aspect-ratio: 21 / 9; object-fit: cover; }

/* Offset card grid — every second card drops down */
.design-4 .card { border-radius: 0; border: 1px solid var(--c-text); box-shadow: none; background: var(--c-bg); }
.design-4 .card:nth-child(even) { transform: translateY(22px); }
.design-4 .card:hover { transform: translateY(0) scale(1.015); background: var(--c-surface); }
.design-4 .card:nth-child(even):hover { transform: translateY(22px) scale(1.015); }
.design-4 .card-title { text-transform: uppercase; letter-spacing: -.01em; font-weight: 800; }
.design-4 .card-icon { border-radius: 0; background: var(--c-accent); color: var(--c-primary); }

.design-4 .feature { border: 0; border-top: 2px solid var(--c-text); border-radius: 0; }
.design-4 .feature-icon { background: none; color: var(--c-secondary); font-size: 1.8rem; }

.design-4 .stat-value { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.05em; color: var(--c-secondary); }
.design-4 .price-card { border-radius: 0; border: 2px solid var(--c-text); }
.design-4 .testimonial { border-radius: 0; background: var(--c-surface); }
.design-4 .accordion-trigger { text-transform: uppercase; font-weight: 800; letter-spacing: -.01em; }
.design-4 .btn { border-radius: 0; text-transform: uppercase; font-weight: 800; letter-spacing: .04em; }
.design-4 .btn-primary { background: var(--c-text); color: var(--c-bg); }
.design-4 .btn-primary:hover { background: var(--c-accent); color: var(--c-primary); }
.design-4 .cta-inner { background: var(--c-text); color: var(--c-bg); border-radius: 0; }
.design-4 .site-footer { background: var(--c-text); color: var(--c-bg); }

@media (max-width: 900px) {
  .design-4 .section-head { grid-template-columns: 1fr; }
  .design-4 .hero-media { margin-inline-end: 0; }
  .design-4 .card:nth-child(even) { transform: none; }
  .design-4 .card:nth-child(even):hover { transform: scale(1.015); }
}