/* Codeator — projects & contracting solution page. Page-specific styles only; shared components live in site.css.
   Logical properties throughout, so the English twin can reuse this file. */
.sol-prj-caps { margin-top: 0; }
.sol-prj-iraq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 80px); margin-top: 0; }
.sol-prj-iraq b { display: block; margin-bottom: 2px; }
@media (max-width: 920px) { .sol-prj-iraq { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* shared look of this page's two illustrations */
.sol-prj-art { display: block; width: 100%; height: auto; overflow: visible; }
.sol-prj-art polygon { stroke: rgba(14,27,82,.2); stroke-width: 1; stroke-linejoin: round; }
.sol-prj-art .f-top { fill: #fbfcff; }
.sol-prj-art .f-left { fill: #d3dbf0; }
.sol-prj-art .f-right { fill: #a9b7df; }
.sol-prj-art text { font-family: var(--f-ui); text-anchor: middle; }
.sol-prj-explain { max-width: 560px; margin-inline: auto; }

/* ---------- hero: the building rises floor by floor; every floor is a billing milestone ---------- */
.sol-prj-hero polygon { stroke: rgba(9,18,58,.35); }
.sol-prj-site .f-top { fill: #24388f; } .sol-prj-site .f-left { fill: #1b2c78; } .sol-prj-site .f-right { fill: #142262; }
.sol-prj-art .win { stroke: none; fill: #7f93dc; }
.sol-prj-art .win.r { fill: #5a70c4; }
.sol-prj-floor { animation: drop 1s cubic-bezier(.25,.9,.3,1.12) both; animation-delay: var(--d); }
.sol-prj-art .sol-prj-wire polygon { fill: rgba(247,226,173,.07); stroke: var(--gold-soft); stroke-width: 1.4; stroke-dasharray: 4 5; animation: sol-prj-dash 1.4s linear infinite; }
.sol-prj-mat .f-top { fill: var(--clay-light); } .sol-prj-mat .f-left { fill: var(--clay); } .sol-prj-mat .f-right { fill: var(--clay-deep); }
.sol-prj-hook path { fill: none; stroke: rgba(247,226,173,.6); stroke-width: 1.4; stroke-dasharray: 3 4; }
.sol-prj-hook .f-top { fill: var(--gold-soft); } .sol-prj-hook .f-left { fill: var(--gold); } .sol-prj-hook .f-right { fill: var(--gold-deep); }
.sol-prj-hook { animation: sol-prj-lower 4.5s ease-in-out infinite alternate; }
.sol-prj-scale { fill: none; stroke: rgba(201,211,242,.45); stroke-width: 1.6; }
.sol-prj-tie { fill: none; stroke: rgba(201,211,242,.35); stroke-width: 1.2; stroke-dasharray: 2 5; }
.sol-prj-ms rect { fill: var(--gold); stroke: var(--lapis-950); stroke-width: 2; }
.sol-prj-ms text { font-size: 17px; font-weight: 500; fill: #dfe5f8; }
.sol-prj-art .sol-prj-ms.todo rect { fill: var(--lapis-900); stroke: var(--gold-soft); stroke-dasharray: 3 3; }
.sol-prj-ms.todo text { fill: #8d9bcb; }
.sol-prj-ms { animation: fade-in .6s ease both; animation-delay: var(--d); }
.sol-prj-cap { font-size: 15px; font-weight: 500; fill: var(--gold-soft); }
@keyframes sol-prj-dash { from { stroke-dashoffset: 18; } to { stroke-dashoffset: 0; } }
@keyframes sol-prj-lower { from { transform: translateY(-14px); } to { transform: translateY(8px); } }

/* ---------- explainer: progress invoices, retention, budget against actual cost ---------- */
.sol-prj-art .sol-prj-t { font-size: 17px; font-weight: 700; fill: var(--lapis-900); text-anchor: start; }
[dir="ltr"] .sol-prj-art .sol-prj-t { text-anchor: end; }
.sol-prj-track { fill: #fff; stroke: var(--lapis-300); stroke-width: 1.5; }
.sol-prj-fill { fill: var(--lapis-500); transform-box: fill-box; transform-origin: 100% 50%; }
.sol-prj-cost { fill: var(--lapis-800); transform: scaleX(.86); }
.sol-prj-budget { fill: rgba(227,168,43,.16); stroke: var(--gold-deep); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sol-prj-limit { fill: none; stroke: var(--gold-deep); stroke-width: 1.5; stroke-dasharray: 2 4; }
.sol-prj-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.sol-prj-drop { fill: none; stroke: var(--lapis-300); stroke-width: 1.5; stroke-dasharray: 2 4; }
.sol-prj-sheet rect { fill: #fff; stroke: none; }
.sol-prj-sheet rect.ret { fill: var(--gold); }
.sol-prj-sheet rect.edge { fill: none; stroke: var(--lapis-700); stroke-width: 2; }
.sol-prj-sheet text { font-size: 20px; font-weight: 700; fill: var(--lapis-700); }
.sol-prj-sheet path { fill: none; stroke: var(--lapis-300); stroke-width: 2.2; stroke-linecap: round; }
.sol-prj-sheet { transform-box: fill-box; transform-origin: 50% 0; }
.sol-prj-dm { fill: var(--gold); stroke: var(--lapis-900); stroke-width: 2; }
.sol-prj-rail { fill: #fff; stroke: var(--lapis-300); stroke-width: 1.5; }
.sol-prj-seg { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }

.sol-prj-loop { animation: sol-prj-loop 12s linear infinite; }
.sol-prj-grow { animation: sol-prj-grow 12s linear infinite; }
.sol-prj-cost { animation: sol-prj-cost 12s linear infinite; }
.sol-prj-sheet.s1, .sol-prj-seg.r1 { animation: sol-prj-a1 12s var(--ease) infinite; }
.sol-prj-sheet.s2, .sol-prj-seg.r2 { animation: sol-prj-a2 12s var(--ease) infinite; }
.sol-prj-sheet.s3, .sol-prj-seg.r3 { animation: sol-prj-a3 12s var(--ease) infinite; }
.sol-prj-sheet.s4, .sol-prj-seg.r4 { animation: sol-prj-a4 12s var(--ease) infinite; }
@keyframes sol-prj-loop { 0% { opacity: 0; } 3%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sol-prj-grow { 0%, 5% { transform: scaleX(0); } 65%, 100% { transform: scaleX(1); } }
@keyframes sol-prj-cost { 0%, 5% { transform: scaleX(0); } 65%, 100% { transform: scaleX(.86); } }
@keyframes sol-prj-a1 { 0%, 19% { opacity: 0; transform: translateY(-10px); } 24%, 100% { opacity: 1; transform: none; } }
@keyframes sol-prj-a2 { 0%, 34% { opacity: 0; transform: translateY(-10px); } 39%, 100% { opacity: 1; transform: none; } }
@keyframes sol-prj-a3 { 0%, 49% { opacity: 0; transform: translateY(-10px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes sol-prj-a4 { 0%, 64% { opacity: 0; transform: translateY(-10px); } 69%, 100% { opacity: 1; transform: none; } }

/* the drawing shrinks with the phone: keep its lettering readable */
@media (max-width: 600px) {
  .sol-prj-art .sol-prj-t { font-size: 20px; }
  .sol-prj-cap { font-size: 18px; }
  .sol-prj-ms text { font-size: 19px; }
}