/* Round 14: approved desktop transition + conversion-focused final CTA */

@media (min-width:851px){
  /* The transition is a centered composition with RTL text inside it, not a block pinned to the viewport edge. */
  .chapter{padding:88px 0!important}
  .chapter .wrap.chapter-copy{width:min(760px,calc(100% - 128px))!important;max-width:760px!important;margin-inline:auto!important;padding:0!important}
  .chapter-copy h2{max-width:none!important;margin:0 0 18px!important;font-size:clamp(2.5rem,4.2vw,4.35rem)!important;line-height:1.04!important}
  .chapter-copy>p:last-child{max-width:650px!important;margin:0!important;font-size:1.06rem!important;line-height:1.8!important}

  /* Final CTA gets its own visual beat and substantially more conversion weight. */
  .contact{padding:0!important;background:var(--paper)!important;overflow:hidden}
  .contact-gallery{height:245px;display:grid;grid-template-columns:1.05fr .82fr 1.18fr .95fr;gap:5px;background:var(--night);direction:ltr}
  .contact-shot{overflow:hidden;position:relative;background:var(--night)}
  .contact-shot img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.88) contrast(1.04)}
  .contact-shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,20,40,.22))}
  /* Temporary crop variation until the approved stills are available as actual repo assets. */
  .shot-1 img{object-position:34% 43%;transform:scale(1.02)}
  .shot-2 img{object-position:58% 42%;transform:scale(1.28)}
  .shot-3 img{object-position:72% 45%;transform:scale(1.08)}
  .shot-4 img{object-position:45% 34%;transform:scale(1.38)}

  .contact .contact-layout{width:min(1080px,calc(100% - 128px))!important;max-width:1080px!important;display:block!important;margin-inline:auto!important;padding:72px 0 82px!important}
  .contact-copy{max-width:850px!important;margin-inline:auto!important;text-align:center!important}
  .contact-copy .section-no{display:inline-block!important;margin:0 0 15px!important;color:#a87422!important;font-weight:800!important;letter-spacing:.04em}
  .contact-copy h2{max-width:850px!important;margin:0 auto 18px!important;font-size:clamp(2.45rem,4.2vw,4.6rem)!important;line-height:1.05!important;color:var(--night)!important}
  .contact-copy>p:not(.section-no){max-width:650px!important;margin:0 auto 29px!important;font-size:1.08rem!important;line-height:1.75!important;color:#3f4654!important}
  .contact-actions{justify-content:center!important;gap:12px!important}
  .contact-actions .btn{min-width:210px!important;padding:15px 24px!important;font-weight:800!important}
  .contact-actions .primary{box-shadow:0 12px 30px rgba(11,22,48,.15)}

  /* Retire the previous overlapping-image experiment completely. */
  .contact-visual{display:none!important}
}

/* This round is intentionally desktop-first. Mobile adaptation follows desktop approval. */
@media(max-width:850px){
  .contact-gallery{display:none}
}