/* Shared spacing and card-surface contract. Load last so page-specific values cannot drift.
   The viewport hero, photo crops and the Spatial iris keep their own geometry. */
:root {
  --layout-label-gap: 1rem;
  --layout-copy-gap: 1.5rem;
  --layout-paragraph-gap: 1rem;
  --layout-section-space: 5rem;
  --layout-heading-gap: 2.5rem;
  --layout-group-gap: 4rem;
  --layout-divider-color: rgba(40, 35, 44, .12);
  --layout-grid-gap: 1.5rem;
  --layout-grid-row-gap: 2rem;
  --layout-card-inline: 1.5rem;
  --layout-card-block: 2rem;
  --layout-compact-card-inline: 1.5rem;
  --layout-compact-card-block: 2rem;
  --layout-compact-grid-gap: 1.5rem;
  /* Alpha belongs to the surface paint, never the text or form controls. */
  --surface-alpha-card-tint: .38;
  --surface-alpha-card-light: .48;
  --surface-alpha-card-middle: .12;
  --surface-alpha-card-edge: .28;
  --surface-alpha-card-border: .66;
  --surface-alpha-card-highlight: .72;
  --surface-alpha-readable: .92;
  --shadow-level-0: none;
  --shadow-level-1: 0 12px 38px rgba(45, 40, 48, .045);
  --surface-card-highlight: inset 0 1px 0 rgba(255, 255, 255, var(--surface-alpha-card-highlight));
  --surface-card-shadow: var(--surface-card-highlight), var(--shadow-level-1);
  --surface-card-border: 1px solid rgba(255, 255, 255, var(--surface-alpha-card-border));
  --surface-card-radius: 1rem;
  --surface-card-radius-small: .8125rem;
  --surface-card-background:
    linear-gradient(135deg,
      rgba(255, 255, 255, var(--surface-alpha-card-light)),
      rgba(255, 255, 255, var(--surface-alpha-card-middle)) 46%,
      rgba(255, 255, 255, var(--surface-alpha-card-edge))),
    rgba(233, 238, 236, var(--surface-alpha-card-tint));
  --surface-card-readable-background: rgba(247, 250, 248, var(--surface-alpha-readable));
  --surface-card-filter: blur(34px) saturate(130%) brightness(1.025);
}

/* One glass-card level for service summaries and the TOP form. */
.service-offering-card,
.header--home + main #contact .contact-form {
  border: var(--surface-card-border);
  border-radius: var(--surface-card-radius);
  background: var(--surface-card-readable-background);
  box-shadow: var(--surface-card-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-offering-card,
  .header--home + main #contact .contact-form {
    background: var(--surface-card-background);
    -webkit-backdrop-filter: var(--surface-card-filter);
    backdrop-filter: var(--surface-card-filter);
  }
}

@media (max-width: 699px) {
  .service-offering-card,
  .header--home + main #contact .contact-form {
    border-radius: var(--surface-card-radius-small);
  }
}

@media (min-width: 700px) {
  :root {
    --layout-section-space: 6.5rem;
    --layout-heading-gap: 3rem;
    --layout-group-gap: 5rem;
    --layout-grid-gap: 2rem;
    --layout-grid-row-gap: 2.5rem;
    --layout-card-inline: 2rem;
    --layout-card-block: 2.5rem;
  }
}

@media (min-width: 1100px) {
  :root {
    --layout-section-space: 8rem;
    --layout-heading-gap: 4rem;
    --layout-group-gap: 6rem;
    --layout-grid-row-gap: 3rem;
    --layout-card-inline: 2.5rem;
    --layout-card-block: 3rem;
    --layout-compact-card-block: 2.25rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --layout-section-space: 9rem;
    --layout-compact-card-inline: 1.75rem;
    --layout-compact-card-block: 2.5rem;
    --layout-compact-grid-gap: 2rem;
  }
}

/* Section padding creates the same rhythm across changes of background. */
.header--home + main { --home-section-space: var(--layout-section-space); }
.header--home + main #contact,
.interior-theme .interior-page :is(.detail-section, .service-example, .about-invitation, .interior-cta),
body.spatial-art-theme :is(.spatial-selected, .spatial-contact, .art-process-section, .art-installation-section, .art-credits-section) {
  padding-block: var(--layout-section-space);
}

.interior-theme .interior-page .subhero { padding-bottom: var(--layout-section-space); }

/* One inset for ordinary explanatory cards; one for narrow multi-column cards. */
.interior-theme .interior-page :is(
  .detail-panel, .related-card, .offer-card, .legal-contact, .news-empty
),
.header--home + main #contact .contact-form {
  padding: var(--layout-card-block) var(--layout-card-inline);
}

.service-offering-content,
.interior-theme .interior-page :is(.services-project-card, .about-proof-card) {
  padding: var(--layout-compact-card-block) var(--layout-compact-card-inline);
}

.service-offering-grid { gap: var(--layout-compact-grid-gap); }
.service-offering-heading { gap: var(--layout-copy-gap); }
.service-offering .service-offering-description { margin-top: var(--layout-paragraph-gap); }
.service-offering-scope {
  margin-block: var(--layout-copy-gap) var(--layout-paragraph-gap);
  padding-top: var(--layout-paragraph-gap);
}
.service-offering-scope ul { gap: .5rem; }

.interior-theme .interior-page :is(
  .detail-grid, .index-grid, .about-proof-grid, .offer-grid, .services-project-grid
) {
  column-gap: var(--layout-grid-gap);
  row-gap: var(--layout-grid-row-gap);
}

/* Labels, headings, copy and actions keep distinct, repeatable distances. */
.header--home + main :is(.home-introduction, .home-services-summary) .eyebrow,
.interior-theme .interior-page :is(.detail-panel, .related-card, .about-proof-card, .services-section-heading, .services-strengths-heading) > .eyebrow {
  margin-bottom: var(--layout-label-gap);
}

.home-introduction-lead { margin-bottom: var(--layout-copy-gap); }
.home-introduction-copy > .text-link { margin-top: var(--layout-grid-gap); }
#services .home-services-intro { margin-top: var(--layout-copy-gap); }
.home-services-summary .service-offering-grid { margin-top: var(--layout-heading-gap); }
#works .work-head { margin-bottom: var(--layout-heading-gap); }
/* The total group gap is split evenly around one quiet divider.
   Reset the former heading gap so it cannot add to this block boundary. */
#process .home-strengths-details {
  min-width: 0;
  margin-top: calc(var(--layout-group-gap) / 2);
  padding-top: calc(var(--layout-group-gap) / 2);
  border-top: 1px solid var(--layout-divider-color);
}
#process .home-process-list { margin: 0; }

@media (max-width: 1000px) {
  /* The small-screen pigment can extend above its host. Reserve only the
     missing space inside its grid row, leaving the copy's top edge intact. */
  #process .home-strengths-details .home-process-visual {
    margin-top: max(0px, calc(var(--process-circle-size) * .4 + .5rem - var(--layout-group-gap) / 2));
  }
}
#news .home-news-heading { margin-bottom: var(--layout-heading-gap); }
#works .home-work-info { padding-block: var(--layout-copy-gap); }

.interior-theme .interior-page :is(.services-section-heading, .services-strengths-heading) {
  margin-bottom: var(--layout-heading-gap);
}
.interior-theme .interior-page :is(.services-section-heading, .services-strengths-heading) > p:not(.eyebrow),
.interior-theme .interior-page .detail-panel > p:not(.eyebrow) {
  margin-top: var(--layout-copy-gap);
}
.interior-theme .interior-page .detail-section > .wrap > h2 {
  margin-top: var(--layout-label-gap);
  margin-bottom: var(--layout-heading-gap);
}
.interior-theme .interior-page :is(.offer-card, .services-project-card) :is(h2, h3) {
  margin-top: 0;
  margin-bottom: var(--layout-copy-gap);
}
.interior-theme .interior-page :is(.offer-kind, .services-project-kind) {
  margin-bottom: var(--layout-label-gap);
}
.interior-theme .interior-page .related-card :is(h2, h3) {
  margin-top: 0;
  margin-bottom: var(--layout-copy-gap);
}
.interior-theme .interior-page .related-card .text-link { padding-top: var(--layout-copy-gap); }
.interior-theme .interior-page .detail-panel > .detail-list { margin-top: var(--layout-copy-gap); }
.interior-theme .interior-page :is(.services-project-summary, .offer-summary) {
  margin-top: 0;
  margin-bottom: var(--layout-copy-gap);
}
.interior-theme .interior-page .offer-period + .offer-summary {
  margin-top: var(--layout-copy-gap);
}
.interior-theme .interior-page :is(.services-project-card, .offer-card) > .detail-list { margin-top: 0; }
.interior-theme .interior-page .offer-card h4 {
  margin-top: 0;
  margin-bottom: var(--layout-label-gap);
}

/* Keep form controls comfortable without changing their text or behavior. */
.header--home + main #contact .contact-layout { gap: var(--layout-heading-gap); }
.header--home + main #contact .contact-form-head {
  padding-bottom: var(--layout-copy-gap);
  margin-bottom: 2rem;
}
.header--home + main #contact .form-row { margin-bottom: var(--layout-copy-gap); }

/* Art remains photographic: standard section and caption spacing, no extra image inset. */
body.spatial-art-theme .spatial-selected-heading { margin-bottom: var(--layout-heading-gap); }
body.spatial-art-theme .spatial-work-gallery {
  column-gap: var(--layout-grid-gap);
  row-gap: var(--layout-heading-gap);
}
body.spatial-art-theme .spatial-work-gallery .spatial-work-caption {
  padding-top: var(--layout-copy-gap);
  margin-top: var(--layout-copy-gap);
}