/* Phone layout: calmer type sizes and readable image-background sections. */
.nred-bg-veil { display: none; }
.nred-sys-extra { display: none; }
.nred-bg > div:not(.nred-bg-veil) { position: relative; }

@media (max-width: 1080px) and (min-width: 761px) {
  .nred-wider { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  /* type scale */
  #dc-root h1 { font-size: clamp(32px, 9vw, 40px) !important; line-height: 1.04 !important; letter-spacing: -0.04em !important; }
  #dc-root h2 { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.08 !important; letter-spacing: -0.035em !important; }
  #dc-root h3[style*="font-size: 36px"], #dc-root h3[style*="font-size: 26px"] { font-size: 24px !important; }
  #dc-root [style*="font-size: 18px"] { font-size: 16px !important; }
  #dc-root [style*="font-size: 22px"], #dc-root [style*="font-size: 20px"] { font-size: 17px !important; line-height: 1.45 !important; }
  #dc-root p[style*="font-size: clamp(64px, 8vw, 128px)"] { font-size: 52px !important; }
  #dc-root [style*="font-size: clamp(19px, 1.7vw, 24px)"] { font-size: 18px !important; }
  /* tighter vertical rhythm */
  #dc-root [style*="padding: clamp(96px, 11vw, 160px)"],
  #dc-root [style*="padding: clamp(96px, 11vw, 144px)"],
  #dc-root [style*="padding: clamp(96px, 10vw, 144px)"],
  #dc-root [style*="padding: clamp(80px, 9vw, 128px)"] { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* image-background sections: portrait image fills the section, white blur keeps text readable */
  .nred-bg { min-height: 720px; }
  .nred-bg > picture { align-self: stretch !important; }
  .nred-bg .nred-bg-img { width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center bottom !important; transform: none !important; }
  .nred-bg-veil {
    display: block; position: relative; grid-area: 1 / 1; align-self: stretch;
    /* whitish blur behind the copy at the top, fading out so the artwork stays crisp below */
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.66) 45%, rgba(255,255,255,0) 78%);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%);
  }
  .nred-bg .nred-dev-fade { display: none !important; }
  .nred-bg > div:not(.nred-bg-veil) { align-self: start !important; padding-top: 56px !important; padding-bottom: 300px !important; }

  /* sections where the artwork sits behind the whole text block, not below it */
  .nred-bg-full { min-height: 0; overflow: hidden; }
  .nred-bg-full > div:not(.nred-bg-veil) { padding-bottom: 72px !important; }
  .nred-bg-full .nred-bg-img { object-position: center 70% !important; }
  .nred-bg-full .nred-bg-veil {
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0.2) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  }

  .nred-bg-soft .nred-bg-veil { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }

  /* Directors & advisors cards: bigger photo matching the text height, smaller type */
  .nred-adv { align-items: stretch !important; gap: 14px !important; padding: 14px !important; }
  .nred-adv-img { flex: 0 0 38% !important; width: 38% !important; height: auto !important; min-height: 100%; object-fit: cover; object-position: center top; align-self: stretch; }
  .nred-adv h3 { font-size: 17px !important; }
  .nred-adv h3 + p { font-size: 9.5px !important; }
  .nred-adv-bio { font-size: 12.5px !important; line-height: 1.45 !important; }
  /* Robotics list: on phones every system becomes a card in a two-column grid (image, name, subtitle) */
  .nred-sys-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border-top: 0 !important; }
  .nred-sys-li { border: 1px solid #E7E5E0 !important; border-radius: 6px; overflow: hidden; background: #FFFFFF; }
  .nred-sys-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 10px 10px 14px !important; height: 100%; box-sizing: border-box; }
  .nred-sys-num, .nred-sys-desc, .nred-sys-go { display: none !important; }
  .nred-sys-img { order: -1; width: 100% !important; flex: none !important; }
  .nred-sys-img img { width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; }
  .nred-sys-title { flex: none !important; gap: 4px !important; padding: 0 4px; }
  .nred-sys-title > span:first-child { font-size: 22px !important; }
  .nred-sys-title > span:last-child { font-size: 9.5px !important; }
  .nred-wider-wrap { display: none !important; }
  .nred-sys-extra { display: block !important; }
  .nred-wider { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .nred-hide-mobile { display: none !important; }
}

/* NRED copper buttons */
a[style*="border-radius: 999px"], button[style*="border-radius: 999px"], .nred-nav-cta { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
a[style*="background: #8C5E34"]:hover, button[style*="background: #8C5E34"]:hover, .nred-nav-cta:hover { background: #6F4A28 !important; border-color: #6F4A28 !important; color: #FFFFFF !important; }
a[style*="border: 1px solid #8C5E34"][style*="color: #8C5E34"]:hover, button[style*="border: 1px solid #8C5E34"][style*="color: #8C5E34"]:hover { background: #8C5E34 !important; color: #FFFFFF !important; }

/* NRED typography polish */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* NRED other systems grid */
@media (max-width: 760px) {
  .nred-others { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 12px !important; }
  .nred-others > a > span { flex-direction: column; align-items: flex-start !important; gap: 4px !important; }
  .nred-others > a > span > span:first-child { font-size: 18px !important; }
}
@media (max-width: 760px) { .nred-slider-hint { display: none !important; } }