/* GPT-PANEL — unified editorial impact section.
   This stylesheet is scoped to #practices only: no copy or features changed.
   Desktop + separate classic mobile page share the same visual architecture. */
body .page > #practices.mission.surface {
  --impact-ink: #173550;
  --impact-blue: #255caa;
  --impact-border: #d5e2f0;
  --impact-muted: #4c6580;
  width: min(1360px, calc(100% - clamp(24px, 5vw, 96px))) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto clamp(24px, 4vw, 60px) !important;
  padding: clamp(34px, 4.6vw, 68px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) !important;
  column-gap: clamp(30px, 5.4vw, 76px) !important;
  row-gap: clamp(28px, 3.8vw, 47px) !important;
  align-items: center !important;
  border: 1px solid #d9e6f1 !important;
  border-radius: 28px !important;
  background: linear-gradient(140deg, #f4f8fd, #e8f1fb 100%) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#practices .section-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  align-self: center !important;
}
#practices .section-copy h2 {
  font-size: clamp(42px, 4.15vw, 63px) !important;
  line-height: 1.065 !important;
  letter-spacing: -.055em !important;
  font-weight: 660 !important;
  max-width: 610px !important;
  margin: 0 0 clamp(20px, 2.8vw, 35px) !important;
  color: #142e48 !important;
  text-wrap: balance !important;
}
#practices .section-copy .gradient-heading,
#practices .section-copy .gradient-heading-charcoal {
  background-image: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
#practices .section-copy .gradient-heading { color: #245fae !important; }
#practices .section-copy .gradient-heading-charcoal { color: #27394e !important; }
#practices .section-copy p {
  max-width: 53ch !important;
  margin: 0 0 15px !important;
  color: #415c79 !important;
  font-size: clamp(15px, 1.24vw, 17px) !important;
  line-height: 1.68 !important;
  text-align: left !important;
}
#practices .section-copy p:last-child { margin-bottom: 0 !important; }
#practices .section-copy p strong { color: #143c68 !important; }
#practices .section-copy p:first-of-type { font-size: clamp(16px, 1.32vw, 18px) !important; }

/* A single purposeful command-board instead of an isolated floating circle. */
#practices .four {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 78px repeat(2, minmax(126px, auto)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 355px !important;
  margin: 0 !important;
  padding: 16px 20px 18px !important;
  border: 1px solid #d4e1ee !important;
  border-radius: 23px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(28, 66, 111, .06) !important;
  overflow: hidden !important;
  transform: none !important;
}
#practices .four > .orbit { display: none !important; }
#practices .four > .center,
#practices .four > .center.center-search {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  order: 0 !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  width: 100% !important;
  max-width: none !important;
  height: 65px !important;
  min-height: 65px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  border: 1px solid #dce8f4 !important;
  border-radius: 12px !important;
  background: #f5f9fd !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#practices .four > .center::before,
#practices .four > .center::after,
#practices .four > .center .center-search-spacer {
  display: none !important;
}
#practices .four > .center .ico,
#practices .four > .center .center-search-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  color: #2468b0 !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
#practices .four > .center > span:not(.center-search-spacer) {
  font-size: 18px !important;
  font-weight: 680 !important;
  line-height: 1.2 !important;
  letter-spacing: .065em !important;
  color: #214c81 !important;
  -webkit-text-fill-color: #214c81 !important;
}
#practices .four > .four-item {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 126px !important;
  margin: 0 !important;
  padding: 19px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  animation: none !important;
  text-align: left !important;
}
#practices .four > .four-item.who { grid-column: 1 !important; grid-row: 2 !important; border-right: 1px solid #e4ebf2 !important; border-bottom: 1px solid #e4ebf2 !important; }
#practices .four > .four-item.what { grid-column: 2 !important; grid-row: 2 !important; border-bottom: 1px solid #e4ebf2 !important; }
#practices .four > .four-item.when { grid-column: 1 !important; grid-row: 3 !important; border-right: 1px solid #e4ebf2 !important; }
#practices .four > .four-item.where { grid-column: 2 !important; grid-row: 3 !important; }
#practices .four > .four-item .ico {
  flex: 0 0 42px !important;
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  padding: 10px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #edf4fc !important;
  color: #2b6bb3 !important;
  stroke: currentColor !important;
}
#practices .four > .four-item > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
}
#practices .four > .four-item strong {
  display: block !important;
  margin: 0 !important;
  color: #214c7d !important;
  font-size: 12px !important;
  font-weight: 770 !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
}
#practices .four > .four-item small {
  display: block !important;
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 440 !important;
  line-height: 1.46 !important;
  letter-spacing: normal !important;
  color: #4d6581 !important;
  overflow-wrap: normal !important;
  text-align: left !important;
}
/* One coherent outcome ribbon with readable full sentences, not four tiny cards. */
#practices > .benefits {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid #d7e4f1 !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.87) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#practices > .benefits > .benefit {
  min-width: 0 !important;
  min-height: 143px !important;
  margin: 0 !important;
  padding: 23px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-right: 1px solid #dfe8f1 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}
#practices > .benefits > .benefit:last-child { border-right: 0 !important; }
#practices > .benefits .round {
  width: 35px !important;
  height: 35px !important;
  flex: 0 0 35px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  background: #eaf2fc !important;
  display: grid !important;
  place-items: center !important;
}
#practices > .benefits .benefit h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1c426a !important;
  margin: 0 0 5px !important;
}
#practices > .benefits .benefit p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #4c6680 !important;
  margin: 0 !important;
  text-align: left !important;
}
/* Stay compact on tablets while preserving legible real-world copy. */
@media(max-width:1190px){
  body .page > #practices.mission.surface {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 28px !important;
  }
  #practices .section-copy { grid-column: 1 !important; grid-row: 1 !important; }
  #practices .section-copy h2 { max-width: 770px !important; }
  #practices .section-copy p { max-width: 74ch !important; }
  #practices .four { grid-column: 1 !important; grid-row: 2 !important; min-height: 330px !important; }
  #practices > .benefits { grid-column: 1 !important; grid-row: 3 !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #practices > .benefits > .benefit:nth-child(2) { border-right: 0 !important; }
  #practices > .benefits > .benefit:nth-child(-n+2) { border-bottom: 1px solid #dfe8f1 !important; }
  #practices > .benefits > .benefit { min-height: 124px !important; flex-direction: row !important; gap: 12px !important; }
}
@media(max-width:600px){
  body .page > #practices.mission.surface{
    width: calc(100% - 22px) !important;
    margin: 0 11px 12px !important;
    padding: 29px 18px !important;
    border-radius: 21px !important;
    row-gap: 22px !important;
  }
  #practices .section-copy h2{
    margin-bottom: 20px !important;
    font-size: clamp(34px, 8.7vw, 46px) !important;
    line-height: 1.09 !important;
  }
  #practices .section-copy p{font-size: 14px !important;line-height: 1.62 !important;}
  #practices .section-copy p:first-of-type{font-size: 15px !important;}
  #practices .four{
    grid-template-rows: 60px repeat(2,minmax(104px,auto)) !important;
    min-height: 0 !important;
    padding: 12px 10px 12px !important;
    border-radius: 17px !important;
  }
  #practices .four > .center, #practices .four > .center.center-search{
    height: 51px !important;
    min-height: 51px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }
  #practices .four > .four-item{
    min-height: 104px !important;
    padding: 14px 10px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 9px !important;
  }
  #practices .four > .four-item .ico{
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }
  #practices .four > .four-item strong{font-size: 11px !important;}
  #practices .four > .four-item small{font-size: 11px !important;line-height: 1.38 !important;margin-top: 5px !important;}
  #practices > .benefits > .benefit {min-height: 154px !important; flex-direction:column !important;padding: 16px 13px !important;}
  #practices > .benefits .benefit h3{font-size: 13px !important;}
  #practices > .benefits .benefit p{font-size: 12px !important;}
}
@media(max-width:360px){
  body .page > #practices.mission.surface { padding-inline: 12px !important; }
  #practices .four { padding-inline: 7px !important; }
  #practices .four > .four-item { padding-inline: 7px !important; }
  #practices .four > .four-item small{font-size: 10.5px !important;}
}
@media(prefers-reduced-motion:reduce){
  #practices .four > .four-item {animation: none !important;}
}