/* Template: Studio. Layout only: colours come from the theme tokens. */
.site-header { border-bottom-color: transparent; }
.header-inner { min-height: 80px; }
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.6rem, 1rem + 7vw, 6rem); line-height: 0.98; max-width: 14ch; margin-bottom: clamp(20px, 3vw, 32px); }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.hero-row .hero-lede { max-width: 44ch; margin: 0; }
.hero-row .hero-actions { margin: 0; align-items: center; }
.hero-link { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Work first: a big two-column masonry gallery (photos keep their own shape) */
.gallery-grid { column-count: 2 !important; column-gap: clamp(14px, 2.4vw, 26px) !important; }
.gallery-item { border-radius: var(--radius); margin-bottom: clamp(14px, 2.4vw, 26px); }

/* Services as a numbered list, not boxes */
#services .grid-3 { counter-reset: svc; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
#services .card { counter-increment: svc; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 22px 0; display: grid; grid-template-columns: 4rem 1fr 1.4fr; gap: 8px 24px; align-items: baseline; }
#services .card::before { content: counter(svc, decimal-leading-zero); font-family: var(--font-head); font-weight: var(--head-weight); color: var(--accent); }
#services .card h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 0; }

@media (max-width: 700px) {
  #services .card { grid-template-columns: 3rem 1fr; }
  #services .card p { grid-column: 2; }
  .gallery-grid { column-count: 1 !important; }
}