/* ============================================================
   Rawasi Road Services — Mobile-Only Refinements
   ------------------------------------------------------------
   All rules below live INSIDE @media (max-width: ...) blocks
   so they cannot affect the desktop layout (>768px).
   ============================================================ */

/* -- TABLET-DOWN (≤900px) ------------------------------------ */
@media (max-width: 900px) {
  /* Prevent horizontal overflow from any oversized blocks */
  html, body { max-width: 100vw; overflow-x: hidden; }
  img, video, iframe, svg { max-width: 100%; height: auto; }

  /* Tame oversized section padding on smaller screens */
  .section { padding: clamp(56px, 9vh, 96px) clamp(18px, 5vw, 32px); }
}

/* -- MOBILE (≤720px) ----------------------------------------- */
@media (max-width: 720px) {
  /* Body: slightly tighter base line-height for narrow columns */
  body { line-height: 1.6; -webkit-text-size-adjust: 100%; }

  /* Typography refinements */
  p { font-size: 1rem; line-height: 1.68; }
  .lead { font-size: 1.06rem; line-height: 1.6; }
  h1 { line-height: .92; letter-spacing: 0; }
  h2 { font-size: clamp(1.85rem, 7.5vw, 2.5rem); line-height: 1; }
  h3 { font-size: clamp(1.25rem, 5.4vw, 1.55rem); }
  h4 { font-size: 1rem; }
  .eyebrow { font-size: .72rem; gap: .5rem; }
  .eyebrow::before { width: 22px; }

  /* Section padding — calmer, more breathable */
  .section { padding: 56px 18px; }
  .section-head { gap: .9rem; margin-bottom: 1.8rem; }

  /* Buttons — bigger, easier touch targets, stack full-width when crowded */
  .btn { min-height: 52px; padding: .95rem 1.25rem; font-size: .82rem; letter-spacing: .14em; }
  .btn svg { height: 13px; width: 13px; }
  .hero-actions { gap: .65rem; width: 100%; }
  .hero-actions .btn { flex: 1 1 100%; }
  .nav-actions .btn { display: none !important; }

  /* Tags / chips — wrap politely */
  .tag { font-size: .68rem; padding: .3rem .55rem; }

  /* -- NAVIGATION -------------------------------------------- */
  .nav-inner {
    grid-template-columns: 1fr auto !important;
    gap: .6rem !important;
    padding: 0 16px !important;
  }
  .nav-links { display: none !important; }
  .menu-toggle { height: 46px; width: 46px; }
  .scroll-progress { height: 2px; }

  /* -- MOBILE MENU (overlay panel) --------------------------- */
  .mobile-menu { padding: 5.5rem 1.5rem 2rem; gap: .25rem; }
  .mobile-menu a {
    font-size: 1.5rem;
    padding: 1rem 0 .9rem;
    letter-spacing: .04em;
  }
  .mobile-menu .mm-foot { margin-top: 1.4rem; gap: 1rem; }

  /* -- HERO --------------------------------------------------- */
  .hero { height: 92svh; min-height: 540px; }
  .hero-content {
    padding: 0 18px clamp(8vh, 14vh, 120px);
    margin-top: -92svh;
    height: 92svh;
  }
  .hero-title { font-size: clamp(2.1rem, 11vw, 3.6rem); line-height: .94; max-width: 100%; }
  .hero-sub { font-size: 1rem; line-height: 1.55; margin-top: 1rem; max-width: 100%; }
  .hero-kicker { font-size: .76rem; }
  .hero-kicker::before { width: 24px; }
  .hero-cue { display: none !important; }
  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(12,12,13,.18) 0%, rgba(12,12,13,.32) 50%, rgba(12,12,13,.7) 100%),
      linear-gradient(90deg, rgba(12,12,13,.42) 0%, rgba(12,12,13,.14) 60%, rgba(12,12,13,0) 100%) !important;
  }

  /* -- MARQUEE ----------------------------------------------- */
  .marquee { padding: 1rem 0; }
  .marquee-track { gap: 2rem; animation-duration: 26s; }
  .marquee-item { gap: .9rem; font-size: 1.2rem; }
  .marquee-item .dot { height: 6px; width: 6px; }

  /* -- INTRO / WHO WE ARE ------------------------------------ */
  .intro { min-height: auto; padding: 56px 18px; }
  .intro-inner { gap: 2rem; }
  .intro-lead { gap: 1rem; }
  .intro-title-slot { font-size: clamp(1.7rem, 7.2vw, 2.4rem); line-height: 1; max-width: 100%; }
  .intro-body { gap: .9rem; max-width: 100%; }
  .intro-body p { font-size: 1rem; line-height: 1.65; }
  .intro-body p.intro-lead-line { font-size: 1.05rem; line-height: 1.5; }
  .intro-media { aspect-ratio: 4/3; max-height: 56vh; }
  .intro-meta { grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; margin-top: .4rem; }
  .intro-meta strong { font-size: 1.4rem; }
  .intro-meta span { font-size: .64rem; }

  /* -- WHY RAWASI -------------------------------------------- */
  .why { padding: 56px 18px; }
  .why-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .why-copy { position: static; gap: 1rem; }
  .why-grid { grid-template-columns: 1fr; gap: 1rem; }
  .why-card { padding: 1.4rem 1.25rem; gap: .8rem; }
  .why-card h3 { font-size: 1.3rem; }
  .why-card p { font-size: .95rem; line-height: 1.6; }
  .why-card .icon { height: 40px; width: 40px; }
  .why-card .icon svg { height: 19px; width: 19px; }

  /* -- PROJECTS SHOWCASE (horizontal scroll cards) ----------- */
  .projects-showcase { padding: 56px 0; }
  .projects-head { padding: 0 18px; margin-bottom: 1.6rem; gap: 1rem; }
  .projects-track { padding: 0 18px 1rem; gap: 1rem; scroll-padding-left: 18px; }
  .proj-card { width: 84vw; min-width: 280px; max-width: 360px; }
  .proj-img { aspect-ratio: 5/4; }
  .proj-body { padding: 1.25rem 1.15rem; gap: .65rem; }
  .proj-name { font-size: 1.35rem; }
  .proj-desc { font-size: .92rem; }
  .proj-stats { padding-top: .85rem; gap: .75rem; }
  .proj-stats strong { font-size: 1.1rem; }

  /* -- OMAN MAP ---------------------------------------------- */
  .map-section { padding: 56px 18px; }
  .map-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .map-copy { gap: 1rem; }
  .map-copy ul li { font-size: .9rem; padding-bottom: .55rem; gap: .65rem; }
  .map-visual, #home-project-map { min-height: 380px; }
  .map-toggle { right: 10px; top: 10px; }
  .map-toggle button { padding: .55rem .75rem; font-size: .66rem; gap: .4rem; }
  .map-legend { left: 10px; bottom: 10px; padding: .4rem .55rem; gap: .55rem; }
  .map-legend-item { font-size: .6rem; }

  /* -- SERVICES GRID ----------------------------------------- */
  .svc-grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .svc-card { padding: 1.4rem 1.25rem 1.2rem !important; }

  /* -- FORMS (contact, careers, generic) --------------------- */
  input, select, textarea {
    font-size: 16px !important;  /* prevents iOS zoom-on-focus */
    line-height: 1.4;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="search"], input[type="number"], textarea, select {
    width: 100%;
    min-height: 48px;
    padding: .8rem .9rem;
  }
  textarea { min-height: 120px; }
  label { font-size: .8rem; letter-spacing: .1em; }
  form .btn, form button[type="submit"] { width: 100%; }

  /* -- TABLES (when present, e.g. SEO audit, financials) ----- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* -- IMAGES, FIGURES -------------------------------------- */
  figure { margin: 1rem 0; }
  figcaption { font-size: .82rem; line-height: 1.5; }

  /* -- FOOTER (generic spacing) ------------------------------ */
  footer, .site-footer, .footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  footer .footer-inner, .site-footer .footer-inner, .footer .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
  }
  footer .footer-cols, .site-footer .footer-cols, .footer .footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem !important;
  }
  footer h3, footer h4, .site-footer h3, .site-footer h4 { font-size: 1rem; }

  /* -- ANCHORS / TAP ACCESSIBILITY --------------------------- */
  a, button { min-height: auto; }
  .nav-links a, .mobile-menu a { padding-top: .5rem; padding-bottom: .5rem; }

  /* -- HSE / CR PAGE CARDS ----------------------------------- */
  .hse-grid, .cr-grid, .stats-grid, .values-grid, .pillars-grid,
  .leaders-grid, .timeline-grid, .stat-strip {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* -- NEWS / CAREERS CARDS ---------------------------------- */
  .news-grid, .careers-grid, .jobs-grid, .post-grid, .cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .news-card, .career-card, .job-card, .post-card, .card {
    padding: 1.25rem !important;
  }

  /* -- CONTACT PAGE ------------------------------------------ */
  .contact-grid, .contact-layout { grid-template-columns: 1fr !important; gap: 1.4rem !important; }
  .contact-info, .contact-form { padding: 1.4rem 1.25rem !important; }

  /* -- ABOUT PAGE -------------------------------------------- */
  .about-grid, .about-layout, .about-content { grid-template-columns: 1fr !important; gap: 1.4rem !important; }
  .timeline-item { padding: 1.2rem 1.1rem !important; }

  /* -- PROJECT DETAILS / GALLERIES --------------------------- */
  .gallery, .gallery-grid, .project-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }

  /* -- GENERIC GRID HELPERS (best-effort, mobile-only) ------- */
  .two-col, .three-col, .four-col, .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* -- SPACING POLISH ON FREE PARAGRAPHS --------------------- */
  .section p + p { margin-top: .65rem; }
}

/* -- SMALL MOBILE (≤480px) ----------------------------------- */
@media (max-width: 480px) {
  h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  h2 { font-size: clamp(1.65rem, 7.2vw, 2.1rem); }
  .section { padding: 48px 16px; }
  .btn { padding: .9rem 1.1rem; font-size: .78rem; }
  .hero-title { font-size: clamp(1.95rem, 11.5vw, 3rem); }
  .hero-sub { font-size: .96rem; }
  .marquee-item { font-size: 1.05rem; gap: .8rem; }
  .intro-meta strong { font-size: 1.25rem; }
  .why-card h3 { font-size: 1.2rem; }
  .proj-card { width: 86vw; }
  .gallery, .gallery-grid, .project-gallery { grid-template-columns: 1fr !important; }
  footer .footer-cols, .site-footer .footer-cols, .footer .footer-cols { grid-template-columns: 1fr !important; }
}

/* -- VERY SMALL (≤360px) ------------------------------------- */
@media (max-width: 360px) {
  .section { padding: 44px 14px; }
  .hero-content { padding-left: 14px; padding-right: 14px; }
  .btn { letter-spacing: .1em; }
  .mobile-menu a { font-size: 1.35rem; }
}

/* ============================================================
   HEADER / LOGO REFINEMENTS — site-wide
   Slightly smaller logo + tighter, more accurate mobile header.
   These rules load LAST in the cascade and intentionally override
   the inline #rh-header-system and #rawasi-brand-masirah blocks.
   ============================================================ */

/* -- LOGO (icon mark) — slight global reduction --------------- */
.brand .brand-mark { height: 72px !important; max-height: 72px !important; }
@media (max-width: 1100px) {
  .brand .brand-mark { height: 64px !important; max-height: 64px !important; }
}
@media (max-width: 980px) {
  .brand .brand-mark { height: 58px !important; max-height: 58px !important; }
}
@media (max-width: 720px) {
  .brand .brand-mark { height: 40px !important; max-height: 40px !important; }
}
@media (max-width: 390px) {
  .brand .brand-mark { height: 34px !important; max-height: 34px !important; }
}

/* Scrolled state — even tighter for visual lift on scroll */
#nav.rh-scrolled .brand .brand-mark, .site-header.rh-scrolled .brand .brand-mark,
#nav.scrolled .brand .brand-mark,   .site-header.scrolled .brand .brand-mark {
  height: 56px !important; max-height: 56px !important;
}
@media (max-width: 720px) {
  #nav.rh-scrolled .brand .brand-mark, .site-header.rh-scrolled .brand .brand-mark,
  #nav.scrolled .brand .brand-mark,   .site-header.scrolled .brand .brand-mark {
    height: 32px !important; max-height: 32px !important;
  }
}

/* -- WORDMARK (Rawasi / Road Services) ------------------------ */
.brand-name    { font-size: 30px; }
.brand-tagline { font-size: .7rem; margin-top: 5px; }
@media (max-width: 980px) {
  .brand-name    { font-size: 26px; }
  .brand-tagline { font-size: .66rem; letter-spacing: .26em; }
}
@media (max-width: 720px) {
  .brand-name    { font-size: 21px; }
  .brand-tagline { font-size: .6rem; letter-spacing: .22em; margin-top: 3px; }
}
#nav.rh-scrolled .brand-name, .site-header.rh-scrolled .brand-name,
#nav.scrolled .brand-name,    .site-header.scrolled .brand-name { font-size: 25px; }
#nav.rh-scrolled .brand-tagline, .site-header.rh-scrolled .brand-tagline,
#nav.scrolled .brand-tagline,    .site-header.scrolled .brand-tagline { font-size: .64rem; }
@media (max-width: 980px) {
  #nav.rh-scrolled .brand-name, .site-header.rh-scrolled .brand-name,
  #nav.scrolled .brand-name,    .site-header.scrolled .brand-name { font-size: 23px; }
  #nav.rh-scrolled .brand-tagline, .site-header.rh-scrolled .brand-tagline,
  #nav.scrolled .brand-tagline,    .site-header.scrolled .brand-tagline { font-size: .6rem; }
}
@media (max-width: 720px) {
  #nav.rh-scrolled .brand-name, .site-header.rh-scrolled .brand-name,
  #nav.scrolled .brand-name,    .site-header.scrolled .brand-name { font-size: 20px; }
  #nav.rh-scrolled .brand-tagline, .site-header.rh-scrolled .brand-tagline,
  #nav.scrolled .brand-tagline,    .site-header.scrolled .brand-tagline { font-size: .56rem; }
}

/* -- MOBILE HEADER + MENU FIXES ------------------------------- */
@media (max-width: 720px) {
  /* Re-tune header height to match smaller logo */
  :root {
    --rh-h-mobile: 72px !important;
    --rh-h-mobile-scrolled: 60px !important;
  }
  body.rh-pad-top { padding-top: var(--rh-h-mobile) !important; }

  /* Nav bar — 2 cols (logo | actions), balanced gutters */
  .nav-inner {
    grid-template-columns: 1fr auto !important;
    gap: .6rem !important;
    padding: 0 16px !important;
    height: var(--rh-h-mobile) !important;
  }
  #nav.rh-scrolled .nav-inner, .site-header.rh-scrolled .nav-inner,
  #nav.scrolled    .nav-inner, .site-header.scrolled    .nav-inner {
    height: var(--rh-h-mobile-scrolled) !important;
  }

  /* Brand: keep mark + name comfortably aligned */
  .brand { gap: 10px !important; min-width: 0 !important; }
  .brand-wordmark { min-width: 0; overflow: hidden; }
  .brand-name { letter-spacing: .01em !important; }

  /* Menu toggle: tighter, more refined size */
  .menu-toggle {
    height: 40px !important;
    width: 40px !important;
    flex: none !important;
  }

  /* When mobile menu is open: force a solid header so menu
     items don't bleed through a transparent over-hero bar.   */
  body.menu-open #nav, body.menu-open .site-header { z-index: 90 !important; }
  body.menu-open #nav .nav-inner,
  body.menu-open .site-header .nav-inner {
    background: rgba(251, 250, 245, .98) !important;
    border-bottom: 1px solid rgba(20, 18, 15, .10) !important;
    backdrop-filter: saturate(160%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
    box-shadow: 0 1px 0 rgba(20,18,15,.04) !important;
  }
  body.menu-open .brand-name { color: #1a1814 !important; }
  body.menu-open .menu-toggle {
    background: #1a1814 !important;
    border-color: #1a1814 !important;
    color: #fbfaf5 !important;
  }

  /* Mobile menu overlay: clean spacing tied to actual header height */
  .mobile-menu {
    padding: calc(var(--rh-h-mobile) + 1.4rem) 22px
             calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
  }
  /* Remove the stray divider line — link borders already separate items */
  .mobile-menu::before { display: none !important; }

  .mobile-menu a {
    font-size: clamp(1.6rem, 7.6vw, 2.3rem) !important;
    padding: .9rem 0 !important;
  }
  .mobile-menu .mm-foot {
    margin-top: 1.6rem !important;
    padding-top: 1.4rem !important;
    border-top: 1px solid rgba(20,18,15,.10) !important;
  }
}

/* -- VERY SMALL PHONES (≤390px) — keep header proportional ---- */
@media (max-width: 390px) {
  .nav-inner { padding: 0 14px !important; }
  .brand { gap: 8px !important; }
  .menu-toggle { height: 38px !important; width: 38px !important; }
  .mobile-menu a { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; padding: .8rem 0 !important; }
}