/* ============================================
   RESPONSIVE - Google Business Style
   Mobile-first, touch-optimized, premium feel
   ============================================ */

/* === MOBILE (base: 0-767px) === */

@media (max-width: 767px) {

  /* ─── Layout ─── */
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* ─── Typography — refined mobile scale ─── */
  h1 {
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: 1.375rem;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.125rem;
  }

  /* ─── Header / Navigation ─── */
  .header__inner {
    height: 56px;
    padding: 0 1rem;
  }

  .header__logo-icon {
    height: 28px;
    max-width: 160px;
  }

  /* Hide desktop nav actions on mobile */
  .nav__actions {
    display: none;
  }

  /* Hamburger: better touch target */
  .hamburger {
    width: 44px;
    height: 44px;
    display: flex;
  }

  /* ─── Mobile Menu ─── */
  .mobile-nav,
  .mobile-menu {
    top: 56px; /* match reduced header height */
    padding: 0.5rem 1.25rem 2rem;
  }

  .mobile-nav__link,
  .mobile-menu__link {
    padding: 14px 0;
    font-size: 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .mobile-menu__footer {
    padding-top: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border-light);
  }

  .mobile-menu__footer .lang-switcher {
    font-size: var(--text-small);
  }

  /* ─── Hero ─── */
  .hero {
    padding-top: 56px; /* match mobile header */
  }

  .hero__split {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 1.5rem 0 1rem;
    gap: 1rem;
  }

  .hero__visual {
    order: -1;
  }

  .hero__illustration {
    max-width: 180px;
    margin: 0 auto;
  }

  .hero__tagline {
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .hero__subtitle {
    font-size: 0.9375rem;
    max-width: 100%;
  }

  /* Hero actions stack full-width */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero__actions .btn--primary,
  .hero__actions .btn--outline {
    text-align: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 0.9375rem;
  }

  /* ─── Featured Cards ─── */
  .featured-cards {
    padding: 1.5rem 0;
  }

  .featured-cards__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .featured-card {
    padding: 1.25rem;
  }

  .featured-card:hover {
    transform: none; /* disable hover lift on touch */
  }

  /* ─── Story Blocks ─── */
  .story-block {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .story-block--reverse {
    direction: ltr;
  }

  .story-block__svg {
    max-width: 220px;
    margin: 0 auto;
    border-radius: var(--radius-md);
  }

  .story-block__content {
    max-width: 100%;
  }

  .story-block__quote {
    font-size: 1rem;
    padding-left: 0.875rem;
  }

  .story-block__link-card {
    padding: 0.875rem 1rem;
  }

  /* ─── Grid System ─── */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--expertise {
    grid-template-columns: 1fr;
  }

  /* ─── Metrics Section ─── */
  .metrics-section,
  .metrics {
    padding: 1.5rem 0;
  }

  .metrics-section .grid--4,
  .metrics__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .metrics-section .metric,
  .metrics .metric {
    padding: 1rem 0.75rem;
  }

  .metrics-section .metric::after,
  .metrics .metric::after {
    display: none;
  }

  .metric__number {
    font-size: 1.5rem;
  }

  .metric__label {
    font-size: 0.6875rem;
  }

  /* ─── AI Section ─── */
  .ai-section__grid,
  .ai-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .ai-section__quote {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
  }

  .ai-section__quote blockquote {
    font-size: 1rem;
  }

  /* ─── Sectors ─── */
  .sectors-section .grid--2,
  .sectors__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Sector cards: reduce excessive height */
  .card--sector {
    min-height: 280px;
    border-radius: var(--radius-md);
  }

  .card--sector:hover {
    transform: none;
  }

  .card--sector__content {
    padding: 1.25rem;
  }

  /* Sector card as list (non-image variant) */
  .card--sector .card__list li {
    padding: 0.5rem 0;
  }

  /* ─── Insights ─── */
  .insights-section .section-header,
  .section-header--with-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .insights-section__grid,
  .insights-preview__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

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

  /* Featured insight card stacks on mobile */
  .card--insight-featured {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: 1rem;
  }

  .card--featured .card__title {
    font-size: 1.25rem;
  }

  .card--featured .card__excerpt {
    font-size: 0.9375rem;
  }

  /* ─── Section Headers ─── */
  .section-header--lined {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .section-header--lined::before,
  .section-header--lined::after {
    width: 48px;
    flex: none;
  }

  .section-header--lined h2 {
    white-space: normal;
    text-align: center;
  }

  .section-header {
    margin-bottom: 1.25rem;
  }

  /* ─── Trust Section ─── */
  .trust__badges {
    gap: 0.375rem;
  }

  .trust__badge {
    padding: 6px 12px;
    font-size: 0.6875rem;
  }

  .trust__stats {
    flex-direction: row; /* keep horizontal for compactness */
    flex-wrap: wrap;
    gap: 0;
  }

  .trust__stat {
    flex: 1 1 33.33%;
    min-width: 0;
    padding: 1rem 0.5rem;
    text-align: center;
  }

  .trust__stat:not(:last-child)::after {
    /* vertical dividers between stats */
    top: 20%;
    bottom: auto;
    left: auto;
    right: 0;
    width: 1px;
    height: 60%;
  }

  .trust__stat-number {
    font-size: 1.375rem;
  }

  .trust__stat-label {
    font-size: 0.625rem;
    line-height: 1.3;
  }

  .trust__text,
  .trust-section__text {
    font-size: 0.9375rem;
  }

  /* ─── CTA / Contact Section ─── */
  .cta-section__grid,
  .cta-section__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cta-section__info {
    max-width: 100%;
  }

  .cta-section__form {
    padding: 1.25rem;
    border-radius: var(--radius-md);
  }

  .contact-grid {
    gap: 1.5rem;
  }

  /* Better form inputs on mobile */
  .form-group input,
  .form-group textarea,
  .form-group select,
  .form-input,
  .form-select,
  .form-textarea {
    padding: 14px 16px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .form-textarea {
    min-height: 100px;
  }

  .btn--cta {
    width: 100%;
    padding: 14px 24px;
    font-size: 0.9375rem;
  }

  /* ─── Newsletter ─── */
  .newsletter-section {
    padding: 1.5rem 0;
  }

  .newsletter-section__inner,
  .footer__newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .newsletter-section__form,
  .footer__newsletter-form {
    max-width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }

  .newsletter-section__form input,
  .footer__newsletter-input {
    border-radius: var(--radius-full);
    font-size: 16px; /* prevent iOS zoom */
    padding: 14px 16px;
  }

  .newsletter-section__form button,
  .footer__newsletter-btn {
    border-radius: var(--radius-full);
    padding: 14px 24px;
    text-align: center;
  }

  /* ─── Footer ─── */
  .footer {
    padding-top: 2rem;
    padding-bottom: 1.5rem;
  }

  .footer__newsletter {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer__brand {
    margin-bottom: 0.5rem;
  }

  .footer__logo-icon {
    height: 24px;
    max-width: 140px;
  }

  .footer__tagline {
    font-size: 0.8125rem;
    max-width: 100%;
  }

  .footer__heading {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }

  .footer__links a {
    font-size: 0.8125rem;
    padding: 2px 0;
  }

  .footer__links li {
    margin-bottom: 6px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
  }

  .footer__bottom-links {
    gap: 0.75rem;
  }

  /* ─── Page Hero (inner pages) ─── */
  .page-hero {
    min-height: 30vh;
    padding-bottom: 2rem;
  }

  .page-hero--short {
    min-height: 22vh;
  }

  .page-hero__title {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .page-hero__desc {
    font-size: 0.9375rem;
    max-width: 100%;
  }

  /* ─── Page Content ─── */
  .page-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .page-content h3 {
    margin-top: 1.5rem;
  }

  /* ─── Expertise Page ─── */
  .expertise-services {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .expertise-service-card {
    padding: 1.25rem;
  }

  .ai-callout {
    padding: 1.25rem;
    margin: 1.5rem 0;
  }

  .related-expertise .card--expertise {
    min-width: 260px;
  }

  /* ─── About Page ─── */
  .about-values {
    gap: 0.75rem;
  }

  .about-value {
    padding: 1.25rem;
  }

  /* ─── Buttons — touch-friendly ─── */
  .btn {
    padding: 12px 20px;
    font-size: var(--text-small);
    min-height: 44px; /* minimum touch target */
  }

  .btn--sm {
    padding: 10px 16px;
    min-height: 40px;
  }

  .btn--small {
    padding: 8px 14px;
    min-height: 36px;
  }

  /* ─── Cards — compact on mobile ─── */
  .card__body {
    padding: 1rem;
  }

  .card--expertise {
    padding: 1.25rem;
  }

  .card--ai {
    padding: 1.25rem;
  }

  /* Disable card hover transforms on touch */
  .card:hover,
  .card--pricing:hover,
  .featured-card:hover,
  .card--expertise:hover {
    transform: none;
  }

  /* ─── Insights Filter (sticky bar) ─── */
  .insights-filter {
    top: 56px; /* match mobile header */
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
  }

  .insights-filter__btn {
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  /* ─── Lead Modal — fullscreen on mobile ─── */
  .lead-modal__content {
    width: 95%;
    max-width: none;
    padding: 1.5rem;
    border-radius: var(--radius-md);
  }

  .lead-modal__input {
    padding: 14px 16px;
    font-size: 16px; /* prevent iOS zoom */
  }

  /* ─── Legal pages ─── */
  .legal-content h2 {
    margin-top: 1.5rem;
    font-size: 1.25rem;
  }

  .legal-content p {
    font-size: 0.9375rem;
  }

  .legal-content ul {
    padding-left: 1.25rem;
  }

  /* ─── Section Label ─── */
  .section-label {
    font-size: 0.75rem;
  }
}

/* === SMALL MOBILE (0-374px) — extra tight === */

@media (max-width: 374px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  h1,
  .hero__tagline,
  .page-hero__title {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  .header__logo-icon {
    height: 24px;
    max-width: 130px;
  }

  .trust__stat {
    padding: 0.75rem 0.25rem;
  }

  .trust__stat-number {
    font-size: 1.125rem;
  }

  .metric__number {
    font-size: 1.25rem;
  }

  .card--sector {
    min-height: 240px;
  }
}

/* === TABLET (768px - 1023px) === */

@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet header adjustments */
  .header__logo-icon {
    height: 36px;
    max-width: 200px;
  }

  /* Tablet page hero */
  .page-hero {
    min-height: 35vh;
  }

  /* Sector cards: 2 columns, reduced height */
  .card--sector {
    min-height: 320px;
  }

  /* Footer: 2x2 grid on tablet */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
  }
}

/* === DESKTOP (1024px+) === */
/* Section padding handled in layout.css with premium 80px spacing */

/* === WIDE (1440px+) === */

@media (min-width: 1440px) {
  .hero__tagline {
    font-size: 4rem;
  }
}