/* =====================================================================
   he.css - Hebrew (RTL) overlay for the Cyticx design system.
   Loaded ONLY on /he/* pages, AFTER system.css.

   Rules:
   - Never restyles a house component; only mirrors the handful of
     direction-dependent declarations in system.css and swaps the font.
   - Nothing here can affect an English page: every selector is scoped
     under [dir="rtl"] or .cxh-*.
   ===================================================================== */

/* ---- SELF-HOSTED FONT: Heebo ----
   Heebo is the Hebrew companion to Roboto (same Latin skeleton, Hebrew
   added), so the Hebrew site keeps the exact typographic feel of the
   English one. Two variable-weight subsets, served from our own origin,
   font-display:swap only - never font-display:optional (blocklisted). */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/heebo-hebrew-variable.woff2?v=1') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/heebo-latin-variable.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[dir="rtl"] body,
[dir="rtl"] .cx-page,
[dir="rtl"] .cx-page h1, [dir="rtl"] .cx-page h2,
[dir="rtl"] .cx-page h3, [dir="rtl"] .cx-page h4,
[dir="rtl"] .cx-btn,
[dir="rtl"] .cx-nav-menu a {
  font-family: Heebo, Roboto, Arial, Helvetica, sans-serif;
}

/* ---- HEBREW TYPOGRAPHY ----
   Hebrew has no letter case, so text-transform:uppercase is a no-op, and
   wide letter-spacing actively breaks Hebrew word shapes. Both are
   neutralised. Latin fragments inside Hebrew text (SEO, AI, Google) keep
   whatever casing they are typed with. */
[dir="rtl"] .cx-btn,
[dir="rtl"] .cx-eyebrow,
[dir="rtl"] .cx-nav-menu a,
[dir="rtl"] .cxh-lang {
  text-transform: none;
  letter-spacing: 0;
}
[dir="rtl"] .cx-eyebrow    { font-size: 13px; }
[dir="rtl"] .cx-btn        { font-size: 15px; }
[dir="rtl"] .cx-nav-menu a { font-size: 15px; font-weight: 600; }
[dir="rtl"] .cx-page p     { line-height: 1.8; }

/* Hebrew reads better a touch heavier at display sizes, and never tracked in */
[dir="rtl"] .cx-page h1 { font-weight: 800; letter-spacing: 0; }
[dir="rtl"] .cx-page h2,
[dir="rtl"] .cx-page h3 { letter-spacing: 0; }

/* ---- MIRRORED DIRECTIONAL RULES ----
   The complete set of direction-dependent declarations in system.css that
   any /he/ page can reach. Anything not listed here is flex/grid based and
   mirrors on its own from dir="rtl". */
[dir="rtl"] .cx-btn .arr        { transform: scaleX(-1); }
[dir="rtl"] .cx-btn:hover .arr  { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .cx-btn .play       { border-left: 0; border-right: 7px solid currentColor;
                                  margin-right: 0; margin-left: -2px; }
[dir="rtl"] .cx-stat            { border-right: 0; border-left: 1px solid var(--cx-border); }
[dir="rtl"] .cx-stat:last-child { border-left: none; }
[dir="rtl"] .cx-steps::before   { left: auto; right: 22px; }
[dir="rtl"] .cx-faq-list        { text-align: right; }
[dir="rtl"] .cx-skip            { left: auto; right: 8px; }
[dir="rtl"] .cx-hero::before    { left: auto; right: 0; }
[dir="rtl"] .cx-hero-photo,
[dir="rtl"] .cx-hero-man        { right: auto; left: 0; }
[dir="rtl"] .cx-hero-dashboard  { right: auto; left: 24px; }
[dir="rtl"] .cx-service-card--wide .cx-new-pill { margin-left: 0; margin-right: 10px; }

@media (max-width: 1024px) {
  [dir="rtl"] .cx-hero-man,
  [dir="rtl"] .cx-hero-dashboard { left: auto; right: auto; }
}
@media (max-width: 880px) {
  [dir="rtl"] .cx-stat { border-left: none; }
}

/* ---- HEBREW LEAD FORM ---- */
.cxh-form { display: grid; gap: 16px; max-width: 560px; }
.cxh-field { display: grid; gap: 7px; }
.cxh-field label { font-size: 14px; font-weight: 600; color: #fff; }
.cxh-field .req { color: #cdee00; }
.cxh-form input,
.cxh-form select,
.cxh-form textarea {
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  font-family: Heebo, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  transition: border-color .15s, background .15s;
}
.cxh-form textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.cxh-form input:focus,
.cxh-form select:focus,
.cxh-form textarea:focus {
  outline: none;
  border-color: #cdee00;
  background: rgba(205,238,0,.06);
}
.cxh-form input::placeholder,
.cxh-form textarea::placeholder { color: #6b7280; }
.cxh-form select { appearance: none; cursor: pointer; }
.cxh-form select option { background: #131313; color: #fff; }
.cxh-form button[type="submit"] { justify-content: center; width: 100%; }
.cxh-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #9ca3af; line-height: 1.6; }
.cxh-consent input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; flex: 0 0 18px; margin-top: 2px; padding: 0; accent-color: #cdee00; }
.cxh-consent a { color: #cdee00; }
/* Honeypot. Hidden with the clip technique, NOT with left:-9999px: in an RTL
   document the inline-start edge is on the right, so a negative left offset
   becomes real scrollable overflow and gives the page a 9999px horizontal
   scrollbar. Measured on /he/contact/ at 1920/1440/390 before this fix. */
.cxh-hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cxh-note {
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #cfd3d8;
}
.cxh-note--ok  { border-color: #cdee00; background: rgba(205,238,0,.10); color: #e7e9ea; }
.cxh-note--err { border-color: #ff7a7a; background: rgba(255,122,122,.10); color: #ffd9d9; }

/* ---- LATIN / NUMERIC RUNS INSIDE HEBREW ----
   Phone numbers, prices and brand names must be isolated inside an RTL line
   or the bidi algorithm reorders them (a phone number renders backwards). */
[dir="rtl"] .ltr    { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[dir="rtl"] .cxh-num { direction: ltr; unicode-bidi: isolate; }

/* ---- DATA TABLE (results + pricing pages) ---- */
.cxh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cxh-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cxh-table th, .cxh-table td { padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
[dir="rtl"] .cxh-table th, [dir="rtl"] .cxh-table td { text-align: right; }
.cxh-table thead th { background: rgba(255,255,255,.05); color: #fff; font-weight: 700; font-size: 14px; }
.cxh-table tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.cxh-table td.num, .cxh-table th.num { text-align: center; direction: ltr; unicode-bidi: isolate; }
.cxh-table tbody tr:last-child td { border-bottom: none; }

/* ---- SMALL HEBREW-ONLY LAYOUT HELPERS ---- */
.cxh-lede { font-size: 19px; line-height: 1.85; color: #cfd3d8; max-width: 780px; }
.cxh-prose { max-width: 820px; }
.cxh-prose h2 { font-size: 30px; margin: 48px 0 16px; }
.cxh-prose h3 { font-size: 21px; margin: 32px 0 12px; }
.cxh-prose p  { margin: 0 0 16px; }
.cxh-prose ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 12px; }
[dir="rtl"] .cxh-prose ul li { position: relative; padding-right: 26px; color: #cfd3d8; line-height: 1.8; }
[dir="rtl"] .cxh-prose ul li::before {
  content: ""; position: absolute; top: .68em; right: 4px;
  width: 7px; height: 7px; border-radius: 2px; background: #cdee00;
}
@media (max-width: 880px) {
  .cxh-prose h2 { font-size: 24px; margin: 36px 0 14px; }
  .cxh-lede { font-size: 17px; }
}


/* =====================================================================
   FOOTER STYLES - captured VERBATIM from includes/footer.php (English
   site) on 2026-08-26. The English footer keeps its CSS in an inline
   <style> block, which a /he/ page never loads, so the Hebrew footer
   needs its own copy to look identical.
   RE-CAPTURE THIS BLOCK if the English footer is ever redesigned. Never
   hand-edit it into a near-miss - that is how the two drift apart.
   RTL patches for it follow immediately below.
   ===================================================================== */
.cx-footer{background:#0a0a0a;color:#cfd3d8;border-top:1px solid rgba(255,255,255,.08);font-family:Roboto,system-ui,sans-serif;font-size:14px;line-height:1.65;padding:44px 0 32px;position:relative;z-index:5}
.cx-footer *{box-sizing:border-box}
.cx-footer-inner{max-width:1140px;margin:0 auto;padding:0 20px}
.cx-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.15fr 0.9fr 1.25fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
@media (max-width:1180px){.cx-footer-grid{grid-template-columns:1fr 1fr 1fr;gap:36px}.cx-footer-grid > div:first-child{grid-column:1/-1}}
@media (max-width:780px){.cx-footer-grid{grid-template-columns:1fr 1fr;gap:32px}.cx-footer-grid > div:first-child{grid-column:1/-1}}
@media (max-width:520px){.cx-footer-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  /* Mobile: grid's border-bottom + areas' border-top used to stack into two
     hairlines with a large blank gap between them once columns collapse to 1fr. */
  .cx-footer-grid{padding-bottom:24px;gap:22px}
  .cx-footer-areas{border-top:none !important;padding-top:16px !important;margin-top:0 !important}
  /* Tighten the link-list vertical rhythm - each row had 9px top+9px bottom
     padding (~41px per row), reading as overly spaced-out on a narrow column. */
  .cx-footer ul li a{padding:6px 0}
  .cx-footer-col-head{margin-bottom:14px}
}

.cx-footer-col-head{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(205,238,0,.12)}
.cx-footer-col-head .icon{width:42px;height:42px;border-radius:8px;border:1px solid rgba(205,238,0,.3);display:flex;align-items:center;justify-content:center;color:#cdee00;flex-shrink:0;background:rgba(205,238,0,.04)}
.cx-footer-col-head .icon svg{width:20px;height:20px}
.cx-footer-col-head h5{color:#cdee00;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin:0;line-height:1}

.cx-footer-brand .cx-footer-logo{height:34px;width:auto;display:block;margin-bottom:14px}
.cx-footer-brand .cx-footer-accent{width:48px;height:2px;background:#cdee00;margin:0 0 18px;border-radius:2px}
.cx-footer-brand p{color:#cfd3d8;font-size:14px;line-height:1.7;margin:0 0 22px;max-width:340px}

.cx-footer-creds{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.cx-footer-partner{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:8px;padding:9px 28px 9px 11px;text-decoration:none;transition:transform .2s ease, box-shadow .2s ease;box-shadow:0 4px 14px rgba(0,0,0,.3);position:relative;max-width:max-content}
.cx-footer-partner:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.45)}
.cx-footer-partner .g-logo{width:22px;height:22px;flex-shrink:0}
.cx-footer-partner .g-pill-text{display:flex;flex-direction:column;line-height:1.1}
.cx-footer-partner .g-pill-text .lbl{color:#9aa0a6;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.cx-footer-partner .g-pill-text .val{color:#5f6368;font-size:13px;font-weight:600;line-height:1.1;margin-top:2px}
.cx-footer-partner .ext{position:absolute;top:7px;right:8px;color:#cdee00;font-size:12px;font-weight:700}

.cx-footer ul{list-style:none;padding:0;margin:0}
.cx-footer ul li{margin:0;padding:0;display:flex;align-items:stretch;gap:10px}
.cx-footer ul li .chev{color:#cdee00;font-weight:700;font-size:14px;line-height:1;flex-shrink:0;display:inline-flex;align-items:center}
.cx-footer a{color:#e5e7eb;text-decoration:none;transition:color .15s}
.cx-footer ul li a{display:flex;align-items:center;flex:1;padding:9px 0}
.cx-footer a:hover{color:#cdee00}

.cx-footer-contact .cx-row{display:flex;gap:14px;margin:0;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);align-items:flex-start}
.cx-footer-contact .cx-row:last-child{border-bottom:none}
.cx-footer-contact .cx-row:first-child{padding-top:0}
.cx-footer-contact .cx-row .cx-row-icon{width:36px;height:36px;border-radius:8px;border:1px solid rgba(205,238,0,.25);display:flex;align-items:center;justify-content:center;color:#cdee00;flex-shrink:0;background:rgba(205,238,0,.04)}
.cx-footer-contact .cx-row .cx-row-icon svg{width:16px;height:16px}
.cx-footer-contact .cx-row .cx-row-body{flex:1;min-width:0}
.cx-footer-contact .cx-row strong{display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#cdee00;font-weight:700;margin:0 0 5px}
.cx-footer-contact .cx-row .cx-row-val{display:block;color:#e5e7eb;font-size:15px;line-height:1.4}

.cx-footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;padding-top:28px;color:#cfd3d8;font-size:14px}
.cx-footer-bottom .legal{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cx-footer-bottom .legal a{padding:10px 6px;display:inline-flex;align-items:center;box-sizing:border-box}
.cx-footer-bottom .legal .sep{color:#cdee00;font-size:12px;line-height:1;opacity:.7}

/* Footer h5 that doubles as a link ("Industries") */
.cx-footer-col-head h5 a{display:inline-flex;align-items:center;min-height:32px}

/* Contact rows: phone/email anchors — comfortable tap padding without
   ballooning the row into empty space around small text. */
.cx-footer-contact .cx-row-val a{display:inline-flex;align-items:center;padding:5px 0;box-sizing:border-box}

@media (max-width:640px){
  .cx-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .cx-footer-bottom .legal{gap:2px 10px}
  .cx-footer-bottom .legal .sep{display:none}
}

/* ---- FOOTER: RTL patches (the only direction-dependent footer rules) ---- */
[dir="rtl"] .cx-footer-partner       { padding: 9px 11px 9px 28px; }
[dir="rtl"] .cx-footer-partner .ext  { right: auto; left: 8px; }
[dir="rtl"] .cx-footer-brand p       { max-width: 360px; }
[dir="rtl"] .cx-footer-col-head h5   { letter-spacing: 0; text-transform: none; font-size: 15px; }
[dir="rtl"] .cx-footer-contact .cx-row strong { letter-spacing: 0; text-transform: none; font-size: 13px; }
[dir="rtl"] .cx-footer,
[dir="rtl"] .cx-footer-bottom        { font-family: Heebo, Roboto, system-ui, sans-serif; }
[dir="rtl"] .cx-footer .cxh-num      { direction: ltr; unicode-bidi: isolate; }

/* =====================================================================
   DENSITY FIXES - 2026-08-26, from the GPT-5.6 vision review of the live
   Hebrew pages plus DOM measurement at 1920.
   All scoped under [dir="rtl"] so the English site is untouched.
   ===================================================================== */

/* 1. HERO VOID.
   `.cx-hero--split .cx-hero-inner` is a 1fr 1fr grid built for a hero photo.
   The Hebrew heroes are copy-only, so the second column rendered as an empty
   half. Measured: hero 1020px tall carrying 454px of content = 44.5% fill,
   against the house rule that no block may fill less than ~55% of its area.
   One column, wider measure, and a hero that sizes to what is in it. */
[dir="rtl"] .cx-hero--split .cx-hero-inner {
  grid-template-columns: 1fr;
  padding-top: 92px;
  padding-bottom: 64px;
}
[dir="rtl"] .cx-hero--split .cx-hero-text { max-width: 940px; }
[dir="rtl"] .cx-hero                      { min-height: 560px; }
/* Heroes that are NOT followed by the overlapping stats card do not need the
   200px of bottom padding reserved for that overlap. */
[dir="rtl"] .cx-hero.cx-hero--no-stats    { min-height: auto; padding-bottom: 72px; }

/* 2. ORPHAN GRID ROW.
   The house grid is 4 columns; six cards therefore render 4 + 2 and leave
   roughly 640px of dead space beside the second row. Three columns gives an
   even 3 x 2 block with no orphan. (The English homepage has the same 4+1+1
   silhouette - left alone here, reported separately, since changing the
   shared rule would restyle a live English page.) */
[dir="rtl"] .cx-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { [dir="rtl"] .cx-services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:  880px) { [dir="rtl"] .cx-services-grid { grid-template-columns: 1fr; } }

/* 3. READING SIZE.
   Hebrew at 16px in a dark UI reads smaller than Latin at the same size;
   the lede and card copy were the thinnest part of the page. */
[dir="rtl"] .cx-hero .cx-lead      { font-size: 19px; line-height: 1.8; max-width: 860px; }
[dir="rtl"] .cx-service-card p     { font-size: 15.5px; line-height: 1.75; }
[dir="rtl"] .cx-section-head p     { font-size: 17px; max-width: 860px; }
[dir="rtl"] .cx-faq-item p         { font-size: 16px; }
[dir="rtl"] .cx-step p             { font-size: 15.5px; }

/* 4. SECTION RHYTHM.
   100px top and bottom on every section stacked into ~200px of empty band
   between blocks that are themselves short. */
[dir="rtl"] .cx-section { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 880px) { [dir="rtl"] .cx-section { padding-top: 52px; padding-bottom: 52px; } }

/* A grid holding exactly FOUR cards would render 3 + 1 under the three-column
   rule above and leave a lone orphan card (measured on /he/results/). Four
   columns puts them in one clean row instead. `:has()` is already used by the
   production system.css (`.cx-hero:has(.cx-form)`), so it is safe here. */
[dir="rtl"] .cx-services-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) {
  [dir="rtl"] .cx-services-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 880px) {
  [dir="rtl"] .cx-services-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}