/* ═══════════════════════════════════════════════════════
   AMBOND — verbeterde versie (lokaal)
   Wordt na styles.css geladen en overschrijft alleen wat
   beter moet. Zie Verbeterpunten.md voor het waarom.
   ═══════════════════════════════════════════════════════ */

:root{
  --paper:#F6F4EF;          /* warmer papier i.p.v. koud grijs     */
  --white:#FFFFFF;
  --ink:#0A1F44;            /* navy blijft                          */
  --ink-soft:#33415A;       /* lopende tekst, donkerder dan eerst   */
  --muted:#4A5568;
  --line:#E2DDD3;
  --wash:#EFEBE3;
  --copper:#A8552F;         /* één echt accent                      */
  --copper-dark:#8C4524;
  --copper-light:#E39A72;   /* accent op donker                     */
  --blue:#A8552F;
  --serif:"Newsreader",Georgia,serif;
  --radius:10px;
  --wrap:min(1480px, calc(100% - 10vw));
}

html,body{background:var(--paper)!important}
body{font-size:17px}
::selection{background:#F1D6C6;color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--copper)}

/* ── Breedte: meeschalen op grote schermen ─────────── */
.wrap{width:var(--wrap)}
.header-inner{width:var(--wrap)}
@media (min-width:1900px){
  .section-space{padding-block:170px}
}

/* ── Typografie ─────────────────────────────────────── */
h2{font-size:clamp(34px,3.1vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1.14}
h1 span,h2 span{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;color:var(--copper);
}
.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:600;color:var(--copper)}
.hero-intro,.proposition-body,.approach-heading>p:last-child,.journey-step>p,
.application-heading>p:last-child,.application-item [role=region] p,.about-copy>p,
.faq-heading p,.faq-list details p{
  font-size:17px;line-height:1.7;color:var(--ink-soft);
}
.proposition-body{font-size:18px}
.step-result,.principles dt,.principles dd,.application-visual>p,.application-item small{font-size:14px;line-height:1.6}
.application-item h3{font-size:21px}
.faq-list summary{font-size:17px}
.journey-step h3{font-size:clamp(30px,2.5vw,42px);font-weight:500;letter-spacing:-.025em}
.desktop-nav{font-size:15px}
.journey-navigation a,.journey-navigation a span{font-size:13px}
.step-index{font-size:14px;color:var(--copper)}
.step-index i{background:var(--copper);opacity:.4}
.application-number{font-size:13px;color:var(--copper)}

/* ── Knoppen: één stijl voor de hele site ───────────── */
.btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:14px!important;
  padding:17px 26px!important;border-radius:var(--radius)!important;border:0!important;
  font-size:15px!important;font-weight:600!important;letter-spacing:0;line-height:1;
  box-shadow:0 1px 2px rgba(10,31,68,.08),0 8px 24px -12px rgba(10,31,68,.35)!important;
  transition:background .25s,transform .25s,box-shadow .25s!important;
}
.btn .arrow{font-size:18px!important;line-height:1;transition:transform .25s}
.btn-primary{background:var(--ink)!important;color:#fff!important}
.btn-primary:hover{background:var(--copper)!important;transform:translateY(-2px)}
.btn-primary:hover .arrow{transform:translate(3px,-3px)}
.btn-lg{padding:21px 32px!important;font-size:16px!important}
.nav-contact{
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--radius);
  font-size:14px;gap:12px;transition:background .25s;
}
.nav-contact .arrow{font-size:16px}
.nav-contact:hover{background:var(--copper)}
.hero-discover{font-size:15px;font-weight:500}
.hero-discover:hover{color:var(--copper)}

/* ── Kop van de site ────────────────────────────────── */
.site-header{height:82px;background:rgba(246,244,239,.92);border-bottom-color:var(--line)}
html{scroll-padding-top:96px}
.brand img{width:170px}

/* ── Opening: beeld loopt tot de rechter schermrand ─── */
.hero{background:var(--paper);overflow:hidden}
.hero-inner{min-height:720px;height:calc(100svh - 82px);max-height:1080px}
.hero h1{font-weight:500;letter-spacing:-.03em;line-height:1.1;font-size:clamp(40px,4.3vw,62px);color:var(--ink)}
.hero h1 span{display:inline-block;margin-top:.04em;color:var(--ink);font-family:inherit;font-style:normal;font-weight:500;letter-spacing:inherit}
.hero-art{
  position:absolute;right:0;bottom:70px;left:auto;z-index:0;
  width:min(62vw,1180px);max-width:none;
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
}
.hero-footer{font-size:13px;color:var(--ink-soft)}
.hero-footer i{background:var(--copper)}

/* ── Stappen: kader in dezelfde verhouding als de beelden ─ */
.approach{background:var(--white);border-color:var(--line)}
.journey-picture{aspect-ratio:886/750;border-radius:14px;background:var(--white)}
.journey-navigation a{border-top-width:2px}
.journey-navigation a.is-active{border-color:var(--copper);color:var(--ink)}
.picture-corners{display:none}

/* ── Toepassingen ───────────────────────────────────── */
.applications{background:var(--paper)}
.application-visual{background:var(--white);border-radius:14px;padding:14px 14px 22px}
.application-crop{aspect-ratio:886/750;border-radius:8px}
.application-item.is-open h3,.application-item button:hover{color:var(--copper)}
.disclosure{color:var(--copper)}

/* ── Over Ambond: donker rustpunt ───────────────────── */
.about--dark{background:var(--ink)!important;color:#F3F0EA}
.about--dark .about-copy h2{color:#fff}
.about--dark h2 span{color:var(--copper-light)}
.about--dark .about-copy>p{color:rgba(243,240,234,.78)}
.about--dark .principles>div{border-top-color:rgba(255,255,255,.14)}
.about--dark .principles dt{color:#fff}
.about--dark .principles dd{color:rgba(243,240,234,.7)}
.about-crop{aspect-ratio:4/5;overflow:hidden;border-radius:14px;max-width:560px}
.about-crop img{width:100%;height:100%;object-fit:cover;object-position:55% 60%;transform:scale(1.25);mix-blend-mode:normal!important}
.about-person{
  margin-top:28px!important;padding:20px 22px;border-left:2px solid var(--copper-light);
  background:rgba(255,255,255,.05);border-radius:0 var(--radius) var(--radius) 0;
  color:#F3F0EA!important;
}
.about-person strong{color:#fff;font-weight:600}
.about-image-caption{display:none}

/* ── Veelgestelde vragen ────────────────────────────── */
.faq{border-top:0}
.faq-list summary:hover{color:var(--copper)}
.faq-list summary span{color:var(--copper)}

/* ── Afsluiting: rustiger en met echte knop ─────────── */
.contact{background:var(--wash)}
.contact h2{font-size:clamp(44px,4.6vw,72px);line-height:1.05}
.contact-inner>p{font-size:17px;color:var(--ink-soft)}
.contact-link{margin-top:40px!important;border-bottom:0!important}
.contact-alt{margin-top:22px!important;font-size:16px!important;color:var(--ink-soft)}
.contact-alt a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--copper)}
.contact-alt a:hover{color:var(--copper)}
.contact-art{width:min(52vw,980px);right:0;opacity:.85}

/* ── Footer ─────────────────────────────────────────── */
.site-footer p,.site-footer>a:not(:first-child),.site-footer small{font-size:14px;color:var(--ink-soft)}
.site-footer>a:not(:first-child):hover{color:var(--copper)}

/* ── Tablet ─────────────────────────────────────────── */
@media (max-width:1100px){
  .wrap,.header-inner{width:calc(100% - 64px)}
  .hero-art{width:74vw;bottom:90px}
}

@media (max-width:900px){
  .site-header{height:72px}
  .nav-contact{padding:10px 14px;font-size:13px}
  .hero-inner{min-height:0;height:auto;padding-bottom:40px}
  .hero-art{position:relative;right:auto;bottom:auto;width:100%;margin-top:0;order:2;mask-image:none}
  .hero{display:flex;flex-direction:column}
  .hero-inner{order:1}
  .hero-footer{position:static;margin-top:44px}
  .about-crop{max-width:none;aspect-ratio:4/3}
}

/* ── Telefoon ───────────────────────────────────────── */
@media (max-width:600px){
  body{font-size:16px}
  .wrap,.header-inner{width:calc(100% - 40px)}
  .brand img{width:132px}
  .nav-contact .arrow{display:none}
  .hero-inner{padding-top:40px}
  .hero h1{font-size:clamp(34px,8.6vw,44px);line-height:1.12}
  .hero-intro{font-size:16px;max-width:none}
  .hero-actions{flex-direction:column;align-items:stretch;gap:16px}
  .hero-actions .btn{width:100%}
  .hero-discover{justify-content:center}
  .hero-art{width:112%;margin-left:-6%}
  .hero-footer{font-size:12px;flex-direction:column;gap:10px}
  .hero-footer>span:first-child,.hero-footer>span:last-child{max-width:none;justify-content:flex-start;font-size:12px}
  h2{font-size:32px}
  .proposition-body,.journey-step>p,.about-copy>p,.faq-list details p{font-size:16px}
  .eyebrow{font-size:11px}
  .contact h2{font-size:44px}
  .contact-link{width:100%}
  .contact-art{opacity:.25}
  .site-footer p,.site-footer>a:not(:first-child),.site-footer small{font-size:13px}
}