/* Taak 101 · pagina Design your office (mockup DesignYourOffice.dc.html, tekst T60/T62). Alleen via design tokens; themakleuren staan inline (data). */

.eo-dyo .eo-cp-hero{padding-bottom:88px;min-height:600px}
.eo-dyo__sub{font-size:1.125rem;color:var(--eo-off);max-width:640px;margin:0 auto 24px}
.eo-dyo__kruimel{position:absolute;z-index:1;left:0;right:0;bottom:16px;max-width:var(--eo-container);margin:0 auto;padding:0 16px;text-align:left;font-size:.75rem;color:var(--eo-bg)}
.eo-dyo__kruimel a{color:inherit;text-decoration:none}
.eo-dyo__kruimel a:hover{text-decoration:underline}

.eo-dyo h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 16px}
.eo-dyo h3{font-size:1.35rem;margin:0 0 8px}
.eo-dyo__sec{padding-block:72px}
.eo-dyo__wit{background:#fff}
.eo-dyo__midden{text-align:center}
.eo-dyo__kop{max-width:780px;margin:0 auto 32px;text-align:center}
.eo-dyo__kop p:last-child{margin-bottom:0}
.eo-dyo__noot{font-size:.875rem;color:var(--eo-blue);margin:0}
.eo-dyo__laatste{margin-bottom:0}
.eo-dyo__knopregel{margin:24px 0 16px}

.eo-dyo__ci{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.eo-dyo__ci--boven{align-items:start}
.eo-dyo__g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.eo-dyo__g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.eo-dyo__hk{gap:48px;align-items:start}

.eo-dyo__usps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.eo-dyo__usps--rij{flex-direction:column;gap:8px}
.eo-dyo__usps li{font-weight:600;font-size:.875rem;display:flex;gap:8px;align-items:center}
.eo-dyo__usps li::before{content:"";width:8px;height:8px;background:var(--eo-green);flex:none}

.eo-dyo__vid{position:relative;aspect-ratio:16/9;background:var(--eo-navy);overflow:hidden}
.eo-dyo__vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.eo-dyo__filmkolom p{margin:16px 0 0}

.eo-dyo__pk{background:var(--eo-off);padding:28px;border-top:4px solid var(--eo-green);display:flex;flex-direction:column;gap:10px}
.eo-dyo__pk h3{margin:0}
.eo-dyo__pk ul{margin:0;padding:0;list-style:none;font-size:.9375rem}
.eo-dyo__pk li{padding:6px 0;border-top:1px solid var(--eo-bg)}
.eo-dyo__pk li::before{content:"✓ ";color:var(--eo-green-dark);font-weight:700}

/* Thema's en moodboards: pure CSS (radioknoppen + labels), zoals de mockup. */
.eo-dyo__mbr{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.eo-dyo__th{background:#fff;padding:20px;overflow:hidden;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:transform .2s var(--eo-ease),box-shadow .2s var(--eo-ease)}
.eo-dyo__th:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(30,34,47,.14)}
.eo-dyo__th h3{margin:4px 0 0}
.eo-dyo__mood{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);gap:4px;height:240px;margin:-20px -20px 4px}
.eo-dyo__mood img,.eo-dyo__mood .eo-dyo__leeg{width:100%;height:100%;object-fit:cover;display:block}
.eo-dyo__mood>:first-child{grid-row:1 / 4}
.eo-dyo__leeg{background:var(--eo-bg)}
.eo-dyo__sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:56px}
.eo-dyo__kw{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--eo-green-dark);line-height:1.5}
.eo-dyo__open{font-weight:700;font-size:.8125rem;color:var(--eo-green-dark);margin-top:auto}

.eo-dyo__mbb{display:none}
#eo-mb-nature:checked~.eo-dyo__mbwrap .eo-dyo__mbb--nature,
#eo-mb-nordic:checked~.eo-dyo__mbwrap .eo-dyo__mbb--nordic,
#eo-mb-urban:checked~.eo-dyo__mbwrap .eo-dyo__mbb--urban,
#eo-mb-classic:checked~.eo-dyo__mbwrap .eo-dyo__mbb--classic,
#eo-mb-energy:checked~.eo-dyo__mbwrap .eo-dyo__mbb--energy,
#eo-mb-executive:checked~.eo-dyo__mbwrap .eo-dyo__mbb--executive{display:block;animation:eo-dyo-in .35s var(--eo-ease)}
.eo-dyo__mbr:not(#eo-mb-none):checked~.eo-dyo__thwrap{display:none}
.eo-dyo__mbr:focus-visible~.eo-dyo__thwrap .eo-dyo__th,.eo-dyo__mbr:focus-visible~.eo-dyo__mbwrap .eo-dyo__chip.is-aan{outline:2px solid var(--eo-focus);outline-offset:2px}
@keyframes eo-dyo-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.eo-dyo__mbtop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.eo-dyo__terug{font-weight:700;font-size:.875rem;cursor:pointer}
.eo-dyo__chips{display:flex;gap:8px;flex-wrap:wrap}
.eo-dyo__chip{border:1px solid var(--eo-navy);padding:8px 14px;font-weight:600;font-size:.8125rem;background:#fff;color:var(--eo-navy);cursor:pointer}
.eo-dyo__chip.is-aan{background:var(--eo-navy);color:#fff}
.eo-dyo__mbhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:28px}
.eo-dyo .eo-dyo__mbnaam{font-size:clamp(3rem,6vw,4.5rem);line-height:1;margin:0 0 12px}
.eo-dyo__mbnote{font-size:1.125rem;margin:0}
.eo-dyo__kws{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.eo-dyo__kws span{font-weight:600;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--eo-green);color:var(--eo-green-dark);padding:6px 12px;background:#fff}
.eo-dyo__coll{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px 200px;gap:8px}
.eo-dyo__coll img,.eo-dyo__coll .eo-dyo__leeg{width:100%;height:100%;object-fit:cover;display:block}
.eo-dyo__coll .eo-dyo__c1{grid-row:1 / 3}
.eo-dyo__coll .eo-dyo__c2{grid-column:2 / 4}
.eo-dyo__coll .eo-dyo__c3{grid-column:2;grid-row:2}
.eo-dyo__csw{grid-column:3;grid-row:2;display:grid;grid-template-rows:repeat(5,1fr);gap:4px;background:#fff;padding:8px}
.eo-dyo__bsw{display:flex;align-items:center;gap:10px}
.eo-dyo__bsw span{width:44px;height:100%;min-height:28px;display:block}
.eo-dyo__bsw small{font-weight:600;font-size:.6875rem;color:var(--eo-blue);letter-spacing:.06em}
.eo-dyo__coll .eo-dyo__c4{grid-column:1;grid-row:3}
.eo-dyo__coll .eo-dyo__c5{grid-column:2 / 4;grid-row:3}
.eo-dyo__credit{font-size:.8125rem;color:var(--eo-blue);margin:12px 0 0}
.eo-dyo__knoppen{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.eo-dyo__btn-rand{background:transparent;color:var(--eo-navy);border:1px solid var(--eo-navy);cursor:pointer}
.eo-dyo__btn-rand:hover{background:var(--eo-navy);color:#fff}

.eo-dyo__steps{counter-reset:eo-dyo;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.eo-dyo__steps li{background:var(--eo-off);padding:20px;counter-increment:eo-dyo;font-size:.9375rem}
.eo-dyo__steps li::before{content:counter(eo-dyo);display:flex;width:36px;height:36px;align-items:center;justify-content:center;background:var(--eo-green);color:#fff;font-weight:700;margin-bottom:12px}
.eo-dyo__steps b{display:block}

.eo-dyo__ba{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--eo-bg)}
.eo-dyo__ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eo-dyo__ba span{position:absolute;left:12px;top:12px;background:var(--eo-navy);color:#fff;font-weight:700;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px}

.eo-dyo__partner{background:var(--eo-off);padding:28px}

.eo-dyo__faq .eo-container{max-width:900px}

.eo-dyo__groen{background:var(--eo-green);color:#fff}
.eo-dyo .eo-dyo__groen h2{color:#fff}
.eo-dyo__groen .eo-eyebrow{color:var(--eo-bg)}
.eo-dyo__groen .eo-dyo__usps li::before{background:var(--eo-bg)}
.eo-dyo__form{background:#fff;padding:28px;color:var(--eo-navy)}
.eo-dyo__form .eo-form__knop{width:100%}
.eo-dyo__form .eo-form__rij{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

/* Blok stylistes (mockup DYOStylistes, akkoord 23-10). */
.eo-dyo__styl-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.eo-dyo__styl-kaart{background:var(--eo-off);display:flex;flex-direction:column;margin:0}
.eo-dyo__styl-foto{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 30%;display:block}
.eo-dyo__styl-body{padding:28px 30px 32px}
.eo-dyo__styl-fn{font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--eo-green-dark);margin:0 0 6px}
.eo-dyo__styl-body h3{margin:0 0 12px}
.eo-dyo__styl-quote{margin:16px 0 0;padding:0 0 0 18px;border-left:3px solid var(--eo-green)}
.eo-dyo__styl-quote p{font-family:var(--eo-font-kop,'Halant',Georgia,serif);font-size:1.3125rem;line-height:1.35;color:var(--eo-navy);margin:0}
.eo-dyo__styl-av{display:flex;gap:14px;align-items:center;margin:18px 0 0;font-weight:600;font-size:.875rem}
.eo-dyo__styl-gez{display:flex}
.eo-dyo__styl-gez img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 25%;border:2px solid var(--eo-bg)}
.eo-dyo__styl-gez img+img{margin-left:-20px}
@media (max-width:900px){
	.eo-dyo__steps{grid-template-columns:1fr}
}
@media (max-width:800px){
	.eo-dyo .eo-cp-hero{min-height:520px}
	.eo-dyo__sec{padding-block:48px}
	.eo-dyo__ci,.eo-dyo__g2,.eo-dyo__g3,.eo-dyo__mbhead{grid-template-columns:1fr;gap:28px}
	.eo-dyo__kws{justify-content:flex-start}
	.eo-dyo__coll{grid-template-columns:1fr 1fr;grid-template-rows:auto}
	.eo-dyo__coll>*{grid-column:auto!important;grid-row:auto!important;height:180px}
	.eo-dyo__coll .eo-dyo__c1{grid-column:1 / 3!important;height:260px}
	.eo-dyo__form{padding:20px}
}
@media (prefers-reduced-motion:reduce){.eo-dyo__th{transition:none}.eo-dyo__th:hover{transform:none}.eo-dyo__mbb{animation:none!important}}

/* 28-10 feedback Lisette: film groter, 4 stappen, pakketfoto's, stylistes + voor/na, Situatie in het formulier. */
.eo-dyo__vid--groot{max-width:1120px;margin:0 auto}
.eo-dyo__usps--midden{justify-content:center;margin-top:24px}
.eo-dyo__maat{max-width:720px;margin:28px auto 8px}
.eo-dyo__pk-foto{display:block;width:calc(100% + 56px);max-width:none;margin:-28px -28px 8px;aspect-ratio:3/2;object-fit:cover}
.eo-dyo__steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.eo-dyo__styl-ba{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:32px;align-items:center}
.eo-dyo__styl-ba .eo-dyo__styl-rij{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.eo-dyo__styl-ba .eo-dyo__styl-kaart{background:none}
.eo-dyo__styl-ba .eo-dyo__styl-foto{aspect-ratio:3/4;object-position:center 25%}
.eo-dyo__styl-kaart figcaption{font-weight:700;padding:10px 0 0;text-align:center}
.eo-dyo__vn{gap:16px}
.eo-dyo__situatie{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px 24px}
.eo-dyo__situatie legend{font-weight:600;font-size:.875rem;margin-bottom:6px;width:100%;padding:0}
.eo-dyo__situatie label{display:flex;gap:8px;align-items:center;font-size:.9375rem;cursor:pointer}
.eo-dyo__situatie .eo-form__fout{width:100%}
@media (max-width:1100px){.eo-dyo__steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){
	.eo-dyo__styl-ba{grid-template-columns:1fr;gap:20px}
	.eo-dyo__steps--4{grid-template-columns:1fr}
}