/* ============================================================
   HOME — paginaspecifieke layout
   ============================================================ */

.arrow-link{
  display:inline-block;margin-top:24px;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  font-variation-settings:"wght" 600;border-bottom:1px solid var(--rule-strong);padding-bottom:5px;
  transition:border-color var(--fast),letter-spacing var(--fast) var(--ease);
}
.arrow-link:hover{border-color:var(--kastanje);letter-spacing:.22em}

.sec-head{margin-bottom:clamp(40px,6vw,76px)}
.sec-head .label{margin-bottom:18px}

/* ---------- HERO ---------- */
.hero{padding:clamp(112px,14vw,164px) 0 clamp(56px,7vw,90px);position:relative;overflow:hidden}
.hero-inner{position:relative}
.hero-kicker{margin-bottom:clamp(22px,3.4vw,38px)}

/* Type links, polaroids rechts — grid i.p.v. absolute, dus nooit overlap */
.hero-main{
  display:grid;
  grid-template-columns:1fr clamp(158px,16vw,238px);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.hero-title{position:relative;z-index:3}
.hero-title span{display:block}
.hero-title .outline{margin-left:clamp(16px,5vw,104px)}
.hero-tail{font-size:.4em;letter-spacing:-.022em;line-height:1;margin-top:.16em}

.hero-pols{display:flex;flex-direction:column;gap:clamp(26px,3.6vw,52px);padding-top:clamp(6px,1.4vw,22px)}
.hero-pols .polaroid:nth-child(2){margin-left:clamp(-46px,-3.4vw,-14px)}

.hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  margin-top:clamp(34px,4.6vw,58px);position:relative;z-index:3;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.hero-scribble{
  position:absolute;left:clamp(18px,7vw,120px);bottom:clamp(10px,2.4vw,34px);
  font-size:clamp(19px,2.1vw,29px);color:var(--kastanje);transform:rotate(-4deg);z-index:4;
}
@media(max-width:900px){
  .hero-main{grid-template-columns:1fr;gap:34px}
  .hero-title .outline{margin-left:0}
  .hero-pols{flex-direction:row;gap:18px;padding-top:0}
  .hero-pols .polaroid{flex:1 1 0;min-width:0}
  .hero-pols .polaroid:nth-child(2){margin-left:0}
  .hero-scribble{position:static;display:block;margin-top:24px;transform:rotate(-3deg)}
}

/* ---------- INTRO ---------- */
.intro{padding:var(--section) 0 0}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr;gap:36px}}
.intro-left .label{margin-bottom:20px}

/* ---------- WAAR IK BIJ HELP ---------- */
.help{padding:var(--section) 0 0}
.help-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media(max-width:1080px){.help-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.help-grid{grid-template-columns:1fr}}
.help-item{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(24px,2.6vw,36px);min-height:clamp(200px,20vw,270px);
  display:flex;flex-direction:column;position:relative;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.help-item:hover{background:var(--kastanje);color:var(--creme)}
.help-item:hover .help-n{color:rgba(222,218,208,.5)}
.help-item:hover p{color:rgba(222,218,208,.82)}
.help-n{font-size:10.5px;letter-spacing:.2em;color:var(--grijs);margin-bottom:auto;transition:color var(--fast)}
.help-item h3{margin:26px 0 10px}
.help-item p{font-size:14px;line-height:1.55;color:var(--grijs);transition:color var(--fast)}
.help-cta{justify-content:flex-end;background:var(--shade)}
.help-cta:hover{background:var(--kastanje)}
.help-cta .hand{font-size:27px;line-height:1.1;margin-bottom:auto}
.help-cta .arrow-link{margin-top:20px}
.help-cta:hover .arrow-link{border-color:rgba(222,218,208,.5)}

/* ---------- SELECTED WORK ---------- */
.work{padding:var(--section) 0 0}
.work-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
@media(max-width:900px){.work-head{grid-template-columns:1fr;gap:26px}}
.work-intro{justify-self:end}
@media(max-width:900px){.work-intro{justify-self:start}}

.collage{
  position:relative;display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,28px);
  align-items:start;
}
.collage .polaroid{width:100%}
.col-a{grid-column:1 / span 4;margin-top:clamp(20px,4vw,60px)}
.col-b{grid-column:5 / span 3;margin-top:0}
.col-c{grid-column:9 / span 4;margin-top:clamp(50px,8vw,120px)}
.col-note{grid-column:8 / span 4;align-self:start;padding-top:14px}
.col-note-1{grid-column:8 / span 4;grid-row:1}
.col-note-2{grid-column:1 / span 5;margin-top:clamp(20px,3vw,44px)}
.col-note .label{margin-bottom:11px}
.col-note p:not(.label){font-size:14.5px;line-height:1.6;color:var(--grijs);max-width:38ch}
@media(max-width:900px){
  .collage{grid-template-columns:repeat(2,1fr)}
  .col-a,.col-b,.col-c{grid-column:auto;grid-row:auto;margin-top:0}
  .col-c{grid-column:1 / span 2;max-width:60%}
  .col-note,.col-note-1,.col-note-2{grid-column:1 / span 2;grid-row:auto;margin-top:8px}
}
.work-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:clamp(44px,6vw,80px)}
.work-foot .arrow-link{margin-top:0}

/* ---------- MEER DAN ALLEEN CONTENT ---------- */
.more{padding:var(--section) 0 0}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start}
@media(max-width:900px){.more-grid{grid-template-columns:1fr;gap:36px}}
.more-left .label{margin-bottom:22px}
.more-scribble{font-size:clamp(22px,2.2vw,30px);margin-top:26px;display:inline-block;transform:rotate(-4deg)}
.more-list{list-style:none;margin-top:34px;border-top:1px solid var(--rule)}
.more-list li{
  padding:16px 0 16px 34px;border-bottom:1px solid var(--rule);position:relative;
  font-size:clamp(15px,1.3vw,18px);transition:padding-left var(--fast) var(--ease);
}
.more-list li::before{content:"//";position:absolute;left:0;top:17px;font-size:11px;color:var(--kastanje);opacity:.5}
.more-list li:hover{padding-left:44px}

/* ---------- CREATIVE PARTNER ---------- */
.partner{background:var(--kastanje);color:var(--creme);margin-top:var(--section);padding:clamp(70px,11vw,150px) 0}
.partner-title{margin:22px 0 clamp(38px,5vw,64px)}
.partner-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(34px,6vw,80px);align-items:start}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr;gap:38px}}
.partner-lede{font-size:clamp(19px,1.9vw,27px);line-height:1.4;letter-spacing:-.015em;max-width:30ch}
.partner-text{margin:22px 0 32px;opacity:.8;max-width:52ch}
.partner-list{list-style:none;columns:2;column-gap:34px}
@media(max-width:560px){.partner-list{columns:1}}
.partner-list li{
  padding:11px 0;border-bottom:1px solid rgba(222,218,208,.2);
  font-size:14.5px;letter-spacing:.02em;break-inside:avoid;
}

/* ---------- END CTA ---------- */
.endcta{padding:var(--section) 0 0;text-align:center}
.endcta-title{text-transform:none;letter-spacing:-.03em;line-height:1.02}
.endcta-hand{text-transform:none;font-size:1.15em;display:inline-block;transform:rotate(-2deg)}
.endcta .body-text{margin-left:auto;margin-right:auto}