/* Shared page rhythm: tighter premium spacing across site templates. */
:root {
  --site-section-pad: clamp(4.75rem, 8vw, 8rem);
  --site-section-pad-tight: clamp(3.5rem, 6vw, 5.5rem);
}

/* Prevent long display copy from escaping its card or grid track. */
:where(.card, .card-solid, .metric-card, .service-card, .proc-card, .hero-card, .cta-box, .framework-card, .glass-card, .faq-item, .testimonial-card) {
  min-width: 0;
}

:where(h1, h2, h3, h4, p, li, a, button) {
  max-width: 100%;
  overflow-wrap: break-word;
}

.content-page .hero-card {
  container-type: inline-size;
}

.content-page .hero-title {
  max-width: 100%;
  font-size: clamp(1.5rem, 6.5cqw, 3.5rem);
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
}

.content-page .hero-title .white {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.content-page .hero-desc {
  max-width: 100%;
}

/* Core marketing page sections. */
.about,
.work,
.services,
.testimonials {
  padding-top: var(--site-section-pad);
  padding-bottom: var(--site-section-pad);
}

.founder-section,
.section-pad {
  padding-top: var(--site-section-pad-tight);
  padding-bottom: var(--site-section-pad-tight);
}

.trust {
  padding-top: var(--site-section-pad-tight);
  padding-bottom: var(--site-section-pad-tight);
}

.cta {
  padding-top: var(--site-section-pad);
  padding-bottom: var(--site-section-pad);
}

/* Editorial, SEO, location, and press templates. */
.article-hero,
.blog-hero,
.city-hero {
  padding-top: clamp(8rem, 11vw, 10rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}

.article-content,
.blog-grid,
.city-content,
.location-content {
  padding-top: var(--site-section-pad-tight);
  padding-bottom: var(--site-section-pad-tight);
}

.hub-wrap,
.press-wrap {
  padding-top: clamp(7rem, 10vw, 9rem);
  padding-bottom: clamp(4rem, 6vw, 6rem);
}

.legal-container {
  padding-top: clamp(7rem, 10vw, 9rem);
  padding-bottom: clamp(4rem, 6vw, 6rem);
}

/* Richer service templates with their own page-level section systems. */
.services-page .services-hero {
  padding-top: clamp(6rem, 8vw, 8rem);
  padding-bottom: var(--site-section-pad-tight);
}

.services-page .services-grid-section,
.services-page .framework-section,
.services-page .cta-banner {
  padding-top: var(--site-section-pad-tight);
  padding-bottom: var(--site-section-pad-tight);
}

.uiux-page main > .section,
.uiux-page main > .cta,
.uiux-page .lead-magnet-section {
  padding-top: var(--site-section-pad);
  padding-bottom: var(--site-section-pad);
}

.openclaw-page > section:not(.hero) {
  padding-top: var(--site-section-pad);
  padding-bottom: var(--site-section-pad);
}

.openclaw-page .section-header-wrap {
  margin-bottom: clamp(42px, 5vw, 62px);
}

@media (max-width: 768px) {
  :root {
    --site-section-pad: 4.5rem;
    --site-section-pad-tight: 3.5rem;
  }

  .content-page .hero-title {
    font-size: 1.35rem !important;
    line-height: 1.05;
  }

  .article-hero,
  .blog-hero,
  .city-hero {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }

  .hub-wrap,
  .press-wrap,
  .legal-container {
    padding-top: 6rem;
    padding-bottom: 3.5rem;
  }

  .services-page .services-hero,
  .services-page .services-grid-section,
  .services-page .framework-section,
  .services-page .cta-banner,
  .uiux-page main > .section,
  .uiux-page main > .cta,
  .uiux-page .lead-magnet-section,
  .openclaw-page > section:not(.hero) {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* Responsive lock: layout tracks must shrink or stack before the viewport does. */
html,
body {
  width: 100%;
  max-width: 100%;
}

body > *,
main,
section,
header,
footer,
article,
aside,
nav,
.container,
.inner,
.site-main {
  min-width: 0;
  max-width: 100%;
}

img,
svg,
video,
canvas,
iframe,
table {
  max-width: 100%;
}

/* Keep decorative artwork from defining the content width. */
.content-page .hero-section,
.content-page .split-grid,
.content-page .case-study-card,
.content-page .services-grid,
.content-page .process-grid,
.content-page .metric-stack,
.content-page .cta-banner,
.content-page .section-pad {
  width: min(100%, 1400px);
  max-width: 100%;
  min-width: 0;
}

.content-page .hero-card,
.content-page .card-solid,
.content-page .service-card,
.content-page .proc-card,
.content-page .metric-card,
.content-page .case-study-card > *,
.content-page .split-grid > * {
  min-width: 0;
  max-width: 100%;
}

.content-page .hero-card h1,
.content-page .hero-card h2,
.content-page .hero-card h3,
.content-page .hero-card p,
.content-page .card-solid h2,
.content-page .card-solid p,
.content-page .service-card h3,
.content-page .service-card p {
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .content-page .hero-section,
  .content-page .split-grid,
  .content-page .case-study-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-page .hero-section {
    padding-inline: clamp(16px, 4vw, 40px);
  }

  .automation-page .hero,
  .automation-page .humanity,
  .automation-page .process-deck,
  .automation-page .crew-console,
  .automation-page .reliability-layout,
  .automation-page .handoff,
  .automation-page .faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .automation-page .hero {
    min-height: auto;
  }

  .automation-page .hero-visual {
    position: relative;
    inset: auto;
    min-height: clamp(360px, 58vw, 620px);
    order: 2;
  }

  .automation-page .process-deck ul {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .content-page .hero-section {
    padding: 88px 14px 28px !important;
  }

  .content-page .hero-card {
    padding: clamp(24px, 7vw, 36px) clamp(18px, 5vw, 28px) !important;
  }

  .content-page .hero-title,
  .content-page .hero-card h1 {
    font-size: clamp(1.25rem, 5.4vw, 1.95rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .content-page .hero-desc,
  .content-page .hero-card p {
    font-size: clamp(0.92rem, 3.8vw, 1.06rem) !important;
    line-height: 1.5 !important;
  }

  .content-page .hero-card,
  .content-page .art-card,
  .content-page .case-study-card,
  .content-page .card-solid,
  .content-page .metric-card,
  .content-page .service-card,
  .content-page .proc-card {
    overflow: visible;
  }

  .automation-page .hero,
  .automation-page .humanity,
  .automation-page .section-shell {
    width: calc(100% - 28px);
    padding-inline: 0;
  }

  .automation-page .hero h1,
  .automation-page .section-heading h2,
  .automation-page .systems-copy h2,
  .automation-page .faq-heading h2 {
    max-width: 100%;
    font-size: clamp(2.25rem, 12vw, 4rem);
    overflow-wrap: anywhere;
  }

  .automation-page .hero-visual,
  .automation-page .humanity-figure,
  .automation-page .crew-portrait,
  .automation-page .crew-interface,
  .automation-page .reliability-primary {
    min-height: clamp(300px, 82vw, 520px);
  }

  .automation-page .process-deck,
  .automation-page .crew-interface,
  .automation-page .reliability-secondary {
    grid-template-columns: minmax(0, 1fr);
  }
}