/* Noa & Dje -- Over ons v3: 1-op-1 naar Angela's "Over-ons-voorbeeld.html" (okt 2026).
   Alles gescoped onder .nd3 zodat global.css (h1-h3, em, p, img, .btn) niet meepraat. */

@font-face{font-family:"Larianti";font-weight:400;font-style:normal;src:url(../fonts/larianti-regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Larianti";font-weight:400;font-style:italic;src:url(../fonts/larianti-italic.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Larianti";font-weight:700;font-style:normal;src:url(../fonts/larianti-bold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Larianti";font-weight:700;font-style:italic;src:url(../fonts/larianti-bold-italic.ttf) format("truetype");font-display:swap}

.nd3{
  --bg:#FFFBF8; --beige:#E7D9CC; --rose:#D9B5B0; --lilac:#D7C9E8; --sage:#B9C4B1; --marsala:#955251;
  --ink:#4a3b38; --muted:#7b6a66;
  --serif:"Cormorant Garamond",Georgia,serif; --script:"Larianti","Cormorant Garamond",cursive; --sans:"Poppins",-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;
}
.nd3 *,.nd3 *::before,.nd3 *::after{box-sizing:border-box}
.nd3 h1,.nd3 h2,.nd3 h3,.nd3 p,.nd3 blockquote,.nd3 ul,.nd3 li,.nd3 figure{margin:0;padding:0}
.nd3 ul{list-style:none}
.nd3 p{color:inherit;font-size:inherit;line-height:inherit}
.nd3 img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0}
.nd3 a{color:inherit}
.nd3-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.nd3 .nd3-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--marsala);margin-bottom:14px;line-height:1.75}
.nd3 h1,.nd3 h2,.nd3 h3{font-family:var(--serif);font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:normal}
.nd3 h1{font-size:clamp(44px,7vw,76px);line-height:1.15}
.nd3 h1 em{display:inline-block;margin-top:.5em}
.nd3 .nd3-chapter h3 em{display:block;margin-top:4px;font-size:.72em;line-height:1.25;padding-bottom:8px}
.nd3 h2{font-size:clamp(32px,4.5vw,46px);margin-bottom:28px}
.nd3 em{color:var(--marsala);font-style:normal;font-family:var(--script);font-weight:700;font-size:.78em;line-height:1;padding:0 .06em;letter-spacing:.01em}
.nd3 p+p{margin-top:16px}
.nd3-ph{overflow:hidden;border-radius:20px;background:var(--beige)}

/* hero */
.nd3-hero{background:var(--beige);padding:64px 0 72px}
.nd3-hero .nd3-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.nd3 .nd3-lead{font-size:20px;margin-top:40px;max-width:540px}
.nd3-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.nd3-chip{background:var(--bg);border-radius:999px;padding:7px 16px;font-size:14px;color:var(--muted)}
.nd3-portrait{aspect-ratio:4/5;border-radius:220px 220px 24px 24px;overflow:hidden;background:var(--rose)}
.nd3 .nd3-portrait img{object-position:50% 25%}

/* story */
.nd3-story{padding:80px 0 88px}
.nd3-story .nd3-heading{text-align:center;margin-bottom:44px}
.nd3 .nd3-story .nd3-heading h2{margin-bottom:0}
.nd3-zigzag{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:stretch}
.nd3-zigzag.is-four{grid-template-areas:"a b p" "c d p"}
.nd3-zigzag.is-four .nd3-chapter:nth-child(1){grid-area:a}
.nd3-zigzag.is-four .nd3-chapter:nth-child(2){grid-area:b}
.nd3-zigzag.is-four .nd3-chapter:nth-child(3){grid-area:c}
.nd3-zigzag.is-four .nd3-chapter:nth-child(4){grid-area:d}
.nd3-zigzag.is-four .nd3-story-photo{grid-area:p}
.nd3-zigzag .nd3-story-photo{min-height:320px}
.nd3-chapter{background:var(--beige);border-radius:24px;padding:28px 26px 30px;position:relative;border-top:5px solid var(--rose)}
.nd3-chapter:nth-child(4n+2){background:#F1E6EA;border-top-color:var(--marsala)}
.nd3-chapter:nth-child(4n+3){background:#ECE6F3;border-top-color:var(--lilac)}
.nd3-chapter:nth-child(4n+4){background:#E4E9DF;border-top-color:var(--sage)}
.nd3-year{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--marsala);color:#fff;border-radius:999px;padding:5px 14px;margin-bottom:16px;line-height:1.75}
.nd3 .nd3-chapter h3{font-size:clamp(24px,2.6vw,30px);margin-bottom:18px}
.nd3 .nd3-chapter p{font-size:15px;line-height:1.7}

/* quote */
.nd3-quote{background:var(--marsala);color:#fff;padding:76px 0;text-align:center}
.nd3 .nd3-quote blockquote{font-family:var(--serif);font-size:clamp(28px,4.2vw,44px);line-height:1.22;max-width:800px;margin:0 auto;font-weight:600;color:#fff;border:0;background:none;font-style:normal}
.nd3 .nd3-quote blockquote em{color:var(--rose);display:inline-block;margin-top:.35em;padding-bottom:.3em}
.nd3 .nd3-quote .nd3-alpaca{max-width:560px;margin:26px auto 0;color:var(--beige);font-size:18px}

/* atelier */
.nd3-atelier{padding:88px 0}
.nd3-atelier .nd3-intro{max-width:700px;margin-bottom:40px}
.nd3-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.nd3-mosaic .nd3-ph{aspect-ratio:3/4}
.nd3-mosaic .nd3-ph:nth-child(even){margin-top:34px}
.nd3-atelier .nd3-after{max-width:700px;margin-top:56px}

/* waarom + mentaal */
.nd3-why{background:var(--beige);padding:80px 0}
.nd3-why .nd3-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.nd3-mind{padding:88px 0}
.nd3-mind .nd3-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.nd3-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nd3-duo .nd3-ph{aspect-ratio:3/4}
.nd3-duo .nd3-ph:nth-child(2){margin-top:40px}
.nd3 .nd3-note{background:var(--sage);border-radius:20px;padding:22px 26px;margin-top:26px;color:#33402f;font-size:16px}

/* zo werk ik */
.nd3-cards{background:var(--beige);padding:76px 0}
.nd3 .nd3-cards h2{text-align:center}
.nd3-cards .nd3-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.nd3-card{background:var(--bg);border-radius:20px;padding:26px 24px}
.nd3 .nd3-card h3{font-size:25px;font-weight:600;margin-bottom:8px}
.nd3 .nd3-card p{font-size:15px;color:var(--muted);line-height:1.65}
.nd3-card:nth-child(4n+1){border-top:5px solid var(--rose)}
.nd3-card:nth-child(4n+2){border-top:5px solid var(--sage)}
.nd3-card:nth-child(4n+3){border-top:5px solid var(--lilac)}
.nd3-card:nth-child(4n+4){border-top:5px solid var(--marsala)}

/* nieuwe webshop */
.nd3-shop{background:var(--lilac);padding:80px 0}
.nd3-shop .nd3-head{max-width:700px}
.nd3-shop .nd3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.nd3-item{background:var(--bg);border-radius:20px;padding:24px}
.nd3 .nd3-item h3{font-size:24px;font-weight:600;margin-bottom:6px}
.nd3 .nd3-item p{font-size:15px;color:var(--muted);line-height:1.6}
.nd3-tip{margin-top:26px;background:var(--marsala);color:#fff;border-radius:20px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.nd3-tag{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--rose);color:var(--marsala);border-radius:999px;padding:6px 14px;line-height:1.75}
.nd3 .nd3-tip p{margin:0;font-size:17px;color:#fff}

/* cta */
.nd3-cta{padding:88px 0;text-align:center}
.nd3 .nd3-sign{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.4;color:var(--marsala);margin:12px 0 30px}
.nd3 .nd3-sign .nd3-script{font-family:var(--script);font-weight:700;font-size:36px;line-height:1;display:inline-block;margin-top:.55em;padding-bottom:.3em}
.nd3 .nd3-btn{display:inline-block;background:var(--marsala);color:#fff;text-decoration:none;padding:15px 34px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;line-height:1.75;font-family:var(--sans)}
.nd3 .nd3-btn:hover{background:#7d4241;color:#fff}
.nd3-social{margin-top:26px;display:flex;gap:22px;justify-content:center;font-size:15px}
.nd3 .nd3-social a{color:var(--marsala);text-decoration:underline;text-underline-offset:4px}

@media (max-width:860px){
  .nd3-zigzag,.nd3-zigzag.is-four{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c d" "p p"}
  .nd3-zigzag:not(.is-four) .nd3-story-photo{grid-column:1/-1}
  .nd3-zigzag .nd3-story-photo{min-height:260px}
  .nd3-hero .nd3-wrap,.nd3-why .nd3-wrap,.nd3-mind .nd3-wrap{grid-template-columns:1fr;gap:36px}
  .nd3-portrait{max-width:340px}
  .nd3-mosaic{grid-template-columns:1fr 1fr}
  .nd3-mosaic .nd3-ph:nth-child(even){margin-top:0}
  .nd3-cards .nd3-grid{grid-template-columns:1fr 1fr}
  .nd3-shop .nd3-grid{grid-template-columns:1fr}
  .nd3-tip{grid-template-columns:1fr}
  .nd3-duo .nd3-ph:nth-child(2){margin-top:0}
}
@media (max-width:620px){
  .nd3-zigzag,.nd3-zigzag.is-four{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "p"}
}
@media (max-width:520px){ .nd3-cards .nd3-grid{grid-template-columns:1fr} }