
.sv-frame { position: relative; display: block; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); container-type: inline-size; }
.sv-tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: .22rem .5rem; border-radius: 2px; background: rgba(5, 5, 5, .62); font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.sv-crumbs { font-size: var(--fs-small); color: rgba(245, 245, 242, .62); }
.sv-crumbs ol { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.sv-crumbs li + li::before { content: "/"; margin-inline-end: .6rem; color: rgba(245, 245, 242, .35); }
.sv-crumbs a:hover { color: var(--c-paper); }
.sv-crumbs__here { color: var(--c-paper); }
.sd-h2 { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }

.steps-x { display: grid; list-style: none; }
.step-x { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 2rem; align-items: baseline; padding: 1.8rem 0; border-top: 1px solid var(--c-line); }
.step-x:last-child { border-bottom: 1px solid var(--c-line); }
.step-x__num { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-red); }
.step-x__name { font-size: clamp(2rem, 4.2vw, 5rem); font-weight: 800; font-stretch: 75%; line-height: .9; text-transform: uppercase; }
.step-x__desc { max-width: 30rem; color: var(--c-grey); }
.steps-x--row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--col-gap); }
.steps-x--row .step-x { display: block; padding: 1.2rem 0 0; border-bottom: 0; }
.steps-x--row .step-x::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 34%; height: 2px; background: var(--c-red); }
.steps-x--row .step-x__name { margin-top: .6rem; font-size: min(1.75vw, 2.2rem); }
.steps-x--row .step-x__desc { margin-top: .6rem; font-size: var(--fs-small); }

.fmts { display: flex; align-items: flex-end; gap: var(--col-gap); height: min(42vh, calc((100vw - var(--rail) - 2 * var(--gutter) - 3 * var(--col-gap)) / 4.3 + 3.2rem)); }
.fmt { margin: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.fmt__frame { position: relative; display: block; height: calc(100% - 3.2rem); aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); outline: 1px solid rgba(245, 245, 242, .12); outline-offset: -1px; }
.fmt figcaption { display: grid; gap: .1rem; height: 3.2rem; padding-top: .7rem; font-size: var(--fs-small); color: var(--c-grey); }
.fmt figcaption b { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; color: var(--c-red); font-variant-numeric: tabular-nums; }
.plats { display: flex; flex-wrap: wrap; gap: .2rem 0; margin-top: 3.4rem; }
.plats li { font-size: clamp(1.8rem, 4.4vw, 5.2rem); font-weight: 800; font-stretch: 75%; line-height: 1; text-transform: uppercase; color: rgba(245, 245, 242, .9); }
.plats li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(245, 245, 242, .45); }
.plats li:not(:last-child)::after { content: "/"; margin-inline: .35em; color: var(--c-red); -webkit-text-stroke: 0; }

.sv-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 12vh; padding-bottom: 10vh; }
.sv-faq__title { grid-column: 1 / span 4; font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.sv-faq__list { grid-column: 5 / span 8; }
.sv-faq details { border-top: 1px solid var(--c-line); }
.sv-faq details:last-child { border-bottom: 1px solid var(--c-line); }
.sv-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; padding: 1.2rem 0; font-size: clamp(1.05rem, 1.35vw, 1.35rem); font-weight: 600; font-stretch: 92%; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: .35em; background: linear-gradient(var(--c-red), var(--c-red)) center / 100% 1.5px no-repeat, linear-gradient(var(--c-red), var(--c-red)) center / 1.5px 100% no-repeat; transition: transform .5s var(--ease-out); }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { padding: 0 0 1.4rem; max-width: 42rem; color: rgba(245, 245, 242, .72); }

.sv-hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); min-height: 100vh; min-height: 100svh;
  padding-inline-start: calc(var(--rail) + var(--gutter)); overflow: hidden; }
.sv-hero__text { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 7rem; padding-bottom: 8vh; }
.sv-hero__title { margin-top: 1.6rem; font-size: min(8.4vw, 14vh); text-shadow: 0 12px 60px rgba(0, 0, 0, .6); }
.sv-hero__title .line { width: max-content; max-width: 100%; }
.sv-hero__lead { margin-top: 2rem; max-width: 33rem; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.3; color: rgba(245, 245, 242, .84); }
.sv-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.sv-hero__media { grid-column: 7 / -1; grid-row: 1; position: relative; min-height: 100%; }
.sv-hero__main { position: absolute !important; inset: 12vh 0 0 6%; aspect-ratio: auto !important; border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: 0; }
.sv-hero__main .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .7), rgba(5, 5, 5, 0) 45%), linear-gradient(0deg, rgba(5, 5, 5, .6), transparent 40%); }
.sv-hero__vert { position: absolute !important; width: 22%; inset-inline-start: -6%; bottom: 10vh; z-index: 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); outline: 1px solid rgba(245, 245, 242, .14); outline-offset: -1px; }
.sv-hero__wide { position: absolute !important; width: 36%; inset-inline-end: var(--gutter); top: 6.4vh; z-index: 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); outline: 1px solid rgba(245, 245, 242, .14); outline-offset: -1px; }
.sv-hero__ruler { position: absolute; top: calc(12vh - 20px); inset-inline: 6% 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .4) 0 1px, transparent 1px 12px); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.sv-hero__tc { position: absolute; z-index: 3; inset-inline-end: var(--gutter); bottom: 3.4vh; font-size: var(--fs-micro); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; }

.sv-who { position: relative; min-height: 88vh; display: grid; grid-template-columns: 58% 42%; align-items: center; overflow: clip; padding: 6vh 0; }
.sv-who__text { position: relative; z-index: 2; grid-column: 1; grid-row: 1; padding: 0 0 0 calc(var(--rail) + var(--gutter)); }
.sv-who__title { font-size: clamp(2.4rem, 4.25vw, 4.8rem); white-space: nowrap; width: max-content; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.sv-who__title .line { width: max-content; }
.sv-who__title-last { display: block; position: relative; margin-inline-start: 0; }
.sv-who__lead { margin-top: 1.6rem; max-width: 26rem; font-size: clamp(1.1rem, 1.3vw, 1.35rem); font-weight: 500; font-stretch: 92%; line-height: 1.35; }
.sv-who__text2 { margin-top: .9rem; max-width: 26rem; color: var(--c-grey); }
.sv-who .link-more { margin-top: 1.8rem; }
.sv-who__pt { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: stretch; min-height: 76vh; margin: 0 var(--gutter) 0 -6vw; border-radius: var(--radius-media); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 100%); }
.sv-who__pt .pt { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.sv-who__pt .pt > img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 49% 30%; transform: translateX(6%) scale(1.5); transform-origin: 49% 30%; }
.sv-who__pt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5, 5, 5, .55), transparent 40%); }

.svx { padding-top: 14vh; }
.svx__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: 6vh; }
.svx__title { grid-column: 1 / span 5; font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.svx__lead { grid-column: 7 / span 6; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.3; color: rgba(245, 245, 242, .84); }
.svx__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.svx__list { grid-column: 1 / span 6; }
.svc { container-type: inline-size; min-height: 86vh; padding: 5vh 0 8vh; border-top: 1px solid var(--c-line); opacity: .34; transition: opacity .6s var(--ease-out); }
.svc.is-active { opacity: 1; }
.svc__media { display: none; }
.svc__num { display: flex; gap: 1.2rem; align-items: baseline; font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-red); }
.svc__tc { font-size: var(--fs-micro); color: var(--c-grey-dark); }
.svc__name { margin-top: 1.2rem; font-size: min(calc(var(--fit, 12) * 1cqi), 5.8rem); }
.svc__short { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1.1rem, 1.35vw, 1.35rem); font-weight: 500; font-stretch: 92%; line-height: 1.35; }
.svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; margin-top: 2.2rem; max-width: 40rem; }
.svc__label { margin-bottom: .6rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); }
.svc__inc { display: grid; gap: .3rem; font-size: var(--fs-small); }
.svc__inc li::before { content: ""; display: inline-block; width: 6px; height: 7px; margin-inline-end: .6rem; background: var(--c-red); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.svc__needs { font-size: var(--fs-small); color: var(--c-grey); line-height: 1.6; }
.svc .link-more { margin-top: 2.2rem; }
.svx__also { padding: 2rem 0 0; border-top: 1px solid var(--c-line); max-width: 36rem; font-size: var(--fs-small); color: var(--c-grey); }
.svx__stage { grid-column: 8 / -1; grid-row: 1; position: sticky; top: 12vh; height: 76vh; align-self: start; display: flex; gap: 1rem; }
.svx__frame { position: relative; flex: 1; overflow: hidden; border-radius: var(--radius-media); background: var(--c-ink); }
.svx__layer { position: absolute; inset: 0; opacity: 0; clip-path: inset(0 0 0 0); transition: opacity .8s var(--ease-out); }
.svx__layer .sv-frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.svx__layer .media { transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.svx__layer.is-on { opacity: 1; }
.svx__layer.is-on .media { transform: none; }
.svx__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 5, 5, .78), rgba(5, 5, 5, 0) 45%); }
.svx__bignum { position: absolute; z-index: 2; inset-inline-start: 1.4rem; bottom: 2.6rem; font-size: clamp(5rem, 10vw, 11rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(245, 245, 242, .85); }
.svx__ref { position: absolute; z-index: 2; inset-inline-end: 1.4rem; bottom: 1.2rem; max-width: 60%; text-align: end; font-size: var(--fs-micro); font-weight: 600; color: rgba(245, 245, 242, .75); }
.svx__ticks { display: flex; flex-direction: column; justify-content: space-between; width: 10px; padding-block: 1rem; }
.svx__ticks li { width: 10px; height: 1px; background: rgba(245, 245, 242, .3); transition: width .4s, background-color .4s; }
.svx__ticks li.is-on { width: 10px; height: 3px; background: var(--c-red); }

.sv-process { padding-top: 18vh; padding-bottom: 12vh; }
.sv-process__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.sv-process__title { grid-column: 1 / span 8; font-size: clamp(2.4rem, 5vw, 6.2rem); }
.sv-process__lead { grid-column: 9 / span 4; color: rgba(245, 245, 242, .72); padding-bottom: .4rem; }
.chain { position: relative; margin-top: 8vh; margin-bottom: 7vh; }
.chain__ticks { display: flex; position: relative; border-top: 1px solid var(--c-line-strong); }
.chain__ticks::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 10px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .3) 0 1px, transparent 1px 12px); }
.chain__ticks li { flex: 1 1 0; min-width: 0; position: relative; padding-top: 1.6rem; padding-inline-end: .6rem; }
.chain__ticks li::before { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--c-black); border: 1.5px solid var(--c-red); }
.chain__ticks span { display: block; font-size: var(--fs-small); font-weight: 600; line-height: 1.25; }
.chain__fill { position: absolute; top: -1px; inset-inline-start: 0; height: 2px; width: 100%; background: var(--c-red); transform-origin: left; transform: scaleX(1); z-index: 1; }
.has-motion .chain__fill { transform: scaleX(0); }

.sv-formats { padding-top: 14vh; padding-bottom: 12vh; }
.sv-formats__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: 6vh; }
.sv-formats__title { grid-column: 1 / span 7; font-size: clamp(2.4rem, 5vw, 6.2rem); }
.sv-formats__lead { grid-column: 9 / span 4; color: rgba(245, 245, 242, .72); }

.sv-value { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 14vh; padding-bottom: 12vh; }
.sv-value__head { grid-column: 1 / span 4; position: sticky; top: 16vh; align-self: start; }
.sv-value__title { font-size: var(--fs-sub); font-weight: 700; font-stretch: 88%; }
.sv-value__lead { margin-top: 1.4rem; font-size: var(--fs-small); color: var(--c-grey); }
.sv-value__support { display: grid; gap: .4rem; margin-top: .8rem; font-size: var(--fs-small); }
.sv-value__support li::before { content: "– "; color: var(--c-red); }
.val { grid-column: 6 / -1; }
.val__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: 1rem 2rem; align-items: end; padding: 1.3rem 0; border-top: 1px solid var(--c-line); }
.val__word { font-size: clamp(2.2rem, 4.4vw, 5.6rem); line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(245, 245, 242, .5); transition: color .5s, -webkit-text-stroke-color .5s; }
.val__item:hover .val__word, .val__item.is-in .val__word { color: var(--c-paper); -webkit-text-stroke-color: transparent; }
.val__item p { font-size: var(--fs-small); color: var(--c-grey); padding-bottom: .5rem; }
.val-plus { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: 4vh; }
.val-plus li { padding-top: 1rem; border-top: 1px solid var(--c-red); }
.val-plus h3 { font-size: clamp(1.4rem, 2vw, 2.2rem); font-weight: 800; font-stretch: 75%; text-transform: uppercase; }
.val-plus p { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-grey); }

.sv-extra { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 10vh; padding-bottom: 8vh; border-top: 1px solid var(--c-line); }
.sv-extra__head { grid-column: 1 / span 4; }
.sv-extra__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); }
.sv-extra__title { margin-top: .9rem; font-size: clamp(1.3rem, 1.8vw, 1.9rem); font-weight: 700; font-stretch: 88%; line-height: 1.2; }
.sv-extra__lead { margin-top: 1rem; font-size: var(--fs-small); color: var(--c-grey); }
.sv-extra .link-more { margin-top: 1.4rem; }
.cxs { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--col-gap); align-content: start; }
.cx-cards { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-bottom: 3rem; }
.cx-card { display: block; }
.cx-card__frame { position: relative; display: block; aspect-ratio: var(--ar, 16 / 10); border-radius: var(--radius-media); overflow: hidden; background: var(--c-ink); }
.cx-card__frame .media { transition: transform 1s var(--ease-out); }
.cx-card:hover .cx-card__frame .media { transform: scale(1.05); }
.cx-card__meta { display: block; margin-top: 1rem; }
.cx-card__meta h3 { font-size: 1.15rem; font-weight: 700; font-stretch: 88%; }
.cx-card__meta span { display: block; margin-top: .3rem; font-size: var(--fs-small); color: var(--c-grey); }
.cx { padding: 1.1rem 0; border-top: 1px solid var(--c-line); }
.cx__name { font-size: 1.05rem; font-weight: 700; font-stretch: 88%; }
.cx__items { margin-top: .35rem; font-size: var(--fs-small); color: var(--c-grey); }

.sd-further { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 8vh; padding-bottom: 4vh; }
.sd-further .sd-h2 { grid-column: 1 / span 4; }
.sd-further__lead { grid-column: 5 / span 5; color: var(--c-grey); }
.sd-further__list { grid-column: 5 / span 5; margin-top: 1.4rem; }
.sd-further__list a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-top: 1px solid var(--c-line); font-size: 1.05rem; font-weight: 600; transition: padding .4s var(--ease-out); }
.sd-further__list li:last-child a { border-bottom: 1px solid var(--c-line); }
.sd-further__list svg { width: 8px; height: 10px; fill: var(--c-red); }
.sd-further__list a:hover { padding-inline-start: .6rem; }

.sv-cta { position: relative; min-height: 96vh; display: grid; align-items: center; overflow: hidden; padding: 16vh 0; }
.sv-cta__bg { position: absolute; inset: 0; opacity: .22; }
.sv-cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, rgba(5, 5, 5, .3), var(--c-black) 88%); }
.sv-cta__bar { position: absolute; inset-inline: 0; height: 10vh; background: #000; z-index: 2; }
.sv-cta__bar--top { top: 0; transform-origin: top; } .sv-cta__bar--bottom { bottom: 0; transform-origin: bottom; }
.sv-cta__inner { position: relative; z-index: 3; }
.sv-cta__title { font-size: clamp(3rem, 11vw, 13rem); }
.sv-cta__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; margin-top: 5vh; }
.sv-cta__row p { max-width: 26rem; color: rgba(245, 245, 242, .78); }
.sv-cta__btns { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.sd-hero { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); min-height: 100vh; min-height: 100svh;
  padding-inline-start: calc(var(--rail) + var(--gutter)); overflow: hidden; }
.sd-hero__text { grid-column: 1 / span 6; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 7rem; padding-bottom: 8vh; container-type: inline-size; }
.sd-hero__cat { display: flex; align-items: center; margin-top: 2.4rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-red); }
.sd-hero__title { margin-top: 1rem; font-size: min(calc(var(--fit, 12) * 1cqi), 9rem, 13vh); text-shadow: 0 12px 60px rgba(0, 0, 0, .6); }
.sd-hero__lead { margin-top: 1.6rem; max-width: 32rem; font-size: var(--fs-sub); font-weight: 500; font-stretch: 92%; line-height: 1.3; color: rgba(245, 245, 242, .84); }
.sd-hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.sd-hero__media { grid-column: 7 / -1; grid-row: 1; position: relative; }
.sd-hero__main { position: absolute !important; inset: 0 0 0 0; aspect-ratio: auto !important; border-radius: 0; }
.sd-hero__main .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .85), rgba(5, 5, 5, 0) 35%), linear-gradient(0deg, rgba(5, 5, 5, .55), transparent 35%); }
.sd-hero__sec { position: absolute !important; z-index: 3; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); outline: 1px solid rgba(245, 245, 242, .14); outline-offset: -1px; }
.sd-hero__sec--1 { width: 38%; inset-inline-end: var(--gutter); top: 16vh; }
.sd-hero__sec--2 { width: 18%; inset-inline-start: -8%; bottom: 12vh; }
.sd-hero__ref { position: absolute; z-index: 3; inset-inline-end: var(--gutter); bottom: 4vh; display: flex; align-items: center; font-size: var(--fs-micro); font-weight: 600; color: rgba(245, 245, 242, .8); }

.sd-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 14vh; padding-bottom: 8vh; }
.sd-intro__lead { grid-column: 1 / span 8; font-size: clamp(1.6rem, 3vw, 3.2rem); font-weight: 600; font-stretch: 88%; line-height: 1.12; }
.sd-intro__text { grid-column: 7 / span 5; margin-top: 3rem; color: rgba(245, 245, 242, .72); }
.sd-types { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.6rem; }
.sd-types li { padding: .42rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-size: var(--fs-small); font-weight: 600; }

.sd-needs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 8vh; padding-bottom: 8vh; }
.sd-needs .sd-h2 { grid-column: 1 / span 4; }
.sd-needs__list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); counter-reset: n; }
.sd-needs__list li { display: flex; gap: 1rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--c-line); font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 600; font-stretch: 92%; }
.sd-needs__list span { font-size: var(--fs-micro); font-weight: 700; color: var(--c-red); font-variant-numeric: tabular-nums; }

.sd-for { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 6vh; padding-bottom: 10vh; }
.sd-for .sd-h2 { grid-column: 1 / span 4; }
.sd-for__list { grid-column: 5 / -1; display: flex; flex-wrap: wrap; gap: .3rem 0; }
.sd-for__list li { font-size: clamp(1.2rem, 2vw, 2.1rem); font-weight: 700; font-stretch: 82%; line-height: 1.25; color: rgba(245, 245, 242, .9); }
.sd-for__list li:not(:last-child)::after { content: "/"; margin-inline: .5em; color: var(--c-red); font-weight: 400; }

.sd-inc { padding-top: 12vh; padding-bottom: 10vh; }
.sd-inc__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: 6vh; }
.sd-inc__title { grid-column: 1 / span 8; font-size: clamp(2.4rem, 5vw, 6.2rem); }
.sd-inc__lead { grid-column: 9 / span 4; color: rgba(245, 245, 242, .72); }
.tl { position: relative; padding-top: 26px; }
.tl__ruler { position: absolute; top: 0; inset-inline: 3.2rem 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .4) 0 1px, transparent 1px 10vw) bottom / 100% 12px no-repeat, repeating-linear-gradient(90deg, rgba(245, 245, 242, .16) 0 1px, transparent 1px 1vw) bottom / 100% 6px no-repeat; }
.tl__track { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: stretch; margin-top: 8px; }
.tl__lbl { display: grid; place-items: center start; font-size: .64rem; font-weight: 700; color: var(--c-grey-dark); }
.tl__clips { display: flex; gap: 6px; }
.tl__clip { flex: var(--g, 2) 1 0; min-width: 0; min-height: 64px; display: flex; align-items: flex-end; padding: .7rem .8rem; border-radius: 4px; background: linear-gradient(180deg, rgba(217, 14, 67, .38), rgba(74, 0, 24, .7)); outline: 1px solid rgba(245, 245, 242, .1); outline-offset: -1px; transition: background-color .4s, transform .5s var(--ease-out); }
.tl__track:nth-child(3) .tl__clip { background: linear-gradient(180deg, rgba(245, 245, 242, .12), rgba(245, 245, 242, .05)); }
.tl__track:nth-child(4) .tl__clip { background: repeating-linear-gradient(90deg, rgba(154, 154, 161, .18) 0 2px, transparent 2px 5px), rgba(20, 20, 22, .9); }
.tl__clip span { font-size: var(--fs-small); font-weight: 600; line-height: 1.2; }
.tl__clip:hover { background: var(--c-red); transform: translateY(-3px); }
.tl__head { position: absolute; top: 0; bottom: 0; inset-inline-start: 3.2rem; width: 1px; background: var(--c-red); z-index: 2; }
.tl__head::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 13px; height: 10px; background: var(--c-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.sd-process { padding-top: 10vh; padding-bottom: 10vh; }
.sd-process .sd-h2 { margin-bottom: 3rem; }
.sd-formats { padding-top: 10vh; padding-bottom: 8vh; }
.sd-formats__head { margin-bottom: 3rem; }
.sd-related { padding-top: 12vh; padding-bottom: 6vh; }
.sd-related__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2.4rem; }
.rel--4 .rel__item { grid-column: span 3; }
.rel--4 .rel__item:nth-child(2) { margin-top: 6vh; }
.rel--4 .rel__item:nth-child(3) { margin-top: 12vh; }
.rel--4 .rel__item:nth-child(4) { margin-top: 3vh; }

.oth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 14vh; padding-bottom: 12vh; }
.oth__next { grid-column: 1 / span 7; }
.oth__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-red); }
.oth__big { display: block; margin-top: 1rem; font-size: clamp(2.6rem, 5.6vw, 7rem); transition: color .4s; }
.oth__big:hover { color: var(--c-red); }
.oth > div:last-child { grid-column: 9 / -1; }
.oth .sd-h2 { font-size: var(--fs-small); margin-bottom: 1rem; }
.oth__link { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1rem; gap: .8rem; align-items: center; min-height: 52px; padding: .6rem 0; border-top: 1px solid var(--c-line); font-weight: 600; transition: padding .4s var(--ease-out); }
.oth__list li:last-child .oth__link { border-bottom: 1px solid var(--c-line); }
.oth__num { font-size: var(--fs-micro); font-weight: 700; color: var(--c-grey-dark); font-variant-numeric: tabular-nums; }
.oth__go svg { width: 8px; height: 10px; fill: var(--c-red); }
.oth__link:hover { padding-inline-start: .6rem; }

.sv-hero__media--scene, .sd-hero__media--scene { position: relative; min-height: 100%; }
.sv-hero__media--scene::before, .sd-hero__media--scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 60% 45%, rgba(74, 0, 24, .45), rgba(74, 0, 24, 0) 70%); }
.sv-hero__media--scene .scene, .sd-hero__media--scene .scene { inset: 13vh var(--gutter) 7vh 2vw; }

@media (max-width: 899px) {
  .sv-hero, .sd-hero { display: flex; flex-direction: column; min-height: 0; padding-inline: 0; overflow: visible; }
  .sv-hero__text, .sd-hero__text { display: contents; }
  .sv-crumbs { order: 1; padding: 5.4rem var(--gutter) 0; }
  .sv-crumbs li:not(:last-child) { display: none; }
  .sv-hero .sv-crumbs li + li::before { content: none; }
  .sv-hero__tc { display: none; }
  .sd-hero .sv-crumbs li { display: none; }
  .sd-hero .sv-crumbs li:nth-child(2) { display: block; }
  .sd-hero .sv-crumbs li + li::before { content: none; }
  .sd-hero .sv-crumbs a { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; color: var(--c-paper); }
  .sd-hero .sv-crumbs a::before { content: ""; width: 8px; height: 10px; background: var(--c-red); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
  .sd-hero__cat { order: 2; margin: .4rem var(--gutter) 0; }
  .sv-hero__title, .sd-hero__title { order: 3; margin: .8rem var(--gutter) 0; }
  .sv-hero__title { font-size: 13.4vw; }
  .sd-hero__title { font-size: min(calc(var(--fit, 12) * .9vw), 13vw); }
  .sv-hero__media, .sd-hero__media { order: 4; position: relative; margin-top: 1.6rem; min-height: 0; }
  .sd-hero__ref { display: none; }
  .sv-hero__lead, .sd-hero__lead { order: 5; margin: 3.4rem var(--gutter) 0; font-size: 1.1rem; }
  .sv-hero__ctas, .sd-hero__ctas { order: 6; margin: 1.4rem var(--gutter) 0; }
  .sv-hero__ctas .btn, .sd-hero__ctas .btn { flex: 1 1 auto; }
  .sv-who { display: flex; flex-direction: column; min-height: 0; padding: 4vh var(--gutter) 6vh; overflow: visible; }
  .sv-who__text { display: contents; }
  .sv-who__title { order: 1; white-space: normal; width: auto; font-size: 10.5vw; }
  .sv-who__title .line { width: auto; }
  .sv-who__pt { order: 2; position: relative; inset: auto; width: 100%; min-height: 0; aspect-ratio: 4 / 5; margin: 1.4rem 0 0; -webkit-mask-image: none; mask-image: none; }
  .sv-who__pt .pt > img { transform: scale(1.3); object-position: 49% 28%; }
  .sv-who__lead { order: 3; max-width: none; margin-top: 1.4rem; }
  .sv-who__text2 { order: 4; max-width: none; }
  .sv-who .link-more { order: 5; }
  .sv-hero__media--scene, .sd-hero__media--scene { aspect-ratio: auto; height: auto; min-height: 0; overflow: visible; margin-inline: var(--gutter); }
  .sv-hero__media--scene::before, .sd-hero__media--scene::before { display: none; }
  .sv-hero__media--scene .scene, .sd-hero__media--scene .scene { position: static; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .scene .slot-a { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; margin: 0 !important; }
  .scene .slot-b, .scene .slot-d { display: none; }
  .scene .slot-c { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; margin: 0 !important; transform: none !important; }
  .scene .mon { position: relative; }
  .scene .tlx { position: relative; width: 100%; }

  .svx { padding-top: 10vh; }
  .svx__head, .svx__body { display: block; }
  .svx__lead { margin-top: 1rem; font-size: 1.1rem; }
  .svx__stage { display: none; }
  .svc { min-height: 0; padding: 2.4rem 0 3rem; opacity: 1; }
  .svc__media { display: block; margin: 0 calc(-1 * var(--gutter)) 1.4rem; }
  .svc__media .sv-frame { --ar: 4 / 5 !important; border-radius: 0; }
  .svc__name { font-size: min(calc(var(--fit, 12) * 1cqi), 3.4rem); }
  .svc__cols { grid-template-columns: 1fr; }

  .sv-process__head, .sv-formats__head, .sd-inc__head { display: block; }
  .sv-process__lead, .sv-formats__lead, .sd-inc__lead { margin-top: 1.2rem; }
  .sv-process__title, .sv-formats__title, .sd-inc__title { font-size: 10.6vw; }
  .chain__ticks { flex-direction: column; border-top: 0; border-inline-start: 1px solid var(--c-line-strong); margin-inline-start: 5px; }
  .chain__ticks::before { display: none; }
  .chain__ticks li { padding: .55rem 0 .55rem 1.2rem; }
  .chain__ticks li::before { top: 50%; margin-top: -5px; inset-inline-start: -5px; }
  .chain__fill { display: none; }
  .step-x { grid-template-columns: 2.6rem minmax(0, 1fr); padding: 1.3rem 0; }
  .step-x__desc { grid-column: 2; }
  .step-x__name { font-size: 2.2rem; }
  .steps-x--row { display: grid; grid-template-columns: 1fr; gap: 0; }
  .steps-x--row .step-x { display: grid; padding: 1.2rem 0; border-top: 1px solid var(--c-line); }
  .steps-x--row .step-x::before { display: none; }
  .steps-x--row .step-x__name { margin: 0; font-size: 1.6rem; }

  .fmts { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; align-items: flex-end; }
  .fmts::-webkit-scrollbar { display: none; }
  .fmt { height: auto; flex: none; scroll-snap-align: start; }
  .fmt__frame { height: 46vw; }
  .plats li { font-size: 9vw; }

  .sv-value, .sv-extra, .sv-faq, .sd-intro, .sd-needs, .sd-for, .oth { display: block; }
  .sv-value__head { position: static; margin-bottom: 2rem; }
  .val__item { grid-template-columns: 1fr; gap: .4rem; }
  .val__word { font-size: 12vw; color: var(--c-paper); -webkit-text-stroke: 0; }
  .val-plus { grid-template-columns: 1fr; }
  .cxs { grid-template-columns: 1fr; margin-top: 2rem; }
  .cx-cards { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-bottom: 2rem; }
  .sd-further { display: block; padding-top: 6vh; }
  .sd-further__lead, .sd-further__list { margin-top: 1rem; }
  .sv-faq__list { margin-top: 1.2rem; }
  .sv-cta { min-height: 0; padding: 18vh 0; }
  .sv-cta__bar { height: 7vh; }
  .sv-cta__title { font-size: 15vw; }
  .sv-cta__btns .btn { width: 100%; }

  .sd-intro { padding-top: 10vh; }
  .sd-intro__lead { font-size: 1.5rem; }
  .sd-intro__text { margin-top: 1.4rem; }
  .sd-types { margin-top: 1.2rem; }
  .sd-needs__list { grid-template-columns: 1fr; margin-top: 1.2rem; }
  .sd-for__list { margin-top: 1.2rem; }
  .sd-for__list li { font-size: 1.3rem; }
  .tl { display: flex; flex-direction: column; gap: 6px; padding-top: 0; }
  .tl__ruler, .tl__head, .tl__lbl { display: none; }
  .tl__track, .tl__clips { display: contents; }
  .tl__clip { order: var(--o, 0); }
  .tl__clip { min-height: 52px; }
  .sd-related__head { flex-wrap: wrap; }
  .rel--4 .rel__item { margin: 0 !important; }
  .oth > div:last-child { margin-top: 3rem; }
  .oth__big { font-size: 10vw; }
}

[dir="rtl"] .svc__inc li::before, [dir="rtl"] .oth__go svg { transform: scaleX(-1); }
[dir="rtl"] .chain__fill { transform-origin: right; }

.chipx-grid { display: flex; flex-wrap: wrap; gap: .8rem; }
.chipx { padding: 1rem 1.6rem; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--c-red), #a00c35); font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 800; font-stretch: 82%; color: var(--c-paper); box-shadow: 0 14px 30px rgba(217, 14, 67, .22); }
.chipx:nth-child(3n+2) { background: linear-gradient(135deg, #1a1a1c, #0c0c0d); box-shadow: none; outline: 1px solid var(--c-line-strong); }
.chipx:nth-child(3n) { background: transparent; outline: 1px solid var(--c-red); color: var(--c-red); box-shadow: none; }

.cascade { display: grid; gap: 0; max-width: 30rem; }
.cascade__item { display: flex; align-items: baseline; gap: 1.2rem; padding: 1.1rem 1.4rem; margin-inline-start: calc(var(--i, 0) * 2.4rem); border-radius: var(--radius-media); background: rgba(245, 245, 242, .04); border: 1px solid var(--c-line); font-size: 1.05rem; font-weight: 600; }
.cascade__item + .cascade__item { margin-top: -.5rem; }
.cascade__num { font-size: var(--fs-micro); font-weight: 700; color: var(--c-red); font-variant-numeric: tabular-nums; }

.chapters { counter-reset: ch; max-width: 34rem; }
.chapters__item { padding: 1.4rem 0; border-top: 1px solid var(--c-line); }
.chapters__item:last-child { border-bottom: 1px solid var(--c-line); }
.chapters__n { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; color: var(--c-red); }
.chapters__item h3 { margin-top: .4rem; font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 700; font-stretch: 88%; }

@media (max-width: 899px) {
  .cascade__item { margin-inline-start: calc(var(--i, 0) * 1rem); }
  .chipx { padding: .8rem 1.2rem; font-size: 1rem; }
}

.dlg { display: grid; gap: .6rem; max-width: 40rem; }
.dlg__item { display: flex; align-items: center; gap: .9rem; width: max-content; max-width: 78%; padding: .8rem 1.2rem; border-radius: 18px 18px 18px 4px; background: rgba(245, 245, 242, .05); border: 1px solid var(--c-line); font-weight: 600; }
.dlg__item--b { margin-inline-start: auto; border-radius: 18px 18px 4px 18px; background: rgba(217, 14, 67, .1); border-color: rgba(217, 14, 67, .35); }
.dlg__mic { width: 8px; height: 14px; border-radius: 4px; background: var(--c-red); flex: none; }
.bd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.bd__cell { background: var(--c-black); padding: 1.4rem 1.2rem; display: grid; gap: .5rem; font-weight: 600; }
.bd__n { font-size: var(--fs-micro); font-weight: 700; color: var(--c-red); }

.steps-x--calm { gap: 3rem; }
.steps-x--calm .step-x__desc { font-size: var(--fs-small); line-height: 1.6; }
.proc-ads, .proc-story, .proc-vsl, .proc-pod { --wine: rgba(74, 0, 24, .5); }
.proc-ads { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.6rem); }
.proc-ads__item { position: relative; grid-column: span var(--s, 6); min-height: clamp(210px, 22vw, 300px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.4rem, 2.4vw, 2.4rem); border-radius: var(--radius-media); overflow: hidden;
  background: rgba(245, 245, 242, .028); box-shadow: inset 0 0 0 1px rgba(245, 245, 242, .06); transition: background-color .5s var(--ease-out), box-shadow .5s; }
.proc-ads__item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 100% at 0% 100%, var(--wine), rgba(74, 0, 24, 0) 70%); opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.proc-ads__n { position: absolute; inset-block-start: clamp(1.2rem, 2vw, 1.9rem); inset-inline-start: clamp(1.4rem, 2.4vw, 2.4rem); font-size: .8rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--c-red); }
.proc-ads__item h3 { position: relative; font-size: clamp(2rem, 4vw, 4.4rem); font-weight: 800; font-stretch: 75%; line-height: .92; text-transform: uppercase; }
.proc-ads__item p { position: relative; margin-top: .9rem; max-width: 26rem; color: rgba(245, 245, 242, .68); line-height: 1.5; }
.proc-ads__item:hover, .proc-ads__item.is-active { background: rgba(245, 245, 242, .04); box-shadow: inset 0 0 0 1px rgba(217, 14, 67, .18); }
.proc-ads__item:hover::before, .proc-ads__item.is-active::before { opacity: 1; }
.proc-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.6rem); }
.proc-story__item { position: relative; display: flex; justify-content: space-between; gap: 1rem; min-height: clamp(230px, 24vw, 320px); padding: clamp(1.3rem, 2vw, 2rem); border-radius: var(--radius-media); background: rgba(245, 245, 242, .028); box-shadow: inset 0 0 0 1px rgba(245, 245, 242, .06); overflow: hidden; transition: background-color .5s, box-shadow .5s; }
.proc-story__item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 100% 0%, var(--wine), rgba(74, 0, 24, 0) 70%); opacity: 0; transition: opacity .6s; pointer-events: none; }
.proc-story__txt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; flex: 1; }
.proc-story__n { margin-bottom: auto; font-size: .8rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--c-red); }
.proc-story__item h3 { font-size: clamp(1.5rem, 2.4vw, 2.5rem); font-weight: 800; font-stretch: 78%; line-height: .96; text-transform: uppercase; }
.proc-story__item p { margin-top: .7rem; color: rgba(245, 245, 242, .66); font-size: var(--fs-small); line-height: 1.5; }
.proc-story__frame { position: relative; align-self: stretch; flex: none; width: clamp(54px, 5.4vw, 84px); aspect-ratio: 9 / 16; max-height: 100%; margin-block: auto; border-radius: 8px; border: 1px solid rgba(245, 245, 242, .3); background: linear-gradient(170deg, rgba(217, 14, 67, .16), rgba(245, 245, 242, .02)); }
.proc-story__frame i { position: absolute; inset: 12% 10% 20%; border: 1px dashed rgba(245, 245, 242, .3); border-radius: 3px; }
.proc-story__frame b { position: absolute; inset-inline: 10%; inset-block-end: 8%; height: 2px; background: var(--c-red); transform-origin: left; transform: scaleX(.42); transition: transform .8s var(--ease-out); }
.proc-story__item:hover, .proc-story__item.is-active { background: rgba(245, 245, 242, .04); box-shadow: inset 0 0 0 1px rgba(217, 14, 67, .18); }
.proc-story__item:hover::before, .proc-story__item.is-active::before { opacity: 1; }
.proc-story__item:hover .proc-story__frame b, .proc-story__item.is-active .proc-story__frame b { transform: scaleX(1); }
.proc-vsl { display: block; border-top: 1px solid var(--c-line-strong); }
.proc-vsl__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding-block: clamp(1.5rem, 3.4vh, 2.4rem); border-bottom: 1px solid var(--c-line); transition: background-color .5s; }
.proc-vsl__item:hover, .proc-vsl__item.is-active { background: linear-gradient(90deg, rgba(74, 0, 24, .32), rgba(74, 0, 24, 0) 70%); }
.proc-vsl__n { grid-column: 1 / span 2; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-red); }
.proc-vsl__txt { grid-column: 3 / span 6; }
.proc-vsl__txt h3 { font-size: clamp(1.6rem, 2.8vw, 2.8rem); font-weight: 800; font-stretch: 80%; line-height: 1; text-transform: uppercase; }
.proc-vsl__txt p { margin-top: .6rem; max-width: 34rem; color: rgba(245, 245, 242, .66); }
.proc-vsl__tl { position: relative; grid-column: 9 / span 4; height: 44px; }
.proc-vsl__tl::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgba(245, 245, 242, .18); }
.proc-vsl__tl::after { content: ""; position: absolute; inset-inline: 0; top: calc(50% + 12px); height: 6px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .22) 0 1px, transparent 1px 12px); }
.proc-vsl__tl i { position: absolute; top: calc(50% - 10px); height: 20px; border-radius: 3px; background: rgba(245, 245, 242, .1); box-shadow: inset 0 0 0 1px rgba(245, 245, 242, .14); }
.proc-vsl__c1 { left: 2%; width: 30%; } .proc-vsl__c2 { left: 36%; width: 18%; } .proc-vsl__c3 { left: 58%; width: 38%; }
.proc-vsl__item--b .proc-vsl__c1 { left: 6%; width: 18%; } .proc-vsl__item--b .proc-vsl__c2 { left: 28%; width: 34%; } .proc-vsl__item--b .proc-vsl__c3 { left: 66%; width: 26%; }
.proc-vsl__tl b { position: absolute; top: 4px; bottom: 4px; left: var(--p, 50%); width: 2px; margin-left: -1px; background: var(--c-red); box-shadow: 0 0 10px rgba(217, 14, 67, .5); }
.proc-vsl__item.is-active .proc-vsl__tl i, .proc-vsl__item:hover .proc-vsl__tl i { background: rgba(217, 14, 67, .16); box-shadow: inset 0 0 0 1px rgba(217, 14, 67, .4); }
.proc-pod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.6rem); padding-bottom: 28px; }
.proc-pod__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4rem; align-content: start; padding: clamp(1.6rem, 2.6vw, 2.6rem); border-radius: var(--radius-media); overflow: hidden;
  background: radial-gradient(100% 90% at 0% 0%, rgba(74, 0, 24, .22), rgba(74, 0, 24, 0) 70%), rgba(245, 245, 242, .03); box-shadow: inset 0 0 0 1px rgba(245, 245, 242, .05); transition: box-shadow .5s, background-color .5s; }
.proc-pod__item--b { translate: 0 28px; }
.proc-pod__n { grid-row: 1 / span 2; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 800; font-stretch: 72%; line-height: .9; color: #E94D8A; font-variant-numeric: tabular-nums; }
.proc-pod__item h3 { font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 800; font-stretch: 82%; line-height: 1; text-transform: uppercase; }
.proc-pod__item p { margin-top: .7rem; color: rgba(245, 245, 242, .66); line-height: 1.55; max-width: 30rem; }
.proc-pod__item:hover, .proc-pod__item.is-active { box-shadow: inset 0 0 0 1px rgba(233, 77, 138, .22); }
@media (max-width: 899px) {
  .proc-ads, .proc-story, .proc-pod { grid-template-columns: 1fr; gap: 12px; }
  .proc-ads__item { grid-column: auto; min-height: 0; padding: 3.2rem 1.4rem 1.5rem; }
  .proc-ads__item h3 { font-size: 2.3rem; }
  .proc-story__item { min-height: 0; }
  .proc-story__item.has-frame { padding-right: 1.4rem; }
  .proc-story__frame { width: 46px; }
  .proc-vsl__item { grid-template-columns: 1fr; row-gap: .6rem; padding-block: 1.4rem; }
  .proc-vsl__n, .proc-vsl__txt, .proc-vsl__tl { grid-column: 1; }
  .proc-vsl__tl { height: 36px; margin-top: .3rem; }
  .proc-pod { padding-bottom: 0; }
  .proc-pod__item--b { translate: none; }
  .proc-pod__item { grid-template-columns: auto minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .proc-ads__item, .proc-ads__item::before, .proc-story__item, .proc-story__frame b, .proc-vsl__item, .proc-pod__item { transition: none; } }
.proc-layers { display: grid; gap: 6px; }
.proc-layers__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 8px; align-items: stretch; }
.proc-layers__trk { display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: var(--c-grey-dark); border-inline-end: 1px solid var(--c-line); }
.proc-layers__clip { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: .9rem 1.2rem; margin-inline-start: calc(var(--i, 0) * 3%); border-radius: 4px; background: linear-gradient(90deg, rgba(217, 14, 67, .18), rgba(217, 14, 67, .05)); outline: 1px solid rgba(217, 14, 67, .45); outline-offset: -1px; }
.proc-layers__clip h3 { font-size: 1.05rem; font-weight: 800; font-stretch: 82%; text-transform: uppercase; }
.proc-layers__clip p { font-size: var(--fs-small); color: var(--c-grey); }
.proc-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.proc-board__cell { position: relative; padding: 1.6rem 1.4rem 1.4rem; border: 1px solid var(--c-line); border-radius: var(--radius-media); background: rgba(245, 245, 242, .03); display: grid; gap: .5rem; }
.proc-board__n { font-size: var(--fs-micro); font-weight: 700; color: var(--c-red); }
.proc-board__cell h3 { font-size: 1.15rem; font-weight: 700; font-stretch: 88%; }
.proc-board__cell p { font-size: var(--fs-small); color: var(--c-grey); }
.proc-board--web { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proc-board--web .proc-board__cell::after { content: ""; position: absolute; top: 50%; inset-inline-end: -1.2rem; width: 1.2rem; height: 1px; background: var(--c-red); }
.proc-board--web .proc-board__cell:last-child::after { display: none; }

.bb { display: grid; grid-template-columns: 7fr 5fr; gap: var(--col-gap); align-items: start; }
.bb__ref { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-media); overflow: hidden; }
.bb__ref figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; background: rgba(5, 5, 5, .6); }
.bb__sys { display: grid; gap: .6rem; padding: 1.6rem; border: 1px solid var(--c-line); border-radius: var(--radius-media); background: rgba(245, 245, 242, .03); }
.bb__lbl { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); margin-top: .6rem; }
.bb__pal { display: flex; gap: .5rem; }
.bb__sw { width: 44px; height: 44px; border-radius: 4px; background: var(--c); outline: 1px solid rgba(245, 245, 242, .12); outline-offset: -1px; }
.bb__type { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-small); color: var(--c-grey); }
.bb__aa { font-size: 3rem; font-weight: 800; font-stretch: 75%; line-height: 1; color: var(--c-paper); }
.bb__apps { display: flex; flex-wrap: wrap; gap: .4rem; }
.bb__apps li { padding: .35rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--c-line-strong); font-size: var(--fs-small); font-weight: 600; }

.dv { position: relative; display: grid; grid-template-columns: 8fr 3fr; gap: var(--col-gap); align-items: end; }
.dv__screen { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--c-ink); outline: 1px solid rgba(245, 245, 242, .14); outline-offset: -1px; box-shadow: 0 40px 90px rgba(0, 0, 0, .55); }
.dv__desk .dv__screen { aspect-ratio: 16 / 10; }
.dv__mob .dv__screen { aspect-ratio: 9 / 19; border-radius: 22px; outline-width: 5px; outline-color: #16161a; }
.dv figcaption { margin-top: .8rem; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-grey); }
.dv__ui { position: absolute; left: -6%; bottom: 12%; display: grid; gap: 8px; width: 22%; }
.dv__ui li { height: 8px; width: var(--w); border-radius: 4px; background: rgba(245, 245, 242, .18); }
.dv__ui li:first-child { background: var(--c-red); }

.sd--ads .sd-intro, .sd--reels .sd-intro { padding-top: 6vh; }
.sd--corporate .sd-h2 { letter-spacing: .02em; }
.sd--corporate .sd-needs, .sd--corporate .sd-for, .sd--corporate .sd-process { padding-block: 12vh; }

@media (max-width: 899px) {
  .bd, .proc-board, .proc-board--web { grid-template-columns: 1fr 1fr; }
  .proc-board--web .proc-board__cell::after { display: none; }
  .proc-layers__clip { grid-template-columns: 1fr; gap: .3rem; margin-inline-start: 0; }
  .bb, .dv { grid-template-columns: 1fr; }
  .dv__mob { width: 46%; }
  .dv__ui { display: none; }
  .dlg__item { max-width: 92%; }
}

.tl__gap { flex: var(--g, 2) 1 0; min-width: 0; }
.tl__track:nth-child(2) .tl__clip { background: linear-gradient(180deg, rgba(217, 14, 67, .55), rgba(217, 14, 67, .28)); }
.tl__track:nth-child(3) .tl__clip { background: linear-gradient(180deg, rgba(245, 245, 242, .14), rgba(245, 245, 242, .06)); }
.tl__track:nth-child(4) .tl__clip { background: repeating-linear-gradient(90deg, rgba(61, 220, 132, .22) 0 2px, transparent 2px 5px), rgba(20, 20, 22, .92); }

.tl__clip { min-height: 44px; padding: .5rem .7rem; opacity: .78; transition: opacity .35s, filter .35s, transform .35s var(--ease-out); }
.tl__clip span { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tl__track:nth-child(2) .tl__clip { background: linear-gradient(180deg, rgba(217, 14, 67, .5), rgba(217, 14, 67, .24)); }
.tl__track:nth-child(2) .tl__clip--1 { background: linear-gradient(180deg, rgba(217, 14, 67, .62), rgba(217, 14, 67, .3)); }
.tl__track:nth-child(3) .tl__clip { background: linear-gradient(180deg, rgba(245, 245, 242, .16), rgba(245, 245, 242, .07)); }
.tl__track:nth-child(3) .tl__clip--2 { background: linear-gradient(180deg, rgba(245, 245, 242, .22), rgba(245, 245, 242, .09)); }
.tl__track:nth-child(4) .tl__clip { background: linear-gradient(180deg, rgba(74, 0, 24, .9), rgba(74, 0, 24, .55)); }
.tl__track:nth-child(4) .tl__clip--1 { background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .1) 0 2px, transparent 2px 5px), rgba(74, 0, 24, .7); }
.tl__clip.is-live { opacity: 1; filter: brightness(1.2); transform: translateY(-2px); }
.tl__clip.is-live span { color: var(--c-paper); }

.bb-mods { display: flex; gap: 6px; padding-top: 10px; }
.bb-mod { flex: 1 1 0; min-width: 0; display: grid; gap: .45rem; padding: .8rem .7rem .7rem; border-radius: 4px; background: rgba(245, 245, 242, .05); outline: 1px solid var(--c-line); outline-offset: -1px; opacity: .8; transition: opacity .35s, background-color .35s; }
.bb-mod__n { font-size: .6rem; font-weight: 700; color: var(--c-red); }
.bb-mod__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.bb-mod__bar { height: 22px; border-radius: 3px; background: linear-gradient(90deg, rgba(217, 14, 67, .55), rgba(74, 0, 24, .8)); }
.bb-mod:nth-child(4) .bb-mod__bar { background: var(--c-paper); } .bb-mod:nth-child(5) .bb-mod__bar { background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .5) 0 3px, transparent 3px 7px); }
.bb-mod:nth-child(6) .bb-mod__bar { background: linear-gradient(90deg, #D90E43 0 40%, #4A0018 40% 70%, #F5F5F2 70%); }
.bb-mod.is-live { opacity: 1; background: rgba(217, 14, 67, .1); }

.wf-steps { display: flex; gap: 6px; padding-top: 10px; align-items: flex-end; }
.wf-step { flex: 1 1 0; min-width: 0; display: grid; gap: .45rem; opacity: .8; transition: opacity .35s; }
.wf-step__frame { position: relative; height: 54px; border-radius: 4px; background: rgba(245, 245, 242, .05); outline: 1px solid var(--c-line); outline-offset: -1px; overflow: hidden; }
.wf-step__frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: rgba(245, 245, 242, .12); }
.wf-step__frame i { position: absolute; left: 12%; right: 12%; height: 4px; border-radius: 2px; background: rgba(245, 245, 242, .22); }
.wf-step__frame i:nth-child(1) { top: 16px; } .wf-step__frame i:nth-child(2) { top: 26px; right: 40%; } .wf-step__frame i:nth-child(3) { top: 36px; right: 55%; background: var(--c-red); }
.wf-step--mob .wf-step__frame { width: 46%; margin-inline: auto; height: 62px; border-radius: 8px; }
.wf-step--desk .wf-step__frame { height: 60px; }
.wf-step--resp .wf-step__frame { background: linear-gradient(90deg, rgba(245, 245, 242, .05) 60%, rgba(217, 14, 67, .18) 60%); }
.wf-step--wire .wf-step__frame i { background: transparent; outline: 1px dashed rgba(245, 245, 242, .35); }
.wf-step--ui .wf-step__frame i:nth-child(1) { background: var(--c-red); }
.wf-step__n { font-size: .6rem; font-weight: 700; color: var(--c-red); }
.wf-step__lbl { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.wf-step.is-live { opacity: 1; }
.wf-step.is-live .wf-step__frame { outline-color: rgba(217, 14, 67, .6); }
@media (max-width: 899px) {
  .bb-mods, .wf-steps { display: grid; grid-template-columns: repeat(3, 1fr); }
  .wf-step--mob .wf-step__frame { width: 60%; }
}

.sd-brandsys { padding: 10vh 0 6vh; }
.bsys { position: relative; padding-top: 2.4rem; }
.bsys__track { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(245, 245, 242, .3) 0 1px, transparent 1px 46px) bottom / 100% 12px no-repeat, repeating-linear-gradient(90deg, rgba(245, 245, 242, .12) 0 1px, transparent 1px 11px) bottom / 100% 6px no-repeat; }
.bsys__track::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--c-red); transition: width .2s linear; }
.bsys__head { position: absolute; left: calc(var(--p, 0) * 100%); bottom: -1px; width: 11px; height: 13px; margin-left: -5px; background: var(--c-red); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: left .2s linear; }
.bsys__stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--col-gap); }
.bsys__stage { position: relative; padding-top: 1.2rem; opacity: .5; transition: opacity .4s; }
.bsys__stage::before { content: ""; position: absolute; left: 0; top: -2.4rem; width: 9px; height: 9px; border-radius: 50%; background: var(--c-black); border: 1.5px solid rgba(245, 245, 242, .4); transform: translateY(-4px); transition: background-color .3s, border-color .3s; }
.bsys__stage.is-active { opacity: 1; }
.bsys__stage.is-active::before, .bsys__stage.is-passed::before { background: var(--c-red); border-color: var(--c-red); }
.bsys__n { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; color: var(--c-red); }
.bsys__t { margin-top: .5rem; font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 700; font-stretch: 88%; line-height: 1.15; }
.bsys__d { margin-top: .5rem; font-size: var(--fs-small); color: var(--c-grey); line-height: 1.5; }
.bsys__visuals { position: relative; margin-top: 3rem; height: clamp(180px, 22vw, 300px); border-radius: var(--radius-media); background: rgba(245, 245, 242, .03); outline: 1px solid var(--c-line); outline-offset: -1px; overflow: hidden; }
.bsys__vis { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; transform: scale(.98); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.bsys__vis.is-active { opacity: 1; transform: none; }
.bv-ring { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(245, 245, 242, .35); }
.bv-ring--b { width: 22%; border-color: var(--c-red); transform: translateX(28%); }
.bv-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c-red); transform: translate(140%, -40%); }
.bsys__vis--2 { grid-template-columns: repeat(4, 16%); column-gap: 2%; }
.bv-tile { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 4px; background: linear-gradient(180deg, rgba(245, 245, 242, .16), rgba(245, 245, 242, .05)); }
.bv-tile:nth-child(2) { background: linear-gradient(180deg, rgba(217, 14, 67, .45), rgba(74, 0, 24, .5)); transform: translateY(12%); }
.bv-tile:nth-child(3) { background: rgba(74, 0, 24, .8); } .bv-tile:nth-child(4) { transform: translateY(-10%); }
.bsys__vis--3 { grid-auto-flow: column; column-gap: 2.5vw; }
.bv-mark { display: block; width: clamp(48px, 6vw, 84px); aspect-ratio: 1; background: var(--c-paper); }
.bv-mark--sq { transform: rotate(45deg) scale(.8); background: var(--c-red); } .bv-mark--ci { border-radius: 50%; background: rgba(245, 245, 242, .18); border: 1px solid rgba(245, 245, 242, .5); } .bv-mark--bar { width: 12px; height: 100%; aspect-ratio: auto; height: clamp(48px, 6vw, 84px); }
.bsys__vis--4 { grid-template-columns: auto 1fr; column-gap: 3vw; padding-inline: 12%; align-items: center; grid-template-rows: repeat(4, auto); }
.bv-aa { grid-row: 1 / span 4; font-size: clamp(3.4rem, 8vw, 8rem); font-weight: 800; font-stretch: 75%; line-height: 1; }
.bv-line { display: block; height: var(--h, 8px); width: var(--w); border-radius: 3px; background: rgba(245, 245, 242, .28); }
.bsys__vis--5 { grid-auto-flow: column; column-gap: 1vw; }
.bv-sw { display: block; width: clamp(44px, 6vw, 84px); aspect-ratio: 1; border-radius: 6px; background: var(--c); outline: 1px solid rgba(245, 245, 242, .14); outline-offset: -1px; }
.bv-shape { display: block; width: clamp(44px, 6vw, 84px); aspect-ratio: 1; border-radius: 50% 0 50% 0; background: linear-gradient(135deg, var(--c-red), #4A0018); }
.bsys__vis--6 { grid-auto-flow: column; column-gap: 2vw; align-items: end; padding-bottom: 8%; }
.bv-app { display: block; border-radius: 4px; background: rgba(245, 245, 242, .08); outline: 1px solid rgba(245, 245, 242, .25); outline-offset: -1px; position: relative; }
.bv-app::before { content: ""; position: absolute; left: 12%; right: 30%; top: 14%; height: 6px; border-radius: 3px; background: var(--c-red); }
.bv-app--phone { width: clamp(40px, 5vw, 70px); aspect-ratio: 9 / 16; border-radius: 10px; } .bv-app--poster { width: clamp(70px, 9vw, 130px); aspect-ratio: 3 / 4; } .bv-app--wide { width: clamp(120px, 16vw, 230px); aspect-ratio: 16 / 9; }
@media (max-width: 899px) {
  .bsys { padding-top: 0; }
  .bsys__track, .bsys__visuals { display: none; }
  .bsys__stages { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
  .bsys__stage { opacity: 1; padding-top: 0; }
  .bsys__stage::before { display: none; }
}
