*{box-sizing:border-box}
:root{
  --ink:#111;
  --paper:#f1eee7;
  --white:#fff;
  --line:rgba(17,17,17,.16);
  --darkline:rgba(255,255,255,.16);
  --accent:#da5b34;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Navigation */
.nav{
  position:absolute;z-index:50;inset:0 0 auto 0;
  display:flex;justify-content:space-between;align-items:center;
  padding:24px clamp(20px,4vw,62px);color:var(--ink)
}
.nav nav{display:flex;gap:28px;font-size:.8rem}
.nav nav a{opacity:.62}
.nav nav a:hover{opacity:1}
.nav-project{position:fixed;color:var(--white);mix-blend-mode:difference}
.wordmark{font-size:.82rem;font-weight:700;letter-spacing:-.02em}

/* Hero */
.hero{
  background:var(--paper);color:var(--ink);min-height:100svh;
  padding:130px clamp(20px,5vw,76px) clamp(72px,8vw,115px);
  display:flex;align-items:center
}
.hero-inner{
  width:100%;max-width:1450px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);
  gap:clamp(52px,8vw,130px);align-items:center
}
.hero-copy{max-width:780px}
.hero h1,.project-head h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  letter-spacing:-.065em;line-height:.9;margin:0
}
.hero h1{font-size:clamp(4.6rem,8.5vw,9.2rem)}
.kicker{
  text-transform:uppercase;letter-spacing:.15em;font-size:.67rem;
  color:rgba(255,255,255,.58);margin:0 0 18px
}
.kicker.dark{color:#747169}
.subtitle{font-size:clamp(1rem,1.45vw,1.3rem);color:#666159;margin:25px 0 0}
.hero-intro{
  font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.55;
  color:#45423d;max-width:610px;margin:34px 0 0
}
.hero-button{
  display:inline-block;margin-top:38px;padding-bottom:6px;
  border-bottom:1px solid var(--ink);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.12em
}
.hero-button:hover{color:var(--accent);border-color:var(--accent)}
.portrait-wrap{
  position:relative;justify-self:end;width:min(100%,470px);
  aspect-ratio:4/5;overflow:hidden;background:#d8d3c8
}
.portrait{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.portrait-fallback{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  text-align:center;background:linear-gradient(140deg,#ded9cf,#c8c1b5);
  color:#77736b;font-size:.75rem;line-height:1.7;text-transform:uppercase;
  letter-spacing:.12em
}

/* Media band */
.media-strip{position:relative;background:#e7e2d8;color:var(--ink);padding:72px 0 82px}
.media-heading{padding:0 clamp(20px,4vw,62px)}
.media-marquee{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%)
}
.media-track{
  display:flex;align-items:center;width:max-content;
  animation:media-scroll 25s linear infinite;will-change:transform
}
.media-marquee:hover .media-track,
.media-marquee:focus-within .media-track,
.media-marquee.is-paused .media-track{animation-play-state:paused}

/* Every logo gets exactly the same slot */
.media-item{
  flex:0 0 240px;width:240px;height:118px;
  display:flex;align-items:center;justify-content:center;
  padding:18px 28px;transition:transform .22s ease,background .22s ease
}
.media-item:hover,.media-item:focus{
  transform:scale(1.035);background:rgba(255,255,255,.34);outline:none
}
.media-logo{width:auto;max-width:100%;object-fit:contain}
.media-logo-parool{height:48px}
.media-logo-vpro{height:42px}
.media-logo-nrc{height:37px}
.media-logo-volkskrant{height:35px}
.media-logo-trouw{height:42px}
.media-logo-fd{height:76px}
.media-logo-npo{height:62px}
@keyframes media-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Media popup */
.media-popup{
  position:fixed;z-index:300;width:278px;
  opacity:0;visibility:hidden;pointer-events:auto;
  transform:translateY(7px) scale(.985);
  transition:opacity .16s ease,transform .16s ease,visibility .16s
}
.media-popup.is-visible{opacity:1;visibility:visible;transform:none}
.media-popup-link{display:block;color:inherit}
.mini-site{
  overflow:hidden;background:#fff;color:#111;border:1px solid rgba(17,17,17,.16);
  border-radius:10px;box-shadow:0 20px 55px rgba(17,17,17,.24)
}
.mini-site-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:40px;padding:9px 12px;border-bottom:1px solid rgba(17,17,17,.1)
}
.mini-site-brand{font-family:Georgia,"Times New Roman",serif;font-size:.98rem;font-weight:700}
.mini-site-domain{font-size:.51rem;text-transform:uppercase;letter-spacing:.08em;color:#77736b}
.mini-site-body{padding:14px 14px 16px}
.mini-site-type{
  display:block;margin-bottom:7px;font-size:.52rem;text-transform:uppercase;
  letter-spacing:.12em;color:#77736b
}
.mini-site-title{
  display:block;font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;line-height:1.06;font-weight:400;letter-spacing:-.025em
}
.mini-site-image-wrap{
  height:108px;margin:11px -14px 0;overflow:hidden;background:#ece8e1;
  border-top:1px solid rgba(17,17,17,.08);
  border-bottom:1px solid rgba(17,17,17,.08)
}
.mini-site-image-wrap.is-empty{display:none}
.mini-site-image{width:100%;height:100%;object-fit:cover;object-position:top center}
.mini-site-copy{font-size:.69rem;line-height:1.4;color:#59554e;margin:10px 0 0}
.mini-site-quote{
  font-family:Georgia,"Times New Roman",serif;font-size:.86rem;
  line-height:1.25;font-style:italic;margin:10px 0 0
}
.mini-site-cta{
  display:inline-block;margin-top:12px;font-size:.52rem;text-transform:uppercase;
  letter-spacing:.1em;border-bottom:1px solid;padding-bottom:3px
}
.media-popup[data-theme="parool"] .mini-site{border-top:4px solid #111}
.media-popup[data-theme="parool"] .mini-site-top{background:#f4f1eb}
.media-popup[data-theme="vpro"] .mini-site{border-top:4px solid #7a2df4}
.media-popup[data-theme="vpro"] .mini-site-top{background:#f7e8ff}
.media-popup[data-theme="nrc"] .mini-site{border-top:4px solid #d71920}
.media-popup[data-theme="nrc"] .mini-site-top{background:#fff2d9}
.media-popup[data-theme="volkskrant"] .mini-site{border-top:4px solid #111}
.media-popup[data-theme="volkskrant"] .mini-site-top{background:#eef3ff}
.media-popup[data-theme="trouw"] .mini-site{border-top:4px solid #1468b3}
.media-popup[data-theme="trouw"] .mini-site-top{background:#f4efe7}
.media-popup[data-theme="fd"] .mini-site{border-top:4px solid #52bfc3}
.media-popup[data-theme="fd"] .mini-site-top{background:#ffe9d8}
.media-popup[data-theme="npo"] .mini-site{border-top:4px solid #173a72}
.media-popup[data-theme="npo"] .mini-site-top{background:#eef2fa}
.media-popup[data-theme="npo"] .mini-site-brand{color:#173a72}

/* Work — hard fixed: cover left, text right */
.work{
  background:var(--paper);
  color:var(--ink);
  padding:72px clamp(20px,4vw,62px) 96px;
}

.work-heading{
  width:min(100%,1180px);
  margin:0 auto 18px;
}

.work-row{
  width:min(100%,1180px) !important;
  margin:0 auto !important;
  padding:82px 0 !important;
  border-top:1px solid var(--line);
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:clamp(48px,7vw,96px) !important;
}

.work-row:last-child{
  border-bottom:1px solid var(--line);
}

.work-row > .cover-link{
  order:1 !important;
  flex:0 0 360px !important;
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
  height:360px !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  align-self:center !important;
  overflow:hidden;
  background:#ddd;
}

.work-row > .cover-link img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
}

.work-row > .work-copy{
  order:2 !important;
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:680px !important;
  margin:0 !important;
  align-self:center !important;
}

.work-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#77736b;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.64rem;
  margin-bottom:26px;
}

.work-copy h3{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.2rem,5.4vw,6rem);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:400;
  margin:0;
}

.work-copy p{
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.55;
  color:#514e48;
  max-width:620px;
  margin:28px 0;
}

.home-review{
  display:block;
  max-width:560px;
  margin:0 0 30px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.home-review-source{
  display:block;
  margin-bottom:8px;
  color:#77736b;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.65rem;
}

.home-review-quote{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.2rem,1.8vw,1.65rem);
  line-height:1.25;
  font-style:italic;
}

.actions{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.text-link{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  border-bottom:1px solid;
  padding-bottom:5px;
}

.muted-link{color:#77736b}

@media(max-width:900px){
  .work-row > .cover-link{
    flex-basis:300px !important;
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;
    height:300px !important;
  }

  .work-row{
    gap:40px !important;
  }
}

/* Only stack on an actual phone. */
@media(max-width:520px){
  .work-row{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:32px !important;
  }

  .work-row > .cover-link{
    flex:none !important;
    width:min(100%,420px) !important;
    min-width:0 !important;
    max-width:420px !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
  }

  .work-row > .work-copy{
    width:100% !important;
    max-width:100% !important;
  }
}

/* About + services */
.about{background:#d8d3c8;color:var(--ink);padding:clamp(105px,14vw,190px) clamp(20px,4vw,62px)}
.about-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(50px,8vw,130px)}
.about h2{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(3rem,6.4vw,7rem);
  line-height:.94;letter-spacing:-.06em;font-weight:400;margin:0
}
.body-copy{font-size:1.05rem;line-height:1.65;color:#47443e}
.services-simple{background:var(--paper);color:var(--ink);padding:clamp(90px,11vw,145px) clamp(20px,4vw,62px)}
.services-list{list-style:none;margin:0;padding:0;max-width:980px;border-top:1px solid var(--line)}
.services-list li{
  padding:20px 0;border-bottom:1px solid var(--line);
  font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.55;color:#514e48
}
.services-list strong{color:var(--ink);font-weight:600}

/* Contact */
.contact{padding:clamp(110px,15vw,200px) clamp(20px,4vw,62px)}
.contact h2{
  font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(3.4rem,8vw,8rem);letter-spacing:-.06em;line-height:.9;margin:0
}
.email{
  display:inline-block;font-size:clamp(1.35rem,3vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.45);margin:60px 0 75px
}
.socials{display:flex;gap:15px;color:rgba(255,255,255,.68)}
.social-link{
  width:43px;height:43px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:grid;place-items:center
}
.social-link svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round
}
.social-link:last-child svg{fill:currentColor;stroke:none}
footer{
  display:flex;justify-content:space-between;padding:28px clamp(20px,4vw,62px) 36px;
  border-top:1px solid var(--darkline);font-size:.65rem;color:rgba(255,255,255,.42);
  text-transform:uppercase;letter-spacing:.12em
}

/* Project pages */
.project-page{background:var(--ink)}
.project-hero{
  min-height:100svh;display:grid;grid-template-columns:minmax(320px,47vw) 1fr;
  align-items:center;gap:clamp(50px,8vw,130px);padding:130px clamp(20px,5vw,76px) 75px
}
.project-cover{box-shadow:0 30px 90px rgba(0,0,0,.35)}
.project-cover img{aspect-ratio:1;object-fit:cover}
.project-head h1{font-size:clamp(4rem,8vw,9rem)}
.project-role{font-size:1.1rem;color:rgba(255,255,255,.62);margin:30px 0 42px}
.listen-buttons{display:flex;flex-wrap:wrap;gap:12px}
.spotify-button{
  display:inline-flex;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  padding:14px 21px;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem
}
.project-body{
  background:var(--paper);color:var(--ink);display:grid;
  grid-template-columns:.35fr .65fr;gap:clamp(50px,10vw,160px);
  padding:clamp(100px,13vw,180px) clamp(20px,6vw,90px)
}
.project-facts{border-top:1px solid var(--line)}
.project-facts div{
  display:grid;grid-template-columns:100px 1fr;padding:18px 0;
  border-bottom:1px solid var(--line);font-size:.76rem
}
.project-facts span{color:#77736b}
.project-facts strong{font-weight:400}
.description{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,3vw,3.5rem);
  line-height:1.17;letter-spacing:-.025em
}
.reviews{background:var(--ink);padding:clamp(80px,10vw,130px) clamp(20px,6vw,90px)}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,55px)}
.review-card{
  display:block;padding:28px 0;border-top:1px solid var(--darkline);
  border-bottom:1px solid var(--darkline)
}
.review-source{
  display:block;color:rgba(255,255,255,.56);text-transform:uppercase;
  letter-spacing:.11em;font-size:.68rem;margin-bottom:22px
}
.review-card blockquote{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,3.2vw,3.6rem);
  line-height:1.12;letter-spacing:-.035em;font-style:italic;margin:0;color:var(--white)
}
.listen{background:#d8d3c8;color:var(--ink);padding:clamp(95px,12vw,160px) clamp(20px,6vw,90px)}
.listen iframe{max-width:900px}
.project-next{padding:80px clamp(20px,6vw,90px);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:820px){
  .hero{min-height:auto;padding-top:125px}
  .hero-inner,.about-grid,.project-hero,.project-body,.review-grid{grid-template-columns:1fr}
  .hero-inner{gap:48px}
  .portrait-wrap{justify-self:start;width:min(72vw,430px)}
  .project-cover{max-width:620px}
  .project-head h1{font-size:clamp(4rem,14vw,7rem)}
}

@media(max-width:560px){
  .nav{padding-top:20px}
  .nav nav{gap:15px;font-size:.72rem}
  .hero{padding-top:112px;padding-bottom:72px}
  .hero h1{font-size:clamp(3.9rem,18vw,6.2rem)}
  .portrait-wrap{width:100%;max-width:380px}
  .work-copy h3{font-size:clamp(3rem,15vw,5rem)}
  .work-meta{flex-direction:column;gap:7px}
  footer{flex-direction:column;gap:8px}
  .media-item{flex-basis:190px;width:190px;height:98px}
  .media-popup{display:none}
}
@media(prefers-reduced-motion:reduce){
  .media-track{animation:none}
  .reveal{transition:none}
}
/* V6.3 — ensure Trouw preview remains visible and readable */
.media-popup[data-theme="trouw"] .mini-site{
  border-top:4px solid #1468b3;
}
.media-popup[data-theme="trouw"] .mini-site-top{
  background:#f4efe7;
}


/* V6.7 — both project rows share one exact container */
.work{
  padding-left:clamp(20px,4vw,62px) !important;
  padding-right:clamp(20px,4vw,62px) !important;
}

.work-inner{
  width:min(100%,1180px) !important;
  margin:0 auto !important;
}

.work-heading{
  width:100% !important;
  margin:0 0 18px !important;
}

.work-inner > .work-row{
  width:100% !important;
  margin:0 !important;
}

.work-inner > .work-row > .cover-link{
  flex:0 0 360px !important;
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
}

.work-inner > .work-row > .work-copy{
  flex:1 1 0 !important;
  width:auto !important;
  max-width:none !important;
}

@media(max-width:900px){
  .work-inner > .work-row > .cover-link{
    flex-basis:300px !important;
    width:300px !important;
    min-width:300px !important;
    max-width:300px !important;
  }
}

@media(max-width:520px){
  .work-inner > .work-row > .cover-link{
    width:min(100%,420px) !important;
    min-width:0 !important;
    max-width:420px !important;
  }
}


/* V6.8 — projects rebuilt from scratch */
.projects-section{
  background:var(--paper);
  color:var(--ink);
  padding:72px clamp(20px,4vw,62px) 96px;
}

.projects-shell{
  width:min(100%,1180px);
  margin:0 auto;
}

.projects-shell > .kicker{
  margin-bottom:18px;
}

.project-row-new{
  width:100%;
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  column-gap:clamp(52px,7vw,96px);
  align-items:center;
  padding:82px 0;
  border-top:1px solid var(--line);
}

.project-row-new:last-child{
  border-bottom:1px solid var(--line);
}

.project-cover-new{
  width:360px;
  height:360px;
  display:block;
  overflow:hidden;
  background:#ddd;
}

.project-cover-new img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.project-copy-new{
  width:100%;
  min-width:0;
  max-width:680px;
}

.project-meta-new{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
  color:#77736b;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.64rem;
}

.project-copy-new h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.2rem,5.4vw,6rem);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:400;
}

.project-copy-new > p{
  max-width:620px;
  margin:28px 0;
  color:#514e48;
  font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.55;
}

@media(max-width:900px){
  .project-row-new{
    grid-template-columns:300px minmax(0,1fr);
    column-gap:40px;
  }

  .project-cover-new{
    width:300px;
    height:300px;
  }
}

@media(max-width:640px){
  .project-row-new{
    grid-template-columns:1fr;
    row-gap:32px;
  }

  .project-cover-new{
    width:min(100%,440px);
    height:auto;
    aspect-ratio:1;
  }

  .project-copy-new{
    max-width:100%;
  }
}






/* V6.15 — normal text on homepage and project pages */
.project-summary,
.project-copy-new > p,
.project-copy-new p {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0 !important;
  color: #5b5752 !important;
  max-width: 560px !important;
  margin: 16px 0 20px !important;
}

/* The long descriptions on the separate project pages */
.project-body .description {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: 0 !important;
  color: #514e48 !important;
  max-width: 760px;
}

.project-body .description p {
  margin: 0 0 1.15em;
}

.project-body .description p:last-child {
  margin-bottom: 0;
}

/* Services as one calm paragraph */
.services-copy {
  max-width: 760px;
  color: #514e48;
}

.services-copy p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}


/* V6.16 — calmer contact section */
.contact h2{
  font-size:clamp(2.7rem,5.8vw,5.8rem) !important;
  line-height:.94 !important;
  max-width:1100px;
}

.email{
  font-size:clamp(1.2rem,2.35vw,2.25rem) !important;
  margin:48px 0 68px !important;
}

/* More comfortable rhythm for the expanded About copy */
.about .body-copy{
  max-width:650px;
}

.about .body-copy p{
  margin:0 0 1.15em;
}

.about .body-copy p:last-child{
  margin-bottom:0;
}


.hero-intro{
  max-width:640px;
  margin:28px 0 0;
}
.hero-intro p{
  font-size:1rem;
  line-height:1.7;
  color:#5b5752;
  margin:0 0 1rem;
}


.contact-intro{
  max-width:640px;
  margin:1rem auto 2rem;
  font-size:0.98rem;
  line-height:1.75;
  color:#66615b;
  font-weight:400;
}

.contact-intro{
  max-width:760px;
  margin:26px 0 36px;
  color:#fff;
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
}

.project-meta-new strong{display:block;font-size:.95rem;letter-spacing:0;text-transform:none;margin-top:4px}
.description-label{
 font-family:Arial,Helvetica,sans-serif;
 font-size:.72rem;
 text-transform:uppercase;
 letter-spacing:.16em;
 color:#77736b;
 margin:0 0 24px;
}




/* Mobile-only: autoplaying + touch-draggable media marquee */
@media (max-width: 820px) {
  .media-marquee {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }

  .media-marquee::-webkit-scrollbar {
    display: none;
  }

  .media-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .media-popup {
    display: none !important;
  }
}