/* =====================================================================
   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; } }

/* =====================================================================
   CONSTRUCTION — orange poster; hero moment: the 30-second dial and four
   credential stamps slamming down (the certifications and licences named on
   this page, which the site publishes for procurement)
   ===================================================================== */
.in-tender { --in-r: 1.2deg; position: relative; width: min(100%, 470px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; transform: rotate(calc(var(--in-r) * var(--dir))); }
.in-dial { position: relative; grid-row: span 2; aspect-ratio: 1; display: grid; place-items: center; }
.in-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.in-dial circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.in-dial .in-dial__track { stroke: color-mix(in oklab, var(--ink) 18%, transparent); }
.in-dial .in-dial__arc { stroke: var(--deep); stroke-dasharray: 289; stroke-dashoffset: calc(289 * (1 - var(--p, 1))); }
.in-dial__num { position: relative; display: grid; justify-items: center; line-height: 1; }
.in-dial__num b { font: 400 clamp(52px, 5.6vw, 76px)/1 var(--f-num); color: var(--ink); letter-spacing: .01em; }
.in-dial__num b small { font-size: .5em; }
.in-dial__num span { margin-top: 6px; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-align: center; max-width: 11ch; }
.in-stamp { --r: -6deg; position: relative; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; text-align: center; padding: 10px; border-radius: 50%; border: 3px double var(--ink); color: var(--ink); font: 400 clamp(13px, 1.25vw, 16px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .03em; transform: rotate(calc(var(--r) * var(--dir))); mix-blend-mode: multiply; opacity: .92; }
.in-stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
.in-stamp small { display: block; margin-top: 5px; font: 700 9.5px/1.2 var(--f-body); letter-spacing: .08em; }
.in-stamp:nth-of-type(1) { --r: 7deg; color: var(--deep); border-color: var(--deep); }
.in-stamp:nth-of-type(2) { --r: -5deg; }
.in-stamp:nth-of-type(3) { --r: 4deg; color: var(--deep); border-color: var(--deep); }
.in-stamp:nth-of-type(4) { --r: -8deg; }
.in-stamps { grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (hover: hover) and (pointer: fine) { .in-tender { transition: transform .6s var(--ease); } .in-moment:hover .in-tender { transform: rotate(0deg) translateY(-6px); } }

/* credentials band: the trust signals procurement verifies (live feature text) as a stamp wall */
.in-creds { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.in-cred { display: grid; gap: 8px; align-content: start; padding: clamp(18px, 2vw, 26px); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.in-cred__k { font: 700 11.5px/1.2 var(--f-body); letter-spacing: .09em; text-transform: uppercase; color: var(--b1-accent); }
.in-cred__v { font: 400 clamp(22px, 2vw, 32px)/1 var(--f-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.in-cred p { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 900px) { .in-creds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 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); }
/* finisher fix: on phones the stamp captions ("Dubai Municipality") ran past the ring */
@media (max-width: 767px) { .in-stamp { font-size: 12.5px; padding: 12px; } .in-stamp small { font-size: 8.5px; letter-spacing: .02em; } }

/* =====================================================================
   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); }
/* construction-only Arabic: credential cards, stamps and the 30-second dial */
:root:lang(ar) .in-cred__v { font-weight: 800; line-height: 1.35; font-size: clamp(19px, 1.7vw, 26px); }
:root:lang(ar) .in-cred__k { letter-spacing: 0; font-size: 12.5px; }
:root:lang(ar) .in-stamp { font-weight: 800; letter-spacing: 0; line-height: 1.25; }
:root:lang(ar) .in-stamp small { letter-spacing: 0; }
:root:lang(ar) .in-dial__num span { letter-spacing: 0; font-size: 12px; }