:root {
      --paper: #F4F4F1;
      --paper-2: #FFFFFF;
      --ink: #16181F;
      --ink-soft: #2C2F38;
      --muted: #6E7079;
      --line: rgba(22, 24, 31, 0.12);
      --line-soft: rgba(22, 24, 31, 0.07);
      --accent: #265882;
      --accent-deep: #1E4868;
      --accent-tint: rgba(38, 88, 130, 0.07);
      --accent-soft: #74A9D4;
      /* lighter brand blue, for dark backgrounds */
      --dark: #0E1F2E;
      /* deep brand navy */
      --dark-2: #16293A;
      --on-dark: #EAF0F4;
      --on-dark-muted: rgba(234, 240, 244, 0.60);
      --wa: #25D366;
      --radius: 0;
      --maxw: 1370px;
      --display: "Space Grotesk", system-ui, sans-serif;
      --body: "Hanken Grotesk", system-ui, sans-serif;
      --mono: "Space Mono", ui-monospace, monospace;
      --display-ar: "Cairo", system-ui, sans-serif;
      --body-ar: "Cairo", system-ui, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--paper);
      color: var(--ink);
      font-family: var(--body);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

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

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

    ::selection {
      background: var(--accent);
      color: #fff
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px
    }

    section[id] {
      scroll-margin-top: 78px
    }

    .eyebrow {
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 700
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em
    }

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

    /* ---------- buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .55em;
      font-family: var(--display);
      font-weight: 600;
      font-size: 1rem;
      padding: .85em 1.4em;
      border-radius: 0;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
      white-space: nowrap
    }

    .btn-primary {
      background: var(--accent);
      color: #fff
    }

    .btn-primary:hover {
      background: var(--accent-deep)
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line)
    }

    .btn-ghost:hover {
      border-color: var(--ink)
    }

    .btn-wa {
      background: var(--wa);
      color: #06351a
    }

    .btn-wa:hover {
      filter: brightness(1.04)
    }

    .btn .ic {
      width: 1.15em;
      height: 1.15em;
      flex: none
    }

    /* inline text CTA */
    .cta-link {
      display: inline-flex;
      align-items: center;
      gap: .4em;
      font-family: var(--display);
      font-weight: 600;
      color: var(--accent);
      margin-top: 24px
    }

    /* ---------- top bar ---------- */
    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 60;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .25s ease, border-color .25s ease
    }

    .topbar.scrolled {
      background: rgba(244, 244, 241, .85);
      backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--line-soft)
    }

    .topbar .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 66px;
      gap: 18px
    }

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

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

    .nav a {
      font-family: var(--display);
      font-weight: 500;
      font-size: .95rem;
      color: var(--ink-soft);
      transition: color .15s;
      position: relative
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease
    }

    .nav a:hover {
      color: var(--ink)
    }

    .nav a:hover::after {
      transform: scaleX(1)
    }

    .bar-right {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .topbar .btn-wa {
      height: 40px;
      padding: 0 1.05em;
      font-size: .9rem
    }

    /* language switcher */
    .lang {
      display: inline-flex;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: 0;
      overflow: hidden;
      flex: none;
      background: var(--paper-2)
    }

    .lang-btn {
      display: flex;
      align-items: center;
      font-family: var(--display);
      font-weight: 600;
      font-size: .85rem;
      padding: 0 .8em;
      background: transparent;
      color: var(--ink-soft);
      border: 0;
      border-inline-start: 1px solid var(--line-soft);
      cursor: pointer;
      transition: background .15s, color .15s;
      line-height: 1
    }

    .lang-btn:first-child {
      border-inline-start: 0
    }

    .lang-btn:hover {
      color: var(--ink)
    }

    .lang-btn.active {
      background: var(--accent);
      color: #fff
    }

    .hamb {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 0;
      background: var(--paper-2);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px
    }

    .hamb span {
      width: 18px;
      height: 2px;
      background: var(--ink);
      border-radius: 0;
      transition: transform .2s, opacity .2s
    }

    .hamb.open span:nth-child(1) {
      transform: translateY(6px) rotate(45deg)
    }

    .hamb.open span:nth-child(2) {
      opacity: 0
    }

    .hamb.open span:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg)
    }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 66px;
      left: 0;
      right: 0;
      z-index: 55;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      padding: 8px 24px 18px
    }

    .mobile-nav.show {
      display: block
    }

    .mobile-nav a {
      display: block;
      font-family: var(--display);
      font-weight: 500;
      font-size: 1.05rem;
      padding: 13px 0;
      border-bottom: 1px solid var(--line-soft);
      color: var(--ink)
    }

    .mobile-nav a:last-child {
      border-bottom: 0
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      padding: 118px 0 84px;
      background-color: var(--paper);
      background-image: linear-gradient(180deg, rgba(244, 244, 241, .82), rgba(244, 244, 241, .93)), url("https://lisco-solutions.com/identity/hero.webp");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 56px;
      align-items: center
    }

    .hero h1 {
      font-size: clamp(2.45rem, 5.4vw, 4.3rem)
    }

    .hero h1 .hl {
      color: var(--accent)
    }

    .hero .lede {
      margin-top: 22px;
      font-size: clamp(1.05rem, 1.5vw, 1.22rem);
      color: var(--ink-soft);
      max-width: 34ch
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px
    }

    .trust {
      margin-top: 30px;
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .06em;
      color: var(--muted);
      text-transform: uppercase;
      display: flex;
      flex-wrap: wrap;
      gap: .4em 1em
    }

    .trust span {
      display: inline-flex;
      align-items: center;
      gap: .5em
    }

    .trust span::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 0;
      background: var(--accent)
    }

    /* framed panel + crop-mark signature */
    .panel {
      position: relative;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 30px 28px
    }

    .ticked::before,
    .ticked::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 13px;
      pointer-events: none
    }

    .ticked::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid var(--accent);
      border-left: 2px solid var(--accent)
    }

    .ticked::after {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid var(--accent);
      border-right: 2px solid var(--accent)
    }

    .panel .p-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 10px
    }

    .panel .p-head .lbl {
      font-family: var(--mono);
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .panel .p-head .num {
      font-family: var(--mono);
      font-size: .7rem;
      color: var(--accent);
      letter-spacing: .1em
    }

    .cursor {
      display: inline-block;
      width: .55em;
      height: 1.02em;
      background: var(--accent);
      margin-left: 2px;
      transform: translateY(2px);
      animation: blink 1.05s steps(1) infinite
    }

    @keyframes blink {
      50% {
        opacity: 0
      }
    }

    .p-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 0;
      border-bottom: 1px solid var(--line-soft);
      font-size: .97rem
    }

    .p-row:last-child {
      border-bottom: 0;
      padding-bottom: 0
    }

    .p-row b {
      font-family: var(--display);
      font-weight: 600
    }

    .p-row span {
      font-family: var(--mono);
      font-size: .8rem;
      color: var(--muted);
      text-align: right
    }

    /* ---------- section scaffolding ---------- */
    section {
      padding: 78px 0
    }

    .band {
      background: var(--accent-tint);
      border-top: 1px solid var(--line-soft);
      border-bottom: 1px solid var(--line-soft)
    }

    .sec-head {
      max-width: 60ch;
      margin-bottom: 42px
    }

    .sec-head h2 {
      font-size: clamp(1.7rem, 3.2vw, 2.55rem);
      margin-top: 14px
    }

    .sec-head p {
      margin-top: 16px;
      font-size: 1.08rem;
      color: var(--muted)
    }

    /* offering section: text + panel, two columns */
    .offer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 54px;
      align-items: center
    }

    .offer.flip .o-text {
      order: 2
    }

    .offer.flip .o-panel {
      order: 1
    }

    .offer h2 {
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      margin-top: 14px
    }

    .offer .o-text p {
      margin-top: 18px;
      font-size: 1.08rem
    }

    .o-list {
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      gap: 13px
    }

    .o-list li {
      list-style: none;
      display: flex;
      gap: .7em;
      align-items: flex-start;
      font-size: 1.02rem;
      color: var(--ink-soft)
    }

    .o-list li::before {
      content: "→";
      color: var(--accent);
      font-family: var(--mono);
      font-weight: 700;
      margin-top: 1px
    }

    /* landing-page conversion flow inside its panel */
    .flow {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: .8rem;
      color: var(--ink-soft)
    }

    .flow .node {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 7px 11px
    }

    .flow .node.win {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent)
    }

    .flow .arr {
      color: var(--accent);
      font-weight: 700
    }

    .panel .big {
      font-family: var(--display);
      font-weight: 700;
      font-size: clamp(1.9rem, 4vw, 2.6rem);
      line-height: 1.05;
      letter-spacing: -0.02em
    }

    .panel .big em {
      font-style: normal;
      color: var(--accent)
    }

    /* "the rest" two-column layout: content + image */
    .rest-layout {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 50px;
      align-items: center
    }

    .rest-media {
      position: relative;
      align-self: stretch;
      min-height: 360px
    }

    .rest-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 1px solid var(--line)
    }

    .rest-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-top: 8px
    }

    .rest-card {
      position: relative;
      background: var(--paper-2);
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 24px 22px
    }

    .rest-card .rk {
      font-family: var(--mono);
      font-size: .7rem;
      color: var(--accent);
      letter-spacing: .12em
    }

    .rest-card h3 {
      font-size: 1.12rem;
      margin: 12px 0 8px
    }

    .rest-card p {
      font-size: .92rem;
      color: var(--muted)
    }

    /* why */
    .why {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px 40px
    }

    .why-item {
      padding-top: 22px;
      border-top: 2px solid var(--accent)
    }

    .why-ic {
      width: 34px;
      height: 34px;
      color: var(--accent);
      margin-bottom: 14px
    }

    .why-item h3 {
      font-size: 1.18rem;
      margin-bottom: 8px
    }

    .why-item p {
      font-size: .99rem;
      color: var(--muted)
    }

    /* how */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    .step .sn {
      font-family: var(--mono);
      font-size: .78rem;
      color: var(--accent);
      letter-spacing: .14em
    }

    .step h3 {
      font-size: 1.22rem;
      margin: 12px 0 8px
    }

    .step p {
      font-size: .98rem;
      color: var(--muted)
    }

    .step::after {
      content: "";
      display: block;
      height: 2px;
      background: var(--line);
      margin-top: 20px
    }

    .step:hover::after {
      background: var(--accent)
    }

    /* ---------- closing CTA + form (dark navy) ---------- */
    .close {
      background: var(--accent);
      color: var(--on-dark)
    }

    .close .eyebrow {
      color: var(--accent-soft)
    }

    .close h2 {
      color: var(--on-dark);
      font-size: clamp(1.9rem, 3.6vw, 2.9rem)
    }

    .close .sub {
      color: var(--on-dark-muted);
      margin-top: 16px;
      font-size: 1.1rem;
      max-width: 44ch
    }

    .close-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start
    }

    .contact-block {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 14px
    }

    .contact-row {
      display: flex;
      align-items: center;
      gap: 14px;
      font-family: var(--display);
      font-weight: 500
    }

    .contact-row .ci {
      width: 38px;
      height: 38px;
      border-radius: 0;
      background: rgba(234, 240, 244, .08);
      display: grid;
      place-items: center;
      flex: none
    }

    .contact-row .ci .ic {
      width: 18px;
      height: 18px
    }

    .contact-row small {
      display: block;
      font-family: var(--mono);
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--on-dark-muted);
      font-weight: 400
    }

    .contact-row a {
      transition: color .15s
    }

    .contact-row a:hover {
      color: var(--accent-soft)
    }

    form.lead {
      position: relative;
      background: #204f76;
      border: 1px solid rgba(234, 240, 244, .12);
      border-radius: 0;
      padding: 28px 26px
    }

    form.lead .ticked-d::before {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      width: 13px;
      height: 13px;
      border-top: 2px solid var(--accent-soft);
      border-left: 2px solid var(--accent-soft)
    }

    form.lead .ticked-d::after {
      content: "";
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 13px;
      height: 13px;
      border-bottom: 2px solid var(--accent-soft);
      border-right: 2px solid var(--accent-soft)
    }

    .field {
      margin-bottom: 16px
    }

    .field label {
      display: block;
      font-family: var(--mono);
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--on-dark-muted);
      margin-bottom: 7px
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      font-family: var(--body);
      font-size: 1rem;
      color: var(--on-dark);
      background: transparent;
      border: 1px solid rgba(234, 240, 244, .14);
      border-radius: 0;
      padding: 12px 14px;
      transition: border-color .15s
    }

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

    .field select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2389a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--accent-soft)
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: rgba(234, 240, 244, .32)
    }

    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    form.lead .btn-primary {
      width: 100%;
      justify-content: center;
      margin-top: 6px;
      background: var(--accent-soft);
      color: #0A1822
    }

    form.lead .btn-primary:hover {
      background: #8db9dd;
      color: #0A1822
    }

    .form-note {
      margin-top: 14px;
      font-size: .85rem;
      color: var(--on-dark-muted);
      text-align: center
    }

    .form-note a {
      color: var(--accent-soft);
      font-weight: 600
    }

    .form-status {
      margin-top: 14px;
      font-size: .92rem;
      display: none;
      border-radius: 0;
      padding: 12px 14px
    }

    .form-status.show {
      display: block
    }

    .form-status.ok {
      background: rgba(37, 211, 102, .12);
      color: #7ef0ad;
      border: 1px solid rgba(37, 211, 102, .3)
    }

    .form-status.err {
      background: rgba(255, 120, 90, .12);
      color: #ff9379;
      border: 1px solid rgba(255, 120, 90, .3)
    }

    /* footer */
    footer {
      background: var(--accent);
      color: rgba(255, 255, 255, .85);
      border-top: 1px solid rgba(255, 255, 255, .18);
      padding: 34px 0
    }

    .foot {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      justify-content: space-between;
      align-items: center
    }

    .foot .logo {
      height: 26px;
      opacity: 1
    }

    .foot-links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap
    }

    .foot-links a {
      font-family: var(--display);
      font-weight: 500;
      font-size: .92rem;
      color: rgba(255, 255, 255, .9);
      transition: color .15s
    }

    .foot-links a:hover {
      color: #fff;
      text-decoration: underline
    }

    .foot-copy {
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .18);
      text-align: center;
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .82)
    }

    /* floating WhatsApp */
    .fab {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 65;
      width: 58px;
      height: 58px;
      border-radius: 0;
      background: var(--wa);
      display: grid;
      place-items: center;
      opacity: 0;
      transform: translateY(20px) scale(.85);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease, filter .15s
    }

    .fab.show {
      opacity: 1;
      transform: none;
      pointer-events: auto
    }

    .fab:hover {
      filter: brightness(1.05)
    }

    .fab .ic {
      width: 30px;
      height: 30px
    }

    /* reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1)
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    /* ---------- RTL / Arabic ---------- */
    [dir="rtl"] body,
    [dir="rtl"] h1,
    [dir="rtl"] h2,
    [dir="rtl"] h3,
    [dir="rtl"] .btn,
    [dir="rtl"] .nav a,
    [dir="rtl"] .mobile-nav a,
    [dir="rtl"] .cta-link,
    [dir="rtl"] .p-row b,
    [dir="rtl"] .panel .big,
    [dir="rtl"] .contact-row,
    [dir="rtl"] .eyebrow,
    [dir="rtl"] .sn,
    [dir="rtl"] .rk,
    [dir="rtl"] .trust,
    [dir="rtl"] .p-row span,
    [dir="rtl"] .panel .p-head .lbl,
    [dir="rtl"] .flow,
    [dir="rtl"] .field label,
    [dir="rtl"] .contact-row small,
    [dir="rtl"] .foot-meta,
    [dir="rtl"] .form-note,
    [dir="rtl"] .lang-btn {
      font-family: var(--body-ar)
    }

    [dir="rtl"] .trust span::before {
      margin: 0
    }

    [dir="rtl"] .nav a::after {
      transform-origin: right
    }

    [dir="rtl"] .p-row span {
      text-align: left
    }

    [dir="rtl"] .o-list li::before {
      content: "←"
    }

    [dir="rtl"] .cta-link .ar,
    [dir="rtl"] .flow .arr {
      display: inline-block;
      transform: scaleX(-1)
    }

    [dir="rtl"] .cursor {
      margin-left: 0;
      margin-right: 2px
    }

    /* ---------- responsive ---------- */
    @media (max-width:900px) {
      .nav {
        display: none
      }

      .hamb {
        display: flex
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 38px
      }

      .hero .o-panel,
      .hero .panel {
        order: 2
      }

      .offer {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .offer.flip .o-text,
      .offer.flip .o-panel {
        order: 0
      }

      .rest-layout {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .rest-media {
        min-height: 260px
      }

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

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

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

      .close-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }
    }

    @media (max-width:480px) {
      body {
        font-size: 16px
      }

      .wrap {
        padding: 0 18px
      }

      section {
        padding: 54px 0
      }

      .hero {
        padding: 94px 0 44px
      }

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

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

      .trust {
        font-size: .66rem
      }

      .topbar .btn-wa span.wa-label {
        display: none
      }

      .topbar .btn-wa {
        padding: 0 .7em
      }

      .lang-btn {
        padding: 0 .55em;
        font-size: .8rem
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        scroll-behavior: auto !important
      }

      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 0
    }

    /* ============================================================
       Legal pages (privacy.html / terms.html) — typography for the
       policy content. Reuses the shared topbar/footer/colors above.
       ============================================================ */

    .legal {
      padding: 96px 0 64px;
      background: var(--paper);
    }

    .legal .wrap {
      max-width: 920px;
    }

    .legal .legal-hd {
      margin-bottom: 32px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--line);
    }

    .legal h1 {
      font-family: var(--display);
      font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
      line-height: 1.1;
      letter-spacing: -.01em;
      margin: 12px 0 12px;
    }

    .legal .meta {
      font-family: var(--mono);
      font-size: .82rem;
      letter-spacing: .04em;
      color: var(--muted);
    }

    .legal .intro {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--ink-soft);
      margin-bottom: 40px;
    }

    .legal .intro p {
      margin-bottom: 14px;
    }

    .legal .intro p:last-child {
      margin-bottom: 0;
    }

    .legal-section {
      padding: 28px 0;
      border-top: 1px solid var(--line-soft);
    }

    .legal-section:first-of-type {
      border-top: 0;
    }

    .legal-section h2 {
      font-family: var(--display);
      font-size: 1.18rem;
      letter-spacing: -.005em;
      margin-bottom: 14px;
      color: var(--ink);
    }

    .legal-section p {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--ink-soft);
      margin-bottom: 12px;
    }

    .legal-section p:last-child {
      margin-bottom: 0;
    }

    .legal-section ul {
      list-style: none;
      padding: 0;
      margin: 12px 0 16px;
    }

    .legal-section ul li {
      position: relative;
      padding-left: 22px;
      margin-bottom: 10px;
      line-height: 1.65;
      color: var(--ink-soft);
    }

    [dir="rtl"] .legal-section ul li {
      padding-left: 0;
      padding-right: 22px;
    }

    .legal-section ul li::before {
      content: "—";
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 700;
    }

    [dir="rtl"] .legal-section ul li::before {
      left: auto;
      right: 0;
    }

    .legal-section a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .legal-section a:hover {
      color: var(--accent-deep);
    }

    .legal-section strong {
      color: var(--ink);
      font-weight: 600;
    }

    .legal .legal-foot {
      margin-top: 40px;
      padding: 20px 24px;
      background: var(--accent-tint);
      border-left: 3px solid var(--accent);
      font-size: .95rem;
      color: var(--ink-soft);
      line-height: 1.6;
    }

    [dir="rtl"] .legal .legal-foot {
      border-left: 0;
      border-right: 3px solid var(--accent);
    }

    .legal .legal-foot p {
      margin-bottom: 8px;
    }

    .legal .legal-foot p:last-child {
      margin-bottom: 0;
    }

    /* ============================================================
       Social media links in the "Start here" contact block.
       Sits under the WhatsApp/Phone/Email rows on the dark close
       section, so uses on-dark color tokens.
       ============================================================ */

    .socials-block {
      margin-top: 22px;
      padding-top: 22px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .socials-block small {
      display: block;
      font-family: var(--mono);
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--on-dark-muted);
      margin-bottom: 12px;
    }

    .socials {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .socials a {
      display: inline-flex;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      color: var(--on-dark-muted);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: color .15s ease, background .15s ease, border-color .15s ease;
    }

    .socials a:hover,
    .socials a:focus-visible {
      color: var(--on-dark);
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.18);
    }

    .socials svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

    /* Phone numbers must render LTR even when the surrounding page direction
       is RTL. Without this, the leading "+" (a neutral bidi character) gets
       pushed to the trailing edge and the digit groups reverse: "+90 534 290
       32 60" would show as "60 32 290 534 90+". */
    #contactPhone,
    .contact-row a[href^="tel:"] {
      direction: ltr;
      unicode-bidi: isolate;
      display: inline-block;
    }

    /* RTL: switch the legal-page elements that hardcode a font-family back to
       Cairo so the Arabic policy content renders in the same typeface as the
       rest of the site (rather than the browser's Arabic fallback). Elements
       that inherit body's font-family don't need overriding — the main RTL
       block already switches body to Cairo. */
    [dir="rtl"] .legal h1,
    [dir="rtl"] .legal-section h2 {
      font-family: var(--display-ar);
    }

    [dir="rtl"] .legal .meta,
    [dir="rtl"] .legal .legal-foot {
      font-family: var(--body-ar);
    }

    /* RTL: also switch the footer legal links and copyright line to Cairo so
       they match the rest of the site in Arabic mode. Without this, they use
       Space Grotesk / Space Mono which have no Arabic glyphs, and the browser
       falls back to a mismatched system font. */
    [dir="rtl"] .foot-links a {
      font-family: var(--display-ar);
    }

    [dir="rtl"] .foot-copy {
      font-family: var(--body-ar);
    }

    /* RTL: switch the form controls themselves to Cairo. The main RTL block
       covers .field label, but not the input/select/textarea elements — so
       what a visitor types and the placeholder text were rendering in a
       system Arabic fallback instead of matching the rest of the page. */
    [dir="rtl"] .field input,
    [dir="rtl"] .field select,
    [dir="rtl"] .field textarea,
    [dir="rtl"] .field input::placeholder,
    [dir="rtl"] .field textarea::placeholder {
      font-family: var(--body-ar);
    }

    /* RTL: Arabic headings need more vertical breathing room than Latin
       display type. The default line-height of 1.05 tuned for Space Grotesk
       cuts off tashkeel (diacritics) and lets ascenders from the line below
       touch the descenders above. Cairo at large sizes reads well around
       1.35-1.4. */
    [dir="rtl"] h1,
    [dir="rtl"] h2,
    [dir="rtl"] h3,
    [dir="rtl"] .hero h1,
    [dir="rtl"] .legal h1,
    [dir="rtl"] .legal-section h2 {
      line-height: 1.4;
    }