:root {
      --bg: #071017;
      --bg2: #0b151d;
      --panel: #0f1a22;
      --ivory: #f4efe8;
      --muted: #a9a299;
      --gold: #c69a5f;
      --gold2: #e2bc84;
      --line: rgba(211, 166, 106, .25);
      --max: 1540px
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ivory);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      overflow-x: hidden
    }

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

    img {
      display: block;
      width: 100%
    }

    button {
      font: inherit;
      color: inherit
    }

    .wrap {
      width: min(var(--max), calc(100% - 96px));
      margin: auto
    }

    .eyebrow {
      font-size: 10px;
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--gold2)
    }

    .serif {
      font-family: Georgia, "Times New Roman", serif
    }

    /* nav */
    .rail {
      position: fixed;
      z-index: 90;
      left: 0;
      top: 0;
      bottom: 0;
      width: 70px;
      border-right: 1px solid var(--line);
      background: rgba(5, 11, 15, .86);
      backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .rail span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 9px;
      letter-spacing: .36em;
      text-transform: uppercase;
      color: #ded6cc
    }

    .nav {
      position: absolute;
      z-index: 80;
      left: 70px;
      right: 0;
      top: 0
    }

    .bh {
      position: absolute;
      top: 8px;
      right: 20px;
      z-index: 12;
      font: 400 13px/1 Georgia, serif;
      color: var(--gold2);
      letter-spacing: .02em;
      pointer-events: none
    }

    .navin {
      height: 120px;
      display: flex;
      align-items: center;
      gap: 28px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-right: auto
    }

    .logo {
      width: auto;
      height: 52px
    }

    .brandtext b {
      display: block;
      font: 25px Georgia, serif;
      font-weight: 400
    }

    .brandtext small {
      display: block;
      margin-top: 4px;
      font-size: 8px;
      letter-spacing: .3em;
      color: #c8bfb5
    }

    .menu {
      display: flex;
      gap: 30px
    }

    .menu a,
    .lang button,
    .quote-top {
      font-size: 9px;
      letter-spacing: .19em;
      text-transform: uppercase
    }

    .menu a {
      opacity: .78
    }

    .menu a:hover {
      color: var(--gold2);
      opacity: 1
    }

    .lang {
      display: flex;
      gap: 5px
    }

    .lang button {
      border: 0;
      background: transparent;
      opacity: .45;
      padding: 5px;
      cursor: pointer
    }

    .lang button.active {
      opacity: 1;
      color: var(--gold2)
    }

    .quote-top {
      padding: 15px 20px;
      border: 1px solid var(--gold);
      transition: .25s
    }

    .quote-top:hover {
      background: var(--gold);
      color: #fff
    }

    /* hero */
    .hero {
      position: relative;
      min-height: 940px;
      padding-left: 70px;
      overflow: hidden;
      background: #081119
    }

    .hero-media {
      position: absolute;
      inset: 0
    }

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

    .hero-media:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5, 11, 15, .99) 0%, rgba(5, 11, 15, .89) 28%, rgba(5, 11, 15, .25) 62%, rgba(5, 11, 15, .08) 100%), linear-gradient(0deg, rgba(4, 8, 12, .62), transparent 48%)
    }

    .hero-inner {
      position: relative;
      z-index: 4;
      padding-top: 238px
    }

    .hero-copy {
      max-width: 730px
    }

    .hero h1 {
      font: clamp(58px, 6.3vw, 102px)/.94 Georgia, "Times New Roman", serif;
      letter-spacing: -.05em;
      margin: 24px 0 30px
    }

    .hero h1 .gold {
      color: var(--gold2)
    }

    .hero p {
      max-width: 600px;
      font-size: 17px;
      line-height: 1.72;
      color: #d7d0c8
    }

    .actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 38px
    }

    .btn {
      min-height: 58px;
      padding: 0 29px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--gold);
      font-size: 9px;
      letter-spacing: .21em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: .25s
    }

    .btn.primary {
      background: linear-gradient(105deg, #9d6e35, #cca064);
      color: #fff
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, .27)
    }

    .proof {
      position: absolute;
      z-index: 4;
      right: 36px;
      bottom: 28px;
      display: flex;
      border: 1px solid var(--line);
      background: rgba(6, 12, 16, .6);
      backdrop-filter: blur(12px)
    }

    .proof span {
      padding: 15px 18px;
      border-right: 1px solid var(--line);
      font-size: 8px;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .proof span:last-child {
      border-right: 0
    }

    section,
    footer {
      padding-left: 70px
    }

    .section {
      padding-top: 115px;
      padding-bottom: 115px
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 70px;
      margin-bottom: 52px
    }

    .section-head h2 {
      font: clamp(48px, 5vw, 76px)/1 Georgia, serif;
      letter-spacing: -.04em;
      margin: 18px 0 0
    }

    .section-head p {
      max-width: 520px;
      color: var(--muted);
      line-height: 1.8;
      font-size: 14px
    }

    /* services */
    .services {
      background: var(--bg2)
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line)
    }

    .service {
      position: relative;
      min-height: 500px;
      overflow: hidden;
      background: #121a20
    }

    .service img {
      position: absolute;
      inset: 0;
      height: 100%;
      object-fit: cover;
      transition: .7s;
      filter: saturate(.96)
    }

    .service:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(5, 10, 14, .98) 0%, rgba(5, 10, 14, .74) 34%, rgba(5, 10, 14, .08) 76%)
    }

    .service:hover img {
      transform: scale(1.045)
    }

    .service-num {
      position: absolute;
      z-index: 2;
      top: 22px;
      left: 23px;
      font: 29px Georgia, serif;
      color: #f0c98f
    }

    .service-copy {
      position: absolute;
      z-index: 2;
      bottom: 24px;
      left: 24px;
      right: 24px
    }

    .service h3 {
      font: 30px/1.04 Georgia, serif;
      margin: 0 0 10px
    }

    .service p {
      font-size: 12px;
      line-height: 1.55;
      color: #beb8b0;
      margin: 0 0 14px
    }

    /* portfolio */
    .work {
      background: #efe8dc;
      color: #15191c
    }

    .work .eyebrow {
      color: #6d4a1f
    }

    .work .section-head p {
      color: #4f4b45
    }

    .portfolio-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px
    }

    .scrollhint {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #574f45
    }

    .gallery-wrap {
      position: relative
    }

    .gallery {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 18px;
      scrollbar-width: none
    }

    .gallery::-webkit-scrollbar {
      display: none
    }

    .gcard {
      flex: 0 0 min(74vw, 380px);
      height: 570px;
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      background: #0f1a22;
      cursor: pointer
    }

    .gcard.small {
      flex-basis: min(40vw, 560px)
    }

    .gcard img {
      height: 100%;
      object-fit: cover;
      transition: .65s
    }

    .gcard:hover img {
      transform: scale(1.035)
    }

    .gcap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 28px;
      background: linear-gradient(0deg, rgba(4, 8, 11, .84), transparent);
      color: white
    }

    .gcap b {
      font: 30px Georgia, serif
    }

    .gcap small {
      display: block;
      margin-top: 7px;
      font-size: 8px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #e0c398
    }

    .gallery-controls {
      display: flex;
      gap: 8px
    }

    .work-teaser {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
    }

    .work-teaser a:not(.btn) {
      position: relative;
      display: block;
      height: clamp(220px, 28vw, 390px);
      overflow: hidden;
      background: #0f1a22
    }

    .work-teaser img {
      height: 100%;
      object-fit: cover;
      transition: transform .6s
    }

    .work-teaser a:hover img {
      transform: scale(1.035)
    }

    .work-teaser .btn {
      grid-column: 1 / -1;
      justify-self: start;
      margin-top: 10px
    }

    .arrow {
      width: 48px;
      height: 48px;
      border: 1px solid #a9804e;
      background: transparent;
      color: #6f512d;
      cursor: pointer;
      font-size: 22px
    }

    .arrow:hover {
      background: #c4985e;
      color: #fff
    }

    /* split */
    .split {
      background: var(--bg)
    }

    .splitgrid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 80px;
      align-items: center
    }

    .split h2 {
      font: clamp(50px, 5vw, 78px)/1 Georgia, serif;
      letter-spacing: -.04em;
      margin: 18px 0 30px
    }

    .feature-list div {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 17px;
      padding: 20px 0;
      border-top: 1px solid var(--line)
    }

    .feature-list div:last-child {
      border-bottom: 1px solid var(--line)
    }

    .feature-list b {
      font: 27px Georgia, serif;
      color: var(--gold2)
    }

    .feature-list span {
      font-size: 13px;
      line-height: 1.62;
      color: #b9b2a9
    }

    .splitmedia {
      height: 650px;
      overflow: hidden;
      border: 1px solid var(--line)
    }

    .splitmedia img {
      height: 100%;
      object-fit: cover
    }

    /* process */
    .process {
      background: var(--bg2)
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .step {
      padding: 27px 22px;
      min-height: 220px;
      border-right: 1px solid var(--line)
    }

    .step:last-child {
      border-right: 0
    }

    .step b {
      font: 38px Georgia, serif;
      color: var(--gold2)
    }

    .step h3 {
      font-size: 10px;
      letter-spacing: .17em;
      text-transform: uppercase;
      margin: 40px 0 8px
    }

    .step p {
      font-size: 12px;
      line-height: 1.65;
      color: #aaa39a
    }

    /* community */
    .community {
      position: relative;
      background: linear-gradient(95deg, rgba(5, 10, 14, .98), rgba(5, 10, 14, .54)), url('/assets/images/synagogue.webp') center/cover
    }

    .community .content {
      max-width: 700px
    }

    .community h2 {
      font: clamp(50px, 5vw, 78px)/1 Georgia, serif;
      margin: 18px 0 24px
    }

    .community p {
      font-size: 15px;
      line-height: 1.8;
      color: #d4cdc4
    }

    .tags {
      display: flex;
      gap: 9px;
      flex-wrap: wrap;
      margin-top: 28px
    }

    .tags span {
      padding: 10px 12px;
      border: 1px solid var(--line);
      font-size: 8px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: #e3c495
    }

    /* contact */
    .contact {
      background: var(--bg)
    }

    .contactgrid {
      display: grid;
      grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
      column-gap: clamp(48px, 6.5vw, 110px);
      row-gap: 22px;
      align-items: center
    }

    .contact-copy {
      grid-column: 1;
      grid-row: 1;
      max-width: 620px
    }

    .contact-card {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0
    }

    .contact-card small {
      display: none
    }

    .contact-form {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-content: center
    }

    .contact h2 {
      font: clamp(54px, 5.6vw, 82px)/.98 Georgia, "Times New Roman", serif;
      letter-spacing: -.035em;
      margin: 36px 0 30px
    }

    .contact-lead {
      color: #b8b2aa;
      font-size: 16px;
      line-height: 1.8;
      margin: 0;
      max-width: 470px
    }

    .contact-phone {
      display: inline-block;
      margin-top: 52px;
      color: var(--gold2);
      font: clamp(28px, 3vw, 36px)/1 Georgia, serif
    }

    .contact-region {
      margin: 13px 0 0;
      color: #a9a299;
      font-size: 12px
    }

    .contact-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 42px;
      max-width: 520px
    }

    .contact-actions .btn {
      width: 100%;
      min-height: 62px;
      justify-content: flex-start;
      padding: 0 24px
    }

    .contact-actions .btn.wa {
      color: var(--ivory);
      background: transparent;
      border-color: var(--gold)
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      row-gap: 26px;
      min-width: 0
    }

    .contact-field {
      min-width: 0
    }

    .contact-field.full {
      grid-column: 1 / -1
    }

    .contact-field label {
      display: block;
      margin-bottom: 13px;
      color: var(--gold2);
      font-size: 9px;
      letter-spacing: .19em;
      line-height: 1.4;
      text-transform: uppercase
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
      display: block;
      width: 100%;
      min-height: 59px;
      padding: 13px 15px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: rgba(255, 255, 255, .025);
      color: var(--ivory);
      font: inherit;
      outline: none;
      transition: border-color .2s, background .2s
    }

    .contact-field textarea {
      min-height: 60px;
      resize: vertical
    }

    .contact-field select {
      appearance: none;
      cursor: pointer
    }

    .contact-field select:invalid {
      color: #7d7a75
    }

    .contact-field select option {
      background: var(--bg2);
      color: var(--ivory)
    }

    .contact-field input:focus,
    .contact-field select:focus,
    .contact-field textarea:focus {
      border-bottom-color: var(--gold2);
      background: rgba(255, 255, 255, .045)
    }

    .contact-upload {
      grid-column: 1 / -1;
      position: relative
    }

    .contact-upload label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 28px;
      color: #aaa39a;
      font-size: 9px;
      letter-spacing: .17em;
      line-height: 1.5;
      text-transform: uppercase;
      cursor: pointer
    }

    .contact-upload label::before {
      content: "+";
      color: var(--gold2);
      font-size: 15px
    }

    .contact-upload input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(50%);
      border: 0
    }

    .contact-upload:focus-within label {
      color: var(--gold2)
    }

    .contact-upload-meta {
      display: block;
      margin-top: 4px;
      color: #77736d;
      font-size: 10px;
      line-height: 1.5;
      overflow-wrap: anywhere
    }

    .contact-submit {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 62px;
      justify-content: flex-start;
      margin: 0;
      padding: 0 24px
    }

    .contact-submit:disabled {
      cursor: wait;
      opacity: .7;
      transform: none;
      box-shadow: none
    }

    .contact-consent,
    .contact-status {
      grid-column: 1 / -1;
      margin: -9px 0 0;
      color: #aaa39a;
      font-size: 11px;
      line-height: 1.7
    }

    .contact-consent a {
      color: #c8bfb5;
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .contact-status {
      min-height: 1.7em;
      margin-top: -20px
    }

    .contact-status.error {
      color: #f0a39a
    }

    .contact-status.success {
      color: var(--gold2)
    }

    .contact-honeypot {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden
    }

    html[dir=rtl] .contact-honeypot {
      left: auto;
      right: -10000px
    }

    /* footer */
    footer {
      padding-top: 75px;
      padding-bottom: 30px;
      background: #050a0e
    }

    .foot {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
      gap: 40px
    }

    .foot h3 {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold2)
    }

    .foot a {
      display: block;
      margin: 10px 0;
      font-size: 12px;
      color: #bcb4ab
    }

    .foot p {
      font-size: 12px;
      line-height: 1.65;
      color: #9f978e;
      max-width: 420px
    }

    .copy {
      border-top: 1px solid var(--line);
      margin-top: 48px;
      padding-top: 21px;
      font-size: 10px;
      color: #837d76;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap
    }

    .dev a {
      color: var(--gold2)
    }

    /* lightbox */
    .lightbox {
      position: fixed;
      z-index: 999;
      inset: 0;
      background: rgba(2, 5, 7, .94);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 36px
    }

    .lightbox.open {
      display: flex
    }

    .lightbox img {
      max-width: 94vw;
      max-height: 88vh;
      width: auto;
      height: auto;
      box-shadow: 0 30px 100px rgba(0, 0, 0, .5)
    }

    .lbclose {
      position: absolute;
      right: 26px;
      top: 20px;
      border: 1px solid var(--gold);
      background: rgba(0, 0, 0, .25);
      width: 48px;
      height: 48px;
      cursor: pointer;
      font-size: 25px
    }

    @media(max-width:1100px) {
      .menu {
        display: none
      }

      .wrap {
        width: calc(100% - 56px)
      }

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

      .splitgrid,
      .contactgrid {
        grid-template-columns: 1fr
      }

      .contact-copy,
      .contact-card,
      .contact-form {
        grid-column: 1;
        grid-row: auto
      }

      .steps {
        grid-template-columns: 1fr 1fr
      }

      .foot {
        grid-template-columns: 1fr 1fr
      }

      .gcard,
      .gcard.small {
        flex-basis: 78vw
      }

      .work-teaser a:not(.btn) {
        height: 260px
      }

      .splitmedia {
        height: 520px
      }
    }

    @media(max-width:720px) {
      .rail {
        display: none
      }

      .nav {
        left: 0
      }

      .navin {
        height: 92px
      }

      .wrap {
        width: calc(100% - 32px)
      }

      section,
      footer {
        padding-left: 0
      }

      .hero {
        padding-left: 0;
        min-height: 820px
      }

      .brandtext small {
        display: none
      }

      .brandtext b {
        font-size: 18px
      }

      .logo {
        width: auto;
        height: 40px
      }

      .quote-top {
        display: none
      }

      .lang {
        margin-left: auto
      }

      .hero-media img {
        object-position: 68% center
      }

      .hero-media:after {
        background: linear-gradient(0deg, rgba(4, 8, 12, .98) 0%, rgba(4, 8, 12, .75) 50%, rgba(4, 8, 12, .22) 100%)
      }

      .hero-inner {
        padding-top: 360px
      }

      .hero h1 {
        font-size: 49px
      }

      .hero p {
        font-size: 14px
      }

      .proof {
        display: none
      }

      .section {
        padding-top: 78px;
        padding-bottom: 78px
      }

      .section-head {
        display: block
      }

      .section-head p {
        margin-top: 20px
      }

      .service-grid {
        grid-template-columns: 1fr
      }

      .service {
        min-height: 430px
      }

      .gcard,
      .gcard.small {
        flex-basis: 86vw;
        height: 470px
      }

      .work-teaser {
        grid-template-columns: 1fr 1fr;
        gap: 8px
      }

      .work-teaser a:not(.btn) {
        height: 220px
      }

      .work-teaser a:not(.btn):nth-child(3) {
        display: none
      }

      .splitmedia {
        height: 430px
      }

      .steps {
        grid-template-columns: 1fr
      }

      .foot {
        grid-template-columns: 1fr
      }

      .copy {
        display: block
      }

      .copy span {
        display: block;
        margin-top: 8px
      }

      .contactgrid {
        gap: 36px
      }

      .contact-form {
        grid-template-columns: 1fr;
        row-gap: 22px
      }

      .contact-field.full,
      .contact-upload,
      .contact-submit,
      .contact-consent,
      .contact-status {
        grid-column: 1
      }

      .contact-actions {
        gap: 10px;
        margin-top: 32px
      }

      .contact-actions .btn {
        min-height: 56px;
        padding: 0 13px;
        letter-spacing: .12em
      }
    }

    /* ===== Back to top ===== */
    .totop {
      position: fixed;
      z-index: 125;
      right: 24px;
      bottom: 92px;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--panel);
      border: 1px solid var(--gold);
      color: var(--gold2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: .25s
    }

    .totop.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .totop:hover {
      background: linear-gradient(105deg, #9d6e35, #cca064);
      color: #fff;
      border-color: transparent
    }

    .totop svg {
      width: 20px;
      height: 20px
    }

    @media(max-width:720px) {
      .totop {
        right: 16px;
        bottom: 72px;
        width: 44px;
        height: 44px
      }
    }

    html[dir=rtl] .totop {
      right: auto;
      left: 24px
    }

    @media(max-width:720px) {
      html[dir=rtl] .totop {
        left: 16px;
        right: auto
      }
    }

/* ===== Contact: WhatsApp + click-to-call ===== */
    .card .cta-row {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px
    }

    .card .cta-row .btn {
      margin-top: 0;
      width: 100%
    }

    .btn.wa {
      background: transparent;
      border-color: var(--gold);
      color: var(--ivory)
    }

    .btn.wa:hover {
      background: var(--gold);
      color: #fff
    }

    .wa-ico {
      width: 17px;
      height: 17px;
      margin-right: 9px;
      flex: none
    }

    /* Floating WhatsApp bubble (desktop / tablet) */
    .wafab {
      position: fixed;
      z-index: 120;
      right: 22px;
      bottom: 22px;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: var(--panel);
      color: var(--gold2);
      border: 1px solid var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
      transition: .25s
    }

    .wafab:hover {
      transform: scale(1.07);
      background: linear-gradient(105deg, #9d6e35, #cca064);
      color: #fff;
      border-color: transparent
    }

    .wafab svg {
      width: 30px;
      height: 30px
    }

    .wafab-label {
      position: fixed;
      z-index: 120;
      right: 92px;
      bottom: 37px;
      background: #0f1a22;
      border: 1px solid var(--line);
      color: var(--ivory);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 9px 13px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateX(8px);
      transition: .25s
    }

    .wafab:hover+.wafab-label {
      opacity: 1;
      transform: translateX(0)
    }

    /* Mobile sticky call / WhatsApp bar */
    .mbar {
      display: none
    }

    /* ===== Responsive polish ===== */
    @media(max-width:1100px) {
      .hero-inner {
        padding-top: 210px
      }
    }

    @media(max-width:720px) {

      .wafab,
      .wafab-label {
        display: none
      }

      body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom))
      }

      .actions {
        flex-direction: column
      }

      .actions .btn {
        width: 100%
      }

      .card .cta-row .btn {
        width: 100%
      }

      .mbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        position: fixed;
        z-index: 120;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(6, 12, 16, .97);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom)
      }

      .mbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 60px;
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--ivory)
      }

      .mbar a.call {
        border-right: 1px solid var(--line)
      }

      .mbar a.wa {
        background: linear-gradient(105deg, #9d6e35, #cca064);
        color: #fff
      }

      .mbar svg {
        width: 19px;
        height: 19px;
        flex: none
      }
    }

    @media(max-width:400px) {
      .wrap {
        width: calc(100% - 24px)
      }

      .hero h1 {
        font-size: 40px
      }

      .section-head h2,
      .split h2,
      .community h2,
      .contact h2 {
        font-size: 37px
      }

      .navin {
        height: 74px
      }

      .logo {
        width: 38px;
        height: 38px
      }

      .lang button {
        padding: 8px 5px
      }

      .service {
        min-height: 380px
      }

      .gcard,
      .gcard.small {
        height: 420px
      }
    }

    @media(max-height:520px) and (orientation:landscape) {
      .hero {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 56px
      }

      .hero-inner {
        padding-top: 0
      }
    }

    /* ===== Hamburger + mobile drawer ===== */
    .burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      margin-left: 12px;
      border: 1px solid var(--line);
      background: rgba(6, 12, 16, .5);
      cursor: pointer;
      padding: 0 11px;
      flex: none
    }

    .burger span {
      display: block;
      height: 2px;
      background: var(--ivory);
      transition: .25s
    }

    .drawer {
      position: fixed;
      z-index: 200;
      top: 0;
      bottom: 0;
      right: 0;
      width: min(82vw, 320px);
      background: #0b141b;
      border-left: 1px solid var(--line);
      transform: translateX(100%);
      transition: transform .3s;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 100px 30px 40px;
      overflow-y: auto
    }

    .drawer-menu {
      display: flex;
      flex-direction: column
    }

    .drawer-menu a {
      padding: 15px 0;
      font: 20px Georgia, serif;
      border-bottom: 1px solid var(--line);
      color: var(--ivory)
    }

    .drawer-lang {
      gap: 8px;
      margin-top: 6px
    }

    .drawer-lang button {
      font-size: 12px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ivory);
      cursor: pointer
    }

    .drawer-lang button.active {
      color: var(--gold2);
      border-color: var(--gold)
    }

    .drawer .btn {
      width: 100%;
      margin-top: 8px
    }

    .drawer-backdrop {
      position: fixed;
      z-index: 190;
      inset: 0;
      background: rgba(2, 5, 7, .6);
      opacity: 0;
      visibility: hidden;
      transition: .3s
    }

    body.drawer-open .drawer {
      transform: translateX(0)
    }

    body.drawer-open .drawer-backdrop {
      opacity: 1;
      visibility: visible
    }

    body.drawer-open {
      overflow: hidden
    }

    @media(max-width:1100px) {
      .burger {
        display: flex
      }
    }

    /* ===== Cookie consent (card) ===== */
    .cookiebar {
      position: fixed;
      z-index: 130;
      left: 20px;
      right: 20px;
      bottom: 22px;
      margin: 0 auto;
      max-width: 520px;
      background: rgba(11, 18, 24, .98);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(201, 164, 92, .55);
      border-radius: 18px;
      box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
      padding: 24px 26px;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center
    }

    .cookiebar.show {
      display: flex
    }

    .cookiebar p {
      margin: 0;
      font-size: 13.5px;
      color: #d7d0c6;
      line-height: 1.65
    }

    .cookiebar a {
      color: var(--gold2);
      text-decoration: underline
    }

    .ck-actions {
      display: flex;
      gap: 12px;
      width: 100%
    }

    .cookiebar button {
      flex: 1;
      min-height: 48px;
      padding: 0 18px;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      cursor: pointer;
      border: 1px solid var(--gold);
      border-radius: 10px;
      white-space: nowrap;
      transition: .2s
    }

    .ck-accept {
      background: linear-gradient(105deg, #9d6e35, #cca064);
      color: #fff;
      border-color: transparent
    }

    .ck-accept:hover {
      filter: brightness(1.08)
    }

    .ck-decline {
      background: transparent;
      color: var(--ivory)
    }

    .ck-decline:hover {
      background: rgba(255, 255, 255, .06)
    }

    @media(max-width:720px) {
      .cookiebar {
        left: 14px;
        right: 14px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        padding: 20px 20px
      }
    }

    @media(min-width:721px) {
      .cookiebar {
        left: 24px;
        right: auto;
        margin: 0;
        max-width: 390px;
        align-items: flex-start;
        text-align: left
      }

      .ck-actions {
        width: auto
      }

      .cookiebar button {
        flex: none;
        min-width: 120px
      }
    }

    /* ===== RTL (Hebrew) ===== */
    html[dir=rtl] .eyebrow,
    html[dir=rtl] .menu a,
    html[dir=rtl] .btn,
    html[dir=rtl] .quote-top,
    html[dir=rtl] .step h3,
    html[dir=rtl] .foot h4,
    html[dir=rtl] .card small,
    html[dir=rtl] .tags span,
    html[dir=rtl] .gcap small,
    html[dir=rtl] .proof span,
    html[dir=rtl] .scrollhint,
    html[dir=rtl] .mbar a,
    html[dir=rtl] .cookiebar button,
    html[dir=rtl] .service h3,
    html[dir=rtl] .contact-field label,
    html[dir=rtl] .contact-upload label,
    html[dir=rtl] .drawer-lang button {
      letter-spacing: normal;
      text-transform: none
    }

    html[dir=rtl] .contact h2 {
      letter-spacing: normal
    }

    html[dir=rtl] .brand {
      margin-right: 0;
      margin-left: auto;
      direction: ltr
    }

    html[dir=rtl] .rail {
      left: auto;
      right: 0;
      border-right: 0;
      border-left: 1px solid var(--line)
    }

    html[dir=rtl] .nav {
      left: 0;
      right: 70px
    }

    html[dir=rtl] section,
    html[dir=rtl] footer,
    html[dir=rtl] .hero {
      padding-left: 0;
      padding-right: 70px
    }

    html[dir=rtl] .service-num {
      left: auto;
      right: 23px
    }

    html[dir=rtl] .proof {
      right: auto;
      left: 36px
    }

    html[dir=rtl] .wafab {
      right: auto;
      left: 22px
    }

    html[dir=rtl] .wafab-label {
      right: auto;
      left: 92px;
      transform: translateX(-8px)
    }

    html[dir=rtl] .hero-media img {
      transform: scaleX(-1)
    }

    html[dir=rtl] .hero-media:after {
      background: linear-gradient(270deg, rgba(5, 11, 15, .99) 0%, rgba(5, 11, 15, .89) 28%, rgba(5, 11, 15, .25) 62%, rgba(5, 11, 15, .08) 100%), linear-gradient(0deg, rgba(4, 8, 12, .62), transparent 48%)
    }

    html[dir=rtl] .community {
      background: linear-gradient(265deg, rgba(5, 10, 14, .98), rgba(5, 10, 14, .54)), url('/assets/images/synagogue.webp') center/cover
    }

    html[dir=rtl] .contact {
      background: var(--bg)
    }

    @media(max-width:1100px) {
      html[dir=rtl] .nav {
        right: 0
      }
    }

    @media(max-width:720px) {

      html[dir=rtl] section,
      html[dir=rtl] footer,
      html[dir=rtl] .hero {
        padding-right: 0
      }

      html[dir=rtl] .lang {
        margin-left: 0
      }
    }

.faq {
        background: var(--bg2)
      }

      .faqlist {
        border-top: 1px solid var(--line);
        margin-top: 8px
      }

      .faqlist details {
        border-bottom: 1px solid var(--line)
      }

      .faqlist summary {
        list-style: none;
        cursor: pointer;
        padding: 26px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        font: 22px/1.3 Georgia, serif;
        color: var(--ivory)
      }

      .faqlist summary::-webkit-details-marker {
        display: none
      }

      .faqlist summary::after {
        content: "+";
        font: 28px Georgia, serif;
        color: var(--gold2);
        transition: .25s
      }

      .faqlist details[open] summary::after {
        transform: rotate(45deg)
      }

      .faqlist p {
        margin: 0 0 26px;
        max-width: 820px;
        font-size: 15px;
        line-height: 1.8;
        color: #c2bbb2
      }

      @media(max-width:720px) {
        .faqlist summary {
          font-size: 18px;
          padding: 20px 0
        }
      }