/* Shared responsive rules. Everything is inside a max-width query, so desktop (1440+) is unchanged. */

/* mobile menu (injected by responsive.js) */
#site-menu-btn, #site-menu { display: none; }
#site-menu-btn, #site-menu .sm-close, #site-menu a { font-family: 'IBM Plex Sans', sans-serif; text-transform: uppercase; color: #141413; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sm-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 1px solid currentColor; background: transparent; }
#site-menu [aria-current="true"] { color: #0000FF; }
#site-menu [aria-current="true"] .sm-dot { background: #0000FF; }
@media (max-width: 639px) {
  #site-menu-btn, #site-menu .sm-close { position: fixed; top: calc(30px + env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 60; display: flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 4px 0 12px; margin: 0; border: 0; background: transparent; font-weight: 400; font-size: 13px; letter-spacing: -0.01em; cursor: pointer; }
  #site-menu { position: fixed; inset: 0; z-index: 200; display: block; background: #FFFFFF; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; overflow-y: auto; padding: calc(110px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom)); }
  #site-menu.open { opacity: 1; visibility: visible; transition: opacity 250ms ease; }
  #site-menu .sm-close { position: absolute; z-index: 1; }
  #site-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  #site-menu a { display: flex; align-items: center; gap: 14px; min-height: 64px; font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; }
  #site-menu a .sm-dot { width: 14px; height: 14px; }
  #site-menu-btn:focus-visible, #site-menu .sm-close:focus-visible, #site-menu a:focus-visible { outline: 2px solid #0066FF; outline-offset: 2px; border-radius: 4px; }
  /* hide the inline link row (case-study pages: second child of the nav, landing: the nav itself) */
  nav > div:has(> .nav-link) { display: none !important; }
  nav:has(> .nav-link) { display: none !important; }
}
@media (hover: hover) { #site-menu-btn:hover, #site-menu a:hover, #site-menu .sm-close:hover { color: #0066FF; } }
@media (prefers-reduced-motion: reduce) { #site-menu, #site-menu.open { transition: none; } }

/* gutters, spacing and type */
@media (max-width: 1023px) {
  main, footer, [data-r="stack"], nav[style*="position: sticky"] { padding-left: 32px !important; padding-right: 32px !important; }
  [data-r="stack"] { gap: clamp(72px, 8.3vw, 120px) !important; }
}
@media (max-width: 599px) {
  main, footer, [data-r="stack"], nav[style*="position: sticky"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="stack"] { gap: 58px !important; padding-top: 48px !important; padding-bottom: 56px !important; }
  h1 { font-size: clamp(36px, 12vw, 56px) !important; text-wrap: balance; overflow-wrap: anywhere; }
  h2 { font-size: 20px !important; }
  p[style*="clamp(24px, 2.36vw, 34px)"] { font-size: 21px !important; line-height: 1.3 !important; }
  p, li, dd, figcaption, a { overflow-wrap: anywhere; }
}
@media (max-width: 1023px) { h1, h2, h3 { text-wrap: balance; } img, video, iframe { max-width: 100%; } }

/* touch targets */
@media (pointer: coarse) {
  main > header > a:first-child { display: inline-flex !important; align-items: center; min-height: 44px; }
}

/* case-study grids that were forced to one column below 1100px */
@media (max-width: 1099px) { [style*="minmax(max(220px"] { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 599px) { [style*="max-width: 390px"] { max-width: 100% !important; } }

/* Foley-Bus anatomy below 900px */
@media (max-width: 899px) {
  [role="tablist"] { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  [role="tablist"] > button { height: 44px !important; scroll-snap-align: start; }
  [data-r="an-strip"] { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  [data-r="an-strip"] > figure { flex: 0 0 82% !important; scroll-snap-align: start; }
  figure:has(> svg[viewBox="0 0 850 280"]) { overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(to right, #fff, rgba(255,255,255,0)) 0 0 / 28px 100% no-repeat local, linear-gradient(to left, #fff, rgba(255,255,255,0)) 100% 0 / 28px 100% no-repeat local, linear-gradient(to right, rgba(20,20,19,0.14), rgba(20,20,19,0)) 0 0 / 16px 100% no-repeat scroll, linear-gradient(to left, rgba(20,20,19,0.14), rgba(20,20,19,0)) 100% 0 / 16px 100% no-repeat scroll; }
  figure > svg[viewBox="0 0 850 280"] { min-width: 720px; }
}

@media (max-width: 379px) { [role="slider"] > span:nth-child(even) { display: none; } }
@media (pointer: coarse) { a[target="_blank"] { display: inline-flex; align-items: center; min-height: 44px; } }

@media (pointer: coarse) {
  [data-sound-toggle] { min-height: 44px; }
  [data-r="lp-name"], nav > div:first-child > a:first-child { position: relative; }
  [data-r="lp-name"]::after, nav > div:first-child > a:first-child::after { content: ""; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; }
  a[href="#about"] { display: inline-flex !important; align-items: center; min-height: 44px; }
  [data-r="lp-name"] { position: absolute; }
}
@media (pointer: coarse) { [data-r="stack"] a[href^="/work/"]:not([data-tile]):not([data-r="index-row"]) { display: inline-flex !important; align-items: center; min-height: 44px; } }

/* copyright bar (shared footer) */
@media (max-width: 639px) {
  [data-copyright] { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; }
  [data-copyright] > span { flex: none !important; }
}
[data-copyright] a { color: #121E2B; }
[data-copyright] a:focus-visible { color: #0066FF; outline: 2px solid #0066FF; outline-offset: 2px; }
@media (hover: hover) { [data-copyright] a:hover { color: #0066FF; } }

/* contact row + social links */
[data-social] a { color: #666666; transition: color 180ms ease; }
[data-social] a:focus-visible { color: #0066FF; outline: 2px solid #0066FF; outline-offset: 3px; }
@media (hover: hover) { [data-social] a:hover { color: #0066FF; } }
@media (max-width: 767px) {
  [data-contact-row] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  [data-contact-row] > a { max-width: 100%; }
  [data-contact-row] > [data-social] { gap: 16px !important; }
  [data-site-footer] { padding-top: 32px !important; }
}

/* digital twin site plan: right column */
@media (max-width: 899px) {
  [data-sp-col] { position: static !important; }
  [data-sp-p] { margin-top: 0 !important; }
}

/* digital twin diagrams: scroll inside their own container on phones */
@media (max-width: 767px) {
  [data-dt-diagram] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [data-dt-diagram] > svg { min-width: 720px; }
}

/* case study intro row (CaseIntro component) */
@media (max-width: 1099px) {
  [data-ci] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; column-gap: 24px !important; row-gap: 32px; }
  [data-ci-desc] { grid-column: 1 / -1; }
  [data-ci-text] { max-width: none !important; }
}
@media (max-width: 899px) {
  [data-ci-line] { white-space: normal !important; }
}
@media (max-width: 559px) {
  [data-ci] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px; }
}

/* Wing Possibility metrics / credits rows */
@media (max-width: 559px) { [data-r="wp-trio"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; } }