/* ============================================================
   OUT OF FRAME — SUBPAGINA'S
   Zelfde stijl als de homepage: bouwt voort op css/style.css,
   css/home.css en css/home-b.css (kleurverloop, dimlaag, glas,
   grote typografie). Scripts: dezelfde als de homepage
   (gradient.js, lenis, main.js, home.js, smooth.js).
   ============================================================ */

/* actieve pagina in het menu */
.nav--home .nav__links a.is-active:not(.btn) { color: #fff; position: relative; }
.nav--home .nav__links a.is-active:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 1px; background: var(--grad);
}

/* ---------- Paginakop ---------- */
.p-head {
  position: relative;
  min-height: min(78svh, 760px);
  display: flex; align-items: flex-end;
  padding: calc(var(--nav-h) + 60px) 0 clamp(50px, 8vh, 90px);
}
.p-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 9, 0.35) 0%, transparent 25%);
}
.p-head__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 26px;
}
.p-head__title {
  font-size: clamp(46px, min(8.6vw, 15vh), 140px);
  font-weight: 600; letter-spacing: -0.055em; line-height: 0.92;
  color: #fff;
}
.p-head__title em { font-style: normal; font-weight: 300; }
.p-head__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.p-head__intro { max-width: 600px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 18px rgba(6, 6, 9, 0.35); }
.p-head .h-label { color: rgba(255, 255, 255, 0.85); }

/* ---------- Bouwstenen ---------- */
.p-glass {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(10, 10, 22, 0.8);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.p-grid { display: grid; gap: 18px; }
.p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.p-card {
  position: relative;
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.5s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease;
}
.p-card:hover { transform: translateY(-4px); border-color: rgba(0, 229, 255, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 60px rgba(109, 92, 255, 0.18); }
.p-card__top {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim);
}
.p-card__icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; color: var(--accent-2);
  background: linear-gradient(140deg, rgba(109, 92, 255, 0.25), rgba(0, 229, 255, 0.12));
  border: 1px solid rgba(0, 229, 255, 0.3);
}
.p-card__icon svg { width: 28px; height: 28px; }
.p-card h3 { font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; line-height: 1.1; margin-top: 8px; }
.p-card p { font-size: 15.5px; line-height: 1.6; color: rgba(242, 243, 247, 0.78); }
.p-card .b-ex { margin: 8px 0 0; }

/* genummerde rijen (in de praktijk, waarom-punten) */
.p-rows { list-style: none; display: grid; gap: 14px; counter-reset: row; }
.p-rows li {
  counter-increment: row;
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: clamp(20px, 2.4vw, 30px);
}
.p-rows li::before {
  content: counter(row, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.05em; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-rows strong { display: block; font-family: var(--font-display); font-size: 21px; letter-spacing: -0.02em; color: #fff; margin-bottom: 6px; }
.p-rows p, .p-rows span { font-size: 16px; line-height: 1.6; color: rgba(242, 243, 247, 0.78); }

/* afsluitende oproep */
.p-cta {
  position: relative; overflow: hidden;
  text-align: center;
  padding: clamp(44px, 7vw, 100px) clamp(24px, 6vw, 90px);
  display: grid; justify-items: center; gap: 22px;
}
.p-cta .h-label { color: rgba(255, 255, 255, 0.85); }
.p-cta h2 {
  font-size: clamp(36px, 5.6vw, 88px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95;
  max-width: 900px; text-wrap: balance;
}
.p-cta p { max-width: 560px; font-size: 17.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.p-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.p-cta-sec { padding: clamp(80px, 12vw, 160px) 0; }

/* ---------- Diensten ---------- */
.p-svc .b-ex { min-height: 0; }

/* lopende band met tools */
.p-tools { padding: clamp(40px, 6vw, 70px) 0; }
.p-tools__label { text-align: center; margin-bottom: 18px; }

/* ---------- Over mij ---------- */
.p-story {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 90px); align-items: start;
}
/* foto in het logo-wiel */
.p-portrait {
  position: sticky; top: calc(var(--nav-h) + 30px); justify-self: center;
  width: min(440px, 100%); aspect-ratio: 1;
}
.p-portrait__wheel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-portrait__photo {
  position: absolute; inset: 22%;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.55), 0 0 0 9px rgba(109, 92, 255, 0.14), 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 90px rgba(109, 92, 255, 0.35);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.8s var(--ease-out), clip-path 1.4s var(--ease-out) 0.15s;
}
.p-portrait__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 45% 55%;
}
/* lichtstreep die af en toe over de foto glijdt */
.p-portrait__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .p-portrait__photo img { animation: portraitZoom 18s ease-in-out infinite alternate; }
  .p-portrait__photo::after { animation: portraitShine 7s ease-in-out 2s infinite; }
  /* binnenkomst: de foto opent als een cirkel vanuit het midden */
  .js .p-portrait.reveal .p-portrait__photo { clip-path: circle(0% at 50% 50%); }
  .js .p-portrait.reveal.is-visible .p-portrait__photo { clip-path: circle(50% at 50% 50%); }
  .js .p-portrait.reveal { transform: none; }
  .js .p-portrait.reveal .p-portrait__wheel { transform: scale(0.7) rotate(-40deg); opacity: 0; transition: transform 1.6s var(--ease-out), opacity 1s ease; }
  .js .p-portrait.reveal.is-visible .p-portrait__wheel { transform: none; opacity: 1; }
}
@keyframes portraitZoom { from { transform: scale(1.04); } to { transform: scale(1.16) translate(-2%, 1%); } }
@keyframes portraitShine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.p-prose { display: grid; gap: 18px; }
.p-prose h2 { font-size: clamp(32px, 4vw, 58px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin-bottom: 8px; }
.p-prose > p:not(.h-label) { font-size: 17px; line-height: 1.75; color: rgba(242, 243, 247, 0.84); }

.p-timeline { list-style: none; position: relative; display: grid; gap: 16px; padding-left: 38px; max-width: 900px; }
.p-timeline::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--accent-1), var(--accent-2));
  transform-origin: top; transform: scaleY(var(--tl, 1));
}
.p-timeline li { position: relative; padding: clamp(20px, 2.4vw, 30px); }
.p-timeline li::before {
  content: ""; position: absolute; left: -33px; top: 30px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 0 5px rgba(0, 229, 255, 0.12);
}
.p-timeline__period { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent-2); }
.p-timeline h3 { font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.02em; margin: 8px 0 8px; }
.p-timeline p { font-size: 15.5px; line-height: 1.65; color: rgba(242, 243, 247, 0.78); }

/* ---------- Contact ---------- */
.p-contact { padding: calc(var(--nav-h) + 70px) 0 clamp(80px, 10vw, 140px); }
.p-contact .h-contact__grid { align-items: start; }
.p-contact__card { padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; }
.p-contact__card h2 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.035em; line-height: 1.05; }
.p-contact__card .contact-card__sub { margin: 0; text-align: left; max-width: none; color: rgba(242, 243, 247, 0.8); font-size: 16px; }
.p-contact__card .h-form { padding: 0; border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.p-contact .h-contact__title { font-size: clamp(46px, 7vw, 112px); }

/* ---------- Privacy (lange lopende tekst) ---------- */
.p-text { max-width: 860px; margin: 0 auto; padding: clamp(28px, 4.5vw, 64px); }
.p-text h2 {
  font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em;
  margin: 44px 0 12px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.p-text h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.p-text p, .p-text li { font-size: 16px; line-height: 1.75; color: rgba(242, 243, 247, 0.8); }
.p-text p { margin-bottom: 12px; }
.p-text ul { padding-left: 22px; margin-bottom: 12px; }
.p-text li { margin-bottom: 6px; }
.p-text strong { color: #fff; }
.p-text a { color: var(--accent-2); text-decoration: underline; }
.p-text .bijgewerkt { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; color: var(--text-dim); margin-top: 40px; }

@media (max-width: 960px) {
  .p-grid--2, .p-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .p-story { grid-template-columns: minmax(0, 1fr); }
  .p-portrait { position: relative; top: 0; width: min(340px, 86vw); }
}
@media (max-width: 600px) {
  .p-rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .p-rows li::before { font-size: 32px; }
  .p-head { min-height: 70svh; }
  .p-head__intro { font-size: 16.5px; }
}