/* ==========================================================================
   GIGL MARKETING – COMPREHENSIVE RESPONSIVE DESIGN OVERRIDE SHEET
   Breakpoints: 1280px | 1024px | 992px | 768px | 576px | 480px | 360px
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL SAFETY NET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   1. MEGA MENU – PREVENT OFF-SCREEN ON MEDIUM DESKTOPS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .mega-menu {
    width: min(900px, 95vw);
  }
  .nav-menu {
    gap: 1.25rem;
  }
  .nav-link {
    font-size: 0.875rem;
  }
}

@media (max-width: 1024px) {
  .nav-menu,
  .topbar-left,
  .header-consult-btn {
    display: none !important;
  }
  .mobile-toggle-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   2. TOP BAR
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .header-topbar {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .topbar-left {
    display: none !important;
  }
  .topbar-content {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   3. HERO SLIDER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-slider-container {
    height: 560px;
  }
  .hero-content {
    max-width: 90%;
  }
}

@media (max-width: 768px) {
  .hero-slider-container {
    height: 500px;
  }
  .hero-content {
    max-width: 100%;
    padding: 0 0.5rem;
  }
  .hero-title {
    font-size: clamp(1.65rem, 6vw, 2.5rem);
    line-height: 1.2;
  }
  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  .hero-badge {
    font-size: 0.775rem;
    padding: 0.35rem 0.75rem;
  }
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero-cta-row .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-nav-arrow {
    display: none !important;
  }
  .hero-dots {
    bottom: 1.25rem;
  }
}

@media (max-width: 576px) {
  .hero-slider-container {
    height: 460px;
  }
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .hero-subtitle {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .hero-slider-container {
    height: 420px;
  }
  .hero-title {
    font-size: clamp(1.35rem, 7.5vw, 1.85rem);
  }
}

@media (max-width: 360px) {
  .hero-slider-container {
    height: 380px;
  }
  .hero-title {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   4. STATS STRIP
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .stat-card:nth-child(2) {
    border-right: none;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stat-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 1rem 0.75rem;
  }
  .stat-card:last-child {
    border-bottom: none !important;
  }
  .stat-value {
    font-size: 2rem;
  }
  .stat-label {
    font-size: 0.875rem;
  }
  .stat-note {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stat-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0.875rem 0;
  }
  .stat-value {
    font-size: 1.85rem;
  }
}

/* --------------------------------------------------------------------------
   5. SECTION SPACING
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }
  .section-sm {
    padding: 2rem 0;
  }
  .section-header {
    margin-bottom: 2.5rem;
  }
}

@media (max-width: 576px) {
  .section {
    padding: 2.5rem 0;
  }
  .section-sm {
    padding: 1.75rem 0;
  }
  .section-header {
    margin-bottom: 2rem;
  }
  .section-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 2rem 0;
  }
  .section-header {
    margin-bottom: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   6. GRID SYSTEM
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  .grid {
    gap: 1.5rem;
  }
}

@media (max-width: 576px) {
  .grid {
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   7. ABOUT 2-COL IMAGE SECTION – INLINE STYLE OVERRIDES
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .about-who-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
  }
}

/* Fix inline height on the about-section image wrapper */
@media (max-width: 1024px) {
  .about-who-grid > div:first-child > div:first-child {
    height: 360px !important;
  }
  /* Unstick the floating badge overlay */
  .about-who-grid > div:first-child > div[style*="position: absolute"] {
    position: static !important;
    margin-top: 1.25rem;
    max-width: 100% !important;
    right: auto !important;
    bottom: auto !important;
  }
}

@media (max-width: 768px) {
  .about-who-grid > div:first-child > div:first-child {
    height: 300px !important;
  }
  /* Stack any inline flex CTA groups */
  div[style*="display: flex; gap: 1rem; align-items: center"] {
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }
}

@media (max-width: 576px) {
  .about-who-grid > div:first-child > div:first-child {
    height: 240px !important;
  }
  div[style*="display: flex; gap: 1rem; align-items: center"] > .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .about-who-grid > div:first-child > div:first-child {
    height: 200px !important;
  }
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .card-img-wrapper {
    height: 210px;
  }
  .card-body {
    padding: 1.25rem;
  }
  .card-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .card-img-wrapper {
    height: 185px;
  }
  .card-body {
    padding: 1.1rem;
  }
  .card-title {
    font-size: 1.05rem;
  }
  .card-footer-action {
    flex-direction: column;
    gap: 0.6rem;
  }
  .card-footer-action .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .card-img-wrapper {
    height: 160px;
  }
}

/* --------------------------------------------------------------------------
   9. CATEGORY CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .category-card {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .category-card {
    height: 270px;
    padding: 1.5rem;
  }
}

@media (max-width: 576px) {
  .category-card {
    height: 240px;
    padding: 1.25rem;
  }
  .category-card-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .category-card {
    height: 220px;
    padding: 1rem;
  }
  .category-card-title {
    font-size: 1.05rem;
  }
  .category-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 360px) {
  .category-card {
    height: 200px;
  }
}

/* --------------------------------------------------------------------------
   10. SPOTLIGHT BANNER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .spotlight-banner {
    padding: 2.25rem 1.75rem;
  }
}

@media (max-width: 768px) {
  .spotlight-banner {
    padding: 1.75rem 1.25rem;
    margin-bottom: 2rem;
  }
  .spotlight-features {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 576px) {
  .spotlight-banner {
    padding: 1.5rem 1rem;
    margin-bottom: 1.75rem;
  }
  .spotlight-features {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .spotlight-badge-kp {
    font-size: 0.725rem;
    padding: 0.3rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .spotlight-banner {
    padding: 1.25rem 0.875rem;
  }
  .spotlight-banner .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   11. FEATURE BOXES
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .feature-box {
    padding: 1.75rem;
  }
}

@media (max-width: 576px) {
  .feature-box {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .feature-box {
    padding: 1.25rem;
  }
  .feature-box-icon {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   12. PROCESS STEPS
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

@media (max-width: 576px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .process-number-badge {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   13. ROI CALCULATOR
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .calc-container-card {
    grid-template-columns: 1fr;
  }
  .calc-inputs-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 2rem;
  }
  .calc-results-panel {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .calc-inputs-panel,
  .calc-results-panel {
    padding: 1.5rem;
  }
  .calc-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .calc-inputs-panel,
  .calc-results-panel {
    padding: 1.25rem;
  }
  .calc-preset-btns {
    gap: 0.35rem;
    flex-wrap: wrap;
  }
  .calc-preset-btn {
    font-size: 0.775rem;
    padding: 0.4rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .calc-preset-btns {
    flex-direction: column;
  }
  .calc-preset-btn {
    text-align: center;
    width: 100%;
  }
  .calc-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   14. OVERSEAS CONCIERGE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .overseas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .overseas-concierge-card {
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 768px) {
  .overseas-concierge-card {
    padding: 1.75rem 1.25rem;
  }
  .overseas-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
  }
}

@media (max-width: 480px) {
  .overseas-concierge-card {
    padding: 1.5rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   15. COMPARISON TABLE
   -------------------------------------------------------------------------- */
.comparison-matrix-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .comparison-table {
    min-width: 600px;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .comparison-table {
    min-width: 520px;
  }
}

/* --------------------------------------------------------------------------
   16. FILTER PILLS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .filter-pills-container {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
  }
  .filter-pills-container::-webkit-scrollbar {
    display: none;
  }
  .filter-pill-tab {
    flex-shrink: 0;
    font-size: 0.825rem;
    padding: 0.45rem 0.875rem;
  }
}

@media (max-width: 480px) {
  .filter-pill-tab {
    font-size: 0.775rem;
    padding: 0.4rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   17. MODAL
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .modal-overlay {
    padding: 1rem;
    align-items: flex-end;
  }
  .modal-container {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .modal-body {
    padding: 1.5rem 1.25rem;
  }
  .modal-header {
    padding: 1rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
  .site-footer {
    padding-top: 4rem;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .footer-legal-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .site-footer {
    padding-top: 3rem;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .site-footer {
    padding-top: 2.5rem;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    gap: 1.5rem;
  }
  .footer-social-links {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .site-footer {
    padding-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   19. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .floating-whatsapp-tooltip {
    display: none;
  }
  .floating-whatsapp {
    bottom: 1.25rem;
    right: 1.25rem;
  }
  .floating-whatsapp-btn {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .floating-whatsapp {
    bottom: 1rem;
    right: 1rem;
  }
  .floating-whatsapp-btn {
    width: 48px;
    height: 48px;
    font-size: 1.35rem;
  }
}

/* --------------------------------------------------------------------------
   20. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .accordion-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .accordion-header {
    font-size: 0.95rem;
    padding: 1rem 1.25rem;
  }
  .accordion-body {
    padding: 0 1.25rem 1rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   21. BREADCRUMBS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .breadcrumb-list {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .breadcrumbs-bar {
    padding: 0.75rem 0;
  }
  .breadcrumb-list {
    font-size: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   22. MARKET PULSE TICKER
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .market-pulse-ticker {
    padding: 0.5rem 0;
  }
  .market-pulse-inner {
    flex-wrap: nowrap;
    gap: 1rem;
  }
  .ticker-items {
    gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  .market-pulse-inner {
    gap: 0.75rem;
  }
  .pulse-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    flex-shrink: 0;
  }
  .ticker-item {
    font-size: 0.775rem;
  }
}

/* --------------------------------------------------------------------------
   23. TYPOGRAPHY – FLUID SCALING
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
  h3 { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
}

@media (max-width: 576px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 6vw, 1.85rem); }
  h3 { font-size: clamp(1.1rem, 5vw, 1.4rem); }
  h4 { font-size: 1.05rem; }
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.45rem, 7.5vw, 2rem); }
  h2 { font-size: clamp(1.25rem, 6.5vw, 1.65rem); }
  h3 { font-size: clamp(1.05rem, 5.5vw, 1.3rem); }
}

@media (max-width: 360px) {
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.2rem; }
  h3 { font-size: 1.05rem; }
}

/* --------------------------------------------------------------------------
   24. BUTTON SYSTEM
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .btn-lg {
    padding: 0.85rem 1.35rem;
    font-size: 0.925rem;
  }
}

@media (max-width: 360px) {
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }
  .btn-lg {
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
  }
  .btn-sm {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
  }
}

/* --------------------------------------------------------------------------
   25. BRAND LOGO
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .brand-logo {
    font-size: 1.35rem;
    gap: 0.6rem;
  }
  .brand-logo-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }
  .brand-tagline {
    font-size: 0.6rem;
  }
}

@media (max-width: 360px) {
  .brand-logo {
    font-size: 1.2rem;
  }
  .brand-logo-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   26. MOBILE DRAWER
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .mobile-nav-drawer {
    width: 100%;
    max-width: 100%;
  }
  .mobile-nav-link {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   27. MISC: SECTION BADGE, LEGAL BOX
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .section-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
  }
  .legal-disclaimer-box {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   28. CONTAINER PADDING – PROGRESSIVE TIGHTENING
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --container-padding: 1.25rem; }
}

@media (max-width: 768px) {
  :root { --container-padding: 1rem; }
}

@media (max-width: 576px) {
  :root { --container-padding: 0.875rem; }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
    --header-height: 66px;
  }
}

@media (max-width: 360px) {
  :root { --container-padding: 0.625rem; }
}

/* --------------------------------------------------------------------------
   29. INLINE FLEX CTA ROW STACKING (generic selectors)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  div[style*="display: flex; gap: 1rem"] {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 480px) {
  div[style*="display: flex; gap: 1rem"] > .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  div[style*="position: absolute; bottom: -1.5rem"] {
    position: static !important;
    margin-top: 1rem;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   30. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
  .header-topbar,
  .site-header,
  .mobile-nav-drawer,
  .mobile-drawer-overlay,
  .floating-whatsapp,
  .modal-overlay,
  .market-pulse-ticker,
  .hero-nav-arrow,
  .hero-dots,
  .filter-pills-container {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  .section {
    padding: 1rem 0;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}