:root{color-scheme:dark;--background:#3a484f;--gold:#d3aa6d;--text:#fff;--muted:#d3d8da;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--background)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--background)}
.page{height:100vh;height:100dvh;width:100%;padding:clamp(20px,4vh,48px) clamp(24px,5vw,96px);padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(16px,3vh,36px);max-width:2200px;margin:auto}
.brand{width:clamp(210px,23vw,340px);aspect-ratio:3;overflow:hidden}.brand img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.02)}
.intro{min-height:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(24px,3vw,56px);align-items:center}.copy{min-width:0}.eyebrow{font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);line-height:1.5;margin:0 0 20px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,4.3vw,76px);font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:0 0 24px}h1 em{font-weight:400;color:var(--gold)}.description{font-size:1.25rem;line-height:1.65;max-width:100%;color:var(--muted);margin:0}.social{margin-top:clamp(20px,4vh,42px)}.social p{font-size:1rem;margin:0 0 14px;color:var(--muted)}a{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--gold);padding:0 0 12px;transition:color .18s}a:hover{color:var(--gold)}a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}a svg{width:26px;height:26px;flex:none;color:var(--gold)}a span{font-size:1rem}a small{display:block;font-size:.75rem;color:var(--muted);margin-top:5px}.arrow{margin-left:24px;font-size:1.5rem}
.photo{margin:0;min-height:0;min-width:0;position:relative;width:100%;max-width:600px;justify-self:end}.photo>img{display:block;width:100%;height:auto;max-height:57vh;max-height:57dvh;object-fit:contain}.photo figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:16px;color:var(--muted);font-size:.75rem;letter-spacing:.06em}.photo figcaption span{color:var(--gold)}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff26;padding-top:16px;font-size:.75rem;color:var(--muted);letter-spacing:.045em}
@media(max-width:760px) and (orientation:portrait){.page{padding-left:24px;padding-right:24px;gap:16px}.brand{width:210px}.intro{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:20px;align-items:start}.eyebrow{font-size:.6875rem;margin-bottom:10px}h1{font-size:clamp(32px,8vw,50px);margin-bottom:14px}.description{font-size:1.0625rem;line-height:1.55;max-width:100%}.social{margin-top:16px}.social p{margin-bottom:10px}.photo{width:85%;height:100%;justify-self:center;display:flex;flex-direction:column;align-items:flex-start;min-height:0}.photo>img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:left center}.photo figcaption{display:none}footer{padding-top:12px;font-size:.625rem;gap:10px}a{padding-bottom:8px}a small{margin-top:3px}}
@media(max-height:700px){.page{gap:12px}.brand{width:180px}.eyebrow{margin-bottom:10px}h1{font-size:clamp(28px,3.7vw,48px);margin-bottom:14px}.description{line-height:1.5}.social{margin-top:16px}.social p{margin-bottom:8px}footer{padding-top:10px}}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){.page{padding-top:12px;padding-bottom:12px}.brand{width:165px}.intro{gap:14px}h1{font-size:32px}.description{font-size:1rem}.social{margin-top:12px}.social p{font-size:.9375rem}}
@media(orientation:landscape) and (max-height:500px){.page{padding:10px 24px;gap:8px}.brand{width:130px}.intro{gap:24px;grid-template-columns:1.4fr 1fr}.eyebrow{font-size:.625rem;margin-bottom:6px}h1{font-size:28px;margin-bottom:8px}.description{font-size:.9375rem;line-height:1.4}.social{margin-top:10px}.social p{font-size:.75rem;margin-bottom:6px}a span{font-size:.8125rem}a small{font-size:.6875rem}a{padding-bottom:5px;gap:8px}a svg{width:20px;height:20px}.photo figcaption{margin-top:8px;font-size:.625rem}footer{font-size:.625rem;padding-top:6px}}
@media(prefers-reduced-motion:reduce){a{transition:none}}

/* Mobiele verfijning; de bestaande desktopindeling blijft intact. */
@media(max-width:760px) and (orientation:portrait){
  .page{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));gap:clamp(14px,2.5dvh,24px)}
  .brand{width:clamp(240px,72vw,310px);max-width:100%;justify-self:center}
  .intro{gap:clamp(18px,3dvh,30px);grid-template-rows:auto minmax(0,1fr)}
  .description{line-height:1.6}
  .social{margin-top:clamp(18px,2.8dvh,26px)}
  .photo{width:88%;align-self:center;height:100%;max-height:26dvh}
  .photo>img{object-position:center}
  footer{padding-top:12px}
}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){
  .page{gap:12px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .brand{width:clamp(225px,68vw,270px)}
  .intro{gap:14px}
  .description{line-height:1.5}
  .social{margin-top:14px}
  footer{padding-top:8px}
}

/* Gelijke mobiele zijmarges en een links uitgelijnd logo. */
@media(max-width:760px) and (orientation:portrait){
  .brand{justify-self:start}
  .photo{width:100%;justify-self:start}
  .photo>img{object-position:left center}
}