/* Original opening composition restored from main after Martijn's review.
   Separate selectors prevent the new content layouts changing the intro. */
:root { --bg:#1e1e1e; --text:#ede7e4; --accent:#e04931; }
.site-header { position:fixed; top:0; left:0; width:100%; max-width:none; min-height:100px; padding:0 40px; border:0; z-index:1000; background:rgba(30,30,30,.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .3s ease; }
.site-header.hide-nav { transform:translateY(-100%); }
.site-header .brand { font-size:16px; font-weight:500; gap:8px; letter-spacing:0; }
.site-header .brand img { height:40px; width:auto; margin-top:-12px; }
.site-header nav { gap:28px; }
.site-header nav>a,.nav-services>a { font-size:16px; font-weight:500; }
.site-header .nav-cta { border-radius:8px; background:#e04931; color:white; padding:12px 24px; box-shadow:-10px 8px 20px #0006; min-height:0; }
.site-header .nav-cta:hover { background:#c13c29; color:white!important; }
.service-links { top:44px; font-size:11px; }
body:not(.home-page) main { padding-top:115px; }
.home-page main { max-width:none; padding:0; }
.home-content { max-width:1440px; padding:0 5%; margin:auto; }
.preview-notice { position:fixed; bottom:0; left:0; right:0; z-index:1100; padding:5px 12px; }
.home-page #botje-section { position:relative; margin:0 0 -140px; padding:0 0 2rem; min-height:100vh; z-index:5; }
.botje-wrapper { position:sticky; top:calc(50vh - 100px); display:flex; justify-content:center; align-items:center; width:100%; }
.botje-inner { display:flex; justify-content:center; align-items:center; width:760px; max-width:100%; }
#botje-sequence,#botje-fallback { display:block; width:90%; max-width:760px; height:auto; aspect-ratio:760/590; margin:0 auto; pointer-events:none; }
#botje-sequence[hidden],#botje-fallback[hidden] { display:none; }
.original-intro { scroll-margin-top:150px; }
.original-hero-card { position:relative; z-index:6; margin:3rem auto; max-width:960px; padding:2rem; border-radius:1.5rem; text-align:center; }
.original-intro-line,.original-title,.original-highlighted-role,.original-title-subline { position:relative; text-shadow:-6px 1px 5px #000d; }
.original-intro-line { font-family:Inter,Arial,sans-serif; font-size:clamp(1rem,3vw,1.5rem); font-weight:400; line-height:1.3; margin:clamp(1rem,4vh,2rem) 0 .75rem; }
.original-title { font-family:Poppins,Arial,sans-serif; font-size:clamp(2.2rem,6vw,4rem); font-weight:800; line-height:1.1; letter-spacing:0; margin:0 0 1.5rem .2em; }
.original-highlighted-role { display:flex; flex-direction:column; gap:.1em; margin:.5rem 0; font-size:1.5em; font-weight:800; line-height:1.2; letter-spacing:-.015em; }
.original-and { font-size:.5em; line-height:1; }
.original-title-subline { font-family:Inter,Arial,sans-serif; font-size:clamp(1.2rem,3.5vw,1.8rem); font-style:italic; font-weight:400; line-height:1.5; letter-spacing:.005em; opacity:.85; }
.original-title-subline img { width:1.6em; height:1.6em; display:inline-block; vertical-align:middle; transform:translateY(-.25em); }
.original-connect { display:inline-flex; background:#e04931; padding:.75rem 1.5rem; margin:4rem auto 0; color:white; border-radius:8px; align-items:center; justify-content:center; font-size:1rem; gap:.5em; font-weight:600; box-shadow:-10px 8px 20px #0006; }
.original-connect span { font-size:1.5rem; }
.original-connect:hover { background:#c13c29; }
.original-logo-ticker { height:6rem; overflow:hidden; display:flex; align-items:center; max-width:1440px; margin:0 auto 4rem; border-top:2px solid #ede7e4; border-bottom:2px solid #ede7e4; position:relative; }
.original-ticker-track { display:flex; width:max-content; animation:original-ticker 15s linear infinite; }
.original-ticker-slide { display:flex; flex-shrink:0; align-items:center; }
.original-ticker-slide img { width:160px; height:60px; object-fit:contain; padding:0 16px; opacity:.95; }
@keyframes original-ticker { to { transform:translateX(-50%); } }
.original-project1 { max-width:1440px; margin:1.5rem auto 3rem; padding:0 16px; }
.original-project1 video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:1.5rem; background:#1e1e1e; }
.original-project1 figcaption { text-align:center; }
.home-content .section:first-child { padding-top:65px; }
.service-card,.media-placeholder { border-radius:1.5rem; }
.button { border-radius:8px; }
.button:not(:hover) { color:white; }
@media(min-width:1024px) {
  .botje-wrapper { position:relative; transform:translateY(12vh); }
  .original-intro { padding:3rem 0; display:flex; justify-content:center; }
  .original-hero-card { width:100%; }
  .original-intro-line { font-size:clamp(1.6rem,2.2vw,2.4rem); margin-bottom:1.2rem; }
  .original-title { font-size:clamp(3rem,5vw,5.2rem); line-height:1.1; margin-bottom:1rem; }
  .original-highlighted-role { font-size:clamp(4rem,8vw,8rem); line-height:1.05; }
  .original-title-subline { font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.4; margin-top:1.2rem; }
  .original-connect { font-size:1.2rem; padding:1.2rem 2.6rem; margin-top:2.4rem; }
  .original-logo-ticker { height:8rem; padding:1.5rem 1rem; border:2px solid #ede7e4; border-radius:1rem; margin:-5rem auto 2rem; z-index:7; }
}
@media(max-width:1000px) {
  .site-header { min-height:80px; padding:0 24px; flex-wrap:nowrap; }
  .site-header .brand img { margin-top:0; height:36px; }
  .site-header .menu-toggle { border:0; font-size:16px; }
  .site-header nav { position:absolute; top:90px; left:16px; right:16px; width:auto; max-width:360px; margin:auto; padding:20px; border-radius:20px; background:#ede7e4; color:#1e1e1e; box-shadow:0 2px 5px #0008; gap:0; }
  .site-header nav a { color:#1e1e1e; }
  .service-links { color:#42443c; }
  .site-header nav .nav-cta { color:white; }
  body:not(.home-page) main { padding-top:85px; }
  .home-content { padding:0 6%; }
  .original-hero-card { padding:2rem 1rem; }

  .original-logo-ticker { margin-bottom:2rem; }
}
@media(max-width:360px) { .original-highlighted-role { font-size:1.2em; } }
@media(prefers-reduced-motion:reduce) { .original-ticker-track { animation:none; } .site-header { transition:none; } }

@media(max-width:767px) { .original-project1 { padding:0 2vw; } .original-project1 video { aspect-ratio:1080/1914; object-fit:cover; } }
@media(min-width:768px) { .original-project1 { padding:0; } }
/* Existing CSE and Jan media, shared by the homepage and case pages. */
.project-film { margin:30px 0; }
.project-film video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#1e1e1e; border-radius:24px; }
.mobile-film { display:none; }
.case-thumbnail { width:100%; aspect-ratio:1.5; object-fit:cover; border-radius:24px; }
.existing-work { border-top:1px solid var(--line); }
.existing-work>.lead { margin-top:-15px; margin-bottom:30px; }
.cse-gallery { margin:40px 0 20px; }
.gallery-heading { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-bottom:22px; }
.gallery-heading h3 { font-size:26px; }
.gallery-buttons { display:flex; gap:10px; }
.gallery-buttons button { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--text); font-size:22px; }
.gallery-buttons button:hover { border-color:var(--accent); }
.cse-slides { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-color:var(--accent) var(--panel); padding-bottom:18px; }
.cse-slides:focus { outline:none; }
.cse-slides:focus-visible { outline:2px solid #dedbd6; outline-offset:5px; }
.cse-slides figure { flex:0 0 calc((100% - 20px)/2); min-width:0; scroll-snap-align:start; }
.cse-slides img { width:100%; height:auto; border-radius:20px; }
.cse-slides figcaption { font-size:12px; }
@media(max-width:767px) {
 .project-film video { aspect-ratio:1; }
 .mobile-film { display:block; }
 .cse-slides figure { flex-basis:90%; }
 .cse-slides { gap:12px; }
 .gallery-heading h3 { font-size:23px; }
 .gallery-buttons { gap:6px; }
 .case-thumbnail { min-height:0; }
}
/* Original-style slide pagination: neutral dots and one orange active dot. */
.cse-slides { scrollbar-width:none; padding-bottom:0; }
.cse-slides::-webkit-scrollbar { display:none; }
.gallery-dots { display:flex; justify-content:center; align-items:center; margin-top:16px; }
.gallery-dot { display:grid; place-items:center; width:26px; height:32px; padding:0; border:0; background:transparent; }
.gallery-dot::before { content:''; width:9px; height:9px; border-radius:50%; background:#4b4b4b; }
.gallery-dot[aria-pressed="true"]::before { background:#e04931; }
.gallery-dot:hover::before { background:#a29c99; }
.gallery-dot[aria-pressed="true"]:hover::before { background:#e04931; }
@media(max-width:767px) { .gallery-loop-copy { display:none; } }
.cse-slides { cursor:grab; user-select:none; -webkit-user-select:none; }
.cse-slides img { -webkit-user-drag:none; }
.cse-slides.dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
/* Mobile menu icon, with an ample hit area and accessible button label. */
.site-header .menu-toggle { width:48px; height:48px; padding:10px; }
.hamburger { display:flex; flex-direction:column; justify-content:space-between; width:25px; height:18px; margin:auto; }
.hamburger>span { display:block; height:3px; width:100%; background:var(--text); }

.case-main-image img { display:block; width:100%; height:auto; border-radius:24px; }

.link-arrow { display:inline-block; width:0.85em; height:0.85em; vertical-align:-0.05em; flex-shrink:0; }