/* ═══════════════════════════════════════════════════
   MOBILE-FIX.CSS
   Upload to httpdocs and link in ALL HTML pages
   Fixes: logo size, header, footer logo, mobile layout
═══════════════════════════════════════════════════ */

/* ── LOGO — Desktop: reduce margin ──────────────── */
.logo-image {
  width: 160px;
  height: auto;
  margin-left: 0;
}

.footer-logo-image {
  width: 140px;
  height: auto;
  filter: brightness(0) invert(1);
}

/* ── Footer brand logo fix ───────────────────────── */
.footer-brand__logo .footer-logo-image {
  max-width: 140px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ── Footer registration text ────────────────────── */
.footer-reg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

.footer-reg span {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════════════
   MOBILE BREAKPOINT — max-width: 760px
══════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* ── Header ──────────────────────────────────── */
  .nav-bar {
    min-height: 60px;
    padding: 0 12px;
    gap: 12px;
  }

  .logo-image {
    width: 110px;
    height: auto;
    margin-left: 0;
  }

  .footer-logo-image {
    width: 110px;
    height: auto;
  }

  .page-shell {
    padding-top: 60px;
  }

  /* ── Hero grid background — hide on mobile ───── */
  .home-hero {
    background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  }

  .home-hero::before {
    display: none;
  }

  /* ── Hero section padding ────────────────────── */
  .hero-section {
    padding: 32px 0 24px;
  }

  /* ── Hero h1 size ────────────────────────────── */
  .hero-copy-column h1 {
    font-size: clamp(28px, 8vw, 42px);
  }

  .hero-copy {
    font-size: 16px;
    margin-bottom: 16px;
  }

  /* ── Proof row — stack items properly ────────── */
  .h-proof-row {
    flex-direction: column;
    width: 100%;
    padding: 16px;
    gap: 12px;
    border-radius: 10px;
  }

  .h-proof-item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0;
  }

  .h-proof-item strong {
    font-size: 24px;
    min-width: 70px;
  }

  .h-proof-item span {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
  }

  .h-proof-divider {
    width: 100%;
    height: 1px;
  }

  /* ── Button row ──────────────────────────────── */
  .button-row {
    flex-direction: column;
    gap: 10px;
  }

  .button-row .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Hero illustration hide on mobile ────────── */
  .hero-illustration-card {
    min-height: 220px;
    border-radius: 12px;
  }

  /* ── Section headings ────────────────────────── */
  .section-heading h2 {
    font-size: clamp(22px, 6vw, 36px);
  }

  /* ── Impact grid — 2 columns ─────────────────── */
  .h-impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .h-impact-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 16px;
  }

  .h-impact-item strong {
    font-size: 32px;
  }

  /* ── Services grid — 1 column ────────────────── */
  .wwd-grid,
  .services-home-grid {
    grid-template-columns: 1fr;
  }

  /* ── Process grid — 1 column ─────────────────── */
  .h-process-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .h-process-grid::before {
    display: none;
  }

  /* ── Assignment cards — 1 column ─────────────── */
  .h-assign-grid,
  .assignments-home-grid {
    grid-template-columns: 1fr;
  }

  /* ── Sectors grid — 1 column ─────────────────── */
  .h-sectors-grid,
  .sectors-home-grid {
    grid-template-columns: 1fr;
  }

  /* ── Commissioned strip ──────────────────────── */
  .commissioned-inner {
    flex-direction: column;
    gap: 8px;
  }

  .commissioned-scroll {
    flex-direction: column;
    gap: 6px;
  }

  .c-sep {
    display: none;
  }

  /* ── CTA strip ───────────────────────────────── */
  .h-cta-strip {
    padding: 48px 0;
  }

  .h-cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 28px;
  }

  .h-cta-copy h2 {
    font-size: clamp(20px, 6vw, 28px);
  }

  .h-cta-actions {
    justify-content: center;
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .h-cta-actions .button,
  .h-cta-actions .button-light {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Footer grid ─────────────────────────────── */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-cta__inner h2 {
    font-size: clamp(20px, 6vw, 32px);
  }

  /* ── Page hero split — stack ─────────────────── */
  .approach-hero-layout,
  .service-hero-layout,
  .team-hero-layout,
  .project-intro-grid {
    grid-template-columns: 1fr;
  }

  .split-hero-media,
  .project-collage {
    min-height: 220px;
    display: none; /* Hide hero images on mobile to clean up layout */
  }

  /* ── About page ──────────────────────────────── */
  .ab-glance-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ab-glance-item {
    border-right: none;
    padding: 0;
  }

  .ab-diff-grid,
  .ab-values-grid,
  .ab-clients-grid {
    grid-template-columns: 1fr;
  }

  .ab-reg-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ── Services page ───────────────────────────── */
  .sv-service-row,
  .sv-service-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }

  .sv-addon-grid,
  .sv-cap-grid {
    grid-template-columns: 1fr;
  }

  .sv-quicknav-strip {
    top: 0;
  }

  /* ── Projects page ───────────────────────────── */
  .pj-hero-stats {
    gap: 16px;
    flex-wrap: wrap;
  }

  .pj-stat strong {
    font-size: 22px;
  }

  .pj-filter-bar {
    top: 0;
    position: relative;
  }

  .pj-survey-grid {
    grid-template-columns: 1fr;
  }

  .pj-iec-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

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

  /* ── Thematic page ───────────────────────────── */
  .tm-sector-nav {
    top: 0;
    position: relative;
  }

  .tm-sector-row,
  .tm-sector-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
  }

  .tm-sector-visual {
    position: static;
    min-height: 220px;
    display: none; /* Hide on mobile for cleaner layout */
  }

  /* ── Team page ───────────────────────────────── */
  .tm-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .tm-stat-item {
    border-right: none;
  }

  .tm-stat-item strong {
    font-size: 28px;
  }

  .tm-cap-grid {
    grid-template-columns: 1fr;
  }

  /* ── Blog page ───────────────────────────────── */
  .bl-grid {
    grid-template-columns: 1fr;
  }

  .bl-subscribe-card {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 24px;
  }

  .bl-email-form {
    flex-direction: column;
  }

  .bl-email-form input {
    min-width: 0;
    width: 100%;
  }

  .bl-email-form .button {
    width: 100%;
    justify-content: center;
  }

  /* ── Contact page ────────────────────────────── */
  .ct-trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ct-trust-item {
    border-right: none;
  }

  .ct-why-grid {
    grid-template-columns: 1fr;
  }

  /* ── Approach page ───────────────────────────── */
  .ap-framework-grid,
  .ap-qa-grid {
    grid-template-columns: 1fr;
  }

  /* ── Mission vision ──────────────────────────── */
  .mission-vision-display {
    grid-template-columns: 1fr;
  }

  .mission-vision-ribbon {
    display: none;
  }

  /* ── Story grid ──────────────────────────────── */
  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-collage {
    display: none; /* Hide collage on mobile */
  }

  /* ── General spacing ─────────────────────────── */
  .section-block {
    padding: 40px 0;
  }

  .page-hero {
    padding: 24px 0 32px;
  }

}

/* ══════════════════════════════════════════════════
   TABLET BREAKPOINT — 760px to 1120px
══════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1120px) {

  .logo-image {
    width: 130px;
    margin-left: 0;
  }

  .h-impact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .h-impact-item {
    border-right: none;
  }

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

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

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

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

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

  .sv-service-row,
  .sv-service-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 32px;
  }

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

  .tm-sector-row,
  .tm-sector-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .tm-sector-visual {
    position: static;
    min-height: 300px;
  }

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

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

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

}