/* =====================================================================
   INDUSTRY PAGE additions (phase 5, shared block — identical in the six
   files: industries-healthcare / industries-hotels-hospitality /
   industries-education / industries-logistics / industries-retail-ecommerce /
   real-estate-website-development-company; EN + AR). Loaded after
   service.css, which owns the sv-* section system. Prefixed ix-*:

   .ix-hero__photo  faded industry photo behind the poster type (multiply + mask)
   .ix-facts        four fact chips under the hero CTAs
   .ix-moment       the hero-moment slot: one .ix-card per page (appointment slip,
                    rate card, admissions ticket, quote slip, order receipt, listing)
   .ix-tiles        photo tiles ("who we build for")
   .ix-integ        integration rows (kit .feats + a display label)
   .ix-price        starting prices as a ledger + the smaller-start card
   .ix-search       search-phrase chips (sv-inds behaviour + cursor peek)
   .ix-notes        UAE notes (licence, data, payments, Arabic) on a deep band
   .ix-fit          "fits this package" line under a must-have
   .ix-guide        the matching blog guide, flagged inside the links list
   .in-more*        rows of the shared partial public/v3/industries/_more-industries
   ===================================================================== */

/* ---------- hero: faded photo + fact chips + moment slot ---------- */
.ix-hero { --ix-photo: .24; }
.ix-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ix-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--ix-pos, 60% 40%); opacity: var(--ix-photo); mix-blend-mode: multiply; filter: saturate(.55) contrast(1.08); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 70%, transparent 100%); }
@media (min-width: 1024px) {
  .ix-hero__photo img { -webkit-mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 18%, #000 52%, #000 100%); mask-image: linear-gradient(calc(90deg * var(--dir)), transparent 18%, #000 52%, #000 100%); }
}
.ix-hero .ph__bg { z-index: -1; }
.ix-hero .ph__title { font-size: clamp(40px, 8.6vw, 128px); }
.ix-hero .ph__title em { font-size: 1.02em; }
:root:lang(ar) .ix-hero .ph__title { font-size: clamp(34px, 7vw, 96px); }
.ix-facts { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 3; }
.ix-fact { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 9px 14px 8px; border-radius: 999px; background: color-mix(in oklab, var(--fg) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--fg) 18%, transparent); color: var(--fg); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.ix-fact b { font: 400 21px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .01em; white-space: nowrap; }
:root:lang(ar) .ix-fact b { font-weight: 800; font-size: 18px; line-height: 1.3; }
.ix-fact:nth-child(2n) b { color: var(--acc); }
.ix-moment { position: relative; z-index: 3; width: 100%; max-width: 460px; justify-self: center; }
@media (min-width: 1024px) {
  .ix-hero .sv-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); align-items: center; }
  .ix-moment { justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) { .ix-moment { animation: ixMoment 1.2s .4s var(--ease) both; } }
@keyframes ixMoment { from { transform: translateY(28px); } }  /* transform only: the card's text is never at reduced opacity (no-JS / crawler renders) */
@media (max-width: 1023px) { .ix-moment { margin-top: 6px; } }

/* ---------- the hero card (one per page) ---------- */
.ix-card { --ix-r: -2.5deg; position: relative; margin-inline: auto; width: min(100%, 390px); padding: 20px 20px 22px; border-radius: 16px; background: var(--paper); color: var(--ink); font-size: 14px; box-shadow: 0 34px 60px -34px color-mix(in oklab, var(--ink) 80%, transparent), 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent); transform: rotate(calc(var(--ix-r) * var(--dir))); }
.ix-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); font: 400 21px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .02em; }
:root:lang(ar) .ix-card__head { font-weight: 800; font-size: 19px; line-height: 1.3; }
.ix-card__head small { font: 600 11px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-align: end; }
:root:lang(ar) .ix-card__head small { letter-spacing: 0; font-size: 12px; }
.ix-card__rows { display: grid; }
.ix-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px dotted var(--line); }
.ix-card__row span:first-child { color: var(--ink-2); }
.ix-card__row span:last-child { white-space: nowrap; font-weight: 700; text-align: end; }
.ix-card__row--hl span:last-child { color: var(--b1-accent); }
.ix-card__row--bad span:last-child { color: var(--b2-ink); text-decoration: line-through; text-decoration-thickness: 2px; }
.ix-card__total { display: grid; gap: 4px; padding-top: 14px; }
.ix-card__total small { font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
:root:lang(ar) .ix-card__total small { letter-spacing: 0; font-size: 12px; }
.ix-card__total b { font: 400 clamp(30px, 3vw, 40px)/1 var(--f-num); color: var(--b1-accent); white-space: nowrap; }
.ix-card__total b [data-price] { font-size: inherit; }
.ix-card__stamp { position: absolute; top: 14px; inset-inline-end: -12px; padding: 7px 12px 5px; border: 3px solid var(--b2); border-radius: 8px; color: var(--b2); font: 400 14px/1 var(--f-display); text-transform: uppercase; letter-spacing: .08em; transform: rotate(calc(10deg * var(--dir))); mix-blend-mode: multiply; opacity: .95; white-space: nowrap; }
:root:lang(ar) .ix-card__stamp { font-weight: 800; letter-spacing: 0; }
.ix-card__foot { margin-top: 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.ix-slots { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px; }
.ix-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 10px; background: var(--cream); color: var(--ink); font-weight: 650; font-size: 13px; box-shadow: inset 0 0 0 1.5px var(--line); white-space: nowrap; }
.ix-slot--on { background: var(--deep); color: var(--cream); box-shadow: none; }
.ix-slot--on i { color: var(--b2); }
.ix-steps { display: grid; gap: 8px; padding: 12px 0 2px; counter-reset: ixs; }
.ix-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.ix-steps li::before { counter-increment: ixs; content: counter(ixs); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--cream); font: 400 13px/1 var(--f-num); }
.ix-steps li.is-done::before { background: var(--b2); color: var(--ink); content: "\2713"; font-family: var(--f-body); font-weight: 800; }
.ix-steps li span:last-child { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
:root:lang(ar) .ix-steps li span:last-child { letter-spacing: 0; }
.ix-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.ix-tags span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, transparent); font-size: 12px; font-weight: 650; }
.ix-card__img { display: block; margin: -20px -20px 12px; height: 128px; overflow: hidden; border-radius: 16px 16px 0 0; }
.ix-card__img img { width: 100%; height: 100%; object-fit: cover; }
.ix-card__img + .ix-card__stamp { top: 110px; }
@media (hover: hover) and (pointer: fine) { .ix-card { transition: transform .6s var(--ease); } .ix-moment:hover .ix-card { transform: rotate(0deg) translateY(-6px); } }

/* ---------- photo tiles ---------- */
.ix-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ix-tile { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 6px; align-content: end; min-height: clamp(160px, 18vw, 250px); padding: clamp(14px, 1.6vw, 22px); border-radius: var(--r-lg); background: var(--deep-2); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-deep); }
.ix-tile__img { position: absolute; inset: 0; z-index: -2; }
.ix-tile__img img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(.6); transform: scale(1.04) translateY(var(--py, 0)); transition: opacity .5s, filter .5s, transform 1.2s var(--ease); }
.ix-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--deep) 10%, transparent) 0, color-mix(in oklab, var(--deep) 86%, transparent) 72%, var(--deep) 100%); }
.ix-tile__ico { position: absolute; top: 12px; inset-inline-start: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 16px; }
.ix-tile__n { position: absolute; top: 10px; inset-inline-end: 14px; font: 400 clamp(34px, 4vw, 56px)/1 var(--f-num); color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--cream) 55%, transparent); }
.ix-tile h3 { font: 400 clamp(20px, 1.9vw, 27px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--cream); }
:root:lang(ar) .ix-tile h3 { font-weight: 800; line-height: 1.35; font-size: clamp(18px, 1.6vw, 23px); }
.ix-tile p { font-size: 13.5px; line-height: 1.4; color: color-mix(in oklab, var(--cream) 78%, var(--deep)); }
@media (hover: hover) and (pointer: fine) { .ix-tile:hover .ix-tile__img img { opacity: .78; filter: none; transform: scale(1.1) translateY(var(--py, 0)); } }
@media (min-width: 768px) { .ix-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* ---------- integrations ---------- */
.ix-integ__grid { display: grid; gap: 0 clamp(24px, 3vw, 48px); }
.ix-integ .feat { padding: 20px 0; }
.ix-integ .feat__ico { background: var(--deep); color: var(--b2); }
.ix-integ__t { display: block; font: 400 clamp(21px, 1.8vw, 27px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--fg); }
:root:lang(ar) .ix-integ__t { font-weight: 800; line-height: 1.4; font-size: clamp(19px, 1.6vw, 24px); }
.ix-integ__d { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
@media (min-width: 900px) { .ix-integ__grid { grid-template-columns: 1fr 1fr; } .ix-integ .feats .feat:last-child { border-bottom: 0; } .ix-integ .feats .feat:nth-last-child(2) { border-bottom: 0; } }

/* ---------- pricing band ---------- */
.ix-price__grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.ix-price__lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 58ch; color: var(--fg); }
.ix-price__lede strong { font-weight: 700; white-space: nowrap; }
.ix-price .ledger__grid { padding-inline: 0; --cols: 3; }
.ix-price .ledger__item { padding-inline-start: clamp(12px, 1.6vw, 24px); }
.ix-price .ledger__item:first-child { padding-inline-start: 0; }
.ix-price .ledger__item:first-child::before { display: none; }
.ix-price .ledger__item { container-type: inline-size; }
.ix-price .ledger__num { font-size: clamp(24px, 3.4vw, 60px); color: var(--ink); }
.ix-price .ledger__num [data-price] { font-size: min(1em, calc(88cqi / var(--px-em, 6))); }  /* the widest currency variant always fits its column */
.ix-price .ledger__num small { color: var(--ink); font: 400 .5em/1 var(--f-num); }
.ix-price .ledger__item dd { color: var(--hot-2); max-width: 22ch; font-size: 14px; }
.ix-price__start { display: grid; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 30px 50px -36px color-mix(in oklab, var(--b2-ink) 90%, transparent); }
.ix-price__start p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.ix-price__start p strong { color: var(--ink); white-space: nowrap; }
.ix-price__start .cta-row { margin-top: 4px; }
@media (max-width: 559px) { .ix-price .ledger__grid { --cols: 1; } .ix-price .ledger__item { padding-inline-start: 0; padding-block: 10px; } .ix-price .ledger__item::before { display: none; } .ix-price .ledger__item + .ledger__item { border-top: 1px solid var(--rule); } }
@media (min-width: 1024px) { .ix-price__grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: center; column-gap: clamp(40px, 5vw, 80px); } }

/* ---------- search phrases ---------- */
.ix-search .sv-ind { font-size: clamp(22px, 4vw, 60px); }
.ix-search .sv-ind i { font-size: .5em; }
.ix-search .sv-ind span::before, .ix-search .sv-ind span::after { content: "\201C"; opacity: .55; }
.ix-search .sv-ind span::after { content: "\201D"; }
:root:lang(ar) .ix-search .sv-ind { font-weight: 800; font-size: clamp(19px, 3vw, 44px); line-height: 1.5; }
.ix-search__note { margin-top: clamp(18px, 2vw, 28px); font-size: 15px; color: var(--fg-2); max-width: 70ch; line-height: 1.6; }

/* ---------- UAE notes (deep band) ---------- */
.ix-notes { display: grid; gap: 14px; }
.ix-note { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: color-mix(in oklab, var(--cream) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line-deep); }
.ix-note__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 19px; }
.ix-note h3 { font: 400 clamp(22px, 2vw, 30px)/1.02 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--cream); }
:root:lang(ar) .ix-note h3 { font-weight: 800; line-height: 1.4; font-size: clamp(19px, 1.7vw, 25px); }
.ix-note p { font-size: 15px; line-height: 1.6; color: var(--on-deep-2); }
@media (min-width: 700px) { .ix-notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ix-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- tapes, fit line, guide flag ---------- */
.ix-tapes { margin-top: clamp(10px, 2vw, 26px); }
.ix-fit { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 4px; font-size: 13.5px; font-weight: 650; color: var(--b1-accent); }
.ix-fit [data-price] { white-space: nowrap; }
.sv-link .ix-guide { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--b2); color: var(--ink); font: 700 12px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
:root:lang(ar) .sv-link .ix-guide { letter-spacing: 0; font-size: 13px; }
.sv-link .ix-guide i { width: auto; height: auto; box-shadow: none; font-size: 13px; }
.sv-link:hover .ix-guide i { background: transparent; color: inherit; transform: none; }
.sv-links__list .sv-link { flex-wrap: wrap; row-gap: 6px; }
.sv-links__list .sv-link .sv-link__t { flex: 1 1 60%; }

/* ---------- "More industries" rows (shared partial public/v3/industries/_more-industries + the AR list) ---------- */
.in-more__head { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: clamp(26px, 3vw, 44px); }
.in-more__head .subhead { color: var(--fg); }
.in-more { grid-column: 1 / -1; }
.in-more li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.in-more .sv-link { flex: 1 1 min(100%, 520px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico t go" "ico d go"; column-gap: 16px; row-gap: 2px; min-height: 72px; }
.in-more .sv-link__t { grid-area: t; font-size: clamp(22px, 2.6vw, 40px); }
:root:lang(ar) .in-more .sv-link__t { font-size: clamp(19px, 2vw, 30px); }
.in-more .sv-link > i { grid-area: go; }
.in-more__ico { grid-area: ico; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 18px; }
.in-more__d { grid-area: d; font-size: 14px; color: var(--fg-2); line-height: 1.35; }
.in-more__ar { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font: 600 14px/1 var(--f-ar, var(--f-body)); color: var(--b2-on-deep); text-decoration-thickness: 1.5px; }
.in-more .sv-link:hover .sv-link__t { translate: 0; }

/* ---------- real-estate page: live H4 cards + business-type tiles whose titles are not headings ---------- */
.ix-re .sv-trust__card h4 { font: 400 clamp(28px, 3vw, 48px)/.98 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); max-width: 16ch; }
:root:lang(ar) .ix-re .sv-trust__card h4 { font-weight: 800; line-height: 1.3; font-size: clamp(22px, 2.3vw, 36px); }
.ix-tile__t { font: 400 clamp(20px, 1.9vw, 27px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--cream); }
:root:lang(ar) .ix-tile__t { font-weight: 800; line-height: 1.35; font-size: clamp(18px, 1.6vw, 23px); }
.ix-tile__t + p { font-size: 13.5px; line-height: 1.4; color: color-mix(in oklab, var(--cream) 78%, var(--deep)); }
.ix-re .sv-intro__h { font: 400 clamp(34px, 4.2vw, 64px)/.96 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .ix-re .sv-intro__h { font-weight: 800; line-height: 1.3; font-size: clamp(28px, 3.2vw, 50px); }
.ix-re .sv-intro__lead strong { font-weight: 600; }
.ix-re .sv-check .ix-fit { text-decoration: none; color: var(--b1-accent); }
.ix-re .sv-check .ix-fit i { font-size: .9em; transition: translate .3s var(--ease); }
.ix-re .sv-check .ix-fit:hover i { translate: calc(4px * var(--dir)) 0; }
.ix-re .sv-links__head .headline { font: 400 clamp(34px, 4.2vw, 64px)/.96 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
:root:lang(ar) .ix-re .sv-links__head .headline { font-weight: 800; line-height: 1.3; font-size: clamp(28px, 3.2vw, 50px); }
@media (min-width: 768px) { .ix-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- finisher fixes (2026-11-11, review at 390 / 1440) ---------- */
/* hero card: the meta line sits under the title, clear of the rotated stamp (it covered "request · 40 seconds") */
.ix-card__head { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline-end: 128px; }
.ix-card__head small { text-align: start; }
/* the stamp stays inside the card: past its edge the orange border vanished into the orange hero (multiply) */
.ix-card__stamp { inset-inline-end: 12px; }
/* photo tiles: title + text always start below the icon / numeral row (they ran into it on 2-column phone tiles) */
.ix-tile { padding-top: clamp(58px, 5vw, 74px); }
/* six must-haves: 3 x 2 on wide screens instead of 4 + 2 with two empty cells */
@media (min-width: 1280px) { .ix-page .sv-ticket__list:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* price lede -> ledger: breathing room between the paragraph and the figures */
.ix-price__lede + .ledger__grid { margin-top: clamp(18px, 2vw, 28px); }
/* "More industries": the rule belongs to the row, so an Arabic-twin link stays inside its own row */
.in-more li { border-bottom: 1px solid var(--rule); }
.in-more .sv-link { border-bottom: 0; }
@media (max-width: 1023px) { .in-more__ar { margin-inline-start: 60px; margin-top: -6px; margin-bottom: 6px; } }
/* real-estate business-type tiles: the title is a <p class="ix-tile__t">, so `.ix-tile p` (13.5px) out-ranked it */
.ix-tile .ix-tile__t { font-size: clamp(20px, 1.9vw, 27px); line-height: 1; color: var(--cream); }
/* image hero card (real estate): the stamp sat on the photo, where multiply turned it near-black; it now sits on the paper
   beside the title (the head keeps its right side free) */
.ix-card__img + .ix-card__stamp { top: 120px; mix-blend-mode: normal; background: var(--paper); }

/* ---------- SEO deltas (2026-11-11): Arabic search phrases on the English pages, guillemets on the Arabic twins, the dental sub-block ---------- */
.ix-search .sv-ind span[lang="ar"] { font-family: var(--f-ar, var(--f-body)); font-weight: 800; font-size: .82em; line-height: 1.45; letter-spacing: 0; text-transform: none; }
.ix-search .sv-ind span[lang="ar"]::before, :root:lang(ar) .ix-search .sv-ind > span::before { content: "\00AB"; }
.ix-search .sv-ind span[lang="ar"]::after, :root:lang(ar) .ix-search .sv-ind > span::after { content: "\00BB"; }
.ix-search .sv-ind span span::before, .ix-search .sv-ind span span::after { content: none; }
.ix-dental { display: grid; gap: 10px; max-width: 940px; margin-top: clamp(18px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-lg); background: color-mix(in oklab, var(--cream) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line-deep); scroll-margin-top: 110px; }
.ix-dental__t { font: 400 clamp(24px, 2.4vw, 36px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); color: var(--cream); }
:root:lang(ar) .ix-dental__t { font-weight: 800; line-height: 1.35; font-size: clamp(21px, 2vw, 30px); }
.ix-dental p { font-size: 15.5px; line-height: 1.6; color: var(--on-deep-2); }
.ix-dental .ix-fit { color: var(--b2-on-deep); }