/* =========================================================================
   Authoritative mobile layout (loaded after style.css).
   The mobile navigation is a hidden slide-in drawer, never a permanent overlay.
   ========================================================================= */

@media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { font-size: 15px; }
  .container { width: 100% !important; max-width: none !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Top utility bar */
  .topbar { height: 30px !important; min-height: 30px !important; padding: 0 !important; display: flex; align-items: center; }
  .topbar .container, .topbar-left { height: 100%; display: flex; align-items: center; justify-content: center; }
  .topbar-left a:not(:first-child), .topbar-left span, .topbar-right { display: none !important; }
  .topbar-left a:first-child { font-size: 11px; }

  /* Navbar */
  .nav, .nav.scrolled { padding: 6px 0 !important; position: sticky; top: 0; background: #fff; z-index: 900; }
  .nav-inner { min-height: 54px; gap: 8px; }
  .brand-mark { gap: 8px; min-width: 0; }
  .brand-mark img { width: 58px !important; height: 40px !important; object-fit: contain; }
  .brand-word { font-size: 17px !important; white-space: nowrap; }
  .brand-word small { display: none !important; }
  .nav-cta { margin-left: auto; }
  .nav-cta > a { display: none !important; }
  .nav-toggle { display: flex !important; width: 28px; z-index: 1001; }

  /* Mobile menu: hidden drawer by default, only visible when .open is set */
  .nav-links {
    position: fixed !important;
    top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important;
    width: 82% !important; max-width: 320px !important; height: 100dvh !important;
    padding: 88px 26px 32px !important; background: var(--navy) !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-start !important; justify-content: flex-start !important;
    gap: 26px !important; z-index: 1000 !important;
    transform: translateX(100%) !important;
    transition: transform .35s ease !important;
    visibility: hidden !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.4);
  }
  .nav-links.open { transform: translateX(0) !important; visibility: visible !important; }
  .nav-links a { font-size: 20px !important; color: rgba(255,255,255,.85) !important; line-height: 1.1; }
  .nav-links a.active { color: #fff !important; }
  body.nav-open { overflow: hidden !important; }

  /* Hero */
  .hero { min-height: 0 !important; height: auto !important; align-items: flex-start !important; }
  .hero-bg img { object-position: 58% center !important; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(9,26,46,.86), rgba(9,26,46,.96)) !important; }
  .hero-ring, .scroll-cue { display: none !important; }
  .hero-inner { padding-top: 34px !important; padding-bottom: 28px !important; }
  .hero .tag { font-size: 14px !important; line-height: 1.35; margin: 0 0 14px !important; }
  .hero-title { width: 100% !important; max-width: 100% !important; margin: 0 0 16px !important; font-size: clamp(25px, 7.5vw, 31px) !important; line-height: 1.08 !important; letter-spacing: -.04em !important; }
  .hero-line { display: block !important; }
  .hero-title .gold-i { display: inline !important; width: auto !important; }
  .hero-lede { max-width: none !important; margin: 0 0 20px !important; font-size: 13px !important; line-height: 1.55 !important; }
  .hero-actions { width: 100%; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin: 0 0 22px !important; }
  .hero-actions > * { width: 100% !important; min-height: 46px !important; justify-content: center !important; padding: 12px 16px !important; }
  .hero-actions .link-arrow { border: 1px solid rgba(255,255,255,.25); }
  .hero-meta { width: 100%; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 8px 6px !important; padding-top: 18px !important; }
  .hero-meta div { min-width: 0; text-align: center; }
  .hero-meta div b { font-size: 20px !important; }
  .hero-meta div span { display: block; font-size: 7px !important; letter-spacing: .02em !important; line-height: 1.25; }
  .marquee-strip { display: none !important; }

  /* Sections */
  .editorial, .service-list-section, .why-premium, .contact-section-p { padding: 38px 0 !important; }
  .stats-editorial { padding: 32px 0 !important; }
  .testimonial-p { padding: 38px 0 !important; }
  .cta-statement { padding: 48px 0 !important; }
  .tag { font-size: 15px !important; margin-bottom: 8px !important; }
  .display-2, .section-lead-row .display-2 { font-size: 28px !important; line-height: 1.12 !important; overflow-wrap: normal !important; }
  .section-lead-row { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 20px !important; }
  .section-head-note { font-size: 13px !important; line-height: 1.5; }

  /* Image + text blocks */
  .editorial-grid, .why-grid-p, .contact-grid-p { grid-template-columns: 1fr !important; gap: 28px !important; }
  .editorial-media, .why-media-p { order: 0 !important; width: 100%; }
  .editorial-media img, .why-media-p img, .map-wrap-p img { width: 100% !important; height: auto !important; aspect-ratio: 4/3 !important; object-fit: contain !important; }
  .quote-lg { font-size: 20px !important; margin: 14px 0 22px !important; }
  .lede { font-size: 14px !important; }
  .numbered-item { gap: 12px !important; padding: 16px 0 !important; }

  /* Service cards */
  .service-card-grid, .service-card-grid-wide { grid-template-columns: 1fr !important; gap: 14px !important; }
  .service-card-image, .service-card-grid-wide .service-card-image { height: 200px !important; }
  .service-card-body { padding: 16px !important; }
  .service-card-body h3 { font-size: 17px !important; }
  .service-card-body p { font-size: 13px !important; }

  /* Stats */
  .stats-grid-ed { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 8px !important; }
  .stat-block { padding: 0 6px !important; }
  .stat-block::after { display: none !important; }
  .stat-block b { font-size: 30px !important; }
  .stat-block span { font-size: 9px !important; }

  /* Testimonials */
  .testimonial-track { min-height: 260px; }
  .testimonial-slide p { font-size: 18px !important; }

  /* Page headers */
  .page-header { min-height: 0 !important; height: auto !important; }
  .page-header-inner { padding-top: 42px !important; padding-bottom: 34px !important; }
  .page-header h1 { font-size: 30px !important; line-height: 1.08 !important; margin: 12px 0 !important; }
  .page-header p { font-size: 13px !important; }

  /* Process, values, team */
  .process-p, .value-grid { grid-template-columns: 1fr !important; }
  .process-step-p, .value-item, .value-item:nth-child(odd), .value-item:nth-child(even) { padding: 20px 0 !important; border-right: 0 !important; }
  .team-grid-p { grid-template-columns: 1fr !important; gap: 14px !important; }
  .team-card-p .photo { height: 240px !important; }

  /* Contact + CTA */
  .form-premium .form-row-p { grid-template-columns: 1fr !important; gap: 0 !important; }
  .contact-info-p { padding: 26px 18px !important; }
  .wa-cta-card { padding: 30px 18px !important; }
  .cta-statement .mandala { width: 460px; height: 460px; }
  .cta-statement h2 { font-size: 26px !important; }
  .cta-statement-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .cta-statement-actions > * { width: 100% !important; justify-content: center !important; }

  /* Footer */
  .footer-p { padding-top: 36px !important; }
  .footer-top-p { grid-template-columns: 1fr !important; gap: 26px !important; padding-bottom: 26px !important; }
  .footer-bottom-p { padding: 16px 0 !important; flex-direction: column !important; }

  /* Floating controls */
  .wa-float { width: 50px !important; height: 50px !important; right: 14px !important; bottom: 14px !important; }
  .to-top { width: 40px !important; height: 40px !important; left: 14px !important; bottom: 14px !important; }
}

@media (max-width: 360px) {
  .brand-mark img { width: 50px !important; }
  .brand-word { font-size: 15px !important; }
  .hero-title { font-size: 24px !important; }
  .hero-meta div b { font-size: 18px !important; }
}


/* =========================================================================
   Premium mobile refinements
   ========================================================================= */
@media (max-width: 767px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Hero: calmer, more considered spacing */
  .hero-inner { padding-top: 40px !important; padding-bottom: 32px !important; }
  .hero .tag { font-size: 12px !important; letter-spacing: .02em !important; opacity: .92; margin-bottom: 16px !important; }
  .hero-title { font-size: clamp(27px, 8vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; margin-bottom: 18px !important; }
  .hero-lede { font-size: 13.5px !important; line-height: 1.65 !important; color: rgba(255,255,255,.82) !important; margin-bottom: 24px !important; }
  .hero-actions { gap: 10px !important; margin-bottom: 6px !important; }

  /* Premium stat panel: 2x2 with hairline dividers instead of tiny 4-across */
  .hero-meta {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important; margin-top: 30px !important; padding-top: 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important; border-left: 1px solid rgba(255,255,255,.14) !important;
  }
  .hero-meta div {
    text-align: left; padding: 18px 16px !important;
    border-right: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .hero-meta div b { font-size: 27px !important; margin-bottom: 4px; }
  .hero-meta div span { font-size: 9.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: rgba(255,255,255,.58) !important; line-height: 1.3; }

  /* Remove off-screen decorative brackets; use soft rounded frames instead */
  .editorial-media .corner, .why-media-p .corner, .map-wrap-p .corner { display: none !important; }
  .editorial-media img, .why-media-p img, .map-wrap-p img {
    border-radius: 16px !important; box-shadow: 0 22px 44px -22px rgba(9,26,46,.5) !important;
  }
  .editorial-media, .why-media-p { padding: 0 !important; }
  .editorial-media .float-badge {
    left: 14px !important; bottom: 14px !important; padding: 13px 16px !important;
    border-radius: 12px !important; box-shadow: 0 14px 30px -14px rgba(9,26,46,.45) !important;
  }
  .editorial-media .float-badge b { font-size: 26px !important; }
  .editorial-media .float-badge span { font-size: 10px !important; letter-spacing: .08em; }

  /* Softer, more premium surfaces */
  .service-card-premium { border-radius: 16px !important; box-shadow: 0 16px 34px -24px rgba(14,42,71,.45) !important; }
  .service-card-image { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; }
  .wa-cta-card, .contact-info-p { border-radius: 18px !important; }
  .btn-gold, .btn-navy, .btn-wa, .btn-outline, .hero-actions > * { border-radius: 12px !important; }
  .map-wrap-p img { aspect-ratio: 3/2 !important; }

  /* Headings and section rhythm */
  .display-2, .section-lead-row .display-2 { font-size: 26px !important; line-height: 1.15 !important; }
  .tag { font-size: 13px !important; letter-spacing: .02em !important; }
  .section-lead-row { margin-bottom: 22px !important; }
  .editorial, .service-list-section, .why-premium, .contact-section-p { padding: 46px 0 !important; }

  /* Testimonials sit better centered on small screens */
  .testimonial-slide p { font-size: 17px !important; line-height: 1.5 !important; }
  .quote-mark { font-size: 52px !important; }

  /* CTA block spacing */
  .cta-statement h2 { font-size: 25px !important; line-height: 1.22 !important; margin-bottom: 26px !important; }

  /* Footer alignment for readability */
  .footer-top-p { gap: 28px !important; }
  .footer-social-p { margin-top: 4px; }
}


/* =========================================================================
   Mobile menu polish, top-bar removal, and animated WhatsApp
   ========================================================================= */
@media (max-width: 767px) {
  /* Remove the utility bar entirely on phones; the number lives in the menu now */
  .topbar { display: none !important; }

  /* Glassy, semi-transparent drawer */
  .nav-links {
    width: 84% !important; max-width: 340px !important;
    background: rgba(9, 22, 40, 0.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-left: 1px solid rgba(196,154,69,.28) !important;
    padding-top: 96px !important;
  }
  .nav-links a { width: 100%; padding: 6px 0; }

  /* Turn the hamburger into a clearly visible white X while the menu is open */
  .nav-toggle.open span { background: #fff !important; }
  .nav-toggle.open { position: fixed !important; top: 20px !important; right: 20px !important; z-index: 1002 !important; }

  /* Call + WhatsApp actions pinned to the bottom of the menu */
  .nav-drawer-foot { margin-top: auto !important; width: 100%; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); display: flex !important; flex-direction: column; gap: 14px; }
  .nav-drawer-foot a { display: inline-flex; align-items: center; gap: 10px; font-size: 15px !important; letter-spacing: .02em; color: rgba(255,255,255,.9) !important; text-transform: none !important; }
  .nav-drawer-foot a i { color: var(--gold-2); width: 18px; text-align: center; }
  .nav-drawer-foot .wa-line i { color: #25d366; }
}

/* WhatsApp floating button: gentle heartbeat + halo (all viewports) */
.wa-float i { display: inline-block; animation: waBeat 2.6s ease-in-out infinite; }
@keyframes waBeat {
  0%, 88%, 100% { transform: scale(1); }
  92% { transform: scale(1.22); }
  96% { transform: scale(.96); }
}
.wa-float::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .5); animation: waHalo 2.6s ease-out infinite; pointer-events: none;
}
@keyframes waHalo {
  0% { transform: scale(.85); opacity: .8; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}