@media (max-width: 1279px) {
  .hero { display: flex; flex-direction: column; }
  .hero-inner { order: 1; min-height: 0; align-items: flex-start; padding-top: calc(var(--header-h) + 28px); padding-bottom: 0; }
  .hero-copy { max-width: 620px; }
  .hero-art { order: 2; position: relative; top: auto; right: auto; bottom: auto; width: 100%; height: clamp(220px, 54vw, 420px); margin-top: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%); }
  .hero-art img { object-position: 22% 58%; }
  .hero-art::after { background: linear-gradient(180deg, rgba(7, 17, 31, 0.35) 0%, rgba(7, 17, 31, 0) 25%); }
}
@media (min-width: 761px) and (max-width: 1279px) {
  .hero-art { width: min(100%, 780px); margin-inline: auto; background: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 12%, #000 28%, #000 72%, rgba(0, 0, 0, 0.6) 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 12%, #000 28%, #000 72%, rgba(0, 0, 0, 0.6) 88%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-brand { grid-column: auto; }
}
@media (max-width: 960px) {
  :root { --header-h: 60px; }
  .nav-toggle { display: grid; }
  .nav-panel { display: none; position: absolute; top: calc(var(--header-h) - 6px); right: var(--gutter); width: min(272px, calc(100vw - var(--gutter) * 2)); flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: var(--color-bg-dark-2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .site-header.is-open .nav-panel { display: flex; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a { padding: 12px 14px; font-size: 1rem; border-radius: var(--radius-sm); color: #e6ebf7; }
  .nav-panel .nav-social, .nav-panel > .btn { margin: 0; }
  .nav-panel::after { content: none; }
  .nav-social { justify-content: flex-start; padding: 8px 6px 4px; margin-top: 6px !important; border-top: 1px solid var(--color-border-dark); }
  .nav-panel > .btn { margin: 8px 6px 6px !important; }

  .about-preview, .detail { grid-template-columns: 1fr; }
  .app-grid--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .app-grid, .app-grid--featured { grid-template-columns: 1fr; }
  .app-card__media--gem { min-height: 180px; flex: none; }
}
@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; margin-bottom: 12px; }
  .hero-lead { margin-top: 16px; }
  .hero-sub { display: none; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .availability { margin-top: 20px; }
  .notice-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .post-card__meta { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; grid-template-areas: "brand" "explore" "social"; row-gap: 22px; }
  .footer-grid > :nth-child(3) ul { justify-content: flex-start; }
}

@media (max-width: 1100px) {
  .shots li { flex-basis: calc((100% - 36px) / 3); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-grid > :last-child { order: -1; }
  .story-row, .dianima, .skill-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .focus-list { grid-template-columns: 1fr; }
  .explore-list { grid-template-columns: 1fr; }
  .shots { gap: 14px; }
  .shots li { flex-basis: calc((100% - 14px) / 2); }
  .contact-rows a { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 18px 16px; }
  .contact-rows .ic { width: 40px; height: 40px; }
  .explore-list li { grid-template-columns: 1fr; }
  .explore-list .pill { grid-row: 1; justify-self: start; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}

/* Keep the tablet first viewport aligned with the desktop reference; stack only on mobile. */
@media (min-width: 961px) and (max-width: 1279px) {
  .hero { display: block; }
  .hero-inner { min-height: clamp(500px, 62vh, 590px); align-items: center; padding-top: calc(var(--header-h) + 24px); padding-bottom: 48px; }
  .hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; height: auto; margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%); }
  .hero-art img { object-position: 20% 30%; }
  .hero-art::after { background: linear-gradient(180deg, rgba(7, 17, 31, 0.5) 0%, rgba(7, 17, 31, 0) 22%), linear-gradient(90deg, rgba(7, 17, 31, 0.55) 0%, rgba(7, 17, 31, 0) 32%); }
}

@media (min-width: 961px) and (max-width: 1279px) {
  #featured.section { padding-top: clamp(40px, 3.5vw, 52px); }
  #featured .section-head { margin-bottom: 16px; }
  #featured .section-head > div > p:last-child { display: none; }
}