/* ==========================================================================
   Steinitz 2026 — layout architecture.
   Same skeleton, rhythm and motion vocabulary as the reference site, rendered
   in the Steinitz palette: deep blue from the logo wordmark, light blue from
   the dot in the logo, and light grey.
   Loaded after main.css.
   ========================================================================== */

:root {
  --ink-deep:   #0f3557;                                    /* the "crimson" slot */
  --ink-mid:    #1d5589;                                    /* gradient far end   */
  --grad:       linear-gradient(to left, #0f3557, #1d5589); /* to left = RTL flow */
  --accent:     #75b9f6;                                    /* the dot in the logo */
  --accent-dim: #a9d5fa;
  --wash-blue:  #eef6fe;
  --wash-grey:  #f2f2f2;

  --header-h:   66px;
  --container:  100%;
}
@media (min-width: 768px)  { :root { --header-h: 76px;  --container: 768px; } }
@media (min-width: 992px)  { :root { --header-h: 102px; --container: 992px; } }
@media (min-width: 1200px) { :root { --container: 1200px; } }
@media (min-width: 1600px) { :root { --container: 1260px; } }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 30px; }

/* English pages read left-to-right; Hebrew right-to-left. The document dir
   drives everything, these only fix the two places that hard-code a side. */
html[dir="ltr"] body { direction: ltr; text-align: left; }
html[dir="ltr"] .site-header { flex-direction: row; }
html[dir="ltr"] .header-actions { flex-direction: row; }
html[dir="ltr"] .home-testimonials__text { direction: ltr; }
html[dir="ltr"] .information-nav a { text-align: start; }

/* ==========================================================================
   1. Header — logo sits on the LEFT even in Hebrew, controls on the right.
   ========================================================================== */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 500;
  background: var(--ink-deep);
  display: flex; align-items: center; justify-content: space-between;
  flex-direction: row-reverse;                 /* the RTL inversion */
  padding: 15px 20px; min-height: var(--header-h);
  border-bottom: none; backdrop-filter: none;
}
@media (min-width: 992px) { .site-header { padding: 19px 37px; } }

/* On the home page the header floats over the video and scrolls away. */
@media (min-width: 992px) {
  .home .site-header { position: absolute; background: transparent; }
  .home .site-header.is-stuck {
    position: fixed; background: var(--ink-deep);
    animation: headerDrop .45s var(--ease) both;
  }
}
@keyframes headerDrop { from { transform: translateY(-100%); } to { transform: none; } }

.site-header .site-logo svg { width: 132px; height: auto; }
@media (min-width: 992px) { .site-header .site-logo svg { width: 190px; } }
.site-header .site-logo svg .cls-1 { fill: #fff; }
.site-header .site-logo svg .cls-2 { fill: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }

/* Newsletter is the primary call to action, exactly as on the reference. */
.btn--newsletter {
  height: 44px; padding: 0 20px; border-radius: 5px;
  border: 2px solid #fff; background: transparent; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  display: inline-flex; align-items: center; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn--newsletter:hover { background: var(--accent); color: var(--ink-deep); border-color: var(--accent); }
@media (max-width: 991px) { .btn--newsletter { display: none; } }

.button-square {
  width: 44px; height: 44px; border-radius: 5px; border: none; cursor: pointer;
  background: rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center;
  font-family: inherit; font-size: 16px; font-weight: 400;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.button-square:hover, .button-square.is-active { background: #fff; color: var(--ink-deep); }
.button-square svg { width: 17px; height: 17px; fill: currentColor; }

.lang-switch { display: flex; gap: 4px; border: none; background: transparent; padding: 0; }
.lang-switch a {
  width: 44px; height: 44px; border-radius: 5px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.2); color: #fff; font-size: 16px; font-weight: 400;
}
.lang-switch a:hover, .lang-switch a.is-active { background: #fff; color: var(--ink-deep); }

/* Hamburger — the ONLY way into the menu, on every breakpoint.
   The bars are placed absolutely rather than stacked with margins: the open
   state has to bring the outer two onto the same centre line and cross them,
   and rotating margin-stacked bars about their right edge draws a chevron,
   not a cross. */
.nav-toggle {
  display: block; position: relative; width: 38px; height: 30px; padding: 0;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span {
  position: absolute; inset-inline: 0; height: 2px; background: #fff;
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 5px; }
.nav-toggle span:nth-child(2) { top: 14px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   2. Menu dropdown — a horizontal gradient strip under the header on desktop,
      a full-height panel on mobile.
   ========================================================================== */
.nav-primary {
  position: fixed; inset-inline: 0; top: var(--header-h); z-index: 490;
  background: var(--grad);
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
  transform: none; visibility: visible;
}
.nav-primary[data-open="true"] { max-height: calc(100vh - var(--header-h)); overflow-y: auto; }

.nav-primary ul { list-style: none; margin: 0; padding: 0; }
.nav-primary > ul {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 30px 30px;
}
.nav-primary > ul > li > a {
  display: block; color: #fff; font-size: 16px; font-weight: 500; padding: 6px 0;
  position: relative;
}
.nav-primary .sub-menu { padding-inline-start: 14px; margin-top: 6px; }
.nav-primary .sub-menu a {
  display: block; color: rgba(255,255,255,.78); font-size: 14px; padding: 5px 10px;
  background: rgba(117,185,246,.10); border-radius: 4px; margin: 2px 0;
}
.nav-primary .sub-menu a:hover { background: rgba(117,185,246,.24); color: #fff; }

@media (min-width: 992px) {
  .nav-primary { top: calc(var(--header-h) - 1px); }
  .nav-primary[data-open="true"] { max-height: 420px; }
  .nav-primary > ul {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 0; height: 102px; padding: 0 30px; flex-wrap: wrap;
  }
  .nav-primary > ul > li { margin-inline: 10px; position: relative; }
  .nav-primary > ul > li > a { font-size: 18px; padding: 8px 0; }
  /* Accent rule opens from the centre outwards. */
  .nav-primary > ul > li > a::after {
    content: ''; position: absolute; bottom: -8px; inset-inline: 0;
    width: 0; height: 5px; background: var(--accent);
    margin-inline: auto; transition: width .5s ease-in-out;
  }
  .nav-primary > ul > li > a:hover::after,
  .nav-primary > ul > li.current-menu-item > a::after { width: 100%; }
  .nav-primary .sub-menu {
    position: absolute; top: calc(100% + 14px); inset-inline-start: 0;
    background: var(--ink-deep); padding: 6px; border-radius: 6px;
    min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-primary li:hover > .sub-menu, .nav-primary li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: none;
  }
}

body.menu-open { overflow: hidden; }

/* ==========================================================================
   3. Typography — huge and thin against tiny, wide-tracked and bold.
   ========================================================================== */
.title {
  font-size: 32px; line-height: 1.12; font-weight: 300; letter-spacing: 2px;
  text-align: center; color: var(--ink-deep); margin: 0 0 .6em;
}
@media (min-width: 992px) { .title { font-size: 52px; line-height: 1.3; } }

.cover__title {
  font-size: 34px; line-height: 1.2; font-weight: 400; color: #fff; margin: 0;
}
@media (min-width: 992px)  { .cover__title { font-size: 50px; } }
@media (min-width: 1200px) { .cover__title { font-size: 56px; line-height: 72.8px; } }

.section-title {
  font-size: 24px; line-height: 1.3; font-weight: 400; letter-spacing: 7px;
  color: var(--ink-deep); text-transform: uppercase;
}
@media (min-width: 992px) { .section-title { font-size: 44px; line-height: 44px; } }

/* The tiny bold label that sits above every heading. */
.kicker {
  font-size: 15px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .6rem;
}
@media (min-width: 992px) { .kicker { font-size: 16px; } }

.gradient-text {
  background-image: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.text-wrapper, .lede { font-size: 18px; line-height: 1.6; color: var(--ink-deep); font-weight: 400; }

/* The signature mark: a solid accent bar under every main heading. */
.brand-separator {
  width: 120px; height: 6px; background: var(--accent);
  border: 0; margin: 1.5rem auto; display: block; padding: 0;
}
.brand-separator.left { margin-inline: 0 auto; }
.brand-separator.right { margin-inline: auto 0; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.primary-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 8px;
  border: 2px solid var(--ink-deep); background: transparent; color: var(--ink-deep);
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; overflow: hidden; cursor: pointer; z-index: 1;
  transition: color .3s ease-in-out;
}
.primary-button > span { position: relative; z-index: 2; }
.primary-button::before {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background-image: var(--grad); transition: opacity .3s ease-in-out;
}
.primary-button:hover { color: #fff; }
.primary-button:hover::before { opacity: 1; }
.primary-button.wide { min-width: 220px; }
.primary-button.on-dark { border-color: #fff; color: #fff; }
.primary-button.on-dark::before { background-image: linear-gradient(to left, #fff, #fff); }
.primary-button.on-dark:hover { color: var(--ink-deep); }

/* ==========================================================================
   5. Home — hero with video, publications card, search bar
   ========================================================================== */
.home-masthead { position: relative; }
@media (min-width: 992px) { .home-masthead { min-height: 785px; display: flex; align-items: flex-end; } }

.home-masthead__video { position: relative; height: 300px; margin-top: var(--header-h); overflow: hidden; background: var(--ink-deep); }
.home-masthead__video video, .home-masthead__video img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
  .home-masthead__video { position: absolute; inset: 0; height: auto; margin-top: 0; }
}
.home-masthead__video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,53,87,.72) 0%, rgba(15,53,87,.34) 55%, rgba(15,53,87,.55) 100%);
}

.home-masthead__container {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--container); margin-inline: auto;
  background-image: linear-gradient(-270deg, #0f3557 0%, #1d5589 100%);
  color: #fff; padding: 32px 24px;
  border-radius: 16px 16px 0 0;
}
@media (min-width: 992px) { .home-masthead__container { padding: 45px 45px 45px 65px; border-radius: 30px 30px 0 0; } }

.home-slide { display: none; }
.home-slide.is-active { display: block; animation: slideFade .55s var(--ease) both; }
@keyframes slideFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-slide__category { font-size: 15px; font-weight: 500; letter-spacing: 5.23px; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; }
.home-slide__title { font-size: 22px; font-weight: 300; line-height: 1.35; margin: 0 0 .7rem; }
@media (min-width: 992px) { .home-slide__title { font-size: 30px; } }
.home-slide__title a { color: #fff; border-bottom: 2px solid transparent; transition: border-color .3s var(--ease); }
.home-slide__title a:hover { color: #fff; border-bottom-color: #fff; }
.home-slide__date { font-size: 16px; font-weight: 700; opacity: .7; margin: 0; }
@media (min-width: 992px) { .home-slide__date { font-size: 18px; } }

.home-masthead__controls {
  position: relative; z-index: 4; display: flex; gap: 6px; justify-content: flex-end;
  max-width: var(--container); margin: -14px auto 0; padding-inline: 30px;
}
.home-masthead__controls button {
  width: 40px; height: 40px; border-radius: 6px; border: none; cursor: pointer;
  background: var(--ink-deep); display: grid; place-items: center;
  transition: background .25s var(--ease);
}
.home-masthead__controls button:hover { background: var(--ink-mid); }
.home-masthead__controls svg { width: 13px; height: 13px; fill: #fff; }

/* Search bar card */
.home-search { background: rgba(255,255,255,.79); }
.home-search__inner {
  max-width: var(--container); margin-inline: auto; padding: 40px 30px 46px;
  background: #fff; border-radius: 0 0 30px 30px;
  box-shadow: 0 18px 30px rgba(25,48,90,.11); text-align: center;
}
.home-search form { position: relative; max-width: 620px; margin-inline: auto; }
.home-search input[type="search"] {
  width: 100%; height: 66px; padding: 0 66px 0 24px;
  border: none; border-radius: 13px; background: var(--wash-blue);
  font-family: inherit; font-size: 22px; font-weight: 600; color: var(--ink-deep);
}
@media (min-width: 992px) { .home-search input[type="search"] { font-size: 32px; height: 76px; } }
.home-search input::placeholder { color: var(--ink-deep); opacity: .9; }
.home-search input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }
.home-search button {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.home-search button svg { width: 24px; height: 24px; fill: var(--ink-deep); }
.home-search__hint { font-size: 18px; color: var(--ink-soft); margin: 1.1rem 0 0; }

/* ==========================================================================
   6. Home sections
   ========================================================================== */
.home-about { padding-block: 60px; text-align: center; }
@media (min-width: 992px) { .home-about { padding-block: 100px; } }
.home-about p { font-size: 18px; line-height: 1.6; max-width: 850px; margin: 0 auto 1.6rem; color: var(--ink-deep); }
@media (min-width: 992px) { .home-about p { font-size: 22px; } }

.home-highlights { padding-block: 40px 70px; overflow: hidden; }
.highlights__track { display: flex; gap: 24px; transition: transform .65s var(--ease); }
.highlights__slide { flex: 0 0 86%; max-width: 780px; }
@media (min-width: 768px) { .highlights__slide { flex: 0 0 58%; } }
.highlights__card {
  position: relative; display: block; height: 400px; border-radius: 14px; overflow: hidden;
  background: var(--ink-deep); transition: height .4s var(--ease);
}
.highlights__slide.is-current .highlights__card { height: 474px; }
@media (max-width: 767px) { .highlights__slide.is-current .highlights__card { height: 420px; } }
.highlights__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.highlights__card:hover img { transform: scale(1.05); }
.highlights__card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,53,87,.88) 2%, rgba(15,53,87,.3) 55%, transparent 100%);
}
.highlights__body {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2; padding: 40px;
  color: #fff; text-shadow: -1px 1px 6px rgba(0,0,0,.55);
}
.highlights__cat { font-size: 15px; font-weight: 700; letter-spacing: 5.23px; text-transform: uppercase; margin: 0 0 .6rem; color: var(--accent); }
.highlights__title { font-size: 24px; font-weight: 700; line-height: 1.3; width: 70%; margin: 0 0 .5rem; color: #fff; }
@media (max-width: 767px) { .highlights__title { width: 100%; font-size: 20px; } }
.highlights__date { font-size: 16px; margin: 0 0 .6rem; opacity: .85; }
.highlights__more { font-size: 16px; font-weight: 600; color: #fff; text-decoration: underline; }

.slider-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.slider-nav button {
  width: 40px; height: 40px; border-radius: 6px; border: none; cursor: pointer;
  background: rgba(15,53,87,.1); display: grid; place-items: center;
  transition: background .25s var(--ease);
}
.slider-nav button:hover { background: var(--accent); }
.slider-nav svg { width: 13px; height: 13px; fill: var(--ink-deep); }
.slider-dots { display: flex; gap: 8px; }
.slider-dots button {
  width: 12px; height: 12px; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(15,53,87,.35); transition: background .25s var(--ease), transform .25s var(--ease);
}
.slider-dots button[aria-current="true"] { background: var(--ink-deep); transform: scale(1.2); }

/* Testimonials band */
.home-testimonials {
  padding: 60px 8%; text-align: center;
  background: radial-gradient(120% 100% at 50% 0%, #fff 0%, var(--wash-grey) 100%);
  border-block: 1px solid rgba(15,53,87,.08);
}
@media (min-width: 992px) { .home-testimonials { padding: 60px 12%; } }
.home-testimonials__item { display: none; }
.home-testimonials__item.is-active { display: block; animation: slideFade .6s var(--ease) both; }
.home-testimonials__text {
  font-size: 18px; line-height: 1.5; font-style: italic; font-weight: 300;
  color: var(--ink-deep); margin: 0 0 1.2rem; direction: ltr;
}
@media (min-width: 992px) { .home-testimonials__text { font-size: 33px; line-height: 46px; } }
.home-testimonials__by { font-size: 16px; font-weight: 600; font-style: italic; color: var(--ink-soft); margin: 0; }

/* Practice-area grid */
.practices { padding-block: 60px; background: var(--wash-grey); }
@media (min-width: 992px) { .practices { padding-block: 100px; } }
/* Grid rather than flex-wrap: rows stretch to a common height, so every card
   in a row ends on the same line and the accent borders align. */
.practices__grid {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 768px) { .practices__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .practices__grid { grid-template-columns: repeat(3, 1fr); } }

.practice-category { display: flex; }
.practice-card {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border-radius: 8px; overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.practice-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(15,53,87,.12); }
.practice-card__figure {
  height: 190px; flex: 0 0 190px; background: var(--wash-blue);
  display: grid; place-items: center; overflow: hidden;
}
.practice-card__figure img { width: 100%; height: 100%; object-fit: cover; }
.practice-card__figure svg { width: 56px; height: 56px; fill: var(--ink-mid); }
/* The body grows to fill the row height, keeping the accent border on the floor. */
.practice-card__body {
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 22px 20px; border-bottom: 6px solid var(--accent);
}
.practice-card h3 { font-size: 20px; font-weight: 500; margin: 0 0 .35rem; color: var(--ink-deep); }
.practice-card p {
  font-size: 15px; color: var(--ink-soft); margin: 0; line-height: 1.6;
  /* Cap the blurb so cards stay visually even even when the copy varies. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Closing band */
.home-final { padding-block: 60px 80px; max-width: 1020px; margin-inline: auto; text-align: center; }

/* ==========================================================================
   7. Inner pages — cover + sticky side nav + content column
   ========================================================================== */
.cover {
  position: relative; min-height: 300px; margin-top: var(--header-h);
  display: flex; align-items: flex-end;
  box-shadow: 0 18px 102px rgba(0,0,0,.09); overflow: hidden;
}
@media (min-width: 992px) { .cover { min-height: 420px; } }
.cover__bg { position: absolute; inset: 0; z-index: 0; }
.cover__bg img { width: 100%; height: 100%; object-fit: cover; }
.cover__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,53,87,.60) 0%, rgba(15,53,87,0) 100%),
    linear-gradient(270deg, rgba(15,53,87,.70) 0%, rgba(15,53,87,.41) 41%, rgba(15,53,87,0) 100%);
}
.cover:not(:has(.cover__bg img)) { background-image: var(--grad); }
.cover__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding: 30px; padding-block-end: 46px; }
.cover .breadcrumbs { position: absolute; top: 14px; inset-inline-end: 30px; font-size: 13px; color: rgba(255,255,255,.86); margin: 0; }
.cover .breadcrumbs a { color: rgba(255,255,255,.86); }
.cover .breadcrumbs a:hover { color: var(--accent); }
.cover .breadcrumb_last { color: #fff; }

.information-section { padding-block: 40px 70px; }
.information-section__layout { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 992px) {
  .information-section__layout { flex-direction: row; align-items: flex-start; gap: 40px; }
  .information-nav { position: sticky; top: calc(var(--header-h) - 12px); flex: 0 0 210px; padding: 55px 0 40px; }
  .information-body { flex: 1; max-width: 700px; }
}
@media (min-width: 1200px) { .information-body { max-width: 850px; } }

.information-nav ul { list-style: none; margin: 0; padding: 0; }
.information-nav li { position: relative; }
.information-nav a {
  display: block; font-size: 18px; font-weight: 500; line-height: 2.5;
  padding-inline-end: 30px; text-align: end; color: var(--ink-soft);
}
.information-nav a::after {
  content: ''; position: absolute; inset-inline-end: 0; top: 0; bottom: 0;
  width: 5px; background: rgba(117,185,246,.2); transition: background .3s var(--ease);
}
.information-nav a:hover, .information-nav a.is-active { color: var(--ink-deep); }
.information-nav a:hover::after, .information-nav a.is-active::after { background: var(--accent); }
@media (max-width: 991px) { .information-nav { display: none; } }

.information-block { padding-block: 40px; border-bottom: 1px solid rgba(15,53,87,.1); }
.information-block:last-child { border-bottom: none; }
.information-block h2 { font-size: 26px; font-weight: 600; letter-spacing: 1px; color: var(--ink-deep); margin: 0 0 1rem; }
@media (min-width: 992px) { .information-block h2 { font-size: 32px; } }
.information-block p, .information-block li { font-size: 18px; line-height: 1.6; color: var(--ink-deep); }

/* ==========================================================================
   8. Motion — the reference's scroll reveal, reproduced without a library.
   ========================================================================== */
.fadeDirection { opacity: 0; transition: transform .7s ease-in, opacity .7s ease-in; }
.fadeDirection.right  { transform: translateX(-80px); }  /* enters from the inline start in RTL */
.fadeDirection.left   { transform: translateX(80px); }
.fadeDirection.top    { transform: translateY(-80px); }
.fadeDirection.bottom { transform: translateY(80px); }
.fadeDirection.active { transform: translateX(0) translateY(0); opacity: 1; }
.clear-fade { opacity: 0; transition: opacity .3s ease-in; }
.clear-fade.active { opacity: 1; }

/* Staggered children inside a revealed block. */
.fadeDirection.active > * { animation: riseIn .7s var(--ease) both; }
.fadeDirection.active > *:nth-child(1) { animation-delay: .05s; }
.fadeDirection.active > *:nth-child(2) { animation-delay: .15s; }
.fadeDirection.active > *:nth-child(3) { animation-delay: .25s; }
.fadeDirection.active > *:nth-child(n+4) { animation-delay: .35s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The highlight sweep: an accent bar wipes across each line, right to left,
   staggered between the label, the title and the date. */
.vish-hover > * { position: relative; overflow: hidden; z-index: 1; transition: .2s cubic-bezier(.7,.3,.3,.7); }
.vish-hover:hover > *::after {
  content: ''; position: absolute; top: 0; width: 100%; height: 100%;
  background-color: var(--accent); opacity: .5; z-index: -1;
  animation: vish .2s ease forwards;
}
@keyframes vish { 0% { right: -100%; } 100% { right: 100%; } }
.vish-hover:hover .highlights__cat::after   { animation-duration: .3s; }
.vish-hover:hover .highlights__title::after { animation-duration: .5s; }
.vish-hover:hover .highlights__date::after  { animation-duration: .7s; }

/* Gradient underline that opens from the inline start. */
.underline-grow { position: relative; }
.underline-grow::before {
  content: ''; position: absolute; inset-inline-start: 0; bottom: -10px;
  width: 0; height: 3px; background-image: var(--grad); transition: width .7s ease;
}
a:hover .underline-grow::before, .underline-grow:hover::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fadeDirection, .clear-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fadeDirection.active > * { animation: none !important; }
  .vish-hover:hover > *::after { animation: none !important; display: none; }
}
body.a11y-no-motion .fadeDirection,
body.a11y-no-motion .clear-fade { opacity: 1 !important; transform: none !important; }
body.a11y-no-motion .fadeDirection.active > * { animation: none !important; }

/* ==========================================================================
   9. Search overlay
   ========================================================================== */
.search-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(15,53,87,.97);
  display: none; place-items: center; padding: 1.5rem;
}
.search-overlay[data-open="true"] { display: grid; animation: slideFade .3s var(--ease) both; }
.search-overlay form { width: min(100%, 680px); }
.search-overlay input {
  width: 100%; padding: 1.2rem 0; font-size: 1.6rem; font-family: inherit;
  background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,.3); color: #fff;
}
.search-overlay input::placeholder { color: rgba(255,255,255,.5); }
.search-overlay input:focus { outline: none; border-bottom-color: var(--accent); }
.search-overlay__close {
  position: absolute; top: 24px; inset-inline-start: 24px;
  width: 46px; height: 46px; border-radius: 5px; cursor: pointer;
  background: rgba(255,255,255,.2); border: none; display: grid; place-items: center;
}
.search-overlay__close svg { width: 15px; height: 15px; fill: #fff; }

/* ==========================================================================
   10. Footer bands
   ========================================================================== */
.footer-top {
  background: linear-gradient(0deg, rgba(255,255,255,.6), rgba(255,255,255,.6)), var(--wash-blue);
  padding-block: 40px; text-align: center;
}
@media (min-width: 992px) { .footer-top { padding-block: 60px; } }
.footer-top h2 { font-size: 26px; font-weight: 400; letter-spacing: 2px; color: var(--ink-deep); margin: 0 0 .6rem; }
@media (min-width: 992px) { .footer-top h2 { font-size: 32px; } }
.footer-top p { font-size: 14px; font-weight: 500; color: var(--ink-soft); margin: 0 0 1.6rem; }

.site-footer { background-image: var(--grad); color: #fff; font-size: 14px; padding: 0; }
.footer-middle {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center;
  padding-block: 30px; border-bottom: 1px solid rgba(255,255,255,.4);
}
.footer-middle h3 { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 1px; margin: 0 0 .7rem; text-transform: none; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 27px; height: 27px; display: grid; place-items: center; }
.footer-social svg { width: 20px; height: 20px; fill: #fff; }
.footer-social a:hover svg { fill: var(--accent); }
.transparent-btn {
  border: 2px solid #fff; border-radius: 8px; padding: 12px 20px;
  font-size: 16px; font-weight: 700; color: #fff; display: inline-block;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.transparent-btn:hover { background: #fff; color: var(--ink-deep); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 20px 0 40px; font-size: 14px;
}
.footer-bottom p { margin: 0; font-weight: 100; }
.footer-legal { display: flex; flex-wrap: wrap; }
.footer-legal a { color: #fff; font-weight: 400; padding-inline: 12px; border-inline-start: 1px solid #fff; }
.footer-legal a:first-child { border-inline-start: none; }
.footer-legal a:hover { color: var(--accent); }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 1.4rem; padding-block: 26px; }
.site-footer__contact a, .site-footer__contact span { color: rgba(255,255,255,.86); font-size: 14px; }
.site-footer__contact a:hover { color: var(--accent); }

/* Push fixed-header content down on inner pages. */
body:not(.home) .site-main { padding-top: 0; }

/* Carousel tracks must be clipped by their container, otherwise the
   off-screen slides widen the document and mobile scrolls sideways. */
.home-highlights, .home-highlights .container { overflow: hidden; }
.highlights__track { will-change: transform; }
.home-masthead { max-width: 100%; }

/* The masthead keeps the brand gradient even before a hero video is set,
   so the top of the page is never blank. */
.home-masthead__video { background-image: linear-gradient(150deg, #0f3557 0%, #1d5589 100%); }

/* Same equal-height treatment wherever the card grid is reused. */
.information-body .practices__grid { gap: 18px; }
.information-body .practice-card__figure { display: none; }

/* Service cards in the older flex block share the alignment fix. */
.flx-services__grid { align-items: stretch; }
.flx-services__grid .service-card { display: flex; flex-direction: column; }
.flx-services__grid .service-card p { flex: 1 1 auto; }

/* The carousel track is wider than the page by design; clip it at every
   ancestor so it never widens the document on any breakpoint. */
.home-highlights { overflow-x: clip; }
.home-highlights .container { overflow: hidden; max-width: min(var(--container), 100%); }
/* The track must stay the container's width so the slides' percentage
   flex-basis resolves against a definite size; they overflow it on purpose
   and the container clips them. max-content made the basis indefinite and
   threw the centring off. */
.highlights__track { width: 100%; }
.site-main { overflow-x: clip; }



.a11y-panel { inset-inline-start: 20px; bottom: 86px; }

/* ---------- Build credit (matches the avnapp house style) ---------- */
@font-face {
  font-family: Audiowide;
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/audiowide.woff2') format('woff2');
}
.footer-credit {
  text-align: center;
  margin-block-start: 26px; padding-block: 22px 34px;
  border-block-start: 1px solid rgba(255,255,255,.14);
}
.built-by {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: rgba(255,255,255,.55);
  font-size: .82rem; transition: color .3s var(--ease);
}
.built-by:hover { color: var(--accent); }
.built-by .avnapp-logo { height: 34px; width: auto; display: block; }

/* ---------- reCAPTCHA badge ----------
   The v3 badge is gone because the reCAPTCHA integration itself was removed,
   so no attribution line is required. This rule is a belt-and-braces guard in
   case a plugin re-adds it. */
.grecaptcha-badge { display: none !important; }

/* Accessibility button clear of the corner. */
.a11y-btn { inset-inline-start: 20px; bottom: 20px; }
.a11y-panel { inset-inline-start: 20px; bottom: 86px; }

/* Publication cards without a featured image: centre the copy so the card
   reads as a designed panel rather than an empty block. */
.highlights__card:not(:has(img)) { display: grid; align-items: center; }
.highlights__card:not(:has(img))::after { background: none; }
.highlights__card:not(:has(img)) .highlights__body {
  position: static; padding: 32px 40px; text-shadow: none;
}
.highlights__slide:not(.is-current) .highlights__card { opacity: .45; }
.highlights__slide { transition: opacity .5s var(--ease); }
.highlights__slide.is-current { opacity: 1; }



/* ---------- Footer legal row ----------
   wp_nav_menu emits <li>s; without list-style reset they render as bullets,
   and orphaned <li>s show markers too. */
.footer-legal__list,
.footer-legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.footer-legal li { list-style: none; margin: 0; display: flex; align-items: center; }
.footer-legal li::marker { content: none; }
.footer-legal a {
  display: inline-block; padding-inline: 12px; line-height: 1.4;
  border-inline-start: 1px solid rgba(255,255,255,.45);
}
.footer-legal li:first-child a { border-inline-start: none; padding-inline-start: 0; }

.footer-bottom { align-items: center; }
.footer-bottom p { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ---------- Build credit alignment ----------
   The canvas is a replaced element and sits on the text baseline by default,
   which pushed it below the label. Align both on their centres instead. */
.footer-credit { display: flex; justify-content: center; }
.built-by { align-items: center; line-height: 1; }
.built-by span { display: inline-flex; align-items: center; line-height: 1; }
.built-by .avnapp-logo { vertical-align: middle; align-self: center; }

/* ---------- Masthead headline ----------
   Shown over the video, or over the brand gradient until a video is supplied.
   Big and thin against the tiny tracked eyebrow — the reference's type contrast. */
.home-masthead__headline {
  position: relative; z-index: 3; text-align: center;
  padding-block: clamp(3rem, 9vw, 7rem) clamp(1.5rem, 4vw, 3rem);
}
.home-masthead__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.4rem;
}
@media (min-width: 992px) { .home-masthead__eyebrow { font-size: 15px; } }
.home-masthead__title {
  font-size: clamp(2rem, 5.6vw, 4.4rem); font-weight: 300; letter-spacing: 2px;
  line-height: 1.14; color: #fff; margin: 0; max-width: 20ch; margin-inline: auto;
}
.home-masthead__headline .brand-separator { margin-block: 1.8rem 0; }

/* Entrance, matching the reference's staged rise. */
@keyframes mastheadIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.home-masthead__eyebrow { animation: mastheadIn .9s var(--ease) .15s both; }
.home-masthead__title   { animation: mastheadIn .9s var(--ease) .3s both; }
.home-masthead__headline .brand-separator { animation: mastheadIn .9s var(--ease) .45s both; }

/* The masthead is now a stack, not a bottom-aligned box. */
@media (min-width: 992px) {
  .home-masthead { display: flex; flex-direction: column; justify-content: flex-end; }
}
@media (max-width: 991px) {
  .home-masthead__headline {
    background-image: linear-gradient(150deg, #0f3557 0%, #1d5589 100%);
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-masthead__eyebrow, .home-masthead__title,
  .home-masthead__headline .brand-separator { animation: none !important; }
}
body.a11y-no-motion .home-masthead__eyebrow,
body.a11y-no-motion .home-masthead__title,
body.a11y-no-motion .home-masthead__headline .brand-separator { animation: none !important; }

/* ---------- Footer: one separator, and room for the floating a11y button ----------
   The middle band already draws a bottom border, so the credit block must not
   draw its own top border or two rules stack a few pixels apart. */
.footer-credit { border-block-start: none; margin-block-start: 0; padding-block: 26px 30px; }

/* The accessibility button is fixed over the page corner and was clipping the
   copyright line. Reserve that corner. */


/* Credit: label and logo share one optical baseline. */
.footer-credit { align-items: center; }
.built-by { display: inline-flex; align-items: center; gap: .7rem; }


/* ---------- Masthead refinements ----------
   The eyebrow is a short label, not a sentence: wide tracking only reads well
   on a few words. The firm's description sits below the rule at normal size. */
.home-masthead__eyebrow { max-width: 40ch; margin-inline: auto; }
.home-masthead__sub {
  font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 300; line-height: 1.6;
  color: rgba(255,255,255,.82); max-width: 58ch; margin: 1.6rem auto 0;
}
.home-masthead__headline .brand-separator { margin-block: 1.6rem 0; }
.home-masthead__headline { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); }
.home-masthead__title { max-width: 24ch; }
.home-masthead__sub { animation: mastheadIn .9s var(--ease) .6s both; }

/* Give the publications card breathing room so it is never clipped by the
   viewport edge or the floating accessibility button. */
.home-masthead { padding-block-end: 0; }
.home-masthead__container { margin-block-start: clamp(1rem, 3vw, 2rem); }


@media (prefers-reduced-motion: reduce) { .home-masthead__sub { animation: none !important; } }
body.a11y-no-motion .home-masthead__sub { animation: none !important; }

/* ---------- Masthead card + controls alignment ----------
   The publications card must share the container's edges with the search card
   below it, otherwise the two blocks read as misaligned. */
.home-masthead__container {
  max-width: var(--container);
  margin-inline: auto;
  width: calc(100% - 60px);
  position: relative;
}
@media (min-width: 1260px) { .home-masthead__container { width: 100%; } }

/* Controls sit inside the card's lower inline-end corner. */
.home-masthead__controls {
  position: absolute !important;
  inset-inline-end: 0 !important;
  bottom: -20px !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex; gap: 6px;
}

/* ---------- Masthead is a column: children must stretch ----------
   An earlier rule set align-items:flex-end for the row layout. Once the
   masthead became a column that cross-axis value shrink-wrapped the headline
   and pinned it to one side, so the title no longer centred on the page. */
@media (min-width: 992px) {
  .home-masthead { align-items: stretch; }
}
.home-masthead__headline { width: 100%; }

/* ---------- Slider arrow direction ----------
   The base path draws an arrow pointing to the LEFT. In RTL "next" advances
   leftwards so it keeps the base orientation and "previous" is flipped; in LTR
   it is the other way round. Handled only here — inline transforms in the
   markup would win over these rules and leave both arrows facing one way. */
.slider-nav svg,
.home-masthead__controls svg { transition: transform .2s var(--ease); }

html[dir="rtl"] [data-prev] svg { transform: rotate(180deg); }
html[dir="rtl"] [data-next] svg { transform: rotate(0deg); }
html[dir="ltr"] [data-prev] svg { transform: rotate(0deg); }
html[dir="ltr"] [data-next] svg { transform: rotate(180deg); }

/* The pause glyph is not directional. */
[data-pause] svg { transform: none !important; }

/* ---------- Accessibility button clearance ----------
   The button is pinned with inset-inline-start, which in RTL is the RIGHT
   edge. Clearance therefore belongs on padding-inline-START, not -end; padding
   the other side left the copyright line sitting under the button. */
.footer-bottom { padding-inline-start: 84px; }
@media (max-width: 700px) {
  .footer-bottom {
    padding-inline-start: 0; padding-block-end: 86px;
    flex-direction: column; align-items: flex-start; gap: .9rem;
  }
}

/* ---------- AVNAPP credit optical alignment ----------
   The canvas centres its glyphs in a 560x150 box, while the Hebrew label has
   no ascenders and so reads low. Align on the text's own optical centre. */
.footer-credit { display: flex; justify-content: center; align-items: center; }
.built-by { display: inline-flex; align-items: center; gap: .65rem; line-height: 1; }
.built-by > span {
  display: inline-block; line-height: 1; font-size: .82rem;
  position: relative; top: -2px;
}
.built-by .avnapp-logo { display: block; height: 34px; width: auto; }

/* ---------- English wordmark ----------
   The Hebrew logo is a drawn SVG of Hebrew letterforms and cannot be reused
   for Latin text, so the English lockup is typeset in the theme face at a
   matching weight, with the brand dot carried across. */
.wordmark { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; }
.wordmark__name {
  position: relative; display: inline-block;
  font-family: 'Noto Sans Hebrew', 'Heebo', Arial, sans-serif;
  font-weight: 900; font-size: 26px; letter-spacing: .04em;
  color: #fff; line-height: 1; padding-inline-end: 12px;
}
@media (min-width: 992px) { .wordmark__name { font-size: 34px; } }
.wordmark__dot {
  position: absolute; inset-inline-end: 0; bottom: .12em;
  width: .17em; height: .17em; border-radius: 50%;
  background: var(--accent); display: block;
}
.wordmark__tag {
  font-size: 10px; font-weight: 300; letter-spacing: .06em;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
@media (min-width: 992px) { .wordmark__tag { font-size: 12px; } }
html[dir="ltr"] .site-logo { text-decoration: none; }

/* ---------- Menu panel must not clip its own submenus ----------
   On desktop the panel is a single 102px strip and the submenus hang below it
   as absolutely-positioned boxes. With overflow:auto they were clipped at the
   panel edge and the panel grew its own scrollbar. Once open, let it overflow. */
@media (min-width: 992px) {
  .nav-primary[data-open="true"] {
    max-height: 102px;
    overflow: visible;
  }
  .nav-primary > ul { height: 102px; }
  /* Submenus sit below the strip, on the brand colour, and scroll only if the
     list is genuinely long. */
  .nav-primary .sub-menu {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    box-shadow: 0 18px 46px rgba(15,53,87,.28);
  }
}

/* Mobile keeps the full-height scrollable panel, but the scrollbar is styled
   so it never reads as a cut edge. */
@media (max-width: 991px) {
  .nav-primary[data-open="true"] { overflow-y: auto; overscroll-behavior: contain; }
  .nav-primary { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
  .nav-primary::-webkit-scrollbar { width: 6px; }
  .nav-primary::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 3px; }
  .nav-primary::-webkit-scrollbar-track { background: transparent; }
}

/* The chevron on parent items pointed the wrong way in RTL. */
.menu-item-has-children > a::before {
  transform: rotate(45deg) translateY(-2px);
}
html[dir="rtl"] .nav-primary .menu-item-has-children > a::before { margin-inline-start: .5em; }

/* The chevron on parent menu items adds nothing — the submenu already opens on
   hover and on tap. Removed at the request of the client. */
.menu-item-has-children > a::before { content: none !important; display: none !important; }

/* ---------- Current menu item contrast ----------
   The active item inherited the body ink colour, which on the dark gradient
   strip read as near-invisible. Keep every item white and let the accent rule
   carry the "you are here" signal. */
.nav-primary > ul > li > a,
.nav-primary > ul > li.current-menu-item > a,
.nav-primary > ul > li.current-page-ancestor > a,
.nav-primary > ul > li.current-menu-parent > a,
.nav-primary > ul > li.current_page_item > a,
.nav-primary > ul > li.current_page_ancestor > a {
  color: #fff;
  opacity: 1;
}
.nav-primary > ul > li > a:hover { color: var(--accent); }

/* The current item is marked by a full-width accent rule plus a slightly
   heavier weight — never by dimming it. */
.nav-primary > ul > li.current-menu-item > a,
.nav-primary > ul > li.current-page-ancestor > a,
.nav-primary > ul > li.current_page_item > a,
.nav-primary > ul > li.current_page_ancestor > a { font-weight: 700; }

@media (min-width: 992px) {
  .nav-primary > ul > li.current-menu-item > a::after,
  .nav-primary > ul > li.current-page-ancestor > a::after,
  .nav-primary > ul > li.current_page_item > a::after,
  .nav-primary > ul > li.current_page_ancestor > a::after { width: 100%; }
}

/* Same rule inside the submenus. */
.nav-primary .sub-menu a { color: rgba(255,255,255,.86); }
.nav-primary .sub-menu li.current-menu-item > a,
.nav-primary .sub-menu li.current_page_item > a {
  color: #fff; font-weight: 500; background: rgba(117,185,246,.28);
}

/* ---------- Footer bottom: one row below the rule ----------
   Copyright, legal links and the build credit share a single line under the
   separator, rather than the credit sitting in a band of its own. */
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem 2rem;
  border-top: 1px solid rgba(255,255,255,.18);
  margin-block-start: 26px; padding-block: 22px 30px;
}
.footer-bottom > p { margin: 0; flex: 0 1 auto; }
.footer-bottom .footer-legal { flex: 1 1 auto; justify-content: center; }
.footer-bottom .built-by { flex: 0 1 auto; }

/* The old standalone credit band is gone. */
.footer-credit { display: none; }

@media (max-width: 900px) {
  .footer-bottom {
    flex-direction: column; align-items: flex-start;
    gap: 1.1rem; padding-block-end: 90px;
  }
  .footer-bottom .footer-legal { justify-content: flex-start; }
}

/* ==========================================================================
   Hebrew typography on small screens
   The reference site's wide tracking and tight leading are tuned for large
   Hebrew display type on desktop. At mobile sizes the same values clip the
   descenders (ק ן ך ף ץ) and break the visual run of each word, which is what
   made the headline hard to read. Latin keeps the tracking; Hebrew does not.
   ========================================================================== */
@media (max-width: 767px) {
  html[dir="rtl"] .home-masthead__title {
    font-size: clamp(1.65rem, 8.2vw, 2.15rem);
    line-height: 1.42;              /* room for descenders */
    letter-spacing: 0;              /* Hebrew reads worse when tracked out */
    max-width: 100%;
    text-wrap: balance;
  }
  html[dir="rtl"] .home-masthead__eyebrow {
    font-size: 12px; letter-spacing: 2.5px; line-height: 1.6;
  }
  html[dir="rtl"] .home-masthead__sub {
    font-size: 1rem; line-height: 1.75; max-width: 100%;
  }

  /* Same treatment for the other Hebrew display headings. */
  html[dir="rtl"] .title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.4; letter-spacing: 0;
  }
  html[dir="rtl"] .cover__title {
    font-size: clamp(1.55rem, 7.4vw, 2.1rem);
    line-height: 1.4; letter-spacing: 0;
  }
  html[dir="rtl"] .section-title {
    font-size: 1.4rem; line-height: 1.45; letter-spacing: 2px;
  }
  html[dir="rtl"] .kicker,
  html[dir="rtl"] .home-slide__category,
  html[dir="rtl"] .highlights__cat {
    letter-spacing: 2.5px; font-size: 12px; line-height: 1.6;
  }
  html[dir="rtl"] .home-slide__title { line-height: 1.45; }
  html[dir="rtl"] .highlights__title { line-height: 1.45; letter-spacing: 0; }
  html[dir="rtl"] .practice-card h3 { line-height: 1.4; }
  html[dir="rtl"] .information-block h2 { line-height: 1.4; letter-spacing: 0; }
  html[dir="rtl"] .home-testimonials__text { font-size: 1.05rem; line-height: 1.7; }

  /* Body copy needs a touch more leading in Hebrew too. */
  html[dir="rtl"] .text-wrapper,
  html[dir="rtl"] .information-block p,
  html[dir="rtl"] .information-block li,
  html[dir="rtl"] .home-about p { line-height: 1.75; }

  /* Buttons: the uppercase tracking is a Latin idiom. */
  html[dir="rtl"] .primary-button { letter-spacing: .5px; font-size: 15px; }
}

/* Even on desktop, Hebrew headings need more leading than the Latin defaults. */
html[dir="rtl"] .home-masthead__title { line-height: 1.24; }
html[dir="rtl"] .title { line-height: 1.3; }
html[dir="rtl"] .cover__title { line-height: 1.3; }

/* ==========================================================================
   Small screens: fitting the header, and dropping the empty hero band
   ========================================================================== */

/* ---------- Header ----------
   At 375px the logo ended exactly where the controls began — 132px of logo
   plus 194px of buttons against 335px of usable width. Everything touched and
   the last button ran past the padding. Shrinking both sides restores a real
   gap, and the block padding is set so the bar measures exactly --header-h,
   which is the offset the rest of the page is positioned against. */
@media (max-width: 767px) {
  /* Fixed height rather than padding: the logo is the tallest child, so with
     padding the bar ends up a few pixels taller than --header-h and drifts from
     the offset the menu panel and the hero are positioned against. */
  .site-header { padding: 0 16px; height: var(--header-h); }

  .site-header .site-logo svg { width: 124px; max-height: 44px; }

  .header-actions { gap: 8px; }
  /* Width only. The open-state cross is a fixed translate tuned to the 7px
     span margins, so shortening the stack turns the cross back into a chevron. */
  .nav-toggle { width: 30px; }
  .button-square { width: 38px; height: 38px; }
  .button-square svg { width: 16px; height: 16px; }
  .lang-switch { gap: 3px; }
  .lang-switch a { width: 38px; height: 38px; font-size: 15px; }
}

/* Narrow phones (320–380px) need one more step down. */
@media (max-width: 380px) {
  .site-header { padding: 0 12px; }
  .site-header .site-logo svg { width: 104px; }
  .header-actions { gap: 6px; }
  .nav-toggle { width: 28px; }
  .button-square { width: 36px; height: 36px; }
  .lang-switch a { width: 36px; height: 36px; font-size: 14px; }
}

/* ---------- Empty hero band ----------
   No video and no poster means the media box is a blank gradient. Drop it and
   let the headline own the gradient instead, taking over the header offset the
   media box used to provide. Kept for >=992px, where the box is absolutely
   positioned and costs no height. */
@media (max-width: 991px) {
  .home-masthead__video.is-empty { display: none; }
  .home-masthead__video.is-empty + .home-masthead__headline {
    padding-block-start: calc(var(--header-h) + clamp(2.25rem, 8vw, 3.5rem));
  }
}

/* ---------- Menu icons ----------
   The home item's label is an inline SVG. With no width it laid out at its
   intrinsic size — a 252px black shape. */
.nav-primary a svg {
  width: 1.15em; height: 1.15em; fill: currentColor;
  vertical-align: -.15em; display: inline-block;
}

/* ---------- Floating accessibility button ----------
   Tucked further into the corner on phones so it sits clear of body copy. */
@media (max-width: 767px) {
  .a11y-btn {
    width: 44px; height: 44px;
    inset-inline-start: 14px; bottom: 14px;
  }
  .a11y-btn svg { width: 22px; height: 22px; }
}

/* ---------- Sub-menus below 992px ----------
   The desktop dropdown (absolute, hidden until hover) is inherited from the
   base sheet. There is no hover on a phone, so on small screens the child
   items are laid out inline under their parent and simply stay visible.
   The old drawer used to do this; it moved here when the drawer was removed. */
@media (max-width: 991px) {
  .nav-primary .sub-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 .3rem;
    padding-inline-start: 14px;
    margin-top: 6px;
  }
  .nav-primary .sub-menu li { width: 100%; }
}

/* A vertical list in Hebrew reads from the right edge, not from the middle:
   the centring here is inherited from the desktop row. */
@media (max-width: 991px) {
  .nav-primary > ul { align-items: stretch; }
  .nav-primary > ul > li > a { text-align: start; }
}

/* The sliding underline is a desktop affordance: it follows the pointer along a
   row of links. In the stacked mobile list it stretches the full panel width
   under the current item and reads as a stray rule, so the current item is
   marked by weight and colour alone. */
@media (max-width: 991px) {
  .nav-primary > ul > li > a::after { content: none; }
}

/* ==========================================================================
   Newsletter form, quotes, and the floating accessibility button
   ========================================================================== */

/* ---------- Newsletter form on phones ----------
   The form is a wrapping row on desktop, where `flex: 1 1 100%` is what pushes
   the consent line onto a row of its own. Below 640px the same form becomes a
   column — and on the vertical main axis that same declaration means "take all
   the leftover height", which left ~240px of empty blue under the checkbox. */
@media (max-width: 640px) {
  .newsletter__form { align-items: stretch; }
  .newsletter__form > *,
  .newsletter__form label,
  .newsletter__consent,
  .newsletter__msg { flex: 0 0 auto; }
}

/* ---------- Quotations ----------
   Hebrew typefaces have no italic cut, so the browser slants the upright one.
   The result is uneven and hurts letterforms that are already dense. Latin
   keeps the italic. */
html[dir="rtl"] .home-testimonials__text,
html[dir="rtl"] blockquote,
html[dir="rtl"] .home-testimonials__text em,
html[dir="rtl"] blockquote em { font-style: normal; }
html[dir="rtl"] .home-testimonials__text { font-weight: 300; }

/* Centred Hebrew paragraphs break more evenly with a slower wrap algorithm. */
html[dir="rtl"] .home-about p,
html[dir="rtl"] .home-testimonials__text,
html[dir="rtl"] .home-masthead__sub,
html[dir="rtl"] .practice-card p { text-wrap: pretty; }

/* ---------- Floating accessibility button, while the page is moving ----------
   Paired with the scroll handler in main.js. It stays in the layout, keeps its
   hit area and stays clickable throughout — it just stops covering the line you
   are reading as it goes past. */
.a11y-btn { transition: transform .25s var(--ease), opacity .25s var(--ease); }
.a11y-btn.is-scrolling { opacity: .3; transform: scale(.82); }
.a11y-btn.is-scrolling:hover,
.a11y-btn.is-scrolling:focus-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .a11y-btn { transition: opacity .25s linear; }
  .a11y-btn.is-scrolling { transform: none; }
}