/* Digital Studio website / (c) Digital Studio - digital-studio.be
   Beweging en onderdelen: werkwijze met voortgang, beelden die openschuiven, magnetische knoppen, contactblok en formulier. */

/* Drie pijlers met nummer */
.studio-pillar { position: relative; }
.studio-pillar__number { display: block; margin-bottom: 1.25rem; padding-bottom: .9rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--studio-red); border-bottom: 1px solid var(--studio-line); position: relative; }
.studio-pillar__number::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--studio-ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.studio-pillar.is-in .studio-pillar__number::after { transform: scaleX(.18); }
.studio-pillar:hover .studio-pillar__number::after { transform: scaleX(1); }

/* Werkwijze: links vast, rechts de stappen met een lijn die meeloopt */
.studio-process__intro { position: sticky; top: 8rem; }
.studio-process__title { white-space: pre-line; }
.studio-process__text { max-width: 30rem; }
.studio-process__photo { position: relative; margin-top: 2.5rem; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f0ed; max-width: 30rem; }
.studio-process__photo img { width: 100%; height: 100%; object-fit: cover; }
.studio-process__track { position: relative; padding-left: 4.5rem; }
.studio-process__line { position: absolute; left: 1.35rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--studio-line); }
.studio-process__line span { position: absolute; inset: 0 0 auto 0; height: calc(var(--process, 0) * 100%); background: var(--studio-red); transition: height .15s linear; }
.studio-process__steps { list-style: none; margin: 0; padding: 0; }
.studio-process__step { position: relative; padding: 0 0 5.5rem; opacity: .32; transition: opacity .6s ease; }
.studio-process__step:last-child { padding-bottom: 0; }
.studio-process__step.is-active { opacity: 1; }
.studio-process__number { position: absolute; left: -4.5rem; top: -.15rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #fff; border: 2px solid var(--studio-line); font-size: .875rem; font-weight: 700; transition: border-color .5s, background .5s, color .5s; }
.studio-process__step.is-active .studio-process__number { border-color: var(--studio-red); background: var(--studio-red); color: #fff; }
.studio-process__step-title { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .9rem; }
.studio-process__step p { font-size: 1.0625rem; line-height: 1.7; color: #4a4a4f; max-width: 32rem; }
@media (max-width: 991px) {
  .studio-process__intro { position: static; margin-bottom: 3.5rem; }
  .studio-process__step { opacity: 1; padding-bottom: 3rem; }
}

/* Beelden die openschuiven tijdens het scrollen */
.js-motion [data-reveal-media] { clip-path: inset(14% 10% 14% 10%); opacity: 0; transition: clip-path 1.25s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.js-motion [data-reveal-media].is-in { clip-path: inset(0 0 0 0); opacity: 1; }
.js-motion [data-reveal-media] img { transform: scale(1.12); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.js-motion [data-reveal-media].is-in img { transform: scale(1); }

/* Leesvoortgang op lange pagina's */
.studio-progress { position: fixed; z-index: 200; left: 0; top: 0; height: 3px; width: 100%; background: var(--studio-red); transform: scaleX(var(--read, 0)); transform-origin: left; pointer-events: none; }

/* Contactblok onderaan */
.studio-cta { position: relative; overflow: hidden; padding: clamp(5rem, 11vw, 9.5rem) 0; background: var(--studio-ink); color: #fff; isolation: isolate; }
.studio-cta__image { position: absolute; inset: -10% 0; z-index: -1; opacity: .38; background-size: cover; background-position: center; }
.studio-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.55) 60%, rgba(11,11,13,.35) 100%); }
.studio-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.studio-cta__sub { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 1.25rem; }
.studio-cta__title { font-size: clamp(2.5rem, 6.2vw, 5.75rem); font-weight: 700; letter-spacing: -.045em; line-height: .98; color: #fff; max-width: 13ch; margin: 0; }
.studio-cta__text { font-size: 1.25rem; color: rgba(255,255,255,.78); margin: 1.5rem 0 0; max-width: 32rem; }
.studio-cta__button { flex: none; position: relative; display: grid; place-items: center; align-content: center; gap: .35rem; width: clamp(9.5rem, 15vw, 13rem); aspect-ratio: 1; border-radius: 50%; background: var(--studio-red); color: #fff; text-decoration: none; text-align: center; font-weight: 600; font-size: 1rem; line-height: 1.25; padding: 1.5rem; transition: background .4s, transform .5s cubic-bezier(.2,.7,.2,1); }
.studio-cta__button i { font-style: normal; font-size: 1.5rem; transition: transform .4s; }
.studio-cta__button:hover { background: #fff; color: var(--studio-ink); }
.studio-cta__button:hover i { transform: translateX(6px); }
.studio-cta__button::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); animation: studio-ring 3.2s ease-out infinite; }
@keyframes studio-ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (max-width: 767px) { .studio-cta__inner { flex-direction: column; align-items: flex-start; } }

/* Diensten- en regiopagina's: koptekst met werk ernaast en drie troeven */
.studio-seohero { padding-top: clamp(8.5rem, 14vw, 11rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.studio-seohero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.studio-seohero__eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--studio-red); margin: 1.5rem 0 1rem; }
.studio-seohero__title { font-size: clamp(2.6rem, 5.4vw, 4.9rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin: 0; }
.studio-seohero__intro { font-size: 1.2rem; line-height: 1.6; color: #4a4a4f; margin: 1.6rem 0 0; max-width: 36rem; }
.studio-seohero__media { position: relative; }
.studio-seohero__media .studio-shot { box-shadow: none; }
.studio-seohero__media > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.studio-seohero__caption { margin-top: .9rem; font-size: .875rem; color: #6d6d72; }
.studio-seohero__caption a { color: inherit; }
@media (max-width: 991px) { .studio-seohero__grid { grid-template-columns: 1fr; } }
.studio-usps { border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); }
.studio-usps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.studio-usps__item { padding: 2rem 2rem 2rem 0; }
.studio-usps__item + .studio-usps__item { padding-left: 2rem; border-left: 1px solid var(--studio-line); }
.studio-usps__item h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .4rem; letter-spacing: -.01em; }
.studio-usps__item h2::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%; background: var(--studio-red); vertical-align: middle; }
.studio-usps__item p { margin: 0; font-size: .975rem; color: #5a5a60; }
@media (max-width: 767px) { .studio-usps__grid { grid-template-columns: 1fr; } .studio-usps__item, .studio-usps__item + .studio-usps__item { padding: 1.4rem 0; border-left: 0; } .studio-usps__item + .studio-usps__item { border-top: 1px solid var(--studio-line); } }
.studio-sidebox--dark { background: var(--studio-ink); color: #fff; }
.studio-sidebox--dark h2 { color: #fff !important; }
.studio-sidebox--dark p { color: rgba(255,255,255,.75); }

/* Gewone knoppen: zachte vulling bij hover */
.button.-md { position: relative; overflow: hidden; isolation: isolate; }
.button.-md.-black::after, .button.-md.-outline-black::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--studio-red); transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.button.-md.-black:hover::after { transform: none; }
.button.-md.-outline-black:hover { color: #fff !important; border-color: var(--studio-red); }
.button.-md.-outline-black:hover::after { transform: none; }

/* Keuze onderwerp in het contactformulier */
.studio-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.studio-topics legend { width: 100%; margin-bottom: .75rem; font-size: .9375rem; font-weight: 500; }
.studio-topics__item { position: relative; cursor: pointer; }
.studio-topics__item input { position: absolute; opacity: 0; }
.studio-topics__item span { display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--studio-line); border-radius: 999px; font-size: .9375rem; transition: background .25s, color .25s, border-color .25s; }
.studio-topics__item input:checked + span { background: var(--studio-ink); border-color: var(--studio-ink); color: #fff; }
.studio-topics__item input:focus-visible + span { outline: 2px solid var(--studio-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal-media], .js-motion [data-reveal-media] * { clip-path: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .studio-cta__button::before { animation: none; }
}

/* Contactformulier: voorstel of vraag */
.studio-contactform .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.studio-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 3.5rem; border: 1px solid var(--studio-ink); }
.studio-modes__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.6rem 1.8rem; background: #fff; border: 0; text-align: left; font: inherit; color: var(--studio-ink); cursor: pointer; transition: background .35s, color .35s; }
.studio-modes__item + .studio-modes__item { border-left: 1px solid var(--studio-ink); }
.studio-modes__item strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.studio-modes__item span:last-child { font-size: .9375rem; line-height: 1.5; color: #5a5a60; transition: color .35s; }
.studio-modes__number { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--studio-red); }
.studio-modes__item.is-active { background: var(--studio-ink); color: #fff; }
.studio-modes__item.is-active span:last-child { color: rgba(255,255,255,.72); }
.studio-modes__item:not(.is-active):hover { background: #f4f4f2; }
@media (max-width: 767px) { .studio-modes { grid-template-columns: 1fr; } .studio-modes__item + .studio-modes__item { border-left: 0; border-top: 1px solid var(--studio-ink); } }

.studio-panel { margin: 0; padding: 0; border: 0; min-width: 0; }
.studio-panel[hidden] { display: none; }
.studio-step { margin-bottom: 3rem; }
.studio-step__label { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 600; color: var(--studio-ink); }
.studio-step__label span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--studio-ink); color: #fff; font-size: .8125rem; }
.studio-step__label small { font-size: .875rem; font-weight: 400; color: #8a8a90; }

.studio-choices { display: grid; gap: .75rem; }
.studio-choices--plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.studio-choices--topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .studio-choices--plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .studio-choices--plans, .studio-choices--topics { grid-template-columns: 1fr; } }
.studio-choice { position: relative; display: block; cursor: pointer; }
.studio-choice input { position: absolute; opacity: 0; pointer-events: none; }
.studio-choice > span { position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.25rem 1.25rem 1.25rem 3.1rem; border: 1px solid var(--studio-line); background: #fff; transition: border-color .3s, box-shadow .3s, background .3s; }
.studio-choice > span::before { content: ""; position: absolute; left: 1.15rem; top: 1.45rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid #b9b9b6; background: #fff; transition: border .25s; }
.studio-choice strong { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; color: var(--studio-ink); }
.studio-choice small { font-size: .875rem; line-height: 1.45; color: #6d6d72; }
.studio-choice:hover > span { border-color: var(--studio-ink); }
.studio-choice input:checked + span { border-color: var(--studio-ink); box-shadow: inset 0 0 0 1px var(--studio-ink); }
.studio-choice input:checked + span::before { border: 5px solid var(--studio-red); }
.studio-choice input:focus-visible + span { outline: 2px solid var(--studio-red); outline-offset: 2px; }

.studio-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.studio-chip { position: relative; cursor: pointer; }
.studio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.studio-chip span { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 1px solid var(--studio-line); border-radius: 999px; font-size: .9375rem; background: #fff; transition: background .25s, color .25s, border-color .25s; }
.studio-chip span::before { content: "+"; font-weight: 600; color: var(--studio-red); transition: transform .3s; }
.studio-chip:hover span { border-color: var(--studio-ink); }
.studio-chip input:checked + span { background: var(--studio-ink); border-color: var(--studio-ink); color: #fff; }
.studio-chip input:checked + span::before { content: "✓"; color: #fff; }
.studio-chip input:focus-visible + span { outline: 2px solid var(--studio-red); outline-offset: 2px; }

.studio-contactform select { width: 100%; padding: .9rem 0; border: 0; border-bottom: 1px solid rgba(0,0,0,.25); background: transparent; font: inherit; font-size: 1.125rem; color: var(--studio-ink); border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #0b0b0d 50%), linear-gradient(135deg, #0b0b0d 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.studio-contactform select:focus { outline: none; border-bottom-color: var(--studio-ink); }
.studio-captcha { margin-bottom: 1.5rem; }
.studio-contactform__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .5rem; }
.studio-contactform__send p { margin: 0; color: #6d6d72; }
.contact-form.-type-1 .studio-chip { width: auto; }

/* Gids zonder eigen foto: een rustige typografische cover */
.studio-guidecover { position: relative; aspect-ratio: 4 / 3; display: flex !important; flex-direction: column; justify-content: space-between; padding: 1.75rem; overflow: hidden; }
.studio-guidecover::before { display: none !important; }
.studio-guidecover--dark { background: #0b0b0d; color: #fff; }
.studio-guidecover--light { background: #f1f0ed; color: #0b0b0d; }
.studio-guidecover--red { background: var(--studio-red); color: #fff; }
.studio-guidecover__label { position: relative; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.studio-guidecover__title { position: relative; margin-top: auto; font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; max-width: 92%; }
.studio-guidecover__title em { font-style: normal; color: var(--studio-red); }
.studio-guidecover--red .studio-guidecover__title em { color: #0b0b0d; }
.blogCard:hover .studio-guidecover__title { transform: translateY(-4px); transition: transform .5s cubic-bezier(.2,.7,.2,1); }