/* ==========================================================================
   RESPONSIVE — tablet & desktop expansion of the mobile-first base.
   Breakpoints: 768 / 1024 / 1440 / 1920
   ========================================================================== */

/* ---------------- 768px — small tablet ---------------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .hero { padding-bottom: calc(48px + 74px); }
  .hero-ctas { flex-direction: row; }
  .hero-content { max-width: 640px; }

  .intro-grid { flex-direction: row; align-items: center; gap: 48px; }
  .intro-media { flex: 0 0 42%; }
  .intro-copy { flex: 1; }

  .feat-treatment { flex-direction: row; align-items: center; gap: 48px; }
  .feat-treatment.reverse { flex-direction: row-reverse; }
  .feat-media { flex: 0 0 48%; }
  .feat-copy { flex: 1; }

  .layered { flex-direction: row; align-items: center; gap: 60px; }
  .layered-media { flex: 0 0 46%; }
  .layered-text { flex: 1; text-align: left; }

  .cat-card { padding: 22px; }
  .cat-media { width: 130px; height: 130px; }

  .hscroll-panel { flex-basis: 42%; }
  .insta-item { flex-basis: 34%; }
  .insta-item.small { flex-basis: 22%; }

  .footer-cols { flex-direction: row; justify-content: space-between; }
  .footer-top { flex-direction: row; justify-content: space-between; align-items: flex-end; }

  .form-grid { grid-template-columns: 1fr 1fr; }
  .field.full { grid-column: 1 / -1; }
}

/* ---------------- 1024px — desktop begins ---------------- */
@media (min-width: 1024px) {
  /* reveal desktop nav, hide mobile burger + sticky bar */
  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-links a { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; position: relative; padding: 4px 0; }
  .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-fast) var(--ease); }
  .nav-links a:hover::after, .nav-links a.is-active::after { transform: scaleX(1); transform-origin: left; }
  .nav-links a.is-active { color: var(--rose-deep); }
  .nav-cta { display: inline-flex; }
  .nav-burger, .mobile-menu { display: none; }
  .sticky-bar { display: none; }
  body { padding-bottom: 0 !important; }
  .hero { padding: 140px 0 60px; }

  .container { padding: 0 48px; }

  .section { padding: 130px 0; }
  .statement { padding-top: 160px; padding-bottom: 160px; }
  .statement .display-1 { max-width: 16ch; }

  .intro-media { aspect-ratio: 4/5; }

  .feat-index { font-size: 1.3rem; }
  .feat-name { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }

  .concern-tabs { flex-wrap: wrap; overflow: visible; }

  .catalogue { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  .hscroll-panel { flex-basis: 26%; }
  .insta-item { flex-basis: 24%; }
  .insta-item.small { flex-basis: 15%; }

  .related-grid { flex-direction: row; gap: 24px; }
  .related-grid .cat-card { flex: 1; flex-direction: column; }
  .related-grid .cat-media { width: 100%; height: 200px; }

  .glow-badge { width: 100px; height: 100px; right: 64px; top: 120px; }

  .site-footer { padding: 90px 0 60px; }
  .footer-cols { gap: 80px; }
}

/* ---------------- 1440px — large desktop ---------------- */
@media (min-width: 1440px) {
  .container { padding: 0 64px; }
  .hero-content { max-width: 760px; }
  .feat-treatment { gap: 80px; }
  .layered { gap: 100px; }
  .layered-media { max-width: 520px; }
  .transition-word { font-size: 10rem; }
}

/* ---------------- 1920px — extra wide ---------------- */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  .display-1 { font-size: 6.4rem; }
}

/* ---------------- fine pointer only: hover niceties + custom cursor ---------------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { }
}
@media (hover: none), (pointer: coarse) {
  body.has-cursor .cursor-dot { display: none !important; }
}