/* ================= NAVBAR ================= */
@media (max-width: 768px) {

    /* Make header the positioning anchor */
    .header {
        position: relative;
        z-index: 1000;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border-top: 2px solid #f4a100;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        z-index: 999;

        /* Hidden by default — animate max-height */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    .nav.active {
        max-height: 400px;
        display: block;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 5px 0;
        gap: 0;
    }

    .nav-links li {
        border-bottom: 1px solid #f5f5f5;
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links a {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 500;
        color: #222;
        transition: background 0.2s, color 0.2s;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: #fff8ee;
        color: #f4a100;
        padding-left: 30px;
    }

    .menu-toggle {
        display: block;
        font-size: 26px;
        cursor: pointer;
        user-select: none;
        transition: transform 0.3s ease;
    }

    .menu-toggle.open {
        transform: rotate(90deg);
    }
}


/* ================= HERO ================= */
@media (max-width: 768px) {

    .hero,
    .hero-slider {
        height: 60vh;
    }

    .hero-content {
        margin-left: 15px;
        margin-bottom: 20px;
    }

    .hero-content h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .hero-text {
        font-size: 12px;
    }
}


/* ================= PRECISION ================= */
@media (max-width: 768px) {

    .precision-container {
        flex-direction: column;
        margin-bottom: -70px;
    }

    .precision-content h2 {
        font-size: 28px;
    }

    .stats {
        gap: 30px;
    }
}


/* ================= SERVICES (TABLET + MOBILE) ================= */
@media (max-width: 992px) {

    .services-slider {
        gap: 30px;
    }

    .service-card {
        min-width: 100%;
        /* 1 CARD */
        padding: 25px 20px;
        border-radius: 22px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 14px;
    }

    .icon-box {
        width: 50px;
        height: 50px;
    }

    .icon-box svg {
        width: 22px;
        height: 22px;
    }
}


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

    /* HIDE SLIDER BUTTONS */
    .slider-btn {
        display: none;
    }

    /* SMALL ADJUSTMENTS */
    .service-card {
        padding: 22px 18px;
    }

    .service-link {
        font-size: 13px;
    }
}

@media (max-width: 768px) {

    .t-item {
        width: 90vw;
        padding: 18px 20px;
    }

    .t-item img {
        height: 35px;
    }

    .t-text span {
        font-size: 28px;
    }
}

@media (max-width: 768px) {

    /* STACK LAYOUT */
    .contact-card {
        padding: 28px 20px 32px;
        border-radius: 18px;
    }

    .contact-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    /* INPUT ROW STACK */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    /* INPUTS */
    .contact-form-inner input,
    .contact-form-inner select,
    .contact-form-inner textarea {
        padding: 11px 13px;
        border-radius: 8px;
    }

    /* TEXTAREA */
    .contact-form-inner textarea {
        height: 90px;
    }

    /* SEND BUTTON */
    .submit-btn {
        width: 100%;
        padding: 14px;
        font-size: 14px;
    }
}

/* ============ FOOTER ============ */

/* TABLET: 2x2 grid */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 36px 30px;
    }
}

/* MOBILE: logo+socials LEFT-aligned on top, then 3 columns side by side */
@media (max-width: 600px) {

    .footer-main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 25px 15px;
        padding: 40px 0 30px;
    }

    /* Brand (logo + socials) spans all columns — CENTER aligned */
    .footer-brand {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        text-align: center;
        padding-bottom: 24px;
        border-bottom: 1px solid #eee;
    }

    /* Logo — center aligned */
    .footer-logo img {
        margin: 0 auto 5px auto;
        height: 100px;
        max-width: 100%;
    }

    /* Social icons — center aligned */
    .footer-socials {
        justify-content: center;
        gap: 18px;
    }

    .footer-socials a svg {
        width: 19px;
        height: 19px;
    }

    .footer-whatsapp {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .footer-whatsapp-label {
        text-align: center;
    }

    .footer-col:last-child {
        grid-column: 1 / -1;
        margin-top: 10px;
    }

    /* Column headings */
    .footer-heading {
        font-size: 14px;
        margin-bottom: 12px;
        font-weight: 700;
    }

    /* Links */
    .footer-links {
        gap: 6px;
    }

    .footer-links a,
    .footer-contact-list li {
        font-size: 12px;
        line-height: 1.5;
    }

    .footer-contact-list {
        gap: 12px;
    }

    /* Contact list — icon + text */
    .footer-contact-list li {
        align-items: flex-start;
        gap: 8px;
        line-height: 1.5;
    }

    .footer-contact-list .fc-icon {
        width: 14px;
        height: 14px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .footer-contact-list a {
        font-size: 12px;
        word-break: break-word;
    }

    .footer-contact-list .footer-address {
        font-size: 12px;
        line-height: 1.4;
        display: block;
        white-space: normal;
        margin-top: 2px;
        color: #0f0f0f;
    }

    /* Copyright bar */
    .footer-bar-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .footer-bar p,
    .footer-bar-links a {
        font-size: 11px;
    }

    .footer-bar-links {
        justify-content: center;
        gap: 16px;
    }
}

/* ============================================
   ABOUT PAGE — RESPONSIVE
   ============================================ */

/* TABLET (≤ 992px) */
@media (max-width: 992px) {

    /* Hero: stack vertically */
    .about-hero-container {
        flex-direction: column;
        gap: 40px;
    }

    .about-hero-left,
    .about-hero-right {
        flex: unset;
        width: 100%;
    }

    .about-hero-img-wrap {
        aspect-ratio: 16 / 9;
    }

    .about-hero-quote {
        position: static;
        margin-top: 16px;
        max-width: 100%;
    }

    /* Journey: stack vertically */
    .about-journey-container {
        flex-direction: column;
        gap: 40px;
    }

    .about-journey-img-wrap,
    .about-journey-content {
        flex: unset;
        width: 100%;
    }

    .about-journey-img {
        height: 320px;
    }

    /* Partners: 2 columns */
    .about-partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE (≤ 600px) */
@media (max-width: 600px) {

    /* Hero */
    .about-hero-section {
        padding: 48px 0 40px;
    }

    .about-hero-title {
        font-size: 30px;
    }

    .about-hero-lead {
        font-size: 14px;
    }

    .about-hero-stats {
        gap: 14px;
    }

    .about-hero-stat {
        padding: 14px 18px;
        min-width: 90px;
    }

    .stat-num {
        font-size: 24px;
    }

    .stat-label {
        font-size: 10px;
    }

    /* Journey */
    .about-journey-section {
        padding: 52px 0 48px;
    }

    .about-journey-heading {
        font-size: 26px;
    }

    .about-journey-img {
        height: 220px;
    }

    .about-journey-highlight {
        font-size: 14px;
    }

    .about-journey-text p {
        font-size: 13px;
    }

    /* Partners */
    .about-partners-section {
        padding: 52px 0 60px;
    }

    .about-partners-heading {
        font-size: 24px;
    }

    .about-partners-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-partner-card {
        padding: 28px 20px;
    }

    .partner-name {
        font-size: 15px;
    }
}

/* ============================================
   SERVICES PAGE v2 — RESPONSIVE
   ============================================ */

/* TABLET (≤ 992px) */
@media (max-width: 992px) {

    /* Hero */
    .srv-hero-title {
        font-size: 46px;
        letter-spacing: -1.5px;
    }

    /* Service grid rows: stack vertically */
    .srv-grid-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* On tablet: reset any order overrides so image comes after text for reversed row */
    .srv-grid-row .srv-img-col--first {
        order: 2;
    }

    .srv-grid-row .srv-text-col--second {
        order: 1;
    }

    .srv-img-col--right,
    .srv-img-col--left {
        justify-content: center;
    }

    .srv-img-frame {
        max-width: 100%;
    }

    /* Bento: 1 column on tablet */
    .srv-bento-grid {
        grid-template-columns: 1fr;
    }

    /* Wide card: stack */
    .srv-wide-card {
        grid-template-columns: 1fr;
    }

    .srv-wide-img {
        min-height: 260px;
    }

    .srv-wide-content {
        padding: 40px 36px;
    }

    /* Methodology: 2 columns */
    .srv-method-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* CTA: stack */
    .srv-cta-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 44px 40px;
        gap: 24px;
    }

    .srv-cta-title {
        font-size: 28px;
    }
}

/* MOBILE (≤ 600px) */
@media (max-width: 600px) {

    /* Hero */
    .srv-hero {
        min-height: 320px;
    }

    .srv-hero-content {
        padding: 52px 0 48px;
    }

    .srv-hero-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .srv-hero-lead {
        font-size: 14px;
    }

    .srv-badge {
        font-size: 10px;
        padding: 4px 12px;
    }

    /* Services */
    .srv-space {
        gap: 60px;
    }

    .srv-service-title {
        font-size: 24px;
    }

    .srv-service-desc {
        font-size: 14px;
    }

    .srv-accent-block {
        padding-left: 18px;
    }

    .srv-checklist {
        padding-left: 18px;
    }

    .srv-tags {
        padding-left: 18px;
    }

    /* Bento */
    .srv-bento-card {
        padding: 28px 24px;
        min-height: 220px;
    }

    .srv-bento-title {
        font-size: 18px;
    }

    /* Wide card */
    .srv-wide-content {
        padding: 28px 24px;
        gap: 20px;
    }

    .srv-wide-stats {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-left: 18px;
    }

    .srv-wide-img {
        min-height: 200px;
    }

    /* Methodology */
    .srv-method-grid {
        grid-template-columns: 1fr;
    }

    .srv-method-title {
        font-size: 30px;
    }

    .srv-step-card {
        padding: 24px 22px;
    }

    /* CTA */
    .srv-cta-card {
        padding: 32px 24px;
    }

    .srv-cta-title {
        font-size: 22px;
    }

    .srv-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 14px;
    }
}

/* ============================================
   CONTACT PAGE — RESPONSIVE
   ============================================ */

/* TABLET (≤ 992px) */
@media (max-width: 992px) {

    .ctc-hero-title {
        font-size: 50px;
        letter-spacing: -1.5px;
    }

    /* Stack grid: form full width, cards below */
    .ctc-grid {
        grid-template-columns: 1fr;
    }

    .ctc-form-card {
        padding: 36px 32px;
    }
}

/* MOBILE (≤ 600px) */
@media (max-width: 600px) {

    .ctc-hero {
        padding: 52px 0 36px;
    }

    .ctc-hero-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .ctc-hero-lead {
        font-size: 15px;
    }

    /* Field rows stack */
    .ctc-field-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ctc-form-card {
        padding: 28px 22px;
    }

    .ctc-submit-btn {
        width: 100%;
        justify-content: center;
        font-size: 14px;
    }

    .ctc-info-card {
        padding: 22px 20px;
        gap: 14px;
    }

    .ctc-card-title {
        font-size: 15px;
    }

    .ctc-card-text {
        font-size: 13px;
    }

    /* Phone sections wrapper - stack on mobile */
    .phone-sections-wrapper {
        flex-direction: column;
        gap: 10px;
    }
}

/* Tablet breakpoint */
@media (min-width: 480px) and (max-width: 768px) {
    .phone-sections-wrapper {
        flex-direction: row;
        gap: 20px;
    }
}