/* ============================================================
   TECHSPARQ MOBILE STYLESHEET
   Breakpoints: 768px (tablet), 480px (phone)
   Mobile-first overrides for all pages
   ============================================================ */

/* ── BACK-TO-TOP BUTTON (all viewports) ────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, color 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  color: var(--red);
  border-color: var(--red);
}

/* ── NAV OVERLAY: scrollable, close button below fixed nav bar ── */
.nav-overlay {
  overflow-y: auto !important;
  justify-content: flex-start !important;
  padding-top: 80px !important;
  padding-bottom: 40px !important;
}
.nav-overlay-close {
  display: none !important;
}
.nav-overlay-links li a {
  font-size: 28px !important;
  padding: 14px 0 !important;
}

/* ── NAV BREAKPOINT (hamburger kicks in before links wrap) ── */
@media (max-width: 1024px) {
  nav {
    padding: 0 24px !important;
    height: 56px !important;
  }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-logo img { height: 28px !important; }
  .nav-hamburger { display: flex !important; }
}

/* ── BLOG NAV: desktop shows strip, mobile shows cards ── */
.blog-nav-desktop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.blog-nav-mobile { display: none; }

/* ── MOBILE SELECT DROPDOWNS (filter bars + nav strips) ── */
.filter-select,
.nav-strip-select { display: none; }

@media (max-width: 768px) {
  /* Show native <select>, hide desktop pills */
  .filter-select,
  .nav-strip-select {
    display: block !important;
    width: 100%;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 14px 16px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6B6B' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
  }
  .filter-select {
    margin: 0 24px;
    width: calc(100% - 48px);
    box-sizing: border-box;
    padding: 14px 16px;
  }
  /* Dark variant for filter bars on dark backgrounds (e.g. testimonials) */
  .filter-select--dark {
    background: var(--ink) !important;
    color: var(--white) !important;
    border-color: rgba(255,255,255,0.12) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    position: relative;
    z-index: 2;
    margin: 0 !important;
    width: 100% !important;
    padding: 16px 28px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
  }
  .nav-strip-select {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .filter-bar { display: none !important; }
  .nav-strip-areas { display: none !important; }
  .nav-strip-label { margin-bottom: 10px; }
  .nav-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px 24px !important;
    gap: 0 !important;
  }
}

/* ── GLOBAL ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* GLOBAL BREATHING ROOM ─────────────────────────────────
     Loosen body copy, paragraphs, and headings site-wide
     so the text-heavy pages feel lighter on mobile. */
  body { font-size: 15px; line-height: 1.85; }
  p { margin-bottom: 1.2em; }
  h1 { margin-bottom: 0.6em; }
  h2 { margin-bottom: 0.5em; }
  h3, h4 { margin-bottom: 0.4em; }

  /* FOOTER */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 72px 28px 56px;
  }
  .footer-bottom {
    padding: 28px 28px;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .footer-logo img { height: 28px; }
  .footer-desc { line-height: 1.8; margin-bottom: 0; }

/* ── HOMEPAGE ─────────────────────────────────────────────── */

  /* Hero */
  .hero { padding: 80px 28px 72px; }
  .hero-title { font-size: 42px; }
  .hero-phase-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-phase { padding: 36px 28px; }

  /* Ticker */
  .ticker { padding: 0 28px; }

  /* Media / Clients */
  .media-bar, .clients-bar { padding: 40px 28px; gap: 18px; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; }
  .media-bar-label, .clients-label { border-right: none; padding-right: 0; }

  /* Who We Are */
  .who-grid { grid-template-columns: 1fr; gap: 0; }
  .who-left, .who-right { padding: 64px 28px; }

  /* Problem */
  .problem-grid { grid-template-columns: 1fr; }
  .problem-left, .problem-right { padding: 64px 28px; }
  .problem-stat-grid { grid-template-columns: 1fr 1fr; }

  /* Cairo homepage section */
  .cairo-grid { grid-template-columns: 1fr; }
  .cairo-left, .cairo-right { padding: 64px 28px; }
  .cairo-stat-row { flex-wrap: wrap; gap: 28px; }
  .cairo-stat-item { width: 45%; }

  /* Services */
  .services { padding: 80px 28px; }
  .services-header { flex-direction: column; gap: 20px; align-items: flex-start; }
  .service-row { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 32px 0; }
  .svc-desc { display: none; }

  /* KPI strip */
  .kpi-strip { padding: 72px 28px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 44px; }

  /* Latest Thinking */
  .thinking-grid { grid-template-columns: 1fr; }
  .thinking-featured, .thinking-card { padding: 44px 28px; }

  /* Testimonial bar */
  .testimonial-bar { padding: 72px 28px; }
  .testimonial-bar-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Case Studies (homepage section) */
  .cases-header { flex-direction: column; gap: 20px; align-items: flex-start; padding: 0 28px 56px; }
  .case-featured { grid-template-columns: 1fr; }
  .case-featured-content, .case-featured-aside { padding: 44px 28px; }
  .case-secondary-grid { grid-template-columns: 1fr; }
  .case-tertiary-grid { grid-template-columns: 1fr; }
  .case-card { padding: 44px 28px; }
  .metrics-row { flex-direction: column; gap: 28px; }

  /* Testimonials grid */
  .testimonials-grid { grid-template-columns: 1fr; padding: 0 28px; }

  /* Industries */
  .industries { padding: 80px 28px; }
  .industries-grid { grid-template-columns: 1fr 1fr; }

  /* Leadership */
  .leadership { padding: 80px 28px; }
  .leadership-grid { grid-template-columns: 1fr; }

  /* Forbes */
  .forbes { padding: 80px 28px; }
  .forbes-grid { grid-template-columns: 1fr; }

  /* Engagement */
  .engagement { padding: 80px 28px; }
  .engagement-grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-block { padding: 80px 28px; flex-direction: column; gap: 44px; }

/* ── CAIRO PAGE ─────────────────────────────────────────────── */

  .cairo-hero { padding: 80px 28px 72px; }
  .cairo-hero::before { display: none; }
  .cairo-stats { flex-direction: column; gap: 32px; }
  .cairo-stat { padding-left: 0; margin-left: 0; border-left: none; padding-right: 0; margin-right: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 32px; }
  .cairo-stat:last-child { border-bottom: none; }

  .not-arbitrage { padding: 56px 28px; }
  .not-arbitrage-inner { grid-template-columns: 1fr; gap: 24px; }
  .not-arbitrage-text { font-size: 18px; line-height: 1.8; }

  .cairo-section { grid-template-columns: 1fr; }
  .cairo-section-left { padding: 44px 28px 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .cairo-section-num { font-size: 56px; }
  .cairo-section-right { padding: 44px 28px 64px; }
  .cairo-section-title { font-size: 22px; }
  .stat-pills { flex-direction: column; gap: 12px; }
  .stat-pill { display: flex; gap: 12px; align-items: center; }
  .stat-pill-val { font-size: 20px; }

  .capabilities { padding: 72px 28px; }
  .capabilities-header { flex-direction: column; gap: 28px; }
  .capabilities-title { font-size: 28px; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-col { padding: 40px 28px; }

  .ecosystem { grid-template-columns: 1fr; padding: 72px 28px; gap: 52px; }
  .ecosystem-title { font-size: 24px; }

  .models { padding: 72px 28px; }
  .models-header { flex-direction: column; gap: 24px; }
  .models-title { font-size: 26px; }
  .models-grid { grid-template-columns: 1fr; }
  .model-card { padding: 40px 28px; }

  .cairo-proof { padding: 72px 28px; }
  .proof-grid { grid-template-columns: 1fr; gap: 1px; }
  .proof-card { padding: 44px 28px; }
  .proof-card-stat { font-size: 22px; }

  .cairo-cta { grid-template-columns: 1fr; gap: 44px; padding: 72px 28px; }
  .cairo-cta-title { font-size: 28px; }
  .cairo-cta-btn { width: 100%; text-align: center; }

/* ── CASE STUDIES PAGE ─────────────────────────────────────── */

  .case-section { grid-template-columns: 1fr; }
  .case-header { flex-direction: column; gap: 12px; padding: 28px 28px; align-items: flex-start; }
  .case-project-tag { font-size: 9px; }
  .case-image .img-slot { height: 240px; }
  .case-tags { padding: 24px 28px; gap: 8px; }
  .case-body { grid-template-columns: 1fr; }
  .case-left { padding: 44px 28px; border-right: none; border-bottom: 1px solid var(--rule); }
  .case-right { padding: 44px 28px; }
  .case-client-line { font-size: 11px; }
  .story-body { font-size: 15px; line-height: 1.85; }
  .story-title { margin-bottom: 20px; }
  .case-quote { padding: 36px 28px; }
  .case-quote-text { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }

/* ── TESTIMONIALS PAGE ─────────────────────────────────────── */

  .page-hero-inner { grid-template-columns: 1fr; gap: 44px; padding: 80px 28px 72px; }
  .hero-headline { font-size: 36px; }
  .hero-deck { font-size: 15px; line-height: 1.8; }
  .hero-stat-row { flex-wrap: wrap; gap: 28px; }
  .hero-stat-row > div { width: 45%; }
  .filter-bar { padding: 20px 28px; gap: 14px; flex-wrap: wrap; }
  .main { padding: 72px 28px; }
  .quote-section { padding: 0; }
  .quote-featured { grid-template-columns: 1fr; gap: 32px; padding: 44px 28px; margin: 0 0 1px; }
  .quote-featured-text { font-size: 18px; line-height: 1.7; }
  .quote-pull { padding: 36px 28px; }
  .quote-pull-text { font-size: 16px; line-height: 1.7; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-grid-2 { grid-template-columns: 1fr; }
  .quote-card { padding: 40px 28px; }
  .page-cta { grid-template-columns: 1fr; gap: 44px; padding: 72px 28px; }
  .cta-headline { font-size: 28px; }

/* ── SERVICES HUB PAGE ─────────────────────────────────────── */

  .hub-hero { padding: 80px 28px 72px; }
  .hub-hero-title { font-size: 40px; }
  .hub-hero-rule { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hub-hero-divider { display: none; }
  .philosophy { grid-template-columns: 1fr; gap: 24px; padding: 64px 28px; }
  .philosophy-text { font-size: 18px; line-height: 1.8; }
  .area-row { grid-template-columns: 1fr; direction: ltr !important; }
  .area-visual { min-height: 260px; order: -1; }
  .area-content { padding: 64px 28px; }
  .area-title { font-size: 26px; }
  .area-content p { line-height: 1.85; }
  .hub-cta { grid-template-columns: 1fr; gap: 44px; padding: 80px 28px; }
  .hub-cta-title { font-size: 30px; }
  .hub-cta-btn { width: 100%; text-align: center; }
  .hub-cta-portrait { margin-bottom: 28px; }
  .hub-cta-portrait img { width: 60px; height: 60px; }

/* ── SERVICE SUBPAGES ─────────────────────────────────────── */

  .svc-hero { padding: 80px 28px 72px; min-height: auto; }
  .svc-h1 { font-size: 36px; }
  .svc-hero-deck { line-height: 1.8; }
  .svc-stats { flex-direction: column; gap: 32px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 44px; }
  .svc-stat { padding-right: 0; margin-right: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 28px; }
  .svc-stat:last-child { border-bottom: none; }

  .nav-strip { padding: 24px 28px; flex-direction: column; gap: 14px; align-items: flex-start; }
  .nav-strip-areas { gap: 14px; }
  .nav-strip-areas a { font-size: 10px; }

  .svc-section { grid-template-columns: 1fr; }
  .svc-section-left { padding: 44px 28px 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .svc-section-num { font-size: 56px; }
  .svc-section-right { padding: 44px 28px 64px; }
  .svc-section-title { font-size: 22px; }
  .svc-section-right p { line-height: 1.85; }

  .deliverables { grid-template-columns: 1fr; gap: 44px; padding: 72px 28px; }
  .deliverables-list { grid-template-columns: 1fr; }

  .svc-cta { grid-template-columns: 1fr; gap: 44px; padding: 72px 28px; }
  .svc-cta-title { font-size: 28px; }
  .svc-cta-btn { width: 100%; text-align: center; }

/* ── ABOUT PAGE ─────────────────────────────────────────── */

  .about-hero { padding: 100px 28px 72px; }
  .about-hero-bg { object-position: 30% center !important; }
  .about-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .about-hero-deck { font-size: 16px; line-height: 1.85; margin-bottom: 44px; }

  .about-stats { flex-direction: column; gap: 0; padding-top: 44px; }
  .about-stat {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  .about-stat:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

  .origin { grid-template-columns: 1fr; gap: 44px; padding: 80px 28px; }
  .origin-headline { font-size: clamp(24px, 7vw, 32px); }
  .origin p { line-height: 1.85; }

  .conviction { padding: 72px 28px; }
  .conviction-quote { font-size: clamp(18px, 5vw, 24px); line-height: 1.6; }

  .leadership { padding: 80px 28px; }
  .leadership-header { margin-bottom: 52px; }
  .leadership-grid { grid-template-columns: 1fr; }
  .leader-photo { height: 300px; }

  .ebooks-strip { padding: 80px 28px; }
  .ebooks-header { flex-direction: column; gap: 20px; align-items: flex-start; margin-bottom: 44px; }
  .ebooks-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .ebook-card { padding: 40px 28px; }
  .ebook-name { font-size: 17px; }

  .media-bar { padding: 52px 28px; }

  .social-section { padding: 64px 28px; }
  .social-links { gap: 16px; }

  .about-cta { grid-template-columns: 1fr; gap: 44px; padding: 80px 28px; }
  .about-cta-title { font-size: 28px; }
  .about-cta-btn { width: 100%; text-align: center; display: block; }

/* ── INDUSTRIES HUB PAGE ─────────────────────────────── */

/* ── THINKING / BLOG PAGE ─────────────────────────────── */

  .thinking-hero { padding: 80px 28px 56px; }
  .filter-bar { padding: 0 24px; }
  .featured { display: block; }
  .featured-content-top { padding: 36px 28px 20px; border-right: none; }
  .featured-aside { padding: 0; }
  .featured-content-bottom { padding: 20px 28px 36px; border-right: none; }
  .featured-content-bottom p { line-height: 1.85; }
  .articles-section { padding: 56px 28px; }
  .articles-grid { grid-template-columns: 1fr; gap: 2px; }
  .article-card { padding: 36px 28px; }
  .article-card p { line-height: 1.8; }
  .ebooks-section { padding: 64px 28px; }
  .ebooks-header { flex-direction: column; gap: 20px; align-items: flex-start; }
  .ebooks-grid { grid-template-columns: 1fr; }
  .ebook-card { padding: 36px 28px; }
  .pagination { padding: 36px 28px 56px; }

/* ── INDUSTRIES HUB PAGE ─────────────────────────────── */

  .ind-hero { padding: 80px 28px 64px; }
  .ind-hero h1 { font-size: clamp(32px, 9vw, 48px); }
  .ind-hero-deck { font-size: 16px; line-height: 1.8; }

  .ind-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ind-card { grid-template-columns: 1fr; }
  .ind-card:nth-child(odd) { border-right: none; }
  .ind-card-visual { min-height: 240px; }
  .ind-card-content { padding: 40px 28px 48px; justify-content: flex-start; }
  .ind-card-name { font-size: 24px; }
  .ind-card-desc { font-size: 15px; line-height: 1.85; }

  .ind-cta { grid-template-columns: 1fr; gap: 40px; padding: 80px 28px; }
  .ind-cta-title { font-size: 28px; }
  .ind-cta-btn { width: 100%; text-align: center; display: block; }

/* ── SPARQ+ CALLOUT (brand-experience-design) ───────── */
  .sparq-plus-callout { padding: 64px 28px !important; grid-template-columns: 1fr !important; gap: 28px !important; }
  .sparq-plus-callout a { width: 100%; text-align: center; }

/* ── SPARQ+ PAGE VIDEO ELEMENTS ───────────────────────── */
  .hub-hero-bg video { opacity: 0.3; }
  .area-visual.has-video { min-height: 260px !important; }
  .area-visual.has-yt { min-height: 260px !important; }
  .area-visual .yt-play { width: 64px; height: 64px; }
  .area-visual .yt-play::before { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
  .work-in-motion { padding: 80px 0 72px; }
  .wim-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 44px; padding: 0 28px; }
  .wim-title { font-size: 32px; }
  .wim-meta { max-width: 100%; line-height: 1.8; }
  .wim-rail { padding: 0 28px; gap: 14px; scroll-padding: 0 28px; }
  .wim-tile { flex-basis: 88vw; }
  .wim-tile .yt-play { width: 58px; height: 58px; }
  .wim-rail-hint { padding: 24px 28px 0; }
  .multilingual { padding: 80px 28px; }
  .multi-wrap { grid-template-columns: 1fr; gap: 44px; }
  .multi-intro { padding-right: 0; }
  .multi-title { font-size: 30px; }
  .multi-intro p { line-height: 1.85; }
  .multi-videos { grid-template-columns: 1fr; }

/* ── BLOG ARTICLE PAGES ──────────────────────────────── */

  /* Article hero: stack to single column */
  .article-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-content {
    padding: 88px 28px 44px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .hero-headline { font-size: clamp(28px, 8vw, 42px) !important; }
  .hero-deck { font-size: 15px !important; line-height: 1.85 !important; max-width: 100% !important; }
  .hero-meta-panel {
    padding: 36px 28px 44px !important;
  }
  .hero-author { margin-bottom: 28px; }
  .hero-context { padding: 24px 28px; }
  .hero-eyebrow { flex-wrap: wrap; gap: 10px; }

  /* Article body: stack layout, sidebar below */
  .article-layout {
    grid-template-columns: 1fr !important;
    gap: 56px !important;
    padding: 56px 28px !important;
  }
  .article-body p { font-size: 16px; line-height: 1.9; margin-bottom: 1.3em; }
  .article-body h2 { font-size: clamp(22px, 6vw, 30px); margin: 56px 0 20px; }
  .article-body h3 { margin: 40px 0 16px; }
  .article-body .lead { font-size: 18px !important; line-height: 1.85 !important; }
  .article-body ul, .article-body ol { margin-bottom: 1.3em; padding-left: 20px; }
  .article-body li { margin-bottom: 0.5em; line-height: 1.8; }

  /* Pull quotes and callouts */
  .pull-quote { margin: 44px 0; padding: 32px 28px; }
  .pull-quote-text { font-size: clamp(16px, 4.5vw, 22px); line-height: 1.6; }
  .callout { margin: 36px 0; padding: 28px; }
  .callout p { line-height: 1.8; }

  /* Sidebar stacks below article on mobile */
  .article-sidebar { order: 2; }
  .sidebar-toc { display: none; } /* TOC less useful on mobile */

  /* Article CTA block */
  .article-cta { margin-top: 56px; padding: 40px 28px; }
  .article-cta .article-cta-headline { font-size: clamp(20px, 5.5vw, 28px); }
  .article-cta .article-cta-body { font-size: 15px; line-height: 1.8; }
  .article-cta .btn-primary-inv { width: 100%; text-align: center; display: block; }

  /* Blog inline nav: swap desktop strip for mobile cards */
  .blog-inline-nav { padding: 0 !important; border: none !important; background: transparent !important; }
  .blog-nav-desktop { display: none !important; }
  .blog-nav-mobile { display: flex !important; flex-direction: column; gap: 0; width: 100%; }

  .blog-nav-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: var(--cream);
    border: 1px solid var(--rule);
    border-bottom: none;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.2s;
    min-height: 72px;
  }
  .blog-nav-card:last-of-type { border-bottom: 1px solid var(--rule); }
  .blog-nav-card:active { background: var(--off-white); }

  .blog-nav-card__arrow {
    flex-shrink: 0;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mid);
  }
  .blog-nav-card__arrow svg { display: block; }

  .blog-nav-card__text { flex: 1; min-width: 0; }

  .blog-nav-card--next { flex-direction: row; }
  .blog-nav-card--next .blog-nav-card__text { text-align: right; }

  .blog-nav-card__meta {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 3px;
  }
  .blog-nav-card__title {
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mid);
    line-height: 1.5;
  }

  .blog-nav-all-link {
    display: block;
    text-align: center;
    padding: 16px 24px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red) !important;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .blog-nav-all-link:active { opacity: 0.6; }

  /* Section images in blog articles */
  .section-image { height: 220px !important; }

  /* KPI / stats blocks inside articles */
  .kpi-grid-article,
  .stats-row,
  .metric-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

/* ── CONTACT PAGE ────────────────────────────────────── */

  .contact-hero {
    grid-template-columns: 1fr !important;
    padding: 88px 28px 56px !important;
    gap: 44px !important;
  }
  .contact-hero h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .contact-hero-deck { font-size: 15px !important; line-height: 1.85 !important; }
  .contact-hero-info { gap: 24px !important; }

  .contact-form-section {
    grid-template-columns: 1fr !important;
    padding: 64px 28px !important;
    gap: 44px !important;
  }
  .form-row { grid-template-columns: 1fr !important; }
  .form-input, .form-select { font-size: 16px !important; } /* Prevent iOS zoom on focus */
  .phone-country { width: 100px !important; }
  .phone-number { min-width: 0; }
  .form-submit { width: 100%; text-align: center; }

  .offices { padding: 64px 28px !important; }
  .offices-grid { grid-template-columns: 1fr !important; }
  .office-card { padding: 32px 28px !important; }

  .social-strip {
    padding: 40px 28px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .social-strip-label { border-right: none !important; padding-right: 0 !important; }

/* ── SOLUTIONS PAGE ──────────────────────────────────── */

  .sol-hero { padding: 80px 28px 64px !important; }
  .sol-hero h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .sol-hero-deck { font-size: 16px !important; line-height: 1.8 !important; }
  .sol-grid { grid-template-columns: 1fr !important; }
  .sol-card { padding: 40px 28px !important; }
  .sol-card-content { padding: 40px 28px !important; }
  .sol-card-content p { line-height: 1.85; }
  .sol-cta { grid-template-columns: 1fr !important; gap: 40px !important; padding: 80px 28px !important; }
  .sol-cta-title { font-size: 28px !important; }
  .sol-cta-btn { width: 100%; text-align: center; display: block; }

/* ── LANDING PAGES ───────────────────────────────────── */

  .landing-hero { padding: 88px 28px 64px !important; }
  .landing-hero h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  .landing-hero p { line-height: 1.85; }
  .landing-grid { grid-template-columns: 1fr !important; }
  .landing-form { padding: 44px 28px !important; }
  .landing-form input,
  .landing-form textarea,
  .landing-form select { font-size: 16px !important; }

/* ── THANK YOU PAGE ─────────────────────────────────── */

  .ty-hero { padding: 100px 28px 72px; min-height: auto; }
  .ty-headline { font-size: clamp(32px, 9vw, 48px); }
  .ty-body { font-size: 16px; }
  .ty-actions { flex-direction: column; width: 100%; max-width: 320px; }
  .ty-btn { text-align: center; width: 100%; }

  .ty-next { padding: 72px 28px; }
  .ty-next-inner { grid-template-columns: 1fr; gap: 44px; }

  .ty-explore { padding: 72px 28px; }
  .ty-explore-grid { grid-template-columns: 1fr; }
  .ty-explore-card { padding: 36px 28px; }
}

/* ── SMALL PHONE (480px) ─────────────────────────────────── */
@media (max-width: 480px) {
  nav { padding: 0 20px !important; }
  .nav-cta { display: none !important; }

  .hero-title { font-size: 34px; }
  .kpi-grid { grid-template-columns: 1fr !important; }
  .kpi-strip { grid-template-columns: 1fr !important; }
  .industries-grid { grid-template-columns: 1fr !important; }
  .problem-stat-grid { grid-template-columns: 1fr !important; }
  .cairo-section-title { font-size: 20px; }
  .cairo-facts-row { grid-template-columns: 1fr !important; }
  .capabilities-title { font-size: 24px; }
  .svc-h1 { font-size: 30px; }
  .featured-title { font-size: 20px; }
  .svc-section-title { font-size: 20px; }
  .hub-hero-title { font-size: 32px; }
  .area-title { font-size: 22px; }
  .cairo-hero h1 { font-size: 34px; }
  .ebooks-grid { grid-template-columns: 1fr !important; }
  .ind-card-name { font-size: 20px; }
  .ind-cta-title { font-size: 24px; }
  .ind-grid { grid-template-columns: 1fr !important; }
  .leader-numbers { grid-template-columns: 1fr !important; }

  /* Scale hero visuals down on small phones so they don't dominate the screen */
  .area-visual { min-height: 200px; }
  .ind-card-visual { min-height: 180px; }
  .ind-feature-img { height: 240px; }

  /* Tighten side margins slightly on small phones (28 -> 24) */
  .hero, .who-left, .who-right, .problem-left, .problem-right,
  .cairo-left, .cairo-right, .services, .kpi-strip,
  .thinking-featured, .thinking-card, .testimonial-bar,
  .case-card, .case-featured-content, .case-featured-aside { padding-left: 24px !important; padding-right: 24px !important; }

  /* Blog article on small phones */
  .hero-headline { font-size: clamp(24px, 7vw, 36px) !important; }
  .article-layout { padding: 48px 24px !important; }
  .article-body p { font-size: 15px !important; line-height: 1.85 !important; }
  .article-body .lead { font-size: 17px !important; }
  .pull-quote { padding: 28px 24px !important; }
  .pull-quote-text { font-size: 16px !important; }
  .callout { padding: 24px !important; }
  .article-cta { padding: 32px 24px !important; }

  /* Blog nav cards: slightly smaller on small phones */
  .blog-nav-card { padding: 16px 20px; min-height: 64px; }
  .blog-nav-card__title { font-size: 10px; }
}