/* =====================================================================
   Codeator — /holdings/ (Odoo for holding companies). Page-specific art
   and components only; everything is prefixed .hold-. Shared by the Arabic
   and English pages, so layout uses logical properties throughout.
   ===================================================================== */

/* the single block used by the small diagrams (see <defs> at the top of <main>) */
.hold-f-top { fill: #fbfcff; }
.hold-f-left { fill: #d3dbf0; }
.hold-f-right { fill: #a9b7df; }
.hold-g-top { fill: #f7e2ad; }
.hold-g-left { fill: #e3a82b; }
.hold-g-right { fill: #b9820f; }
#hold-cube polygon, #hold-cube-gold polygon { stroke: rgba(14,27,82,.16); stroke-width: 1; stroke-linejoin: round; }

/* ---------- 1. hero: parent block above four companies ---------- */
.page-hero-art .hold-hero-svg { max-width: 520px; }
.hold-hero-svg .f-top { fill: #fbfcff; }
.hold-hero-svg .f-left { fill: #d3dbf0; }
.hold-hero-svg .f-right { fill: #a9b7df; }
.hold-hero-svg .hold-parent .f-top { fill: #f7e2ad; }
.hold-hero-svg .hold-parent .f-left { fill: #e3a82b; }
.hold-hero-svg .hold-parent .f-right { fill: #b9820f; }
.hold-drop { animation: drop 1s cubic-bezier(.25,.9,.3,1.12) both; animation-delay: var(--d); }
.hold-bob { animation: bob-s 4.6s ease-in-out infinite alternate; }
.hold-lift { transition: transform .45s var(--ease); }
.hold-co:hover .hold-lift { transform: translateY(-12px); }
.hold-co:hover .f-top { fill: #fff; }
.hold-ring { fill: none; stroke: rgba(201,211,242,.42); stroke-width: 1.4; stroke-dasharray: 2 9; animation: flow-orbit 9s linear infinite; }
.hold-link { fill: none; stroke: rgba(247,226,173,.75); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 3 7; animation: hold-flow 1.5s linear infinite; }
.hold-trunk { stroke-width: 2.4; }
.hold-links { animation: fade-in .8s ease 1.5s both; }
.hold-dot { fill: var(--gold); }
.hold-foot { fill: rgba(9,18,58,.35); }
.hold-hero-svg text { font-family: var(--f-ui); font-size: 19px; font-weight: 500; fill: #fff; animation: fade-in .8s ease 1.7s both; }
.hold-hero-svg text.gold { fill: var(--gold-soft); font-size: 21px; font-weight: 700; }
.hold-hero-svg text.db { fill: #aab6de; font-size: 17px; font-weight: 300; text-anchor: middle; }
.hold-tick { stroke: rgba(247,226,173,.55); stroke-width: 1.2; animation: fade-in .8s ease 1.7s both; }

/* ---------- 2. growth: every new company adds a relation with each earlier one ---------- */
.hold-para { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 38em; }
.hold-web { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; overflow: visible; }
.hold-web-lines line { stroke: var(--lapis-500); stroke-opacity: .5; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; }
.hold-web.is-drawing .hold-web-lines line { animation: hold-draw .5s ease-out both; animation-delay: calc(var(--k) * 240ms + 300ms); }
.hold-web text { font-family: var(--f-ui); text-anchor: middle; }
.hold-web .nm { font-size: 18px; font-weight: 700; fill: var(--lapis-900); }
.hold-web .ad { font-size: 14.5px; font-weight: 400; fill: var(--ink-3); }
.hold-web .to-right text { text-anchor: end; }
.hold-web .to-left text { text-anchor: start; }
[dir="ltr"] .hold-web .to-right text { text-anchor: start; }
[dir="ltr"] .hold-web .to-left text { text-anchor: end; }
.hold-web-num { font-size: 44px; font-weight: 700; fill: var(--gold-deep); }
.hold-web-cap { font-size: 14px; font-weight: 500; fill: var(--ink-2); }
.hold-web-mid { paint-order: stroke; }
.hold-web-mid text { stroke: var(--stone); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
.hold-web-node use { transition: transform .4s var(--ease); }
.hold-web-node:hover use { transform: translateY(-5px); }

.hold-effects { margin-top: clamp(40px, 5vw, 64px); }
.hold-effects h3 { font-size: var(--t-lg); color: var(--lapis-900); }
.hold-ledger-2 { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }

/* ---------- 3. structure: three levels ---------- */
.hold-levels { list-style: none; position: relative; border-top: 1px solid var(--line); }
.hold-level {
  --step: 50px;
  position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px);
  align-items: start; padding-block: 26px; border-bottom: 1px solid var(--line);
  padding-inline-start: calc(var(--lv) * var(--step));
}
/* dashed drop from a block of one level to the first block of the next (marks are 170px wide, 1:1) */
.hold-level:not(:last-child)::after {
  content: ""; position: absolute; top: var(--from); bottom: var(--to); width: 0; margin-inline-start: -1px;
  inset-inline-start: calc(var(--lv) * var(--step) + 85px);
  border-inline-start: 2px dashed var(--lapis-300);
}
.hold-level:nth-child(1) { --from: 104px; --to: -40px; }
.hold-level:nth-child(2) { --from: 97px; --to: -54px; }
.hold-level-mark svg { display: block; width: 170px; height: auto; overflow: visible; }
.hold-level-mark use { transition: transform .45s var(--ease); }
.hold-level:hover .hold-level-mark use { transform: translateY(-4px); }
.hold-struct.in-view .hold-level-mark { animation: rise-in .8s var(--ease) both; animation-delay: calc(var(--lv) * 160ms); }
.hold-level h3 { font-size: var(--t-lg); color: var(--lapis-900); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.hold-level h3 span { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); }
.hold-level p { color: var(--ink-2); font-size: 17px; max-width: 44em; }
.hold-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; font-family: var(--f-ui); font-size: 15.5px; font-weight: 500; color: var(--lapis-800); }
.hold-chips li { display: inline-flex; align-items: center; }
.hold-chips li + li::before { content: ""; width: 6px; height: 6px; margin-inline: 12px; background: var(--gold); transform: rotate(45deg); flex: none; }
/* ---------- 4. the inter-company transaction (looping explainer, on the dark band) ---------- */
.hold-ic-scroll { overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: rgba(201,211,242,.4) transparent; }
.hold-ic-svg { display: block; width: 100%; min-width: 720px; height: auto; overflow: visible; }
.hold-ic-svg .f-top { fill: #fbfcff; }
.hold-ic-svg .f-left { fill: #d3dbf0; }
.hold-ic-svg .f-right { fill: #a9b7df; }
.hold-ic-svg text { font-family: var(--f-ui); text-anchor: middle; }
.hold-ic-svg .ic-name { font-size: 21px; font-weight: 700; fill: #fff; }
.hold-ic-svg .ic-sub { font-size: 15px; font-weight: 300; fill: #aab6de; }
.ic-lift { transition: transform .5s var(--ease); }
.hold-ic-svg.p1:not(.p2) .ic-a .ic-lift, .hold-ic-svg.p2:not(.p3) .ic-b .ic-lift { transform: translateY(-10px); }

.ic-rail { fill: none; stroke: rgba(201,211,242,.4); stroke-width: 1.6; stroke-dasharray: 3 8; }
.hold-ic-svg.p2:not(.p3) .ic-rail { stroke: var(--gold-soft); animation: hold-flow-rail 1.4s linear infinite; }
.ic-rule rect { fill: var(--lapis-900); stroke: var(--gold); stroke-width: 2; transition: fill .4s; }
.ic-rule line { stroke: rgba(247,226,173,.5); stroke-width: 1.2; stroke-dasharray: 2 4; }
.ic-rule text { font-size: 15.5px; font-weight: 500; fill: var(--gold-soft); }
.hold-ic-svg.p2 .ic-rule rect { fill: var(--gold); }

/* documents */
.ic-doc { transition: opacity .5s ease, transform .7s var(--ease); }
.ic-doc .sheet { fill: #f7f8fb; stroke: rgba(9,18,58,.25); stroke-width: 1; }
.ic-doc .band { fill: var(--gold); transition: fill .6s ease .9s; }
.ic-doc .rule { stroke: #c4cce0; stroke-width: 2; stroke-linecap: round; }
.ic-doc .t { font-size: 15px; font-weight: 700; fill: var(--lapis-950); transition: opacity .4s ease .9s; }
.ic-doc .amt { font-size: 15px; font-weight: 700; fill: var(--ink); }
.ic-doc .cur { font-size: 12.5px; font-weight: 400; fill: var(--ink-3); }
.ic-doc-a { opacity: 0; transform: translateY(14px); }
.hold-ic-svg.p1 .ic-doc-a { opacity: 1; transform: none; }
.ic-doc-b { opacity: 0; transform: translateX(var(--dx)); transition: opacity .3s ease, transform 0s linear .3s; }
.hold-ic-svg.p2 .ic-doc-b { opacity: 1; transform: none; transition: opacity .3s ease, transform 1.7s var(--ease); }
.ic-doc-b .t-bill { opacity: 0; fill: #fff; }
.hold-ic-svg.p2 .ic-doc-b .band { fill: var(--lapis-500); }
.hold-ic-svg.p2 .ic-doc-b .t-inv { opacity: 0; }
.hold-ic-svg.p2 .ic-doc-b .t-bill { opacity: 1; }
.hold-ic-svg:not(.p2) .ic-doc-b .band, .hold-ic-svg:not(.p2) .ic-doc-b .t { transition-delay: .3s; transition-duration: 0s; }

/* ledger entries and the streams into the report */
.ic-entry, .ic-stream { opacity: 0; transition: opacity .6s ease; }
.hold-ic-svg.p3 .ic-entry, .hold-ic-svg.p3 .ic-stream { opacity: 1; }
.ic-entry rect { fill: rgba(255,255,255,.08); stroke: var(--lapis-300); stroke-width: 1.2; }
.ic-entry text { font-size: 15px; font-weight: 500; fill: #fff; }
.ic-stream { fill: none; stroke: var(--lapis-300); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; animation: hold-flow 1.5s linear infinite; }

/* consolidated report */
.ic-report .panel { fill: #f7f8fb; }
.ic-report .bar { fill: var(--lapis-800); }
.ic-report .ttl { font-size: 17px; font-weight: 700; fill: #fff; }
.ic-report .lbl { font-size: 16px; font-weight: 500; fill: var(--ink); text-anchor: start; }
.ic-report .val { font-size: 16px; font-weight: 700; fill: var(--ink); text-anchor: end; }
.ic-report .sep { stroke: var(--line); stroke-width: 1.5; }
.ic-row { opacity: 0; transition: opacity .6s ease .5s; }
.hold-ic-svg.p3 .ic-row { opacity: 1; }
.hold-ic-svg.p4 .ic-row { opacity: .7; transition-delay: .7s; }
.ic-ghost { fill: #e2e7f0; transition: opacity .4s ease; }
.hold-ic-svg.p3 .ic-ghost { opacity: 0; }
.ic-strike { stroke: var(--gold-deep); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); }
.hold-ic-svg.p4 .ic-strike { stroke-dashoffset: 0; }
.ic-result { opacity: 0; transition: opacity .6s ease; }
.hold-ic-svg.p4 .ic-result { opacity: 1; transition-delay: .8s; }
.ic-result .lbl, .ic-result .val { fill: var(--lapis-700); font-weight: 700; }
.ic-result .val { font-size: 22px; }
.ic-result .dm { fill: var(--gold); }
.hold-ic-svg:not(.p1) .ic-doc-a, .hold-ic-svg:not(.p1) .ic-entry, .hold-ic-svg:not(.p1) .ic-stream,
.hold-ic-svg:not(.p1) .ic-row, .hold-ic-svg:not(.p1) .ic-result { transition-duration: .3s; transition-delay: 0s; }

/* step captions under the figure; the active one follows the animation */
.hold-steps { list-style: none; counter-reset: hs; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(28px, 3.5vw, 44px); }
.hold-steps li { counter-increment: hs; display: flex; }
.hold-step {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; text-align: start;
  font: inherit; color: #c9d3f2; cursor: pointer; border: 0; border-radius: 3px;
  padding: 50px 20px 22px; background: rgba(9,18,58,.42);
  box-shadow: inset 0 3px 0 rgba(201,211,242,.22);
  transition: background-color .4s, box-shadow .4s, transform .35s var(--ease);
}
.hold-step::before { content: counter(hs); position: absolute; top: 14px; inset-inline-start: 20px; font-family: var(--f-ui); font-weight: 300; font-size: 28px; line-height: 1; color: var(--lapis-300); transition: color .4s; }
.hold-step b { font-family: var(--f-display); font-weight: 700; font-size: 18.5px; line-height: 1.5; color: #fff; }
.hold-step span { font-size: 15.5px; line-height: 1.75; }
.hold-step:hover { transform: translateY(-3px); box-shadow: inset 0 3px 0 var(--gold-soft); }
.hold-step.is-on { background: rgba(9,18,58,.72); box-shadow: inset 0 3px 0 var(--gold); }
.hold-step.is-on::before { color: var(--gold); }

/* ---------- 5. the six mechanisms ---------- */
.hold-mech { list-style: none; counter-reset: hm; border-top: 2px solid var(--lapis-100); }
.hold-mech > li {
  counter-increment: hm; position: relative;
  display: grid; grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.7fr); gap: 8px clamp(20px, 3vw, 48px);
  padding-block: 32px 34px; border-bottom: 1px solid var(--line);
}
.hold-mech > li::before { content: counter(hm); grid-column: 1; font-family: var(--f-ui); font-weight: 300; font-size: 44px; line-height: 1.1; color: var(--lapis-500); }
.hold-mech > li::after { content: ""; position: absolute; top: -6px; inset-inline-start: 0; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); transition: transform .5s var(--ease); }
.hold-mech > li:hover::after { transform: rotate(225deg) scale(1.25); }
.hold-mech h3 { grid-column: 2; font-size: var(--t-lg); color: var(--lapis-900); line-height: 1.5; }
.hold-mech-body { grid-column: 3; }
.hold-mech-body p { color: var(--ink-2); font-size: 17.5px; }
.hold-mech-body .hold-decide { margin-top: 16px; padding-inline-start: 16px; border-inline-start: 2px solid var(--gold); font-size: 16.5px; color: var(--ink-2); }
.hold-decide b { display: block; font-family: var(--f-ui); font-weight: 500; font-size: var(--t-sm); color: var(--lapis-700); }
.hold-note { margin-top: clamp(32px, 4vw, 48px); font-size: 17px; color: var(--ink-2); max-width: 52em; }

/* ---------- 6. board: from the consolidated figure down to its document ---------- */
.hold-trace { list-style: none; display: grid; gap: 14px; }
.hold-trace li {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  margin-inline-start: calc(var(--n) * 11%); margin-inline-end: calc((3 - var(--n)) * 5%);
  padding: 16px 22px 18px; padding-inline-start: 48px; border-radius: 3px;
  background: linear-gradient(180deg, #ffffff, #f1f4fa);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -4px 0 rgba(14,27,82,.08);
}
.hold-trace li:first-child { background: linear-gradient(180deg, var(--lapis-800), var(--lapis-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.28); }
.hold-trace li:first-child b { color: #fff; }
.hold-trace li:first-child span { color: #c9d3f2; }
.hold-trace b { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--lapis-900); line-height: 1.5; }
.hold-trace span { font-family: var(--f-ui); font-size: 15px; color: var(--ink-3); }
.hold-trace li::before { content: ""; position: absolute; inset-inline-start: 20px; top: 26px; width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); }
.hold-board.in-view .hold-trace li::before { animation: hold-pulse 4.8s ease-in-out infinite; animation-delay: calc(var(--n) * 1.2s); }
/* dashed elbow from one step down into the next */
.hold-trace li + li::after {
  content: ""; position: absolute; bottom: calc(100% - 31px); height: 45px; width: clamp(18px, 6%, 40px);
  inset-inline-end: 100%; margin-inline-end: 6px;
  border-inline-start: 2px dashed var(--lapis-300); border-bottom: 2px dashed var(--lapis-300);
}
.hold-board .caps { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- 7–8. small text links under sections ---------- */
.hold-more { margin-top: clamp(28px, 3.5vw, 44px); font-size: 17px; color: var(--ink-2); }
.hold-more a, .hold-note a { font-weight: 500; }

/* ---------- keyframes ---------- */
@keyframes hold-flow { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes hold-flow-rail { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes hold-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hold-pulse { 0%, 30%, 100% { transform: rotate(45deg) scale(1); box-shadow: 0 0 0 0 rgba(227,168,43,0); } 12% { transform: rotate(45deg) scale(1.35); box-shadow: 0 0 0 8px rgba(227,168,43,.22); } }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .hold-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hold-mech > li { grid-template-columns: 52px minmax(0, 1fr); }
  .hold-mech h3, .hold-mech-body { grid-column: 2; }
  .hold-mech > li::before { grid-row: 1 / span 2; font-size: 38px; }
}
@media (max-width: 920px) {
  .hold-hero-svg text { font-size: 22px; }
  .hold-hero-svg text.gold { font-size: 24px; }
  .hold-hero-svg text.db { font-size: 20px; }
  .hold-web { max-width: 480px; }
}
@media (max-width: 600px) {
  .hold-ledger-2 { grid-template-columns: minmax(0, 1fr); }
  .hold-level { --step: 16px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hold-level-mark svg { width: 130px; }
  .hold-level:not(:last-child)::after { display: none; }
  .hold-chips { font-size: 15px; gap: 4px 16px; }
  .hold-chips li::before, .hold-chips li + li::before { content: ""; width: 6px; height: 6px; margin-inline: 0 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
  .hold-steps { grid-template-columns: minmax(0, 1fr); }
  .hold-mech > li { grid-template-columns: minmax(0, 1fr); padding-block: 26px 28px; }
  .hold-mech > li::before, .hold-mech h3, .hold-mech-body { grid-column: 1; grid-row: auto; }
  .hold-mech > li::before { font-size: 34px; }
  .hold-trace li { margin-inline-start: calc(var(--n) * 7%); margin-inline-end: 0; padding-inline-start: 42px; }
  .hold-trace li::before { inset-inline-start: 16px; }
  .hold-web .nm { font-size: 21px; }
  .hold-web .ad { font-size: 16px; }
}

/* ---------- the six mechanisms, in two columns (keeps the page short) ---------- */
.hold-mech-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); border-top: 0; }
.hold-mech-2 > li { grid-template-columns: 46px minmax(0, 1fr); border-top: 2px solid var(--lapis-100); padding-block: 24px 26px; }
.hold-mech-2 > li::before { grid-row: 1 / span 2; font-size: 36px; }
.hold-mech-2 h3, .hold-mech-2 .hold-mech-body { grid-column: 2; }
.hold-mech-2 h3 { font-size: 20px; margin-bottom: 8px; }
.hold-mech-2 .hold-mech-body p { font-size: 16.5px; line-height: 1.8; }
.hold-mech-2 .hold-mech-body .hold-decide { margin-top: 12px; font-size: 15.5px; }
@media (max-width: 920px) { .hold-mech-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the three levels, side by side ---------- */
.hold-levels-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.hold-levels-row .hold-level { display: block; padding: 0; border: 0; }
.hold-levels-row .hold-level + .hold-level { border-top: 0; }
.hold-levels-row .hold-level-mark { margin-bottom: 10px; }
.hold-levels-row .hold-level-mark svg { max-width: 190px; }
.hold-levels-row .hold-level-body h3 { font-size: 19px; }
.hold-levels-row .hold-level-body h3 span { display: block; }
.hold-levels-row .hold-level-body p { font-size: 16px; line-height: 1.75; }
.hold-strip .tile { min-height: 0; padding: 18px 20px; }
.hold-strip .tile h3 { font-size: 17px; }
@media (max-width: 920px) { .hold-levels-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }