/* ---- gedeeld contactblok en footer (src/site_nav.py) ---- */
  .sc { padding:96px 0 104px; }
  .sc .w { display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:start; }
  .photo:has(.ph-img), .sc-photo:has(.ph-img) { overflow:hidden; }
  .ph-img { width:100%; height:100%; object-fit:cover; object-position:47% 40%; display:block; }
  .sc-photo .ph-img { position:absolute; inset:0; }
  /* foto's als glas (2 okt): achtergrond 49% over het donkere vlak, persoon scherp, lichtrand zoals de menubalk */
  .photo:has(.ph-fg), .sc-photo:has(.ph-fg) { position:relative; isolation:isolate; }
  .photo .ph-img { position:absolute; inset:0; }
  .ph-bg { opacity:var(--ph-bg-o, .49); }
  /* het vlak achter de foto als eigen laag, zodat de pagina erdoorheen kan (schuif "Transparantie kader" in de reviewbalk) */
  .photo:has(.ph-fg), .sc-photo:has(.ph-fg) { background:transparent !important; }
  .photo:has(.ph-fg)::before, .sc-photo:has(.ph-fg)::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
    background:linear-gradient(160deg, #1c1a16, #12110e); opacity:var(--ph-vlak-o, 1); }   /* ruimte voor de knop Tekst bewerken */
  @media (max-width:860px) { }
  .photo:has(.ph-fg)::after, .sc-photo:has(.ph-fg)::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12); opacity:var(--ph-vlak-o, 1); }
  /* kader (Jonathan 2 okt: "Het moet de transparency van het gehele achtergrond blok"): vlak, lichtrand en kamer worden
     samen en overal even doorzichtig; de persoon blijft volledig. Geen vignet of uitloop (gaf een witte waas). */
  .ph-bg { opacity:calc(var(--ph-bg-o, .49) * var(--ph-vlak-o, 1)); }
  .sc-card { z-index:2; }
  .sc-photo { position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; background:linear-gradient(160deg, #ecebe7, #dcdad4); display:flex; align-items:center; justify-content:center; color:#8d897f; font-size:14px; }
  .sc-card { position:absolute; left:18px; right:18px; bottom:18px; border-radius:14px; padding:16px 20px; text-align:left;
    background:rgba(255,255,255,.72); backdrop-filter:blur(20px) saturate(1.8); -webkit-backdrop-filter:blur(20px) saturate(1.8);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.12); color:#141414; }
  .sc-card b { display:block; font-size:18px; font-weight:600; }
  .sc-card .sc-role { font-size:14px; color:var(--gold); font-weight:600; margin:1px 0 10px; }
  .sc-card .sc-lines { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:15px; }
  .sc-card a, .sfoot a { color:inherit; text-decoration:none; }
  .sc-card a:hover, .sfoot a:hover { text-decoration:underline; text-underline-offset:3px; }
  .sc-ic { display:inline-flex; align-items:center; gap:8px; }
  .sc-ic svg { width:15px; height:15px; fill:var(--gold); flex:none; }
  .sc-k { margin:0 0 10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; }
  .sc h2 { margin:0 0 12px; font-size:clamp(34px, 4.2vw, 54px); line-height:1.05; letter-spacing:-.02em; }
  .sc-lead { margin:0 0 30px; font-size:18px; color:#4a4a4a; max-width:560px; }
  .sc-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:720px; }   /* velden ~350px, bericht ~85 tekens per regel */
  .sc-form .full { grid-column:1 / -1; }
  .sc-form input, .sc-form textarea { width:100%; font:inherit; font-size:16px; color:inherit; background:rgba(255,255,255,.7); border:1px solid rgba(20,20,20,.16); border-radius:12px; padding:14px 16px; outline:none; transition:border-color .25s ease, box-shadow .25s ease; }
  .sc-form textarea { min-height:132px; resize:vertical; }
  .sc-form input:focus, .sc-form textarea:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(187,154,59,.16); }
  .sc-form ::placeholder { color:#8b8b8b; }
  .sc-send { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px; }
  .sc-send button { font:inherit; font-size:15.5px; font-weight:600; cursor:pointer; }
  .sc-ok { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#555; max-width:320px; }
  .sc-ok input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--gold); flex:none; }
  .sc-ok a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
  .sc-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .sc-msg { margin:0; font-size:15px; min-height:1.4em; color:#555; }
  .sc-msg.err { color:#a23b2a; } .sc-msg.done { color:inherit; font-size:17px; font-weight:500; }
  .sc-form .bad { border-color:#c4503a !important; }
  .sc-form button[disabled] { opacity:.6; cursor:wait; }
  .sc-form.sent > :not(.sc-msg):not(.sc-next) { display:none; }
  /* bedankblok na verzenden (bouwopdracht 5 okt 2026, keuze 2A): drie vervolgen als rustige blokken */
  .sc-next { container-type:inline-size; } .sc-next:focus { outline:none; }
  .sc-next p { margin:0 0 14px; font-size:16px; color:#555; }
  .sc-next-links { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  @container (max-width:540px) { .sc-next-links { grid-template-columns:1fr; } }
  .sc-next-links a { display:block; min-width:0; padding:14px 16px; border:1px solid rgba(20,20,20,.16); border-radius:12px; color:inherit; text-decoration:none; transition:border-color .25s ease; }
  .sc-next-links a:hover, .sc-next-links a:focus-visible { border-color:var(--gold); }
  .sc-next-links a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .sc-next-links b { display:block; font-size:15.5px; font-weight:600; }
  .sc-next-links span { display:block; margin-top:3px; font-size:13.5px; color:#6b6b6b; }

  .sfoot { padding:64px 0 36px; border-top:1px solid rgba(20,20,20,.08); font-size:15px; color:#3a3a3a; }
  .sfoot .w { display:block !important; }
  .sfoot .cols { display:grid; grid-template-columns:4fr 2fr 3fr 2fr; gap:40px; }
  .sfoot .flogo2 svg { height:30px; width:auto; display:block; margin-bottom:22px; }
  .sfoot h4 { margin:0 0 14px; font-size:15px; font-weight:600; color:#141414; }
  .sfoot ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
  .sfoot .sc-ic svg { width:14px; height:14px; }
  .sfoot .bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid rgba(20,20,20,.08); font-size:13.5px; color:#777; }

  body.st-donker .sc-photo { background:linear-gradient(160deg, #1c1a16, #12110e); color:#6f695d; }
  body.st-donker .sc-card { background:rgba(28,26,22,.62); color:#f1ece2; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.4); }
  body.st-donker .sc-lead { color:#bdb6a7; }
  body.st-donker .sc-form input, body.st-donker .sc-form textarea { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); }
  body.st-donker .sc-form ::placeholder { color:#8d8678; }
  body.st-donker .sc-ok { color:#a9a293; }
  body.st-donker .sc-msg { color:#a9a293; } body.st-donker .sc-msg.err { color:#e08a74; } body.st-donker .sc-msg.done { color:#f4f1ea; }
  body.st-donker .sc-next p { color:#bdb6a7; }
  body.st-donker .sc-next-links a { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03); color:#f4f1ea; }
  body.st-donker .sc-next-links a:hover, body.st-donker .sc-next-links a:focus-visible { border-color:var(--gold-2); }
  body.st-donker .sc-next-links span { color:#a9a293; }
  body.st-donker .sfoot { color:#bdb6a7; border-top-color:rgba(255,255,255,.08); --logo-ink:#ece7dc; }
  body.st-donker .sfoot h4 { color:#f4f1ea; }
  body.st-donker .sfoot .bottom { color:#8d8678; border-top-color:rgba(255,255,255,.08); }
  body.st-warm .sc-form input, body.st-warm .sc-form textarea { background:#fffdf9; }
  /* brede schermen: kleinere foto in 4:5 zonder bijsnijden, onderkant gelijk met "Neem contact op"
     (Jonathan 5 okt: foto te groot op fullscreen). Vaste kolombreedte: een kolom die zijn breedte uit de formulierhoogte
     afleidt is cirkelvormig en schoof bij resizen over het formulier. Smaller dan 1180px blijft het oude raster. */
  @media (min-width:1180px) { .sc .w { grid-template-columns:440px 1fr; align-items:end; } }
  .sc-form .sc-msg:empty { min-height:0; } .sc-form:has(> .sc-msg:empty) { margin-bottom:-16px; }
  @media (max-width:860px) { .sc .w { grid-template-columns:1fr; gap:40px; } .sc-photo { max-width:420px; } .sfoot .cols { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px) { .sc-form { grid-template-columns:1fr; } .sfoot .cols { grid-template-columns:1fr; } }