/* ==========================================================================
   OTECTCIRCLE — RESPONSIVE ADJUSTMENTS
   Breakpoints checked: 320 / 375 / 425 / 576 / 768 / 992 / 1200 / 1400+
   ========================================================================== */

/* ---------- ≥1400px : roomier container ---------- */
@media (min-width: 1400px) {
  :root { --gutter: clamp(2rem, 5vw, 4rem); }
}

/* ---------- ≤1200px ---------- */
@media (max-width: 1200px) {
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr; row-gap: 2.5rem; }
  .footer-col.col-legal { grid-column: span 3; }
}

/* ---------- ≤991px : nav collapses, split layouts stack ---------- */
@media (max-width: 991px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta .btn-text { display: none; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 180px; margin-bottom: 0.5rem; }

  .intro-grid { grid-template-columns: 1fr; }
  .intro-number { font-size: clamp(3rem, 16vw, 5rem); }

  .split-block { grid-template-columns: 1fr; }
  .split-block.reverse { direction: ltr; }
  .split-block .order-first-mobile { order: -1; }

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  .capability-item { grid-template-columns: 40px 1fr; }
  .capability-item .cap-tag { display: none; }

  .portfolio-masonry { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 20vw; }
  .portfolio-item.size-lg { grid-column: span 4; grid-row: span 2; }
  .portfolio-item.size-md,
  .portfolio-item { grid-column: span 2; }
}

/* ---------- ≤768px : tablet / large phone ---------- */
@media (max-width: 768px) {
  .service-list { display: none; }
  .service-accordion { display: block; border-top: 1px solid var(--color-dark-15); }
  .service-accordion .acc-item { border-bottom: 1px solid var(--color-dark-15); }
  .service-accordion .acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    background: none;
    border: none;
    text-align: left;
  }
  .service-accordion .acc-head .service-num { font-size: 1.2rem; color: var(--color-red); flex-shrink: 0; }
  .service-accordion .acc-head h3 { font-size: 1.2rem; flex-grow: 1; }
  .service-accordion .acc-head .plus {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1.5px solid var(--color-dark-15);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .service-accordion .acc-item.is-open .acc-head .plus { transform: rotate(45deg); background: var(--color-red); color: #fff; border-color: var(--color-red); }
  .service-accordion .acc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .service-accordion .acc-item.is-open .acc-body { max-height: 14rem; }
  .service-accordion .acc-body-inner { padding: 0 0 1.3rem 2.2rem; color: var(--color-dark-70); font-size: 0.92rem; }
  .service-accordion .acc-body-inner a { color: var(--color-red); font-weight: 700; }

  .process-step { min-width: 100%; border-right: none; border-bottom: 1px dashed var(--color-dark-15); margin-right: 0; padding-right: 0; }
  .process-track { flex-direction: column; overflow-x: visible; }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }

  .portfolio-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 45vw; }
  .portfolio-item, .portfolio-item.size-lg, .portfolio-item.size-md, .portfolio-item.size-sm { grid-column: span 2; grid-row: span 1; }
}

/* ---------- ≤576px : phones ---------- */
@media (max-width: 576px) {
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-band { border-radius: var(--radius-md); }
  .hero-form-card { border-radius: var(--radius-md); }
  .capability-item { grid-template-columns: 1fr; row-gap: 0.4rem; }
  .capability-item .cap-index { order: -1; }
}

/* ---------- ≤425px ---------- */
@media (max-width: 425px) {
  .announce-strip { font-size: 0.62rem; letter-spacing: 0.08em; }
  .hero-tags li { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .btn { padding: 0.85rem 1.5rem; font-size: 0.88rem; }
  .statement-text { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* ---------- ≤375px ---------- */
@media (max-width: 375px) {
  .container, .container-fluid-pad { --gutter: 1rem; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 2rem; height: 2rem; }
}

/* ---------- ≤320px ---------- */
@media (max-width: 320px) {
  .hero-form-card { padding: 1.15rem; }
  .display-huge { font-size: 2.35rem; }
}