/* Casepagina Yek Dienstverlening (includes/cases/yekdienst.php).
   Leent de huisstijl van de klant: Sora en Poppins, signaaloranje, zwart en tuingroen. Thema: een oprit, laag voor laag. */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Poppins:wght@400;500;600&display=swap");

.yek {
  --yek-o: #f16322; --yek-o-ink: #b8410f; --yek-o-soft: #fdebe2;
  --yek-black: #111; --yek-green: #228b22; --yek-grey: #f5f5f5;
  --yek-soil: #3b2a1e; --yek-sand: #e3c48c;
  --yek-h: "Sora", var(--f-display);
  --yek-b: "Poppins", var(--f-body);
  font-family: var(--yek-b);
}
.yek .h2, .yek h3 { font-family: var(--yek-h); letter-spacing: -.03em; }
.yek .h2 em { font-style: normal; color: var(--yek-o); }
.yek .eyebrow { color: var(--yek-o-ink); letter-spacing: .18em; }
.yek :focus-visible { outline-color: var(--yek-o); }

/* kop: banner en een bouwbord met de feiten */
.yek-open { padding-top: 20px; padding-bottom: 0; }
.yek-banner { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); }
.yek-banner img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.yek-banner:hover img { transform: scale(1.015); }
.yek-board { position: relative; margin: -46px auto 0; width: min(94%, 1040px); padding: 26px 34px 40px; background: var(--yek-o); color: #111; border-radius: 10px; box-shadow: 0 30px 60px -24px rgba(184,65,15,.55); z-index: 1; }
.yek-board::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 10px 10px; background: repeating-linear-gradient(-45deg, #111 0 14px, var(--yek-o) 14px 28px); }
.yek-board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 2px solid rgba(17,17,17,.85); }
.yek-board-head span { font: 600 13px/1 var(--yek-b); letter-spacing: .2em; text-transform: uppercase; }
.yek-board-head b { font: 800 clamp(1.6rem, 3.4vw, 2.4rem)/1 var(--yek-h); letter-spacing: -.03em; }
.yek-board dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 24px; margin: 0; }
.yek-board dt { font: 600 11.5px/1 var(--yek-b); letter-spacing: .14em; text-transform: uppercase; opacity: .72; margin-bottom: 7px; }
.yek-board dd { margin: 0; font-weight: 500; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.yek-board dd a { color: #111; font-weight: 600; text-decoration: none; border-bottom: 2px solid #111; }
.yek-bolt { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b9b9b9 45%, #6c6c6c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.yek-bolt:nth-of-type(1) { left: 12px; top: 12px; } .yek-bolt:nth-of-type(2) { right: 12px; top: 12px; }
.yek-bolt:nth-of-type(3) { left: 12px; bottom: 24px; } .yek-bolt:nth-of-type(4) { right: 12px; bottom: 24px; }

/* laag voor laag: stappen links, een doorsnede met browser rechts */
.yek-build-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); margin-top: 40px; }
.yek-steps { list-style: none; margin: 0; padding: 0; }
.yek-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .5s; }
.yek-step.on { opacity: 1; }
.yek-step:first-child { min-height: 46vh; justify-content: flex-start; padding-top: 6vh; }
.yek-step:last-child { min-height: 56vh; }
.yek-step-k { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 13px/1.3 var(--yek-b); letter-spacing: .12em; text-transform: uppercase; color: var(--yek-o-ink); }
.yek-step-k span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--yek-o); color: #fff; font: 800 17px/1 var(--yek-h); letter-spacing: 0; }
.yek-step-k b { color: var(--ink); font-weight: 600; letter-spacing: .04em; text-transform: none; }
.yek-step h3 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; }
.yek-step p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.65; margin: 0; max-width: 46ch; }
.yek-step-shot { display: none; }
.yek-pit { position: sticky; top: 96px; align-self: start; display: grid; gap: 14px; }
.yek-window { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.yek-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--yek-grey); border-bottom: 1px solid var(--line); }
.yek-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d7d7d7; }
.yek-bar span { margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: #fff; font: 500 12.5px var(--f-mono); color: var(--muted); }
.yek-bar b { color: var(--yek-o-ink); font-weight: 600; }
.yek-shots { position: relative; aspect-ratio: 16 / 10; }
.yek-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: translateY(14px); transition: opacity .55s, transform .7s cubic-bezier(.2,.8,.2,1); }
.yek-shots img.on { opacity: 1; transform: none; }
.yek-section { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: linear-gradient(#fff, var(--yek-grey)); border: 1px solid var(--line); min-height: 236px; justify-content: flex-end; }
.yek-layer { position: relative; display: flex; align-items: center; height: 0; padding: 0 16px; overflow: hidden; transition: height .7s cubic-bezier(.2,.8,.2,1), filter .4s; }
.yek-layer span { font: 600 12.5px/1 var(--yek-b); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.28); white-space: nowrap; }
.yek-layer.on { height: 56px; }
.yek-layer.now { box-shadow: inset 4px 0 0 var(--yek-o); }
.yek-grond { background: radial-gradient(circle at 20% 40%, rgba(0,0,0,.25) 2px, transparent 3px) 0 0 / 18px 14px, radial-gradient(circle at 70% 70%, rgba(255,255,255,.08) 1.5px, transparent 2.5px) 0 0 / 23px 17px, linear-gradient(#4a3424, var(--yek-soil)); }
.yek-puin { background: radial-gradient(circle at 30% 30%, #9a9a9a 4px, transparent 5px) 0 0 / 22px 18px, radial-gradient(circle at 70% 70%, #7a7a7a 5px, transparent 6px) 6px 4px / 26px 20px, radial-gradient(circle at 50% 50%, #b7b0a5 3px, transparent 4px) 3px 9px / 15px 13px, #5f5a54; }
.yek-zand { background: radial-gradient(circle, rgba(140,100,40,.35) 1px, transparent 1.5px) 0 0 / 6px 5px, linear-gradient(#ecd3a0, var(--yek-sand)); }
.yek-zand span { color: #3b2a1e; text-shadow: none; background: rgba(255,255,255,.55); }
.yek-steen { background:
  linear-gradient(90deg, rgba(58,42,32,.9) 2px, transparent 2px) 0 0 / 48px 28px,
  linear-gradient(rgba(58,42,32,.9) 2px, transparent 2px) 0 0 / 48px 28px,
  linear-gradient(90deg, rgba(58,42,32,.9) 2px, transparent 2px) 24px 14px / 48px 28px,
  linear-gradient(90deg, #c2622f, #a64a26 30%, #cf7040 55%, #b5532b 80%, #c2622f); }

/* legpatroon */
.yek-pattern { background: var(--yek-grey); }
.yek-pattern-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.yek-picker { display: grid; gap: 8px; margin: 28px 0 22px; }
.yek-picker button { display: grid; gap: 4px; padding: 14px 18px; text-align: left; border: 1px solid transparent; border-radius: 16px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s; }
.yek-picker button:hover { background: rgba(255,255,255,.7); }
.yek-picker b { font: 700 1.1rem/1.2 var(--yek-h); letter-spacing: -.02em; }
.yek-picker small { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.yek-picker small { display: none; }
.yek-picker button[aria-checked="true"] { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.yek-picker button[aria-checked="true"] b { color: var(--yek-o-ink); }
.yek-picker button[aria-checked="true"] small { display: block; animation: yek-fade .5s; }
@keyframes yek-fade { from { opacity: 0; transform: translateY(-4px); } }
.yek-relay span { display: inline-block; transition: transform .6s; }
.yek-relay:hover span { transform: rotate(180deg); }
.yek-yard { margin: 0; }
.yek-bricks { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: #3a2a20; box-shadow: var(--shadow-lg), inset 0 0 0 8px #9a9a9a, inset 0 0 0 10px #6f6f6f; }
.yek-bricks::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 10px #8c8c8c, inset 0 0 40px rgba(0,0,0,.35); }
.yek-brick { position: absolute; left: 0; top: 0; border-radius: 3px; background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 82%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: transform .9s cubic-bezier(.6,0,.2,1) var(--d, 0s), opacity .5s var(--d, 0s); will-change: transform; }
.yek-yard figcaption { margin-top: 14px; text-align: center; font: 500 13px var(--f-mono); color: var(--muted); }

/* bestek */
.yek-posts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.yek-posts li { position: relative; padding: 26px 26px 30px 0; border-bottom: 1px solid var(--line); }
.yek-posts li:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px dashed rgba(22,20,31,.16); }
.yek-post-nr { display: inline-block; margin-bottom: 14px; font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--yek-o-ink); }
.yek-posts h3 { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.25; padding-right: 36px; }
.yek-posts p { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: .98rem; }
.yek-check { position: absolute; right: 0; top: 22px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--yek-green); color: var(--yek-green); font-weight: 700; font-size: 14px; transform: rotate(-8deg); }
.yek-posts li:not(:nth-child(3n)) .yek-check { right: 20px; }

/* film */
.yek-film { background: #111; color: #fff; }
.yek-film .h2 { color: #fff; }
.yek-film .sec-lead { color: rgba(255,255,255,.72); }
.yek-film .eyebrow { color: var(--yek-o); }
.yek-film-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.yek-video { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 90px -30px rgba(241,99,34,.45); border: 1px solid rgba(255,255,255,.08); }
.yek-video video { display: block; width: 100%; height: auto; }

/* huisstijl */
.yek-kit-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.yek-logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: var(--shadow-lg); padding: 14%; }
.yek-logo img { width: 100%; height: auto; }
.yek-colors { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.yek-colors li { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.yek-colors span { height: 64px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); margin-bottom: 8px; }
.yek-colors b { font-size: 14px; font-weight: 600; }
.yek-colors code { font: 12px var(--f-mono); color: var(--muted); }
.yek-type { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 22px; padding: 20px 24px; border-radius: 16px; background: var(--yek-grey); }
.yek-type p { margin: 0; }
.yek-type small { font: 12px var(--f-mono); color: var(--muted); }
.yek-type-h { font: 800 2rem/1 var(--yek-h); letter-spacing: -.03em; }
.yek-type-b { font: 400 1.5rem/1 var(--yek-b); }
.yek-btn { margin-left: auto; padding: 13px 24px; border-radius: 999px; background: var(--yek-o); color: #fff; font: 600 15px var(--yek-b); box-shadow: 0 10px 24px -8px rgba(241,99,34,.6); }

@media (max-width: 960px) {
  .yek-board { margin-top: 18px; width: 100%; }
  .yek-board dl { grid-template-columns: 1fr 1fr; }
  .yek-build-grid, .yek-pattern-grid, .yek-film-grid, .yek-kit-grid { grid-template-columns: 1fr; }
  .yek-pit { display: none; }
  .yek-step, .yek-step:first-child, .yek-step:last-child { min-height: 0; opacity: 1; padding: 0 0 44px; }
  .yek-step-shot { display: block; width: 100%; height: auto; margin-top: 18px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .yek-posts { grid-template-columns: 1fr 1fr; }
  .yek-posts li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .yek-posts li:nth-child(even) { padding-left: 22px; border-left: 1px dashed rgba(22,20,31,.16); }
  .yek-posts li .yek-check, .yek-posts li:not(:nth-child(3n)) .yek-check { right: 16px; }
  .yek-logo { width: min(60%, 280px); margin: 0 auto; }
}
@media (max-width: 600px) {
  .yek-board { padding: 22px 22px 36px; }
  .yek-board dl { grid-template-columns: 1fr; }
  .yek-posts { grid-template-columns: 1fr; }
  .yek-posts li:nth-child(even) { padding-left: 0; border-left: 0; }
  .yek-colors { grid-template-columns: 1fr 1fr; }
  .yek-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yek-brick, .yek-layer, .yek-shots img { transition: none; }
}