/* === Mobile layout (final override) === */
@media (max-width: 720px) {
  .project-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  .cards-band {
  background:#F24D09;
}

.cards-band > h2{
  text-align:left;
  font: 400 50px/58px Arial, sans-serif;
  color:#fff;
  padding: 1em 0 0 2em;
}

/* tolerate both spellings */
.hightlight-container,
.highlight-container{
  display: grid;
  gap: 70px;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 ;
}

/* card layout (desktop/tablet) */
.highlight{
  background:#FFF8F0;
  color:#333;
  border-radius:26px;
  padding:3rem;
  display:grid;
  grid-template-columns: minmax(200px, 0.6fr) 1fr; /* title | text */
  gap: 2rem 3rem;
}

.highlight h3{
  margin:0;
  color:#FF5B2E;
  font: 700 60px/69px Arial, sans-serif;
}

.highlight p{
  margin:0;
  font: 400 18px/1.55 Arial, sans-serif;
}
}

@media (max-width: 950px) {



  /* --- global / container resets --- */
  html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* kill sideways scroll */
  }

  /* stack the main 2-col grid */
  .container { grid-template-columns: 1fr !important; }

  /* menu grid one col */
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .item { min-width: 0; }
  .img-card, .text-card { width: 100%; }

  /* bleed imgs less aggressive */
  .mt-150 > img.bleed { margin-top: 0 !important; }
  .text-card img.bleed { width: calc(100% + (var(--card-pad) * 2) - 50px); }

  /* titles */
  .title-card > h1,
  .page-title {
    font-size: clamp(36px, 9vw, 72px) !important;
    line-height: 1.2;
  }

  /* --- header/nav --- */
  header {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }


  nav {
    margin-left: auto;
    justify-content: flex-end;
    gap: 1rem;
    flex: 0 0 auto;
  }

    .header-logo img{
    height: 56px !important;   /* tweak to taste (48–60px range) */
  }
  
  .spacer { display: none !important; }

  /* --- hangs reset (override inline styles) --- */
  .hang1,
  .divider .hang1,
  .quote-band .hang1 {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    scale: 1 !important;
    margin: 0 auto !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  .hang1 img,
  .divider .hang1 img,
  .quote-band .hang1 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
  .hang1 [style*="transform"],
  .hang1 img[style*="transform"] { transform: none !important; }

  /* --- equalize / image fills --- */
  .img-card.equalize-16x9,
  .img-card.equalize-3x2,
  .img-card.equalize-4x3,
  .img-card.equalize-1x1 { aspect-ratio: auto !important; }

  .img-card.img-fill > img,
  .item img.img-fill {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover;
  }

  /* --- hero / brush --- */
  .header-img { aspect-ratio: auto; min-height: 240px; }
  .brush-band { min-height: clamp(320px, 45vh, 560px); }
  .brush-band img { max-height: 560px; }

  /* --- quote band --- */
  .quote-band {
    display: block;
    padding-bottom: 1rem;
  }
  .quote-band > p {
    white-space: normal;
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.15;
    margin: 1rem 1.25rem 0;
  }

  /* --- projects grid --- */
  .project-grid ol {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 14px 24px;
  }

  /* --- footer --- */
  footer {
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: flex-end !important;
  }
  footer img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  footer .header-logo img { max-height: 38px; width: auto; }
  .main-info {
    flex: 1 1 260px;
    min-width: 220px;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .credits { text-align: left; }
  .credits p { margin: 0; }
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-start;
  }
  .social-links i { font-size: 1.1rem !important; }
  .mtl-logo { flex: 0 0 auto; }
  .mtl-logo img { max-width: 160px; }

  /* --- bottom nav --- */
  .bottom-nav { position: relative; z-index: 10; align-items: center; }
  .bottom-nav .bottom-left p,
  .bottom-nav .bottom-right p { display: none; }
  .bottom-nav .bottom-center { font-size: clamp(20px, 5.5vw, 34px); }

  /* --- media wrappers --- */
  video, iframe, .credits .hero-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    display: block
    
;
  }
  .highlight{
    grid-template-columns: 1fr;   /* stack title above text */
    padding: 2rem;
    gap: 1rem;
  }

  ..highlight-container{
       padding: 0;
  }
  .highlight h3{
    font: 700 clamp(28px, 7vw, 42px)/1.1 Arial, sans-serif;
  }

  .highlight>p{
    padding: 0;
  
  }
  .cards-band > h2{
    font: 400 clamp(28px, 6.5vw, 40px)/1.1 Arial, sans-serif;
    padding-left: 1rem;
  }

  img:not([class]) {
  width: 100%;
  height: auto;
  display: block;
}

.quote-band2 p{
  white-space: revert;
  margin-right: 1rem;;
}

.brush-band>img{
  display:none;
}

h1{
  padding-bottom: 0;
}

.x-slidey-item  img{
  display: block;
    height: 200px;
    width: auto;
}

.only-text-card {
    padding: 1rem;
    margin-right: 0;}

    .line-logos{
          flex-direction: column;
    }
}