/* ==========================================================================
   responsive.css — sections are recomposed, not shrunk
   Breakpoints: 1440 · 1280 · 1024 · 768 · 430 · 375 · 320
   ========================================================================== */

/* Large desktop (1920) — give the composition more air */
@media (min-width:1600px){
  :root{--maxw:1440px}
  .hero__content{width:min(440px,30vw)}
  .hero__logo{width:min(100%,380px)}
}

/* ≤1280 — laptop */
@media (max-width:1280px){
  .nav__links{gap:clamp(14px,1.6vw,24px)}
  .hero__tris{right:clamp(20px,5vw,90px)}
}

/* ≤1100 — nav collapses into the full-screen menu */
@media (max-width:1100px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:block}
}

/* ≤1024 — tablet landscape */
@media (max-width:1024px){
  :root{--nav-h:68px}
  .hero__content{width:min(440px,48vw)}
  .hero__tris{height:min(70vh,640px);right:4vw;opacity:.96}
  .hero__wash{background:
    linear-gradient(90deg,rgba(250,249,247,.95) 0%,rgba(250,249,247,.82) 36%,rgba(250,249,247,.2) 60%,rgba(250,249,247,0) 72%)}
  .about__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px}
  .details__grid{grid-template-columns:1fr;gap:56px}
  .details__copy{max-width:720px}
  .partners__grid{grid-template-columns:1fr;gap:40px}
  .partners__head{position:static}
  .partners__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .partners__list li.is-wide{grid-column:1 / -1}
  .suppliers__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .suppliers__grid::after{display:none}
  .suppliers__grid .supplier:last-child{grid-column:span 2}
}

/* ≤900 — tablet portrait: stack editorial pairs */
@media (max-width:900px){
  /* Hero follows the cover's portrait composition: logo over the bright top, triangles lower-right */
  .hero{min-height:720px}
  .hero__img{object-position:42% 60%}
  .hero__wash{background:linear-gradient(180deg,rgba(250,249,247,.96) 0%,rgba(250,249,247,.9) 52%,rgba(250,249,247,.4) 72%,rgba(250,249,247,0) 88%)}
  .hero__content{left:var(--gutter);right:auto;width:calc(100% - var(--gutter) * 2);max-width:520px}
  .hero__logo{width:min(64vw,340px)}
  .hero__tris{top:auto;bottom:-4vh;right:6vw;height:min(52vh,460px);transform:translate3d(0,var(--py,0px),0)}
  .hero__profile{display:none}
  .hero__scroll{display:none}

  .about__grid{grid-template-columns:1fr}
  .about__figure{margin-top:0;max-width:520px;margin-inline-start:auto}
  .frame--tall{aspect-ratio:4/4.6}

  .certs__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}

  .production__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .production__item--a{grid-column:1;grid-row:1}
  .production__item--b{grid-column:2;grid-row:1;margin-top:48px}
  .production__item--c{grid-column:1;grid-row:2;margin-top:-48px}
  .production__item--d{grid-column:2;grid-row:2;aspect-ratio:3/4;margin-top:0}

  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery__sub{grid-row:auto}
  .gallery--modern .shot--1,.gallery--modern .shot--2,.gallery--modern .shot--3,.gallery--modern .shot--4,
  .gallery--joinery .shot--1,.gallery--joinery .shot--2,.gallery--joinery .shot--3,.gallery--joinery .shot--4{grid-column:auto;grid-row:auto;margin-top:0}
  .gallery--modern .shot--1,.gallery--modern .shot--2{aspect-ratio:3/4}
  .gallery--modern .shot--2{margin-top:44px}
  .gallery--modern .shot--4{margin-top:44px}
  .gallery--joinery .shot--1{grid-column:1 / -1;aspect-ratio:16/10}
  .gallery--joinery .shot--2{aspect-ratio:3/4}
  .gallery--joinery .shot--3{aspect-ratio:3/4;margin-top:44px}
  .gallery--joinery .shot--4{grid-column:1 / -1;aspect-ratio:16/10}

  .process__intro{grid-template-columns:1fr;gap:20px}
  .board,.board:nth-child(1),.board:nth-child(2){margin-inline:0}
  .stages__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stage:nth-child(n+3){border-top:1px solid rgba(111,18,32,.3)}

  .milestones{grid-template-columns:1fr;gap:28px}
  .milestone__track{display:none}

  .closing__tris{height:min(46vh,420px);right:5vw}
}

/* ≤768 */
@media (max-width:768px){
  .sec-head{margin-bottom:32px}
  .suppliers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suppliers__grid .supplier:last-child{grid-column:1 / -1}
  .partners__list{grid-template-columns:1fr}
  .partners__tris{width:60vw;top:auto;bottom:-10%;opacity:.35}
  .closing__panel-inner{flex-direction:column;align-items:stretch}
  .closing__contact,.closing__qr{order:0}
  .closing__qr{align-self:flex-end}
  .tabs{display:flex;width:100%}
  .tabs__btn{flex:none;text-align:right;font-size:var(--step-0)}
}

/* ≤600 — phones */
@media (max-width:600px){
  .board{grid-template-columns:1fr;gap:18px}
  .board__swatches{flex-direction:row;justify-content:flex-start;padding:0}
  .swatch__line{display:none}
  .swatch__chip{width:52px}
  .certs__grid{gap:28px 16px}
  .doc__label{font-size:var(--step-0)}
  .details__list li{font-size:var(--step-0)}
}

/* ≤430 */
@media (max-width:430px){
  :root{--gutter:20px}
  .hero{min-height:640px}
  .hero__tl--lg{font-size:clamp(2.3rem,11vw,2.9rem)}
  .hero__lead{font-size:var(--step-0);text-align:right}
  .hero__actions .btn{flex:1;padding:0 14px;min-height:48px}
  .hero__tris{height:40vh;right:3vw}
  .hero__profile{font-size:1.05rem}
  .production__grid{gap:10px}
  .gallery{gap:10px}
  .shot__btn{border-width:3px}
  .gallery--modern .shot--2,.gallery--modern .shot--4,.gallery--joinery .shot--3{margin-top:28px}
  .stages__list{grid-template-columns:1fr}
  .stage,.stage:nth-child(3){border-inline-start:0;padding-inline:0;border-top:1px solid rgba(111,18,32,.3)}
  .stage:first-child{border-top:0}
  .stage{grid-template-columns:auto 1fr;align-items:center;gap:18px}
  .supplier{min-height:150px;padding:16px}
  .supplier__meta{font-size:.78rem}
  .closing__list{font-size:1rem}
}

/* ≤360 — 320-class devices */
@media (max-width:360px){
  .hero__logo{width:70vw}
  .hero__actions{flex-direction:column}
  .certs__grid{grid-template-columns:1fr;max-width:260px}
  .suppliers__grid{grid-template-columns:1fr}
  .suppliers__grid .supplier:last-child{grid-column:auto}
  .milestone__year{font-size:3rem}
}

/* Short landscape screens: keep the hero from colliding */
@media (max-height:820px) and (min-width:901px){
  .hero__logo{width:min(100%,280px)}
  .hero__tl--lg{font-size:3rem}
  .hero__lead{font-size:var(--step-0)}
  .hero__profile{display:none}
}

/* Coarse pointers: no hover-only affordances */
@media (hover:none){
  .supplier__logo img{filter:none;opacity:1}
}
