/* ============================================
   RESPONSIVE.CSS - NDIStress Breakpoints
   Tablet: 1024px | Mobile: 767px
   ============================================ */

/* ========================================
   TABLET - max-width: 1024px
   ======================================== */
@media (max-width: 1024px) {

  /* ---- Typography ---- */
  h1 { font-size: 42px; }
  h2 { font-size: 34px; }
  h3 { font-size: 28px; }
  h4 { font-size: 20px; }

  /* ---- Header ---- */
  .header__inner {
    min-height: var(--header-h-tablet);
  }

  .header__nav {
    display: none;
  }

  .header__phone {
    display: none;
  }

  .header__menu-toggle {
    display: flex;
  }

  .header__logo img {
    max-width: 120px;
  }

  .mobile-nav {
    top: var(--header-h-tablet);
    height: calc(100vh - var(--header-h-tablet));
  }

  /* ---- Hero ---- */
  .hero {
    margin-top: var(--header-h-tablet);
    min-height: 560px;
    padding: 60px 20px 0;
  }

  .hero__title {
    font-size: 56px;
    letter-spacing: -2px;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__feature-item {
    padding: 16px 18px;
    gap: 12px;
  }

  .hero__feature-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .hero__feature-icon-wrap svg {
    width: 18px;
    height: 18px;
  }

  .hero__feature-text strong {
    font-size: 12px;
  }

  .hero__feature-text span {
    font-size: 10px;
  }

  /* ---- About / Reality ---- */
  .about__grid {
    gap: 40px;
  }

  .about__image {
    height: 480px;
  }

  .reality__grid {
    gap: 40px;
  }

  .reality__image {
    height: 320px;
  }

  /* ---- Services (SVC) ---- */
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

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

  .svc-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  .svc__header {
    margin-bottom: 50px;
  }

  /* ---- Why Choose Us ---- */
  .why-us__grid {
    gap: 40px;
  }

  .why-us__features {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Conditions ---- */
  .conditions {
    margin: 0 20px;
  }

  .conditions__inner {
    gap: 30px;
  }

  /* ---- Founder ---- */
  .founder {
    margin: 0 20px;
  }

  .founder__grid {
    gap: 40px;
  }

  .founder__photo-wrap {
    width: 200px;
    height: 200px;
  }

  .founder__photo-wrap::before {
    width: 230px;
    height: 230px;
  }

  /* ---- Pricing ---- */
  .pricing__grid {
    gap: 20px;
  }

  .pricing__card {
    padding: 28px;
  }

  .pricing__card-price {
    font-size: 40px;
  }

  /* ---- Info Cards ---- */
  .info-cards__grid {
    gap: 20px;
  }

  .info-card {
    min-height: 320px;
    padding: 24px;
  }

  .info-card__title--lg {
    font-size: 26px;
  }

  /* ---- CTA Banner ---- */
  .cta-banner {
    margin: 0 20px;
  }

  /* ---- Testimonials ---- */
  .testimonials__grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
  }

  .testimonial--quote {
    grid-column: 2;
  }

  .testimonial--quote.slider-visible {
    grid-column: 1 / -1;
  }

  /* ---- Blog / Insights ---- */
  .blog__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .blog-card--featured {
    grid-column: 1 / -1;
  }

  .insights__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .insights__featured-img {
    height: 260px;
  }

  .insights__card-img {
    width: 150px;
  }

  /* ---- Appointment ---- */
  .appointment {
    margin: 0 20px;
  }

  .appointment__grid {
    gap: 30px;
  }

  /* ---- FAQ ---- */
  .faq__grid {
    gap: 40px;
  }

  /* ---- Footer ---- */
  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}


/* ========================================
   MOBILE - max-width: 767px
   ======================================== */
@media (max-width: 767px) {

  /* ---- Typography ---- */
  h1 { font-size: 30px; letter-spacing: -0.5px; }
  h2 { font-size: 26px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }

  /* ---- Layout ---- */
  .section {
    padding: 60px 0;
  }

  .container {
    padding: 0 20px;
  }

  /* ---- Header ---- */
  .header__inner {
    min-height: var(--header-h-mobile);
    padding: 0 20px;
  }

  .header__logo img {
    max-width: 110px;
  }

  .header__actions .btn {
    display: none;
  }

  .mobile-nav {
    top: var(--header-h-mobile);
    height: calc(100vh - var(--header-h-mobile));
    padding: 20px;
  }

  /* ---- Hero ---- */
  .hero {
    margin-top: var(--header-h-mobile);
    min-height: auto;
    padding: 60px 20px 0;
  }

  .hero__title {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .hero__buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero__buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__rating {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .hero__rating-info {
    align-items: center;
  }

  .hero__rating-number {
    font-size: 32px;
  }

  /* Features strip stacked */
  .hero__features {
    flex-direction: column;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
  }

  .hero__feature-item + .hero__feature-item {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .hero__feature-item {
    width: 100%;
    padding: 16px 20px;
    gap: 14px;
  }

  .hero__feature-icon-wrap {
    width: 42px;
    height: 42px;
  }

  /* ---- About / Reality ---- */
  .about {
    padding: 60px 0;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about__image {
    height: 400px;
  }

  .about__image-sm {
    height: 200px;
  }

  .reality {
    padding: 60px 0;
  }

  .reality::before {
    display: none;
  }

  .reality__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .reality__visual {
    order: -1;
  }

  .reality__image {
    height: 260px;
  }

  .reality__pain-item {
    padding: 18px 20px;
  }

  .reality__quote p {
    font-size: 18px;
  }

  /* ---- Services (SVC) ---- */
  .services {
    padding: 60px 0;
  }

  .services__grid {
    grid-template-columns: 1fr;
  }

  .service-card__image {
    height: 240px;
  }

  .svc {
    padding: 70px 0;
  }

  .svc::before,
  .svc::after {
    display: none;
  }

  .svc__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .svc-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }

  .svc-card__header {
    padding: 22px 22px 0;
  }

  .svc-card__image-wrap {
    padding: 16px 22px 0;
  }

  .svc-card__image {
    height: 180px;
  }

  .svc-card__body {
    padding: 20px 22px 24px;
  }

  .svc-card__number {
    font-size: 36px;
  }

  .svc-card__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  /* ---- Why Choose Us ---- */
  .why-us {
    padding: 60px 0;
  }

  .why-us__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .why-us__features {
    grid-template-columns: 1fr;
  }

  /* ---- Conditions ---- */
  .conditions {
    margin: 0 20px;
    padding: 60px 0;
  }

  .conditions__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .conditions__figure {
    order: -1;
  }

  .conditions__body-img {
    max-width: 240px;
  }

  /* ---- Founder ---- */
  .founder {
    margin: 0 20px;
    padding: 60px 0;
  }

  .founder__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .founder__photo-col {
    order: -1;
  }

  .founder__photo-wrap {
    width: 180px;
    height: 180px;
  }

  .founder__photo-wrap::before {
    width: 210px;
    height: 210px;
  }

  .founder__bio {
    font-size: var(--body-size);
  }

  /* ---- Pricing ---- */
  .pricing {
    padding: 60px 0;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing__card-price {
    font-size: 36px;
  }

  /* ---- Partners ---- */
  .partners {
    padding: 40px 0;
  }

  .partners__grid {
    gap: 24px;
  }

  .partners__logo {
    height: 28px;
  }

  /* ---- Info Cards ---- */
  .info-cards {
    padding: 60px 0;
  }

  .info-cards__grid {
    grid-template-columns: 1fr;
  }

  .info-card {
    min-height: auto;
  }

  .info-card__title--lg {
    font-size: 24px;
  }

  /* ---- CTA Banner ---- */
  .cta-banner {
    min-height: 40vh;
    margin: 0 20px;
    border-radius: 16px;
  }

  .cta-banner__content {
    padding: 50px 20px;
  }

  .cta-banner__title {
    font-size: 26px;
  }

  .cta-banner__tags {
    justify-content: center;
  }

  .cta-banner__actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Testimonials ---- */
  .testimonials {
    padding: 60px 0;
  }

  .testimonials__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  .testimonial--quote {
    grid-column: 1;
  }

  .testimonial__big-num {
    font-size: 56px;
  }

  /* ---- Blog ---- */
  .blog {
    padding: 60px 0;
  }

  .blog__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }

  .blog-card--featured .blog-card__image {
    height: 240px;
  }

  .blog-card__image {
    height: 200px;
  }

  /* ---- Insights ---- */
  .insights {
    padding: 70px 0;
  }

  .insights__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .insights__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .insights__featured-img {
    height: 220px;
  }

  .insights__featured-content {
    padding: 22px;
  }

  .insights__featured-title {
    font-size: 24px;
  }

  .insights__card-link {
    flex-direction: column;
  }

  .insights__card-img {
    width: 100%;
    height: 180px;
    min-height: auto;
  }

  /* ---- Appointment ---- */
  .appointment {
    margin: 0 20px;
    padding: 50px 0;
  }

  .appointment__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .appointment__image {
    min-height: 350px;
  }

  .appointment__contact-details {
    grid-template-columns: 1fr;
  }

  /* ---- FAQ ---- */
  .faq {
    padding: 60px 0;
  }

  .faq__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faq__left {
    position: static;
  }

  .faq__question {
    font-size: 15px;
    padding: 18px 20px;
  }

  .faq__answer-inner {
    padding: 0 20px 18px;
  }

  /* ---- Map ---- */
  .map-section__map iframe {
    height: 300px;
  }

  .map-section__info {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    gap: 20px;
    margin: -30px 20px 0;
    border-radius: 12px;
    padding: 22px 24px;
  }

  /* ---- Footer ---- */
  .footer__top {
    padding: 40px 0 30px;
  }

  .footer__cta-row {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 30px;
    padding: 16px 24px;
    border-radius: 20px;
  }

  .footer__divider-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
  }

  .footer__nav {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 30px 0 0;
  }

  .footer__bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 16px 0;
  }

  .footer__social a {
    width: 38px;
    height: 38px;
  }
}