/* ==========================================================================
   Z&S ENTERPRISES — RESPONSIVE STYLESHEET
   Page-specific responsive rules live under their own comment blocks.
   ========================================================================== */


/* Studio-page (formerly "gallery") responsive rules now live entirely in
   /assets/css/studio.css, loaded only on studio.html. */


/* =========================================================
   Z&S CONTACT PAGE — RESPONSIVE
   ========================================================= */

/* ---------------------------- laptop / small desktop ---------------------------- */
@media (max-width: 1180px) {
  .zs-contact-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .zs-contact-hero-visual { max-width: 300px; }

  .zs-contact-form-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .zs-cf-tiles { grid-template-columns: repeat(2, 1fr); }
  .zs-contact-map-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

/* ---------------------------- tablet ---------------------------- */
@media (max-width: 900px) {
  .zs-contact-hero { padding: calc(var(--zs-nav-clearance) + 22px) 0 70px; }
  .zs-contact-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .zs-contact-hero-copy { max-width: 100%; }
  .zs-contact-hero-visual { justify-self: start; max-width: 280px; }
  .zs-contact-hero-visual-index { font-size: 60px; }
  .zs-contact-hero-scroll { display: none; }

  .zs-contact-console-inner { grid-template-columns: 1fr; gap: 36px; }
  .zs-contact-console-statement { max-width: 100%; }

  .zs-contact-form-section { padding: 76px 0 40px; }
  .zs-contact-form-inner { grid-template-columns: 1fr; gap: 30px; }
  .zs-contact-form-head { position: static; }
  .zs-contact-form-intro { max-width: 100%; }
  .zs-cf-steps-nav { display: none; }
  .zs-cf-panel { padding: 22px; }
  .zs-cf-grid2 { grid-template-columns: 1fr; }
  .zs-cf-tiles { grid-template-columns: repeat(2, 1fr); }

  .zs-contact-process-steps { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .zs-contact-process-line { display: none; }

  .zs-contact-map-inner { grid-template-columns: 1fr; gap: 32px; }
  .zs-contact-map-panel { min-height: 320px; }
  .zs-contact-map-panel iframe { min-height: 320px; }

  .zs-contact-cta { min-height: 52vh; }
}

/* ---------------------------- mobile ---------------------------- */
@media (max-width: 640px) {
  .zs-contact-hero-title { font-size: 40px; }
  .zs-contact-hero-desc { font-size: 16px; max-width: 100%; }
  .zs-contact-hero-actions { gap: 18px 24px; }
  .zs-contact-hero-visual { max-width: 220px; }
  .zs-contact-hero-labels { flex-wrap: wrap; row-gap: 6px; }

  .zs-contact-console { padding: 60px 0; }
  .zs-contact-console-statement { font-size: 22px; }
  .zs-contact-console-link { gap: 14px; padding: 20px 0; }
  .zs-contact-console-value { font-size: 18px; }
  .zs-contact-console-arrow { display: none; }

  .zs-contact-form-title { font-size: 28px; }
  .zs-cf-panel { padding: 18px; border-radius: 16px; }
  .zs-cf-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zs-cf-tile { padding: 14px 12px 12px; gap: 18px; min-height: 84px; }
  .zs-cf-structure { gap: 8px; }
  .zs-cf-structure-item { padding: 10px 14px; font-size: 13px; }
  .zs-contact-dims-row { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .zs-contact-field--dim:nth-child(3),
  .zs-contact-field--dim:nth-child(4) { grid-column: auto; }

  .zs-cf-nav { flex-wrap: wrap; }
  .zs-cf-nav-continue,
  .zs-cf-nav-submit { width: 100%; margin-left: 0; order: -1; }
  .zs-cf-nav-back { order: 1; }

  .zs-contact-process { padding: 70px 0; }
  .zs-contact-process-steps { grid-template-columns: repeat(2, 1fr); }

  .zs-contact-direct { padding: 64px 0; }
  .zs-contact-direct-link { padding: 22px 0; gap: 14px; flex-wrap: wrap; }
  .zs-contact-direct-label { width: 100%; }
  .zs-contact-direct-rule { display: none; }

  .zs-contact-map { padding: 0 0 70px; }

  .zs-contact-cta-title { font-size: 32px; }
  .zs-contact-cta-actions { gap: 18px; }
}

/* ---------------------------- small mobile ---------------------------- */
@media (max-width: 420px) {
  .zs-contact-hero-visual { max-width: 190px; }
  .zs-contact-hero-visual-index { font-size: 48px; }
  .zs-contact-hero-visual-plate { font-size: 10px; padding: 7px 11px; }
  .zs-contact-hero-visual-card { width: 96px; left: -30px; }
  .zs-contact-hero-visual-doc { display: none; }

  .zs-contact-console-statement { font-size: 20px; }
  .zs-cf-tiles { grid-template-columns: 1fr; }
  .zs-contact-process-steps { grid-template-columns: 1fr 1fr; }

  .zs-contact-cta-title { font-size: 27px; }
}


/* =========================================================
   Z&S FAQ PAGE — RESPONSIVE
   ========================================================= */

/* ---------------------------- laptop / small desktop ---------------------------- */
@media (max-width: 1180px) {
  .zs-faq-main-inner { grid-template-columns: 220px minmax(0, 1fr); }
  .zs-faq-visual-inner { grid-template-columns: 1fr; }
  .zs-faq-visual-frame { max-width: 460px; }
  .zs-faq-map-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}

/* ---------------------------- tablet & below: horizontal category rail ---------------------------- */
@media (max-width: 900px) {
  .zs-faq-hero { padding: calc(var(--zs-nav-clearance) + 20px) 0 52px; }
  .zs-faq-hero-corner { display: none; }
  .zs-faq-hero-fragments { display: none; }

  .zs-faq-main { padding: 44px 0 84px; }
  .zs-faq-main-inner { grid-template-columns: 1fr; gap: 30px; }

  .zs-faq-nav {
    position: static;
    top: auto;
  }

  .zs-faq-nav-list {
    flex-direction: row;
    overflow-x: auto;
    border-left: none;
    border-bottom: 1px solid var(--zs-line);
    gap: 4px;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .zs-faq-nav-list::-webkit-scrollbar { display: none; }

  .zs-faq-nav-indicator {
    left: auto;
    top: auto;
    bottom: 0;
    width: var(--ind-w, 0px);
    height: 2px;
    transform: translateX(var(--ind-x, 0px));
    transition: transform 380ms var(--zs-ease), width 380ms var(--zs-ease);
  }

  .zs-faq-nav-btn {
    flex-shrink: 0;
    padding: 12px 16px;
    white-space: nowrap;
  }

  .zs-faq-panel-head { margin-bottom: 18px; }

  .zs-faq-start-grid { grid-template-columns: 1fr 1fr; }
  .zs-faq-start-card--lg { grid-column: span 2; }

  .zs-faq-process-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .zs-faq-process-line { display: none; }

  .zs-faq-map { padding: 64px 0 72px; }
}

/* ---------------------------- mobile ---------------------------- */
@media (max-width: 640px) {
  .zs-faq-hero-top { flex-wrap: wrap; gap: 12px; }
  .zs-faq-hero-title { font-size: 32px; }
  .zs-faq-hero-desc { font-size: 15.5px; max-width: 100%; }

  .zs-faq-nav-label { font-size: 13px; }

  .zs-faq-map-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .zs-faq-related { margin-left: 36px; }

  .zs-faq-q { gap: 14px; padding: 18px 2px; }
  .zs-faq-q-text { font-size: 16px; }
  .zs-faq-q-num { width: 22px; font-size: 11.5px; }
  .zs-faq-a-inner p { padding-left: 36px; font-size: 15px; }
  .zs-faq-next { margin-left: 36px; }

  .zs-faq-start-grid { grid-template-columns: 1fr; }
  .zs-faq-start-card--lg { grid-column: span 1; }

  .zs-faq-visual { padding: 60px 0; }
  .zs-faq-process { padding: 60px 0; }
  .zs-faq-process-track { grid-template-columns: repeat(2, 1fr); }

  .zs-faq-cta { padding: 64px 0; }
  .zs-faq-cta-title { font-size: 26px; }
}

/* ---------------------------- small mobile ---------------------------- */
@media (max-width: 420px) {
  .zs-faq-hero-title { font-size: 28px; }
  .zs-faq-nav-btn { padding: 10px 12px; }
  .zs-faq-q-text { font-size: 15px; }
  .zs-faq-a-inner p { padding-left: 0; margin-top: 6px; }
  .zs-faq-next { margin-left: 0; }
  .zs-faq-related { margin-left: 0; }
  .zs-faq-process-track { grid-template-columns: 1fr; }
}