/* Responsive layer — loaded last on every page so it can adjust everything above.
   Breakpoints: 1024 (tablet landscape), 820 (tablet portrait / mobile menu), 640 (phones), 520 (small phones). */

@media (min-width:1600px){ .wrap{max-width:1320px;} }

@media (max-width:1024px){
  .two-col{gap:44px;}
  .contact-grid{gap:48px;}
  .proj-row .logo-slot{height:240px;}
}

@media (max-width:760px){
  .proj-list{grid-template-columns:1fr;}
}

@media (max-width:820px){
  section.block{padding:76px 0;}
  section.block.tight{padding:64px 0;}
  .section-head{margin-bottom:40px;}
  .cta-band{padding:76px 0;}
}

@media (max-width:640px){
  .proj-row .logo-slot{height:200px;}
  .wrap{padding:0 20px;}
  .hero{padding:128px 0 56px;}
  .hero p.lead{font-size:15.5px; margin-bottom:0;}
  section.block{padding:60px 0;}
  section.block.tight{padding:52px 0;}
  .section-head{margin-bottom:32px;}
  .cta-band{padding:60px 0;}
  .btn{padding:14px 22px;}
  .case-lead{font-size:16.5px; margin-bottom:36px;}
  .case-note{font-size:18px;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
  .footer-links{flex-wrap:wrap; gap:12px 22px;}
  .footer-meta{flex-direction:column;}
  /* 16px inputs stop iOS from zooming the page on focus */
  input, textarea, select{font-size:16px;}
  /* tracker: keep all six labels on one line so they stay under their points */
  .stages{flex-wrap:nowrap;}
  .stage{min-width:0;}
  .stage .lbl{font-size:clamp(7.5px, 2.35vw, 10px); letter-spacing:.04em; white-space:nowrap;}
  .trail-marker{width:26px; height:11.7px;}
  .trail-glow{width:20px; height:20px;}
}

@media (max-width:380px){
  .brand span{letter-spacing:.16em; font-size:14px;}
  .hero h1{font-size:32px;}
}

/* landscape phones */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding:110px 0 50px;}
  .hero-contact{min-height:auto;}
}

/* touch screens: no sticky hover states, no hover lifts */
@media (hover:none){
  .system-card:hover, .start-card:hover{transform:none;}
  .proj-row:hover{transform:none; background:var(--panel); border-color:var(--line);}
  .proj-row:hover .arrow{transform:none;}
  .btn:hover{transform:none;}
  .bring-card:hover::before{width:0;}
}
/* ---------- HERO: align text to the left edge (same as the header) ---------- */
.hero > .wrap{width:100%;}
@media (max-width:820px){
  .hero-home, .hero-methodology, .hero-heritage{background-position:75% center;}
}

/* Heritage: darker left side so the text stays readable over the light artwork */
.hero-heritage::after{
  background:
    linear-gradient(180deg, rgba(9,9,11,.45) 0%, rgba(9,9,11,.25) 35%, rgba(9,9,11,.92) 100%),
    linear-gradient(90deg, rgba(9,9,11,.94) 0%, rgba(9,9,11,.78) 32%, rgba(9,9,11,.1) 68%);
}

/* Contact (desktop): push the leopard to the right so it doesn't sit behind the text */
@media (min-width:821px){
  .hero-contact{
    background-color:#09090b; background-repeat:no-repeat;
    background-size:auto 100%; background-position:right center;
  }
}
@media (max-width:820px){
  .hero-contact{background-position:60% center;}
}

/* ---------- PROJECT CARDS: keep the logo art clean ---------- */
.proj-row .logo-slot:has(img)::before,
.proj-row .logo-slot:has(img)::after{display:none;}
/* for logos on a white/light background */
.proj-row .logo-slot.light,
.proj-row:hover .logo-slot.light{background:#fff;}
.proj-row .logo-slot.light img{-webkit-mask-image:none; mask-image:none;}
.proj-row .logo-slot.light::before{border-color:rgba(0,0,0,.08);}
.proj-row .logo-slot.light::after{color:#8a8a8a;}