/* -------------------------------------------------------------------------
   UI/UX Pro Max refresh
   Visual polish, motion system, responsive fixes and interaction states.
   ------------------------------------------------------------------------- */

:root {
  --surface-cream: #f7f3ea;
  --surface-paper: #fffdf8;
  --ink: #071d3f;
  --ink-soft: #4f6078;
  --gold-bright: #d9a948;
  --gold-700: #8b5d12;
  --gold-soft: #f6e7bf;
  --line-soft: rgba(7, 29, 63, 0.11);
  --shadow-soft: 0 18px 55px rgba(7, 29, 63, 0.1);
  --shadow-hover: 0 24px 70px rgba(7, 29, 63, 0.16);
}

html {
  background: var(--surface-cream);
}

body {
  color: var(--ink);
  background: var(--surface-cream);
  overflow-x: clip;
}

::selection {
  background: var(--gold-bright);
  color: var(--ink);
}

/* More consistent display hierarchy for Arabic text. */
h1, h2, h3, h4, h5, h6,
.logo-name, .nav-link, .btn-pill-navy, .btn-pill-outline,
.btn-premium, .section-label, .practice-tag {
  font-family: var(--font-display);
}

p {
  color: var(--ink-soft);
}

/* Header */
.header {
  height: 82px;
  background: rgba(247, 243, 234, 0.88);
  border-bottom-color: rgba(7, 29, 63, 0.08);
  box-shadow: 0 6px 24px rgba(7, 29, 63, 0.035);
}

.header.scrolled {
  height: 72px;
  background: rgba(255, 253, 248, 0.95);
  box-shadow: 0 12px 32px rgba(7, 29, 63, 0.11);
}

.header-inner {
  gap: 24px;
}

.logo {
  transition: transform var(--motion-ui);
}

.logo:hover {
  transform: translateY(-1px);
}

.logo-img {
  height: 50px;
}

.logo-img.logo-cream,
.footer-logo-img.logo-gold {
  mix-blend-mode: normal;
  filter: none;
}

.footer-logo-img.logo-gold {
  height: 54px;
}

.logo-name {
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.logo-tagline {
  color: var(--ink-soft);
}

.nav-list {
  gap: 4px;
}

.nav-link {
  min-height: 44px;
  padding-inline: 13px;
  color: rgba(7, 29, 63, 0.78);
}

.nav-link:hover,
.nav-link.active {
  color: var(--ink);
}

.lang-switch {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Buttons: three clear visual tiers, with touch-friendly sizing and feedback. */
.btn-pill-navy,
.btn-pill-outline,
.btn-premium,
.cta-phone,
.cta-whatsapp {
  position: relative;
  min-height: 48px;
  border-radius: 999px;
  transition:
    transform var(--motion-ui),
    box-shadow var(--motion-ui),
    background var(--motion-ui),
    border-color var(--motion-ui),
    color var(--motion-ui);
}

.btn-pill-navy,
.btn-premium {
  box-shadow: 0 10px 22px rgba(7, 29, 63, 0.15);
}

.btn-pill-navy::before,
.btn-premium::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.22), transparent 34%);
  opacity: 0;
  transition: opacity var(--motion-ui);
  pointer-events: none;
}

.btn-pill-navy:hover,
.btn-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(7, 29, 63, 0.23);
}

.btn-pill-navy:hover::before,
.btn-premium:hover::before {
  opacity: 1;
}

.btn-pill-outline {
  background: rgba(255, 253, 248, 0.74);
  border-color: rgba(7, 29, 63, 0.18);
  color: var(--ink);
}

.btn-pill-outline:hover {
  transform: translateY(-3px);
  background: var(--surface-paper);
  border-color: var(--gold-bright);
  box-shadow: 0 12px 28px rgba(7, 29, 63, 0.1);
}

.btn-pill-navy:active,
.btn-pill-outline:active,
.btn-premium:active {
  transform: translateY(-1px) scale(0.985);
}

.btn-arrow {
  transition: transform var(--motion-ui);
}

.btn-pill-navy:hover .btn-arrow,
.btn-pill-outline:hover .btn-arrow,
.btn-premium:hover .btn-arrow {
  transform: translateX(-4px);
}

/* Hero: stronger contrast, reliable headline visibility and restrained motion. */
.hero-light {
  min-height: min(860px, 100dvh);
  background: var(--surface-cream);
}

.hero-light-bg {
  filter: saturate(0.72) contrast(1.02);
}

.hero-light-shade {
  background:
    linear-gradient(to left, rgba(247, 243, 234, 0.6) 0%, rgba(247, 243, 234, 0.4) 32%, transparent 62%),
    linear-gradient(to top, rgba(247, 243, 234, 0.7) 0%, transparent 26%),
    linear-gradient(to bottom, rgba(247, 243, 234, 0.55) 0%, transparent 20%);
}
[dir="ltr"] .hero-light-shade {
  background:
    linear-gradient(to right, rgba(247, 243, 234, 0.6) 0%, rgba(247, 243, 234, 0.4) 32%, transparent 62%),
    linear-gradient(to top, rgba(247, 243, 234, 0.7) 0%, transparent 26%),
    linear-gradient(to bottom, rgba(247, 243, 234, 0.55) 0%, transparent 20%);
}

.hero-light-container {
  padding-top: clamp(120px, 17vh, 180px);
  padding-bottom: clamp(90px, 12vh, 140px);
}

.hero-light-inner {
  max-width: 650px;
  padding: 30px 0 36px;
}

/* The hero is the first viewport: never leave its primary copy hidden while
   an observer is waiting for the exact mobile intersection point. */
.hero-light-inner.reveal {
  opacity: 1;
  transform: none;
}

.page-hero.has-photo .page-hero-content.reveal {
  opacity: 1;
  transform: none;
}

.page-hero.has-photo {
  min-height: 650px;
}

.page-hero.has-photo .page-hero-photo {
  opacity: 0.3;
  filter: saturate(0.78) contrast(1.06);
}

.page-hero.has-photo .page-hero-title {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
}

.page-hero.has-photo .page-hero-description {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.24);
}

.service-row,
.service-row > span:first-child,
.svc-layout,
.svc-content,
.service-group-list {
  min-width: 0;
}

.service-row > span:first-child {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .svc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mobile-menu-overlay {
  overflow: hidden;
}

.mobile-menu {
  transform: none;
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--motion-duration-slower) var(--motion-easing-spring);
}

.mobile-menu-overlay.open .mobile-menu {
  transform: none;
  clip-path: inset(0);
}

.page-hero-inner,
.page-hero.has-photo .page-hero-content,
.page-hero.has-photo .page-hero-title,
.page-hero.has-photo .page-hero-description {
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
}

.hero-light-inner::before {
  content: 'الجهيني والبراهمي';
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--gold-600);
  font: 700 0.75rem/1 var(--font-mono);
  letter-spacing: 0.14em;
}

.hero-light-inner::after {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  margin-top: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-bright), transparent);
}

.hero-light-title {
  max-width: 12.5ch;
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 5.2vw, 4.8rem);
  line-height: 1.2;
  letter-spacing: -0.065em;
  text-wrap: balance;
  /* shadow intentionally NOT set here - the single tight drop shadow below owns it */
}

.hero-light-title .line-navy {
  color: var(--ink);
}

.hero-light-title .line-gold {
  color: #aa7623;
}

.hero-light-sub {
  max-width: 47ch;
  margin-bottom: 30px;
  color: #31445e;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 2;
}

.hero-light-actions {
  gap: 12px;
}

.hero-light-actions .btn-pill-navy,
.hero-light-actions .btn-pill-outline {
  padding-inline: 24px;
}

.hero-caption {
  left: 28px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

/* Replace the blank typewriter phase with an accessible line entrance. */
.hero-line-enter {
  /* Keep primary copy available even if CSS animation time is paused by a
     background tab or a headless preview. */
  opacity: 1;
  transform: none;
}

@keyframes hero-line-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sections and cards */
.section {
  padding-block: clamp(72px, 9vw, 128px);
}

.section-header {
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-label {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--gold-700);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

.section-title {
  margin-bottom: 14px;
  font-size: clamp(1.75rem, 3.1vw, 2.6rem);
  line-height: 1.35;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section-description {
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.95;
}

.divider {
  width: 84px;
  height: 4px;
  margin-top: 20px;
}

.practice-areas {
  background: #f1ebdb;
}

/* Practice cards: equal height, equal photo treatment.
   `align-items: stretch` plus a shared min-height keeps the two cards level
   even when their copy differs in length. */
.practice-grid {
  gap: 24px;
  align-items: stretch;
}

.practice-card {
  border-color: rgba(7, 29, 63, 0.1);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(7, 29, 63, 0.045);
  display: flex;
}
.practice-card-inner { width: 100%; }

.practice-card:hover,
.practice-card.touch-hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}

.practice-card-inner {
  min-height: 510px;
}

.practice-visual {
  min-height: 510px;
}

/* Photography cards carry their own navy scrim (see .practice-visual-bg), so the
   extra ::after gradient stacked a SECOND dark layer on top and , combined with a
   screen-blended photo at 0.34 opacity , washed the artwork out. Scrim once, and
   show the photo properly. */
.practice-visual:not(.has-photo)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 29, 63, 0.42));
  pointer-events: none;
}

.practice-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  mix-blend-mode: normal;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity var(--motion-ui);
}

.practice-card:hover .practice-photo,
.practice-card.touch-hover .practice-photo {
  opacity: 0.88;
  transform: scale(1.06);
}

.practice-visual-content {
  position: relative;
  z-index: 2;
}

.practice-icon-wrapper {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.practice-icon-wrapper .icon {
  width: 46px;
  height: 46px;
}

.practice-content {
  padding: clamp(28px, 4vw, 48px);
}

.practice-content-title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.04em;
}

.practice-feature {
  padding-block: 4px;
}

.practice-feature-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-600);
  font-size: 0.8rem;
  font-weight: 800;
}

.practice-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: var(--navy-700);
  font-weight: 800;
}

.practice-cta .icon {
  transition: transform var(--motion-ui);
}

.practice-card:hover .practice-cta .icon {
  transform: translateX(-6px);
}

/* About and contact surfaces */
.about-section {
  background: var(--surface-paper);
}

.about-image,
.contact-photo {
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

.about-image::after,
.contact-photo::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  pointer-events: none;
}

/* (.about-stat styles removed with the duplicated stat card.)
   The single remaining figure is the floating badge on the About photo. */

.contact-section {
  background: #f9f7f2;
}

.contact-form-wrapper {
  border: 1px solid var(--line-soft);
  border-radius: 28px;
  background: var(--surface-paper);
  box-shadow: var(--shadow-soft);
}

.form-input,
.form-select,
.form-textarea {
  min-height: 52px;
  border: 1px solid rgba(7, 29, 63, 0.15);
  border-radius: 14px;
  background: #fffefa;
  transition: border-color var(--motion-ui), box-shadow var(--motion-ui), background var(--motion-ui);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold-bright);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(217, 169, 72, 0.16);
  outline: none;
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-error-text {
  color: #a93838;
  font-size: 0.8rem;
}

/* Better touch targets and mobile layout. */
@media (max-width: 1024px) {
  .nav-desktop {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .header-cta {
    margin-inline-start: auto;
  }

  .header-cta .btn-pill-outline {
    display: none;
  }

  .hero-light-title {
    max-width: 13ch;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
  }

  .header,
  .header.scrolled {
    height: 70px;
  }

  .header-inner {
    padding-inline: 16px;
  }

  .header-cta {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
  }

  .header-cta .btn-pill-navy {
    min-height: 42px;
    padding-inline: 14px;
    font-size: 0.78rem;
  }

  .lang-switch {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    width: 44px;
    height: 44px;
    margin-inline-start: 4px;
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.6);
  }

  .hero-light {
    min-height: 760px;
    align-items: flex-end;
  }

  .hero-light-bg {
    object-position: 30% center;
    opacity: 0.58;
  }

  .hero-light-shade {
    background:
      linear-gradient(to top, #f7f3ea 10%, rgba(247, 243, 234, 0.8) 40%, rgba(247, 243, 234, 0.3) 100%);
  }

  .hero-light-container {
    padding: 110px 16px 76px;
  }

  .hero-light-inner {
    padding: 22px 0;
    text-align: right;
  }

  .hero-light-inner::before {
    margin-bottom: 18px;
  }

  .hero-light-title {
    max-width: none;
    font-size: clamp(2.65rem, 12vw, 4.25rem);
  }

  .hero-light-sub {
    max-width: 38ch;
    font-size: 1rem;
    line-height: 1.9;
  }

  .hero-light-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-light-actions .btn-pill-navy,
  .hero-light-actions .btn-pill-outline {
    width: 100%;
  }

  .page-hero.has-photo {
    width: 100%;
    max-width: 100vw;
    min-height: 720px;
    overflow: hidden;
  }

  .page-hero.has-photo .page-hero-inner {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding: 110px 16px 54px;
  }

  .page-hero.has-photo .page-hero-title {
    font-size: clamp(2.2rem, 10vw, 3.3rem);
    line-height: 1.25;
  }

  .page-hero.has-photo .page-hero-description {
    font-size: 1rem;
  }

  .page-hero.has-photo .page-hero-stats {
    justify-content: space-between;
    gap: 12px;
  }

  .page-hero.has-photo .stat-item {
    min-width: 0;
    flex: 1;
  }

  .page-hero.has-photo .stat-number {
    font-size: 1.75rem;
  }

  .page-hero.has-photo .stat-label {
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .practice-card-inner {
    min-height: 0;
  }

  .practice-visual {
    min-height: 310px;
  }

  .practice-content {
    min-height: 360px;
  }

  .section-description {
    font-size: 1rem;
  }

  .contact-form-wrapper {
    border-radius: 22px;
  }

  .mobile-menu {
    max-width: min(360px, 92vw);
    padding: 24px 20px;
  }

  .mobile-menu-header {
    margin-bottom: 24px;
  }

  .mobile-nav-link {
    min-height: 50px;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    display: none;
  }

  .logo-img {
    height: 44px;
    max-width: 136px;
  }

  .header-cta .btn-pill-navy {
    padding-inline: 12px;
  }

  .hero-light {
    min-height: 720px;
  }

  .hero-light-title {
    font-size: 2.55rem;
  }

  .hero-caption {
    display: none;
  }

  .page-hero.has-photo {
    display: block;
  }

  .page-hero.has-photo .page-hero-inner {
    display: block;
  }

  .practice-content {
    padding: 28px 22px;
  }

  .practice-features {
    margin-bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-line-enter {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .btn-pill-navy,
  .btn-pill-outline,
  .btn-premium,
  .practice-card,
  .practice-photo,
  .img-restrained img {
    transition: none !important;
  }
}

html[dir="ltr"] .hero-light-inner::before {
  content: 'EL-GUHEINY & AL-BRAHIMI';
  letter-spacing: 0.08em;
}

/* Adapted motion: about image hover physics (700ms ease-out, clipped) */
.about-image { overflow: hidden; }
.about-image img {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.about-image:hover img { transform: scale(1.04); }
/* ============ Local coverage (areas we serve) ============
   Gives the local-intent queries a real block of content: one card per
   governorate with what we actually do there, rather than a keyword list. */
.local-coverage { background: var(--surface-paper); }
.local-coverage .container { max-width: 1180px; }

.local-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 860px) {
  .local-coverage-grid { grid-template-columns: 1fr; }
}

.local-card {
  background: var(--white);
  border: 1px solid var(--line-soft, rgba(7, 29, 63, 0.11));
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: border-color var(--motion-ui), transform var(--motion-ui), box-shadow var(--motion-ui);
}
.local-card:hover {
  border-color: var(--gold-400);
  transform: translateY(-4px);
  box-shadow: 0 18px 42px -22px rgba(7, 29, 63, 0.28);
}

.local-card-title {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--gold-500);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--navy-900);
}

.local-card-text {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.95;
}

@media (prefers-reduced-motion: reduce) {
  .local-card { transition: none; }
  .local-card:hover { transform: none; }
}

/* Hero text: entrance choreography + one plain drop shadow.
   Keep this to a SINGLE tight shadow. Stacking layers (and any wide blur such as
   10-42px) turns into a grey smudge around the glyphs on a photographic
   background, which reads as dirty rather than lifted. */
.hero-light-title {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
}
.hero-light-title .line-navy {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.32);
}
.hero-light-title .line-gold {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.30);
}
.hero-light-sub {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* Single, even scrim so the copy always sits on a calm band. One layer only -
   the stacked gradients that washed the photo out earlier are not restored. */
/* Hero scrim. 80% cream wash on the copy side — the 50% pass still left the
   navy headline faint over the bright desk area. A faint floor keeps the white
   caption legible at the bottom edge. */
.hero-light-shade {
  background:
    linear-gradient(to left, rgba(247, 243, 234, 0.8) 0%, rgba(247, 243, 234, 0.5) 44%, rgba(247, 243, 234, 0.06) 78%),
    linear-gradient(to top, rgba(6, 20, 42, 0.24) 0%, transparent 26%);
}
[dir="ltr"] .hero-light-shade {
  background:
    linear-gradient(to right, rgba(247, 243, 234, 0.8) 0%, rgba(247, 243, 234, 0.5) 44%, rgba(247, 243, 234, 0.06) 78%),
    linear-gradient(to top, rgba(6, 20, 42, 0.24) 0%, transparent 26%);
}

/* Line-by-line reveal: each line slides out from behind its own mask. */
.hero-light-title .type-line {
  display: block;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  body.loaded .hero-light-title .type-line {
    animation: hero-line-mask 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body.loaded .hero-light-title .type-line:nth-child(2) { animation-delay: 0.14s; }
  body.loaded .hero-light-sub { animation: hero-sub-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }
  body.loaded .hero-light-actions { animation: hero-sub-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both; }
}
@keyframes hero-line-mask {
  from { transform: translate3d(0, 105%, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes hero-sub-in {
  from { transform: translate3d(0, 16px, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
/* Reduced motion keeps the copy fully visible with its shadow, minus movement. */
@media (prefers-reduced-motion: reduce) {
  .hero-light-title .type-line,
  .hero-light-sub,
  .hero-light-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Single hero photograph.
   The previous build crossfaded between the brand photo and an unrelated stock
   photo, so the hero silently changed subject every 10 seconds. One image now
   carries the section; the hero-bg-b <img> was removed from the markup. */
body.loaded .hero-light-bg.hero-bg-a {
  animation:
    hero-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    hero-drift 24s ease-in-out 3s infinite alternate;
}
/* The mirrored LTR variants are gone: the photo must never flip, because its
   baked-in book titles would read backwards. Both directions share one
   non-mirrored settle/drift; only `object-position` shifts the crop. */
/* The hero-bg-b <img> and its crossfade keyframes were removed from the markup,
   so the mirrored/duplicate keyframe set is gone too. Only one image remains. */

/* Tone down homepage whites: deeper warm neutrals, one family.
   The practice-areas gradient is defined ONCE here (early copy removed) so no
   later rule can re-add the heavy gold wash that swamped the lighter tint. */
.clients-bar { background: #ece4d0; border-color: rgba(7, 29, 63, 0.12); }
.about-section { background: #faf4e6; }
.contact-section { background: #f0e9d6; }
.practice-card {
  background: #fffdf8;
}
.contact-form-wrapper { background: #fffdf8; }

@media (prefers-reduced-motion: reduce) {
  body.loaded .hero-light-bg.hero-bg-a { animation: none; }
}

/* Expandable service rows: tap for inline details, no navigation */
.service-row-wrap { border-bottom: 1px solid var(--border-light); }
.service-row-wrap .service-row {
  border-bottom: none;
  width: 100%;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font: inherit;
  cursor: pointer;
  text-align: right;
}
[dir="ltr"] .service-row-wrap .service-row { text-align: left; }
.service-row .row-plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.service-row .row-plus::before,
.service-row .row-plus::after {
  content: '';
  position: absolute;
  background: var(--gold-600);
  top: 50%;
  right: 50%;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-row .row-plus::before { width: 14px; height: 2px; transform: translate(50%, -50%); }
.service-row .row-plus::after { width: 2px; height: 14px; transform: translate(50%, -50%); }
.service-row-wrap.open .service-row-title { color: var(--gold-700); }
.service-row-wrap.open .row-plus::after { transform: translate(50%, -50%) scaleY(0); }
.service-row-more { max-height: 0; overflow: hidden; transition: max-height 350ms cubic-bezier(0.16, 1, 0.3, 1); }
.service-row-wrap.open .service-row-more { max-height: 320px; }
.service-row-more p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.9;
  padding: 0 12px;
  max-width: 65ch;
}
.service-row-more .text-link { margin: 10px 12px 18px; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) {
  .service-row-more { transition: none; }
  .service-row .row-plus::before,
  .service-row .row-plus::after { transition: none; }
}

/* Arabic-script guard: any letter-spacing (even negative) disconnects Arabic
   letter joins in most browsers, so it stays 0 on Arabic copy. Latin keeps it. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .hero-light-title, html[lang="ar"] .section-title,
html[lang="ar"] .practice-content-title, html[lang="ar"] .section-label,
html[lang="ar"] .practice-tag, html[lang="ar"] .nav-link,
html[lang="ar"] .logo-name, html[lang="ar"] .hero-light-inner::before,
html[lang="ar"] .lang-switch, html[lang="ar"] .btn-pill-navy,
html[lang="ar"] .btn-pill-outline, html[lang="ar"] .btn-premium,
html[lang="ar"] .faq-row-btn, html[lang="ar"] .service-row-title,
html[lang="ar"] .practice-cta, html[lang="ar"] .hero-caption,
html[lang="ar"] .clients-label { letter-spacing: 0; }

/* Honeypot anti-spam field: invisible to humans, traps bots.
   Never offset it off-screen (e.g. left: -9999px) — in RTL that inflates
   document scrollWidth and stretches the whole page horizontally. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* ui-ux-pro-max: contrast fixes (measured, WCAG 2.1 §1.4.3) */
.service-row:hover .service-row-title,
.text-link:hover,
.pager-minimal:hover { color: var(--gold-700); }
.service-row-desc, .stat-label, .svc-toc-title { color: #5f6368; }

/* ui-ux-pro-max: touch targets >=44px (pro-rules checklist) */
.nav-link { min-height: 44px; }
.social-link { width: 44px; height: 44px; }
.pager-minimal { min-height: 44px; }
.practice-cta { min-height: 44px; }
input, select, textarea { scroll-margin-top: calc(var(--header-height) + 16px); }

/* Form error summary (ux-guidelines: focusable error summary) */
.form-error-summary {
  border: 1px solid #b3261e;
  border-inline-start: 4px solid #b3261e;
  background: #fdf0ef;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.form-error-summary:focus { outline: 2px solid #b3261e; outline-offset: 2px; }
.form-error-summary-title { font-weight: 800; color: #7f1d1d; margin-bottom: 8px; }
.form-error-summary ul { display: flex; flex-direction: column; gap: 6px; }
.form-error-summary a { color: #7f1d1d; text-decoration: underline; text-underline-offset: 3px; font-size: 0.9rem; }

/* Clients: soft bordered pills, gold edge + lift on hover */
.client-logo {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms;
}
.client-logo:hover {
  border-color: var(--gold-400);
  background: #fffdf8;
  transform: translateY(-3px);
}

/* Contact: icon flips navy-to-gold on row hover */
.contact-icon { transition: background 300ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms, transform 300ms cubic-bezier(0.16, 1, 0.3, 1); }
.contact-item:hover .contact-icon {
  background: var(--gold-500);
  color: var(--navy-900);
  transform: translateY(-2px);
}
.contact-form-wrapper { transition: border-color 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms; }
.contact-form-wrapper:focus-within {
  border-color: var(--gold-400);
  box-shadow: 0 18px 55px rgba(7, 29, 63, 0.1);
}

/* Client logo images in the marquee: each PNG is already trimmed to its own
   artwork, so a single shared HEIGHT makes every logo read at the same optical
   size regardless of whether it is a wide wordmark or a stacked emblem. */
.client-logo img {
  width: auto;
  height: 54px;
  max-width: 190px;
  object-fit: contain;
  display: block;
  padding: 0;
}
@media (max-width: 768px) {
  .client-logo img { height: 44px; max-width: 150px; }
}

/* Marquee: exact half-width loop (the track holds two identical runs of 14).
   Because flex `gap` contributes only 27 gaps for 28 cells, a plain -50%
   lands half a gap short and the strip visibly jumps once per cycle. */
.marquee-track { --marquee-gap: var(--space-12); gap: var(--marquee-gap); }
@keyframes marquee-scroll {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

/* Brand artwork reads at full colour; only a light resting fade, cleared on hover */
.clients-bar .client-badge.client-logo {
  filter: none;
  opacity: 0.88;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms;
}
.clients-bar .client-badge.client-logo:hover {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .clients-bar .client-badge.client-logo { opacity: 1; }
}

/* Resting photos keep their colour.
   A full grayscale(1) resting state left the About photo looking washed-out
   and unlabeled (nothing told the user colour returns on hover), so the brand
   imagery read as broken rather than styled. Colour stays; hover keeps its
   slow zoom. */
.about-image img,
.contact-photo img,
.person-photo img {
  filter: none;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-image:hover img,
.contact-photo:hover img,
.person-photo:hover img {
  filter: none;
}

/* Practice cards stay equal height (grid stretch, no offsets) */
@media (min-width: 1025px) {
  .practice-grid { align-items: stretch; }
  .practice-card-inner { height: 100%; }
}

/* Floating badge over office photo (slow, calm) */
.about-image-badge { animation: badge-float 5s ease-in-out infinite; }
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Underline-offset footer links */
.footer-nav-link, .footer-legal-link { text-underline-offset: 4px; }
.footer-nav-link:hover, .footer-legal-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
}

@media (prefers-reduced-motion: reduce) {
  .about-image-badge { animation: none; }
  .section-header .divider { transition: none; }
  .practice-photo,
  .about-image img,
  .contact-photo img,
  .person-photo img { transition: none; }
}

/* Brand logo: never flash the old lockup — text hidden from first paint
   via CSS; JS only reveals it if the image file itself is broken */
.logo-fallback, .footer-logo-fallback { display: none; }
.logo:has(> img[data-logo-fallback]) .logo-text,
.footer-logo:has(> img[data-logo-fallback]) .footer-logo-text { display: none; }
.logo.no-img .logo-fallback, .footer-logo.no-img .footer-logo-fallback { display: flex; }
.logo.no-img .logo-text, .footer-logo.no-img .footer-logo-text { display: flex; }

/* WhatsApp chooser: visible phone numbers */
.wa-opt-phone {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-700);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* About: wider box on both sides so copy clears the edges */
.about-section .container { max-width: 1380px; }
@media (max-width: 900px) {
  .about-section .container { max-width: 100%; }
}

/* Light pattern dressing: one faint dot texture across light sections */
.practice-areas, .about-section, .contact-section, .clients-bar { position: relative; }
.practice-areas::after, .about-section::after,
.contact-section::after, .clients-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 29, 76, 0.06) 1px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none;
}
.practice-areas > *, .about-section > *,
.contact-section > *, .clients-bar > * { position: relative; z-index: 1; }

/* Ambient image motion: constant gentle drift on all photography */
@media (prefers-reduced-motion: no-preference) {
  .practice-photo,
  .about-image img,
  .contact-photo img,
  .person-photo img,
  .cta-band-photo {
    animation: img-drift 16s ease-in-out infinite alternate;
  }
  .about-image img { animation-duration: 19s; }
  .contact-photo img { animation-duration: 14s; }
  .cta-band-photo { animation-duration: 24s; }
  @keyframes img-drift {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
  }
}

/* Footer contact rows rendered as buttons (WhatsApp chooser) */
button.footer-contact-item {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: right;
  width: 100%;
}
[dir="ltr"] button.footer-contact-item { text-align: left; }

/* WhatsApp chooser popup: pick lawyer or accountant */
.wa-pop {
  position: fixed;
  bottom: 88px;
  right: 50%;
  transform: translateX(50%) translateY(12px) scale(0.97);
  z-index: 9990;
  width: min(330px, calc(100vw - 32px));
  background: var(--white);
  border: 1px solid var(--gold-300);
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(2, 29, 76, 0.35);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 250ms;
}
.wa-pop.open { opacity: 1; visibility: visible; transform: translateX(50%) translateY(0) scale(1); }
.wa-pop-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--navy-900); }
.wa-pop-sub { font-size: 0.83rem; color: var(--text-secondary); margin: 4px 0 14px; }
.wa-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: right;
  transition: border-color 200ms, background 200ms;
}
[dir="ltr"] .wa-opt { text-align: left; }
.wa-opt + .wa-opt { margin-top: 10px; }
.wa-opt:hover { border-color: var(--gold-500); background: var(--gold-50); }
.wa-opt-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-400);
}
.wa-opt-icon svg { width: 20px; height: 20px; }
.wa-opt-name { display: block; font-weight: 700; font-size: 0.95rem; color: var(--navy-900); }
.wa-opt-desc { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.wa-pop-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}
.wa-pop-close:hover { background: var(--gray-100); color: var(--navy-900); }
@media (prefers-reduced-motion: reduce) {
  .wa-pop { transition: none; }
  .wa-pop.open { transform: translateX(50%); }
}

/* EN hero: hide clipped watermark glyph that reads as a glitch */
[dir="ltr"] .hero-watermark { display: none; }

/* About: breathing room so copy never touches box edges */
.about-content-grid { gap: clamp(32px, 5vw, 72px); }
.about-text { max-width: 62ch; }
.about-description p + p { margin-top: 16px; }
@media (max-width: 900px) { .about-text { max-width: 100%; } }

/* Phone glyph inside call button */
.cta-phone .btn-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Contact buttons rendered as <button> inherit typeface */
button.btn-pill-navy, button.btn-pill-outline,
button.cta-phone, button.cta-whatsapp,
button.footer-contact-item, button.social-link { font-family: inherit; cursor: pointer; }
button.footer-contact-item, button.social-link { padding: 0; }

/* Motion pack: hero choreography, divider draw, stagger, progress hairline */
/* Hero text entrance is defined next to the shadow rules above
   (hero-line-mask / hero-sub-in). The previous block-long `hero-rise` on every
   direct child is removed so two animations never fight over the same nodes. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-header .divider {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
[dir="ltr"] .section-header .divider { transform-origin: left center; }
.section-header.in .divider { transform: scaleX(1); }
[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-i, 0) * 90ms);
}
[data-stagger].in > * { opacity: 1; transform: none; }
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transform-origin: right center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}
[dir="ltr"] .scroll-progress { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  body.loaded .hero-light-inner > * { animation: none; }
  .section-header .divider { transform: none; transition: none; }
  [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none; }
}