/* ==========================================================================
   COTA — responsive overrides (1920 → 375). Designed per breakpoint, not just shrunk.
   ========================================================================== */

@media (min-width: 1700px) {
  :root { --container: 1640px; }
}

/* ---------- ≤1280 ---------- */
@media (max-width: 1280px) {
  .brand-name { display: none; }
  .primary-nav ul { gap: 20px; }
  .hero-sub { max-width: 380px; }
  .dist-steps p { font-size: 14px; }
  .service { grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr) 30px; }
}

/* ---------- ≤1024 : tablet landscape / small laptop ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 78px; }
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav, .header-actions .btn { display: none; }
  .menu-toggle { display: block; }
  .bag-link { order: -1; }

  .hero-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-eyebrow span:nth-of-type(3), .hero-eyebrow i:nth-of-type(2) { display: none; }
  .hero-line--c { padding-left: .3em; }

  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-copy, .manifesto-visual { grid-column: 1 / -1; }
  .manifesto-copy { padding-block: 110px 40px; }
  .manifesto-copy > * + * { margin-top: clamp(36px, 8vh, 80px); }
  .manifesto-sticky { position: relative; height: auto; aspect-ratio: 4 / 5; max-height: 86svh; padding-block: 0 40px; margin-bottom: 60px; }
  .tri-reveal { height: calc(100% - 40px); }
  .visual-cap { bottom: 0; }

  .records-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .product-item { width: clamp(250px, 44vw, 360px); }
  .records-track { gap: 56px; }

  .services-layout { grid-template-columns: 1fr; }
  .service-preview { display: none; }
  .service { grid-template-columns: 40px minmax(0, 1fr) 30px; row-gap: 0; opacity: .6; min-height: 0; }
  .brand-mark { width: 54px; height: 54px; }
  .service-index { padding-bottom: 0; }
  .service.is-active { opacity: 1; }
  .service-name { grid-column: 2; }
  .service-arrow { grid-column: 3; grid-row: 1; }
  .service-toggle { font-size: clamp(28px, 6.4vw, 54px); }
  .service.is-active .service-toggle { transform: none; }
  .service-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
  .service.is-active .service-panel { grid-template-rows: 1fr; }
  .service-panel-in { overflow: hidden; min-height: 0; display: grid; grid-template-columns: 40px 1fr; }
  .service-panel-in > * { grid-column: 2; }
  .service-desc { padding-top: 16px; max-width: 34em; color: var(--text); }
  .service-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 18px; border: 1px solid var(--border-s); }
  .service:not(.is-active) .service-arrow { transform: rotate(45deg); }
  .service.is-active .service-arrow { transform: rotate(90deg); }

  .store-grid { grid-template-columns: 1fr; row-gap: 70px; }
  .store-feature { justify-self: start; }

  /* distribution: vertical rail with vinyl as progress */
  .dist-svg { display: none; }
  .dist-path { padding-left: 0; }
  .dist-path::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: var(--border); }
  .dist-disc { left: 22px; }
  .dist-steps { grid-template-columns: 1fr; row-gap: 40px; padding-left: 64px; }
  .dist-steps li:nth-child(even) { margin-top: 0; }
  .dist-steps p { max-width: 28em; font-size: 15px; }
  .apply { grid-template-columns: 1fr; row-gap: 56px; }

  .process-grid { grid-template-columns: 1fr; }
  .process-sticky { position: sticky; top: 0; height: auto; min-height: 0; padding-block: 90px 18px; z-index: 5; background: linear-gradient(180deg, var(--bg) 70%, rgba(5,5,5,0)); }
  .process-sticky .display { font-size: clamp(32px, 7.6vw, 64px); }
  .process-counter { margin-top: 12px; }
  .process-num { font-size: clamp(64px, 14vw, 110px); }
  .process-line { margin-top: 12px; }
  .process-steps { padding-block: 20px 60px; }
  .pstep { min-height: 52vh; }

  .contact-row { grid-template-columns: 1fr; }
  .contact-cta { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- ≤768 : tablet portrait / large phone ---------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  .hero-meta { display: none; }
  .hero-eyebrow { font-size: 10px; gap: 10px; }
  .hero-eyebrow i { width: 14px; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: space-between; }
  .hero-title { line-height: .88; }
  .principles strong { font-size: clamp(24px, 7vw, 40px); }
  .marquee-track span { font-size: clamp(48px, 15vw, 100px); }
  .records-head .display { font-size: clamp(36px, 10vw, 64px); }
  .product-item { width: 72vw; max-width: 340px; }
  .records-track { gap: 44px; }
  .product-card:hover .product-vinyl { translate: 22% 0; }
  .cinematic { height: 100svh; }
  .store-feature { padding-right: 0; width: 82%; }
  .apply-form { grid-template-columns: 1fr; }
  .field-submit .btn { width: 100%; justify-content: space-between; }
  .contact-list li { flex-direction: column; gap: 2px; }
  .contact-cta { flex-direction: column; }
  .footer-top { flex-direction: column; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 22px; }
  .brand-geo { width: 190vw; height: 190vw; }
}

/* ---------- ≤480 ---------- */
@media (max-width: 480px) {
  :root { --gutter: 20px; }
  .hero-eyebrow span:nth-of-type(2), .hero-eyebrow i { display: none; }
  .hero-sub { font-size: 15px; }
  .btn { padding: 0 18px; font-size: 12px; min-height: 48px; }
  .btn--large { min-height: 58px; padding: 0 22px; }
  .header-actions { gap: 8px; }
  .manifesto-text p { font-size: 19px; }
  .display { letter-spacing: -.04em; }
  .service { grid-template-columns: 32px minmax(0, 1fr) 28px; column-gap: 10px; }
  .service-panel-in { grid-template-columns: 32px 1fr; }
  .brand-words { font-size: clamp(46px, 17vw, 90px); }
  .product-item { width: 78vw; }
  .cursor-label { font-size: 9px; }
}

/* ---------- ≤375 ---------- */
@media (max-width: 375px) {
  .hero-title { font-size: 12.4vw; }
  .btn { gap: 10px; }
  .contact .display--mega { font-size: 17vw; }
}

/* ---------- touch: no hover-dependent content ---------- */
@media (hover: none) {
  .cursor { display: none !important; }
  .product-vinyl { translate: 24% 0; }
}