/* Shared vertical rhythm: section breaks, inset headings, related content and fields. */
:root {
  --space-section: 64px;
  --space-linked-section: 48px;
  --space-inset: 32px;
  --space-content: 32px;
  --space-row: 24px;
  --space-field: 16px;
  --space-page-start: 48px;
}
@media (max-width: 700px) {
  :root {
    --space-section: 48px;
    --space-linked-section: 32px;
    --space-inset: 24px;
    --space-content: 24px;
    --space-page-start: 32px;
  }
}

/* Page openings and endings use the same breathing room. */
/* Homepage openings use the same spacing scale as the rest of the page. */
.home-page {
  --space-hero-start: var(--space-section);
  --space-hero-end: var(--space-section);
}
.home-page .hero { padding-block: var(--space-hero-start) var(--space-hero-end); }
.home-page .hero .intro { margin-bottom: var(--space-row); }
.home-page .hero-bottom { margin-top: var(--space-content); }
.home-page .hero-actions { margin-top: var(--space-row); gap: var(--space-field) var(--space-content); }
@media (min-width: 701px) {
  .home-page .hero { align-items: center; column-gap: var(--space-content); }
  .home-page .hero-content { grid-column: 1; grid-row: 1; }
  .home-page .hero-portrait { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .home-page {
    --space-hero-start: var(--space-linked-section);
    --space-hero-end: var(--space-linked-section);
  }
}
.work-main .work-intro, .personal-intro { padding-top: var(--space-page-start); }
.contact-body .contact-page { margin-top: 0; padding-block: var(--space-page-start) var(--space-section); }
.application-hero { padding-block: var(--space-page-start) var(--space-section); }
.legal-main { margin-block: var(--space-page-start) var(--space-section); }
.personal-ending, .work-main .work-closing { padding-bottom: var(--space-section); }
.contact-enquiry, .application-layout { padding-block: var(--space-inset) var(--space-section); }

/* Homepage: clear section breaks, with a closer relationship between outcome and offer. */
.home-problems__inner { padding-block: var(--space-linked-section) var(--space-section); }
.home-problems .problem-grid { margin-top: var(--space-content); }
.home-problems .problem-link { gap: var(--space-row); }
.home-page .recent-work { margin-bottom: var(--space-section); }
.home-page .section-kicker { padding-top: var(--space-inset); }
.recent-work__row:first-of-type { margin-top: var(--space-content); }
.recent-work__row { padding-block: var(--space-row); }
.home-page .tool-principle__content { margin-top: var(--space-content); }
.tool-principle .value-test { margin-top: var(--space-section); }
.home-page .value-test__grid { margin-top: var(--space-content); }
.home-page .value-test__grid p { padding-block: var(--space-linked-section); }
.home-page .value-test { padding-bottom: 0; }
.home-page .tool-principle { padding-bottom: var(--space-linked-section); }
.home-offer, .home-work-link { padding-block: var(--space-inset) var(--space-linked-section); }

/* Editorial pages share section gaps and heading-to-content spacing. */
.work-main { --work-section-space: var(--space-section); }
.personal-main { --personal-space: var(--space-section); }
.personal-section, .work-section-label, .solved { padding-top: var(--space-inset); }
.personal-timeline, .personal-notes, .personal-contact-sheet, .personal-thoughts,
.credential-group, .work-process__stages, .client-work > .work-grid { margin-top: var(--space-content); }
.solved-heading { margin-bottom: var(--space-content); }
.personal-credentials__intro { margin-top: var(--space-field); }
.personal-ending__actions { margin-top: var(--space-content); }

/* Forms and offer details keep their smaller, consistent rhythm. */
.application-offer { margin-top: var(--space-content); }
.application-scope { padding-bottom: var(--space-section); }
.offer-details { margin-block: var(--space-content); row-gap: var(--space-content); }
.offer-details > div { padding-top: var(--space-field); }
.offer-details dt { margin-bottom: 8px; }
.application-summary { padding-top: var(--space-row); }
.application-progress { margin-bottom: var(--space-row); padding-bottom: var(--space-field); }
.application-step legend { margin-bottom: var(--space-row); }
.enquiry-form__grid, .application-fields { row-gap: var(--space-field); }
.form-field label, .contact-enquiry .form-field label { margin-bottom: 8px; }
.application-actions, .contact-enquiry .form-actions { margin-top: var(--space-row); }
.contact-enquiry .next-title { margin-top: var(--space-field); }

/* Reading pages use content spacing rather than marketing section spacing. */
.legal-main section { margin-top: var(--space-content); }
.whatsapp-policy article section + section { padding-top: var(--space-inset); }
.legal-main h1 { margin-bottom: var(--space-row); }
.legal-main h2 { margin-bottom: var(--space-field); }

@media (max-width: 700px) {
  .home-page .hero { display: grid; grid-template-areas: "intro" "headline" "portrait" "details"; row-gap: var(--space-content); }
  .home-page .hero-content { display: contents; }
  .home-page .hero .intro { grid-area: intro; margin: 0; }
  .home-page .hero h1 { grid-area: headline; }
  .home-page .hero-portrait { grid-area: portrait; margin: 0; }
  .home-page .hero-bottom { grid-area: details; margin: 0; }
  .home-problems .problem-grid > li,
  .home-problems .problem-grid > li:first-child,
  .home-problems .problem-grid > li:last-child { padding-block: var(--space-row); }
  .home-problems .problem-link { gap: var(--space-field); }
}