/* Velar Bureau: rich case pages (Monolit, Steel Force, Eco Organic) — js/case-ind.js */
.ci { padding: var(--sec) var(--gx); background: var(--steel); color: var(--graphite); position: relative; }
.ci--dark { background: var(--graphite); color: var(--steel); }
.ci__h { font-weight: 500; font-size: clamp(2.4rem, min(5.4vw, 77.76px), 5.6rem); line-height: .95; letter-spacing: -.055em; margin: 0 0 clamp(32px, min(4vw, 57.6px), 64px); max-width: 16ch; }
.ci__h .mute { color: var(--mist); }
.ci--dark .ci__h .mute { color: #5C626D; }
.ci__k { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.ci__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.ci--dark .ci__k { color: var(--mist); }
.ci__note { margin-top: 18px; font-size: .82rem; color: var(--slate); }
.ci--dark .ci__note { color: #6B717C; }

/* case show: clean stage instead of a background photo */

/* ---------- hotspot showcase on the real screenshot ---------- */
.ci-shot { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: clamp(20px, min(3vw, 43.2px), 48px); align-items: center; }
.ci-shot__fig { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(14, 15, 17, .55); background: #fff; }
.ci-shot__fig img { display: block; width: 100%; height: auto; transition: transform 1.1s var(--ease); transform-origin: var(--ox, 50%) var(--oy, 50%); }
.ci-shot__fig.is-zoom img { transform: scale(1.35); }
.ci-hs { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 0; padding: 0; border-radius: 50%; background: rgba(14, 15, 17, .82); color: #fff; font: 600 .72rem/34px var(--fd); text-align: center; cursor: pointer; z-index: 2; transition: background .25s, transform .4s var(--ease), opacity .4s; }
.ci-hs::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(226, 73, 43, .7); opacity: 0; transform: scale(.7); }
.ci-hs.is-on { background: var(--signal); transform: scale(1.12); }
.ci-hs.is-on::after { animation: ciPing 1.6s var(--ease) infinite; }
.ci-shot__fig.is-zoom .ci-hs:not(.is-on) { opacity: 0; }
@keyframes ciPing { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.8); } }
.ci-notes { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.ci-notes li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--line); cursor: pointer; transition: opacity .35s; }
.ci--dark .ci-notes li { border-top-color: var(--line-d); }
.ci-notes li::before { counter-increment: n; content: counter(n, decimal-leading-zero); grid-row: 1 / 3; font: 600 .78rem/1.9 var(--fd); color: var(--mist); }
.ci-notes b { font-weight: 500; font-size: 1.12rem; letter-spacing: -.02em; }
.ci-notes span { grid-column: 2; color: var(--slate); font-size: .95rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s; }
.ci--dark .ci-notes span { color: var(--mist); }
.ci-notes li.is-on::before { color: var(--signal); }
.ci-notes li.is-on span { max-height: 120px; opacity: 1; }
.ci-notes:hover li:not(:hover):not(.is-on) { opacity: .55; }

/* ---------- generic picker chips ---------- */
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chips button { font: 500 .95rem var(--f); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-d); background: transparent; color: inherit; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.ci:not(.ci--dark) .ci-chips button { border-color: var(--line); }
.ci-chips button:hover { border-color: var(--signal); }
.ci-chips button.is-on { background: var(--signal); border-color: var(--signal); color: var(--graphite); }

/* ---------- Monolit: concrete classes ---------- */
.mc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, min(4vw, 57.6px), 72px); align-items: stretch; }
.mc__big { position: relative; padding: clamp(24px, min(3vw, 43.2px), 44px); border-radius: 28px; background: radial-gradient(70% 80% at 80% 20%, rgba(226, 73, 43, .2), transparent 70%), #17191C; overflow: hidden; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; }
.mc__cls { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(4rem, min(11vw, 158.4px), 10rem); line-height: .85; letter-spacing: -.05em; }
.mc__cls em { font-style: normal; color: var(--signal); }
.mc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.mc__row div { display: grid; gap: 4px; }
.mc__row dt { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.mc__row dd { margin: 0; font-family: var(--fd); font-size: clamp(1.6rem, min(2.6vw, 37.44px), 2.4rem); font-weight: 600; letter-spacing: -.03em; }
.mc__bar { position: relative; height: 10px; border-radius: 99px; background: rgba(227, 231, 237, .08); margin-top: 26px; overflow: hidden; }
.mc__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 30%); border-radius: inherit; background: linear-gradient(90deg, #6B717C, var(--signal)); transition: width .8s var(--ease); }
.mc__use { margin-top: 22px; font-size: 1.1rem; max-width: 40ch; color: var(--steel); min-height: 3.4em; }
.mc__side { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.mc__cube { position: absolute; right: clamp(20px, min(3vw, 43.2px), 44px); bottom: clamp(20px, min(3vw, 43.2px), 44px); width: clamp(80px, min(9vw, 129.6px), 120px); opacity: .9; }
.mc__use { padding-right: 130px; }

/* ---------- Monolit: order path + mixer calc ---------- */
.mo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mo__s { position: relative; padding: 24px; border-radius: 22px; background: #EEF1F4; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; transition: background .4s, color .4s, transform .5s var(--ease); }
.mo__s b { font-weight: 500; font-size: 1.35rem; letter-spacing: -.03em; }
.mo__s span { color: var(--slate); font-size: .92rem; }
.mo__s i { font: 600 .74rem var(--fd); color: var(--mist); font-style: normal; }
.mo__s.is-on { background: var(--graphite); color: var(--steel); transform: translateY(-6px); }
.mo__s.is-on span { color: var(--mist); }
.mo__s.is-on i { color: var(--signal); }
.mo__s.is-done i { color: var(--signal); }
.mo__line { position: relative; height: 2px; background: var(--line); margin: 22px 0 8px; border-radius: 2px; }
.mo__line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--signal); transition: width .9s var(--ease); }
.mx { margin-top: clamp(28px, min(4vw, 57.6px), 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: center; padding: clamp(22px, min(3vw, 43.2px), 40px); border-radius: 28px; background: #fff; }
.mx__v { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(3rem, min(7vw, 100.8px), 6rem); line-height: .9; letter-spacing: -.05em; }
.mx__v small { font-size: .32em; letter-spacing: 0; color: var(--slate); margin-left: 6px; }
.mx input[type=range] { width: 100%; margin-top: 20px; accent-color: var(--signal); }
.mx__trucks { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; min-height: 72px; }
.mx__trucks svg { width: 74px; height: 44px; animation: mxIn .5s var(--ease) both; }
@keyframes mxIn { from { opacity: 0; transform: translateX(-16px); } }
.mx__cap { margin-top: 12px; font-size: 1.05rem; }
.mx__cap b { color: var(--signal); }

/* ---------- Monolit: delivery zones ---------- */
.mz { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, min(4vw, 57.6px), 72px); align-items: center; }
.mz__map { position: relative; aspect-ratio: 1; max-width: 640px; width: 100%; justify-self: center; }
.mz__map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mz__ring { fill: rgba(226, 73, 43, .05); stroke: rgba(227, 231, 237, .22); stroke-dasharray: 3 6; transition: fill .4s, stroke .4s; }
.mz__ring.is-on { fill: rgba(226, 73, 43, .16); stroke: var(--signal); stroke-dasharray: none; }
.mz__dot { fill: var(--steel); }
.mz__truck { fill: var(--signal); }
.mz__list { list-style: none; margin: 0; padding: 0; }
.mz__list li { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line-d); cursor: pointer; transition: padding .4s var(--ease), color .3s; }
.mz__list li b { font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; }
.mz__list li span { color: var(--mist); }
.mz__list li.is-on { padding-left: 14px; color: var(--signal); }
.mz__list li.is-on span { color: var(--steel); }

/* ---------- Steel Force: diameters ---------- */
.sd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, min(4vw, 57.6px), 72px); align-items: center; }
.sd__sec { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(226, 73, 43, .14), transparent 65%); }
.sd__sec svg { width: 100%; height: 100%; overflow: visible; }
.sd__d { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(4rem, min(10vw, 144px), 9rem); line-height: .85; letter-spacing: -.05em; }
.sd__d em { font-style: normal; color: var(--signal); font-size: .5em; vertical-align: top; margin-right: 4px; }
.sd__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 28px 0; }
.sd__stats div { padding: 18px; border-radius: 18px; background: #17191C; display: grid; gap: 6px; }
.sd__stats dt { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.sd__stats dd { margin: 0; font-family: var(--fd); font-weight: 600; font-size: clamp(1.4rem, min(2.4vw, 34.56px), 2.1rem); letter-spacing: -.03em; }
.sd__stats dd small { font-size: .5em; color: var(--mist); margin-left: 4px; font-weight: 500; }

/* ---------- Steel Force: bending shapes ---------- */
.sb { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 8px; }
.sb__tabs { display: flex; flex-direction: column; gap: 6px; }
.sb__tabs button { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; border: 0; background: #EEF1F4; font: 500 1.05rem var(--f); color: var(--graphite); cursor: pointer; text-align: left; transition: background .25s, color .25s; }
.sb__tabs button svg { width: 38px; height: 26px; flex: none; }
.sb__tabs button.is-on { background: var(--graphite); color: var(--steel); }
.sb__stage { position: relative; border-radius: 28px; background: radial-gradient(circle, rgba(14, 15, 17, .12) 1px, transparent 1.5px) 0 0 / 22px 22px, #fff; min-height: 460px; display: grid; place-items: center; overflow: hidden; }
.sb__stage svg { width: min(86%, 620px); height: auto; overflow: visible; }
.sb__bar { fill: none; stroke: var(--graphite); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.sb__rib { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 10; stroke-dasharray: 1.5 6; stroke-linecap: butt; stroke-linejoin: round; }
.sb__dim { fill: none; stroke: var(--signal); stroke-width: 1.2; }
.sb__dt { font: 600 13px var(--fd); fill: var(--signal); }
.sb__info { position: absolute; left: 24px; bottom: 22px; right: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .95rem; color: var(--slate); }
.sb__info b { color: var(--graphite); font-weight: 600; }

/* ---------- Steel Force: grades ---------- */
.sg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sg2__c { padding: clamp(24px, min(3vw, 43.2px), 40px); border-radius: 28px; background: #17191C; display: flex; flex-direction: column; gap: 22px; }
.sg2__c h3 { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: clamp(2.6rem, min(5vw, 72px), 4.4rem); letter-spacing: -.04em; line-height: .9; margin: 0; }
.sg2__c h3 em { font-style: normal; color: var(--signal); }
.sg2__m { display: grid; gap: 8px; }
.sg2__m div { display: flex; justify-content: space-between; font-size: .92rem; color: var(--mist); }
.sg2__m div b { color: var(--steel); font-weight: 500; }
.sg2__t { height: 8px; border-radius: 99px; background: rgba(227, 231, 237, .08); overflow: hidden; }
.sg2__t i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6B717C, var(--signal)); transition: width 1.2s var(--ease); }
.sg2.is-in .sg2__t i { width: var(--w); }

/* ---------- Steel Force: languages + photo ---------- */
.sl__h { font-family: var(--fd); font-weight: 800; font-size: clamp(2.6rem, min(7vw, 100.8px), 7rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; margin: 28px 0 0; min-height: 2.1em; }
.sl__h em { font-style: normal; color: #1F3E8C; }
.sl__h .ch { display: inline-block; animation: slCh .5s var(--ease) both; }
@keyframes slCh { from { opacity: 0; transform: translateY(.3em); filter: blur(6px); } }
.ci-photo { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 8; }
.ci-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.ci-photo.is-in img { transform: scale(1); }
.ci-photo figcaption { position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: .9rem; }

/* ---------- Eco Organic: real brand ---------- */
:root { --eo: #E74B18; --eo-r: #B51023; }
.ci--eo { background: var(--eo); color: #fff; overflow: hidden; }
.ci--eo .ci__h .mute { color: rgba(255, 255, 255, .55); }
.ci--eo .ci__k { color: rgba(255, 255, 255, .8); }
.ci--eo .ci__k::before { background: #fff; }
.ci--eo .ci-notes li { border-top-color: rgba(255, 255, 255, .25); }
.ci--eo .ci-notes li::before { color: rgba(255, 255, 255, .6); }
.ci--eo .ci-notes li.is-on::before { color: #fff; }
.ci--eo .ci-notes span { color: rgba(255, 255, 255, .85); }
.ci--eo .ci-hs { background: rgba(255, 255, 255, .92); color: var(--eo); }
.ci--eo .ci-hs.is-on { background: var(--graphite); color: #fff; }
.ci--eo .ci-hs::after { border-color: #fff; }
.ci--eo .ci-shot__fig { box-shadow: 0 50px 90px -40px rgba(80, 20, 0, .6); }

.et { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, min(4vw, 57.6px), 72px); align-items: center; }
.et__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.et__t { position: relative; aspect-ratio: 1; border-radius: 16%; border: 2px solid rgba(255, 255, 255, .9); display: grid; place-items: center; font: 800 clamp(1.4rem, min(3vw, 43.2px), 2.6rem) var(--fd); color: #fff; background: transparent; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease); }
.et__t small { position: absolute; left: 10%; top: 8%; font: 600 .7rem var(--fd); opacity: .8; }
.et__t:hover, .et__t.is-on { background: #fff; color: var(--eo); transform: translateY(-4px); }
.et__t.is-core::after { content: ""; position: absolute; right: 10%; top: 10%; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.et__t.is-core.is-on::after, .et__t.is-core:hover::after { background: var(--eo); }
.et__big { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; border-radius: 16%; background: #fff; color: var(--eo); display: flex; flex-direction: column; justify-content: space-between; padding: 9%; box-shadow: 0 50px 80px -40px rgba(80, 20, 0, .55); }
.et__big b { font: 800 clamp(6rem, min(16vw, 230.4px), 12rem)/.8 var(--fd); letter-spacing: -.04em; }
.et__big .et__no { font: 700 1.4rem var(--fd); }
.et__big .et__nm { font-size: 1.2rem; font-weight: 500; color: var(--graphite); }
.et__big .et__rl { font-size: .9rem; color: var(--slate); }

.ep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ep__c { aspect-ratio: 3 / 4; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #fff; }
.ep__c b { font-weight: 500; font-size: 1.2rem; }
.ep__c span { font: 500 .85rem var(--fd); opacity: .8; letter-spacing: .04em; }
.ep__c--l { color: var(--graphite); box-shadow: inset 0 0 0 1px var(--line); }
.ety { margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
.ety > div { border-radius: 24px; background: #fff; padding: clamp(22px, min(3vw, 43.2px), 40px); }
.ety__a { font: 800 clamp(3rem, min(7vw, 100.8px), 6.4rem)/.9 var(--fd); text-transform: uppercase; letter-spacing: -.02em; color: var(--graphite); }
.ety__a span { display: block; clip-path: inset(0 0 58% 0); margin-bottom: -.5em; }
.ety__b { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.ety__b b { font: 800 clamp(3.6rem, min(8vw, 115.2px), 7rem)/.8 var(--fd); color: var(--eo-r); letter-spacing: .02em; }

.eg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eg figure { margin: 0; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: #fff; }
.eg figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--p, 50% 50%); transform: scale(var(--s, 1)); transform-origin: var(--p, 50% 50%); transition: transform 1.2s var(--ease); }
.eg figure:hover img { transform: scale(calc(var(--s, 1) * 1.06)); }
.eg figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .85rem; color: var(--graphite); }

@media (max-width: 1000px) {
  .ci-shot, .mc, .mz, .sd, .sb, .et, .ety, .mx { grid-template-columns: minmax(0, 1fr); }
  .mo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sb__tabs button { flex: none; }
  .ci-notes span { max-height: 120px; opacity: 1; }
  .ci-notes li:not(.is-on) span { max-height: 0; opacity: 0; }
}
@media (max-width: 640px) {
  .mo, .sg2, .eg { grid-template-columns: minmax(0, 1fr); }
  .mo__s { min-height: 0; gap: 18px; }
  .sd__stats { grid-template-columns: minmax(0, 1fr); }
  .ci-hs { width: 26px; height: 26px; margin: -13px 0 0 -13px; line-height: 26px; font-size: .64rem; }
  .ci-photo { aspect-ratio: 4 / 3; }
  .sb__stage { min-height: 340px; }
  .eg figure { aspect-ratio: 4 / 3; }
}

/* the screenshot lives in the hotspot block, so the show block keeps only the steps */
.ci-shot--tall .ci-shot__fig { max-width: 560px; justify-self: center; }

.case__bg--soft { filter: grayscale(1) brightness(.42) blur(6px) !important; }