.grace-section {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: linear-gradient(125deg, #f9fbfd 0%, #f1f6fa 100%);
}
.grace-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.grace-intro { position: sticky; top: calc(var(--header-height, 80px) + 2rem); padding-top: .4rem; }
.grace-intro .eyebrow { margin-bottom: 1.2rem; }
.grace-word { display: flex; align-items: baseline; gap: .06em; width: max-content; max-width: 100%; color: #0b2855; font-family: var(--font-display); font-size: clamp(4rem, 6.3vw, 6.2rem); font-weight: 800; letter-spacing: -.085em; line-height: 1; white-space: nowrap; }
.grace-word span:first-child { color: var(--accent); }
.grace-intro h2 { max-width: 430px; margin: 1.1rem 0 0; color: #0b2855; font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
.grace-rule { display: block; width: 46px; height: 3px; margin: 1.5rem 0 1rem; border-radius: 999px; background: var(--accent); }
.grace-intro > p:last-child { max-width: 390px; margin: 0; color: #526579; font-size: .98rem; line-height: 1.7; }

.grace-timeline { position: relative; display: grid; gap: 1rem; }
.grace-timeline::before { position: absolute; top: 2.5rem; bottom: 2.5rem; left: 41px; width: 2px; background: linear-gradient(#b3c8d9, #0b2855 45%, #f28c38); content: ''; }
.grace-item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: .75rem; min-width: 0; }
.grace-node { position: relative; z-index: 1; display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid #e0e9f0; border-radius: 50%; color: #0b2855; background: #fff; box-shadow: 0 9px 24px rgba(11,40,85,.09); }
.grace-node svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.grace-card { position: relative; min-width: 0; min-height: 144px; padding: 1.2rem 1.6rem; border: 1px solid #e0e9f0; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(11,40,85,.07); }
.grace-card::after { position: absolute; top: 18%; right: 0; bottom: 18%; width: 4px; border-radius: 4px 0 0 4px; background: var(--accent); content: ''; }
.grace-card__index { display: block; margin-bottom: .35rem; color: var(--accent-dark); font-size: .7rem; font-weight: 800; letter-spacing: .09em; }
.grace-card h3 { margin: 0 0 .45rem; color: #0b2855; font-family: var(--font-display); font-size: 1.18rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.grace-card p { max-width: 49ch; margin: 0; color: #536476; font-size: .84rem; line-height: 1.55; }
.grace-timeline--motion .grace-item { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--grace-index) * 55ms); }
.grace-timeline--motion .grace-item.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .grace-layout { grid-template-columns: 1fr; gap: 2.6rem; }
  .grace-intro { position: static; }
  .grace-word { font-size: clamp(3.6rem, 10vw, 5.4rem); }
  .grace-intro h2 { max-width: 600px; }
  .grace-intro > p:last-child { max-width: 650px; }
}
@media (max-width: 600px) {
  .grace-section { padding: 3.25rem 0 3.75rem; }
  .grace-layout { gap: 2rem; }
  .grace-word { font-size: clamp(3rem, 11vw, 4.3rem); }
  .grace-intro h2 { margin-top: .7rem; font-size: clamp(1.85rem, 7.5vw, 2.3rem); }
  .grace-rule { margin: 1.1rem 0 .85rem; }
  .grace-intro > p:last-child { font-size: .9rem; line-height: 1.6; }
  .grace-timeline { gap: .85rem; }
  .grace-timeline::before { top: 1.8rem; bottom: 1.8rem; left: 27px; }
  .grace-item { grid-template-columns: 56px minmax(0, 1fr); gap: .55rem; }
  .grace-node { width: 56px; height: 56px; }
  .grace-node svg { width: 28px; height: 28px; }
  .grace-card { min-height: 0; padding: 1rem 1.15rem; border-radius: 14px; }
  .grace-card__index { font-size: .66rem; }
  .grace-card h3 { font-size: 1.05rem; }
  .grace-card p { font-size: .79rem; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .grace-timeline--motion .grace-item { opacity: 1; transform: none; transition: none; }
}