/* Mobile & tablet adaptation. Selectors match the inline styles already in the
   markup, so no page structure changes are needed. Breakpoints only. */

/* Keep logos/inline media fluid, but never squash cover/fill photographs */
svg, video { max-width: 100%; height: auto; }
img:not([style*="object-fit"]) { max-width: 100%; height: auto; }

/* <picture> must not break absolute/fill layouts introduced for AVIF/WebP */
picture { display: contents; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* ---- containers ---- */
  [style*="max-width: 1240px"] { padding-left: 22px !important; padding-right: 22px !important; }
  section { padding-top: 66px !important; padding-bottom: 66px !important; }
  footer { padding-top: 56px !important; }

  /* ---- header: brand + CTA on the bar, links on a second rule-separated row ---- */
  header > div { height: auto !important; padding: 11px 18px 0 !important; flex-wrap: wrap !important; gap: 10px !important; }
  header[data-condensed] > div { height: auto !important; }
  header > div > [data-spacer] { flex: 1 !important; }
  header > div > a:first-of-type { gap: 11px !important; }
  header > div > a:first-of-type img,
  header > div > img { width: 32px !important; height: 32px !important; }
  header > div > a:first-of-type span,
  header > div > span { font-size: 17px !important; }
  header nav {
    order: 3; width: 100%;
    margin: 9px 0 0 !important;
    padding: 8px 0 4px !important;
    border-top: 1px solid rgba(245,241,230,.13);
    display: flex !important; flex-wrap: wrap !important;
    column-gap: 20px !important; row-gap: 0 !important;
    overflow: visible !important;
    font-size: 11px !important; letter-spacing: .09em !important;
  }
  header nav a { white-space: nowrap; padding: 12px 0 !important; }
  header nav { transition: opacity .25s ease; }
  /* once the page is scrolled the bar contracts to brand + primary action */
  header[data-condensed] nav { display: none !important; }
  header[data-condensed] > div { padding-bottom: 11px !important; }
  header a[href*="contact" i] {
    padding: 15px 18px !important; font-size: 9.5px !important;
    letter-spacing: .1em !important; gap: 0 !important; white-space: nowrap;
  }
  header a[href*="contact" i] > span { display: none !important; }

  /* ---- grids collapse ---- */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="display: grid"] { gap: 26px !important; }
  [style*="gap: 1px"] { gap: 1px !important; }
  [style*="position: sticky"][style*="top: 140px"],
  [style*="position: sticky"][style*="top: 120px"] { position: static !important; }

  /* the succession-gap dot matrix keeps a grid, just coarser */
  [data-matrix] { grid-template-columns: repeat(16, minmax(0, 1fr)) !important; gap: 4px !important; }

  /* stat strips stay side by side but wrap */
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 1px"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* ---- flow diagram: absolute layout becomes a stack ---- */
  [data-diagram] {
    aspect-ratio: auto !important; display: flex !important; flex-direction: column; gap: 10px;
  }
  [data-diagram] > svg { display: none !important; }
  [data-diagram] > div {
    position: static !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; padding: 18px 20px !important; gap: 8px !important;
    box-sizing: border-box !important;
  }
  [data-diagram] > div > div:nth-child(1) { font-size: 10px !important; }
  [data-diagram] > div > div:nth-child(2) { font-size: 22px !important; }
  [data-diagram] > div > div:nth-child(n+3) { font-size: 15px !important; }
  [data-diagram] [data-panel] { display: block !important; }
  [data-diagram] [data-panel]::before { color: #c9ad6e; }
  [data-panel="business"]::before { content: "For the business — "; }
  [data-panel="steward"]::before { content: "For the steward — "; }
  [data-panel="capital"]::before { content: "For the capital — "; }
  [data-panel="investors"]::before { content: "For investors — "; }
  [data-panel="foundry"]::before { content: "For Steward Foundry — "; }

  /* decorative bleed shapes must not create horizontal scroll */
  [style*="right: -6%"] { right: 0 !important; width: 42% !important; }
  [style*="left: -6%"] { left: 0 !important; }

  /* ---- type & spacing ---- */
  h1 { letter-spacing: -.01em !important; }
  blockquote { font-size: 24px !important; }
  [style*="padding: 46px 42px"] { padding: 28px 22px !important; }
  [style*="padding: 32px 30px"] { padding: 24px 20px !important; }
  [style*="padding-left: 48px"] { padding-left: 0 !important; }
  [style*="text-align: right"] { text-align: left !important; }
  [style*="justify-content: space-between"] { flex-wrap: wrap !important; row-gap: 14px !important; }
  [style*="white-space: nowrap"] { white-space: normal !important; }
  [style*="container-type: inline-size"] { max-width: 100% !important; }

  /* ---- photographs: fill frames, no squeeze ---- */
  img[style*="object-fit: cover"],
  img[style*="object-fit:cover"] {
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  /* Flatten parallax bleed offsets on small screens (they look stretched) */
  img[style*="position: absolute"][style*="object-fit: cover"],
  img[style*="position: absolute"][style*="object-fit:cover"] {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  /* Hero portrait frame → wider cinematic crop so landscape photos aren't crushed */
  [style*="aspect-ratio: 4 / 5"] {
    aspect-ratio: 5 / 4 !important;
    width: 100% !important;
  }
  /* Card / path photos keep a stable landscape frame */
  [style*="aspect-ratio: 4 / 3"] {
    aspect-ratio: 16 / 10 !important;
  }
  /* Full-bleed quote / band photos */
  section[style*="height: 64vh"], section[style*="height: 62vh"],
  section[style*="height: 58vh"], section[style*="height: 56vh"],
  section[style*="min-height: 460px"], section[style*="min-height: 440px"],
  section[style*="min-height: 420px"], section[style*="min-height: 400px"] {
    height: 46vh !important;
    min-height: 300px !important;
    max-height: 420px !important;
  }
  /* hero sections keep their own height */
  section[style*="min-height: 74vh"], section[style*="min-height: 62vh"] {
    min-height: 62vh !important;
  }
  /* wide editorial crops are unreadable on a phone */
  [style*="aspect-ratio: 21 / 9"] { aspect-ratio: 16 / 10 !important; }
  [style*="aspect-ratio: 16 / 8"] { aspect-ratio: 16 / 10 !important; }
  section img[style*="object-fit: cover"],
  section img[style*="object-fit:cover"] {
    object-position: center 35% !important;
  }

  /* ---- forms & touch targets ---- */
  input, select, textarea { font-size: 16px !important; min-height: 48px; }
  textarea { min-height: 130px; }
  button, [type="submit"] { min-height: 50px; }
  footer a, a[data-mono] { display: inline-block; padding: 7px 0; }
  [data-acc] > div:first-child { min-height: 56px; }
  a[style*="padding: 19px 34px"] { padding: 16px 22px !important; }
}

@media (max-width: 560px) {
  [style*="max-width: 1240px"] { padding-left: 16px !important; padding-right: 16px !important; }
  section { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="aspect-ratio: 4 / 5"],
  [style*="aspect-ratio: 5 / 4"] {
    aspect-ratio: 16 / 10 !important;
  }
  section[style*="height: 64vh"], section[style*="height: 62vh"],
  section[style*="height: 58vh"], section[style*="height: 56vh"],
  section[style*="min-height: 460px"], section[style*="min-height: 440px"],
  section[style*="min-height: 420px"], section[style*="min-height: 400px"] {
    height: 40vh !important;
    min-height: 260px !important;
    max-height: 360px !important;
  }
  [data-matrix] { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 3px !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"][style*="gap: 1px"] { grid-template-columns: minmax(0, 1fr) !important; }
  header > div { padding: 10px 16px 0 !important; gap: 9px !important; }
  header > div > a:first-of-type span,
  header > div > span { font-size: 16px !important; }
  header a[href*="contact" i] { padding: 14px 15px !important; font-size: 9px !important; letter-spacing: .085em !important; }
  header nav { column-gap: 16px !important; font-size: 10.5px !important; letter-spacing: .08em !important; }
  blockquote { font-size: 21px !important; }
}

@media (max-width: 900px) {
  #cta img[style*="object-fit: cover"] { object-position: center 40% !important; }
  #cta > div:last-child { gap: 30px !important; }
  /* four-up grids that must not stay four-up */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 900px) {
  /* legal link row must wrap */
  footer > div > div:last-child { flex-wrap: wrap !important; row-gap: 10px !important; }
  footer > div > div:last-child > div { flex-wrap: wrap !important; gap: 14px 18px !important; }
}

@media (max-width: 900px) {
  /* a card spanning two columns creates an implicit second track once grids collapse */
  [style*="grid-column: span 2"] { grid-column: auto !important; }
  /* the diagram's active-node nudge pushes past the viewport once nodes are full width */
  [data-diagram] > div[data-node] { transform: none !important; }
}