/* ============================================================
   BINNENPAGINA'S — gedeeld door over-mij, services,
   creative-partner, projects en contact
   ============================================================ */

.arrow-link{
  display:inline-block;margin-top:12px;padding-top:14px;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}

/* ---------- paginakop ---------- */
.page-hero{padding:clamp(112px,14vw,164px) 0 clamp(40px,5.5vw,70px)}
.page-hero .label{margin-bottom:clamp(20px,3vw,34px)}
.page-hero .display{margin-bottom:clamp(26px,4vw,48px)}
.page-hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:start}
@media(max-width:820px){.page-hero-foot{grid-template-columns:1fr;gap:22px}}

.sec-head{margin-bottom:clamp(38px,5.5vw,72px)}
.sec-head .label{margin-bottom:18px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}

.block-section{padding:var(--section) 0 0}

/* ---------- over mij ---------- */
.about-grid{display:grid;grid-template-columns:1fr clamp(200px,24vw,330px);gap:clamp(30px,5vw,74px);align-items:start}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-pols{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,46px)}
.about-scribble{font-size:clamp(21px,2.3vw,31px);display:inline-block;transform:rotate(-4deg);margin-top:28px}

.facts{list-style:none;margin-top:38px;border-top:1px solid var(--rule)}
.facts li{
  display:grid;grid-template-columns:clamp(90px,11vw,150px) 1fr;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--rule);font-size:15px;
}
@media(max-width:560px){.facts li{grid-template-columns:1fr;gap:3px}}
.facts .k{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--grijs);padding-top:4px}

/* ---------- services ---------- */
.svc-list{list-style:none;border-top:1px solid var(--rule)}
.svc{
  display:grid;grid-template-columns:clamp(50px,6vw,90px) 1fr clamp(200px,30vw,460px);
  gap:clamp(16px,3vw,48px);align-items:start;
  padding:clamp(26px,3.4vw,46px) 0;border-bottom:1px solid var(--rule);
  transition:background var(--fast) var(--ease),padding-left var(--fast) var(--ease),padding-right var(--fast) var(--ease);
}
@media(max-width:900px){.svc{grid-template-columns:1fr;gap:12px}}
.svc:hover{background:var(--shade);padding-left:clamp(10px,1.6vw,22px);padding-right:clamp(10px,1.6vw,22px)}
.svc-n{font-size:11px;letter-spacing:.2em;color:var(--grijs);padding-top:9px}
.svc h3{font-size:clamp(22px,2.9vw,40px);letter-spacing:-.028em;line-height:1.02;font-variation-settings:"wdth" 104,"wght" 700}
.svc p{color:var(--grijs);font-size:15px;line-height:1.6}
.svc-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:7px}
.svc-tags span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule-strong);padding:5px 9px;color:var(--grijs)}

/* ---------- creative partner ---------- */
.cp-hero{background:var(--kastanje);color:var(--creme);padding:clamp(120px,15vw,180px) 0 clamp(64px,9vw,120px)}
.cp-hero .label{color:rgba(222,218,208,.66)}
.cp-hero .outline{-webkit-text-stroke-color:var(--creme)}
.cp-lede{font-size:clamp(19px,2.1vw,31px);line-height:1.35;letter-spacing:-.018em;max-width:26ch;margin-top:clamp(26px,4vw,46px)}

.cp-what{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media(max-width:760px){.cp-what{grid-template-columns:1fr}}
.cp-what li{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:clamp(22px,2.6vw,34px);display:flex;gap:16px;align-items:flex-start;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.cp-what li:hover{background:var(--kastanje);color:var(--creme)}
.cp-what li:hover .cp-n{color:rgba(222,218,208,.5)}
.cp-n{font-size:11px;letter-spacing:.18em;color:var(--grijs);padding-top:5px;flex:none;transition:color var(--fast)}
.cp-what strong{font-variation-settings:"wght" 700;font-size:17px;display:block;letter-spacing:-.01em}

.cp-for{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
@media(max-width:820px){.cp-for{grid-template-columns:1fr;gap:26px}}
.cp-for div{border-top:2px solid var(--kastanje);padding-top:20px}
.cp-for h3{margin-bottom:10px}
.cp-for p{color:var(--grijs);font-size:15px}

/* ---------- projects ---------- */
.proj{padding-bottom:clamp(60px,9vw,120px);border-bottom:1px solid var(--rule);margin-bottom:clamp(60px,9vw,120px)}
.proj:last-of-type{border-bottom:0;margin-bottom:0}
.proj-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(30px,4.5vw,56px)}
@media(max-width:900px){.proj-head{grid-template-columns:1fr;gap:18px;align-items:start}}
.proj-title{font-size:clamp(32px,5.4vw,78px);line-height:.94;letter-spacing:-.038em;text-transform:uppercase;font-variation-settings:"wdth" 106,"wght" 800}
.proj-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.proj-meta span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--rule-strong);padding:5px 10px;color:var(--grijs)}

.proj-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-bottom:clamp(32px,4.5vw,60px)}
@media(max-width:820px){.proj-steps{grid-template-columns:1fr;gap:24px}}
.proj-steps li{border-top:1px solid var(--rule);padding-top:17px}
.proj-steps .label{margin-bottom:9px}
.proj-steps p{font-size:14.5px;color:var(--grijs);line-height:1.6}

.proj-visuals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px);align-items:start}
@media(max-width:760px){.proj-visuals{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:440px){.proj-visuals{grid-template-columns:1fr}}
.proj-visuals > .polaroid:nth-child(2){margin-top:clamp(18px,3vw,46px)}
.proj-visuals > .polaroid:nth-child(3){margin-top:clamp(6px,1.2vw,18px)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,90px);align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:38px}}

.form-note{
  border:1px solid var(--kastanje);background:var(--shade);
  padding:20px 22px;margin-bottom:30px;font-size:14px;line-height:1.55;
}
.form-note strong{font-variation-settings:"wght" 700}

.field{margin-bottom:22px}
.field label{
  display:block;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--grijs);margin-bottom:8px;font-variation-settings:"wght" 600;
}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:16px;color:var(--kastanje);
  background:var(--wit);border:0;border-bottom:1px solid var(--rule-strong);
  padding:11px 2px;border-radius:0;
  transition:border-color var(--fast) var(--ease);
}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field select{cursor:pointer}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-bottom-color:var(--olive);border-bottom-width:2px;padding-bottom:10px;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(91,87,81,.5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.form-submit{margin-top:10px}
button.btn{cursor:pointer;font-family:inherit}

.contact-direct{border-top:1px solid var(--rule);margin-top:34px;padding-top:26px}
.contact-direct a{border-bottom:1px solid var(--rule-strong);padding-bottom:2px}
.contact-direct a:hover{border-color:var(--kastanje)}