/* Home v2 (owner message 6): 9 full screens on a 2-column grid. Loaded on the page-home-v2.php template only.
   Without html.v2-mode (no JS) the screens are a normal stacked page. Colours: design tokens and the screen
   map (--bg / --glow per screen, from the page's «الشاشات» field). The hero itself is not restyled. */

.v2{ --v2-ease:cubic-bezier(.65,0,.25,1); --v2-h:100vh; --v2-amber:var(--accent); position:relative; color:#F3F6FB; background:var(--hero-1); }
.v2-scene{ position:relative; min-height:100vh; background:var(--bg); }
.v2-glow,.v2-map,.v2-where{ display:none; }

/* ---- Screens mode ------------------------------------------------------- */
html.v2-mode,html.v2-mode body{ height:100%; overflow:hidden; overscroll-behavior:none; }
.v2-mode .is-home-v2 .site-header{ position:fixed; inset-inline:0; top:0; }
.v2-mode .is-home-v2.admin-bar .site-header{ top:32px; } /* logged in: header and screens both start below the admin bar */
@media (max-width:782px){ .v2-mode .is-home-v2.admin-bar .site-header{ top:46px; } }
.v2-mode.v2-mode .admin-bar .v2{ --v2-top:32px; }
@media (max-width:782px){ .v2-mode.v2-mode .admin-bar .v2{ --v2-top:46px; } }
.v2-mode .v2-glow{ position:fixed; inset:var(--v2-top, 0px) 0 0; z-index:0; display:block; overflow:hidden; background:var(--v2-bg, #061A3A); transition:background-color 1.2s ease; }
.v2-mode .v2-glow::before{ content:""; position:absolute; left:50%; top:50%; width:70vmax; height:70vmax; border-radius:50%; background:var(--v2-glowc, var(--primary)); opacity:.3; filter:blur(110px); transform:translate(-50%, -55%); transition:background-color 1.2s ease; }
/* Mouse glow (owner message 8, option 1 of reference/home-v2-backgrounds.html): a 900px soft light between the
   fixed light layer and the screens, following the mouse slowly (home-v2.js, pointer:fine only). Its colour is
   the current screen's light at 30%, fading in 1.2s like the light layer (message 19: 1.2s); hidden on screen 1 (the hero). */
@property --v2-halo{ syntax:'<color>'; inherits:true; initial-value:#2563EB; }
.v2-halo{ position:fixed; inset:var(--v2-top, 0px) 0 0; z-index:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .9s ease; }
.v2-halo.is-on{ opacity:1; }
.v2-halo i{ --v2-halo:var(--v2-glowc, #2563EB); position:absolute; left:0; top:0; width:450px; height:450px; margin:-225px 0 0 -225px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--v2-halo) 30%, transparent), transparent); transition:--v2-halo 1.2s ease; will-change:transform; }
@media (pointer:coarse){ .v2-halo{ display:none; } }
.v2-mode .v2-world{ position:fixed; inset:var(--v2-top, 0px) 0 0; z-index:1; transform:translate(calc(var(--c0, 1) * -100vw), calc(var(--r0, 0) * -1 * var(--v2-h))); transition:transform 1.15s var(--v2-ease); }
[dir="ltr"].v2-mode .v2-world{ transform:translate(calc((1 - var(--c0, 1)) * -100vw), calc(var(--r0, 0) * -1 * var(--v2-h))); }
.v2-mode .v2-scene{ position:absolute; left:calc(var(--col) * 100vw); top:calc(var(--row) * var(--v2-h)); display:flex; align-items:center; width:100vw; height:var(--v2-h); min-height:0; padding:calc(var(--header-h) + 20px) 0 72px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:none; scrollbar-width:thin; scrollbar-color:rgb(255 255 255 / .2) transparent; }
[dir="ltr"].v2-mode .v2-scene{ left:calc((1 - var(--col)) * 100vw); }
.v2-mode .v2-scene > .v2-in{ opacity:.12; transition:opacity .9s ease .25s; }
.v2-mode .v2-scene.is-current > .v2-in{ opacity:1; }
/* The hero screen keeps the hero as it is (its own background); it may scroll inside when taller than the screen. */
.v2-mode .v2-scene--hero{ display:block; padding:0; }
.v2-scene--hero .stats{ padding-bottom:16px; }
/* Message 20: on /en/ the hero Google card is mirrored, so its result text moves to the side away from the portrait
   (html[dir] only: the card itself carries dir="ltr" in Arabic too). */
html[dir="ltr"] .v2-scene--hero .hc-gresult{ margin-left:auto; }
html[dir="ltr"] .v2-scene--hero .hc-gresult :is(.hc-gtitle, .hc-gsnippet){ text-align:left; }
@media (max-width:1279px){ html[dir="ltr"] .v2-scene--hero .hc-gsnippet{ display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; } } /* English wraps longer on the small card */
/* Message 12: on desktop, screen 1's background is the hero's, over the whole screen (behind the header too). It is a
   layer of the screen (not the hero box), and its last 120px fade into the page light, so the move to screen 2 has no
   edge. Below 1024 the screen scrolls inside, so the hero keeps its own background there (as before). */
.v2-mode .v2-scene--hero{ isolation:isolate; }
.v2-mode .v2-scene--hero::before{ display:none; }
@media (min-width:1024px){ .v2-mode .v2-scene--hero::before{ display:block; } }
.v2-mode .v2-scene--hero::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(ellipse at 25% 49%, rgb(42 95 224 / .42), transparent 49%), linear-gradient(115deg, var(--hero-2), var(--hero-1)); -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 120px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 120px), transparent); }
[dir="ltr"].v2-mode .v2-scene--hero::before{ background:radial-gradient(ellipse at 75% 49%, rgb(42 95 224 / .42), transparent 49%), linear-gradient(245deg, var(--hero-2), var(--hero-1)); }
.v2-mode .v2-scene--hero > .hero{ overflow:visible; } /* below 1024 the hero keeps its own background (the screen scrolls inside there) */
/* Screen 1 centred (owner message 10): on desktop the hero + strip sit in the middle of the screen below the
   header. The hero is sized to the screen (not 92vh), the screen carries the hero's own background so nothing
   shows above or below it, and template-parts/hero.php is not touched. */
@media (min-width:1024px){
  .v2-mode .v2-scene--hero{ display:flex; flex-direction:column; justify-content:center; align-items:stretch; padding-top:calc(var(--header-h) + 48px); } /* one-page site: +8px, visitors have no admin bar so the hero visual is taller (G tile ≥ 24px from the header) */
  .v2-mode .v2-scene--hero > .hero{ flex:none; background:transparent; }
  /* The hero's light lines, dots and vignette belong to the screen, not to the hero box (no band, no seam), and
     nothing inside the hero is cut any more: only the screen clips, at 100vw × 100vh. */
  .v2-mode .v2-scene--hero > .hero{ position:static; isolation:auto; overflow:visible; }
  /* …and like the background they fade out in the screen's last 120px, so screen 1 meets screen 2 on the page light. */
  .v2-mode .v2-scene--hero .hero::after,.v2-mode .v2-scene--hero .hero-rays{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 120px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 120px), transparent); }
  .v2-mode .v2-scene--hero .hero-layout{ min-height:0; padding-block:16px var(--hero-pb); } /* 16px = the strip's bottom padding, so above and below match */
  /* The portrait stage follows the screen height (it set the hero's height before; now the block is only as tall as its content). */
  .v2-mode .v2-scene--hero .hero-stage{ width:min(100%, 740px, var(--v2-h) - var(--header-h) - 290px); }
  /* The stage ends where the strip begins (no card behind the strip), with room above for the cards that sit over its top edge. */
  .v2-mode .v2-scene--hero .hero-visual{ margin-bottom:calc(76px - var(--hero-pb)); padding-top:clamp(24px, 5vh, 56px); }
}
/* Msg 10: the audience line adds ~60px to the text column, so v2 tightens the column's spacing on desktop. */
@media (min-width:1024px){
  .v2-mode .v2-scene--hero .hero-audience{ margin-top:12px; line-height:1.65; }
  .v2-mode .v2-scene--hero .hero-text{ margin-top:12px; line-height:1.75; }
  .v2-mode .v2-scene--hero .hero-actions{ margin-top:20px; }
  .v2-mode .v2-scene--hero .hero-proof{ margin-top:20px; }
}
@media (min-width:1024px) and (max-height:820px){
  .v2-mode .v2-scene--hero .hero-audience{ font-size:15.5px; }
  .v2-mode .v2-scene--hero .hero-text{ font-size:16px; line-height:1.7; }
}
@media (min-width:1024px) and (max-height:780px){
  .v2-mode .v2-scene--hero .hero-audience{ margin-top:8px; }
  .v2-mode .v2-scene--hero .hero-text{ margin-top:8px; }
  .v2-mode .v2-scene--hero .hero-actions{ margin-top:12px; }
  .v2-mode .v2-scene--hero .hero-proof{ margin-top:11px; }
}
@media (min-width:1024px) and (max-height:820px){
  /* Short laptop screens: the text column is the tallest part; less reserved room above (the cards still keep 24px from the header). */
  .v2-mode .v2-scene--hero{ padding-top:calc(var(--header-h) + 12px); }
  .v2-mode .v2-scene--hero .hero-layout{ padding-top:4px; }
}

/* ---- Shared text --------------------------------------------------------- */
.v2-in{ position:relative; width:var(--content); margin-inline:auto; }
/* Message 19: on big screens every screen's content grows as one piece (fonts, frames, gaps), by --v2-z from
   home-v2.js: min(width ÷ 1500, height ÷ 950), between 1 and 1.45. Up to 1440×900 nothing changes. */
.v2-mode .v2-scene:not(.v2-scene--hero) > .v2-in{ zoom:var(--v2-z, 1); }
@media (min-width:1600px){
  .v2-scene--case .v2-two{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); } /* the computer frame ≈ 58% */
}
.v2-h2{ color:#fff; font-size:clamp(30px, 4vw, 56px); line-height:1.25; }
.v2-lead{ max-width:52ch; margin-top:14px; font-size:clamp(16px, 1.3vw, 19px); line-height:1.8; color:rgb(243 246 251 / .76); }
.v2-title{ text-align:right; } /* dir="auto" for titles that start in Latin (Masar…), aligned like the rest */
[dir="ltr"] .v2-title{ text-align:left; }
.v2-two{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px, 5vw, 80px); align-items:center; }
.v2-lnk{ display:inline-block; margin-top:18px; padding-bottom:2px; border-bottom:2px solid var(--v2-amber); font-weight:700; color:#fff; }
.v2 a{ color:inherit; }
.v2 :focus-visible{ outline:2px solid var(--v2-amber); outline-offset:3px; }

/* ---- 2. Services chain ----------------------------------------------------- */
.v2-chain{ position:relative; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); margin:clamp(24px, 5vh, 52px) 0 0; padding:0; list-style:none; }
.v2-chain::before,.v2-chain::after{ content:""; position:absolute; top:9px; inset-inline-start:0; height:2px; }
.v2-chain::before{ width:calc(100% - 100% / var(--n, 5) + 8px); background:rgb(255 255 255 / .18); }
.v2-chain::after{ width:var(--fill, 0%); background:var(--v2-amber); transition:width .6s ease; }
.v2-stop{ position:relative; width:100%; padding:34px 0 0; border:0; background:none; font:inherit; font-size:clamp(17px, 1.8vw, 24px); font-weight:700; color:rgb(255 255 255 / .55); text-align:start; cursor:pointer; transition:color .3s ease; }
.v2-stop::before{ content:""; position:absolute; top:2px; inset-inline-start:0; width:16px; height:16px; border:2px solid rgb(255 255 255 / .45); border-radius:50%; background:#0B1B33; transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.v2-stop:hover,.v2-stop.is-on{ color:#fff; }
.v2-stop.is-done::before,.v2-stop.is-on::before{ border-color:var(--v2-amber); background:var(--v2-amber); }
.v2-stop.is-on::before{ box-shadow:0 0 0 7px rgb(245 165 36 / .18); }
.v2-stages{ position:relative; margin-top:20px; }
/* A stage (owner message 9): the image on one side, its 3 cards stacked beside it; the image takes the
   cards' height so the screen fits 1440×900 and 1366×768 without scrolling inside. */
.v2-stage{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:20px; align-items:stretch; }
.v2-stage-fig{ display:flex; flex-direction:column; gap:6px; min-height:0; margin:0; }
.v2-stage-fig .v2-frame{ position:relative; flex:1; min-height:180px; max-height:none; aspect-ratio:auto; }
.v2-stage-fig .v2-frame img{ position:absolute; inset:0; } /* the image follows the cards' height, never sets it */
.v2-stage-fig.is-contain .v2-frame{ background:#F3F6FA; border-color:rgb(255 255 255 / .2); }
.v2-stage-fig.is-contain .v2-frame img{ object-fit:contain; object-position:center; padding:6px; }
.v2-cap{ font-size:12.5px; line-height:1.5; color:rgb(243 246 251 / .6); }
.v2-scene--services .v2-lead{ max-width:72ch; }
.v2-audit{ margin-top:16px; font-size:15px; color:rgb(243 246 251 / .82); }
.v2-audit a{ border-bottom:2px solid var(--v2-amber); font-weight:700; color:#fff; }
.v2-mode .v2-stage{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.v2-mode .v2-stage.is-on{ position:relative; opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease; }
.v2-frame{ margin:0; overflow:hidden; aspect-ratio:16 / 9; max-height:32vh; border:1px solid rgb(255 255 255 / .14); border-radius:10px; background:rgb(255 255 255 / .05); }
.v2-frame img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.v2-stage-links{ display:grid; gap:10px; }
.v2-card{ display:grid; gap:2px; padding:12px 18px; border:1px solid rgb(255 255 255 / .12); border-radius:12px; background:rgb(255 255 255 / .06); }
.v2-card-t{ justify-self:start; font-size:17px; font-weight:700; line-height:1.45; color:#fff; }
a.v2-card-t{ border-bottom:1px solid rgb(245 165 36 / .7); }
.v2-card span{ font-size:14px; line-height:1.55; color:rgb(243 246 251 / .7); }
.v2-sectors{ margin-top:8px; font-size:15px; color:rgb(243 246 251 / .72); }
.v2-sectors a{ border-bottom:1px solid rgb(245 165 36 / .7); }

/* ---- 3–5. Projects ----------------------------------------------------------- */
.v2-kind{ font-size:15px; font-weight:500; color:var(--glow); }
.v2-did{ margin-top:16px; font-size:14.5px; color:rgb(243 246 251 / .62); }
.v2-shot{ position:relative; margin:0; padding-bottom:6%; }
.v2-bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:10px 10px 0 0; background:#E9EDF3; direction:ltr; }
.v2-bar i{ width:9px; height:9px; border-radius:50%; background:#C3CAD5; }
.v2-bar span{ margin-left:12px; font-size:11.5px; color:var(--muted); }
.v2-scr{ overflow:hidden; aspect-ratio:16 / 10; border-radius:0 0 10px 10px; background:#fff; box-shadow:0 40px 80px rgb(0 0 0 / .45); }
.v2-scr img,.v2-mob img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.v2-mob{ position:absolute; bottom:0; inset-inline-end:-4%; width:24%; overflow:hidden; aspect-ratio:9 / 19; border:6px solid #111827; border-radius:20px; background:#fff; box-shadow:0 24px 50px rgb(0 0 0 / .5); }
/* Message 11: gallery — the frame is a button (opens the lightbox), thumbnails under it, a badge beside the name. */
button.v2-scr{ display:block; width:100%; padding:0; border:0; font:inherit; cursor:zoom-in; }
.v2-scr img{ transition:opacity .15s ease; }
.v2-scr img.is-out,.v2-mob img.is-out{ opacity:0; }
.v2-mob img{ transition:opacity .15s ease; }
.v2-gal{ min-width:0; }
.v2-thumbs{ display:flex; gap:10px; width:76%; margin-top:14px; }
.v2-th{ flex:1 1 0; min-width:0; padding:0; overflow:hidden; aspect-ratio:16 / 10; border:2px solid rgb(255 255 255 / .16); border-radius:8px; background:rgb(255 255 255 / .06); opacity:.72; cursor:pointer; transition:opacity .2s ease, border-color .2s ease; }
.v2-th img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.v2-th:hover,.v2-th:focus-visible{ opacity:1; }
.v2-th.is-on{ border-color:var(--v2-amber); opacity:1; }
.v2-badge{ display:inline-block; margin-inline-start:10px; padding:4px 12px; border:1px solid rgb(245 165 36 / .55); border-radius:999px; background:rgb(245 165 36 / .12); color:var(--v2-amber); font-size:14px; font-weight:500; line-height:1.4; vertical-align:middle; white-space:nowrap; }
.v2-lb{ position:fixed; inset:var(--wp-admin--admin-bar--height, 0px) 0 0; z-index:1000; display:grid; place-items:center; padding:24px 72px; background:rgb(4 10 24 / .92); }
/* Message 16: a big blurred halo in the open picture's colour, behind the picture, buttons and counter (35%). */
.v2-lb-glow{ position:absolute; top:50%; left:50%; z-index:0; width:118vw; height:112vh; border-radius:50%; opacity:.35; filter:blur(70px); pointer-events:none; transform:translate(-50%, -50%); transition:background-color .6s ease; }
.v2-lb figure,.v2-lb button{ z-index:1; }
@media (prefers-reduced-motion:reduce){ .v2-lb-glow{ transition:none; } }
.v2-lb figure{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:min(1400px, 100%); margin:0; }
.v2-lb img{ display:block; max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; border-radius:10px; box-shadow:0 30px 80px rgb(0 0 0 / .5); }
.v2-lb figcaption{ display:flex; gap:12px; font-size:15px; color:rgb(255 255 255 / .78); }
.v2-lb-n{ color:var(--v2-amber); }
.v2-lb button{ position:absolute; display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgb(255 255 255 / .2); border-radius:50%; background:rgb(255 255 255 / .08); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.v2-lb button:hover,.v2-lb button:focus-visible{ border-color:var(--v2-amber); }
.v2-lb-x{ top:20px; inset-inline-end:20px; font-size:18px !important; }
.v2-lb-prev{ top:50%; inset-inline-start:16px; transform:translateY(-50%); }
.v2-lb-next{ top:50%; inset-inline-end:16px; transform:translateY(-50%); }
/* While a lightbox is open the custom cursor steps aside and the normal pointer is back. */
body:has(> .v2-lb, > .lightbox) :is(.v2-cdot, .v2-ck){ opacity:0 !important; }
.v2-cursor-on:has(> .v2-lb, > .lightbox) :is(.v2-lb, .v2-lb *, .lightbox, .lightbox *){ cursor:auto; }
.v2-cursor-on:has(> .v2-lb, > .lightbox) :is(.v2-lb button, .lightbox button){ cursor:pointer; }

/* ---- 6. GEO ---------------------------------------------------------------- */
.v2-geo{ text-align:center; }
.v2-giant{ color:#fff; font-size:clamp(64px, 12vw, 190px); font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; transition:opacity .35s ease; }
.v2-giant.is-out{ opacity:0; }
.v2-geo .v2-lead{ margin-inline:auto; font-size:clamp(18px, 1.9vw, 26px); color:#fff; }
.v2-src{ margin-top:14px; font-size:14.5px; color:rgb(243 246 251 / .62); }
.v2-src .v2-lnk{ margin-top:0; margin-inline-start:6px; }
/* Msg 10: one context line under the number (period, window and source) + the shot link. */
.v2-ctx{ max-width:78ch; margin:18px auto 0; font-size:clamp(14.5px, 1.15vw, 17px); line-height:1.8; color:rgb(243 246 251 / .7); }
.v2-ctx .v2-lnk{ display:inline; margin-top:0; margin-inline-start:4px; white-space:nowrap; }
.v2-ctx-1,.v2-ctx-2{ display:block; }
.v2-ctx bdi{ white-space:nowrap; }
/* Msg 10: the audience line under the hero H1 (home v2 only). */
.hero-audience{ max-width:46ch; margin-top:14px; font-size:clamp(16px, 1.25vw, 19px); font-weight:500; line-height:1.75; color:rgb(255 255 255 / .9); }

/* ---- 7. About --------------------------------------------------------------------- */
.v2-pic{ margin:0; overflow:hidden; aspect-ratio:4 / 5; max-height:70vh; border:1px solid rgb(255 255 255 / .12); border-radius:6px; background:linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .03)); }
.v2-pic img{ display:block; width:100%; height:100%; object-fit:contain; object-position:bottom; }
.v2-letter p{ max-width:34ch; font-size:clamp(18px, 1.7vw, 24px); line-height:1.9; }
.v2-letter p + p{ margin-top:16px; }
.v2-sig{ display:block; width:auto; height:clamp(70px, 11vh, 110px); margin-top:22px; opacity:.95; }

/* ---- 8. FAQ: questions on one side, the answer on the other ---------------------------------- */
.v2-faq{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px, 4vw, 60px); margin-top:clamp(24px, 5vh, 50px); }
.v2-qs{ margin:0; padding:0; list-style:none; border-top:1px solid rgb(255 255 255 / .14); }
.v2-q{ display:block; width:100%; padding:16px 0; border:0; border-bottom:1px solid rgb(255 255 255 / .14); background:none; font:inherit; font-size:clamp(16px, 1.4vw, 19px); color:rgb(255 255 255 / .62); text-align:start; cursor:pointer; transition:color .25s ease, padding .25s ease, transform .3s ease; }
.v2-q:hover{ color:#fff; }
.v2-q.is-on{ padding-inline-start:14px; color:#fff; box-shadow:inset -3px 0 0 var(--v2-amber); }
[dir="ltr"] .v2-q.is-on{ box-shadow:inset 3px 0 0 var(--v2-amber); }
/* Message 13: ~11 questions. On desktop the rows are a bit tighter; when the list still doesn't fit the screen, only
   the list scrolls inside (the screen never does), with a soft fade and a small amber arrow while more is below. */
.v2-qs-box{ position:relative; min-width:0; }
@media (min-width:900px){
  .v2-faq{ align-items:start; }
  .v2-q{ padding:11px 0; line-height:1.55; }
  .v2-qs{ max-height:calc(var(--v2-h) - var(--header-h) - 215px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgb(255 255 255 / .22) transparent; }
  .v2-qs-box.is-more .v2-qs{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 64px), transparent); }
  .v2-qs-box::after{ content:""; position:absolute; bottom:6px; left:50%; width:9px; height:9px; border-right:2px solid var(--v2-amber); border-bottom:2px solid var(--v2-amber); opacity:0; pointer-events:none; transform:translateX(-50%) rotate(45deg); transition:opacity .3s ease; }
  .v2-qs-box.is-more::after{ opacity:.85; }
}
.v2-as{ position:relative; }
.v2-a h3{ color:#fff; font-size:clamp(20px, 2vw, 28px); line-height:1.4; }
.v2-a p{ max-width:44ch; margin-top:12px; font-size:clamp(16px, 1.35vw, 19px); color:rgb(243 246 251 / .8); }
.v2-mode .v2-a{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateX(-10px); transition:opacity .35s ease, transform .35s ease, visibility 0s .35s; }
.v2-mode .v2-a.is-on{ position:relative; opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .35s ease; }
.v2:not(.is-ready) .v2-a + .v2-a{ margin-top:24px; }

/* ---- 9. How I work + form + links ----------------------------------------------------------- */
.v2-end{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:start; }
.v2-path{ position:relative; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); margin:34px 0 0; padding:0; list-style:none; }
.v2-path::before,.v2-path::after{ content:""; position:absolute; top:8px; inset-inline-start:0; }
.v2-path::before{ inset-inline-end:0; border-top:2px dashed rgb(255 255 255 / .2); }
.v2-path::after{ width:var(--fill, 0%); height:2px; background:var(--v2-amber); transition:width .7s ease; }
.v2-step{ position:relative; padding-top:32px; color:rgb(255 255 255 / .45); transition:color .4s ease; }
.v2-dot{ position:absolute; top:0; inset-inline-start:0; z-index:1; width:18px; height:18px; border:2px solid rgb(255 255 255 / .35); border-radius:50%; background:#0B1B33; transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.v2-step.is-done{ color:#fff; }
.v2-step.is-done .v2-dot{ border-color:var(--v2-amber); background:var(--v2-amber); }
.v2-step.is-on .v2-dot{ box-shadow:0 0 0 7px rgb(245 165 36 / .2); }
.v2-step b{ font-size:clamp(17px, 1.7vw, 24px); }
.v2-sd{ position:relative; min-height:110px; margin-top:22px; }
.v2-s p{ font-size:clamp(17px, 1.5vw, 21px); }
.v2-s small{ display:block; margin-top:6px; font-size:14.5px; color:rgb(243 246 251 / .64); }
.v2-mode .v2-s{ position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease, visibility 0s .4s; }
.v2-mode .v2-s.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .4s ease, transform .4s ease; }
.v2-more{ font-size:13px; color:rgb(255 255 255 / .5); transition:opacity .4s ease; }
.v2-form{ display:grid; gap:12px; padding:24px; border:1px solid rgb(255 255 255 / .12); border-radius:16px; background:rgb(255 255 255 / .05); transition:border-color .6s ease, box-shadow .6s ease, transform .3s ease; }
.v2-form.is-ready{ border-color:var(--v2-amber); box-shadow:0 0 0 6px rgb(245 165 36 / .12); }
.v2-ft{ font-size:17px; font-weight:700; color:#fff; }
.v2-form .form-grid{ grid-template-columns:1fr; gap:12px; }
.v2-form .form-field span{ color:rgb(243 246 251 / .78); }
.v2-form .form-input{ min-height:46px; border-color:rgb(255 255 255 / .18); background:rgb(0 0 0 / .18); color:#fff; }
.v2-form .form-input::placeholder{ color:rgb(255 255 255 / .4); }
.v2-form .btn{ width:100%; }
.v2-form .form-lead{ margin:0; font-size:15px; line-height:1.75; color:rgb(243 246 251 / .74); }
.v2-form .form-site{ display:grid; gap:8px; }
.v2-form .form-site.is-none [data-site-field]{ display:none; }
.v2-form .form-check{ display:inline-flex; align-items:center; gap:8px; width:fit-content; font-size:14.5px; color:rgb(243 246 251 / .82); cursor:pointer; }
.v2-form .form-check input{ width:18px; height:18px; margin:0; accent-color:var(--accent); }
/* Msg 10: the note line and the checkbox make the form ~60px taller; short desktop screens tighten it. */
@media (min-width:900px) and (max-height:820px){
  .v2-form{ gap:8px; padding:18px 20px; }
  .v2-form .form-grid{ gap:8px; }
  .v2-form .form-input{ min-height:40px; }
  .v2-form .form-field{ gap:4px; }
  .v2-form .form-lead{ font-size:14px; line-height:1.6; }
  /* Name and WhatsApp side by side; everything else keeps the full width. */
  .v2-form .form-grid{ grid-template-columns:1fr 1fr; }
  .v2-form .form-grid > *{ grid-column:1 / -1; }
  .v2-form .form-grid > .form-field{ grid-column:auto; }
}
/* Msg 19.1: «نوع المشروع» and «ملاحظات» make it ~170px taller, so on every desktop name + WhatsApp sit side by side,
   the wide fields keep the full width, and the notes box is 3 rows of text without the inputs' min-height. */
@media (min-width:900px){
  .v2-form{ gap:8px; padding:16px 20px; }
  .v2-form .form-lead{ font-size:14px; line-height:1.6; }
  .v2-form .form-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .v2-form .form-grid > *{ grid-column:1 / -1; }
  .v2-form .form-grid > .form-field{ grid-column:auto; }
  .v2-form .form-grid > .form-field-wide{ grid-column:1 / -1; }
  .v2-form .form-field{ gap:4px; }
  .v2-form .form-input{ min-height:42px; padding-block:6px; }
  .v2-form textarea.form-input{ min-height:0; padding-block:8px; line-height:1.5; resize:vertical; }
  .v2-end{ row-gap:12px; } /* the footer line: closer to the form */
  .v2-end .v2-foot{ margin-top:6px; }
}
/* Short desktop screens: the site field (with its box) and the project type share a row too. */
@media (min-width:900px) and (max-height:820px){
  .v2-form .form-grid > .form-site{ grid-column:auto; align-content:start; }
  .v2-form .form-grid > .form-field-wide:has(select){ grid-column:auto; align-self:start; }
  .v2-form .form-input{ min-height:38px; }
  .v2-form .form-grid{ gap:8px; }
  .v2-form textarea.form-input{ padding-block:5px; line-height:1.4; }
  .v2-form{ gap:6px; padding:12px 18px; }
  .v2-form .form-field span{ font-size:13.5px; line-height:1.4; }
}
.v2-wa{ justify-self:center; border-bottom:1px solid rgb(255 255 255 / .3); font-size:14.5px; }
/* Message 17: the one-page header — the link of the current screen. */
.menu--phase1 a.is-current{ color:#fff; box-shadow:inset 0 -2px 0 var(--v2-amber); }
/* Message 15: WhatsApp line + Facebook / LinkedIn icons, and the «back to top» button. */
.v2-reach{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin:0; }
.v2-soc{ display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid rgb(255 255 255 / .22); border-radius:50%; color:rgb(255 255 255 / .82); transition:border-color .2s ease, color .2s ease, transform .3s ease; }
.v2-soc svg,.v2-top svg{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.v2-soc:hover,.v2-soc:focus-visible{ border-color:var(--v2-amber); color:#fff; transform:scale(1.04); }
.v2-reach .v2-soc{ width:28px; height:28px; margin-block:-2px; } /* no taller than the WhatsApp line, so the last screen stays within 1440×900 */
.v2-foot .v2-soc{ width:28px; height:28px; }
.v2-foot .v2-soc svg{ width:15px; height:15px; }
.v2-top{ display:none; }
.v2-mode .v2-top{ position:fixed; bottom:86px; inset-inline-start:26px; z-index:41; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1.5px solid var(--v2-amber); border-radius:50%; background:rgb(6 26 58 / .72); color:#fff; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, box-shadow .3s ease; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.v2-mode .v2-top.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .3s ease, visibility 0s, box-shadow .3s ease; }
.v2-mode .v2-top:hover,.v2-mode .v2-top:focus-visible{ transform:scale(1.04); box-shadow:0 0 0 1px rgb(255 214 140 / .9), 0 0 22px rgb(245 165 36 / .35); }
/* Where it sits (message 19): in the other bottom corner, beside the mini map (which is 36px wide at 22px from the
   edge), at the WhatsApp button's level, on every size. */
.v2-mode .v2-top{ bottom:26px; inset-inline-start:auto; inset-inline-end:70px; }
.v2-foot{ display:flex; flex-wrap:wrap; gap:6px 16px; grid-column:1 / -1; margin-top:26px; padding-top:14px; border-top:1px solid rgb(255 255 255 / .12); font-size:13px; color:rgb(255 255 255 / .55); }
.v2-foot a:hover{ color:#fff; }

/* ---- Map + where ------------------------------------------------------------------------- */
.v2-mode .v2-map{ position:fixed; bottom:22px; inset-inline-end:22px; z-index:5; display:grid; grid-template-columns:repeat(2, 16px); grid-auto-rows:16px; gap:4px; }
.v2-map button{ padding:0; border:0; border-radius:4px; background:rgb(255 255 255 / .16); cursor:pointer; }
.v2-map button[aria-current="true"]{ background:var(--v2-amber); }
.v2-mode .v2-where{ position:fixed; bottom:30px; inset-inline-start:92px; z-index:5; display:block; margin:0; font-size:13px; color:rgb(255 255 255 / .66); }

/* ---- Hover (not on the hero) --------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .v2-scene:not(.v2-scene--hero) :is(.btn, .v2-lnk, .v2-wa){ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .v2-scene:not(.v2-scene--hero) :is(.btn, .v2-lnk, .v2-wa):hover{ transform:scale(1.04); }
  .v2-scene:not(.v2-scene--hero) .btn-accent:hover{ box-shadow:0 0 0 1px rgb(255 214 140 / .9), 0 0 22px rgb(245 165 36 / .35); }
  .v2-scene:not(.v2-scene--hero) :is(.btn-ink-outline, .btn-outline):hover{ border-color:rgb(245 165 36 / .8); box-shadow:0 0 18px rgb(245 165 36 / .18); }
  .v2-card,.v2-frame,.v2-shot,.v2-form{ transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .v2-card:hover,.v2-frame:hover,.v2-form:hover{ transform:scale(1.02); border-color:rgb(245 165 36 / .6); box-shadow:0 0 0 1px rgb(245 165 36 / .25), 0 0 24px rgb(245 165 36 / .14); }
  .v2-shot:hover{ transform:scale(1.02); }
  .v2-shot:hover :is(.v2-scr, .v2-bar){ box-shadow:0 0 0 1px rgb(245 165 36 / .55), 0 0 28px rgb(245 165 36 / .18); }
  .v2-q:hover{ transform:scale(1.02); transform-origin:right center; }
  [dir="ltr"] .v2-q:hover{ transform-origin:left center; }
}

/* ---- Cursor (pointer:fine only; created by home-v2.js) -------------------------------------------- */
@media (pointer:fine){
  .v2-cursor-on,.v2-cursor-on a,.v2-cursor-on button,.v2-cursor-on [data-cursor-target]{ cursor:none; }
  .v2-cursor-on :is(input, textarea, select){ cursor:auto; }
}
.v2-cdot,.v2-ck{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; transition:opacity .2s ease; }
.v2-cdot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#fff; }
.v2-ck{ width:12px; height:12px; border:0 solid var(--accent); } /* outside .v2 (on body): the token directly */
.v2-ck.is-tl{ border-top-width:2px; border-left-width:2px; }
.v2-ck.is-tr{ border-top-width:2px; border-right-width:2px; }
.v2-ck.is-br{ border-bottom-width:2px; border-right-width:2px; }
.v2-ck.is-bl{ border-bottom-width:2px; border-left-width:2px; }
.v2-cdot.is-hidden,.v2-ck.is-hidden{ opacity:0; }
@media (pointer:coarse){ .v2-cdot,.v2-ck{ display:none; } }

/* ---- Small screens ------------------------------------------------------------------------- */
/* Short screens (1366×768…): tighter services screen so the image + 3 cards fit. */
@media (max-height:820px) and (min-width:900px){
  .v2-scene--services .v2-h2{ font-size:clamp(28px, 3vw, 42px); }
  .v2-scene--services .v2-lead{ margin-top:8px; font-size:15.5px; line-height:1.7; max-width:70ch; }
  .v2-scene--services .v2-chain{ margin-top:18px; }
  .v2-scene--services .v2-stop{ padding-top:28px; font-size:19px; }
  .v2-scene--services .v2-stages{ margin-top:14px; }
  .v2-stage-links{ gap:8px; }
  .v2-card{ padding:8px 16px; }
  .v2-scene--services .v2-h2{ line-height:1.2; }
  .v2-card-t{ font-size:16px; }
  .v2-card span{ font-size:13.5px; line-height:1.5; }
  .v2-audit{ margin-top:10px; font-size:14px; }
  .v2-sectors{ font-size:14px; }
}
@media (max-height:760px){ .v2-giant{ font-size:120px; } .v2-letter p{ font-size:18px; } }
@media (max-width:1023px){ /* phones and tablets (899 until message 19.4; desktop ≥1024 unchanged) */
  .v2-mode .v2-scene{ align-items:flex-start; padding:calc(var(--header-h) + 16px) 0 76px; }
  .v2-two,.v2-faq,.v2-end,.v2-stage{ grid-template-columns:1fr; }
  .v2-stage-fig .v2-frame{ flex:none; aspect-ratio:16 / 9; }
  .v2-stage-fig.is-contain .v2-frame{ aspect-ratio:auto; height:min(60vh, 420px); }
  .v2-chain{ grid-template-columns:repeat(var(--n, 5), auto); gap:12px; overflow-x:auto; scrollbar-width:none; }
  .v2-chain::before{ width:100%; }
  .v2-stop{ font-size:16px; white-space:nowrap; }
  .v2-stages{ min-height:0; }
  .v2-shot{ max-width:none; }
  .v2-thumbs{ width:100%; max-width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .v2-th{ flex:0 0 96px; scroll-snap-align:start; }
  .v2-lb{ padding:64px 12px; }
  .v2-lb-prev,.v2-lb-next{ top:auto; bottom:16px; transform:none; }
  .v2-pic{ max-height:36vh; aspect-ratio:auto; height:36vh; }
  .v2-step b{ font-size:16px; }
  .v2-mode .v2-where{ bottom:28px; font-size:12px; }
}

/* ---- Reduced motion: instant moves, no fades, no zoom ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .v2-mode .v2-world,.v2-mode .v2-glow,.v2-mode .v2-glow::before,.v2-mode .v2-scene > .v2-in,.v2-stage,.v2-a,.v2-s,.v2-chain::after,.v2-path::after{ transition:none; }
}

/* ---- Message 19.4: phones and tablets (<1024px) — the desktop above is unchanged ---------------- */
@media (max-width:1023px){
  html.v2-mode{ --v2-bar:56px; --v2-safe:env(safe-area-inset-bottom, 0px); } /* on the root: the WhatsApp button is outside .v2 */
  /* Centring: a screen shorter than the space between the header and the bottom bar sits in its middle; a taller
     one starts under the header and scrolls inside (auto margins become 0). */
  .v2-mode .v2-scene:not(.v2-scene--hero){ padding:calc(var(--header-h) + 12px) 0 calc(var(--v2-bar) + var(--v2-safe) + 16px); }
  .v2-mode .v2-scene:not(.v2-scene--hero) > .v2-in{ margin-block:auto; }
  .v2-mode .v2-scene--hero{ padding:var(--header-h) 0 calc(var(--v2-bar) + var(--v2-safe)); }
  .v2-mode .v2-scene--hero .hero-layout{ padding-top:16px; } /* the hero starts right under the header (its 96px page padding is for pages without the v2 screens) */
  /* Projects: the text, then the pictures at the content's full width; the thumbnails stay inside the screen. */
  .v2-scene--case .v2-two{ grid-template-columns:minmax(0, 1fr); gap:22px; }
  .v2-scene--case .v2-gal,.v2-scene--case .v2-shot{ width:100%; }
  .v2-scene--case .v2-mob{ inset-inline-end:0; }
  .v2-th{ flex:0 0 min(96px, 23%); }
  /* Hero: only the four-number card (the three-number row goes). */
  .v2-scene--hero .hero-proof{ display:none; }
  /* FAQ: each answer opens under its question (home-v2.js moves it there), one at a time. */
  .v2-qs{ max-height:none; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .v2-qs-box::after,.v2-as,.v2-qs .v2-a h3{ display:none; }
  .v2-mode .v2-qs .v2-a{ position:static; display:none; opacity:1; visibility:visible; transform:none; }
  .v2-mode .v2-qs .v2-a.is-on{ display:block; padding:2px 14px 16px; border-bottom:1px solid rgb(255 255 255 / .14); }
  .v2-qs .v2-a p{ margin-top:0; max-width:none; font-size:16px; }
  .v2-qs li:has(.v2-a.is-on) .v2-q{ border-bottom-color:transparent; }
  /* One thin bar at the bottom: the counter, «back to top» and WhatsApp (no mini map). */
  .v2-mode .v2-map{ display:none; }
  .v2-mode .v2::after{ content:""; position:fixed; inset-inline:0; bottom:0; z-index:4; height:calc(var(--v2-bar) + var(--v2-safe)); border-top:1px solid rgb(255 255 255 / .1); background:rgb(6 18 40 / .88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); pointer-events:none; }
  .v2-mode .v2-where{ bottom:calc(var(--v2-safe) + 18px); inset-inline-start:auto; inset-inline-end:16px; max-width:calc(100% - 140px); overflow:hidden; font-size:12.5px; line-height:20px; white-space:nowrap; text-overflow:ellipsis; }
  .v2-mode .v2-top{ bottom:calc(var(--v2-safe) + 8px); inset-inline-start:66px; inset-inline-end:auto; width:40px; height:40px; }
  .v2-mode .is-home-v2 .whatsapp-wrap{ bottom:calc(var(--v2-safe) + 6px); inset-inline-start:12px; z-index:41; }
  .v2-mode .is-home-v2 .whatsapp-tip{ display:none; }
  .v2-mode .is-home-v2 .whatsapp-button{ width:44px; height:44px; box-shadow:none; }
  .v2-mode .is-home-v2 .whatsapp-button .icon{ width:22px; height:22px; }
  .v2-mode .is-home-v2 .whatsapp-button::after{ display:none; }
}