/* Preserve the page designs while removing cramped type and fragile layout rules. */
html { scroll-padding-top: 96px; }
body { --paper: #fdfcf9; }
main { overflow-wrap: break-word; }
main:focus { outline: none; }
main .hero {
  padding: 76px 0 80px;
  background: #fdfcf9;
}
main .hero-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px;
}
main .hero h1 {
  font-size: clamp(46px, 4.9vw, 68px);
  line-height: 1.08;
  letter-spacing: -.032em;
}
main .hero-copy { max-width: 720px; font-size: 17px; line-height: 1.8; }
main .hero-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
main .hero .hero-inner { max-width: 1160px; }
main .hero-inner h1 { max-width: 990px; font-size: clamp(46px, 5.5vw, 74px); }
main .section-head h2, main .section-heading h2 { line-height: 1.13; }
main .step, main .lens, main .domain { min-width: 0; }
main .loop-wrap {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: 66px;
}
main .loop-wrap .loop-arrow { display: none; }
main .loop-wrap .loop-node:not(:nth-of-type(5))::after {
  content: "→";
  position: absolute;
  right: -15px;
  top: 45%;
  color: #64748b;
  z-index: 2;
  font-size: 20px;
}
main .flow {
  grid-template-columns: minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);
  gap: 5px;
  padding-bottom: 64px;
}
main .flow .flow-arrow { margin: 0; font-size: 16px; }
main .flow-return, main .loop-return { border-radius: 14px; line-height: 1.6; }
main .look { background: #172236; color: #ffffff; }
main .cta .eyebrow { color: #ffffff; }
main .cta .callout { color: #0f172a; }
main .hero-actions .button, main .cta .button, main .closing .button { min-height: 44px; }
@media (max-width: 1100px) {
  main .hero-grid, main .loop-grid, main .replay-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  main .hero-grid .report, main .method-map { width: 100%; max-width: 640px; }
  main .hero h1 { max-width: 900px; }
  main .steps, main .lens-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 84px; }
  main .container { width: calc(100% - 40px); }
  main .hero { padding: 48px 0 56px; }
  main .hero h1, main .hero-inner h1 { font-size: clamp(36px, 8.3vw, 54px); line-height: 1.12; letter-spacing: -.027em; }
  main .hero-copy { font-size: 16px; line-height: 1.75; }
  main .hero .eyebrow { font-size: 10px; letter-spacing: .13em; line-height: 1.7; }
  main .hero-actions { gap: 14px; }
  main .section, main .intro, main .connected, main .lenses { padding: 56px 0; }
  main .section-head, main .section-heading { margin-bottom: 30px; }
  main .section-head h2, main .section-heading h2, main .cta h2, main .closing h2 { font-size: clamp(28px,7.3vw,40px); }
  main .section-head p, main .section-heading p { font-size: 16px; }
  main .service-grid, main .blind-grid, main .cause-grid, main .compare, main .look-grid, main .change-grid, main .independent, main .independent-grid, main .deliverable, main .examples, main .insight-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  main .loop-wrap, main .flow { grid-template-columns: minmax(0,1fr); gap: 22px; padding-bottom: 88px; }
  main .loop-wrap .loop-node:not(:nth-of-type(5))::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -25px; transform: translateX(-50%); }
  main .flow .flow-arrow { display: none; }
  main .flow .flow-node:not(.last)::after { content: "↓"; position: absolute; bottom: -23px; left: 50%; color: #64748b; transform: translateX(-50%); }
  main .loop-return, main .flow-return { left: 0; right: 0; font-size: 11px; }
  main .domains, main .lens-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 479px) {
  main .steps { grid-template-columns: minmax(0,1fr); }
  main .step { padding: 24px 22px; }
  main .service-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main * { transition: none !important; }
}