/* Homepage layout only. Fonts, colour roles and shared controls live in theme.css,
   which every page loads before this file. */

/* Two tinted anchors instead of alternating stripes: the Fertigung band and the closing
   contact section. Only full-bleed sections are tinted, so no background sits inside a container. */
.manufacturing, .contact-section { background: var(--primary); }
.projects-section, .about-section, .process-section { background: var(--paper); }
/* Hairlines only where two untinted sections meet. */
#prototyping, .projects-section, .about-section { border-top: 1px solid var(--line); }

.hero h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1.12; letter-spacing: -.03em; max-width: 10ch; }
.section-heading > div { flex: 1; min-width: 0; }
.section-heading > p { flex-shrink: 0; }
.hero-description, .section-heading > p, .split-section p:not(.eyebrow,.section-lead),
.service-card p, .manufacturing-copy p, .process-grid p, .contact-copy > p:not(.eyebrow,.section-lead) {
  font-size: 16px;
}
.capability-strip .container { font-size: 14px; }
.capability-strip span:first-child { font-size: 13px; }
.gifts-layout { grid-template-columns: .85fr 1.4fr; align-items: start; }
.gift-feature .photo-gift { min-height: 380px; }
.service-card h3 { margin-top: 0; }
.service-card:last-child { grid-column: 1 / -1; max-width: 44ch; }
.gifts-note { max-width: 62ch; margin-top: 36px; font-size: 19px; }
/* Cards keep their natural height, so the unequal content stays visible. */
.manufacturing-grid { align-items: start; }
.manufacturing-copy h3 { margin-top: 0; }
.combination-banner { background: var(--accent); color: var(--paper); border-radius: 4px; padding: 36px; }
.combination-banner > div { flex: 1; }
.combination-banner p { font-size: 16px; max-width: 65ch; }
.combination-banner .text-link { color: var(--paper); flex: 0 0 180px; margin-left: auto; }
.combination-banner :focus-visible { outline-color: var(--primary); }

/* A narrower introduction beside a roomy, staggered sequence breaks the grid rhythm. */
.process-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9%; padding-block: 144px 156px; }
.process-section .section-heading { display: block; margin: 0; }
.process-section .section-heading > p { margin-top: 24px; max-width: 34ch; }
.process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px; align-items: start; }
.process-grid li:nth-child(even) { margin-top: 64px; }
.step-number { width: auto; height: auto; display: block; border: 0; border-radius: 0; font-size: 13px; margin-bottom: 18px; color: var(--muted); }
.process-grid li:last-child .step-number { background: transparent; border: 0; }
.about-section .split-section { grid-template-columns: .85fr 1.15fr; }
/* The founder photo follows the height of the story beside it. */
.about-section .photo-about { align-self: stretch; }
.contact-copy h2 { font-size: clamp(30px, 3vw, 44px); }
.contact-details > a { color: var(--brand); }
.form-submit { justify-content: center; }
.form-privacy a { color: var(--brand); }
.footer-top > p { font-size: 15px; }

@media (max-width: 1200px) {
  .process-section { gap: 6%; }
}
@media (max-width: 980px) {
  .process-section { padding-block: 104px 116px; }
  .process-grid { gap: 28px; }
}
@media (max-width: 800px) {
  .section-heading > p { max-width: 56ch; }
  .gifts-layout, .about-section .split-section { grid-template-columns: 1fr; }
  .gift-feature .photo-gift { min-height: 290px; }
  .process-section { grid-template-columns: 1fr; gap: 48px; padding-block: 88px 100px; }
  .process-section .section-heading > p { max-width: 56ch; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid li:nth-child(even) { margin-top: 32px; }
  .combination-banner { align-items: flex-start; flex-direction: column; gap: 18px; padding: 28px; }
  .combination-banner .text-link { flex: auto; margin: 0; }
}
@media (max-width: 480px) {
  .hero .button, .form-submit { justify-content: center; }
  .service-card:last-child { max-width: none; }
  .process-section { padding-block: 82px 94px; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .process-grid li:nth-child(even) { margin-top: 0; }
  .process-grid p { max-width: 40ch; }
}
@media print {
  main > section, .manufacturing, .process-section { background: white; }
  .process-section { display: block; padding-block: 25px; }
  .process-section .section-heading { margin-bottom: 25px; }
  .combination-banner { background: white; color: black; }
  .combination-banner .text-link { color: black; }
}