/* =================================================================
   MADHU-RAMA CORPORATION — Responsive CSS
   responsive.css
   Breakpoints: 1440px | 1280px | 1024px | 768px | 640px | 480px | 360px
   ================================================================= */

/* ----------------------------------------------------------------
   GLOBAL OVERFLOW PREVENTION
   ---------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100vw; }
img, svg   { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   SAFE AREA INSETS  (iPhone notch / Dynamic Island / Home Bar)
   ---------------------------------------------------------------- */
.main-nav {
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.main-footer {
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
}

/* ----------------------------------------------------------------
   XL DESKTOP  (min-width: 1440px)
   ---------------------------------------------------------------- */
@media (min-width: 1440px) {
  .container    { max-width: min(1360px, 94vw); }
  .hero-content { gap: var(--space-xl); }
  .hero-h1      { font-size: clamp(3.5rem, 4vw, 5rem); }
  .hero-illus   { max-width: min(580px, 46vw); }
  .section      { padding: var(--space-xl) var(--space-md); }
}

/* ----------------------------------------------------------------
   LARGE DESKTOP  (max-width: 1280px)
   ---------------------------------------------------------------- */
@media (max-width: 1280px) {
  .hero-content          { grid-template-columns: 58% 42%; }
  .hero-h1               { font-size: clamp(2.5rem, 4vw, 4rem); }
  .usp-grid              { grid-template-columns: repeat(4, 1fr); }
  .services-preview-grid { grid-template-columns: repeat(4, 1fr); }
}

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

  /* Typography */
  h1 { font-size: clamp(1.54rem, 4.5vw, 2.46rem); }
  h2 { font-size: clamp(1.23rem, 3.5vw, 1.85rem); }

  /* Layout */
  .container { padding: 0 clamp(1rem, 3vw, 1.5rem); }
  .section   { padding: clamp(3rem, 7vh, 5rem) clamp(1rem, 3vw, 2rem); }

  /* Navbar */
  .nav-inner { padding: 0 clamp(1rem, 3vw, 1.5rem); height: clamp(62px, 8vh, 76px); }
  .nav-link  { padding: 0.5rem 0.65rem; font-size: 0.85rem; }

  /* Hero */
  .hero-section  { padding-top: clamp(62px, 8vh, 76px); min-height: 100vh; min-height: 100dvh; }
  .hero-content  { grid-template-columns: 58% 42%; gap: var(--space-md); }
  .hero-h1       { font-size: clamp(1.69rem, 4.5vw, 2.46rem); }
  .hero-illus    { max-width: min(380px, 38vw); }

  /* Grids */
  .grid-3                { grid-template-columns: repeat(2, 1fr); }
  .grid-4                { grid-template-columns: repeat(2, 1fr); }
  .usp-grid              { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .services-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .why-stats-grid        { grid-template-columns: repeat(3, 1fr); }
  .values-grid           { grid-template-columns: repeat(2, 1fr); }
  .mission-vision-grid   { grid-template-columns: 1fr 1fr; }
  .who-we-are-grid       { grid-template-columns: 1fr; gap: var(--space-md); }
  .triforce-grid         { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .triforce-grid > :last-child { grid-column: 1 / -1; max-width: min(480px, 90vw); margin: 0 auto; }

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-md); }

  /* Footer */
  .footer-grid                { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer-col--brand          { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.5rem; }
  .footer-badges-col          { flex-direction: row; flex-wrap: wrap; }

  /* Cards */
  .pillar-card { padding: 2rem; }
  .services-divider-band h2 { font-size: 1.5rem; }

  /* Timeline — always left-aligned */
  .timeline::before { left: 20px; }
  .timeline-item    { flex-direction: row !important; text-align: left !important; }
  .timeline-item .timeline-content {
    padding-left: 3rem !important;
    padding-right: 0 !important;
    width: 100%;
  }
  .timeline-dot { left: 20px; }
}

/* ----------------------------------------------------------------
   TABLET PORTRAIT / MOBILE  (max-width: 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Typography */
  h1   { font-size: clamp(1.46rem, 7vw, 2rem); }
  h2   { font-size: clamp(1.15rem, 5.5vw, 1.54rem); }
  h3   { font-size: clamp(0.85rem, 4vw, 1rem); }
  body { font-size: 0.67rem; -webkit-text-size-adjust: 100%; }

  .container      { padding: 0 clamp(0.875rem, 2.5vw, 1.25rem); }
  .section        { padding: clamp(2.5rem, 6vh, 4.5rem) clamp(0.875rem, 2.5vw, 1.25rem); }
  .section-header { margin-bottom: var(--space-md); }

  /* Navbar */
  .nav-inner      { height: clamp(56px, 7.5vh, 70px); padding: 0 clamp(0.875rem, 2.5vw, 1.25rem); }
  .nav-hamburger  { display: flex !important; }
  .nav-links      { display: none !important; }
  .nav-cta        { display: none !important; }
  .nav-brand-name { font-size: 0.95rem; }
  .logo-img       { height: clamp(32px, 5vmin, 44px); }

  /* Hero */
  .hero-section {
    padding-top: clamp(56px, 7.5vh, 70px);
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: var(--space-lg);
  }
  .hero-content { grid-template-columns: 1fr; text-align: center; gap: var(--space-md); }
  .hero-left    { display: flex; flex-direction: column; align-items: center; order: 2; }
  .hero-right   { order: 1; }
  .hero-h1      { font-size: clamp(1.54rem, 8vw, 2.15rem); text-align: center; line-height: 1.2; }
  .hero-p       {
    text-align: center;
    font-size: 0.975rem;
    max-width: min(480px, 90vw);
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta-row {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: min(360px, 88vw);
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline { width: 100%; justify-content: center; }
  .hero-visual  { max-width: min(280px, 72vw); margin: 0 auto; }
  .hero-illus   { max-width: min(280px, 72vw); }

  /* Page heroes */
  .page-hero       { min-height: 100vh; min-height: 100dvh; padding-top: clamp(56px, 7.5vh, 70px); }
  .page-hero--sm   { min-height: 100vh; min-height: 100dvh; }
  .page-hero--sm   { min-height: 38vh; }
  .page-hero-inner { padding: var(--space-md) 0; }
  .page-hero h1    { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .page-hero-sub   { font-size: 1rem; max-width: 100%; }
  .hero-circle-1   { width: 28vmin; height: 28vmin; }
  .hero-circle-2   { width: 40vmin; height: 40vmin; }

  /* Section details */
  .quote-mark { font-size: 8rem; }
  .quote-text { font-size: 0.88rem; }
  .breadcrumb { font-size: 0.8rem; }

  /* Grids */
  .grid-2                { grid-template-columns: 1fr; }
  .grid-3                { grid-template-columns: 1fr; }
  .grid-4                { grid-template-columns: repeat(2, 1fr); }
  .usp-grid              { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .usp-item              { padding: 1.25rem var(--space-sm); }
  .services-preview-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .pillars-grid          { grid-template-columns: 1fr; gap: var(--space-sm); }
  .pillar-card           { padding: 2rem 1.75rem; border-radius: var(--radius-md); }
  .service-cards-grid    { grid-template-columns: 1fr; gap: var(--space-sm); }
  .mission-vision-grid   { grid-template-columns: 1fr; gap: var(--space-sm); }
  .values-grid           { grid-template-columns: 1fr; gap: var(--space-sm); }
  .why-stats-grid        { grid-template-columns: 1fr; gap: var(--space-sm); }
  .who-we-are-grid       { grid-template-columns: 1fr; gap: var(--space-sm); }
  .triforce-grid         { grid-template-columns: 1fr; gap: var(--space-sm); }
  .triforce-grid > :last-child { grid-column: auto; max-width: 100%; margin: 0; }

  /* Timeline */
  .timeline::before { left: 20px; }
  .timeline-item    { flex-direction: row !important; text-align: left !important; margin-bottom: var(--space-md); }
  .timeline-item .timeline-content {
    padding-left: 3.5rem !important;
    padding-right: 0 !important;
    width: 100%;
  }
  .timeline-dot { left: 20px; top: 4px; }

  /* Group lineage */
  .group-lineage-visual { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .group-connector      { flex-direction: row; gap: 0.5rem; padding: 0.25rem 0; }
  .group-connector-line { width: clamp(24px, 4vw, 40px); height: 2px; }

  /* Contact */
  .contact-layout    { grid-template-columns: 1fr; gap: var(--space-md); }
  .contact-form-wrap { padding: 2rem 1.75rem; }

  /* Footer */
  .footer-grid                { grid-template-columns: 1fr; gap: var(--space-md); }
  .footer-col--brand          { flex-direction: column; align-items: flex-start; }
  .footer-badges-col          { flex-direction: column; }
  .main-footer                { padding: var(--space-lg) 0 0; }
  .footer-bottom              { padding: var(--space-sm) 1.25rem; font-size: 0.78rem; text-align: center; }

  /* CTA */
  .cta-btn-row { flex-direction: column; align-items: center; gap: 0.75rem; }
  .cta-btn-row .btn-primary,
  .cta-btn-row .btn-outline,
  .cta-btn-row .btn-secondary { width: 100%; max-width: min(320px, 88vw); justify-content: center; }

  /* Synergy */
  .synergy-section          { padding: var(--space-xl) var(--space-sm); }
  .synergy-section::before,
  .synergy-section::after   { font-size: 7.7rem; }
  .synergy-quote            { font-size: clamp(0.85rem, 4vw, 1.08rem); }

  /* Misc */
  .services-divider-band       { padding: var(--space-md) var(--space-sm); }
  .services-divider-band h2    { font-size: clamp(1.2rem, 4vw, 1.6rem); }
  .story-prose p::first-letter { font-size: 2.7em; }
  .group-editorial-initial     { font-size: 3.08em; }
  .scroll-indicator            { display: none; }
}

/* ----------------------------------------------------------------
   LARGE MOBILE  (max-width: 640px)
   ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-visual, .hero-illus  { max-width: min(240px, 65vw); }
  .services-preview-grid     { grid-template-columns: 1fr; }
  .grid-4                    { grid-template-columns: 1fr; }
  .pillar-card               { padding: 1.75rem 1.5rem; }
  .values-grid               { grid-template-columns: 1fr; }
  .contact-form-wrap         { padding: 1.75rem 1.25rem; border-radius: var(--radius-md); }
  .service-card              { padding: 1.75rem 1.5rem; }
}

/* ----------------------------------------------------------------
   SMALL MOBILE  (max-width: 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

  h1   { font-size: clamp(1.27rem, 8.5vw, 1.69rem); }
  h2   { font-size: clamp(1rem, 6.5vw, 1.35rem); }
  body { font-size: 0.63rem; }

  .container { padding: 0 clamp(0.75rem, 2.5vw, 1rem); }
  .section   { padding: clamp(2rem, 5vh, 3.5rem) clamp(0.75rem, 2.5vw, 1rem); }

  /* Hero */
  .hero-h1         { font-size: clamp(1.35rem, 9vw, 1.69rem); }
  .hero-visual,
  .hero-illus      { max-width: min(200px, 58vw); }

  /* Buttons */
  .btn-primary,
  .btn-secondary,
  .btn-outline     { padding: 0.7rem 1.4rem; font-size: 0.875rem; min-height: max(44px, 5.5vmin); }

  /* Touch */
  .nav-hamburger   { min-width: max(44px, 5vmin); min-height: max(44px, 5vmin); display: flex; align-items: center; justify-content: center; }

  /* Cards */
  .card,
  .service-card,
  .pillar-card,
  .value-card,
  .contact-form-wrap { padding: 1.5rem; }

  /* Grids */
  .usp-grid              { grid-template-columns: 1fr; }
  .services-preview-grid { grid-template-columns: 1fr; }

  /* Stats */
  .why-stat-number { font-size: 1.92rem; }

  /* Footer */
  .footer-grid  { gap: var(--space-sm); }
  .footer-links { gap: 0.5rem; }

  /* Boxes */
  .mission-box, .vision-box { padding: 1.5rem; }
  .contact-card             { padding: 1.25rem; }

  /* Misc */
  .section-badge           { font-size: 0.68rem; }
  .synergy-quote           { font-size: 0.85rem; }
  .synergy-section::before,
  .synergy-section::after  { font-size: 6.15rem; }
  .page-hero h1            { font-size: clamp(1.23rem, 8vw, 1.69rem); }
  .page-hero-sub           { font-size: 0.73rem; }
  .breadcrumb              { font-size: 0.78rem; flex-wrap: wrap; }
  .nav-brand-name          { font-size: 0.88rem; }
  .nav-brand-sub           { font-size: 0.6rem; }
  .logo-img                { height: clamp(28px, 4.5vmin, 38px); }
}

/* ----------------------------------------------------------------
   EXTRA SMALL MOBILE  (max-width: 360px)
   ---------------------------------------------------------------- */
@media (max-width: 360px) {

  .container { padding: 0 clamp(0.75rem, 2vw, 0.875rem); }
  h1 { font-size: clamp(1.15rem, 8.5vw, 1.54rem); }
  h2 { font-size: clamp(0.92rem, 7vw, 1.15rem); }
  h3 { font-size: clamp(0.73rem, 5vw, 0.85rem); }

  .hero-h1    { font-size: 1.27rem; line-height: 1.25; }
  .hero-right { display: none; }   /* hide illustration on tiny screens */

  .section { padding: 2.5rem 0.875rem; }

  .btn-primary,
  .btn-secondary,
  .btn-outline { font-size: 0.85rem; padding: 0.65rem 1.25rem; min-height: max(40px, 5vmin); }

  .card, .service-card, .pillar-card, .value-card,
  .triforce-card, .contact-form-wrap,
  .mission-box, .vision-box { padding: 1.25rem; }

  .usp-grid       { grid-template-columns: 1fr; }
  .footer-bottom  { font-size: 0.72rem; }
  .section { padding: clamp(2rem, 5vh, 3rem) clamp(0.75rem, 2vw, 0.875rem); }

  .nav-inner       { height: clamp(50px, 6.5vh, 64px); padding: 0 clamp(0.75rem, 2vw, 0.875rem); }
  .logo-img        { height: clamp(24px, 4vmin, 34px); }
  .nav-brand-name  { font-size: 0.82rem; }
}

/* ----------------------------------------------------------------
   MOBILE NAVIGATION (enforced at 768px boundary)
   ---------------------------------------------------------------- */
@media (min-width: 769px) {
  .nav-hamburger    { display: none !important; }
  .nav-mobile-drawer { display: none !important; max-height: 0 !important; }
}

/* ----------------------------------------------------------------
   TOUCH DEVICES  (pointer: coarse)
   ---------------------------------------------------------------- */
@media (pointer: coarse) {
  .btn-primary,
  .btn-secondary,
  .btn-outline    { min-height: max(44px, 5.5vmin); }

  .nav-link       { padding: 0.65rem 0.85rem; }
  .footer-links a { padding: 0.35rem 0; }

  /* Prevent stuck hover states on touch */
  .card:hover, .service-card:hover, .pillar-card:hover,
  .triforce-card:hover, .value-card:hover,
  .contact-card:hover { transform: none; }

  .card-shine::after { display: none; }
}

/* ----------------------------------------------------------------
   REDUCED MOTION  (Accessibility)
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  h1, h2, .why-stat-number {
    animation: none !important;
    background-position: 0% 50% !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-illus, .animate-label, .animate-h1, .animate-p,
  .animate-cta, .animate-right, .animate-nav, .animate-section {
    animation: none !important;
    opacity:   1    !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------------
   MOBILE LANDSCAPE ORIENTATION
   ---------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding-top: clamp(48px, 8vh, 64px);
    padding-bottom: var(--space-md);
  }
  .page-hero       { min-height: auto; padding-top: clamp(48px, 8vh, 64px); }
  .page-hero-inner { padding: 3rem 0; }
  .hero-visual, .hero-illus { max-width: min(180px, 28vw); }
}

/* ----------------------------------------------------------------
   HIGH DPI / RETINA
   ---------------------------------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-img,
  .logo-img--footer {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ----------------------------------------------------------------
   PRINT
   ---------------------------------------------------------------- */
@media print {

  .main-nav, .scroll-indicator,
  .cta-banner, #footer-placeholder { display: none; }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  h1, h2 {
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    animation: none !important;
  }

  .card, .service-card { box-shadow: none; border: 1px solid #ddd; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #555; }
}