/* =====================================================================
   INDUSTRY PAGE additions (shared block, identical in the three industry
   page files: industries-restaurants / industries-salon-spa /
   industries-construction). Loaded after service.css, which owns the
   sv-* section system. Everything here is prefixed in-* and only adds:

   .in-hero__photo  faded industry photo behind the poster type (multiply + mask)
   .in-facts        four fact chips under the hero CTAs (the "at a glance" row)
   .in-moment       the hero-moment slot (each page fills it: receipt / chat / stamps)
   .in-formats      photo tiles for the live "formats / contractor types" grid
   .in-integ        integration rows (kit .feats + a strong label)
   .in-price        the live "Project-based" band as a price ledger + CTA
   .in-search       search-phrase chips (shared sv-inds behaviour + cursor peek)
   .in-guide        the matching blog guide, flagged inside the links list
   ===================================================================== */

/* ---------- hero: faded photo + fact chips + moment slot ---------- */
.in-hero { --in-photo: .24; }
.in-hero__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.in-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--in-pos, 60% 40%); opacity: var(--in-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) {
  .in-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%); }
}
.ph--deep.in-hero .in-hero__photo img { mix-blend-mode: luminosity; opacity: calc(var(--in-photo) * .9); }
.in-hero .ph__bg { z-index: -1; }
.in-hero .ph__title { font-size: clamp(42px, 9vw, 134px); }
.in-hero .ph__title em { font-size: 1.02em; }
.in-facts { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 3; }
.in-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; }
.in-fact b { font: 400 21px/1 var(--f-display); text-transform: var(--display-case); letter-spacing: .01em; white-space: nowrap; }
.in-fact:nth-child(2n) b { color: var(--acc); }
.in-moment { position: relative; z-index: 3; width: 100%; max-width: 460px; justify-self: center; }
@media (min-width: 1024px) {
  .in-hero .sv-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); align-items: center; }
  .in-moment { justify-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .in-moment { animation: inMoment 1.2s .4s var(--ease) both; }
}
@keyframes inMoment { from { transform: translateY(28px); } }  /* transform only (finisher fix): the hero card's text is never at reduced opacity in no-JS / crawler renders */

/* ---------- live "formats" grid as photo tiles ---------- */
.in-formats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-format { 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); }
.in-format__img { position: absolute; inset: 0; z-index: -2; }
.in-format__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); }
.in-format::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%); }
.in-format__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; }
.in-format__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); }
.in-format h3, .in-format__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); }
.in-format p:not(.in-format__t) { font-size: 13.5px; line-height: 1.4; color: color-mix(in oklab, var(--cream) 78%, var(--deep)); }
@media (hover: hover) and (pointer: fine) {
  .in-format:hover .in-format__img img { opacity: .78; filter: none; transform: scale(1.1) translateY(var(--py, 0)); }
}
@media (min-width: 768px) { .in-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }

/* ---------- integrations: kit feature rows with a strong label ---------- */
.in-integ__grid { display: grid; gap: 0 clamp(24px, 3vw, 48px); }
.in-integ .feat { padding: 20px 0; }
.in-integ .feat__ico { background: var(--deep); color: var(--b2); }
.in-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); }
.in-integ__d { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
@media (min-width: 900px) { .in-integ__grid { grid-template-columns: 1fr 1fr; } .in-integ .feats .feat:last-child { border-bottom: 0; } .in-integ .feats .feat:nth-last-child(2) { border-bottom: 0; } }

/* ---------- pricing band: live sentence + ledger of the two live figures ---------- */
.in-price__grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.in-price__lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 58ch; color: var(--fg); }
.in-price__lede strong { font-weight: 700; white-space: nowrap; }
.in-price .ledger__grid { padding-inline: 0; --cols: 2; }
.in-price .ledger__item { padding-inline-start: clamp(14px, 2vw, 30px); }
.in-price .ledger__item:first-child { padding-inline-start: 0; }
.in-price .ledger__item:first-child::before { display: none; }
.in-price .ledger__num { font-size: clamp(34px, 5vw, 86px); color: var(--ink); }
.in-price .ledger__num small { color: var(--ink); font: 400 .5em/1 var(--f-num); }
.in-price .ledger__item dd { color: var(--hot-2); max-width: 28ch; }
.in-price .ledger__item { container-type: inline-size; min-width: 0; }
.in-price .ledger__num [data-price] { font-size: min(1em, calc(100cqi / var(--px-em, 6))); }
@media (max-width: 559px) { .in-price .ledger__grid { --cols: 1; row-gap: 18px; } .in-price .ledger__item { padding-inline-start: 0; padding-top: 12px; border-top: 1px solid var(--rule); } .in-price .ledger__item::before { display: none; } }
.in-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); }
.in-price__start p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.in-price__start p strong { color: var(--ink); white-space: nowrap; }
.in-price__start .cta-row { margin-top: 4px; }
@media (min-width: 1024px) {
  .in-price__grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: center; column-gap: clamp(40px, 5vw, 80px); }
}

/* ---------- search phrases: sv-inds chips that look like queries ---------- */
.in-search .sv-ind { font-size: clamp(24px, 4.2vw, 64px); }
.in-search .sv-ind i { font-size: .5em; }
.in-search .sv-ind span::before, .in-search .sv-ind span::after { content: "\201C"; opacity: .55; }
.in-search .sv-ind span::after { content: "\201D"; }
.in-search__note { margin-top: clamp(18px, 2vw, 28px); font-size: 15px; color: var(--fg-2); max-width: 70ch; line-height: 1.6; }

/* ---------- crossing tapes under a cream band ---------- */
.in-tapes { margin-top: clamp(10px, 2vw, 26px); }

/* ---------- guide flag in the links list ---------- */
.sv-link .in-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; }
.sv-link .in-guide i { width: auto; height: auto; box-shadow: none; font-size: 13px; }
.sv-link:hover .in-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 (partial public/v3/industries/_more-industries) ---------- */
.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); }
.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; }
@media (max-width: 1023px) { .in-more__ar { margin-inline-start: 60px; margin-top: -6px; margin-bottom: 6px; } }

/* ---------- feature ticket: "fits" line under each check ---------- */
.in-fit { display: grid; gap: 2px; margin-top: 4px; font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--b1-accent); }
.in-fit__v { white-space: nowrap; }   /* the price sits on its own line: a currency switch can never re-wrap the label */

/* phones: the hero moment sits under the copy, never beside it */
@media (max-width: 1023px) { .in-moment { margin-top: 6px; } }

/* =====================================================================
   SALON & SPA — purple poster; hero moment: the WhatsApp reminder thread
   (booking confirmed → 24 h reminder → 2 h reminder → the no-show stamp,
   figures from the live feature list and FAQ)
   ===================================================================== */
.in-chat { --in-r: 1.5deg; position: relative; display: grid; gap: 10px; width: min(100%, 380px); margin-inline: auto; padding: 18px 16px 22px; border-radius: 26px; background: color-mix(in oklab, var(--cream) 10%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cream) 22%, transparent); transform: rotate(calc(var(--in-r) * var(--dir))); }
.in-chat__time { justify-self: center; font: 600 11.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep-2); margin-bottom: 4px; }
.in-bubble { position: relative; width: fit-content; max-width: 90%; padding: 12px 16px; border-radius: 18px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.4; box-shadow: 0 18px 30px -22px color-mix(in oklab, var(--ink) 80%, transparent); }
.in-bubble--in { border-start-start-radius: 6px; }
.in-bubble--out { justify-self: end; background: #d9fdd3; color: var(--ink); border-start-end-radius: 6px; }
.in-bubble b { font-weight: 700; }
.in-bubble small { display: block; margin-top: 5px; font-size: 11.5px; color: color-mix(in oklab, var(--ink) 55%, transparent); text-align: end; }
.in-bubble--stamp { justify-self: center; margin-top: 6px; background: var(--b2); color: var(--ink); font: 400 20px/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; padding: 12px 18px 10px; border-radius: 999px; box-shadow: none; }
.in-bubble--stamp i { font-size: .9em; margin-inline-end: 6px; }
.in-chat__typing { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.in-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--ink) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .in-chat__typing i { animation: inDot 1.1s calc(var(--k, 0) * .18s) ease-in-out infinite; }
}
@keyframes inDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .in-chat { transition: transform .6s var(--ease); } .in-moment:hover .in-chat { transform: rotate(0deg) translateY(-6px); } }

/* checklist (the live 12 inclusions) as a two-column ticket list on the orange band */
.in-list { display: grid; gap: 0 32px; padding: clamp(14px, 2vw, 26px) clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px); }
.in-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; color: var(--ink); }
.in-list li i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 15px; margin-top: 1px; }
@media (min-width: 640px) { .in-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .in-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; } }

/* finisher fix (2026-11-11): the rule belongs to the "More industries" 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; }
/* finisher fix (2026-11-11): format tiles keep title + text below the icon / numeral row (they ran into it on 2-column phone tiles) */
.in-format { padding-top: clamp(58px, 5vw, 74px); }

/* =====================================================================
   SEO batch blocks (finisher, 2026-11-11): the upgraded view uses these
   classes; they were defined only in industries-restaurants.css, so the
   UAE notes rendered as unstyled text. Same rules as restaurants, plus the
   Arabic twin (html lang="ar" dir="rtl" — scoped with :root:lang(ar)).
   ===================================================================== */
/* H1: the query line stays poster-size; the ": portfolios, credentials…" tail is a sub line */
.ph__title .in-h1-tail, .ph__title .in-hero__sub { display: block; margin-top: .3em; font-size: clamp(22px, 3.1vw, 46px); line-height: 1.02; }
.in-nw { white-space: nowrap; }

/* UAE notes (deep band) */
.in-notes { display: grid; gap: 14px; }
.in-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); }
.in-note__ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--b2); color: var(--ink); font-size: 19px; }
.in-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); }
.in-note p { font-size: 15px; line-height: 1.6; color: var(--on-deep-2); }
.in-note p a { color: var(--b2-on-deep); }
@media (min-width: 700px) { .in-notes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .in-notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* price band: three catalogue figures */
.in-price__lede + .in-ledger--3 { margin-top: clamp(18px, 2vw, 28px); }
@media (min-width: 1024px) {
  .in-price .in-ledger--3 { --cols: 3; }
  .in-price .in-ledger--3 .ledger__num { font-size: clamp(26px, 3.2vw, 56px); }
  .in-price .in-ledger--3 .ledger__num [data-price] { font-size: min(1em, calc(88cqi / var(--px-em, 6))); }
  .in-price .in-ledger--3 .ledger__item dd { max-width: 22ch; font-size: 14px; }
}
/* must-have "fits" lines: a second line sits under the first */
.in-fit + .in-fit { margin-top: 0; }
/* six must-haves: 3 x 2 on wide screens instead of 4 + 2 with two empty cells */
@media (min-width: 1280px) { .in-page .sv-ticket__list:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Arabic runs on the English page (search phrases, the Arabic-version link) */
.in-search .sv-ind span[lang="ar"], .in-ar-name { font-family: var(--f-ar, var(--f-body)); letter-spacing: 0; text-transform: none; }
.in-search .sv-ind span[lang="ar"] { font-weight: 800; font-size: .82em; line-height: 1.45; }
.in-search .sv-ind span[lang="ar"]::before, :root:lang(ar) .in-search .sv-ind span::before { content: "\00AB"; }
.in-search .sv-ind span[lang="ar"]::after, :root:lang(ar) .in-search .sv-ind span::after { content: "\00BB"; }

/* ---------- Arabic twin ---------- */
:root:lang(ar) .in-hero .ph__title { font-size: clamp(34px, 7vw, 96px); }
:root:lang(ar) .ph__title .in-h1-tail, :root:lang(ar) .ph__title .in-hero__sub { margin-top: .25em; font-weight: 800; font-size: clamp(20px, 2.6vw, 38px); line-height: 1.4; }
:root:lang(ar) .in-fact b { font-weight: 800; font-size: 18px; line-height: 1.3; }
:root:lang(ar) .in-format h3, :root:lang(ar) .in-format__t { font-weight: 800; line-height: 1.35; font-size: clamp(18px, 1.6vw, 23px); }
:root:lang(ar) .in-integ__t { font-weight: 800; line-height: 1.4; font-size: clamp(19px, 1.6vw, 24px); }
:root:lang(ar) .in-search .sv-ind { font-weight: 800; font-size: clamp(19px, 3vw, 44px); line-height: 1.5; }
:root:lang(ar) .in-note h3 { font-weight: 800; line-height: 1.4; font-size: clamp(19px, 1.7vw, 25px); }
:root:lang(ar) .in-fit { line-height: 1.5; }
:root:lang(ar) .sv-link .in-guide { letter-spacing: 0; font-size: 13px; }
:root:lang(ar) .in-more .sv-link__t { font-size: clamp(19px, 2vw, 30px); }
/* Arabic twin — salon-only components (2026-11-11): the WhatsApp reminder thread in the hero (Plex Arabic body, Alexandria
   stamp, taller leading for Arabic glyphs), and the search chips' nested Latin run (JBR) gets no second pair of guillemets */
:root:lang(ar) .in-chat__time { font-size: 12.5px; line-height: 1.4; }
:root:lang(ar) .in-bubble { font-size: 15.5px; line-height: 1.65; }
:root:lang(ar) .in-bubble small { font-size: 12px; line-height: 1.3; }
:root:lang(ar) .in-bubble--stamp { font-family: var(--f-display); font-weight: 800; font-size: 17px; line-height: 1.35; text-transform: none; padding: 10px 18px 9px; }
:root:lang(ar) .in-search .sv-ind span span::before, :root:lang(ar) .in-search .sv-ind span span::after { content: none; }