/* Phone fold for "What better looks like" (#real). nh-fold.js runs at 900px and under, and so does every rule here. */
@media (max-width: 900px) {
  .nh .nh-fold > .nh-flow, .nh .nh-os.nh-fold > .nh-flow { padding: 20px 0 22px; }   /* the second wins over nh-sections.css whatever the load order */
  .nh .nh-fold .nh-row-n { margin-bottom: 6px; cursor: pointer; }
  .nh .nh-fold .nh-row-label { margin-left: 8px; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nh-head, #22325c); }
  .nh .nh-fold .nh-flow-h { max-width: none; }

  /* the heading is the button, with a plus that turns into a minus */
  .nh .nh-fold-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 4px 0;
    border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nh .nh-fold-btn:focus-visible { outline: 2px solid var(--nh-gold-ink, #876421); outline-offset: 4px; border-radius: 10px; }
  .nh .nh-fold-text { max-width: 20em; }
  .nh .nh-fold-text > span { display: block; }   /* her line breaks: .nh-flow-h > span, now one level down */
  .nh .nh-fold-icon { flex: none; position: relative; width: 36px; height: 36px; border: 1.5px solid var(--nh-rule, rgba(26, 31, 46, 0.14)); border-radius: 50%; background: #ffffff;
    transition: transform 0.16s ease-out, background-color 0.2s ease, border-color 0.2s ease; }
  .nh .nh-fold-icon::before, .nh .nh-fold-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px;
    background: var(--nh-navy, #1a1f2e); transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.2s ease; }
  .nh .nh-fold-icon::after { transform: rotate(90deg); }
  .nh .nh-fold-btn[aria-expanded="true"] .nh-fold-icon { background: var(--nh-navy, #1a1f2e); border-color: var(--nh-navy, #1a1f2e); }
  .nh .nh-fold-btn[aria-expanded="true"] .nh-fold-icon::before,
  .nh .nh-fold-btn[aria-expanded="true"] .nh-fold-icon::after { background: var(--nh-gold, #d4a64e); }
  .nh .nh-fold-btn[aria-expanded="true"] .nh-fold-icon::after { transform: rotate(0deg); }
  .nh .nh-fold-btn:active .nh-fold-icon { transform: scale(0.94); }

  /* the panel: a grid row that grows from 0fr to 1fr, so it opens to its own height with no measuring */
  .nh .nh-fold-panel { display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows 0.36s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.36s; }
  .nh .nh-fold-panel.is-open { grid-template-rows: 1fr; visibility: visible;
    transition: grid-template-rows 0.36s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; }
  .nh .nh-fold-inner { min-height: 0; overflow: hidden; margin: 0 -6px; padding: 0 6px; }
  .nh .nh-fold-inner > * { opacity: 0; transition: opacity 0.18s ease; }
  .nh .nh-fold-panel.is-open .nh-fold-inner > * { opacity: 1; transition: opacity 0.3s ease 0.06s; }
  .nh .nh-fold-inner > :last-child { margin-bottom: 6px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nh .nh-fold-panel, .nh .nh-fold-panel.is-open, .nh .nh-fold-inner > *, .nh .nh-fold-panel.is-open .nh-fold-inner > *,
  .nh .nh-fold-icon, .nh .nh-fold-icon::before, .nh .nh-fold-icon::after { transition: none; }
}