/* Responsive layer for the Heritage Sanctuary pages.

   IMPORTANT: the DC runtime re-applies every inline style through el.style, so the
   style attribute is stored in its *serialized* form — one space after each colon
   and after each comma ("padding: 16px 30px", "repeat(4, 1fr)", "0.9fr" not ".9fr").
   Attribute selectors below must match that form or they silently never apply. */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
  min-width: 0;
}

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

.hs3d-caption,
.hs3d-badge {
  display: none !important;
}

/* seven nav links need a little more room before the mobile menu takes over */
@media (max-width: 1340px) {
  .hs-nav {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  .hs-nav-body {
    gap: 20px !important;
  }

  .hs-nav-links {
    gap: 18px !important;
    font-size: 14px !important;
  }

  .hs-nav-cta {
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
  }
}

/* last squeeze before the links give way to the hamburger */
@media (max-width: 1180px) {
  .hs-nav-body {
    gap: 14px !important;
  }

  .hs-nav-links {
    gap: 13px !important;
    font-size: 13.5px !important;
  }

  .hs-nav-cta {
    padding: 9px 13px !important;
    font-size: 13px !important;
  }
}

/* three tall pricing cards read better stacked well before tablet width */
@media (max-width: 1100px) {
  .hs-plan-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 580px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 1024px) {
  .hs-day-sticky {
    position: static !important;
  }

  .hs-stack {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .hs-card-grid,
  .hs-stats-grid,
  .hs-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main > section,
  main section > div[style*="max-width: 1180px"],
  main section > div[style*="max-width: 1240px"],
  main section > div[style*="max-width: 1080px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* every asymmetric two-column split collapses to a single column */
  [style*="grid-template-columns: 0."],
  [style*="grid-template-columns: 1."],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 0."] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  /* three and four across become two */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* seven links plus a call-to-action stop fitting well before phone width, so the
   hamburger takes over at tablet size */
@media (max-width: 900px) {
  .hs-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 12px 20px !important;
  }

  .hs-nav-brand {
    justify-content: flex-start !important;
    gap: 9px !important;
  }

  .hs-nav-brand-title {
    font-size: 19px !important;
    white-space: nowrap !important;
  }

  .hs-nav-toggle {
    display: inline-flex !important;
  }

  .hs-nav-body {
    grid-column: 1 / -1 !important;
    display: none !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(212,175,55,.35) !important;
    box-shadow: 0 20px 46px -30px rgba(138,56,0,.45) !important;
  }

  .hs-nav.is-open .hs-nav-body {
    display: flex !important;
  }

  .hs-nav-links {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 !important;
    font-size: 15px !important;
    overflow: visible !important;
  }

  .hs-nav-links a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }

  .hs-nav-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 14px !important;
    font-size: 14.5px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 760px) {
  .hs-nav {
    padding: 10px 16px !important;
  }

  .hs-nav-brand-title {
    font-size: 18px !important;
  }

  .hs-nav-links {
    font-size: 14px !important;
  }

  .hs-nav-cta {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .hs-stack,
  .hs-card-grid,
  .hs-form-grid,
  .hs-feature-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hs-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* everything laid out in columns goes single-file */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: 0."],
  [style*="grid-template-columns: 1."],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 0."] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  main > section,
  main section > div[style*="max-width: 1180px"],
  main section > div[style*="max-width: 1240px"],
  main section > div[style*="max-width: 1080px"],
  main section > div[style*="max-width: 1020px"],
  main section > div[style*="max-width: 980px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* one vertical rhythm for every band, whatever the desktop padding was */
  main > section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  main > section:first-child,
  section[style*="min-height: 100vh"] {
    min-height: auto !important;
    padding-top: 132px !important;
    padding-bottom: 50px !important;
  }

  h1 {
    font-size: 40px !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
  }

  h2 {
    font-size: 30px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  h3 {
    font-size: 21px !important;
    letter-spacing: 0 !important;
  }

  p {
    font-size: 15.5px !important;
  }

  /* the hero's parallax cards float outside the frame on a phone */
  [data-depth] {
    display: none !important;
  }

  /* desktop alternates image-left / image-right; stacked, that reads as random
     order, so the picture always leads its section (heroes are section.hs-stack
     and keep their headline first) */
  div.hs-stack > *:has(img) {
    order: -1;
  }

  /* tall editorial images become portrait cards instead of endless columns */
  [style*="height: 600px"] {
    height: 420px !important;
  }

  [style*="height: 540px"] {
    height: 390px !important;
  }

  [style*="height: 520px"],
  [style*="height: 470px"],
  [style*="height: 460px"],
  [style*="height: 440px"],
  [style*="height: 420px"],
  [style*="height: 400px"] {
    height: 300px !important;
  }

  [style*="width: 360px"] {
    width: min(100%, 318px) !important;
  }

  /* generous desktop card padding is wasted space on a phone */
  [style*="padding: 78px 58px"],
  [style*="padding: 64px 48px"],
  [style*="padding: 60px 48px"],
  [style*="padding: 56px 48px"] {
    padding: 40px 22px !important;
  }

  [style*="padding: 44px"],
  [style*="padding: 38px"],
  [style*="padding: 36px 24px"],
  [style*="padding: 34px 30px"],
  [style*="padding: 34px"] {
    padding: 24px 20px !important;
  }

  [style*="padding: 30px 26px"],
  [style*="padding: 28px 26px"],
  [style*="padding: 24px 28px"] {
    padding: 22px 18px !important;
  }

  /* call-to-action buttons run the full width of the column */
  main a[style*="border-radius: 12px"][style*="padding: 1"],
  main button[style*="border-radius: 12px"][style*="padding: 1"] {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  input,
  textarea,
  select {
    width: 100% !important;
  }

  /* floating cards clash with the image captions once the columns stack */
  .hs-float-badge,
  [style*="position: absolute"][style*="bottom: -"] {
    position: static !important;
    margin-top: 14px !important;
    max-width: none !important;
  }

  .hs-card-grid {
    gap: 18px !important;
  }

  .hs-card-grid > a {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .hs-card-grid > a > div:last-child {
    padding: 18px 6px 6px !important;
  }

  .hs-card-grid > div {
    border-radius: 18px !important;
  }

  .hs-stats-grid {
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .hs-stats-grid > div {
    padding: 22px 18px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(212,175,55,.35) !important;
  }

  .hs-feature-grid {
    gap: 10px !important;
  }

  .hs-feature-grid > div,
  .hs-feature-grid > a {
    min-height: 48px !important;
    padding: 12px 14px !important;
    align-items: center !important;
  }

  .hs3d-card {
    height: 330px !important;
  }

  .hs3d-note {
    left: 12px !important;
    top: 12px !important;
  }

  .hs3d-caption {
    right: 12px !important;
    bottom: 12px !important;
  }

  .hs-timeline {
    padding-left: 26px !important;
  }

  .hs-timeline-rail {
    left: 8px !important;
  }

  .hs-timeline-item {
    padding: 20px 18px !important;
    margin-bottom: 16px !important;
  }

  .hs-timeline-dot {
    left: -25px !important;
    top: 26px !important;
  }

  .hs-timeline-dot-sm {
    left: -23px !important;
    top: 22px !important;
  }

  .hs-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 48px 22px 24px !important;
  }

  .hs-footer-bottom {
    padding: 18px 22px !important;
  }
}

@media (max-width: 430px) {
  .hs-feature-grid,
  .hs-stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hs-nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hs-nav-brand-title {
    font-size: 16.5px !important;
  }

  main > section,
  main section > div[style*="max-width: 1180px"],
  main section > div[style*="max-width: 1240px"],
  main section > div[style*="max-width: 1080px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  main > section:first-child,
  section[style*="min-height: 100vh"] {
    padding-top: 126px !important;
  }

  h1 {
    font-size: 35px !important;
  }

  h2 {
    font-size: 27px !important;
  }

  [style*="width: 360px"] {
    width: min(100%, 290px) !important;
  }

  [style*="height: 600px"] {
    height: 370px !important;
  }

  [style*="height: 540px"] {
    height: 340px !important;
  }

  [style*="height: 520px"],
  [style*="height: 470px"],
  [style*="height: 460px"],
  [style*="height: 440px"],
  [style*="height: 420px"],
  [style*="height: 400px"],
  .hs3d-card {
    height: 265px !important;
  }

  [style*="padding: 30px 26px"],
  [style*="padding: 28px 26px"],
  [style*="padding: 34px"],
  [style*="padding: 36px 24px"] {
    padding: 20px 16px !important;
  }

  .hs-card-grid {
    gap: 16px !important;
  }

  .hs-card-grid > a {
    padding: 10px !important;
  }

  .hs-card-grid > a > div:last-child {
    padding: 16px 4px 4px !important;
  }

  .hs-stats-grid > div {
    padding: 20px 16px !important;
  }

  .hs-feature-grid > div,
  .hs-feature-grid > a {
    padding: 11px 13px !important;
  }

  .hs-timeline {
    padding-left: 22px !important;
  }

  .hs-timeline-rail {
    left: 6px !important;
  }

  .hs-timeline-item {
    padding: 18px 16px !important;
  }

  .hs-timeline-dot {
    left: -22px !important;
  }

  .hs-timeline-dot-sm {
    left: -20px !important;
  }
}