/* ==========================================================================
   DERMATROXX SKINTECH — RESPONSIVE STYLESHEET
   Breakpoints tuned for: 1920 / 1440 / 1280 / 1024 / 768 / 430 / 390 / 375 / 320
   ========================================================================== */

/* ---- Large desktop refinement (1920+) ---- */
@media (min-width: 1920px) {
  :root { --gutter: 64px; }
}

/* ---- Laptop / small desktop (<=1440) ---- */
@media (max-width: 1440px) {
  :root { --section-space: 130px; }
  .capability-card { min-height: 500px; }
}

/* ---- Below 1680: header CTA collapses to icon-only (no substitute text — full
   label stays available to assistive tech via aria-label on the link) so the
   8-item nav + logo + button always fit without overflow on common laptop
   widths (1280/1366/1440/1536/1600). ---- */
@media (max-width: 1680px) {
  .header-cta .btn-primary span.long { display: none; }
  .header-cta .btn-primary { padding: 13px 15px; }
}

/* ---- Tablet landscape / small desktop (<=1280) ---- */
@media (max-width: 1280px) {
  :root { --section-space: 110px; --gutter: 32px; }
  .nav-link { padding: 10px 9px; font-size: 0.85rem; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 50px; }
}

/* ---- Tablet portrait (<=1024) ---- */
@media (max-width: 1024px) {
  :root { --section-space: 100px; --section-space-sm: 74px; }

  .main-nav, .header-cta .btn-primary { display: none; }
  .nav-toggle { display: flex; }

  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-grid, .info-grid { grid-template-columns: 1fr; }
  .reason-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .solution-row { grid-template-columns: 80px 1fr; }
  .solution-meta { display: none; }

  .step-detail { grid-template-columns: 90px 1fr; gap: 24px; }
  .step-detail-num { font-size: 1.9rem; }

  .split-media { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split-media.reverse { direction: ltr; }
  .split-media .img-frame { order: -1; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 50px 32px; }
  .footer-brand { grid-column: 1 / -1; }

  .process-flow { flex-direction: column; gap: 34px; }
  .process-flow::before { top: 0; bottom: 0; left: 7px; right: auto; width: 1px; height: auto; }
  .process-step { width: 100%; display: flex; align-items: center; gap: 20px; }
  .process-step-marker { margin-bottom: 0; }
}

/* ---- Tablet / large mobile (<=768) ---- */
@media (max-width: 768px) {
  :root {
    --section-space: 76px;
    --section-space-sm: 60px;
    --gutter: 22px;
  }

  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .h-display { font-size: clamp(1.5rem, 4vw, 3.4rem); }
  .lede { font-size: 1.08rem; }

  .hero { min-height: 100svh; align-items: flex-end; }
  .hero-content { padding: 130px 30px 60px; }
  .hero-grid { max-width: 100%; }
  .hero-headline { max-width: 100%; }
  .hero-copy p {         max-width: 100%;
        font-size: 14px;
        line-height: 1.2;
        display: none; }
  .scroll-indicator { display: none; }

  .page-hero { padding: 130px 0 56px; }

  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 420px; padding: 30px; }

  .solution-row { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }

  .quality-item, .info-item { padding: 30px 26px; }
  .reason-grid { grid-template-columns: 1fr; }

  .dtx-form { grid-template-columns: 1fr; }
  .form-panel { padding: 28px; }

  .footer-top { grid-template-columns: 1fr; gap: 42px; padding-bottom: 50px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .step-detail { grid-template-columns: 1fr; gap: 14px; }

  .btn-row .btn { width: 100%; justify-content: center; }
  /* Long CTA labels ("Start Your Manufacturing Enquiry") can exceed a narrow
     phone's width on one line; base .btn sets white-space:nowrap for the
     normal case, so let it wrap here rather than overflow. */
  .btn { white-space: normal; text-align: center; }
  .mobile-nav-cta .btn { white-space: normal; text-align: center; }
  .section-head-flex { flex-direction: column; align-items: flex-start; }
}

/* ---- Mobile (<=430) ---- */
@media (max-width: 430px) {
  :root { --gutter: 18px; }

  .brand img { height: 40px; }
  .header-cta { gap: 10px; }

  .hero-tagrow span { font-size: 0.7rem; padding: 7px 11px; }

  .eyebrow { font-size: 0.72rem; }

  .form-panel { padding: 20px 16px; }
  .radio-pill span { padding: 10px 14px; font-size: 0.82rem; }

  .footer-disclaimer p { font-size: 0.78rem; }
}

/* ---- Small mobile (<=375) ---- */
@media (max-width: 375px) {
  .h-display { font-size: clamp(2.1rem, 11vw, 2.8rem); }
  .capability-card h3 { font-size: 1.4rem; }
}

/* ---- Extra small (<=320) ---- */
@media (max-width: 320px) {
  :root { --gutter: 14px; }
  .btn { padding: 15px 22px; font-size: 0.88rem; }
}