/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES — mobile_fixes.css
   Complete Mobile Overhaul (Fixes A–H)
   Verified against actual HTML class names in index.html
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   FIX H — GLOBAL MOBILE RULES (applied first as foundation)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Kill horizontal scroll permanently */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* All images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* No text overflow anywhere */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Body font comfortable on mobile */
  body {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }

  /* Minimum tap target for all links and buttons */
  a, button {
    min-height: 44px !important;
  }

  /* Contain all major layout blocks */
  main, section, header, footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX A — NAVBAR & LOGO
   Actual class names: .nav, .nav-logo, .nav-hamburger, .nav-mobile,
   .nav-mobile-links, .nav-cta
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Navbar — compact and clean */
  .nav {
    padding: 0 16px !important;
    height: auto !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Logo — readable but not oversized on mobile */
  .nav-logo {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .nav-logo img {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
  }

  /* Hamburger icon — right aligned, properly visible */
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    cursor: pointer !important;
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    z-index: 9999 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .nav-hamburger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #D8DDE4 !important;
    border-radius: 1px !important;
  }

  /* Hide desktop nav links and CTA on mobile */
  .nav-links,
  .nav-cta {
    display: none !important;
  }

  /* Mobile overlay menu — full screen */
  .nav-mobile {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(8, 11, 15, 0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 80px 1.5rem 60px !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: translateY(-16px) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }

  .nav-mobile.is-open {
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Mobile menu links — stacked, easy to tap */
  .nav-mobile-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .nav-mobile-links a {
    display: block !important;
    padding: 0.85rem 0 !important;
    font-size: clamp(1.8rem, 7vw, 3rem) !important;
    color: #B8BCC2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    min-height: 44px !important;
  }

  .nav-mobile-links a:hover,
  .nav-mobile-links a[aria-current="page"] {
    color: #E8340A !important;
  }

  /* Mobile footer contact info */
  .nav-mobile-footer {
    margin-top: 32px !important;
  }

  .nav-mobile-contact {
    margin-bottom: 8px !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX B — HERO SECTION
   Actual class names: .hero, .hero-headline, .hero-eyebrow-text,
   .hero-desc, .hero-actions, .hero-sub-row
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero section padding */
  .hero {
    padding: 5rem 1.25rem 3rem !important;
    min-height: auto !important;
    height: 100svh !important;
  }

  .hero-body {
    padding: 0 !important;
  }

  /* Hero heading — readable size, not oversized */
  .hero-headline {
    font-size: 2.6rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    word-break: break-word !important;
    margin-bottom: 24px !important;
  }

  /* Hero tagline / eyebrow */
  .hero-eyebrow {
    margin-bottom: 1rem !important;
  }

  .hero-eyebrow-text {
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Hero description */
  .hero-desc {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }

  /* Hero sub-row — stack on mobile */
  .hero-sub-row {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
  }

  /* Hero buttons — stacked, full width */
  .hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
  }

  /* Scroll hint — hide on mobile to save space */
  .hero-scroll {
    display: none !important;
  }

}

@media (max-width: 390px) {

  .hero-headline {
    font-size: 2rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX C — SERVICES SECTION
   Actual class names: .services-list-wrap, .service-row, .service-row-num,
   .service-row-title, .service-row-desc, .services-intro
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Section padding */
  .section--void {
    padding: 3rem 1.25rem !important;
  }

  /* Services intro — stack the two columns */
  .services-intro {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  /* Services list wrap */
  .services-list-wrap {
    width: 100% !important;
  }

  /* Each service row */
  .service-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.25rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  /* Service number */
  .service-row-num {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem !important;
  }

  /* Service title */
  .service-row-title {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
  }

  /* Service description */
  .service-row-desc {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }

  /* Arrow — move to end */
  .service-row-arrow {
    align-self: flex-start !important;
    margin-top: 12px !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX D — STATS / METRICS SECTION
   Actual class names: .metrics-grid, .metric-cell, .metric-value,
   .metric-label, .counter
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Metrics grid — 2x2 on mobile */
  .metrics-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    padding: 2rem 1.25rem !important;
  }

  /* Each metric block */
  .metric-cell {
    text-align: center !important;
    padding: 1rem !important;
    margin-bottom: 0 !important;
  }

  /* Metric / stat number */
  .metric-value,
  .counter {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #E8340A !important;
    background: none !important;
    -webkit-text-fill-color: #E8340A !important;
  }

  /* Metric label */
  .metric-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    color: #7A8390 !important;
    background: none !important;
  }

}

@media (max-width: 390px) {

  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  .metric-value,
  .counter {
    font-size: 2rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX E — PROJECT CARDS
   Actual class names: .proj-grid, .proj-card, .proj-card-img-wrap,
   .proj-card-body, .proj-name, .proj-detail, .section--surface
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Section padding */
  .section--surface {
    padding: 3rem 0 !important;
  }

  /* Cards grid — single column */
  .proj-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    padding: 0 1.25rem !important;
    margin-top: 24px !important;
  }

  /* Each card */
  .proj-card {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Card image */
  .proj-card img,
  .proj-card-img-wrap img {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* Card body */
  .proj-card-body {
    padding: 1.1rem !important;
  }

  /* Card title */
  .proj-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    background: none !important;
    -webkit-text-fill-color: inherit !important;
  }

  /* Card description */
  .proj-detail,
  .project-desc {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    background: none !important;
  }

  /* Projects header */
  .projects-header {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
    padding: 0 1.25rem !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX F — ABOUT & GENERAL SECTIONS
   Actual class names: .about-split, .about-split-media, .about-split-content,
   .section-headline, .section-tag-text
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* All section padding */
  section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* All section headings */
  h2,
  .section-headline {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  /* About two-column layout — stack on mobile */
  .about-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* About image */
  .about-split-media img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }

  /* About content */
  .about-split-content {
    padding: 0 !important;
  }

  /* Section sub-labels */
  .section-tag-text {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Ticker belt */
  .ticker {
    overflow: hidden !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   FIX G — FOOTER
   Actual class names: .footer, .footer-grid, .footer-brand-logo,
   .footer-col-heading, .footer-nav, .footer-contact-row,
   .footer-contact-text, .footer-bottom, .footer-copy
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Footer columns — single stack */
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2.5rem 1.25rem !important;
  }

  /* Footer logo */
  .footer-brand-logo {
    max-width: 160px !important;
    height: auto !important;
    margin-bottom: 0.75rem !important;
    opacity: 0.85 !important;
  }

  /* Footer section headings */
  .footer-col-heading {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.75rem !important;
  }

  /* Footer nav links — easy to tap */
  .footer-nav li {
    margin-bottom: 4px !important;
  }

  .footer-nav a {
    display: block !important;
    padding: 0.35rem 0 !important;
    font-size: 0.875rem !important;
    min-height: 36px !important;
    color: #5A6270 !important;
  }

  /* Contact info rows */
  .footer-contact-row {
    margin-bottom: 12px !important;
  }

  .footer-contact-text a,
  .footer-contact-text {
    font-size: 0.875rem !important;
    color: #9AA3AE !important;
  }

  /* Copyright / bottom bar */
  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 1.25rem !important;
    font-size: 0.75rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .footer-copy {
    color: #3A4250 !important;
    font-size: 0.75rem !important;
  }

  /* Footer padding */
  .footer {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   VERY SMALL SCREENS — 390px and below
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {

  .hero-headline {
    font-size: 2rem !important;
  }

  h2,
  .section-headline {
    font-size: 1.4rem !important;
  }

  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }

  .metric-value,
  .counter {
    font-size: 2rem !important;
  }

}

@media (max-width: 375px) {

  .hero-headline {
    font-size: 1.85rem !important;
  }

  h2,
  .section-headline {
    font-size: 1.3rem !important;
  }

}