/* =========================================================
   CLAUZE PRESTIGE — responsive.css
   Breakpoints:
     Tablet  → max-width: 1024px
     Mobile  → max-width: 768px  (following Figma: "Landing - Mobile" 390px)
   ========================================================= */

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

  /* --- Header --- */
  .header-inner { gap: 1rem; }
  .nav-list { gap: 1.25rem; }
  .nav-list a { font-size: 0.8125rem; }
  .header-actions .social-links { display: none; }

  /* --- Hero --- */
  .hero__headline { font-size: 3.25rem; }
  .hero__overlay .container { padding-top: 60px; }

  /* --- Intro --- */
  .intro__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
  }
  .intro__heading { font-size: 2rem; }
  .intro__logo-circle { width: 260px; height: 260px; }

  /* --- Services Header --- */
  .services-header__heading { font-size: 2rem; }

  /* --- Service Cards --- */
  .service-card__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  .service-card__image-wrap { height: 320px; }
  .service-card__title { font-size: 1.375rem; }
  .service-card__features--2col { grid-template-columns: 1fr; }

  /* --- About --- */
  .about__inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .about__heading { font-size: 2rem; }

  /* --- Gallery --- */
  .gallery__heading { font-size: 2rem; }

  /* --- Testimonials --- */
  .testimonials__grid { grid-template-columns: 1fr 1fr; }
  .testimonials__heading { font-size: 2rem; }

  /* --- How to Start --- */
  .steps-grid { gap: 1.5rem; }
  .how-to-start__heading { font-size: 2rem; }

  /* --- CTA --- */
  .cta-section__heading { font-size: 2rem; }

  /* --- Areas Served --- */
  .areas-served__heading { font-size: 2rem; }
  .areas-served__columns { grid-template-columns: 1fr 1fr 1fr; }

  /* --- Why Us --- */
  .why-us__grid { grid-template-columns: repeat(3, 1fr); }

  /* --- Gallery 2 / Instagram --- */
  .ig-iframe iframe { max-width: 500px; height: 495px; }
  .follow-container { padding: 0 !important; }

  /* --- Footer --- */
  .footer-inner { gap: 2rem; }
}


/* ---------------------------------------------------------
   MOBILE — max-width: 768px
   Follows Figma: "Landing - Mobile" (390px canvas)
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* -------------------------------------------------------
     Header / Navbar
     Figma: 390×64 — logo left, hamburger right
  ------------------------------------------------------- */
  .header-inner { height: 64px; padding-inline: 12px; gap: 0; }
  .primary-nav { display: none; }
  .header-actions .social-links { display: none; }
  .header-actions .btn-gold { display: none; }
  .hamburger { display: flex; }

  /* Mobile menu open */
  .primary-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    right: 0;
    left: auto;
    bottom: auto;
    width: 200px;
    background: var(--white);
    padding: 1.25rem 1.25rem;
    z-index: 99;
    overflow-y: auto;
    border-radius: 0 0 0 14px;
    box-shadow: -4px 8px 24px rgba(0,0,0,0.12);
  }
  .primary-nav.is-open .nav-list {
    flex-direction: column;
    align-items: flex-end;
    gap: 1.25rem;
  }
  .primary-nav.is-open .nav-list a { font-size: 0.9375rem; }

  /* -------------------------------------------------------
     Hero
     Figma: 390×460 — video background, blush overlay
  ------------------------------------------------------- */
  .hero { margin-top: 0; }
  .hero__image-wrap { height: 240px; }
  .hero__bg-video { height: 240px; }
  .hero__overlay .container {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    padding-inline: 1.5rem;
  }
  .hero__headline {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  .hero__sub {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
  }

  /* -------------------------------------------------------
     Intro
     Figma: 390×578 — logo circle (136px) centered at top,
     heading + text + gold button below, all centered
  ------------------------------------------------------- */
  .intro { padding: 2.5rem 0; }
  .intro__inner {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }
  /* Logo goes first on mobile (matches Figma top position) */
  .intro__logo-wrap { order: -1; margin-bottom: 1.5rem; }
  .intro__logo-circle {
    width: 136px;
    height: 136px;
    margin: 0 auto;
  }
  .intro__text { padding: 0 1.5rem; }
  .intro__heading {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }
  .intro__separator { margin-inline: auto; }
  .intro__body { font-size: 0.875rem; margin-bottom: 0.75rem; }
  .intro__text .btn-gold { margin-top: 1.75rem; }

  /* -------------------------------------------------------
     Services Header
     Figma: 390×210 — centered, padding 24px sides
  ------------------------------------------------------- */
  .services-header { padding: 2.5rem 0 1.5rem; }
  .services-header__inner { padding-inline: 1.5rem; text-align: center; }
  .services-header__heading {
    font-size: 1.625rem;
    line-height: 1.25;
  }
  .services-header__sub { font-size: 0.875rem; }

  /* -------------------------------------------------------
     Service Cards
     Figma: image on top (342×220, r=12px), content below
     24px horizontal padding on all cards
  ------------------------------------------------------- */
  .service-card { padding: 1.5rem 0; }
  .service-card__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline: 1.5rem;
  }
  /* Image always on top in mobile */
  .service-card__image-wrap {
    order: -1;
    height: 220px;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .service-card__title { margin-bottom: 0.5rem; }
  .services-list {
    padding-top: 10px;
    padding-bottom: 1.5rem;
  }
  .service-card:nth-child(even) .service-card__image-wrap { order: -1; }
  .service-card__number { font-size: 1.25rem; }
  .service-card__title { font-size: 1.25rem; }
  .service-card__desc { font-size: 0.875rem; }
  .service-card__features { gap: 0.5rem; }
  .service-card__features--2col { grid-template-columns: 1fr; }
  .service-card__frequency {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  .freq-badge { gap: 0.4rem; }
  .freq-badge__label { font-size: 0.625rem; }

  /* -------------------------------------------------------
     Gallery
     Figma: 390×475 — horizontal scroll of ~242px squares
     overline "GALLERY", heading "Our Excellence!", gold CTA
  ------------------------------------------------------- */
  .gallery { padding: 2.5rem 0; }
  .gallery__inner { padding-inline: 0; }
  .gallery__header { padding-inline: 1.5rem; text-align: center; }
  .gallery__heading { font-size: 1.625rem; }

  /* Swiper wraps the gallery slides */
  .gallery__slider {
    width: 100%;
    overflow: hidden;
    padding-inline: 1.5rem;
    box-sizing: border-box;
  }
  .gallery__slide {
    width: 280px !important;
    height: 280px !important;
  }
  .gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
  }
  .gallery__grid--2col { grid-template-columns: 1fr 1fr; }
  .gallery__cta { text-align: center; margin-top: 1.5rem; padding-inline: 1.5rem; }

  /* -------------------------------------------------------
     About
     Figma: 390×1163 — logo circle (140px) centered,
     overline + heading centered, long body text,
     then large photo (342×464, r=12px)
  ------------------------------------------------------- */
  .about { padding: 2.5rem 0; }
  .about__row--1 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .about__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-inline: 1.5rem;
    text-align: center;
    align-items: center;
  }
  /* About logo at top */
  .about__logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .about__logo-circle {
    width: 140px;
    margin: auto;
    height: 140px;
  }
  .about__heading { font-size: 1.625rem; }
  .about__body { font-size: 0.875rem; text-align: left; }

  /* Slider image: large, rounded */
  .about__slider-wrap,
  .about__image-wrap {
    border-radius: 0.75rem;
    overflow: hidden;
    height: 320px;
  }
  .about__slider-wrap img,
  .about__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* -------------------------------------------------------
     Our Mission (simple text section)
  ------------------------------------------------------- */
  .our-mission {
    padding: 2rem 1.5rem;
    text-align: center;
  }
  .our-mission__text { font-size: 0.9375rem; line-height: 1.7; }

  /* -------------------------------------------------------
     Who We Serve
  ------------------------------------------------------- */
  .who-we-serve { padding: 2.5rem 0; }
  .who-we-serve__inner { padding-inline: 1.5rem; }
  .who-we-serve__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  /* -------------------------------------------------------
     Why Us
     Figma: 390×812 — 2-column icon grid (3 rows × 2 cols)
     each cell ~154px wide, icon 120×120, label below
  ------------------------------------------------------- */
  .why-us { padding: 2.5rem 0; }
  .why-us__inner { padding-inline: 1rem; text-align: center; }
  .why-us__heading { font-size: 1.625rem; }
  .why-us__sub { font-size: 0.9375rem; }
  .why-us__grid {
    display: grid;
    max-width: 300px;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0.75rem;
    margin-top: 2rem;
    justify-content: center;
  }
  .why-us__item { text-align: center; }
  .why-us__icon-wrap {
    width: 120px;
    height: 120px;
    margin: 0 auto 0.75rem;
  }
  .why-us__label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
  }
  .why-us__card{
    margin: auto;
    max-width: 130px;
    font-size: 13px;
  }

  /* -------------------------------------------------------
     Feature Gallery 2 / Instagram section
     Figma: 390×578 — centered Instagram icon + "Follow us"
  ------------------------------------------------------- */
  .follow-container { padding: 2rem 1.5rem !important; }
  .ig-iframe { width: 100% !important; height: auto !important; }
  .ig-iframe iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 440px;
    display: block;
  }

  /* -------------------------------------------------------
     Testimonials
     Figma: single column card stack
  ------------------------------------------------------- */
  .testimonials { padding: 2.5rem 0; }
  .testimonials__inner { padding-inline: 1.5rem; }
  .testimonials__heading { font-size: 1.625rem; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 1rem; }
  .testimonial-card { padding: 1.25rem; }

  /* -------------------------------------------------------
     Contact CTA
     Figma: single column form, 24px padding
  ------------------------------------------------------- */
  .cta-section { padding: 2.5rem 0; }
  .cta-section__inner { padding-inline: 1.5rem; }
  .cta-section__heading { font-size: 1.625rem; }
  .cta-form{
    gap: 10px;
  }
  .cta-form__row { grid-template-columns: 1fr; gap: 10px; }
  .cta-contact-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* -------------------------------------------------------
     Company Policies
     Figma: stacked policy cards
  ------------------------------------------------------- */
  .company-policies { padding: 2.5rem 0; }
  .company-policies__inner { padding-inline: 1.5rem; }
  .company-policies__heading { font-size: 1.5rem; }
  .company-policies__grid {
    flex-direction: column;
    align-items: stretch;
  }
  .policy-card { width: 100%; }

  /* Payment icons row */
  .payment-icons { gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
  .payment-grid{
    gap: 15px;
  }

  /* -------------------------------------------------------
     FAQ
     Figma: stacked accordion items
  ------------------------------------------------------- */
  .faq-section { padding: 2.5rem 0; }
  .faq-section__inner { padding-inline: 1.5rem; }
  .faq-section__heading { font-size: 1.5rem; }

  /* -------------------------------------------------------
     Areas Served
  ------------------------------------------------------- */
  .areas-served { padding: 2.5rem 0; }
  .areas-served__inner { padding-inline: 1.5rem; text-align: center; }
  .areas-served__heading { font-size: 1.625rem; }
  .areas-served__columns { grid-template-columns: 1fr 1fr; gap: 0.5rem; }

  /* -------------------------------------------------------
     Image Break
  ------------------------------------------------------- */
  .image-break { height: 260px; }
  .image-break__quote { font-size: 1.25rem; padding-inline: 1.5rem; }

  /* -------------------------------------------------------
     How to Start / Steps
  ------------------------------------------------------- */
  .how-to-start { padding: 2.5rem 0; }
  .how-to-start__inner { padding-inline: 1.5rem; text-align: center; }
  .how-to-start__heading { font-size: 1.625rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* -------------------------------------------------------
     Footer
     Figma: stacked — logo+tagline, nav, contact, social, copyright
  ------------------------------------------------------- */
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .footer-inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding-inline: 1.5rem;
    text-align: center;
  }
  .footer-logo { align-items: center; }
  .footer-logo .hero__social { justify-content: center; }
  .footer-nav .footer-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
  }
  .footer-copy { text-align: center; font-size: 0.75rem; }
  .social-links--footer { justify-content: center; }

  /* -------------------------------------------------------
     Global utility overrides
  ------------------------------------------------------- */
  .container { padding-inline: 1.5rem; }

  /* Center section overlines on mobile */
  .overline { text-align: center; }

  /* Hide desktop gallery thumbs nav on mobile */
  .gallery-thumbs, .gallery__thumbs { display: block; max-width: 330px; gap: 0;}
.gallery__thumb-slide {
  transform: scale(1);
}


  /* Reduce section vertical padding globally */
  section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero { padding-top: 0; padding-bottom: 0; }
}


/* ---------------------------------------------------------
   SMALL MOBILE — max-width: 480px
   Fine-tuning for very small screens
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__headline { font-size: 34px;}
  .intro__heading { font-size: 1.5rem; }
  .service-card__inner { padding-inline: 1rem; }
  .service-card__image-wrap { height: 180px; }
  /* .gallery__slide { width: 150px !important; height: 150px !important; } */
  .why-us__icon-wrap { width: 90px; height: 90px; }
  .areas-served__columns { grid-template-columns: 1fr 1fr; }
  .testimonials__grid { gap: 0.75rem; }
  .cta-section__heading { font-size: 1.375rem; }
}