scroll-margin-top:90px;}
.work-head{max-width:var(--maxw);margin:0 auto 40px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--line);padding-bottom:18px;}
.work-head h2{font-family:var(--sans);font-weight:400;font-size:1.3rem;}
.work-head a{font-family:var(--cond);font-size:12px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.work-list{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:64px;}
.project{display:grid;grid-template-columns:1.6fr 1fr;gap:0;border:1px solid var(--rule);}
.project.reverse{grid-template-columns:1fr 1.6fr;}
.project.reverse .project-media{order:2;}
.project.reverse .project-panel{order:1;}
.project-media{position:relative;overflow:hidden;aspect-ratio:16/10;}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.project-media:not(.color-panel) img{
  position:absolute;left:0;top:calc(-15% + var(--parallax-y,0px));height:130%;
}
.reduced-motion .project-media:not(.color-panel) img{top:-15% !important;}
.project:hover .project-media img{transform:scale(1.045);}
.reduced-motion .project:hover .project-media img{transform:none;}
.project-media.no-parallax img{top:-15% !important;}
.project:hover .project-media.no-parallax img{transform:none !important;}
/* zoom-out: shows a bit more of the image, less tight a crop (Bij Belle, Brothers Horeca Groep) */
.project-media.zoom-out:not(.color-panel) img{height:118%;top:calc(-9% + var(--parallax-y,0px));}
.reduced-motion .project-media.zoom-out:not(.color-panel) img{top:-9% !important;}
/* Bij Belle tile: the brand-mark artwork is narrower/taller (~1.415:1) than this frame (16:10 = 1.6:1), so give it more room and crop evenly off the top and bottom instead of hugging one edge, to show more of the pattern and keep the logo centered. */
.project-media.no-parallax.zoom-out img{height:110%;top:-5% !important;}
.reduced-motion .project-media.no-parallax.zoom-out img{height:110%;top:-5% !important;}
.project-media.color-panel{background:var(--accent-a);display:flex;align-items:center;justify-content:center;padding:30px;}
.project-media.color-panel img{border-radius:2px;box-shadow:0 30px 60px rgba(0,0,0,.35);}
.project-panel{background:var(--bg-elevated);padding:38px;display:flex;flex-direction:column;justify-content:space-between;}
[data-theme="night"] .project-panel{background:var(--bg-elevated);}
.project-panel .top .name{font-family:var(--sans);font-weight:500;font-size:1.05rem;}
.project-panel .top .disciplines{margin-top:6px;font-size:12px;color:var(--ink-faint);}
.project-panel .desc{margin-top:18px;font-size:14px;color:var(--ink-soft);line-height:1.6;}
.project-panel .bottom{margin-top:24px;}
.project-sector{
  margin-top:20px;padding-top:20px;border-top:var(--line);
  font-family:var(--serif);font-size:1.5rem;
}
.project-sector .label{display:block;margin-bottom:4px;color:var(--ink-faint);}

/* ================= COLLABORATION STATEMENT ================= */
.collab{background:var(--panel-statement);padding:110px var(--pad) 0;transition:background var(--dur);}
.collab-inner{max-width:1200px;margin:0 auto;border-top:2px solid var(--statement-text);padding-top:34px;padding-bottom:70px;}
.collab-inner p{
  font-family:var(--serif);color:var(--statement-text);font-size:var(--fs-h2);line-height:1.22;margin:0;
}
.collab-inner .readmore{margin-top:30px;display:inline-block;color:var(--statement-text);}
.collab-strip{display:grid;grid-template-columns:repeat(3,1fr);height:220px;overflow:hidden;}
.collab-strip img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15);}

/* ================= ABOUT PREVIEW ================= */
.about-prev{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;}
.about-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.about-prev::before{content:"";position:absolute;inset:0;background:var(--scrim);}
.about-prev::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 75% at 50% 50%, rgba(0,0,0,.4), rgba(0,0,0,.15) 60%, transparent 85%);pointer-events:none;}
.about-prev-content{position:relative;z-index:2;color:#fff;max-width:820px;padding:0 24px;}
.about-prev-content h2{font-family:var(--serif);font-size:var(--fs-hero);line-height:1.05;}
.about-prev-content p{margin:22px auto 0;max-width:52ch;font-size:14px;font-weight:300;color:rgba(255,255,255,.85);}
.about-btn{
  margin-top:28px;display:inline-block;background:#100D08;color:#F7EED4;border-radius:100px;
  padding:14px 30px;font-size:13px;font-weight:500;
}

/* ================= CONTACT ================= */
.contact{background:var(--panel-human);padding:110px var(--pad) 50px;scroll-margin-top:70px;transition:background var(--dur);}
.contact-inner{max-width:var(--maxw);margin:0 auto;}
.contact h2{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.08;}
.contact .sub{margin-top:16px;font-size:14px;color:var(--ink-soft);}
.footer-grid{margin-top:70px;padding-top:26px;border-top:var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.footer-grid b{display:block;font-family:var(--sans);font-weight:600;margin-bottom:14px;font-size:13px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-soft);}
.footer-grid ul a:hover{color:var(--ink);}
.footer-copy{grid-column:4;text-align:right;font-size:12.5px;color:var(--ink-faint);align-self:end;}
.footer-logo{margin-top:70px;display:flex;justify-content:center;padding-top:30px;border-top:2px solid var(--ink);}
.footer-logo img{height:120px;display:block;}
.footer-logo .logo-black{display:block;}
.footer-logo .logo-white{display:none;}
html[data-theme="night"] .footer-logo .logo-black{display:none;}
html[data-theme="night"] .footer-logo .logo-white{display:block;}

/* Fullscreen menu logo (always on near-black, always white ink).
   Vertical/stacked mark needs more height than the old horizontal
   wordmark did to stay legible at three lines. */
.fullnav-logo{display:inline-block;}
.fullnav-logo img{height:var(--logo-h);width:auto;display:block;} /* shared with .nav-logo — identical size/ratio via --logo-h */

/* ================= SIDE RAIL (persistent) ================= */
.side-rail{
  position:fixed;left:14px;top:60%;transform:translateY(-50%);z-index:400;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:11px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.25);
  mix-blend-mode:difference;
}
.side-rail .vlabel{writing-mode:vertical-rl;letter-spacing:.06em;}
.side-rail .vline{width:1px;height:50px;background:currentColor;opacity:.5;}
.side-rail button{background:transparent;border:none;color:inherit;font-size:13px;}
@media (max-width:900px){.side-rail{display:none;}}

/* ================= REVEAL ANIMATION (generic) ================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reduced-motion .reveal{opacity:1;transform:none;transition:none;}
.reduced-motion .plan3-step{transition:none;opacity:1;transform:none;}

/* ================= MOBILE ================= */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-slider{height:62vh;}
  .hero-copy{padding:44px var(--pad) 56px;gap:24px;}
  .hero-blocks{grid-template-columns:1fr;gap:20px;}
  .positioning{padding:70px var(--pad);}
  .positioning .grid{grid-template-columns:1fr;gap:34px;}
  .plan3{padding:70px var(--pad);}
  .plan3-steps{grid-template-columns:1fr;gap:0;}
  .plan3-step{border-bottom:1px solid var(--rule);}
  .work{padding:70px var(--pad) 10px;}
  .project,.project.reverse{grid-template-columns:1fr;}
  .project.reverse .project-media,.project.reverse .project-panel{order:initial;}
  .collab{padding:70px var(--pad) 0;}
  .collab-inner{padding-bottom:40px;}
  .collab-strip{grid-template-columns:repeat(3,1fr);height:120px;}
  .about-prev{min-height:64vh;}
  .contact{padding:70px var(--pad) 34px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-copy{grid-column:1/-1;text-align:left;margin-top:10px;}
  .nav-phone{display:none;}
  .fullnav-bottom{gap:30px;}
}