/* =============================================================
   Consultancy: built on the Velon Suites page system (suites.css).
   Extra parts: hero model window, study plots, stage cards, featured
   case, case cards, training band, light FAQ.
   ============================================================= */

/* hero: the Balearic PSCAD model in a floating window, slowly panning */
.cs-win { position: relative; height: clamp(300px, 38vw, 520px); overflow: hidden; background: #0d141c; }
.cs-win img { position: absolute; inset: 0; width: 100%; height: 130%; object-fit: cover; object-position: center top; animation: csPan 26s ease-in-out infinite alternate; }
.cs-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13,20,28,0) 70%, rgba(13,20,28,0.65)); }
.cs-win.is-offscreen img { animation-play-state: paused; }
@keyframes csPan { from { transform: translateY(0); } to { transform: translateY(-23%); } }
.cs-hcap b { white-space: normal; }
.cs-hcap .vs2-il { letter-spacing: 0.08em; }
@media (max-width: 600px) { .cs-hcap { flex-wrap: wrap; row-gap: 4px; } .cs-hcap b { flex-basis: 100%; } }
.cs-cap { position: absolute; z-index: 1; inset-inline: 16px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-cap span { padding: 5px 10px; border-radius: 999px; background: rgba(13,20,28,0.85); border: 1px solid rgba(255,255,255,0.12); font-family: var(--font-mono); font-size: 11px; color: #e8e5df; }
.cs-cap span:first-child { color: #e9a566; border-color: rgba(233,165,102,0.45); }

/* study plots inside the dark panels (same marks as the study pages) */
.vs2-chart .sp-ax { fill: none; stroke: rgba(232,229,223,0.32); stroke-width: 1; }
.vs2-chart .sp-gd { fill: none; stroke: rgba(232,229,223,0.07); stroke-width: 1; }
.vs2-chart .sp-t { font-size: 11px; fill: rgba(232,229,223,0.62); }
.vs2-chart .sp-tk { font-size: 11px; fill: #e9a566; }
.vs2-chart .sp-tg { font-size: 11px; fill: #5dd2a6; }
.vs2-chart .sp-tb { font-size: 11px; fill: #8ec5ff; }
.vs2-chart .sp-l { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs2-chart .sp-thin { stroke-width: 1.5; }
.vs2-chart .sp-a { stroke: #e9a566; } .vs2-chart .sp-c { stroke: #c97b3d; } .vs2-chart .sp-b { stroke: #8ec5ff; } .vs2-chart .sp-g { stroke: #5dd2a6; } .vs2-chart .sp-w { stroke: rgba(232,229,223,0.85); }
.vs2-chart .sp-d { stroke-dasharray: 5 5; }
.vs2-chart .sp-faint { opacity: 0.5; }
.vs2-chart .sp-band { fill: rgba(233,165,102,0.08); }
.vs2-chart .sp-bandb { fill: rgba(142,197,255,0.06); }
.vs2-chart .sp-x { fill: none; stroke: #e9a566; stroke-width: 2; stroke-linecap: round; }
.vs2-chart .sp-n { stroke: none; } .vs2-chart .sp-n.sp-c { fill: #c97b3d; } .vs2-chart .sp-n.sp-a { fill: #e9a566; } .vs2-chart .sp-n.sp-b { fill: #8ec5ff; }
.vs2-chart .sp-op { fill: #0d141c; stroke-width: 2; }
.vs2-chart .sp-bar-r { fill: rgba(201,123,61,0.22); stroke: #c97b3d; stroke-width: 1.2; }
.vs2-chart .sp-bar-g { fill: #5dd2a6; }
.vs2-chart .sp-lim { fill: none; stroke: rgba(232,229,223,0.9); stroke-width: 2; stroke-linecap: round; }
.vs2-chart svg { direction: ltr; }
.cs-leg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; padding: 0 4px; font-size: 12.5px; color: rgba(232,229,223,0.7); }
.cs-leg li { display: inline-flex; align-items: center; gap: 7px; }
.cs-leg i { display: inline-block; width: 16px; border-top: 2px solid currentColor; }
.cs-leg i.d { border-top-style: dashed; }
.cs-leg i.bar { width: 10px; height: 10px; border: 0; border-radius: 2px; background: currentColor; }
.cs-leg i.ghost { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; background: rgba(201,123,61,0.22); }
.cs-leg .a { color: #e9a566; } .cs-leg .c { color: #c97b3d; } .cs-leg .b { color: #8ec5ff; } .cs-leg .g { color: #5dd2a6; } .cs-leg .w { color: rgba(232,229,223,0.85); }
.vs2-chart .sp-ts { font-size: 10px; }
.vs2-hframe figure { margin: 0; }
/* the panels in a row share one cell, so switching tabs never changes the height */
.cs-eng .vs2-row.js .vs2-app { display: grid; }
.cs-eng .vs2-row.js .vs2-panel { grid-area: 1 / 1; display: flex !important; flex-direction: column; }
.cs-eng .vs2-row.js .vs2-panel:not(.is-on) { visibility: hidden; }
.cs-eng .vs2-panel .vs2-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cs-html { padding: 6px 2px 14px; }
.cs-eng .vs2-src { margin-top: clamp(20px, 3vw, 36px); }
/* bars, matrix cells and checklist rows build in when their tab opens */
.vs2-chart .sp-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.vs2-row.js .vs2-panel.is-on .sp-bar { animation: csGrow 0.8s var(--ease) both; animation-delay: calc(0.15s + var(--i, 0) * 0.06s); }
.vs2-row.js .vs2-panel.is-on :is(.cs-mx-r i, .cs-ck li) { animation: csIn 0.4s ease both; animation-delay: calc(0.1s + var(--i, 0) * 0.04s); }
@keyframes csGrow { from { transform: scaleY(0); } }
@keyframes csIn { from { opacity: 0; transform: translateY(4px); } }
/* compliance matrix and checklist panels */
.cs-mx { display: grid; gap: 6px; font-size: 13px; color: #e8e5df; }
.cs-mx-r { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; }
.cs-mx-hd span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(232,229,223,0.6); text-align: center; }
.cs-mx-r i { display: grid; place-items: center; height: 34px; border-radius: 8px; background: rgba(93,210,166,0.08); border: 1px solid rgba(93,210,166,0.22); }
.cs-mx-r i svg { width: 15px; height: 15px; fill: none; stroke: #5dd2a6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-ck { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.cs-ck li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid rgba(93,210,166,0.22); border-radius: 9px; background: rgba(93,210,166,0.05); font-size: 13.5px; color: #e8e5df; }
.cs-mx-f { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #5dd2a6; }
.cs-ck li svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #5dd2a6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* stage cards */
.cs-stages { background: #efeae1; padding: clamp(72px, 9vw, 120px) 0; }
.cs-stages .vs2-h2 { margin-bottom: 16px; }
.cs-sg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: st; }
.cs-sc { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(11,17,24,0.08); border-radius: 16px; padding: 22px 22px 24px; box-shadow: 0 30px 50px -40px rgba(11,17,24,0.35); }
.cs-sc::after { content: ''; position: absolute; top: 44px; inset-inline-end: -16px; width: 16px; height: 1px; background: rgba(11,17,24,0.2); }
.cs-sc:last-child::after { display: none; }
.cs-sn { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--vs-acc); background: rgba(201,123,61,0.12); }
.cs-sk { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-dim); }
.cs-sc h3 { margin: 8px 0 14px; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--vs-ink); }
.cs-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.cs-chips li { padding: 5px 10px; border-radius: 999px; background: #f4efe7; border: 1px solid rgba(11,17,24,0.08); font-size: 12.5px; line-height: 1.3; color: var(--vs-ink); }
.cs-codes { max-width: 60em; margin: clamp(28px, 3.5vw, 40px) auto 0; text-align: center; font-family: var(--font-mono); font-size: 11.5px; line-height: 2; color: var(--vs-mute); }
.cs-codes b { display: block; margin-bottom: 2px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-ink); }
.cs-codes span { display: inline-block; margin: 0 12px; white-space: nowrap; }

/* projects */
.cs-work { background: #f6f3ee; padding: clamp(72px, 9vw, 120px) 0; }
.cs-work .vs2-h2 { margin-bottom: 16px; }
.cs-nda { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; padding: 16px 20px; border: 1px dashed rgba(11,17,24,0.22); border-radius: 16px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--vs-mute); }
.cs-nda i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-family: var(--font-mono); font-size: 15px; color: var(--vs-acc); background: rgba(201,123,61,0.12); }
.cs-feat { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 10px; align-items: stretch; }
.cs-ft { padding: clamp(22px, 3vw, 38px); }
.cs-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(11,17,24,0.16); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-ink); }
.cs-tag.live { color: #1f7a5a; border-color: rgba(31,122,90,0.4); }
.cs-tag.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2f9e74; }
.cs-ft h3 { margin: 18px 0 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.025em; color: var(--vs-ink); }
.cs-ft h3 em, .cs-cc h3 em { font-style: normal; color: var(--vs-acc); }
.cs-ft p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--vs-mute); }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 24px; border-top: 1px solid var(--vs-line); }
.cs-facts div { padding: 11px 0; border-bottom: 1px solid var(--vs-line); }
.cs-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-dim); }
.cs-facts dd { margin: 4px 0 0; font-size: 14.5px; color: var(--vs-ink); }
.cs-fl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cs-ext { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vs-ink); text-decoration: underline; text-underline-offset: 4px; }
.cs-fv { display: flex; align-items: center; padding: 18px; min-height: 320px; }
.cs-fv svg { display: block; width: 100%; height: auto; }
.cs-cg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cs-cc { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid rgba(11,17,24,0.08); border-radius: 16px; text-decoration: none; color: var(--vs-ink); box-shadow: 0 30px 50px -40px rgba(11,17,24,0.35); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.cs-cc:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11,17,24,0.5); }
.cs-cc:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.cs-cv { margin: 8px 8px 0; padding: 12px; border-radius: 11px; background: #0d141c; }
.cs-cv svg { display: block; width: 100%; height: auto; }
.cs-cb { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.cs-cb .cs-tag { align-self: flex-start; }
.cs-cc h3 { color: var(--vs-ink); margin: 14px 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; }
.cs-cc p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--vs-mute); }
.cs-go { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vs-acc); }
.cs-all { display: flex; justify-content: center; margin-top: clamp(28px, 3.5vw, 40px); }

/* training band */
.cs-train { background: #efeae1; padding: clamp(60px, 7vw, 96px) 0; }
.cs-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.cs-tt { padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; justify-content: center; }
.cs-tt .cs-sk { color: var(--vs-acc); }
.cs-tt h2 { margin: 12px 0 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -0.025em; color: var(--vs-ink); text-wrap: balance; }
.cs-tt h2 em { font-style: normal; color: var(--vs-acc); }
.cs-tt p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--vs-mute); }
.cs-tt .btn { align-self: flex-start; }
.cs-tv { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(18px, 2.4vw, 28px); }
.cs-tv svg { display: block; width: 100%; height: auto; }
.cs-big { display: flex; align-items: baseline; gap: 12px; }
.cs-big b { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -0.03em; color: #e8e5df; }
.cs-big span { font-size: 15px; color: rgba(232,229,223,0.72); }
.tl-pulse { fill: none; stroke: #5dd2a6; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: csPulse 2.4s ease-out infinite; }
@keyframes csPulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.tl-run { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cs-tr.reveal:not(.in) .tl-run { stroke-dashoffset: 1; }
.cs-tr.reveal.in .tl-run { animation: csRun 1.8s var(--ease) 0.3s both; }
@keyframes csRun { from { stroke-dashoffset: 1; } }
.cs-tr.reveal.in .cs-aud li { animation: csIn 0.45s ease var(--d, 0s) both; }
.cs-aud { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.cs-aud li span { display: block; width: 20px; height: 20px; margin: 0 auto 6px; color: #e9a566; }
.cs-aud li span svg { display: block; width: 100%; height: 100%; }
.cs-aud li { padding: 10px 8px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; text-align: center; font-size: 13px; color: #e8e5df; background: rgba(255,255,255,0.03); }
.tl-ax { stroke: rgba(232,229,223,0.25); stroke-width: 1.2; }
.tl-tk { stroke: rgba(232,229,223,0.35); stroke-width: 1; }
.tl-run { stroke: #e9a566; stroke-width: 2.4; stroke-linecap: round; }
.tl-dot { fill: #e9a566; }
.tl-now { fill: #5dd2a6; }
.tl-t { font-family: var(--font-mono); font-size: 11px; fill: rgba(232,229,223,0.7); }
.tl-big { font-family: var(--font-display); font-size: 30px; font-weight: 500; fill: #e8e5df; letter-spacing: -0.02em; }

/* two doorways */
.vs2-dg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs2-dv .cb-dot { fill: #f6d2a6; filter: drop-shadow(0 0 3px rgba(246,210,166,0.9)); }

/* FAQ on paper */
.cs-faq { background: #fbfaf7; padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid rgba(11,17,24,0.05); }
.cs-fg { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cs-fg .vs2-h2 { text-align: start; margin: 0; }
.cs-faq .section-label { color: var(--vs-acc); }
.cs-faq .section-label::before { background: var(--vs-acc); }
.cs-faq .faq-item { border-top: 1px solid rgba(11,17,24,0.12); }
.cs-faq .faq-item:last-child { border-bottom: 1px solid rgba(11,17,24,0.12); }
.cs-faq summary { cursor: pointer; list-style: none; padding: 22px 2px; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.3; color: var(--vs-ink); }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after { content: '+'; flex: none; font-family: var(--font-mono); font-size: 20px; color: var(--vs-acc); }
.cs-faq .faq-item[open] summary::after { content: '\2013'; }
.cs-faq .faq-a { padding: 0 2px 24px; max-width: 46em; font-size: 16px; line-height: 1.7; color: var(--vs-mute); }

html[dir="rtl"] :is(.cs-sk, .cs-tag, .cs-facts dt, .cs-ext, .cs-go, .cs-codes b, .cs-cap span, .cs-mx-hd span) { letter-spacing: 0; }
html[dir="rtl"] :is(.cs-sk, .cs-facts dt) { font-size: 12px; }
html[dir="rtl"] .cs-sc::after { inset-inline-end: -16px; }
html[dir="rtl"] .cs-faq .faq-a { line-height: 1.9; }

@media (max-width: 1000px) {
  .cs-sg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-sc::after { display: none; }
  .cs-feat, .cs-tr { grid-template-columns: minmax(0, 1fr); }
  .cs-fv { min-height: 0; }
  .cs-cg { grid-template-columns: minmax(0, 1fr); }
  .vs2-dg.two { grid-template-columns: minmax(0, 1fr); }
  .cs-fg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cs-sg { grid-template-columns: minmax(0, 1fr); }
  .cs-win { height: 280px; }
  .cs-ck { gap: 6px; }
  .cs-ck li { gap: 7px; padding: 8px 8px; font-size: 12.5px; }
  .cs-ck li svg { width: 14px; height: 14px; }
  .cs-cap span:nth-child(n+3) { display: none; }
  .cs-tl .tl-t { font-size: 19px; }
  .cs-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-facts { grid-template-columns: minmax(0, 1fr); }
  .cs-mx-r { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 4px; }
  .cs-mx-hd span { font-size: 9.5px; letter-spacing: 0; }
  .cs-mx-r i { height: 28px; }
}
@media (max-width: 600px) {
  .vs2-chart svg :is(.sp-t, .sp-tk, .sp-tg, .sp-tb) { font-size: 15px; }
  .vs2-chart svg .sp-ts { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs2-dv .cb-dot, .tl-pulse { display: none; }
  .cs-win img { animation: none; }
  .cs-cc:hover { transform: none; }
}