/* ═══ witte blokken tussen de donkere, zoals thefellasads.com ════════════════════════════════
   Harde randen, plat (lijnen en stippen in plaats van zware kaarten), zwarte tekst, een labelrij
   met stippellijn bovenin, en het menu wordt licht zolang het boven een wit blok hangt.
   De kleurvariabelen worden binnen .light omgedraaid, zodat alle bestaande onderdelen meegaan. */
.block.light{--ink:#0A0A0C;--ink2:#46464E;--muted:#7A7A82;--line:rgba(10,10,12,.12);--bg2:#F5F5F3;--bg3:#EDEDEA;
  background:#fff;color:var(--ink);padding-top:clamp(7rem,14vh,9.5rem)}
.lrow{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:1rem var(--gutter);font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#0A0A0C}
.lrow::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px dashed currentColor;opacity:.3}
.lrow span:nth-child(2){position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}

/* lime als tekst is onleesbaar op wit: daar wordt het zwart, lime blijft voor knoppen en lijnen */
.light .eyebrow,.light .step .when,.light .snum,.light .case-stats b{color:var(--ink)}
.light .eyebrow .dot{background:var(--ink);animation:none}
.light .display em{color:var(--ink)}
.light .scores em{color:var(--ink)}
.light .tlink{color:var(--ink);border-color:rgba(10,10,12,.25)}
.light .tlink:hover{border-color:var(--ink)}

/* werk */
.light .case{background:#fff;border-color:var(--line)}
.light .case.clickable:hover{border-color:rgba(10,10,12,.3)}
.light .ba{border-color:var(--line);box-shadow:0 40px 80px -50px rgba(10,10,12,.35)}
.light .scores li{background:#fff}
.light .pcard{background:#fff}
.light .pcard:hover{border-color:rgba(10,10,12,.3)}
.light .shot .pframe{border-color:var(--line)}

/* proces: zwart lijntje en zwarte stip in plaats van lime */
.light .step::before{background:var(--ink)}

/* prijzen */
.light .ptabs button{background:#fff}
.light .ptabs button:hover{border-color:var(--ink);color:var(--ink)}
.light .ptabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.light .plan{background:#fff}
.light .plan li::before{background:var(--ink)}
.light .pbtn:hover{border-color:var(--ink);color:var(--ink)}
.light .plan.featured{--ink:#F3F1EA;--ink2:#C9C6BC;--muted:#8E8C98;--line:rgba(243,241,234,.12);background:#0A0A0C;border-color:#0A0A0C;color:var(--ink);box-shadow:0 40px 80px -40px rgba(10,10,12,.5)}
.light .plan.featured li::before{background:var(--accent)}
.light .swipe-dots i{background:rgba(10,10,12,.15)}
.light .swipe-dots i.on{background:var(--ink)}

/* menu boven een wit blok */
.pill{transition:background .35s,border-color .35s}
.navlight .pill{background:rgba(255,255,255,.85);border-color:rgba(10,10,12,.1)}
.navlight .pill .brand,.navlight .pill .brand em,.navlight .pill a.link{color:#0A0A0C}
.navlight .pbook{background:#0A0A0C;color:#fff;box-shadow:none}
.navlight .pbook::before{opacity:0;animation:none}
.navlight .burger{background:rgba(10,10,12,.06)}
.navlight .burger i{background:#0A0A0C}
@media(pointer:coarse){.navlight .pill{background:rgba(255,255,255,.97)}}
.menu-open .pill{background:rgba(18,18,24,.92)!important;border-color:rgba(255,255,255,.12)!important}
.menu-open .pill .brand{color:var(--ink)!important}.menu-open .pill .brand em{color:var(--accent)!important}
.menu-open .burger i{background:var(--ink)!important}
.menu-open .pbook{background:var(--accent)!important;color:#0A0A0C!important}

@media(max-width:700px){
  .block.light{padding-top:5.5rem}
  .lrow{padding:.9rem 1.3rem;font-size:.62rem;letter-spacing:.14em}
  .lrow span:nth-child(2){display:none}
}

/* ═══ persoonlijk: de makers in de hero, wie we zijn, garanties ═══ */
.av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#0A0A0C;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1;border:2px solid var(--bg);overflow:hidden;background-size:cover;background-position:center}
.makers{display:inline-flex;align-items:center;gap:.2rem;margin-top:1.3rem;font-size:.9rem;font-weight:700;color:var(--ink2);transition:color .3s}
.makers .av+.av{margin-left:-10px;background:#E8E6DF}
.makers>span:last-child{margin-left:.7rem}
.makers:hover{color:var(--ink)}
.member{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center}
.member .av{grid-row:1/3;width:44px;height:44px;font-size:1.3rem}
.member:nth-child(2) .av{background:#E8E6DF}

.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,6vw,6rem);max-width:80rem;margin:0 auto;align-items:center}
.about-copy .display{font-size:clamp(2.6rem,4.6vw,4.6rem);margin:.8rem 0 1.4rem}
.about-text p{color:var(--ink2);font-size:1.08rem;line-height:1.7;margin-bottom:1rem;max-width:34em}
.about-text p:first-child{color:var(--ink);font-weight:600}
.about-facts{list-style:none;margin-top:1.8rem;border-top:1px solid var(--line)}
.about-facts li{position:relative;padding:1rem 0 1rem 1.6rem;border-bottom:1px solid var(--line)}
.about-facts li::before{content:"";position:absolute;left:0;top:1.5rem;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.about-facts b{display:block;font-size:1rem;font-weight:800;color:var(--ink)}
.about-facts span{display:block;font-size:.95rem;color:var(--ink2);margin-top:.15rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.person{margin:0}
.person:nth-child(2){margin-top:3rem}
.ph{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;display:grid;place-items:center;background:#F1F1EE;border:1px solid var(--line);background-size:cover;background-position:center}
.ph span{font-family:var(--serif);font-style:italic;font-size:clamp(4rem,9vw,7rem);color:#0A0A0C;opacity:.9}
.person:first-child .ph{background-color:var(--accent);border-color:var(--accent)}
.person figcaption{padding-top:.9rem}
.person figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.person figcaption span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
.person figcaption p{font-size:.92rem;color:var(--ink2);line-height:1.5;margin-top:.5rem}

.promises{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;max-width:80rem;margin:3rem auto 0;padding-top:2rem;border-top:1px solid var(--line)}
.promises li{padding-left:1.4rem;position:relative}
.promises li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.promises b{display:block;font-size:1rem;font-weight:800;color:var(--ink)}
.promises span{display:block;font-size:.9rem;color:var(--ink2);margin-top:.25rem;line-height:1.5}
.stat b small{font-size:.45em;color:var(--ink2)}

@media(max-width:980px){
  .about{grid-template-columns:minmax(0,1fr)}
  .promises{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.4rem}
}
@media(max-width:700px){
  .duo{gap:.7rem}
  .person:nth-child(2){margin-top:2rem}
  .person figcaption b{font-size:1.25rem}
  .person figcaption p{font-size:.85rem}
  .promises{grid-template-columns:minmax(0,1fr)}
  .makers{font-size:.82rem}
}
#diensten{padding-top:7rem;background:rgba(9,9,12,.55)}
@media(max-width:700px){#diensten{padding-top:4.5rem}}
@media(max-width:700px){.hero2 .eyebrow{flex-wrap:nowrap;white-space:nowrap;font-size:.66rem;letter-spacing:.12em}}

/* tweede case: Graveka (nog geen screenshots, dus de cijfers zijn het beeld) */
.case-gk{grid-template-columns:1fr 1.25fr}
.gk-vis{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:22rem;padding:clamp(1.4rem,3vw,2.4rem);border-radius:18px;background:#2B2B2E;color:#F3F1EA;
  background-image:radial-gradient(80% 60% at 85% 10%,rgba(201,98,58,.55),transparent 70%),radial-gradient(60% 50% at 10% 100%,rgba(166,64,44,.45),transparent 70%)}
.gk-big b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(4rem,8vw,7rem);line-height:.9}
.gk-big span{display:block;margin-top:.6rem;font-weight:700;color:rgba(243,241,234,.8)}
.gk-vis ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem;gap:.6rem;padding-top:1.2rem;border-top:1px solid rgba(243,241,234,.18)}
.gk-vis li b{display:block;font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1}
.gk-vis li span{display:block;font-size:.75rem;font-weight:700;color:rgba(243,241,234,.7);margin-top:.3rem}
.status{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700;color:var(--ink2)}
.status i{width:8px;height:8px;border-radius:50%;background:#E0A100}
@media(max-width:980px){.case-gk{grid-template-columns:1fr}}
@media(max-width:700px){.gk-vis{min-height:0}.gk-vis ul{grid-template-columns:1fr 1fr;row-gap:1rem}}

/* ═══ Shopify is ons vak: drie diensten met prijs ═══ */
.services.shop3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop3 .svc{display:flex;flex-direction:column}
.shop3 .svc h3{font-size:clamp(1.7rem,2.4vw,2.1rem)}
.shop3 .svc ul{flex:1}
.svprice{margin-top:1.2rem;font-size:.9rem!important;font-weight:600;color:var(--ink2)}
.svprice b{font-family:var(--serif);font-weight:400;font-size:1.9rem;color:var(--ink);margin:0 .15rem}
.shop3 .svlink{margin-top:.6rem}
.svalso{text-align:center;max-width:52rem;margin:2.2rem auto 0;font-size:.98rem;font-weight:600;color:var(--ink2);line-height:1.9}
.svalso a{color:var(--ink);border-bottom:2px solid rgba(200,255,87,.4);white-space:nowrap;transition:border-color .3s}
.svalso a:hover{border-color:var(--accent)}

/* ═══ cases: probleem / wat we deden / resultaat + resultaten in klanttaal ═══ */
.pwr{margin:1.2rem 0 1.4rem;border-top:1px solid var(--line)}
.pwr>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.pwr dt{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.25rem}
.pwr dd{font-size:1rem;line-height:1.55;color:var(--ink2)}
.pwr>div:last-child dd{color:var(--ink);font-weight:700}
.scores.wins b{margin-top:0}
.scores.wins em{font-size:2.1rem}
.scores.wins span{margin-top:.35rem;font-size:.78rem;line-height:1.35}
@media(max-width:900px){.services.shop3{grid-template-columns:minmax(0,1fr)}.shop3 .svc{max-width:40rem;margin:0 auto;width:100%}}
@media(max-width:700px){
  .services.shop3{display:flex!important}
  .pwr>div{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .svalso{text-align:left}
}

/* ═══ uitbreidingen bij de webshop-pakketten ═══ */
.upsell{max-width:58rem;margin:3.2rem auto 0}
.uphead{text-align:center;margin-bottom:1.4rem}
.uphead h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;color:var(--ink)}
.uphead p{color:var(--ink2);margin-top:.4rem;font-size:1rem}
.uplist{list-style:none;border-top:1px solid var(--line)}
.uplist li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1.4rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.uplist li>div b{display:block;font-size:1.02rem;font-weight:800;color:var(--ink)}
.uplist li>div span{display:block;font-size:.92rem;color:var(--ink2);line-height:1.5;margin-top:.15rem}
.uplist li>p{text-align:right;white-space:nowrap}
.uplist li>p b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1;color:var(--ink)}
.uplist li>p small{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.uplist li>a{display:inline-flex;align-items:center;min-height:40px;padding:0 1.1rem;border-radius:100px;border:1px solid var(--line);font-size:.85rem;font-weight:700;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.uplist li>a::before{content:"+";margin-right:.4rem;font-weight:800}
.uplist li>a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:700px){
  .uplist li{grid-template-columns:minmax(0,1fr) auto;gap:.6rem 1rem}
  .uplist li>div{grid-column:1/-1}
  .uplist li>p{text-align:left;display:flex;align-items:baseline;gap:.5rem}
  .uplist li>p small{margin-top:0}
  .uphead{text-align:left}
}
/* geen bedragen op de site (besluit 7 okt): upsellregel = tekst + knop, en een knop onder de pakketten */
.uplist li{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:700px){.uplist li{grid-template-columns:minmax(0,1fr) auto}.uplist li>div{grid-column:auto}}
.pcta{text-align:center;margin-top:1.4rem}
/* lime knoppen houden altijd zwarte tekst, ook bij hover in een donkere kaart binnen een wit blok */
.light .pbtn.primary,.light .pbtn.primary:hover{color:#0A0A0C}
.light .plan.featured .pbtn:not(.primary):hover{color:var(--accent);border-color:var(--accent)}

/* zonder foto's (besluit 7 okt): makers als tekst, team als twee tekstkaarten */
.makers .mdot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.2rem;flex:none}
.makers>span:last-child{margin-left:.4rem}
.member{display:block}
.duo{align-self:center}
.person{padding:1.6rem 1.4rem;border:1px solid var(--line);border-radius:20px;background:#fff}
.person:first-child{border-color:var(--ink);box-shadow:inset 0 4px 0 var(--accent)}
.person:nth-child(2){margin-top:3rem}
.person figcaption{padding-top:0}
.person figcaption b{font-size:1.8rem}
@media(max-width:700px){.duo{grid-template-columns:minmax(0,1fr)}.person:nth-child(2){margin-top:0}.person figcaption b{font-size:1.5rem}}
/* hero-podium: telefoon binnen het blok, onderkant gelijk met de laptopvoet (top via main.js) */
@media(min-width:701px){.ls-phone{bottom:auto;right:-1.5%}.ls-note{margin-top:2rem}}
/* telefoon-mockup: geen notch; het scherm wordt echt afgerond geknipt, zodat de witte (sticky) menubalk
   niet meer met rechte hoeken buiten het frame steekt */
.ls-notch{display:none}
.ls-phone .ls-scroll{clip-path:inset(0 round 23px);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.ls-laptop .ls-scroll{clip-path:inset(0)}
.ls-top{background:#fff}
.ls-phone .ls-top{padding:18px 26px 14px 30px}

/* teamfoto's (7 okt): zelfde formaat 3:4, foto bovenin de kaart */
.person{padding:0;overflow:hidden}
.person .ph{aspect-ratio:3/4;border:0;border-radius:0;background:#E9E9E6}
.person:first-child .ph{background-color:#E9E9E6}
.person .ph img{width:100%;height:100%;object-fit:cover;display:block}
.person figcaption{padding:1.2rem 1.3rem 1.4rem}
.person:first-child{box-shadow:none;border-color:var(--line)}
.person:first-child figcaption{box-shadow:inset 0 3px 0 var(--accent)}
@media(max-width:700px){
  .duo{grid-template-columns:1fr 1fr;gap:.7rem}
  .person:nth-child(2){margin-top:1.6rem}
  .person figcaption{padding:.8rem .8rem 1rem}
  .person figcaption b{font-size:1.15rem}
  .person figcaption span{font-size:.6rem;letter-spacing:.1em}
  .person figcaption p{font-size:.8rem}
}