/* =============================================
   NADAV DISHON LAW FIRM — DESIGN SYSTEM
   Based on Figma: 51qURtiHw4JbNTQQRYop8Y
   ============================================= */

/* ---- CUSTOM PROPERTIES (Design Tokens) ---- */
:root {
  --text-100: #293d52;
  --gold-100: #b0904c;
  --gold-24: rgba(176, 144, 76, 0.24);
  --white-100: #ffffff;
  --white-87: rgba(255, 255, 255, 0.87);
  --white-24: rgba(255, 255, 255, 0.24);
  --bg-light: #faf3eb;
  --footer-bg: #1f2d3c;
  --footer-bottom-bg: #3d4d5e;
  --dark-blue-8: rgba(41, 61, 82, 0.08);
  --dark-blue-4: rgba(41, 61, 82, 0.04);
  --text-60: rgba(41, 61, 82, 0.6);

  /* Typography */
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --font-hebrew: 'Noto Sans Hebrew', sans-serif;
}

/* ---- RESET & BASE ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  color: var(--text-100);
  background: #fff;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px 0 200px;
  z-index: 1000;
  transition: background 0.3s;
}

/* Light-background pages need the bar filled from the start —
   the nav text is white and would otherwise sit invisibly on cream. */
.nav.solid {
  background: rgba(41, 61, 82, 0.92);
  backdrop-filter: blur(12px);
}

.nav.scrolled {
  background: rgba(41, 61, 82, 0.92);
  backdrop-filter: blur(12px);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon {
  height: 42px;
  width: auto;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-name {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: 700;
  color: var(--white-100);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.logo-adv {
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-87);
  letter-spacing: 2px;
}

/* Centered Nav Menu */
.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white-24);
  backdrop-filter: blur(8px);
  border-radius: 200px;
  padding: 0 40px;
  height: 64px;
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--white-100);
  text-align: center;
  letter-spacing: 0.15px;
  line-height: 1.5;
  transition: font-weight 0.15s;
  text-decoration: none;
}

.nav-item.active,
.nav-item:hover {
  font-weight: 700;
  border-top: 1px solid var(--white-100);
  border-bottom: 1px solid var(--white-100);
}

/* Language Button */
.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--white-87);
  border-radius: 100px;
  padding: 6px 16px;
  color: var(--white-100);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.46px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.lang-btn:hover {
  background: var(--white-24);
}

.flag-icon {
  font-size: 16px;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 2px;
}

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 200px;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(41, 61, 82, 0.65) 0%,
    rgba(41, 61, 82, 0.2) 60%,
    rgba(41, 61, 82, 0) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 595px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-firm-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-100);
  line-height: normal;
}

.hero-tagline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-tagline-1 {
  font-size: 80px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 88px;
}

.hero-tagline-2 {
  font-size: 80px;
  font-weight: 800;
  color: var(--white-100);
  line-height: 88px;
}

.hero-description {
  font-size: 24px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

/* Animated CTA Button */
.btn-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--white-100);
  border: 4px solid var(--gold-24);
  border-radius: 100px;
  padding: 12px 14px 12px 24px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-100);
  letter-spacing: 0.15px;
  line-height: 1.6;
  cursor: pointer;
  width: fit-content;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}

.btn-animated:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(176, 144, 76, 0.3);
}

.btn-animated.dark {
  /* same style, already white bg */
}

.btn-arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 120px;
  background: var(--text-100);
  flex-shrink: 0;
}

/* Rotating Badge */
.rotating-badge {
  position: absolute;
  right: max(48px, calc(50% - 770px));
  bottom: 160px;
  width: 208px;
  height: 208px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-ring {
  position: absolute;
  inset: 0;
  animation: spin-badge 20s linear infinite;
}

@keyframes spin-badge {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.badge-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

/* =============================================
   TAGLINE SECTION
   ============================================= */
.tagline-section {
  position: relative;
  background: var(--bg-light);
  border-radius: 40px 40px 0 0;
  min-height: 752px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 60px 200px;
  overflow: hidden;
}

.tagline-image {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 915px;
  height: 674px;
  border-radius: 32px;
  object-fit: cover;
  object-position: center;
}

.tagline-text {
  position: relative;
  z-index: 1;
  width: 600px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tagline-heading {
  display: flex;
  flex-direction: column;
}

.tagline-h1 {
  font-size: 48px;
  font-weight: 400;
  color: var(--text-100);
  line-height: 1.1;
}

.tagline-h1-gold {
  font-weight: 700;
  color: #b0904c;
}

.tagline-h1-bold {
  font-weight: 800;
}

.tagline-h2 {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.1;
}

.tagline-description {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

.tagline-quote {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

/* =============================================
   SERVICES
   ============================================= */
.services {
  background: var(--white-100);
  display: flex;
  align-items: center;
  gap: 120px;
  padding: 120px 0 120px 200px;
  min-height: 720px;
}

.services-left {
  display: flex;
  flex-direction: column;
  gap: 52px;
  width: 480px;
  flex-shrink: 0;
}

.services-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-label {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-100);
  line-height: normal;
}

.section-label.gold {
  color: var(--gold-100);
}

.services-heading {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.167;
}

.services-description {
  font-size: 24px;
  font-weight: 400;
  color: var(--text-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

.services-nav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.services-arrow {
  width: 48px;
  height: 48px;
  border-radius: 200px;
  background: var(--dark-blue-8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.services-arrow:hover {
  background: rgba(41, 61, 82, 0.15);
}

/* Service Cards Carousel */
.services-cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  height: 480px;
  align-items: flex-start;
  padding-right: 200px;
}

.services-cards::-webkit-scrollbar {
  display: none;
}

.service-card {
  position: relative;
  width: 400px;
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  padding-bottom: 60px;
}

.service-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(41,61,82,0) 0%, rgba(41,61,82,0.6) 82%);
}

.service-card-accent {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 400px;
  background: var(--gold-100);
  border-radius: 0 8px 8px 0;
}

.service-card-number {
  position: relative;
  z-index: 1;
  font-size: 60px;
  font-weight: 800;
  color: var(--white-100);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.service-card-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-card-title {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: 700;
  color: var(--white-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

.service-card-body {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.service-card:hover .service-card-body {
  opacity: 1;
  transform: translateY(0);
}

.service-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(41, 61, 82, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover .service-card-hover-overlay {
  opacity: 1;
}

/* =============================================
   ABOUT & BLOG WRAPPER
   ============================================= */
.about-blog-wrapper {
  position: relative;
  background: var(--bg-light);
  padding-bottom: 0;
}

/* =============================================
   ABOUT
   ============================================= */
.about {
  position: relative;
  z-index: 2;
  padding: 80px 200px 0;
  margin-bottom: -200px;
}

.about-bg-glow {
  position: absolute;
  left: 50%;
  top: 203px;
  transform: translateX(-50%);
  width: 1400px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(176, 144, 76, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

.about-banner {
  background: var(--text-100);
  border-radius: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* a fixed height clipped the text once the column narrowed — grow instead */
  min-height: 569.38px;
  overflow: visible;
  position: relative;
  box-shadow: 0 0 220px 80px rgba(176, 144, 76, 0.16);
}

.about-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 60px 0 60px 80px;
  flex: 1 1 280px;
  min-width: 280px;
  align-self: stretch;
}

.about-text-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-heading {
  font-size: 34px;
  font-weight: 700;
  color: var(--white-100);
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.about-description {
  font-size: 24px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.32;
  letter-spacing: 0.2px;
}

.about-image-area {
  position: relative;
  flex: 0 1 700px;
  min-width: 280px;
  align-self: flex-end;
  height: 569.38px;
}

.about-image-glow {
  position: absolute;
  left: 5%;
  top: 38%;
  width: 90%;
  height: 86%;
  background: radial-gradient(ellipse at center, rgba(176, 144, 76, 0.26) 0%, transparent 65%);
  pointer-events: none;
}

.about-image-wrap {
  position: absolute;
  left: 17%;
  right: 0;
  top: 0;
  height: 569.38px;
  overflow: hidden;
  border-radius: 0 40px 40px 0;
  background: var(--text-100);
}

.about-badge-circle {
  position: absolute;
  left: 48%;
  top: 41%;
  transform: translate(-50%, -50%);
  width: 80%;
  aspect-ratio: 1 / 1;
  opacity: 0.3;
  pointer-events: none;
}

.about-badge-circle svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Education & bar admission shown on the card itself, not only in Read More */
.about-credentials {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.about-credential dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-100);
  margin-bottom: 4px;
}

.about-credential dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--white-87);
}

.about-lawyer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =============================================
   TEAM / CONSULTANTS
   ============================================= */
/* .about carries margin-bottom:-200px so the next block overlaps it.
   The extra top padding keeps this section clear of Nadav's CTA button. */
.team {
  position: relative;
  z-index: 2;
  /* .about carries margin-bottom:-200px so the next block overlaps it.
     Cancel it here, otherwise this section sits on top of Nadav's CTA button. */
  margin-top: 200px;
  padding: 80px 200px 0;
}

.team-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 40px;
}

.team-heading {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 300px;
  padding: 36px 28px;
  background: #ffffff;
  border: 1px solid rgba(41, 61, 82, 0.10);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(41, 61, 82, 0.07);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(41, 61, 82, 0.14);
  border-color: rgba(176, 144, 76, 0.5);
}

.team-card-photo,
.team-card-monogram {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 4px solid #b0904c;
}

/* portrait crops sit high in the frame — bias the circle towards the face */
.team-card-photo { object-fit: cover; object-position: center 12%; }

.team-card-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #293d52 0%, #3a506b 100%);
  color: #ffffff;
  font-size: 46px;
  font-weight: 700;
  user-select: none;
}

.team-card-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-100);
  text-align: center;
  line-height: 1.35;
}

.team-card-role {
  display: inline-block;
  /* roles vary from one word to a full title — stay readable when it wraps */
  padding: 6px 16px;
  border-radius: 16px;
  background: rgba(176, 144, 76, 0.12);
  color: #b0904c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  max-width: 100%;
}

.team-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #293d52;
}

.team-card:hover .team-card-more { color: #b0904c; }

/* =============================================
   TEAM MEMBER PROFILE PAGE
   ============================================= */
.profile-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 180px 24px 100px;
}

.profile-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-60);
  margin-bottom: 32px;
}

.profile-breadcrumb a { color: var(--text-60); }
.profile-breadcrumb a:hover { color: #b0904c; }
.profile-breadcrumb-current { color: var(--text-100); font-weight: 600; }

.profile-header {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(41, 61, 82, 0.12);
  margin-bottom: 32px;
}

.profile-portrait { flex: 0 0 auto; }

.profile-portrait img,
.profile-monogram {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 5px solid #b0904c;
}

.profile-portrait img { object-fit: cover; object-position: center 12%; }

.profile-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #293d52 0%, #3a506b 100%);
  color: #ffffff;
  font-size: 64px;
  font-weight: 700;
  user-select: none;
}

.profile-identity { flex: 1; min-width: 0; }

.profile-name {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.25;
}

.profile-role {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 18px;
  border-radius: 16px;
  line-height: 1.5;
  background: rgba(176, 144, 76, 0.12);
  color: #b0904c;
  font-size: 15px;
  font-weight: 600;
}

.profile-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.profile-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-60);
}

.profile-contact-item:hover { color: #b0904c; }

.profile-body p {
  font-size: 17px;
  line-height: 1.85;
  color: rgba(41, 61, 82, 0.87);
}

.profile-body p + p { margin-top: 16px; }

.profile-block { margin-top: 44px; }

.profile-block-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-100);
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(176, 144, 76, 0.35);
  margin-bottom: 18px;
}

.profile-timeline { list-style: none; }

.profile-timeline-item {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
}

.profile-timeline-item + .profile-timeline-item {
  border-top: 1px dashed rgba(41, 61, 82, 0.14);
}

.profile-timeline-year {
  flex: 0 0 auto;
  min-width: 62px;
  font-size: 18px;
  font-weight: 700;
  color: #b0904c;
  font-variant-numeric: tabular-nums;
}

.profile-timeline-text {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(41, 61, 82, 0.87);
}

.profile-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.profile-tag {
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(41, 61, 82, 0.06);
  color: var(--text-100);
  font-size: 14px;
  font-weight: 600;
}

.profile-back { margin-top: 48px; }

/* =============================================
   BLOG
   ============================================= */
.blog-section {
  position: relative;
  z-index: 1;
  background: var(--bg-light);
  padding: 324px 200px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.blog-decoration {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  width: 1281px;
  height: 1281px;
  background: radial-gradient(circle, rgba(176, 144, 76, 0.05) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}

.blog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 480px;
  text-align: center;
}

.blog-heading {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.blog-posts {
  display: flex;
  gap: 16px;
  width: 100%;
}

.blog-card {
  flex: 1;
  min-width: 0;
  background: var(--white-100);
  border: 1px solid var(--dark-blue-4);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 8px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(41, 61, 82, 0.1);
}

.blog-card-image {
  position: relative;
  height: 320px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 0 16px;
}

.blog-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.6;
  letter-spacing: 0.15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-title.rtl {
  font-family: var(--font-hebrew);
  font-weight: 600;
  text-align: right;
  direction: rtl;
  line-height: 1.28;
  font-variation-settings: 'wdth' 87.5;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.blog-card-date {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-100);
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.blog-card-likes {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-100);
  line-height: 1.43;
  letter-spacing: 0.17px;
}

.heart-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-100);
  font-size: 14px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-solid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--text-100);
  border: 1px solid var(--text-100);
  border-radius: 100px;
  padding: 12px 24px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  color: var(--white-100);
  letter-spacing: 0.46px;
  line-height: 26px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}

.btn-solid:hover {
  background: #3a506b;
  transform: translateY(-1px);
}

.btn-submit {
  width: 100%;
  background: var(--gold-100);
  border: 1px solid var(--gold-100);
  border-radius: 100px;
  padding: 12px 24px;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  color: var(--white-100);
  letter-spacing: 0.46px;
  line-height: 26px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.btn-submit:hover {
  background: #9a7c3e;
  transform: translateY(-1px);
}

/* =============================================
   FOOTER
   ============================================= */
.footer {
  background: var(--footer-bg);
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100px 120px;
  gap: 80px;
}

.footer-form-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 400px;
  max-width: 700px;
}

.footer-form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.footer-contact-heading {
  font-size: 34px;
  font-weight: 700;
  color: var(--white-100);
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.footer-contact-subheading {
  font-size: 16px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.footer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.form-field {
  width: 100%;
}

.form-field.full-width {
  width: 100%;
}

.form-field input {
  width: 100%;
  height: 56px;
  background: var(--bg-light);
  border: 1px solid var(--dark-blue-4);
  border-radius: 8px;
  padding: 16px 12px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-100);
  letter-spacing: 0.15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-field input::placeholder {
  color: var(--text-60);
}

.form-field input:focus {
  border-color: var(--gold-100);
  box-shadow: 0 0 0 3px var(--gold-24);
}

.form-status {
  font-size: 14px;
  text-align: center;
  min-height: 20px;
  color: var(--white-100);
  width: 100%;
}

.form-status.success { color: #6fcf97; }
.form-status.error   { color: #eb5757; }

/* Vertical divider */
.footer-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* Footer Links */
.footer-links {
  display: flex;
  gap: 100px;
  align-items: flex-start;
  flex-shrink: 0;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 180px;
}

.footer-links-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--white-100);
  line-height: 1.75;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

.footer-links-list li a,
.footer-links-list li {
  font-size: 14px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.43;
  letter-spacing: 0.17px;
  transition: opacity 0.2s;
}

.footer-links-list li a:hover {
  opacity: 0.7;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.43;
  letter-spacing: 0.17px;
}

.footer-contact-item svg {
  flex-shrink: 0;
}

/* Footer Bottom Bar */
.footer-bottom {
  background: var(--footer-bottom-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 120px;
  white-space: nowrap;
}

.footer-copyright {
  font-size: 16px;
  font-weight: 700;
  color: var(--white-100);
  line-height: 1.75;
  letter-spacing: 0.15px;
}

.footer-policies {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-policies a {
  font-size: 16px;
  font-weight: 400;
  color: var(--white-100);
  line-height: 1.5;
  letter-spacing: 0.15px;
  transition: opacity 0.2s;
}

.footer-policies a:hover {
  opacity: 0.7;
}

.footer-policies-sep {
  font-size: 8px;
  color: var(--white-100);
}

/* =============================================
   MOBILE MENU
   ============================================= */
.nav-mobile-open .nav-menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--footer-bg);
  border-radius: 0;
  height: 100vh;
  padding: 120px 40px 40px;
  gap: 8px;
  z-index: 999;
  transform: none;
  left: 0;
}

.nav-mobile-open .nav-item {
  width: 100%;
  justify-content: flex-start;
  font-size: 24px;
  height: auto;
  padding: 16px 0;
  border-top: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1744px) {
  /* rebalance the two columns so the text column is not squeezed */
  .about-image-area { flex: 0 1 560px; }
  .tagline-section { padding: 60px 120px; }
  .tagline-image { width: 600px; height: 442px; }
}

@media (max-width: 1400px) {
  .tagline-section { flex-direction: column; min-height: auto; padding: 60px 80px; }
  .tagline-image { position: relative; left: auto; right: auto; top: auto; width: 100%; height: 420px; }
  .tagline-text { width: 100%; }
}

@media (max-width: 1440px) {
  .nav { padding: 0 40px 0 120px; }
  .hero { padding-left: 120px; }
  .about { padding: 80px 120px 0; }
  .services { padding: 100px 0 100px 120px; }
  .blog-section { padding: 324px 120px 100px; }
  .footer-main { padding: 80px 80px; gap: 60px; }
  .footer-bottom { padding: 16px 80px; }
  .tagline-section { padding: 60px 120px; }
  .footer-links { gap: 60px; }
}

@media (max-width: 1200px) {
  .nav-menu { display: none; }
  /* ABOUT: stack below 1200 — the side-by-side split leaves the text too narrow */
  .about-banner { flex-direction: column; overflow: hidden; }
  .about-text { width: 100%; padding: 40px 40px; align-self: auto; }
  .about-image-area { width: 100%; flex: none; align-self: auto; height: 420px; }
  .about-image-wrap { position: relative; left: 0; right: 0; top: 0; width: 100%; height: 420px; border-radius: 0 0 40px 40px; }
  /* a short, wide band crops hard — keep the head in frame */
  .about-lawyer-img { object-position: center 20%; }
  .about-badge-circle { display: none; }
  .about-image-glow { display: none; }
  .hamburger { display: flex; }
  .hero-tagline-1,
  .hero-tagline-2 { font-size: 60px; line-height: 68px; }
  .tagline-image { width: 100%; height: 380px; }
  .tagline-text { width: 100%; }
  .services { flex-direction: column; gap: 48px; padding: 80px 80px; }
  .services-cards { padding-right: 0; }
  .footer-main { flex-direction: column; align-items: flex-start; }
  .footer-divider { width: 100%; height: 1px; align-self: auto; }
  .footer-form-section { width: 100%; }
  .about { padding: 80px 80px 0; }
  .blog-section { padding: 324px 80px 80px; }
}

@media (max-width: 900px) {
  /* NAV: reduce height, group lang-btn + hamburger on the right */
  .nav { padding: 0 16px; height: 64px; justify-content: flex-start; }
  .lang-btn { margin-left: auto; font-size: 13px; padding: 5px 10px; }
  .logo-name { font-size: 16px; }
  .logo-adv { font-size: 11px; }

  /* HERO */
  .hero { padding: 100px 24px 60px; height: auto; min-height: 100vh; }
  .hero-tagline-1,
  .hero-tagline-2 { font-size: 48px; line-height: 56px; }
  .hero-firm-name { font-size: 18px; }
  .hero-description { font-size: 18px; }

  /* TAGLINE */
  .tagline-section { flex-direction: column; min-height: auto; padding: 40px 24px 40px; }
  .tagline-image { position: relative; left: auto; top: auto; width: 100%; height: 300px; }
  .tagline-text { width: 100%; }

  /* SERVICES: remove fixed width so it fills screen */
  .services { padding: 60px 24px; gap: 40px; }
  .services-left { width: 100%; flex-shrink: 1; }
  .services-heading { font-size: 36px; }
  /* min-width:0 lets this flex item shrink below its content width, which is what
     makes overflow-x actually scroll — without it the prev/next arrows do nothing. */
  .services-cards { padding-right: 24px; height: 420px; min-width: 0; width: 100%; }
  .service-card { width: 280px; height: 380px; flex: 0 0 280px; }

  /* HERO: center on Nadav's face on narrow screens */
  .hero-bg { object-position: center center; }
  /* The English hero photo is framed differently; at this crop 50% cuts the face in half. */
  .page-en .hero-bg { object-position: 65% 50%; }

  /* ABOUT: remove fixed widths, stack vertically */
  .about { padding: 60px 24px 0; margin-bottom: 0; }
  .about-banner { flex-direction: column; height: auto; overflow: hidden; }
  .about-rotating-badge { display: none; }
  .about-text { width: 100%; padding: 32px 24px; align-self: auto; }
  .about-image-area { width: 100%; flex: none; align-self: auto; height: 350px; }
  .about-image-glow { display: none; }
  .about-badge-circle { display: none; }
  .about-image-wrap { position: relative; left: 0; right: 0; top: 0; width: 100%; height: 350px; border-radius: 0 0 40px 40px; }
  .about-lawyer-img { width: 100%; height: 100%; object-position: center 20%; }
  .about-credential dd { font-size: 15px; }

  /* TEAM */
  .team { margin-top: 0; padding: 60px 24px 0; }
  .team-heading { font-size: 26px; }
  .team-grid { flex-direction: column; align-items: stretch; }
  .team-card { width: 100%; padding: 28px 20px; border-radius: 20px; }
  .team-card-photo, .team-card-monogram { width: 116px; height: 116px; font-size: 40px; }

  /* TEAM MEMBER PROFILE PAGE */
  .profile-page { padding: 140px 24px 60px; }
  .profile-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .profile-portrait img, .profile-monogram { width: 132px; height: 132px; font-size: 48px; }
  .profile-name { font-size: 28px; }
  .profile-body p { font-size: 16px; line-height: 1.8; }
  .profile-block-title { font-size: 19px; }
  .profile-timeline-item { gap: 14px; }
  .profile-timeline-year { min-width: 52px; font-size: 16px; }
  .profile-timeline-text { font-size: 15px; }
  /* BLOG: remove the large desktop overlap offset */
  .blog-section { padding: 60px 24px 60px; }
  .blog-posts { flex-direction: column; }
  /* The 480px desktop header overflows a phone; cap it and let the heading wrap to two lines. */
  .blog-header { width: 100%; max-width: 100%; }
  .blog-heading { font-size: 28px; line-height: 1.3; max-width: 220px; margin: 0 auto; }


  /* FOOTER */
  .footer-links { flex-wrap: wrap; gap: 32px; }
  .rotating-badge { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .footer-main { padding: 60px 24px; }
  .footer-bottom { padding: 16px 24px; flex-direction: column; gap: 8px; text-align: center; white-space: normal; }
  .footer-policies { flex-wrap: wrap; justify-content: center; }
}

/* =============================================
   SCROLL REVEAL ANIMATIONS
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* =============================================
   FONT SIZE CONTROLS (A- / A+)
   ============================================= */
.font-size-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.font-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s;
}
.font-btn:hover { background: rgba(255,255,255,0.22); }

html[data-text-size="1"] { font-size: 112.5%; }
html[data-text-size="2"] { font-size: 125%; }

@media (max-width: 900px) {
  .font-size-controls { display: none; }
}

/* =============================================
   ABOUT MODAL
   ============================================= */
.about-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 45, 0.7);
  /* above the fixed nav (1000), which otherwise covered the portrait */
  z-index: 1100;
  /* start at the top and let long bios scroll; the wrapper's auto margins
     still centre short cards. Centering tall cards pushed the portrait off-screen. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 96px 24px 40px;
  backdrop-filter: blur(4px);
}
.about-modal-overlay.active { display: flex; }

/* On narrow screens the English bio makes the card taller than the viewport.
   Centring it then clips both ends with no way to scroll to them, so anchor
   the content to the top and let the overlay itself scroll.
   Must come after the base rule above — same specificity, later wins. */
@media (max-width: 900px) {
  .about-modal-overlay { align-items: flex-start; overflow-y: auto; }
}

.about-modal-wrapper {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: auto;
}

.about-modal-portrait-wrap {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  width: 136px;
  height: 136px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #faf3eb;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 2;
}
.about-modal-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.about-modal-card {
  background: #faf3eb;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.about-modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(41,61,82,0.12);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #293d52;
  z-index: 3;
  transition: background 0.15s;
}
.about-modal-close:hover { background: rgba(41,61,82,0.2); }

.about-modal-body {
  padding: 84px 36px 28px;
  direction: rtl;
}

.about-modal-heading {
  font-size: 22px;
  font-weight: 700;
  color: #b0904c;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #b0904c;
  display: inline-block;
}

.about-modal-text {
  font-size: 15px;
  line-height: 1.75;
  color: #293d52;
  margin-bottom: 14px;
}

.about-modal-membership {
  font-size: 15px;
  font-weight: 700;
  color: #293d52;
  margin-top: 8px;
}

.about-modal-footer {
  background: #293d52;
  padding: 24px 36px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  direction: rtl;
}

/* Team member popups — reuse the about-modal design, plus role + milestones */
.team-modal-portrait { object-position: center 12%; }

.team-modal-monogram {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #293d52 0%, #3a506b 100%);
  color: #ffffff;
  font-size: 56px;
  font-weight: 700;
}

.team-modal-role {
  font-size: 15px;
  font-weight: 700;
  color: #293d52;
  margin: -4px 0 14px;
}

.team-modal-footer .about-modal-footer-item { width: 100%; }

.team-modal-timeline {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-modal-timeline li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.team-modal-year {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 14px;
  font-weight: 700;
  color: #b0904c;
  font-variant-numeric: tabular-nums;
}

/* The modal body/footer default to RTL for the Hebrew site. On the English
   pages that flipped the alignment and threw periods to the start of lines. */
.page-en .about-modal-body,
.page-en .about-modal-footer { direction: ltr; text-align: left; }
.page-en .team-modal-footer { direction: ltr; }

.about-modal-footer-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-modal-footer-title {
  font-size: 11px;
  color: #b0904c;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.about-modal-footer-text {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .about-modal-portrait-wrap { width: 112px; height: 112px; top: -56px; }
  .about-modal-overlay { padding-top: 76px; }
  .about-modal-body { padding: 66px 24px 24px; }
  .about-modal-footer { padding: 20px 24px; gap: 24px; }
}

/* btn-animated as button element */
button.btn-animated {
  border: none;
  cursor: pointer;
}

/* =============================================
   RTL (Hebrew) OVERRIDES
   Key insight: in dir="rtl", flex-direction:row already flows RIGHT→LEFT.
   Using row-reverse in RTL cancels that and restores LTR order (double-reversal).
   So we NEVER use row-reverse here — just let RTL row do its job.
   For column flex cross-axis: flex-start = RIGHT in RTL, flex-end = LEFT.
   ============================================= */
[dir="rtl"] body { font-family: 'Noto Sans Hebrew', var(--font-main), sans-serif; }

/* Nav: RTL row → logo RIGHT, lang-btn LEFT naturally */
[dir="rtl"] .nav { padding: 0 200px 0 60px; }
[dir="rtl"] .logo-text { align-items: flex-start; } /* flex-start in RTL column = right-aligned */
[dir="rtl"] .nav-menu { direction: rtl; }
@media (max-width: 1440px) { [dir="rtl"] .nav { padding: 0 120px 0 40px; } }
@media (max-width: 900px)  { [dir="rtl"] .nav { padding: 0 16px; } [dir="rtl"] .lang-btn { margin-left: 0; margin-right: auto; } }

/* Hero: content on RIGHT side; flex-start on column cross-axis = RIGHT in RTL */
[dir="rtl"] .hero { padding-left: 0; padding-right: 200px; align-items: flex-start; }
[dir="rtl"] .hero-content { align-items: flex-start; text-align: right; }
[dir="rtl"] .hero-bg { object-position: 30% center; }
[dir="rtl"] .hero-tagline-2 { color: #b0904c; }
[dir="rtl"] .rotating-badge { right: auto; left: max(48px, calc(50% - 770px)); }
@media (max-width: 1440px) { [dir="rtl"] .hero { padding-right: 120px; } }
@media (max-width: 900px)  { [dir="rtl"] .hero { padding: 120px 24px 60px; align-items: flex-start; } [dir="rtl"] .hero-content { align-items: flex-start; text-align: right; } }

/* Tagline: LTR justify-content:flex-end inherited = text LEFT in RTL row (correct mirror) */
[dir="rtl"] .tagline-image { left: auto; right: 30px; }
[dir="rtl"] .tagline-text { text-align: right; }
[dir="rtl"] .tagline-h1, [dir="rtl"] .tagline-h2 { direction: rtl; }
@media (max-width: 900px)  { [dir="rtl"] .tagline-image { right: auto; left: auto; } }

/* Services: RTL row → services-left RIGHT, cards LEFT */
[dir="rtl"] .services { padding: 120px 200px 120px 0; }
[dir="rtl"] .services-cards { direction: rtl; padding-right: 0; padding-left: 200px; }
[dir="rtl"] .services-left { text-align: right; }
[dir="rtl"] .services-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .service-card-accent { left: auto; right: -4px; border-radius: 8px 0 0 8px; }
@media (max-width: 1440px) { [dir="rtl"] .services { padding: 100px 120px 100px 0; } [dir="rtl"] .services-cards { padding-left: 120px; } }
@media (max-width: 1200px) { [dir="rtl"] .services { padding: 80px; flex-direction: column; } [dir="rtl"] .services-cards { padding-left: 0; } }
@media (max-width: 900px)  { [dir="rtl"] .services { padding: 60px 24px; flex-direction: column; } [dir="rtl"] .services-left { width: 100%; } [dir="rtl"] .services-cards { padding-left: 24px; padding-right: 0; } }

/* About: RTL row → text RIGHT, image LEFT; photo gap on right; border-radius rounds LEFT corners */
[dir="rtl"] .about-text { padding: 60px 80px 60px 0; text-align: right; }
[dir="rtl"] .about-image-wrap { left: 0; right: 17%; border-radius: 40px 0 0 40px; }
[dir="rtl"] .about-badge-circle { left: 52%; }
@media (max-width: 1200px) {
  /* stacked range: mirror the LTR stacking with RTL specificity */
  [dir="rtl"] .about-banner { flex-direction: column-reverse; }
  [dir="rtl"] .about-text { width: 100%; padding: 40px 40px; align-self: auto; }
  [dir="rtl"] .about-image-wrap { position: relative; left: 0; right: 0; width: 100%; height: 420px; border-radius: 40px 40px 0 0; align-self: auto; }
}
@media (max-width: 900px)  {
  [dir="rtl"] .about-banner { flex-direction: column-reverse; }
  [dir="rtl"] .about-text { width: 100%; padding: 32px 24px; align-self: auto; }
  [dir="rtl"] .about-image-wrap { position: relative; left: 0; right: 0; width: 100%; height: 350px; border-radius: 40px 40px 0 0; align-self: auto; }
}

/* Blog cards */
[dir="rtl"] .blog-card-body { direction: rtl; text-align: right; }

/* Footer: RTL row → form RIGHT, links LEFT */
[dir="rtl"] .footer-form-header { direction: rtl; }
[dir="rtl"] .footer-form { direction: rtl; align-items: flex-start; }
[dir="rtl"] .footer-links { flex-direction: row-reverse; direction: rtl; } /* row-reverse kept: reverses DOM col order for logical RTL reading */
[dir="rtl"] .footer-links-col { align-items: flex-start; }
[dir="rtl"] .footer-bottom { direction: rtl; }
[dir="rtl"] .footer-contact-item { direction: rtl; }
@media (max-width: 900px) { [dir="rtl"] .footer-main { flex-direction: column; } [dir="rtl"] .footer-bottom { flex-direction: column; } }

/* =============================================
   BLOG LIST PAGE
   ============================================= */
.blog-list-page {
  padding: 160px 200px 80px;
  background: var(--bg-light);
  min-height: 100vh;
}

.blog-list-header {
  margin-bottom: 48px;
  text-align: center;
}

.blog-list-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-100);
  line-height: 1.167;
  margin-top: 8px;
}

.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

@media (max-width: 1440px) { .blog-list-page { padding: 140px 120px 60px; } }
@media (max-width: 900px) {
  .blog-list-page { padding: 100px 24px 60px; }
  .blog-list-title { font-size: 32px; }
  .blog-list-grid { grid-template-columns: 1fr; }
}

/* =============================================
   BLOG POST PAGE
   ============================================= */
.blog-post-page {
  background: #fff;
}

.ltr-post {
  direction: ltr;
  text-align: left;
}

.post-article {
  min-height: 100vh;
}

.post-hero {
  position: relative;
  height: 540px;
  overflow: hidden;
}

.post-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(41,61,82,0.85) 0%, rgba(41,61,82,0.3) 60%, transparent 100%);
}

.post-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 200px;
  gap: 16px;
}

.post-back-link {
  position: absolute;
  top: 128px;
  right: 200px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.post-back-link:hover { opacity: 0.75; }
.ltr-post .post-back-link { right: auto; left: 200px; }

.post-meta-top {
  display: flex;
  gap: 16px;
  align-items: center;
}

.post-date, .post-author {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}

.post-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  max-width: 800px;
  font-family: var(--font-hebrew);
  font-variation-settings: 'wdth' 87.5;
}

.post-title.ltr {
  font-family: var(--font-main);
  font-variation-settings: initial;
}

.post-body-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}

.post-content {
  font-size: 20px;
  line-height: 1.8;
  color: var(--text-100);
  font-family: var(--font-hebrew);
  font-variation-settings: 'wdth' 87.5;
  direction: rtl;
  text-align: right;
}

.post-content.ltr {
  font-family: var(--font-main);
  font-variation-settings: initial;
  direction: ltr;
  text-align: left;
}

.post-content h2, .post-content h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-100);
  margin: 40px 0 16px;
  line-height: 1.4;
}

.post-content p {
  margin-bottom: 24px;
}

.post-content a {
  color: var(--gold-100);
  text-decoration: underline;
}

.post-lang-switch {
  margin: 40px 0 16px;
  text-align: center;
}

.post-lang-btn {
  font-size: 14px;
  padding: 8px 20px;
}

.post-footer-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--dark-blue-8);
}

.post-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-100);
  max-width: 340px;
  transition: opacity 0.2s;
}
.post-nav-link:hover { opacity: 0.7; }

.post-nav-link > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-nav-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-60);
}

.post-nav-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.post-nav-next {
  text-align: left;
}

@media (max-width: 1440px) {
  .post-hero-content { padding: 40px 120px; }
  .post-back-link { right: 120px; }
  .ltr-post .post-back-link { left: 120px; right: auto; }
}
@media (max-width: 900px) {
  .post-hero { height: 360px; }
  .post-hero-content { padding: 24px; }
  .post-back-link { right: 24px; top: 80px; }
  .ltr-post .post-back-link { left: 24px; right: auto; }
  .post-title { font-size: 28px; }
  .post-content { font-size: 18px; }
  .post-footer-nav { flex-direction: column; }
}

/* =============================================
   ENGLISH (LTR) PAGE OVERRIDES
   ============================================= */

//* Hero: rotating / changing word */
.hero-rotating {
  display: inline;
}
.hero-rotating-word {
  display: inline;
  color: var(--gold-100);
  transition: opacity 0.35s ease;
}
.hero-rotating-word.fade-out {
  opacity: 0;
}

/* About: circular text badge — large, subtle, overlaid on lawyer photo */
.about-rotating-badge {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.25;
}

/* Tagline: centered variant used in English homepage */
.tagline-section-centered {
  justify-content: center;
  align-items: center;
  padding: 120px 80px;
  min-height: 560px;
}
.tagline-text-centered {
  text-align: center;
  align-items: center;
}

/* Decorative "N" letterform shapes (left / right sides of EN tagline) */
.tagline-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: stretch;
}
.tagline-deco svg { height: 100%; width: auto; display: block; }
.tagline-deco-left  { left: 0; }
.tagline-deco-right { right: 0; transform: scaleX(-1); }

/* Blog post back-link: in English pages it sits on the left */
.page-en .post-back-link {
  right: auto;
  left: 200px;
}
@media (max-width: 1440px) { .page-en .post-back-link { left: 120px; } }
@media (max-width: 900px)  { .page-en .post-back-link { left: 24px; } }