/* ═══════════════════════════════════════════════════════════════
   Bakhurji Law — Responsive system (all devices)
   Breakpoints: 360 · 480 · 640 · 768 · 900 · 1024 · 1280 · 1440
   ═══════════════════════════════════════════════════════════════ */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --touch-min: 44px;
  --space-section: clamp(3rem, 8vw, 7rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

.page-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

/* Room for floating action buttons on phones/tablets */
@media (max-width: 1024px) {
  .page-main {
    padding-bottom: calc(4.5rem + var(--safe-bottom));
  }
}

.container,
.home-hero__inner,
.home-svc__bento,
.home-svc__foot,
.home-trust__grid,
.home-phil__layout,
.home-method__steps,
.home-explore__grid,
.home-office__inner,
.home-panel__inner {
  width: min(var(--container-max, 1320px), calc(100% - var(--safe-left) - var(--safe-right) - 2 * clamp(0.75rem, 4vw, 2rem)));
  max-width: 100%;
}

.container {
  width: min(var(--container-max, 1320px), calc(100% - 2 * clamp(0.75rem, 4vw, 2rem)));
  padding-inline: clamp(0.85rem, 4vw, 2rem);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Prevent long words/URLs from breaking layout */
p, h1, h2, h3, h4, li, td, th, .review-val, .summary-item dd {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Touch-friendly controls ── */
@media (pointer: coarse) {
  .btn,
  .nav-links a,
  .nav-ctrl-btn,
  .nav-lang-btn,
  .nav-burger,
  .fab,
  .fab-dock .fab,
  .cookie-btns .btn,
  .practice-card,
  .home-svc__card,
  .home-portal__card,
  .footer-social__btn {
    min-height: var(--touch-min);
  }

  .nav-ctrl-btn,
  .nav-lang-btn {
    min-width: var(--touch-min);
  }
}

/* ── Mobile nav overlay ── */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(10, 11, 12, 0.55);
  cursor: pointer;
}

.nav-overlay[hidden] {
  display: none !important;
}

body.nav-open {
  overflow: hidden;
}

/* .header creates its own stacking context (position: sticky + z-index),
   so its z-index must clear .nav-overlay's or taps on the open menu
   (nested inside .header) land on the overlay instead of the links. */
body.nav-open .header {
  z-index: 10060;
}

/* ── Fixed chrome + safe areas ── */
.header {
  padding-top: var(--safe-top);
  height: calc(var(--header-h) + var(--safe-top));
  max-width: 100%;
}

.header .nav {
  height: var(--header-h);
  min-width: 0;
  gap: clamp(0.35rem, 2vw, 1rem);
}

.nav-logo-full {
  min-width: 0;
  flex-shrink: 1;
}

.nav-actions {
  flex-shrink: 0;
}

.nav-overlay {
  z-index: 10040;
}

.fab-dock,
.whatsapp-fab {
  bottom: calc(1.25rem + var(--safe-bottom));
  inset-inline-end: calc(1.25rem + var(--safe-right));
}

.cookie {
  padding-bottom: calc(1rem + var(--safe-bottom));
  padding-inline: calc(1rem + var(--safe-left)) calc(1rem + var(--safe-right));
}

.scroll-progress {
  top: var(--safe-top);
}

/* ═══ TABLET & BELOW (≤1024) ═══ */
@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
    --space-section: clamp(2.75rem, 7vw, 5rem);
  }

  .nav-burger {
    display: flex;
  }

  /* Bottom-sheet mobile nav (phones + tablets) */
  .nav-links {
    position: fixed;
    top: auto !important;
    inset-inline: var(--safe-left) var(--safe-right) !important;
    inset-inline-end: var(--safe-right) !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(85dvh, 620px);
    padding: 0 0 calc(1rem + var(--safe-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-inline-start: none !important;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s var(--ease), opacity 0.35s, visibility 0.35s;
    box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.2);
    z-index: 10050;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    background: var(--surface);
  }

  .nav-links::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0.7rem auto 0.4rem;
    border-radius: 999px;
    background: rgba(70, 72, 73, 0.22);
    flex-shrink: 0;
  }

  html[dir="rtl"] .nav-links,
  html[dir="ltr"] .nav-links {
    transform: translateY(100%) !important;
  }

  html[dir="rtl"] .nav-links.open,
  html[dir="ltr"] .nav-links.open {
    transform: translateY(0) !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links > li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  .nav-links a,
  .nav-item--hasdrop .nav-drop-trigger {
    padding-inline: 1.25rem;
    min-height: 54px;
    width: 100%;
  }

  body.nav-open .fab-dock {
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
  }

  #cursorRingA,
  #cursorRingB {
    display: none !important;
  }

  .sec-head,
  .sec-head-pro {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  }

  .home-glass__stats {
    grid-template-columns: 1fr;
  }

  .home-intro__bento {
    grid-template-columns: 1fr;
  }

  .home-intro__inner {
    padding: clamp(1.25rem, 4vw, 2rem);
    border-radius: 18px;
  }

  .pa-nav {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .identity-split,
  .identity-values,
  .identity-team {
    grid-template-columns: 1fr !important;
  }
}

/* ═══ LARGE PHONES (≤768) ═══ */
@media (max-width: 768px) {
  :root {
    --header-h: 68px;
  }

  .hero,
  .home-hero,
  .page-hero,
  .pa-hero,
  .pr-hero,
  .services-hero,
  .contact-hero {
    min-height: auto;
  }

  .home-hero {
    min-height: min(100dvh, 900px);
    padding-bottom: 2rem;
  }

  .home-hero__actions,
  .home-hero__cta,
  .home-actions,
  .home-actions--pro,
  .home-cta__actions,
  .hero-actions,
  .pa-cta,
  .page-hero .btn,
  .cta-banner-actions,
  .services-cta,
  .contact-form__actions,
  .modal-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .home-hero__actions .btn,
  .home-hero__cta .btn,
  .home-actions .btn,
  .home-actions--pro .btn,
  .home-cta__actions .btn,
  .hero-actions .btn,
  .pa-cta .btn,
  .page-hero .btn,
  .cta-banner .btn,
  .services-cta .btn,
  .modal-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .home-hero-contact {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero-contact__chip {
    justify-content: center;
  }

  .home-firm--hero {
    max-width: none;
  }

  .home-firm__line {
    font-size: clamp(1.55rem, 7vw, 2.25rem);
  }

  .home-glass--elite {
    margin-top: 0.5rem;
  }

  .home-hero__inner,
  .home-svc__bento,
  .home-trust__grid,
  .home-portal,
  .home-intro__bento,
  .home-method__steps,
  .practice-grid,
  .achieve-grid,
  .team-grid,
  .values-bento {
    grid-template-columns: 1fr !important;
  }

  .home-trust-card:nth-child(3) {
    grid-column: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  .home-svc__card--featured {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .sector-tile-pro,
  .service-pick-grid-pro,
  .meeting-types-pro,
  .time-slots-pro,
  .calendar-grid-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .float-field input,
  .float-field textarea,
  .float-field select,
  .cf input,
  .cf textarea,
  .cf select,
  .form-field input,
  .form-field textarea,
  .form-field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .btn {
    white-space: normal;
    text-align: center;
  }

  .home-trust-card {
    padding: 1.5rem 1.25rem;
  }

  .home-trust-card + .home-trust-card {
    margin-top: 0;
  }

  .home-path__step {
    flex-direction: column;
    align-items: stretch;
  }

  .home-path__card {
    width: 100%;
  }

  .home-panel--portal .home-panel__head {
    padding: 1rem 1.15rem;
  }

  .home-portal__card {
    min-height: auto;
    padding: 1.15rem 1rem;
  }

  .home-svc__card {
    min-height: auto;
    padding: 1.35rem 1.15rem;
  }

  .home-svc__card--featured {
    min-height: auto;
  }

  .home-quote {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    padding-inline-start: 1rem;
  }

  .page-hero {
    padding: clamp(3rem, 10vw, 4.5rem) 0 clamp(2rem, 6vw, 3rem);
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
  }

  .page-hero p,
  .page-hero-lead {
    font-size: clamp(0.95rem, 3.5vw, 1.05rem) !important;
  }

  .modal-box {
    width: min(calc(100% - 2rem - var(--safe-left) - var(--safe-right)), 480px);
    max-width: none;
    margin: 1rem auto;
    padding: 1.25rem;
    max-height: calc(100dvh - 2rem - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
  }

  .consult-modal::backdrop {
    background: rgba(0, 0, 0, 0.55);
  }

  .footer-pro .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .footer-bar-contact {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .footer-gov__grid {
    grid-template-columns: 1fr;
  }

  .booking-steps-pro {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .calendar-grid-pro {
    gap: 0.35rem;
  }

  .contact-map__frame iframe {
    min-height: 220px;
    width: 100%;
    max-width: 100%;
  }

  .contact-layout--elite,
  .booking-app-grid,
  .booking-shell,
  .identity-split,
  .services-layout-pro {
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .contact-form__row {
    grid-template-columns: 1fr !important;
  }

  .wizard-top {
    padding: 1rem 1rem 0;
  }

  .booking-wizard-pro {
    border-radius: 16px;
  }

  .summary-item dd {
    max-width: 62%;
    text-align: end;
  }

  .footer-pro .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-pro .footer-brand {
    grid-column: auto;
  }

  .footer-nav {
    align-items: center;
  }

  .pa-hero__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .pa-hero__icon-wrap {
    width: 56px;
    height: 56px;
  }
}

/* ═══ PHONES (≤640) ═══ */
@media (max-width: 640px) {
  :root {
    --header-h: 64px;
  }

  .container {
    padding-inline: clamp(0.85rem, 4vw, 1.25rem);
  }

  .logo-img-full {
    height: 30px !important;
    max-width: min(140px, 42vw) !important;
  }

  .nav-book-cta {
    display: none;
  }

  .nav-lang-btn {
    min-height: 36px;
    padding: 0.28rem 0.55rem;
    font-size: 0.65rem;
  }

  .fab-dock {
    inset-inline-end: calc(0.85rem + var(--safe-right));
    bottom: calc(1rem + var(--safe-bottom));
    gap: 0.5rem;
  }

  .fab-dock .fab {
    min-height: var(--touch-min);
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
  }

  .fab-dock .fab svg {
    width: 20px;
    height: 20px;
  }

  .home-kicker {
    font-size: 0.65rem;
    gap: 0.45rem;
  }

  .home-kicker__line {
    width: 20px;
  }

  .home-lead,
  .home-lead--pro {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .home-hero--advanced .home-lead--pro {
    padding: 0.95rem 1rem;
  }

  .home-hero--advanced .home-statement--pro {
    padding: 0.65rem 0.95rem;
    font-size: 0.82rem;
  }

  .home-intro__cell {
    min-height: auto;
    padding: 1rem;
  }

  .home-proof--pro .home-proof__inner {
    grid-template-columns: 1fr;
  }

  .home-explore__grid {
    grid-template-columns: 1fr;
  }

  .home-office__inner {
    text-align: center;
  }

  .home-office__actions {
    justify-content: center;
  }

  .practice-card {
    min-height: auto;
    padding: 1.25rem 1.1rem;
  }

  .practice-hub__head h2 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .services-block {
    padding: 1.15rem;
  }

  .services-stats {
    grid-template-columns: 1fr;
  }

  .sectors-bento-pro {
    grid-template-columns: 1fr !important;
  }

  .sector-tile-pro--wide {
    grid-column: span 1 !important;
  }

  .identity-timeline {
    grid-template-columns: 1fr !important;
  }

  .cookie {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.75rem;
  }

  .cookie-btns {
    justify-content: center;
  }

  .footer-pro .footer-grid {
    gap: 1.5rem;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-contact-stack {
    max-width: none;
  }

  .cta-banner-inner {
    padding: 1.35rem 1.15rem;
  }

  .culture-banner {
    padding: 1.5rem 1.15rem;
  }

  .timeline {
    grid-template-columns: 1fr !important;
  }

  .calendar-grid-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .time-slots-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bstep span:last-child {
    font-size: 0.62rem;
    line-height: 1.2;
    text-align: center;
  }

  .summary-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .summary-item dd {
    max-width: 100%;
    text-align: start;
  }

  .sector-tile-pro,
  .service-pick-grid-pro,
  .meeting-types-pro {
    grid-template-columns: 1fr !important;
  }

  .time-slots-pro {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .process-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══ SMALL PHONES (≤480) ═══ */
@media (max-width: 480px) {
  .logo-img-full {
    height: 28px !important;
    max-width: min(128px, 46vw) !important;
  }

  .nav-actions {
    gap: 0.25rem;
  }

  .nav-lang-btn__label {
    display: none;
  }

  .nav-lang-btn {
    min-width: var(--touch-min);
    padding-inline: 0.5rem;
  }

  .home-firm__line {
    font-size: clamp(1.4rem, 8vw, 1.85rem);
  }

  .home-firm__sub {
    font-size: 0.92rem;
  }

  .home-statement {
    font-size: 0.78rem;
    padding-inline-start: 0.75rem;
  }

  .hero-display,
  .hero-display-sm {
    font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
  }

  .sec-tag,
  .sec-tag-light {
    font-size: 0.68rem;
  }

  .btn-lg {
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
  }
}

/* ═══ EXTRA SMALL (≤360) ═══ */
@media (max-width: 360px) {
  :root {
    --header-h: 60px;
  }

  .container {
    padding-inline: 0.75rem;
  }

  .home-glass__stat-val {
    font-size: 1.25rem;
  }

  .practice-card h3 {
    font-size: 0.95rem;
  }

  .footer-gov__card {
    padding: 1rem;
  }
}

/* ═══ LANDSCAPE PHONES ═══ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero,
  .home-hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + 1rem) 2rem;
  }

  .home-hero__scroll,
  .home-hero__beams {
    display: none;
  }

  .home-glass--elite {
    display: none;
  }

  .nav-links {
    overflow-y: auto;
    max-height: calc(100dvh - var(--header-h) - var(--safe-top));
  }
}

/* ═══ TABLET LANDSCAPE / SMALL LAPTOP (769–1024) ═══ */
@media (min-width: 769px) and (max-width: 1024px) {
  .home-trust__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-trust-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin-inline: auto;
  }

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

  .home-portal {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-portal__card:nth-child(4),
  .home-portal__card:nth-child(5) {
    grid-column: span 1;
  }
}

/* ═══ LARGE DESKTOP (≥1440) ═══ */
@media (min-width: 1440px) {
  :root {
    --container-max: 1400px;
  }

  .home-hero__inner {
    gap: 4rem;
  }
}

/* ═══ ULTRA-WIDE (≥1920) ═══ */
@media (min-width: 1920px) {
  :root {
    --container-max: 1520px;
  }
}

/* ── Coarse pointer: reduce hover motion ── */
@media (pointer: coarse) {
  .portal-card:hover,
  .practice-card:hover,
  .home-svc__card:hover,
  .home-portal__card:hover,
  .home-trust-card:hover,
  .home-pillar:hover {
    transform: none;
  }
}